Minimize :host styles

bendera · bendera · commit 1f808b704568 · 2025-07-29T23:50:16.000+02:00
diff --git a/src/includes/form-button-widget/base.styles.ts b/src/includes/form-button-widget/base.styles.ts
@@ -3,12 +3,7 @@ import {css} from 'lit';
 export default [
   css`
     :host {
-      color: var(--vscode-foreground, #cccccc);
       display: inline-block;
-      font-family: var(--vscode-font-family, sans-serif);
-      font-size: var(--vscode-font-size, 13px);
-      font-weight: var(--vscode-font-weight, normal);
-      line-height: 18px;
     }
 
     :host(:focus) {
@@ -20,9 +15,13 @@ export default [
     }
 
     .wrapper {
+      color: var(--vscode-foreground, #cccccc);
       cursor: pointer;
       display: block;
+      font-family: var(--vscode-font-family, sans-serif);
       font-size: var(--vscode-font-size, 13px);
+      font-weight: var(--vscode-font-weight, normal);
+      line-height: 18px;
       margin-bottom: 4px;
       margin-top: 4px;
       min-height: 18px;
@@ -35,15 +34,15 @@ export default [
     }
 
     input {
-      position: absolute;
+      clip: rect(1px, 1px, 1px, 1px);
       height: 1px;
       left: 9px;
       margin: 0;
-      top: 17px;
-      width: 1px;
       overflow: hidden;
-      clip: rect(1px, 1px, 1px, 1px);
+      position: absolute;
+      top: 17px;
       white-space: nowrap;
+      width: 1px;
     }
 
     .icon {
diff --git a/src/vscode-context-menu-item/vscode-context-menu-item.styles.ts b/src/vscode-context-menu-item/vscode-context-menu-item.styles.ts
@@ -6,10 +6,6 @@ const styles: CSSResultGroup = [
   css`
     :host {
       display: block;
-      font-family: var(--vscode-font-family, sans-serif);
-      font-size: var(--vscode-font-size, 13px);
-      font-weight: var(--vscode-font-weight, normal);
-      line-height: 1.4em;
       outline: none;
       position: relative;
     }
@@ -18,6 +14,10 @@ const styles: CSSResultGroup = [
       background-color: var(--vscode-menu-background, #1f1f1f);
       color: var(--vscode-menu-foreground, #cccccc);
       display: flex;
+      font-family: var(--vscode-font-family, sans-serif);
+      font-size: var(--vscode-font-size, 13px);
+      font-weight: var(--vscode-font-weight, normal);
+      line-height: 1.4em;
       user-select: none;
       white-space: nowrap;
     }
diff --git a/src/vscode-context-menu/vscode-context-menu.styles.ts b/src/vscode-context-menu/vscode-context-menu.styles.ts
@@ -6,10 +6,6 @@ const styles: CSSResultGroup = [
   css`
     :host {
       display: block;
-      font-family: var(--vscode-font-family, sans-serif);
-      font-size: var(--vscode-font-size, 13px);
-      font-weight: var(--vscode-font-weight, normal);
-      line-height: 1.4em;
       position: relative;
     }
 
@@ -21,6 +17,10 @@ const styles: CSSResultGroup = [
       border-width: 1px;
       box-shadow: 0 2px 8px var(--vscode-widget-shadow, rgba(0, 0, 0, 0.36));
       color: var(--vscode-menu-foreground, #cccccc);
+      font-family: var(--vscode-font-family, sans-serif);
+      font-size: var(--vscode-font-size, 13px);
+      font-weight: var(--vscode-font-weight, normal);
+      line-height: 1.4em;
       padding: 4px 0;
       white-space: nowrap;
     }
diff --git a/src/vscode-divider/vscode-divider.styles.ts b/src/vscode-divider/vscode-divider.styles.ts
@@ -5,11 +5,14 @@ const styles: CSSResultGroup = [
   defaultStyles,
   css`
     :host {
-      background-color: var(--vscode-foreground, #cccccc);
       display: block;
-      height: 1px;
       margin-bottom: 10px;
       margin-top: 10px;
+    }
+
+    div {
+      background-color: var(--vscode-foreground, #cccccc);
+      height: 1px;
       opacity: 0.4;
     }
   `,
diff --git a/src/vscode-divider/vscode-divider.ts b/src/vscode-divider/vscode-divider.ts
@@ -16,7 +16,7 @@ export class VscodeDivider extends VscElement {
   override role: 'separator' | 'presentation' = 'separator';
 
   override render(): TemplateResult {
-    return html``;
+    return html`<div></div>`;
   }
 }
 
diff --git a/src/vscode-progress-ring/vscode-progress-ring.styles.ts b/src/vscode-progress-ring/vscode-progress-ring.styles.ts
@@ -5,7 +5,6 @@ const styles: CSSResultGroup = [
   defaultStyles,
   css`
     :host {
-      align-items: center;
       display: block;
       height: 28px;
       margin: 0;
diff --git a/src/vscode-tab-header/vscode-tab-header.styles.ts b/src/vscode-tab-header/vscode-tab-header.styles.ts
@@ -5,23 +5,30 @@ const styles: CSSResultGroup = [
   defaultStyles,
   css`
     :host {
-      border-bottom: 1px solid transparent;
       cursor: pointer;
       display: block;
-      margin-bottom: -1px;
+      user-select: none;
+    }
+
+    .wrapper {
+      align-items: center;
+      border-bottom: 1px solid transparent;
+      color: var(--vscode-foreground);
+      display: flex;
+      min-height: 20px;
       overflow: hidden;
       padding: 7px 8px;
+      position: relative;
       text-overflow: ellipsis;
-      user-select: none;
       white-space: nowrap;
     }
 
-    :host([active]) {
+    :host([active]) .wrapper {
       border-bottom-color: var(--vscode-panelTitle-activeForeground);
       color: var(--vscode-panelTitle-activeForeground);
     }
 
-    :host([panel]) {
+    :host([panel]) .wrapper {
       border-bottom: 0;
       margin-bottom: 0;
       padding: 0;
diff --git a/src/vscode-tabs/vscode-tabs.styles.ts b/src/vscode-tabs/vscode-tabs.styles.ts
@@ -33,6 +33,7 @@ const styles: CSSResultGroup = [
 
     .tablist {
       display: flex;
+      margin-bottom: -1px;
     }
 
     slot[name='addons'] {
diff --git a/src/vscode-textarea/vscode-textarea.styles.ts b/src/vscode-textarea/vscode-textarea.styles.ts
@@ -6,7 +6,7 @@ const styles: CSSResultGroup = [
   css`
     :host {
       display: inline-block;
-      height: 40px;
+      height: auto;
       position: relative;
       width: 320px;
     }
diff --git a/src/vscode-textfield/vscode-textfield.styles.ts b/src/vscode-textfield/vscode-textfield.styles.ts
@@ -8,6 +8,11 @@ const styles: CSSResultGroup = [
   defaultStyles,
   css`
     :host {
+      display: inline-block;
+      width: 320px;
+    }
+
+    .root {
       align-items: center;
       background-color: var(--vscode-settings-textInputBackground, #313131);
       border-color: var(
@@ -19,10 +24,10 @@ const styles: CSSResultGroup = [
       border-width: 1px;
       box-sizing: border-box;
       color: var(--vscode-settings-textInputForeground, #cccccc);
-      display: inline-flex;
+      display: flex;
       max-width: 100%;
       position: relative;
-      width: 320px;
+      width: 100%;
     }
 
     :host([focused]) {
diff --git a/src/vscode-textfield/vscode-textfield.ts b/src/vscode-textfield/vscode-textfield.ts
@@ -352,33 +352,35 @@ export class VscodeTextfield
 
   override render(): TemplateResult {
     return html`
-      <slot name="content-before"></slot>
-      <input
-        id="input"
-        type=${this.type}
-        ?autofocus=${this.autofocus}
-        autocomplete=${ifDefined(this.autocomplete)}
-        aria-label=${this.label}
-        ?disabled=${this.disabled}
-        max=${ifDefined(this.max)}
-        maxlength=${ifDefined(this.maxLength)}
-        min=${ifDefined(this.min)}
-        minlength=${ifDefined(this.minLength)}
-        ?multiple=${this.multiple}
-        name=${ifDefined(this.name)}
-        pattern=${ifDefined(this.pattern)}
-        placeholder=${ifDefined(this.placeholder)}
-        ?readonly=${this.readonly}
-        ?required=${this.required}
-        step=${ifDefined(this.step)}
-        .value=${this._value}
-        @blur=${this._onBlur}
-        @change=${this._onChange}
-        @focus=${this._onFocus}
-        @input=${this._onInput}
-        @keydown=${this._onKeyDown}
-      >
-      <slot name="content-after"></slot>
+      <div class="root">
+        <slot name="content-before"></slot>
+        <input
+          id="input"
+          type=${this.type}
+          ?autofocus=${this.autofocus}
+          autocomplete=${ifDefined(this.autocomplete)}
+          aria-label=${this.label}
+          ?disabled=${this.disabled}
+          max=${ifDefined(this.max)}
+          maxlength=${ifDefined(this.maxLength)}
+          min=${ifDefined(this.min)}
+          minlength=${ifDefined(this.minLength)}
+          ?multiple=${this.multiple}
+          name=${ifDefined(this.name)}
+          pattern=${ifDefined(this.pattern)}
+          placeholder=${ifDefined(this.placeholder)}
+          ?readonly=${this.readonly}
+          ?required=${this.required}
+          step=${ifDefined(this.step)}
+          .value=${this._value}
+          @blur=${this._onBlur}
+          @change=${this._onChange}
+          @focus=${this._onFocus}
+          @input=${this._onInput}
+          @keydown=${this._onKeyDown}
+        >
+        <slot name="content-after"></slot>
+      </div>
     `;
   }
 }
diff --git a/src/vscode-toolbar-container/vscode-toolbar-container.styles.ts b/src/vscode-toolbar-container/vscode-toolbar-container.styles.ts
@@ -5,6 +5,10 @@ const styles: CSSResultGroup = [
   defaultStyles,
   css`
     :host {
+      display: block;
+    }
+
+    div {
       gap: 4px;
       display: flex;
       align-items: center;
diff --git a/src/vscode-toolbar-container/vscode-toolbar-container.ts b/src/vscode-toolbar-container/vscode-toolbar-container.ts
@@ -12,7 +12,7 @@ export class VscodeToolbarContainer extends VscElement {
   static override styles = styles;
 
   override render(): TemplateResult {
-    return html` <slot></slot> `;
+    return html`<div><slot></slot></div>`;
   }
 }
 

Original file line number	Diff line number	Diff line change
`@@ -16,7 +16,7 @@ export class VscodeDivider extends VscElement {`
`16`	`16`	`override role: 'separator' \| 'presentation' = 'separator';`
`17`	`17`
`18`	`18`	`override render(): TemplateResult {`
`19`		- return html``;
	`19`	+ return html`<div></div>`;
`20`	`20`	`}`
`21`	`21`	`}`
`22`	`22`
Original file line number	Diff line number	Diff line change
`@@ -33,6 +33,7 @@ const styles: CSSResultGroup = [`
`33`	`33`
`34`	`34`	`.tablist {`
`35`	`35`	`display: flex;`
	`36`	`+ margin-bottom: -1px;`
`36`	`37`	`}`
`37`	`38`
`38`	`39`	`slot[name='addons'] {`
Original file line number	Diff line number	Diff line change
`@@ -6,7 +6,7 @@ const styles: CSSResultGroup = [`
`6`	`6`	css`
`7`	`7`	`:host {`
`8`	`8`	`display: inline-block;`
`9`		`- height: 40px;`
	`9`	`+ height: auto;`
`10`	`10`	`position: relative;`
`11`	`11`	`width: 320px;`
`12`	`12`	`}`