From 47d9dc24029dd8a24742a85f3574d63e46a1199b Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sat, 29 Aug 2026 02:28:56 +0000
Subject: [PATCH 01/31] feat: add size property (small/medium/large) to
 vscode-form-group

Co-authored-by: 171h <40647432+171h@users.noreply.github.com>
---
 .../vscode-form-group.styles.ts               | 21 +++++++++++++
 .../vscode-form-group.test.ts                 | 30 ++++++++++++++++++-
 src/vscode-form-group/vscode-form-group.ts    |  8 +++++
 3 files changed, 58 insertions(+), 1 deletion(-)

diff --git a/src/vscode-form-group/vscode-form-group.styles.ts b/src/vscode-form-group/vscode-form-group.styles.ts
index 9a062fb13..b58ea06a0 100644
--- a/src/vscode-form-group/vscode-form-group.styles.ts
+++ b/src/vscode-form-group/vscode-form-group.styles.ts
@@ -12,6 +12,27 @@ const styles: CSSResultGroup = [
       margin: 15px 0;
     }
 
+    :host([size='small']) {
+      --label-right-margin: 10px;
+      --label-width: 100px;
+
+      margin: 8px 0;
+    }
+
+    :host([size='medium']) {
+      --label-right-margin: 14px;
+      --label-width: 150px;
+
+      margin: 15px 0;
+    }
+
+    :host([size='large']) {
+      --label-right-margin: 18px;
+      --label-width: 200px;
+
+      margin: 22px 0;
+    }
+
     :host([variant='settings-group']) {
       margin: 0;
       padding: 12px 14px 18px;
diff --git a/src/vscode-form-group/vscode-form-group.test.ts b/src/vscode-form-group/vscode-form-group.test.ts
index 186c551f1..9b041ee2d 100644
--- a/src/vscode-form-group/vscode-form-group.test.ts
+++ b/src/vscode-form-group/vscode-form-group.test.ts
@@ -1,9 +1,37 @@
 import {VscodeFormGroup} from './index.js';
-import {expect} from '@open-wc/testing';
+import {expect, fixture, html} from '@open-wc/testing';
 
 describe('vscode-form-group', () => {
   it('is defined', () => {
     const el = document.createElement('vscode-form-group');
     expect(el).to.instanceOf(VscodeFormGroup);
   });
+
+  it('uses medium size by default', async () => {
+    const el = await fixture<VscodeFormGroup>(
+      html`<vscode-form-group></vscode-form-group>`
+    );
+
+    expect(el.size).to.eq('medium');
+    expect(el.getAttribute('size')).to.eq('medium');
+  });
+
+  it('sets the size attribute', async () => {
+    const el = await fixture<VscodeFormGroup>(
+      html`<vscode-form-group size="small"></vscode-form-group>`
+    );
+
+    expect(el.size).to.eq('small');
+  });
+
+  it('reflects the size property', async () => {
+    const el = await fixture<VscodeFormGroup>(
+      html`<vscode-form-group></vscode-form-group>`
+    );
+
+    el.size = 'large';
+    await el.updateComplete;
+
+    expect(el.getAttribute('size')).to.eq('large');
+  });
 });
diff --git a/src/vscode-form-group/vscode-form-group.ts b/src/vscode-form-group/vscode-form-group.ts
index 0033d3647..edfcef554 100644
--- a/src/vscode-form-group/vscode-form-group.ts
+++ b/src/vscode-form-group/vscode-form-group.ts
@@ -5,6 +5,8 @@ import styles from './vscode-form-group.styles.js';
 
 export type FormGroupVariant = 'horizontal' | 'vertical' | 'settings-group';
 
+export type FormGroupSize = 'small' | 'medium' | 'large';
+
 /**
  * @tag vscode-form-group
  *
@@ -18,6 +20,12 @@ export class VscodeFormGroup extends VscElement {
   @property({reflect: true})
   variant: FormGroupVariant = 'horizontal';
 
+  /**
+   * The size of the form group. The `medium` size is the default.
+   */
+  @property({reflect: true})
+  size: FormGroupSize = 'medium';
+
   override render(): TemplateResult {
     return html`
       <div class="wrapper">

From b755d9f5bd7a02cc4e3626ea340eae26a5754a8d Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sat, 29 Aug 2026 02:29:38 +0000
Subject: [PATCH 02/31] refactor: remove redundant base margin from
 vscode-form-group styles

Co-authored-by: 171h <40647432+171h@users.noreply.github.com>
---
 src/vscode-form-group/vscode-form-group.styles.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/vscode-form-group/vscode-form-group.styles.ts b/src/vscode-form-group/vscode-form-group.styles.ts
index b58ea06a0..c6902b68c 100644
--- a/src/vscode-form-group/vscode-form-group.styles.ts
+++ b/src/vscode-form-group/vscode-form-group.styles.ts
@@ -9,7 +9,6 @@ const styles: CSSResultGroup = [
       --label-width: 150px;
 
       display: block;
-      margin: 15px 0;
     }
 
     :host([size='small']) {

From 50d01b564ca140bf238a61f1caa6083c5b1f6a9b Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sat, 29 Aug 2026 02:43:08 +0000
Subject: [PATCH 03/31] feat: add size property to all form control components

Co-authored-by: 171h <40647432+171h@users.noreply.github.com>
---
 .../FormButtonWidgetBase.ts                   |  7 +++++
 .../form-button-widget/base.styles.ts         | 31 ++++++++++++++++++-
 src/includes/form-control-size.ts             |  5 +++
 src/includes/vscode-select/styles.ts          | 29 ++++++++++++++++-
 .../vscode-select/vscode-select-base.ts       |  7 +++++
 src/vscode-button/vscode-button.styles.ts     | 25 ++++++++++++++-
 src/vscode-button/vscode-button.test.ts       | 19 ++++++++++++
 src/vscode-button/vscode-button.ts            |  8 +++++
 src/vscode-checkbox/vscode-checkbox.test.ts   | 19 ++++++++++++
 .../vscode-form-group.styles.ts               |  2 ++
 src/vscode-form-group/vscode-form-group.ts    |  4 ++-
 .../vscode-multi-select.test.ts               | 19 ++++++++++++
 src/vscode-radio/vscode-radio.test.ts         | 15 +++++++++
 .../vscode-single-select.test.ts              | 19 ++++++++++++
 src/vscode-textarea/vscode-textarea.styles.ts | 13 +++++++-
 src/vscode-textarea/vscode-textarea.test.ts   | 19 ++++++++++++
 src/vscode-textarea/vscode-textarea.ts        |  8 +++++
 .../vscode-textfield.styles.ts                | 23 +++++++++++++-
 src/vscode-textfield/vscode-textfield.test.ts | 19 ++++++++++++
 src/vscode-textfield/vscode-textfield.ts      |  8 +++++
 20 files changed, 293 insertions(+), 6 deletions(-)
 create mode 100644 src/includes/form-control-size.ts

diff --git a/src/includes/form-button-widget/FormButtonWidgetBase.ts b/src/includes/form-button-widget/FormButtonWidgetBase.ts
index 232795ded..f8e9bfddb 100644
--- a/src/includes/form-button-widget/FormButtonWidgetBase.ts
+++ b/src/includes/form-button-widget/FormButtonWidgetBase.ts
@@ -1,10 +1,17 @@
 import {property} from 'lit/decorators.js';
 import {VscElement} from '../VscElement.js';
+import {FormControlSize} from '../form-control-size.js';
 
 export class FormButtonWidgetBase extends VscElement {
   @property({type: Boolean, reflect: true})
   focused = false;
 
+  /**
+   * The size of the component. The `medium` size is the default.
+   */
+  @property({reflect: true})
+  size: FormControlSize = 'medium';
+
   constructor() {
     super();
   }
diff --git a/src/includes/form-button-widget/base.styles.ts b/src/includes/form-button-widget/base.styles.ts
index 5fc6e7762..29e4c903d 100644
--- a/src/includes/form-button-widget/base.styles.ts
+++ b/src/includes/form-button-widget/base.styles.ts
@@ -19,7 +19,10 @@ export default [
       cursor: pointer;
       display: block;
       font-family: var(--vscode-font-family, sans-serif);
-      font-size: var(--vscode-font-size, 13px);
+      font-size: var(
+        --vsc-form-control-font-size,
+        var(--vscode-font-size, 13px)
+      );
       font-weight: var(--vscode-font-weight, normal);
       line-height: 18px;
       margin-bottom: 4px;
@@ -29,6 +32,32 @@ export default [
       user-select: none;
     }
 
+    :host([size='small']) {
+      --vsc-form-control-font-size: 12px;
+    }
+
+    :host([size='large']) {
+      --vsc-form-control-font-size: 15px;
+    }
+
+    :host([size='small']) .icon {
+      height: 16px;
+      width: 16px;
+    }
+
+    :host([size='large']) .icon {
+      height: 20px;
+      width: 20px;
+    }
+
+    :host([size='small']) .label-inner {
+      padding-left: 25px;
+    }
+
+    :host([size='large']) .label-inner {
+      padding-left: 29px;
+    }
+
     :host([disabled]) .wrapper {
       cursor: default;
     }
diff --git a/src/includes/form-control-size.ts b/src/includes/form-control-size.ts
new file mode 100644
index 000000000..53e08ea5d
--- /dev/null
+++ b/src/includes/form-control-size.ts
@@ -0,0 +1,5 @@
+/**
+ * Size options of the form control components. The `medium` size is the default and matches
+ * the regular VS Code sizing.
+ */
+export type FormControlSize = 'small' | 'medium' | 'large';
diff --git a/src/includes/vscode-select/styles.ts b/src/includes/vscode-select/styles.ts
index 1758d9f3a..cabe3ed75 100644
--- a/src/includes/vscode-select/styles.ts
+++ b/src/includes/vscode-select/styles.ts
@@ -12,6 +12,30 @@ export default [
       width: 320px;
     }
 
+    :host([size='small']) {
+      --vsc-form-control-font-size: 12px;
+    }
+
+    :host([size='large']) {
+      --vsc-form-control-font-size: 15px;
+    }
+
+    :host([size='small']) .select-face {
+      padding: 2px 4px;
+    }
+
+    :host([size='large']) .select-face {
+      padding: 4px 4px;
+    }
+
+    :host([size='small']) .combobox-input {
+      padding: 3px 4px;
+    }
+
+    :host([size='large']) .combobox-input {
+      padding: 5px 4px;
+    }
+
     .main-slot {
       display: none;
     }
@@ -26,7 +50,10 @@ export default [
       box-sizing: border-box;
       color: var(--vscode-settings-dropdownForeground, #cccccc);
       font-family: var(--vscode-font-family, sans-serif);
-      font-size: var(--vscode-font-size, 13px);
+      font-size: var(
+        --vsc-form-control-font-size,
+        var(--vscode-font-size, 13px)
+      );
       font-weight: var(--vscode-font-weight, normal);
       line-height: 18px;
       position: relative;
diff --git a/src/includes/vscode-select/vscode-select-base.ts b/src/includes/vscode-select/vscode-select-base.ts
index 66ce7ead0..3fe0e15b6 100644
--- a/src/includes/vscode-select/vscode-select-base.ts
+++ b/src/includes/vscode-select/vscode-select-base.ts
@@ -9,6 +9,7 @@ import '../../vscode-option/index.js';
 import {VscodeOption} from '../../vscode-option/index.js';
 import {stylePropertyMap} from '../style-property-map.js';
 import {VscElement} from '../VscElement.js';
+import {FormControlSize} from '../form-control-size.js';
 import {filterOptionsByPattern, highlightRanges} from './helpers.js';
 import type {InternalOption, Option, FilterMethod} from './types.js';
 import {OptionListController} from './OptionListController.js';
@@ -69,6 +70,12 @@ export class VscodeSelectBase extends VscElement {
   @property({type: Boolean, reflect: true})
   invalid = false;
 
+  /**
+   * The size of the component. The `medium` size is the default.
+   */
+  @property({reflect: true})
+  size: FormControlSize = 'medium';
+
   /**
    * Search method in the filtered list within the combobox mode.
    *
diff --git a/src/vscode-button/vscode-button.styles.ts b/src/vscode-button/vscode-button.styles.ts
index a2e3c20c8..c0a9a0974 100644
--- a/src/vscode-button/vscode-button.styles.ts
+++ b/src/vscode-button/vscode-button.styles.ts
@@ -35,7 +35,10 @@ const styles: CSSResultGroup = [
       color: var(--vscode-button-foreground, #ffffff);
       display: flex;
       font-family: var(--vscode-font-family, ${defaultFontStack});
-      font-size: var(--vscode-font-size, 13px);
+      font-size: var(
+        --vsc-form-control-font-size,
+        var(--vscode-font-size, 13px)
+      );
       font-weight: var(--vscode-font-weight, normal);
       height: 100%;
       justify-content: center;
@@ -49,6 +52,26 @@ const styles: CSSResultGroup = [
       width: 100%;
     }
 
+    :host([size='small']) {
+      --vsc-form-control-font-size: 12px;
+    }
+
+    :host([size='large']) {
+      --vsc-form-control-font-size: 15px;
+    }
+
+    :host([size='small']) .base {
+      line-height: 18px;
+      padding: 1px calc(9px + var(--vsc-base-additional-right-padding, 0px)) 1px
+        9px;
+    }
+
+    :host([size='large']) .base {
+      line-height: 26px;
+      padding: 1px calc(17px + var(--vsc-base-additional-right-padding, 0px))
+        1px 17px;
+    }
+
     :host([block]) .base {
       min-height: 28px;
       text-align: center;
diff --git a/src/vscode-button/vscode-button.test.ts b/src/vscode-button/vscode-button.test.ts
index f79a0046e..869f6e9c8 100644
--- a/src/vscode-button/vscode-button.test.ts
+++ b/src/vscode-button/vscode-button.test.ts
@@ -24,6 +24,25 @@ describe('vscode-button', () => {
     expect(el.focused).to.be.true;
   });
 
+  it('uses medium size by default', async () => {
+    const el = await fixture<VscodeButton>(
+      html`<vscode-button>test</vscode-button>`
+    );
+
+    expect(el.size).to.eq('medium');
+    expect(el.getAttribute('size')).to.eq('medium');
+  });
+
+  it('reflects the size property', async () => {
+    const el = await fixture<VscodeButton>(
+      html`<vscode-button>test</vscode-button>`
+    );
+    el.size = 'large';
+    await el.updateComplete;
+
+    expect(el.getAttribute('size')).to.eq('large');
+  });
+
   it('dispatches click event when enter key is pressed', async () => {
     const el = await fixture<VscodeButton>(
       html`<vscode-button>test</vscode-button>`
diff --git a/src/vscode-button/vscode-button.ts b/src/vscode-button/vscode-button.ts
index 5730cc2a2..fd1356429 100644
--- a/src/vscode-button/vscode-button.ts
+++ b/src/vscode-button/vscode-button.ts
@@ -2,6 +2,7 @@ import {html, nothing, PropertyValueMap, TemplateResult} from 'lit';
 import {property, state} from 'lit/decorators.js';
 import {classMap} from 'lit/directives/class-map.js';
 import {customElement, VscElement} from '../includes/VscElement.js';
+import {FormControlSize} from '../includes/form-control-size.js';
 import '../vscode-icon/index.js';
 import styles from './vscode-button.styles.js';
 import {ifDefined} from 'lit/directives/if-defined.js';
@@ -22,6 +23,7 @@ import {ifDefined} from 'lit/directives/if-defined.js';
  * @cssprop [--vscode-button-secondaryBackground=#313131]
  * @cssprop [--vscode-button-secondaryHoverBackground=#3c3c3c]
  * @cssprop [--vscode-focusBorder=#0078d4]
+ * @cssprop [--vsc-form-control-font-size=var(--vscode-font-size, 13px)] - Font size of the button label. It is set automatically by the `size` property.
  *
  * @csspart base - The main content area of the component.
  *
@@ -62,6 +64,12 @@ export class VscodeButton extends VscElement {
   @property({type: Boolean, reflect: true})
   disabled = false;
 
+  /**
+   * The size of the button. The `medium` size is the default.
+   */
+  @property({reflect: true})
+  size: FormControlSize = 'medium';
+
   /**
    * A [Codicon](https://microsoft.github.io/vscode-codicons/dist/codicon.html) before the label
    */
diff --git a/src/vscode-checkbox/vscode-checkbox.test.ts b/src/vscode-checkbox/vscode-checkbox.test.ts
index 7653d5333..30c995221 100644
--- a/src/vscode-checkbox/vscode-checkbox.test.ts
+++ b/src/vscode-checkbox/vscode-checkbox.test.ts
@@ -24,6 +24,25 @@ describe('vscode-checkbox', () => {
     expect(el.type).to.eq('checkbox');
   });
 
+  it('uses medium size by default', async () => {
+    const el = await fixture<VscodeCheckbox>(
+      html`<vscode-checkbox>Test checkbox</vscode-checkbox>`
+    );
+
+    expect(el.size).to.eq('medium');
+    expect(el.getAttribute('size')).to.eq('medium');
+  });
+
+  it('reflects the size property', async () => {
+    const el = await fixture<VscodeCheckbox>(
+      html`<vscode-checkbox>Test checkbox</vscode-checkbox>`
+    );
+    el.size = 'small';
+    await el.updateComplete;
+
+    expect(el.getAttribute('size')).to.eq('small');
+  });
+
   it('should be participated in the form', async () => {
     const form = document.createElement('form');
     await fixture(
diff --git a/src/vscode-form-group/vscode-form-group.styles.ts b/src/vscode-form-group/vscode-form-group.styles.ts
index c6902b68c..741aa658d 100644
--- a/src/vscode-form-group/vscode-form-group.styles.ts
+++ b/src/vscode-form-group/vscode-form-group.styles.ts
@@ -14,6 +14,7 @@ const styles: CSSResultGroup = [
     :host([size='small']) {
       --label-right-margin: 10px;
       --label-width: 100px;
+      --vsc-form-control-font-size: 12px;
 
       margin: 8px 0;
     }
@@ -28,6 +29,7 @@ const styles: CSSResultGroup = [
     :host([size='large']) {
       --label-right-margin: 18px;
       --label-width: 200px;
+      --vsc-form-control-font-size: 15px;
 
       margin: 22px 0;
     }
diff --git a/src/vscode-form-group/vscode-form-group.ts b/src/vscode-form-group/vscode-form-group.ts
index edfcef554..3135a173b 100644
--- a/src/vscode-form-group/vscode-form-group.ts
+++ b/src/vscode-form-group/vscode-form-group.ts
@@ -1,17 +1,19 @@
 import {html, TemplateResult} from 'lit';
 import {property} from 'lit/decorators.js';
 import {customElement, VscElement} from '../includes/VscElement.js';
+import {FormControlSize} from '../includes/form-control-size.js';
 import styles from './vscode-form-group.styles.js';
 
 export type FormGroupVariant = 'horizontal' | 'vertical' | 'settings-group';
 
-export type FormGroupSize = 'small' | 'medium' | 'large';
+export type FormGroupSize = FormControlSize;
 
 /**
  * @tag vscode-form-group
  *
  * @cssprop [--label-width=150px] - The width of the label in horizontal mode
  * @cssprop [--label-right-margin=14px] - The right margin of the label in horizontal mode
+ * @cssprop [--vsc-form-control-font-size] - Font size of the slotted form controls. It is set automatically by the `size` property.
  */
 @customElement('vscode-form-group')
 export class VscodeFormGroup extends VscElement {
diff --git a/src/vscode-multi-select/vscode-multi-select.test.ts b/src/vscode-multi-select/vscode-multi-select.test.ts
index fa96eb3bc..c5ec605cc 100644
--- a/src/vscode-multi-select/vscode-multi-select.test.ts
+++ b/src/vscode-multi-select/vscode-multi-select.test.ts
@@ -13,6 +13,25 @@ describe('vscode-multi-select', () => {
     expect(el).to.instanceOf(VscodeMultiSelect);
   });
 
+  it('uses medium size by default', async () => {
+    const el = (await fixture(html`
+      <vscode-multi-select></vscode-multi-select>
+    `)) as VscodeMultiSelect;
+
+    expect(el.size).to.eq('medium');
+    expect(el.getAttribute('size')).to.eq('medium');
+  });
+
+  it('reflects the size property', async () => {
+    const el = (await fixture(html`
+      <vscode-multi-select></vscode-multi-select>
+    `)) as VscodeMultiSelect;
+    el.size = 'large';
+    await el.updateComplete;
+
+    expect(el.getAttribute('size')).to.eq('large');
+  });
+
   it('should display selected value', async () => {
     const el = (await fixture(html`
       <vscode-multi-select>
diff --git a/src/vscode-radio/vscode-radio.test.ts b/src/vscode-radio/vscode-radio.test.ts
index c4da222f1..9890d9c8f 100644
--- a/src/vscode-radio/vscode-radio.test.ts
+++ b/src/vscode-radio/vscode-radio.test.ts
@@ -31,6 +31,21 @@ describe('vscode-radio', () => {
     expect(radio.form?.getAttribute('id')).to.eq('test-form');
   });
 
+  it('uses medium size by default', async () => {
+    const el = await fixture<VscodeRadio>(html`<vscode-radio></vscode-radio>`);
+
+    expect(el.size).to.eq('medium');
+    expect(el.getAttribute('size')).to.eq('medium');
+  });
+
+  it('reflects the size property', async () => {
+    const el = await fixture<VscodeRadio>(html`<vscode-radio></vscode-radio>`);
+    el.size = 'large';
+    await el.updateComplete;
+
+    expect(el.getAttribute('size')).to.eq('large');
+  });
+
   it('type should be "radio"', async () => {
     const el = await fixture<VscodeRadio>(html`<vscode-radio></vscode-radio>`);
 
diff --git a/src/vscode-single-select/vscode-single-select.test.ts b/src/vscode-single-select/vscode-single-select.test.ts
index f61c2643f..fc046b82d 100644
--- a/src/vscode-single-select/vscode-single-select.test.ts
+++ b/src/vscode-single-select/vscode-single-select.test.ts
@@ -29,6 +29,25 @@ describe('vscode-single-select', () => {
     expect(el).to.instanceOf(VscodeSingleSelect);
   });
 
+  it('uses medium size by default', async () => {
+    const el = (await fixture(html`
+      <vscode-single-select></vscode-single-select>
+    `)) as VscodeSingleSelect;
+
+    expect(el.size).to.eq('medium');
+    expect(el.getAttribute('size')).to.eq('medium');
+  });
+
+  it('reflects the size property', async () => {
+    const el = (await fixture(html`
+      <vscode-single-select></vscode-single-select>
+    `)) as VscodeSingleSelect;
+    el.size = 'small';
+    await el.updateComplete;
+
+    expect(el.getAttribute('size')).to.eq('small');
+  });
+
   describe('select mode', () => {
     it('should display selected value', async () => {
       const el = (await fixture(html`
diff --git a/src/vscode-textarea/vscode-textarea.styles.ts b/src/vscode-textarea/vscode-textarea.styles.ts
index 76a15e00a..4791954ac 100644
--- a/src/vscode-textarea/vscode-textarea.styles.ts
+++ b/src/vscode-textarea/vscode-textarea.styles.ts
@@ -19,6 +19,14 @@ const styles: CSSResultGroup = [
       height: auto;
     }
 
+    :host([size='small']) {
+      --vsc-form-control-font-size: 12px;
+    }
+
+    :host([size='large']) {
+      --vsc-form-control-font-size: 15px;
+    }
+
     .shadow {
       box-shadow: var(--vscode-scrollbar-shadow, #000000) 0 6px 6px -6px inset;
       display: none;
@@ -43,7 +51,10 @@ const styles: CSSResultGroup = [
       color: var(--vscode-settings-textInputForeground, #cccccc);
       display: block;
       font-family: var(--vscode-font-family, sans-serif);
-      font-size: var(--vscode-font-size, 13px);
+      font-size: var(
+        --vsc-form-control-font-size,
+        var(--vscode-font-size, 13px)
+      );
       font-weight: var(--vscode-font-weight, normal);
       height: 100%;
       width: 100%;
diff --git a/src/vscode-textarea/vscode-textarea.test.ts b/src/vscode-textarea/vscode-textarea.test.ts
index a5ee6fe3f..d112fd020 100644
--- a/src/vscode-textarea/vscode-textarea.test.ts
+++ b/src/vscode-textarea/vscode-textarea.test.ts
@@ -38,6 +38,25 @@ describe('vscode-textarea', () => {
     `);
   });
 
+  it('uses medium size by default', async () => {
+    const el = await fixture<VscodeTextarea>(
+      html`<vscode-textarea></vscode-textarea>`
+    );
+
+    expect(el.size).to.eq('medium');
+    expect(el.getAttribute('size')).to.eq('medium');
+  });
+
+  it('reflects the size property', async () => {
+    const el = await fixture<VscodeTextarea>(
+      html`<vscode-textarea></vscode-textarea>`
+    );
+    el.size = 'large';
+    await el.updateComplete;
+
+    expect(el.getAttribute('size')).to.eq('large');
+  });
+
   it('should forward "autocomplete" attribute to the inner textarea', async () => {
     const el = await fixture(
       html`<vscode-textarea autocomplete="on"></vscode-textarea>`
diff --git a/src/vscode-textarea/vscode-textarea.ts b/src/vscode-textarea/vscode-textarea.ts
index 3d6eea849..b577c4613 100644
--- a/src/vscode-textarea/vscode-textarea.ts
+++ b/src/vscode-textarea/vscode-textarea.ts
@@ -3,6 +3,7 @@ import {property, query, state} from 'lit/decorators.js';
 import {ifDefined} from 'lit/directives/if-defined.js';
 import {classMap} from 'lit/directives/class-map.js';
 import {customElement, VscElement} from '../includes/VscElement.js';
+import {FormControlSize} from '../includes/form-control-size.js';
 import {stylePropertyMap} from '../includes/style-property-map.js';
 import {AssociatedFormControl} from '../includes/AssociatedFormControl.js';
 import styles from './vscode-textarea.styles.js';
@@ -36,6 +37,7 @@ import styles from './vscode-textarea.styles.js';
  * @cssprop [--vscode-scrollbarSlider-background=rgba(121, 121, 121, 0.4)]
  * @cssprop [--vscode-scrollbarSlider-hoverBackground=rgba(100, 100, 100, 0.7)]
  * @cssprop [--vscode-scrollbarSlider-activeBackground=rgba(191, 191, 191, 0.4)]
+ * @cssprop [--vsc-form-control-font-size=var(--vscode-font-size, 13px)] - Font size of the textarea. It is set automatically by the `size` property.
  */
 @customElement('vscode-textarea')
 export class VscodeTextarea
@@ -98,6 +100,12 @@ export class VscodeTextarea
   @property()
   resize: 'both' | 'horizontal' | 'vertical' | 'none' = 'none';
 
+  /**
+   * The size of the textarea. The `medium` size is the default.
+   */
+  @property({reflect: true})
+  size: FormControlSize = 'medium';
+
   @property({type: Boolean, reflect: true})
   required = false;
 
diff --git a/src/vscode-textfield/vscode-textfield.styles.ts b/src/vscode-textfield/vscode-textfield.styles.ts
index 69967e364..d430728e8 100644
--- a/src/vscode-textfield/vscode-textfield.styles.ts
+++ b/src/vscode-textfield/vscode-textfield.styles.ts
@@ -68,7 +68,10 @@ const styles: CSSResultGroup = [
       color: var(--vscode-settings-textInputForeground, #cccccc);
       display: block;
       font-family: var(--vscode-font-family, ${defaultFontStack});
-      font-size: var(--vscode-font-size, 13px);
+      font-size: var(
+        --vsc-form-control-font-size,
+        var(--vscode-font-size, 13px)
+      );
       font-weight: var(--vscode-font-weight, normal);
       line-height: 18px;
       outline: none;
@@ -79,6 +82,24 @@ const styles: CSSResultGroup = [
       width: 100%;
     }
 
+    :host([size='small']) {
+      --vsc-form-control-font-size: 12px;
+    }
+
+    :host([size='large']) {
+      --vsc-form-control-font-size: 15px;
+    }
+
+    :host([size='small']) input {
+      padding-bottom: 2px;
+      padding-top: 2px;
+    }
+
+    :host([size='large']) input {
+      padding-bottom: 5px;
+      padding-top: 5px;
+    }
+
     input:read-only:not([type='file']) {
       cursor: not-allowed;
     }
diff --git a/src/vscode-textfield/vscode-textfield.test.ts b/src/vscode-textfield/vscode-textfield.test.ts
index 8968af222..0046e03eb 100644
--- a/src/vscode-textfield/vscode-textfield.test.ts
+++ b/src/vscode-textfield/vscode-textfield.test.ts
@@ -50,6 +50,25 @@ describe('vscode-textfield', () => {
     expect(el.type).to.eq('text');
   });
 
+  it('uses medium size by default', async () => {
+    const el = await fixture<VscodeTextfield>(
+      html`<vscode-textfield></vscode-textfield>`
+    );
+
+    expect(el.size).to.eq('medium');
+    expect(el.getAttribute('size')).to.eq('medium');
+  });
+
+  it('reflects the size property', async () => {
+    const el = await fixture<VscodeTextfield>(
+      html`<vscode-textfield></vscode-textfield>`
+    );
+    el.size = 'small';
+    await el.updateComplete;
+
+    expect(el.getAttribute('size')).to.eq('small');
+  });
+
   it('should be participated in the form', async () => {
     const form = document.createElement('form');
     await fixture(
diff --git a/src/vscode-textfield/vscode-textfield.ts b/src/vscode-textfield/vscode-textfield.ts
index 3af6cf18e..b472ee444 100644
--- a/src/vscode-textfield/vscode-textfield.ts
+++ b/src/vscode-textfield/vscode-textfield.ts
@@ -2,6 +2,7 @@ import {html, LitElement, TemplateResult} from 'lit';
 import {property, query, state} from 'lit/decorators.js';
 import {ifDefined} from 'lit/directives/if-defined.js';
 import {customElement, VscElement} from '../includes/VscElement.js';
+import {FormControlSize} from '../includes/form-control-size.js';
 import styles from './vscode-textfield.styles.js';
 import {AssociatedFormControl} from '../includes/AssociatedFormControl.js';
 
@@ -48,6 +49,7 @@ type InputType =
  * @cssprop [--vscode-button-background=#0078d4]
  * @cssprop [--vscode-button-foreground=#ffffff]
  * @cssprop [--vscode-button-hoverBackground=#026ec1]
+ * @cssprop [--vsc-form-control-font-size=var(--vscode-font-size, 13px)] - Font size of the input. It is set automatically by the `size` property.
  */
 @customElement('vscode-textfield')
 export class VscodeTextfield
@@ -129,6 +131,12 @@ export class VscodeTextfield
   @property({type: Boolean, reflect: true})
   required = false;
 
+  /**
+   * The size of the textfield. The `medium` size is the default.
+   */
+  @property({reflect: true})
+  size: FormControlSize = 'medium';
+
   @property({type: Number})
   step: number | undefined = undefined;
 

From 5f8ced3c1feb7788739d34ff047261c1c33bc699 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sat, 29 Aug 2026 02:43:56 +0000
Subject: [PATCH 04/31] style: simplify padding shorthand in select large size
 rule

Co-authored-by: 171h <40647432+171h@users.noreply.github.com>
---
 src/includes/vscode-select/styles.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/includes/vscode-select/styles.ts b/src/includes/vscode-select/styles.ts
index cabe3ed75..b1db70d21 100644
--- a/src/includes/vscode-select/styles.ts
+++ b/src/includes/vscode-select/styles.ts
@@ -25,7 +25,7 @@ export default [
     }
 
     :host([size='large']) .select-face {
-      padding: 4px 4px;
+      padding: 4px;
     }
 
     :host([size='small']) .combobox-input {

From eb960ef6f9399d46dd9fc741fb3fdd6dac3105fe Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sat, 29 Aug 2026 02:55:38 +0000
Subject: [PATCH 05/31] dev: add interactive size switcher demos for form
 components

Co-authored-by: 171h <40647432+171h@users.noreply.github.com>
---
 dev/vscode-button/size.html        |  45 ++++++++++++
 dev/vscode-checkbox/size.html      |  49 +++++++++++++
 dev/vscode-form-group/size.html    | 110 +++++++++++++++++++++++++++++
 dev/vscode-multi-select/size.html  |  49 +++++++++++++
 dev/vscode-radio/size.html         |  52 ++++++++++++++
 dev/vscode-single-select/size.html |  49 +++++++++++++
 dev/vscode-textarea/size.html      |  49 +++++++++++++
 dev/vscode-textfield/size.html     |  49 +++++++++++++
 8 files changed, 452 insertions(+)
 create mode 100644 dev/vscode-button/size.html
 create mode 100644 dev/vscode-checkbox/size.html
 create mode 100644 dev/vscode-form-group/size.html
 create mode 100644 dev/vscode-multi-select/size.html
 create mode 100644 dev/vscode-radio/size.html
 create mode 100644 dev/vscode-single-select/size.html
 create mode 100644 dev/vscode-textarea/size.html
 create mode 100644 dev/vscode-textfield/size.html

diff --git a/dev/vscode-button/size.html b/dev/vscode-button/size.html
new file mode 100644
index 000000000..2015781ad
--- /dev/null
+++ b/dev/vscode-button/size.html
@@ -0,0 +1,45 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>VSCode Elements</title>
+    <link
+      rel="stylesheet"
+      href="/node_modules/@vscode/codicons/dist/codicon.css"
+      id="vscode-codicon-stylesheet"
+    />
+    <script
+      type="module"
+      src="/node_modules/@vscode-elements/webview-playground/dist/index.js"
+    ></script>
+    <script type="module" src="/dist/main.js"></script>
+  </head>
+
+  <body>
+    <main>
+      <h1>Button sizes</h1>
+      <vscode-demo>
+        <div>
+          <vscode-button id="button" size="medium">Button</vscode-button>
+        </div>
+        <div>
+          <label for="size">Size:</label>
+          <select id="size">
+            <option value="small">small</option>
+            <option value="medium" selected>medium</option>
+            <option value="large">large</option>
+          </select>
+        </div>
+        <script type="module">
+          const button = document.querySelector('#button');
+          const size = document.querySelector('#size');
+
+          size.addEventListener('change', () => {
+            button.setAttribute('size', size.value);
+          });
+        </script>
+      </vscode-demo>
+    </main>
+  </body>
+</html>
diff --git a/dev/vscode-checkbox/size.html b/dev/vscode-checkbox/size.html
new file mode 100644
index 000000000..1491be1a4
--- /dev/null
+++ b/dev/vscode-checkbox/size.html
@@ -0,0 +1,49 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>VSCode Elements</title>
+    <link
+      rel="stylesheet"
+      href="/node_modules/@vscode/codicons/dist/codicon.css"
+      id="vscode-codicon-stylesheet"
+    />
+    <script
+      type="module"
+      src="/node_modules/@vscode-elements/webview-playground/dist/index.js"
+    ></script>
+    <script type="module" src="/dist/main.js"></script>
+  </head>
+
+  <body>
+    <main>
+      <h1>Checkbox sizes</h1>
+      <vscode-demo>
+        <div>
+          <vscode-checkbox
+            id="checkbox"
+            size="medium"
+            label="Checkbox example"
+          ></vscode-checkbox>
+        </div>
+        <div>
+          <label for="size">Size:</label>
+          <select id="size">
+            <option value="small">small</option>
+            <option value="medium" selected>medium</option>
+            <option value="large">large</option>
+          </select>
+        </div>
+        <script type="module">
+          const checkbox = document.querySelector('#checkbox');
+          const size = document.querySelector('#size');
+
+          size.addEventListener('change', () => {
+            checkbox.setAttribute('size', size.value);
+          });
+        </script>
+      </vscode-demo>
+    </main>
+  </body>
+</html>
diff --git a/dev/vscode-form-group/size.html b/dev/vscode-form-group/size.html
new file mode 100644
index 000000000..2e56e0f22
--- /dev/null
+++ b/dev/vscode-form-group/size.html
@@ -0,0 +1,110 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>VSCode Elements</title>
+    <link
+      rel="stylesheet"
+      href="/node_modules/@vscode/codicons/dist/codicon.css"
+      id="vscode-codicon-stylesheet"
+    />
+    <script
+      type="module"
+      src="/node_modules/@vscode-elements/webview-playground/dist/index.js"
+    ></script>
+    <script type="module" src="/dist/main.js"></script>
+  </head>
+
+  <body>
+    <main>
+      <h1>Form group sizes</h1>
+      <p>
+        The size of the form group is propagated to the slotted form controls.
+      </p>
+      <vscode-demo>
+        <div>
+          <vscode-form-container>
+            <vscode-form-group id="form-group" size="medium">
+              <vscode-label for="textfield">Textfield</vscode-label>
+              <vscode-textfield
+                id="textfield"
+                placeholder="Placeholder..."
+              ></vscode-textfield>
+              <vscode-form-helper>Helper text</vscode-form-helper>
+            </vscode-form-group>
+            <vscode-form-group id="form-group-2" size="medium">
+              <vscode-label for="textarea">Textarea</vscode-label>
+              <vscode-textarea
+                id="textarea"
+                placeholder="Placeholder..."
+              ></vscode-textarea>
+            </vscode-form-group>
+            <vscode-form-group id="form-group-3" size="medium">
+              <vscode-label for="single-select">Single select</vscode-label>
+              <vscode-single-select id="single-select">
+                <vscode-option>Lorem</vscode-option>
+                <vscode-option>Ipsum</vscode-option>
+                <vscode-option>Dolor</vscode-option>
+              </vscode-single-select>
+            </vscode-form-group>
+            <vscode-form-group id="form-group-4" size="medium">
+              <vscode-label for="multi-select">Multi select</vscode-label>
+              <vscode-multi-select id="multi-select">
+                <vscode-option>Lorem</vscode-option>
+                <vscode-option selected>Ipsum</vscode-option>
+                <vscode-option>Dolor</vscode-option>
+              </vscode-multi-select>
+            </vscode-form-group>
+            <vscode-form-group id="form-group-5" size="medium">
+              <vscode-label>Checkbox</vscode-label>
+              <vscode-checkbox-group>
+                <vscode-checkbox label="Lorem" checked></vscode-checkbox>
+                <vscode-checkbox label="Ipsum"></vscode-checkbox>
+              </vscode-checkbox-group>
+            </vscode-form-group>
+            <vscode-form-group id="form-group-6" size="medium">
+              <vscode-label>Radio</vscode-label>
+              <vscode-radio-group>
+                <vscode-radio name="radio-example" value="1" checked
+                  >Lorem</vscode-radio
+                >
+                <vscode-radio name="radio-example" value="2"
+                  >Ipsum</vscode-radio
+                >
+              </vscode-radio-group>
+            </vscode-form-group>
+            <vscode-form-group id="form-group-7" size="medium">
+              <vscode-button>Save</vscode-button>
+              <vscode-button secondary>Cancel</vscode-button>
+            </vscode-form-group>
+          </vscode-form-container>
+        </div>
+        <div>
+          <label for="size">Size:</label>
+          <select id="size">
+            <option value="small">small</option>
+            <option value="medium" selected>medium</option>
+            <option value="large">large</option>
+          </select>
+        </div>
+        <script type="module">
+          const formGroups = document.querySelectorAll('vscode-form-group');
+          const controls = document.querySelectorAll(
+            'vscode-textfield, vscode-textarea, vscode-single-select, vscode-multi-select, vscode-checkbox, vscode-radio, vscode-button'
+          );
+          const size = document.querySelector('#size');
+
+          size.addEventListener('change', () => {
+            formGroups.forEach((group) => {
+              group.setAttribute('size', size.value);
+            });
+            controls.forEach((control) => {
+              control.setAttribute('size', size.value);
+            });
+          });
+        </script>
+      </vscode-demo>
+    </main>
+  </body>
+</html>
diff --git a/dev/vscode-multi-select/size.html b/dev/vscode-multi-select/size.html
new file mode 100644
index 000000000..378757e0e
--- /dev/null
+++ b/dev/vscode-multi-select/size.html
@@ -0,0 +1,49 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>VSCode Elements</title>
+    <link
+      rel="stylesheet"
+      href="/node_modules/@vscode/codicons/dist/codicon.css"
+      id="vscode-codicon-stylesheet"
+    />
+    <script
+      type="module"
+      src="/node_modules/@vscode-elements/webview-playground/dist/index.js"
+    ></script>
+    <script type="module" src="/dist/main.js"></script>
+  </head>
+
+  <body>
+    <main>
+      <h1>Multi select sizes</h1>
+      <vscode-demo>
+        <div>
+          <vscode-multi-select id="multi-select" size="medium">
+            <vscode-option>Lorem</vscode-option>
+            <vscode-option selected>Ipsum</vscode-option>
+            <vscode-option>Dolor</vscode-option>
+          </vscode-multi-select>
+        </div>
+        <div>
+          <label for="size">Size:</label>
+          <select id="size">
+            <option value="small">small</option>
+            <option value="medium" selected>medium</option>
+            <option value="large">large</option>
+          </select>
+        </div>
+        <script type="module">
+          const select = document.querySelector('#multi-select');
+          const size = document.querySelector('#size');
+
+          size.addEventListener('change', () => {
+            select.setAttribute('size', size.value);
+          });
+        </script>
+      </vscode-demo>
+    </main>
+  </body>
+</html>
diff --git a/dev/vscode-radio/size.html b/dev/vscode-radio/size.html
new file mode 100644
index 000000000..4fc054011
--- /dev/null
+++ b/dev/vscode-radio/size.html
@@ -0,0 +1,52 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>VSCode Elements</title>
+    <link
+      rel="stylesheet"
+      href="/node_modules/@vscode/codicons/dist/codicon.css"
+      id="vscode-codicon-stylesheet"
+    />
+    <script
+      type="module"
+      src="/node_modules/@vscode-elements/webview-playground/dist/index.js"
+    ></script>
+    <script type="module" src="/dist/main.js"></script>
+  </head>
+
+  <body>
+    <main>
+      <h1>Radio sizes</h1>
+      <vscode-demo>
+        <div>
+          <vscode-radio-group id="radio-group" size="medium">
+            <vscode-radio name="size-example" value="1" checked
+              >Lorem</vscode-radio
+            >
+            <vscode-radio name="size-example" value="2">Ipsum</vscode-radio>
+          </vscode-radio-group>
+        </div>
+        <div>
+          <label for="size">Size:</label>
+          <select id="size">
+            <option value="small">small</option>
+            <option value="medium" selected>medium</option>
+            <option value="large">large</option>
+          </select>
+        </div>
+        <script type="module">
+          const radios = document.querySelectorAll('vscode-radio');
+          const size = document.querySelector('#size');
+
+          size.addEventListener('change', () => {
+            radios.forEach((radio) => {
+              radio.setAttribute('size', size.value);
+            });
+          });
+        </script>
+      </vscode-demo>
+    </main>
+  </body>
+</html>
diff --git a/dev/vscode-single-select/size.html b/dev/vscode-single-select/size.html
new file mode 100644
index 000000000..fef4efe7a
--- /dev/null
+++ b/dev/vscode-single-select/size.html
@@ -0,0 +1,49 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>VSCode Elements</title>
+    <link
+      rel="stylesheet"
+      href="/node_modules/@vscode/codicons/dist/codicon.css"
+      id="vscode-codicon-stylesheet"
+    />
+    <script
+      type="module"
+      src="/node_modules/@vscode-elements/webview-playground/dist/index.js"
+    ></script>
+    <script type="module" src="/dist/main.js"></script>
+  </head>
+
+  <body>
+    <main>
+      <h1>Single select sizes</h1>
+      <vscode-demo>
+        <div>
+          <vscode-single-select id="single-select" size="medium">
+            <vscode-option>Lorem</vscode-option>
+            <vscode-option>Ipsum</vscode-option>
+            <vscode-option>Dolor</vscode-option>
+          </vscode-single-select>
+        </div>
+        <div>
+          <label for="size">Size:</label>
+          <select id="size">
+            <option value="small">small</option>
+            <option value="medium" selected>medium</option>
+            <option value="large">large</option>
+          </select>
+        </div>
+        <script type="module">
+          const select = document.querySelector('#single-select');
+          const size = document.querySelector('#size');
+
+          size.addEventListener('change', () => {
+            select.setAttribute('size', size.value);
+          });
+        </script>
+      </vscode-demo>
+    </main>
+  </body>
+</html>
diff --git a/dev/vscode-textarea/size.html b/dev/vscode-textarea/size.html
new file mode 100644
index 000000000..889789460
--- /dev/null
+++ b/dev/vscode-textarea/size.html
@@ -0,0 +1,49 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>VSCode Elements</title>
+    <link
+      rel="stylesheet"
+      href="/node_modules/@vscode/codicons/dist/codicon.css"
+      id="vscode-codicon-stylesheet"
+    />
+    <script
+      type="module"
+      src="/node_modules/@vscode-elements/webview-playground/dist/index.js"
+    ></script>
+    <script type="module" src="/dist/main.js"></script>
+  </head>
+
+  <body>
+    <main>
+      <h1>Textarea sizes</h1>
+      <vscode-demo>
+        <div>
+          <vscode-textarea
+            id="textarea"
+            size="medium"
+            placeholder="Placeholder..."
+          ></vscode-textarea>
+        </div>
+        <div>
+          <label for="size">Size:</label>
+          <select id="size">
+            <option value="small">small</option>
+            <option value="medium" selected>medium</option>
+            <option value="large">large</option>
+          </select>
+        </div>
+        <script type="module">
+          const textarea = document.querySelector('#textarea');
+          const size = document.querySelector('#size');
+
+          size.addEventListener('change', () => {
+            textarea.setAttribute('size', size.value);
+          });
+        </script>
+      </vscode-demo>
+    </main>
+  </body>
+</html>
diff --git a/dev/vscode-textfield/size.html b/dev/vscode-textfield/size.html
new file mode 100644
index 000000000..39fbe93d9
--- /dev/null
+++ b/dev/vscode-textfield/size.html
@@ -0,0 +1,49 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>VSCode Elements</title>
+    <link
+      rel="stylesheet"
+      href="/node_modules/@vscode/codicons/dist/codicon.css"
+      id="vscode-codicon-stylesheet"
+    />
+    <script
+      type="module"
+      src="/node_modules/@vscode-elements/webview-playground/dist/index.js"
+    ></script>
+    <script type="module" src="/dist/main.js"></script>
+  </head>
+
+  <body>
+    <main>
+      <h1>Textfield sizes</h1>
+      <vscode-demo>
+        <div>
+          <vscode-textfield
+            id="textfield"
+            size="medium"
+            placeholder="Placeholder..."
+          ></vscode-textfield>
+        </div>
+        <div>
+          <label for="size">Size:</label>
+          <select id="size">
+            <option value="small">small</option>
+            <option value="medium" selected>medium</option>
+            <option value="large">large</option>
+          </select>
+        </div>
+        <script type="module">
+          const textfield = document.querySelector('#textfield');
+          const size = document.querySelector('#size');
+
+          size.addEventListener('change', () => {
+            textfield.setAttribute('size', size.value);
+          });
+        </script>
+      </vscode-demo>
+    </main>
+  </body>
+</html>

From cebd8f8b5e65bf00dea9dec287bd65b3b0aea25d Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sat, 29 Aug 2026 02:57:03 +0000
Subject: [PATCH 06/31] dev: address review feedback on size demos

Co-authored-by: 171h <40647432+171h@users.noreply.github.com>
---
 dev/vscode-form-group/size.html | 4 +++-
 dev/vscode-radio/size.html      | 8 +++++---
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/dev/vscode-form-group/size.html b/dev/vscode-form-group/size.html
index 2e56e0f22..4313de30d 100644
--- a/dev/vscode-form-group/size.html
+++ b/dev/vscode-form-group/size.html
@@ -20,7 +20,9 @@
     <main>
       <h1>Form group sizes</h1>
       <p>
-        The size of the form group is propagated to the slotted form controls.
+        The font size of the slotted form controls follows the form group size
+        automatically. Size-specific spacing adjustments are applied when the
+        <code>size</code> attribute is also set on the slotted controls.
       </p>
       <vscode-demo>
         <div>
diff --git a/dev/vscode-radio/size.html b/dev/vscode-radio/size.html
index 4fc054011..be107a756 100644
--- a/dev/vscode-radio/size.html
+++ b/dev/vscode-radio/size.html
@@ -21,11 +21,13 @@
       <h1>Radio sizes</h1>
       <vscode-demo>
         <div>
-          <vscode-radio-group id="radio-group" size="medium">
-            <vscode-radio name="size-example" value="1" checked
+          <vscode-radio-group>
+            <vscode-radio name="size-example" value="1" size="medium" checked
               >Lorem</vscode-radio
             >
-            <vscode-radio name="size-example" value="2">Ipsum</vscode-radio>
+            <vscode-radio name="size-example" value="2" size="medium"
+              >Ipsum</vscode-radio
+            >
           </vscode-radio-group>
         </div>
         <div>

From 13f6ee857f977a8483597f4a16e3fbfa7d8faeb4 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sat, 29 Aug 2026 04:53:32 +0000
Subject: [PATCH 07/31] feat: make small form controls 16px high

Co-authored-by: 171h <40647432+171h@users.noreply.github.com>
---
 .../form-button-widget/base.styles.ts         | 17 +++++++++---
 src/includes/vscode-select/styles.ts          | 27 ++++++++++++++++---
 src/vscode-button/vscode-button.styles.ts     |  4 +--
 .../vscode-form-group.styles.ts               |  2 +-
 .../vscode-textfield.styles.ts                |  7 ++---
 5 files changed, 44 insertions(+), 13 deletions(-)

diff --git a/src/includes/form-button-widget/base.styles.ts b/src/includes/form-button-widget/base.styles.ts
index 29e4c903d..58461149c 100644
--- a/src/includes/form-button-widget/base.styles.ts
+++ b/src/includes/form-button-widget/base.styles.ts
@@ -33,16 +33,21 @@ export default [
     }
 
     :host([size='small']) {
-      --vsc-form-control-font-size: 12px;
+      --vsc-form-control-font-size: 11px;
     }
 
     :host([size='large']) {
       --vsc-form-control-font-size: 15px;
     }
 
+    :host([size='small']) .wrapper {
+      line-height: 14px;
+      min-height: 16px;
+    }
+
     :host([size='small']) .icon {
-      height: 16px;
-      width: 16px;
+      height: 14px;
+      width: 14px;
     }
 
     :host([size='large']) .icon {
@@ -50,8 +55,12 @@ export default [
       width: 20px;
     }
 
+    :host([size='small']) .label {
+      min-height: 16px;
+    }
+
     :host([size='small']) .label-inner {
-      padding-left: 25px;
+      padding-left: 23px;
     }
 
     :host([size='large']) .label-inner {
diff --git a/src/includes/vscode-select/styles.ts b/src/includes/vscode-select/styles.ts
index b1db70d21..b209d34e4 100644
--- a/src/includes/vscode-select/styles.ts
+++ b/src/includes/vscode-select/styles.ts
@@ -13,7 +13,7 @@ export default [
     }
 
     :host([size='small']) {
-      --vsc-form-control-font-size: 12px;
+      --vsc-form-control-font-size: 11px;
     }
 
     :host([size='large']) {
@@ -21,21 +21,42 @@ export default [
     }
 
     :host([size='small']) .select-face {
-      padding: 2px 4px;
+      line-height: 12px;
+      padding: 1px 4px;
     }
 
     :host([size='large']) .select-face {
       padding: 4px;
     }
 
+    :host([size='small']) .select-face .text {
+      height: 12px;
+    }
+
+    :host([size='small']) .select-face.multiselect {
+      align-items: center;
+      display: flex;
+    }
+
+    :host([size='small']) .select-face-badge {
+      line-height: 12px;
+      margin: 0 1px;
+      padding: 0 2px;
+    }
+
     :host([size='small']) .combobox-input {
-      padding: 3px 4px;
+      line-height: 12px;
+      padding: 1px 4px;
     }
 
     :host([size='large']) .combobox-input {
       padding: 5px 4px;
     }
 
+    :host([size='small']) .select-face .icon {
+      top: 4px;
+    }
+
     .main-slot {
       display: none;
     }
diff --git a/src/vscode-button/vscode-button.styles.ts b/src/vscode-button/vscode-button.styles.ts
index c0a9a0974..008f09f26 100644
--- a/src/vscode-button/vscode-button.styles.ts
+++ b/src/vscode-button/vscode-button.styles.ts
@@ -53,7 +53,7 @@ const styles: CSSResultGroup = [
     }
 
     :host([size='small']) {
-      --vsc-form-control-font-size: 12px;
+      --vsc-form-control-font-size: 11px;
     }
 
     :host([size='large']) {
@@ -61,7 +61,7 @@ const styles: CSSResultGroup = [
     }
 
     :host([size='small']) .base {
-      line-height: 18px;
+      line-height: 12px;
       padding: 1px calc(9px + var(--vsc-base-additional-right-padding, 0px)) 1px
         9px;
     }
diff --git a/src/vscode-form-group/vscode-form-group.styles.ts b/src/vscode-form-group/vscode-form-group.styles.ts
index 741aa658d..903619a9b 100644
--- a/src/vscode-form-group/vscode-form-group.styles.ts
+++ b/src/vscode-form-group/vscode-form-group.styles.ts
@@ -14,7 +14,7 @@ const styles: CSSResultGroup = [
     :host([size='small']) {
       --label-right-margin: 10px;
       --label-width: 100px;
-      --vsc-form-control-font-size: 12px;
+      --vsc-form-control-font-size: 11px;
 
       margin: 8px 0;
     }
diff --git a/src/vscode-textfield/vscode-textfield.styles.ts b/src/vscode-textfield/vscode-textfield.styles.ts
index d430728e8..93bd531e3 100644
--- a/src/vscode-textfield/vscode-textfield.styles.ts
+++ b/src/vscode-textfield/vscode-textfield.styles.ts
@@ -83,7 +83,7 @@ const styles: CSSResultGroup = [
     }
 
     :host([size='small']) {
-      --vsc-form-control-font-size: 12px;
+      --vsc-form-control-font-size: 11px;
     }
 
     :host([size='large']) {
@@ -91,8 +91,9 @@ const styles: CSSResultGroup = [
     }
 
     :host([size='small']) input {
-      padding-bottom: 2px;
-      padding-top: 2px;
+      line-height: 12px;
+      padding-bottom: 1px;
+      padding-top: 1px;
     }
 
     :host([size='large']) input {

From 1ace17078441c4335c45ed10e24cfbf0948bb0e0 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sat, 29 Aug 2026 04:55:12 +0000
Subject: [PATCH 08/31] fix: center dropdown icon in small select face

Co-authored-by: 171h <40647432+171h@users.noreply.github.com>
---
 src/includes/vscode-select/styles.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/includes/vscode-select/styles.ts b/src/includes/vscode-select/styles.ts
index b209d34e4..05b4b9e70 100644
--- a/src/includes/vscode-select/styles.ts
+++ b/src/includes/vscode-select/styles.ts
@@ -54,7 +54,7 @@ export default [
     }
 
     :host([size='small']) .select-face .icon {
-      top: 4px;
+      top: 0;
     }
 
     .main-slot {

From c9bd8036b0791da4ed4f2d784d2ee37a0beef7f4 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sat, 29 Aug 2026 05:05:20 +0000
Subject: [PATCH 09/31] dev: replace size.html pages with size switcher buttons
 in existing demos

Co-authored-by: 171h <40647432+171h@users.noreply.github.com>
---
 dev/vscode-button/basic-examples.html         |  20 ++++
 dev/vscode-button/size.html                   |  45 -------
 dev/vscode-checkbox/basic-example.html        |  19 +++
 dev/vscode-checkbox/size.html                 |  49 --------
 dev/vscode-form-group/size.html               | 112 ------------------
 dev/vscode-label/basic-example.html           |  23 ++++
 dev/vscode-multi-select/combobox.html         |  17 +++
 dev/vscode-multi-select/size.html             |  49 --------
 dev/vscode-radio-group/checked.html           |  19 +++
 dev/vscode-radio/size.html                    |  54 ---------
 .../select-mode/basic-example.html            |  17 +++
 dev/vscode-single-select/size.html            |  49 --------
 dev/vscode-textarea/csp.html                  |  26 +++-
 dev/vscode-textarea/size.html                 |  49 --------
 dev/vscode-textfield/basic-example.html       |  17 +++
 dev/vscode-textfield/size.html                |  49 --------
 16 files changed, 157 insertions(+), 457 deletions(-)
 delete mode 100644 dev/vscode-button/size.html
 delete mode 100644 dev/vscode-checkbox/size.html
 delete mode 100644 dev/vscode-form-group/size.html
 delete mode 100644 dev/vscode-multi-select/size.html
 delete mode 100644 dev/vscode-radio/size.html
 delete mode 100644 dev/vscode-single-select/size.html
 delete mode 100644 dev/vscode-textarea/size.html
 delete mode 100644 dev/vscode-textfield/size.html

diff --git a/dev/vscode-button/basic-examples.html b/dev/vscode-button/basic-examples.html
index 6bdd50a49..211a40dda 100644
--- a/dev/vscode-button/basic-examples.html
+++ b/dev/vscode-button/basic-examples.html
@@ -28,6 +28,26 @@
       <vscode-demo>
         <vscode-button>Primary Button</vscode-button>
         <vscode-button secondary>Secondary Button</vscode-button>
+        <div>
+          <button type="button" class="size-button" data-size="small">
+            small
+          </button>
+          <button type="button" class="size-button" data-size="medium">
+            medium
+          </button>
+          <button type="button" class="size-button" data-size="large">
+            large
+          </button>
+        </div>
+        <script type="module">
+          document.querySelectorAll('.size-button').forEach((button) => {
+            button.addEventListener('click', () => {
+              document.querySelectorAll('vscode-button').forEach((el) => {
+                el.setAttribute('size', button.dataset.size);
+              });
+            });
+          });
+        </script>
       </vscode-demo>
     </main>
   </body>
diff --git a/dev/vscode-button/size.html b/dev/vscode-button/size.html
deleted file mode 100644
index 2015781ad..000000000
--- a/dev/vscode-button/size.html
+++ /dev/null
@@ -1,45 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>VSCode Elements</title>
-    <link
-      rel="stylesheet"
-      href="/node_modules/@vscode/codicons/dist/codicon.css"
-      id="vscode-codicon-stylesheet"
-    />
-    <script
-      type="module"
-      src="/node_modules/@vscode-elements/webview-playground/dist/index.js"
-    ></script>
-    <script type="module" src="/dist/main.js"></script>
-  </head>
-
-  <body>
-    <main>
-      <h1>Button sizes</h1>
-      <vscode-demo>
-        <div>
-          <vscode-button id="button" size="medium">Button</vscode-button>
-        </div>
-        <div>
-          <label for="size">Size:</label>
-          <select id="size">
-            <option value="small">small</option>
-            <option value="medium" selected>medium</option>
-            <option value="large">large</option>
-          </select>
-        </div>
-        <script type="module">
-          const button = document.querySelector('#button');
-          const size = document.querySelector('#size');
-
-          size.addEventListener('change', () => {
-            button.setAttribute('size', size.value);
-          });
-        </script>
-      </vscode-demo>
-    </main>
-  </body>
-</html>
diff --git a/dev/vscode-checkbox/basic-example.html b/dev/vscode-checkbox/basic-example.html
index 9b5337022..1e659d664 100644
--- a/dev/vscode-checkbox/basic-example.html
+++ b/dev/vscode-checkbox/basic-example.html
@@ -36,9 +36,28 @@ <h2>Basic example</h2>
         ></vscode-checkbox>
         <input type="checkbox" id="native-checkbox-1" disabled />
         <label for="native-checkbox-1" disabled>Native checkbox</label>
+        <div>
+          <button type="button" class="size-button" data-size="small">
+            small
+          </button>
+          <button type="button" class="size-button" data-size="medium">
+            medium
+          </button>
+          <button type="button" class="size-button" data-size="large">
+            large
+          </button>
+        </div>
         <script type="module">
           const cb1 = document.querySelector('#checkbox-1');
           const ncb1 = document.querySelector('#native-checkbox-1');
+
+          document.querySelectorAll('.size-button').forEach((button) => {
+            button.addEventListener('click', () => {
+              document.querySelectorAll('vscode-checkbox').forEach((el) => {
+                el.setAttribute('size', button.dataset.size);
+              });
+            });
+          });
           cb1.addEventListener('click', (ev) => {
             console.log(ev);
           });
diff --git a/dev/vscode-checkbox/size.html b/dev/vscode-checkbox/size.html
deleted file mode 100644
index 1491be1a4..000000000
--- a/dev/vscode-checkbox/size.html
+++ /dev/null
@@ -1,49 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>VSCode Elements</title>
-    <link
-      rel="stylesheet"
-      href="/node_modules/@vscode/codicons/dist/codicon.css"
-      id="vscode-codicon-stylesheet"
-    />
-    <script
-      type="module"
-      src="/node_modules/@vscode-elements/webview-playground/dist/index.js"
-    ></script>
-    <script type="module" src="/dist/main.js"></script>
-  </head>
-
-  <body>
-    <main>
-      <h1>Checkbox sizes</h1>
-      <vscode-demo>
-        <div>
-          <vscode-checkbox
-            id="checkbox"
-            size="medium"
-            label="Checkbox example"
-          ></vscode-checkbox>
-        </div>
-        <div>
-          <label for="size">Size:</label>
-          <select id="size">
-            <option value="small">small</option>
-            <option value="medium" selected>medium</option>
-            <option value="large">large</option>
-          </select>
-        </div>
-        <script type="module">
-          const checkbox = document.querySelector('#checkbox');
-          const size = document.querySelector('#size');
-
-          size.addEventListener('change', () => {
-            checkbox.setAttribute('size', size.value);
-          });
-        </script>
-      </vscode-demo>
-    </main>
-  </body>
-</html>
diff --git a/dev/vscode-form-group/size.html b/dev/vscode-form-group/size.html
deleted file mode 100644
index 4313de30d..000000000
--- a/dev/vscode-form-group/size.html
+++ /dev/null
@@ -1,112 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>VSCode Elements</title>
-    <link
-      rel="stylesheet"
-      href="/node_modules/@vscode/codicons/dist/codicon.css"
-      id="vscode-codicon-stylesheet"
-    />
-    <script
-      type="module"
-      src="/node_modules/@vscode-elements/webview-playground/dist/index.js"
-    ></script>
-    <script type="module" src="/dist/main.js"></script>
-  </head>
-
-  <body>
-    <main>
-      <h1>Form group sizes</h1>
-      <p>
-        The font size of the slotted form controls follows the form group size
-        automatically. Size-specific spacing adjustments are applied when the
-        <code>size</code> attribute is also set on the slotted controls.
-      </p>
-      <vscode-demo>
-        <div>
-          <vscode-form-container>
-            <vscode-form-group id="form-group" size="medium">
-              <vscode-label for="textfield">Textfield</vscode-label>
-              <vscode-textfield
-                id="textfield"
-                placeholder="Placeholder..."
-              ></vscode-textfield>
-              <vscode-form-helper>Helper text</vscode-form-helper>
-            </vscode-form-group>
-            <vscode-form-group id="form-group-2" size="medium">
-              <vscode-label for="textarea">Textarea</vscode-label>
-              <vscode-textarea
-                id="textarea"
-                placeholder="Placeholder..."
-              ></vscode-textarea>
-            </vscode-form-group>
-            <vscode-form-group id="form-group-3" size="medium">
-              <vscode-label for="single-select">Single select</vscode-label>
-              <vscode-single-select id="single-select">
-                <vscode-option>Lorem</vscode-option>
-                <vscode-option>Ipsum</vscode-option>
-                <vscode-option>Dolor</vscode-option>
-              </vscode-single-select>
-            </vscode-form-group>
-            <vscode-form-group id="form-group-4" size="medium">
-              <vscode-label for="multi-select">Multi select</vscode-label>
-              <vscode-multi-select id="multi-select">
-                <vscode-option>Lorem</vscode-option>
-                <vscode-option selected>Ipsum</vscode-option>
-                <vscode-option>Dolor</vscode-option>
-              </vscode-multi-select>
-            </vscode-form-group>
-            <vscode-form-group id="form-group-5" size="medium">
-              <vscode-label>Checkbox</vscode-label>
-              <vscode-checkbox-group>
-                <vscode-checkbox label="Lorem" checked></vscode-checkbox>
-                <vscode-checkbox label="Ipsum"></vscode-checkbox>
-              </vscode-checkbox-group>
-            </vscode-form-group>
-            <vscode-form-group id="form-group-6" size="medium">
-              <vscode-label>Radio</vscode-label>
-              <vscode-radio-group>
-                <vscode-radio name="radio-example" value="1" checked
-                  >Lorem</vscode-radio
-                >
-                <vscode-radio name="radio-example" value="2"
-                  >Ipsum</vscode-radio
-                >
-              </vscode-radio-group>
-            </vscode-form-group>
-            <vscode-form-group id="form-group-7" size="medium">
-              <vscode-button>Save</vscode-button>
-              <vscode-button secondary>Cancel</vscode-button>
-            </vscode-form-group>
-          </vscode-form-container>
-        </div>
-        <div>
-          <label for="size">Size:</label>
-          <select id="size">
-            <option value="small">small</option>
-            <option value="medium" selected>medium</option>
-            <option value="large">large</option>
-          </select>
-        </div>
-        <script type="module">
-          const formGroups = document.querySelectorAll('vscode-form-group');
-          const controls = document.querySelectorAll(
-            'vscode-textfield, vscode-textarea, vscode-single-select, vscode-multi-select, vscode-checkbox, vscode-radio, vscode-button'
-          );
-          const size = document.querySelector('#size');
-
-          size.addEventListener('change', () => {
-            formGroups.forEach((group) => {
-              group.setAttribute('size', size.value);
-            });
-            controls.forEach((control) => {
-              control.setAttribute('size', size.value);
-            });
-          });
-        </script>
-      </vscode-demo>
-    </main>
-  </body>
-</html>
diff --git a/dev/vscode-label/basic-example.html b/dev/vscode-label/basic-example.html
index e75a40797..351fcc6b9 100644
--- a/dev/vscode-label/basic-example.html
+++ b/dev/vscode-label/basic-example.html
@@ -30,6 +30,29 @@
           <vscode-label for="textfield">Label example</vscode-label>
           <vscode-textfield id="textfield"></vscode-textfield
         ></vscode-form-group>
+        <div>
+          <button type="button" class="size-button" data-size="small">
+            small
+          </button>
+          <button type="button" class="size-button" data-size="medium">
+            medium
+          </button>
+          <button type="button" class="size-button" data-size="large">
+            large
+          </button>
+        </div>
+        <script type="module">
+          document.querySelectorAll('.size-button').forEach((button) => {
+            button.addEventListener('click', () => {
+              document
+                .querySelector('vscode-form-group')
+                .setAttribute('size', button.dataset.size);
+              document
+                .querySelector('#textfield')
+                .setAttribute('size', button.dataset.size);
+            });
+          });
+        </script>
       </vscode-demo>
     </main>
   </body>
diff --git a/dev/vscode-multi-select/combobox.html b/dev/vscode-multi-select/combobox.html
index 0b25f7e12..1e3da5916 100644
--- a/dev/vscode-multi-select/combobox.html
+++ b/dev/vscode-multi-select/combobox.html
@@ -31,11 +31,28 @@
           <vscode-option>Ipsum</vscode-option>
           <vscode-option>Dolor</vscode-option>
         </vscode-multi-select>
+        <div>
+          <button type="button" class="size-button" data-size="small">
+            small
+          </button>
+          <button type="button" class="size-button" data-size="medium">
+            medium
+          </button>
+          <button type="button" class="size-button" data-size="large">
+            large
+          </button>
+        </div>
         <script type="module">
           const sl = document.querySelector('vscode-multi-select');
           sl.addEventListener('change', () => {
             console.log(sl.value);
           });
+
+          document.querySelectorAll('.size-button').forEach((button) => {
+            button.addEventListener('click', () => {
+              sl.setAttribute('size', button.dataset.size);
+            });
+          });
         </script>
       </vscode-demo>
     </main>
diff --git a/dev/vscode-multi-select/size.html b/dev/vscode-multi-select/size.html
deleted file mode 100644
index 378757e0e..000000000
--- a/dev/vscode-multi-select/size.html
+++ /dev/null
@@ -1,49 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>VSCode Elements</title>
-    <link
-      rel="stylesheet"
-      href="/node_modules/@vscode/codicons/dist/codicon.css"
-      id="vscode-codicon-stylesheet"
-    />
-    <script
-      type="module"
-      src="/node_modules/@vscode-elements/webview-playground/dist/index.js"
-    ></script>
-    <script type="module" src="/dist/main.js"></script>
-  </head>
-
-  <body>
-    <main>
-      <h1>Multi select sizes</h1>
-      <vscode-demo>
-        <div>
-          <vscode-multi-select id="multi-select" size="medium">
-            <vscode-option>Lorem</vscode-option>
-            <vscode-option selected>Ipsum</vscode-option>
-            <vscode-option>Dolor</vscode-option>
-          </vscode-multi-select>
-        </div>
-        <div>
-          <label for="size">Size:</label>
-          <select id="size">
-            <option value="small">small</option>
-            <option value="medium" selected>medium</option>
-            <option value="large">large</option>
-          </select>
-        </div>
-        <script type="module">
-          const select = document.querySelector('#multi-select');
-          const size = document.querySelector('#size');
-
-          size.addEventListener('change', () => {
-            select.setAttribute('size', size.value);
-          });
-        </script>
-      </vscode-demo>
-    </main>
-  </body>
-</html>
diff --git a/dev/vscode-radio-group/checked.html b/dev/vscode-radio-group/checked.html
index 3f96687d9..8b3e38a4b 100644
--- a/dev/vscode-radio-group/checked.html
+++ b/dev/vscode-radio-group/checked.html
@@ -37,6 +37,17 @@ <h1>Component demo</h1>
           </vscode-radio-group>
           <button type="reset">Reset</button>
           <button type="submit">Submit</button>
+          <div>
+            <button type="button" class="size-button" data-size="small">
+              small
+            </button>
+            <button type="button" class="size-button" data-size="medium">
+              medium
+            </button>
+            <button type="button" class="size-button" data-size="large">
+              large
+            </button>
+          </div>
         </form>
         <script type="module">
           const form = document.querySelector('form');
@@ -48,6 +59,14 @@ <h1>Component demo</h1>
 
             console.log(Array.from(fd.entries));
           });
+
+          document.querySelectorAll('.size-button').forEach((button) => {
+            button.addEventListener('click', () => {
+              document.querySelectorAll('vscode-radio').forEach((el) => {
+                el.setAttribute('size', button.dataset.size);
+              });
+            });
+          });
         </script>
       </vscode-demo>
 
diff --git a/dev/vscode-radio/size.html b/dev/vscode-radio/size.html
deleted file mode 100644
index be107a756..000000000
--- a/dev/vscode-radio/size.html
+++ /dev/null
@@ -1,54 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>VSCode Elements</title>
-    <link
-      rel="stylesheet"
-      href="/node_modules/@vscode/codicons/dist/codicon.css"
-      id="vscode-codicon-stylesheet"
-    />
-    <script
-      type="module"
-      src="/node_modules/@vscode-elements/webview-playground/dist/index.js"
-    ></script>
-    <script type="module" src="/dist/main.js"></script>
-  </head>
-
-  <body>
-    <main>
-      <h1>Radio sizes</h1>
-      <vscode-demo>
-        <div>
-          <vscode-radio-group>
-            <vscode-radio name="size-example" value="1" size="medium" checked
-              >Lorem</vscode-radio
-            >
-            <vscode-radio name="size-example" value="2" size="medium"
-              >Ipsum</vscode-radio
-            >
-          </vscode-radio-group>
-        </div>
-        <div>
-          <label for="size">Size:</label>
-          <select id="size">
-            <option value="small">small</option>
-            <option value="medium" selected>medium</option>
-            <option value="large">large</option>
-          </select>
-        </div>
-        <script type="module">
-          const radios = document.querySelectorAll('vscode-radio');
-          const size = document.querySelector('#size');
-
-          size.addEventListener('change', () => {
-            radios.forEach((radio) => {
-              radio.setAttribute('size', size.value);
-            });
-          });
-        </script>
-      </vscode-demo>
-    </main>
-  </body>
-</html>
diff --git a/dev/vscode-single-select/select-mode/basic-example.html b/dev/vscode-single-select/select-mode/basic-example.html
index 5d50c9c6c..6fc8817e9 100644
--- a/dev/vscode-single-select/select-mode/basic-example.html
+++ b/dev/vscode-single-select/select-mode/basic-example.html
@@ -33,6 +33,17 @@
           <vscode-option>Sit</vscode-option>
         </vscode-single-select>
         <button type="button">focus</button>
+        <div>
+          <button type="button" class="size-button" data-size="small">
+            small
+          </button>
+          <button type="button" class="size-button" data-size="medium">
+            medium
+          </button>
+          <button type="button" class="size-button" data-size="large">
+            large
+          </button>
+        </div>
       </vscode-demo>
       <script type="module">
         const sl = document.querySelector('vscode-single-select');
@@ -41,6 +52,12 @@
         bt.addEventListener('click', () => {
           sl.focus();
         });
+
+        document.querySelectorAll('.size-button').forEach((button) => {
+          button.addEventListener('click', () => {
+            sl.setAttribute('size', button.dataset.size);
+          });
+        });
       </script>
     </main>
   </body>
diff --git a/dev/vscode-single-select/size.html b/dev/vscode-single-select/size.html
deleted file mode 100644
index fef4efe7a..000000000
--- a/dev/vscode-single-select/size.html
+++ /dev/null
@@ -1,49 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>VSCode Elements</title>
-    <link
-      rel="stylesheet"
-      href="/node_modules/@vscode/codicons/dist/codicon.css"
-      id="vscode-codicon-stylesheet"
-    />
-    <script
-      type="module"
-      src="/node_modules/@vscode-elements/webview-playground/dist/index.js"
-    ></script>
-    <script type="module" src="/dist/main.js"></script>
-  </head>
-
-  <body>
-    <main>
-      <h1>Single select sizes</h1>
-      <vscode-demo>
-        <div>
-          <vscode-single-select id="single-select" size="medium">
-            <vscode-option>Lorem</vscode-option>
-            <vscode-option>Ipsum</vscode-option>
-            <vscode-option>Dolor</vscode-option>
-          </vscode-single-select>
-        </div>
-        <div>
-          <label for="size">Size:</label>
-          <select id="size">
-            <option value="small">small</option>
-            <option value="medium" selected>medium</option>
-            <option value="large">large</option>
-          </select>
-        </div>
-        <script type="module">
-          const select = document.querySelector('#single-select');
-          const size = document.querySelector('#size');
-
-          size.addEventListener('change', () => {
-            select.setAttribute('size', size.value);
-          });
-        </script>
-      </vscode-demo>
-    </main>
-  </body>
-</html>
diff --git a/dev/vscode-textarea/csp.html b/dev/vscode-textarea/csp.html
index 159b6e525..22431e019 100644
--- a/dev/vscode-textarea/csp.html
+++ b/dev/vscode-textarea/csp.html
@@ -53,7 +53,31 @@
     <h1>Apply CSP</h1>
     <main>
       <vscode-demo>
-        <vscode-textarea value="ffff" resize="vertical"></vscode-textarea>
+        <vscode-textarea
+          id="textarea"
+          value="ffff"
+          resize="vertical"
+        ></vscode-textarea>
+        <div>
+          <button type="button" class="size-button" data-size="small">
+            small
+          </button>
+          <button type="button" class="size-button" data-size="medium">
+            medium
+          </button>
+          <button type="button" class="size-button" data-size="large">
+            large
+          </button>
+        </div>
+        <script type="module" nonce="abc123">
+          const el = document.getElementById('textarea');
+
+          document.querySelectorAll('.size-button').forEach((button) => {
+            button.addEventListener('click', () => {
+              el.setAttribute('size', button.dataset.size);
+            });
+          });
+        </script>
       </vscode-demo>
     </main>
   </body>
diff --git a/dev/vscode-textarea/size.html b/dev/vscode-textarea/size.html
deleted file mode 100644
index 889789460..000000000
--- a/dev/vscode-textarea/size.html
+++ /dev/null
@@ -1,49 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>VSCode Elements</title>
-    <link
-      rel="stylesheet"
-      href="/node_modules/@vscode/codicons/dist/codicon.css"
-      id="vscode-codicon-stylesheet"
-    />
-    <script
-      type="module"
-      src="/node_modules/@vscode-elements/webview-playground/dist/index.js"
-    ></script>
-    <script type="module" src="/dist/main.js"></script>
-  </head>
-
-  <body>
-    <main>
-      <h1>Textarea sizes</h1>
-      <vscode-demo>
-        <div>
-          <vscode-textarea
-            id="textarea"
-            size="medium"
-            placeholder="Placeholder..."
-          ></vscode-textarea>
-        </div>
-        <div>
-          <label for="size">Size:</label>
-          <select id="size">
-            <option value="small">small</option>
-            <option value="medium" selected>medium</option>
-            <option value="large">large</option>
-          </select>
-        </div>
-        <script type="module">
-          const textarea = document.querySelector('#textarea');
-          const size = document.querySelector('#size');
-
-          size.addEventListener('change', () => {
-            textarea.setAttribute('size', size.value);
-          });
-        </script>
-      </vscode-demo>
-    </main>
-  </body>
-</html>
diff --git a/dev/vscode-textfield/basic-example.html b/dev/vscode-textfield/basic-example.html
index edc6822dc..957c6b8e2 100644
--- a/dev/vscode-textfield/basic-example.html
+++ b/dev/vscode-textfield/basic-example.html
@@ -39,10 +39,27 @@ <h2>Basic example</h2>
           ></vscode-icon>
         </vscode-textfield>
         <button type="button" id="bt-focus">focus</button>
+        <div>
+          <button type="button" class="size-button" data-size="small">
+            small
+          </button>
+          <button type="button" class="size-button" data-size="medium">
+            medium
+          </button>
+          <button type="button" class="size-button" data-size="large">
+            large
+          </button>
+        </div>
         <script type="module">
           const el = document.getElementById('field-1');
           const icon = document.getElementById('search-icon');
 
+          document.querySelectorAll('.size-button').forEach((button) => {
+            button.addEventListener('click', () => {
+              el.setAttribute('size', button.dataset.size);
+            });
+          });
+
           document.addEventListener('invalid', (ev) => {
             console.log(ev);
           });
diff --git a/dev/vscode-textfield/size.html b/dev/vscode-textfield/size.html
deleted file mode 100644
index 39fbe93d9..000000000
--- a/dev/vscode-textfield/size.html
+++ /dev/null
@@ -1,49 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>VSCode Elements</title>
-    <link
-      rel="stylesheet"
-      href="/node_modules/@vscode/codicons/dist/codicon.css"
-      id="vscode-codicon-stylesheet"
-    />
-    <script
-      type="module"
-      src="/node_modules/@vscode-elements/webview-playground/dist/index.js"
-    ></script>
-    <script type="module" src="/dist/main.js"></script>
-  </head>
-
-  <body>
-    <main>
-      <h1>Textfield sizes</h1>
-      <vscode-demo>
-        <div>
-          <vscode-textfield
-            id="textfield"
-            size="medium"
-            placeholder="Placeholder..."
-          ></vscode-textfield>
-        </div>
-        <div>
-          <label for="size">Size:</label>
-          <select id="size">
-            <option value="small">small</option>
-            <option value="medium" selected>medium</option>
-            <option value="large">large</option>
-          </select>
-        </div>
-        <script type="module">
-          const textfield = document.querySelector('#textfield');
-          const size = document.querySelector('#size');
-
-          size.addEventListener('change', () => {
-            textfield.setAttribute('size', size.value);
-          });
-        </script>
-      </vscode-demo>
-    </main>
-  </body>
-</html>

From d6c8852171ef80dc14cb0563e37db44b8dcdc02d Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sat, 29 Aug 2026 05:07:21 +0000
Subject: [PATCH 10/31] dev: scope size switcher selectors in demo pages

Co-authored-by: 171h <40647432+171h@users.noreply.github.com>
---
 dev/vscode-button/basic-examples.html  |  4 ++--
 dev/vscode-checkbox/basic-example.html | 10 ++++++----
 dev/vscode-label/basic-example.html    |  6 +++---
 dev/vscode-radio-group/checked.html    | 10 ++++++----
 4 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/dev/vscode-button/basic-examples.html b/dev/vscode-button/basic-examples.html
index 211a40dda..cc0fbecf0 100644
--- a/dev/vscode-button/basic-examples.html
+++ b/dev/vscode-button/basic-examples.html
@@ -25,7 +25,7 @@
 
   <body>
     <main>
-      <vscode-demo>
+      <vscode-demo id="demo">
         <vscode-button>Primary Button</vscode-button>
         <vscode-button secondary>Secondary Button</vscode-button>
         <div>
@@ -42,7 +42,7 @@
         <script type="module">
           document.querySelectorAll('.size-button').forEach((button) => {
             button.addEventListener('click', () => {
-              document.querySelectorAll('vscode-button').forEach((el) => {
+              document.querySelectorAll('#demo vscode-button').forEach((el) => {
                 el.setAttribute('size', button.dataset.size);
               });
             });
diff --git a/dev/vscode-checkbox/basic-example.html b/dev/vscode-checkbox/basic-example.html
index 1e659d664..b03c1f964 100644
--- a/dev/vscode-checkbox/basic-example.html
+++ b/dev/vscode-checkbox/basic-example.html
@@ -15,7 +15,7 @@
   <body>
     <main>
       <h2>Basic example</h2>
-      <vscode-demo>
+      <vscode-demo id="demo">
         <vscode-checkbox
           label="Checkbox example"
           value="testvalue1"
@@ -53,9 +53,11 @@ <h2>Basic example</h2>
 
           document.querySelectorAll('.size-button').forEach((button) => {
             button.addEventListener('click', () => {
-              document.querySelectorAll('vscode-checkbox').forEach((el) => {
-                el.setAttribute('size', button.dataset.size);
-              });
+              document
+                .querySelectorAll('#demo vscode-checkbox')
+                .forEach((el) => {
+                  el.setAttribute('size', button.dataset.size);
+                });
             });
           });
           cb1.addEventListener('click', (ev) => {
diff --git a/dev/vscode-label/basic-example.html b/dev/vscode-label/basic-example.html
index 351fcc6b9..45a5829d7 100644
--- a/dev/vscode-label/basic-example.html
+++ b/dev/vscode-label/basic-example.html
@@ -26,7 +26,7 @@
   <body>
     <main>
       <vscode-demo>
-        <vscode-form-group>
+        <vscode-form-group id="form-group">
           <vscode-label for="textfield">Label example</vscode-label>
           <vscode-textfield id="textfield"></vscode-textfield
         ></vscode-form-group>
@@ -45,10 +45,10 @@
           document.querySelectorAll('.size-button').forEach((button) => {
             button.addEventListener('click', () => {
               document
-                .querySelector('vscode-form-group')
+                .getElementById('form-group')
                 .setAttribute('size', button.dataset.size);
               document
-                .querySelector('#textfield')
+                .getElementById('textfield')
                 .setAttribute('size', button.dataset.size);
             });
           });
diff --git a/dev/vscode-radio-group/checked.html b/dev/vscode-radio-group/checked.html
index 8b3e38a4b..20d5fe58c 100644
--- a/dev/vscode-radio-group/checked.html
+++ b/dev/vscode-radio-group/checked.html
@@ -28,7 +28,7 @@ <h1>Component demo</h1>
     <main>
       <vscode-demo>
         <form action="/">
-          <vscode-radio-group>
+          <vscode-radio-group id="radio-group">
             <vscode-radio name="radio-example" value="1">Lorem</vscode-radio>
             <vscode-radio name="radio-example" value="2" checked
               >Ipsum</vscode-radio
@@ -62,9 +62,11 @@ <h1>Component demo</h1>
 
           document.querySelectorAll('.size-button').forEach((button) => {
             button.addEventListener('click', () => {
-              document.querySelectorAll('vscode-radio').forEach((el) => {
-                el.setAttribute('size', button.dataset.size);
-              });
+              document
+                .querySelectorAll('#radio-group vscode-radio')
+                .forEach((el) => {
+                  el.setAttribute('size', button.dataset.size);
+                });
             });
           });
         </script>

From 3f0841c6aea94b54813184dcb408871f9b937567 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sat, 29 Aug 2026 05:16:43 +0000
Subject: [PATCH 11/31] dev: add size switcher buttons to all form component
 demos

Co-authored-by: 171h <40647432+171h@users.noreply.github.com>
---
 dev/vscode-button-group/dropdown-menu.html    |  18 +-
 .../vscode-button-group.html                  |  18 +-
 dev/vscode-button/autofocus.html              |  18 +-
 dev/vscode-button/basic-examples.html         |  64 ++++--
 dev/vscode-button/block-button.html           |  18 +-
 dev/vscode-button/fallback-styles.html        |  22 +-
 dev/vscode-button/icon-button.html            |  18 +-
 dev/vscode-button/reset.html                  |  18 +-
 dev/vscode-button/slots.html                  |  18 +-
 dev/vscode-button/submit.html                 |  18 +-
 dev/vscode-button/variations.html             |  18 +-
 dev/vscode-checkbox/basic-example.html        | 134 +++++++-----
 dev/vscode-checkbox/fallback-styles.html      |  20 +-
 dev/vscode-checkbox/group.html                |  18 +-
 dev/vscode-checkbox/toggle.html               |  18 +-
 dev/vscode-checkbox/validate-checked.html     |  18 +-
 dev/vscode-label/basic-example.html           |  18 +-
 dev/vscode-multi-select/a11y-combobox.html    |  18 +-
 dev/vscode-multi-select/a11y-select.html      |  18 +-
 .../autofocus-combobox.html                   |  18 +-
 dev/vscode-multi-select/autofocus-select.html |  18 +-
 .../combobox-suggestion-mode.html             |  18 +-
 dev/vscode-multi-select/combobox.html         |  18 +-
 dev/vscode-multi-select/events.html           |  18 +-
 dev/vscode-multi-select/fallback-styles.html  |  28 ++-
 dev/vscode-multi-select/issue-510.html        |  18 +-
 dev/vscode-multi-select/long-text.html        |  18 +-
 dev/vscode-multi-select/open-prop.html        |  18 +-
 dev/vscode-multi-select/set-option.html       |  18 +-
 .../set-value-before-options.html             |  18 +-
 dev/vscode-multi-select/sync-options.html     |  18 +-
 dev/vscode-radio-group/checked.html           |  18 +-
 dev/vscode-radio-group/default-checked.html   |  18 +-
 dev/vscode-radio-group/issue-511.html         |  18 +-
 dev/vscode-radio/fallback-styles.html         |  26 ++-
 .../combobox-mode/a11y.html                   |  18 +-
 .../combobox-mode/autofocus-combobox.html     |  18 +-
 .../combobox-suggestion-mode.html             |  18 +-
 .../combobox-mode/combobox.html               |  18 +-
 .../combobox-mode/deleting-value.html         |  18 +-
 dev/vscode-single-select/issue-530.html       |  13 +-
 .../select-mode/a11y.html                     |  18 +-
 .../select-mode/autofocus-select.html         |  18 +-
 .../select-mode/basic-example.html            |  18 +-
 .../select-mode/default-empty.html            |  18 +-
 .../select-mode/description.html              |  18 +-
 .../select-mode/disabled-options.html         |  18 +-
 .../select-mode/dispatch-invalid-event.html   |  18 +-
 .../select-mode/element-value.html            |  18 +-
 .../select-mode/empty-label.html              |  18 +-
 .../select-mode/initial-form-value.html       |  18 +-
 .../select-mode/issue-514.html                | 198 ++++++++++--------
 .../large-list-within-collapsible.html        |  18 +-
 .../select-mode/large-list.html               |  18 +-
 .../select-mode/long-text.html                |  18 +-
 .../select-mode/open-prop.html                |  18 +-
 .../open-when-enter-key-pressed.html          |  18 +-
 .../select-mode/option-with-empty-value.html  |  18 +-
 .../select-mode/position-above.html           |  18 +-
 .../select-mode/required-flag.html            |  18 +-
 .../select-mode/scroll-demo.html              |  18 +-
 .../scroll-to-the-selected-option.html        |  18 +-
 .../set-empty-value-before-options.html       |  18 +-
 .../select-mode/set-value-before-options.html |  18 +-
 .../select-mode/sync-options.html             |  18 +-
 dev/vscode-textarea/a11y.html                 |  22 +-
 dev/vscode-textarea/csp.html                  |  18 +-
 dev/vscode-textfield/basic-example.html       |  18 +-
 dev/vscode-textfield/events.html              |  18 +-
 dev/vscode-textfield/fallback-styles.html     |  33 ++-
 dev/vscode-textfield/file-input.html          |  18 +-
 .../validation-min-validation.html            |  18 +-
 .../validation-on-value-change.html           |  18 +-
 73 files changed, 1440 insertions(+), 254 deletions(-)

diff --git a/dev/vscode-button-group/dropdown-menu.html b/dev/vscode-button-group/dropdown-menu.html
index 17a6065d6..d1c89ce7c 100644
--- a/dev/vscode-button-group/dropdown-menu.html
+++ b/dev/vscode-button-group/dropdown-menu.html
@@ -34,7 +34,7 @@
     <main>
       <h2>Basic example</h2>
 
-      <vscode-demo>
+      <vscode-demo id="size-demo-target">
         <div class="dropdown-menu">
           <vscode-button-group>
             <vscode-button secondary id="button-1" icon="check"
@@ -91,7 +91,23 @@ <h2>Basic example</h2>
             menu.show = !menu.show;
           });
         </script>
+        <div class="size-buttons">
+          <button type="button" data-size="small">small</button>
+          <button type="button" data-size="medium">medium</button>
+          <button type="button" data-size="large">large</button>
+        </div>
       </vscode-demo>
     </main>
+    <script type="module">
+      document.querySelectorAll('.size-buttons button').forEach((button) => {
+        button.addEventListener('click', () => {
+          document
+            .querySelectorAll('#size-demo-target vscode-button')
+            .forEach((el) => {
+              el.setAttribute('size', button.dataset.size);
+            });
+        });
+      });
+    </script>
   </body>
 </html>
diff --git a/dev/vscode-button-group/vscode-button-group.html b/dev/vscode-button-group/vscode-button-group.html
index db35a32ea..6217d6628 100644
--- a/dev/vscode-button-group/vscode-button-group.html
+++ b/dev/vscode-button-group/vscode-button-group.html
@@ -53,7 +53,7 @@
     <main>
       <h2>Basic example</h2>
 
-      <vscode-demo>
+      <vscode-demo id="size-demo-target">
         <p>
           <vscode-button-group>
             <vscode-button secondary>Left</vscode-button>
@@ -144,7 +144,23 @@ <h2>Basic example</h2>
             >
           </vscode-button-group>
         </div>
+        <div class="size-buttons">
+          <button type="button" data-size="small">small</button>
+          <button type="button" data-size="medium">medium</button>
+          <button type="button" data-size="large">large</button>
+        </div>
       </vscode-demo>
     </main>
+    <script type="module">
+      document.querySelectorAll('.size-buttons button').forEach((button) => {
+        button.addEventListener('click', () => {
+          document
+            .querySelectorAll('#size-demo-target vscode-button')
+            .forEach((el) => {
+              el.setAttribute('size', button.dataset.size);
+            });
+        });
+      });
+    </script>
   </body>
 </html>
diff --git a/dev/vscode-button/autofocus.html b/dev/vscode-button/autofocus.html
index 885fd8deb..9bd3b168a 100644
--- a/dev/vscode-button/autofocus.html
+++ b/dev/vscode-button/autofocus.html
@@ -26,9 +26,25 @@
   <body>
     <h1>Autofocus</h1>
     <main>
-      <vscode-demo>
+      <vscode-demo id="size-demo-target">
         <vscode-button autofocus>Focused</vscode-button>
+        <div class="size-buttons">
+          <button type="button" data-size="small">small</button>
+          <button type="button" data-size="medium">medium</button>
+          <button type="button" data-size="large">large</button>
+        </div>
       </vscode-demo>
     </main>
+    <script type="module">
+      document.querySelectorAll('.size-buttons button').forEach((button) => {
+        button.addEventListener('click', () => {
+          document
+            .querySelectorAll('#size-demo-target vscode-button')
+            .forEach((el) => {
+              el.setAttribute('size', button.dataset.size);
+            });
+        });
+      });
+    </script>
   </body>
 </html>
diff --git a/dev/vscode-button/basic-examples.html b/dev/vscode-button/basic-examples.html
index cc0fbecf0..a2cb08f55 100644
--- a/dev/vscode-button/basic-examples.html
+++ b/dev/vscode-button/basic-examples.html
@@ -25,30 +25,50 @@
 
   <body>
     <main>
-      <vscode-demo id="demo">
-        <vscode-button>Primary Button</vscode-button>
-        <vscode-button secondary>Secondary Button</vscode-button>
-        <div>
-          <button type="button" class="size-button" data-size="small">
-            small
-          </button>
-          <button type="button" class="size-button" data-size="medium">
-            medium
-          </button>
-          <button type="button" class="size-button" data-size="large">
-            large
-          </button>
-        </div>
-        <script type="module">
-          document.querySelectorAll('.size-button').forEach((button) => {
-            button.addEventListener('click', () => {
-              document.querySelectorAll('#demo vscode-button').forEach((el) => {
-                el.setAttribute('size', button.dataset.size);
+      <div id="size-demo-target">
+        <vscode-demo id="demo">
+          <vscode-button>Primary Button</vscode-button>
+          <vscode-button secondary>Secondary Button</vscode-button>
+          <div>
+            <button type="button" class="size-button" data-size="small">
+              small
+            </button>
+            <button type="button" class="size-button" data-size="medium">
+              medium
+            </button>
+            <button type="button" class="size-button" data-size="large">
+              large
+            </button>
+          </div>
+          <script type="module">
+            document.querySelectorAll('.size-button').forEach((button) => {
+              button.addEventListener('click', () => {
+                document
+                  .querySelectorAll('#demo vscode-button')
+                  .forEach((el) => {
+                    el.setAttribute('size', button.dataset.size);
+                  });
               });
             });
-          });
-        </script>
-      </vscode-demo>
+          </script>
+          <div class="size-buttons">
+            <button type="button" data-size="small">small</button>
+            <button type="button" data-size="medium">medium</button>
+            <button type="button" data-size="large">large</button>
+          </div>
+        </vscode-demo>
+      </div>
     </main>
+    <script type="module">
+      document.querySelectorAll('.size-buttons button').forEach((button) => {
+        button.addEventListener('click', () => {
+          document
+            .querySelectorAll('#size-demo-target vscode-button')
+            .forEach((el) => {
+              el.setAttribute('size', button.dataset.size);
+            });
+        });
+      });
+    </script>
   </body>
 </html>
diff --git a/dev/vscode-button/block-button.html b/dev/vscode-button/block-button.html
index 2e4edb58f..db4f04318 100644
--- a/dev/vscode-button/block-button.html
+++ b/dev/vscode-button/block-button.html
@@ -25,7 +25,7 @@
 
   <body>
     <main>
-      <vscode-demo>
+      <vscode-demo id="size-demo-target">
         <div
           style="width: 320px; display: flex; flex-direction: column; gap: 6px"
         >
@@ -35,7 +35,23 @@
           <vscode-button block>Block Button</vscode-button>
           <vscode-button block secondary>Secondary Block Button</vscode-button>
         </div>
+        <div class="size-buttons">
+          <button type="button" data-size="small">small</button>
+          <button type="button" data-size="medium">medium</button>
+          <button type="button" data-size="large">large</button>
+        </div>
       </vscode-demo>
     </main>
+    <script type="module">
+      document.querySelectorAll('.size-buttons button').forEach((button) => {
+        button.addEventListener('click', () => {
+          document
+            .querySelectorAll('#size-demo-target vscode-button')
+            .forEach((el) => {
+              el.setAttribute('size', button.dataset.size);
+            });
+        });
+      });
+    </script>
   </body>
 </html>
diff --git a/dev/vscode-button/fallback-styles.html b/dev/vscode-button/fallback-styles.html
index 05d91f766..7deb996e7 100644
--- a/dev/vscode-button/fallback-styles.html
+++ b/dev/vscode-button/fallback-styles.html
@@ -21,8 +21,26 @@
 
   <body style="background-color: #1f1f1f">
     <main>
-      <p><vscode-button>Primary Button</vscode-button></p>
-      <p><vscode-button secondary>Secondary Button</vscode-button></p>
+      <div id="size-demo-target">
+        <p><vscode-button>Primary Button</vscode-button></p>
+        <p><vscode-button secondary>Secondary Button</vscode-button></p>
+      </div>
+      <div class="size-buttons">
+        <button type="button" data-size="small">small</button>
+        <button type="button" data-size="medium">medium</button>
+        <button type="button" data-size="large">large</button>
+      </div>
     </main>
+    <script type="module">
+      document.querySelectorAll('.size-buttons button').forEach((button) => {
+        button.addEventListener('click', () => {
+          document
+            .querySelectorAll('#size-demo-target vscode-button')
+            .forEach((el) => {
+              el.setAttribute('size', button.dataset.size);
+            });
+        });
+      });
+    </script>
   </body>
 </html>
diff --git a/dev/vscode-button/icon-button.html b/dev/vscode-button/icon-button.html
index 55a9c6d8e..4195817f5 100644
--- a/dev/vscode-button/icon-button.html
+++ b/dev/vscode-button/icon-button.html
@@ -25,10 +25,26 @@
 
   <body>
     <main>
-      <vscode-demo>
+      <vscode-demo id="size-demo-target">
         <vscode-button icon="account"></vscode-button>
         <vscode-button icon="add" secondary></vscode-button>
+        <div class="size-buttons">
+          <button type="button" data-size="small">small</button>
+          <button type="button" data-size="medium">medium</button>
+          <button type="button" data-size="large">large</button>
+        </div>
       </vscode-demo>
     </main>
+    <script type="module">
+      document.querySelectorAll('.size-buttons button').forEach((button) => {
+        button.addEventListener('click', () => {
+          document
+            .querySelectorAll('#size-demo-target vscode-button')
+            .forEach((el) => {
+              el.setAttribute('size', button.dataset.size);
+            });
+        });
+      });
+    </script>
   </body>
 </html>
diff --git a/dev/vscode-button/reset.html b/dev/vscode-button/reset.html
index 6b740b95d..133dce3a4 100644
--- a/dev/vscode-button/reset.html
+++ b/dev/vscode-button/reset.html
@@ -26,12 +26,28 @@
   <body>
     <h1>Reset form</h1>
     <main>
-      <vscode-demo>
+      <vscode-demo id="size-demo-target">
         <form action="/">
           <p><input type="text" value="Default value" /></p>
           <vscode-button type="reset">Reset</vscode-button>
         </form>
+        <div class="size-buttons">
+          <button type="button" data-size="small">small</button>
+          <button type="button" data-size="medium">medium</button>
+          <button type="button" data-size="large">large</button>
+        </div>
       </vscode-demo>
     </main>
+    <script type="module">
+      document.querySelectorAll('.size-buttons button').forEach((button) => {
+        button.addEventListener('click', () => {
+          document
+            .querySelectorAll('#size-demo-target vscode-button')
+            .forEach((el) => {
+              el.setAttribute('size', button.dataset.size);
+            });
+        });
+      });
+    </script>
   </body>
 </html>
diff --git a/dev/vscode-button/slots.html b/dev/vscode-button/slots.html
index 7f157b4e1..6031200c6 100644
--- a/dev/vscode-button/slots.html
+++ b/dev/vscode-button/slots.html
@@ -25,7 +25,7 @@
 
   <body>
     <main>
-      <vscode-demo>
+      <vscode-demo id="size-demo-target">
         <vscode-button
           ><svg
             width="16"
@@ -51,7 +51,23 @@
           </svg>
           Button label</vscode-button
         >
+        <div class="size-buttons">
+          <button type="button" data-size="small">small</button>
+          <button type="button" data-size="medium">medium</button>
+          <button type="button" data-size="large">large</button>
+        </div>
       </vscode-demo>
     </main>
+    <script type="module">
+      document.querySelectorAll('.size-buttons button').forEach((button) => {
+        button.addEventListener('click', () => {
+          document
+            .querySelectorAll('#size-demo-target vscode-button')
+            .forEach((el) => {
+              el.setAttribute('size', button.dataset.size);
+            });
+        });
+      });
+    </script>
   </body>
 </html>
diff --git a/dev/vscode-button/submit.html b/dev/vscode-button/submit.html
index c0db71bf1..a844d0c11 100644
--- a/dev/vscode-button/submit.html
+++ b/dev/vscode-button/submit.html
@@ -26,12 +26,28 @@
   <body>
     <h1>Reset form</h1>
     <main>
-      <vscode-demo>
+      <vscode-demo id="size-demo-target">
         <form action="/">
           <p><input type="text" value="Default value" name="text-input" /></p>
           <vscode-button type="submit">Submit</vscode-button>
         </form>
+        <div class="size-buttons">
+          <button type="button" data-size="small">small</button>
+          <button type="button" data-size="medium">medium</button>
+          <button type="button" data-size="large">large</button>
+        </div>
       </vscode-demo>
     </main>
+    <script type="module">
+      document.querySelectorAll('.size-buttons button').forEach((button) => {
+        button.addEventListener('click', () => {
+          document
+            .querySelectorAll('#size-demo-target vscode-button')
+            .forEach((el) => {
+              el.setAttribute('size', button.dataset.size);
+            });
+        });
+      });
+    </script>
   </body>
 </html>
diff --git a/dev/vscode-button/variations.html b/dev/vscode-button/variations.html
index 6249a8cba..ff7693568 100644
--- a/dev/vscode-button/variations.html
+++ b/dev/vscode-button/variations.html
@@ -25,7 +25,7 @@
 
   <body>
     <main>
-      <vscode-demo>
+      <vscode-demo id="size-demo-target">
         <div style="display: flex; flex-wrap: wrap; gap: 4px; width: 100%">
           <vscode-button>Primary Button</vscode-button
           ><vscode-button secondary>Secondary Button</vscode-button
@@ -84,7 +84,23 @@
             >
           </div>
         </div>
+        <div class="size-buttons">
+          <button type="button" data-size="small">small</button>
+          <button type="button" data-size="medium">medium</button>
+          <button type="button" data-size="large">large</button>
+        </div>
       </vscode-demo>
     </main>
+    <script type="module">
+      document.querySelectorAll('.size-buttons button').forEach((button) => {
+        button.addEventListener('click', () => {
+          document
+            .querySelectorAll('#size-demo-target vscode-button')
+            .forEach((el) => {
+              el.setAttribute('size', button.dataset.size);
+            });
+        });
+      });
+    </script>
   </body>
 </html>
diff --git a/dev/vscode-checkbox/basic-example.html b/dev/vscode-checkbox/basic-example.html
index b03c1f964..72bd8368c 100644
--- a/dev/vscode-checkbox/basic-example.html
+++ b/dev/vscode-checkbox/basic-example.html
@@ -14,66 +14,84 @@
 
   <body>
     <main>
-      <h2>Basic example</h2>
-      <vscode-demo id="demo">
-        <vscode-checkbox
-          label="Checkbox example"
-          value="testvalue1"
-          autofocus
-          required
-          id="checkbox-1"
-        ></vscode-checkbox>
-        <vscode-checkbox
-          label="Checkbox example"
-          value="testvalue1"
-          checked
-          disabled
-        ></vscode-checkbox>
-        <vscode-checkbox
-          label="Checkbox example"
-          value="testvalue1"
-          indeterminate
-        ></vscode-checkbox>
-        <input type="checkbox" id="native-checkbox-1" disabled />
-        <label for="native-checkbox-1" disabled>Native checkbox</label>
-        <div>
-          <button type="button" class="size-button" data-size="small">
-            small
-          </button>
-          <button type="button" class="size-button" data-size="medium">
-            medium
-          </button>
-          <button type="button" class="size-button" data-size="large">
-            large
-          </button>
-        </div>
-        <script type="module">
-          const cb1 = document.querySelector('#checkbox-1');
-          const ncb1 = document.querySelector('#native-checkbox-1');
+      <div id="size-demo-target">
+        <h2>Basic example</h2>
+        <vscode-demo id="demo">
+          <vscode-checkbox
+            label="Checkbox example"
+            value="testvalue1"
+            autofocus
+            required
+            id="checkbox-1"
+          ></vscode-checkbox>
+          <vscode-checkbox
+            label="Checkbox example"
+            value="testvalue1"
+            checked
+            disabled
+          ></vscode-checkbox>
+          <vscode-checkbox
+            label="Checkbox example"
+            value="testvalue1"
+            indeterminate
+          ></vscode-checkbox>
+          <input type="checkbox" id="native-checkbox-1" disabled />
+          <label for="native-checkbox-1" disabled>Native checkbox</label>
+          <div>
+            <button type="button" class="size-button" data-size="small">
+              small
+            </button>
+            <button type="button" class="size-button" data-size="medium">
+              medium
+            </button>
+            <button type="button" class="size-button" data-size="large">
+              large
+            </button>
+          </div>
+          <script type="module">
+            const cb1 = document.querySelector('#checkbox-1');
+            const ncb1 = document.querySelector('#native-checkbox-1');
 
-          document.querySelectorAll('.size-button').forEach((button) => {
-            button.addEventListener('click', () => {
-              document
-                .querySelectorAll('#demo vscode-checkbox')
-                .forEach((el) => {
-                  el.setAttribute('size', button.dataset.size);
-                });
+            document.querySelectorAll('.size-button').forEach((button) => {
+              button.addEventListener('click', () => {
+                document
+                  .querySelectorAll('#demo vscode-checkbox')
+                  .forEach((el) => {
+                    el.setAttribute('size', button.dataset.size);
+                  });
+              });
             });
-          });
-          cb1.addEventListener('click', (ev) => {
-            console.log(ev);
-          });
-          cb1.addEventListener('change', (ev) => {
-            console.log(ev);
-          });
-          cb1.addEventListener('invalid', (ev) => {
-            console.log(ev);
-          });
-          ncb1.addEventListener('click', (ev) => {
-            console.log(ev);
-          });
-        </script>
-      </vscode-demo>
+            cb1.addEventListener('click', (ev) => {
+              console.log(ev);
+            });
+            cb1.addEventListener('change', (ev) => {
+              console.log(ev);
+            });
+            cb1.addEventListener('invalid', (ev) => {
+              console.log(ev);
+            });
+            ncb1.addEventListener('click', (ev) => {
+              console.log(ev);
+            });
+          </script>
+          <div class="size-buttons">
+            <button type="button" data-size="small">small</button>
+            <button type="button" data-size="medium">medium</button>
+            <button type="button" data-size="large">large</button>
+          </div>
+        </vscode-demo>
+      </div>
     </main>
+    <script type="module">
+      document.querySelectorAll('.size-buttons button').forEach((button) => {
+        button.addEventListener('click', () => {
+          document
+            .querySelectorAll('#size-demo-target vscode-checkbox')
+            .forEach((el) => {
+              el.setAttribute('size', button.dataset.size);
+            });
+        });
+      });
+    </script>
   </body>
 </html>
diff --git a/dev/vscode-checkbox/fallback-styles.html b/dev/vscode-checkbox/fallback-styles.html
index ef26a7ec1..3e22c6816 100644
--- a/dev/vscode-checkbox/fallback-styles.html
+++ b/dev/vscode-checkbox/fallback-styles.html
@@ -21,7 +21,25 @@
 
   <body style="background-color: #1f1f1f">
     <main>
-      <vscode-checkbox>Checkbox test</vscode-checkbox>
+      <div id="size-demo-target">
+        <vscode-checkbox>Checkbox test</vscode-checkbox>
+      </div>
+      <div class="size-buttons">
+        <button type="button" data-size="small">small</button>
+        <button type="button" data-size="medium">medium</button>
+        <button type="button" data-size="large">large</button>
+      </div>
     </main>
+    <script type="module">
+      document.querySelectorAll('.size-buttons button').forEach((button) => {
+        button.addEventListener('click', () => {
+          document
+            .querySelectorAll('#size-demo-target vscode-checkbox')
+            .forEach((el) => {
+              el.setAttribute('size', button.dataset.size);
+            });
+        });
+      });
+    </script>
   </body>
 </html>
diff --git a/dev/vscode-checkbox/group.html b/dev/vscode-checkbox/group.html
index f22da88ea..f2d20da83 100644
--- a/dev/vscode-checkbox/group.html
+++ b/dev/vscode-checkbox/group.html
@@ -20,7 +20,7 @@
   <body>
     <h1>Checkbox</h1>
     <h2>Listen "change" and "invalid" events</h2>
-    <vscode-demo>
+    <vscode-demo id="size-demo-target">
       <form action="#">
         <p>
           <vscode-checkbox-group id="group-1">
@@ -52,6 +52,22 @@ <h2>Listen "change" and "invalid" events</h2>
         logEvents('#checkbox-3', 'invalid');
         logEvents('#native-checkbox-1', 'change');
       </script>
+      <div class="size-buttons">
+        <button type="button" data-size="small">small</button>
+        <button type="button" data-size="medium">medium</button>
+        <button type="button" data-size="large">large</button>
+      </div>
     </vscode-demo>
+    <script type="module">
+      document.querySelectorAll('.size-buttons button').forEach((button) => {
+        button.addEventListener('click', () => {
+          document
+            .querySelectorAll('#size-demo-target vscode-checkbox')
+            .forEach((el) => {
+              el.setAttribute('size', button.dataset.size);
+            });
+        });
+      });
+    </script>
   </body>
 </html>
diff --git a/dev/vscode-checkbox/toggle.html b/dev/vscode-checkbox/toggle.html
index d917ba3bb..7d1becae8 100644
--- a/dev/vscode-checkbox/toggle.html
+++ b/dev/vscode-checkbox/toggle.html
@@ -15,7 +15,7 @@
   <body>
     <main>
       <h2>Toggle switch mode</h2>
-      <vscode-demo>
+      <vscode-demo id="size-demo-target">
         <vscode-checkbox
           toggle
           label="Toggle (off)"
@@ -59,7 +59,23 @@ <h2>Toggle switch mode</h2>
             log(sel, 'invalid');
           });
         </script>
+        <div class="size-buttons">
+          <button type="button" data-size="small">small</button>
+          <button type="button" data-size="medium">medium</button>
+          <button type="button" data-size="large">large</button>
+        </div>
       </vscode-demo>
     </main>
+    <script type="module">
+      document.querySelectorAll('.size-buttons button').forEach((button) => {
+        button.addEventListener('click', () => {
+          document
+            .querySelectorAll('#size-demo-target vscode-checkbox')
+            .forEach((el) => {
+              el.setAttribute('size', button.dataset.size);
+            });
+        });
+      });
+    </script>
   </body>
 </html>
diff --git a/dev/vscode-checkbox/validate-checked.html b/dev/vscode-checkbox/validate-checked.html
index ba7b5944c..b3a9abb63 100644
--- a/dev/vscode-checkbox/validate-checked.html
+++ b/dev/vscode-checkbox/validate-checked.html
@@ -14,7 +14,7 @@
 
   <body>
     <main>
-      <vscode-demo>
+      <vscode-demo id="size-demo-target">
         <style>
           input[type='checkbox']:invalid {
             outline: 2px solid red;
@@ -34,7 +34,23 @@
         ></vscode-checkbox>
         <input type="checkbox" required />
         <input type="checkbox" required checked />
+        <div class="size-buttons">
+          <button type="button" data-size="small">small</button>
+          <button type="button" data-size="medium">medium</button>
+          <button type="button" data-size="large">large</button>
+        </div>
       </vscode-demo>
     </main>
+    <script type="module">
+      document.querySelectorAll('.size-buttons button').forEach((button) => {
+        button.addEventListener('click', () => {
+          document
+            .querySelectorAll('#size-demo-target vscode-checkbox')
+            .forEach((el) => {
+              el.setAttribute('size', button.dataset.size);
+            });
+        });
+      });
+    </script>
   </body>
 </html>
diff --git a/dev/vscode-label/basic-example.html b/dev/vscode-label/basic-example.html
index 45a5829d7..04a354383 100644
--- a/dev/vscode-label/basic-example.html
+++ b/dev/vscode-label/basic-example.html
@@ -25,7 +25,7 @@
 
   <body>
     <main>
-      <vscode-demo>
+      <vscode-demo id="size-demo-target">
         <vscode-form-group id="form-group">
           <vscode-label for="textfield">Label example</vscode-label>
           <vscode-textfield id="textfield"></vscode-textfield
@@ -53,7 +53,23 @@
             });
           });
         </script>
+        <div class="size-buttons">
+          <button type="button" data-size="small">small</button>
+          <button type="button" data-size="medium">medium</button>
+          <button type="button" data-size="large">large</button>
+        </div>
       </vscode-demo>
     </main>
+    <script type="module">
+      document.querySelectorAll('.size-buttons button').forEach((button) => {
+        button.addEventListener('click', () => {
+          document
+            .querySelectorAll('#size-demo-target vscode-form-group')
+            .forEach((el) => {
+              el.setAttribute('size', button.dataset.size);
+            });
+        });
+      });
+    </script>
   </body>
 </html>
diff --git a/dev/vscode-multi-select/a11y-combobox.html b/dev/vscode-multi-select/a11y-combobox.html
index 1ee110eea..2f9016588 100644
--- a/dev/vscode-multi-select/a11y-combobox.html
+++ b/dev/vscode-multi-select/a11y-combobox.html
@@ -25,7 +25,7 @@
 
   <body>
     <main>
-      <vscode-demo>
+      <vscode-demo id="size-demo-target">
         <vscode-multi-select name="fruit" id="select" label="Fruits" combobox>
           <vscode-option value="banana">Banana</vscode-option>
           <vscode-option value="cherry">Cherry</vscode-option>
@@ -34,7 +34,23 @@
           <vscode-option value="lemon">Lemon</vscode-option>
           <vscode-option value="orange">Orange</vscode-option>
         </vscode-multi-select>
+        <div class="size-buttons">
+          <button type="button" data-size="small">small</button>
+          <button type="button" data-size="medium">medium</button>
+          <button type="button" data-size="large">large</button>
+        </div>
       </vscode-demo>
     </main>
+    <script type="module">
+      document.querySelectorAll('.size-buttons button').forEach((button) => {
+        button.addEventListener('click', () => {
+          document
+            .querySelectorAll('#size-demo-target vscode-multi-select')
+            .forEach((el) => {
+              el.setAttribute('size', button.dataset.size);
+            });
+        });
+      });
+    </script>
   </body>
 </html>
diff --git a/dev/vscode-multi-select/a11y-select.html b/dev/vscode-multi-select/a11y-select.html
index 9bd28cb14..070ce670f 100644
--- a/dev/vscode-multi-select/a11y-select.html
+++ b/dev/vscode-multi-select/a11y-select.html
@@ -25,7 +25,7 @@
 
   <body>
     <main>
-      <vscode-demo>
+      <vscode-demo id="size-demo-target">
         <vscode-multi-select name="fruit" id="select" label="Fruits">
           <vscode-option value="banana">Banana</vscode-option>
           <vscode-option value="cherry">Cherry</vscode-option>
@@ -34,7 +34,23 @@
           <vscode-option value="lemon">Lemon</vscode-option>
           <vscode-option value="orange">Orange</vscode-option>
         </vscode-multi-select>
+        <div class="size-buttons">
+          <button type="button" data-size="small">small</button>
+          <button type="button" data-size="medium">medium</button>
+          <button type="button" data-size="large">large</button>
+        </div>
       </vscode-demo>
     </main>
+    <script type="module">
+      document.querySelectorAll('.size-buttons button').forEach((button) => {
+        button.addEventListener('click', () => {
+          document
+            .querySelectorAll('#size-demo-target vscode-multi-select')
+            .forEach((el) => {
+              el.setAttribute('size', button.dataset.size);
+            });
+        });
+      });
+    </script>
   </body>
 </html>
diff --git a/dev/vscode-multi-select/autofocus-combobox.html b/dev/vscode-multi-select/autofocus-combobox.html
index 4af705b29..6c78e451b 100644
--- a/dev/vscode-multi-select/autofocus-combobox.html
+++ b/dev/vscode-multi-select/autofocus-combobox.html
@@ -25,13 +25,18 @@
 
   <body>
     <main>
-      <vscode-demo>
+      <vscode-demo id="size-demo-target">
         <vscode-multi-select label="Single Select example" autofocus combobox>
           <vscode-option>Lorem</vscode-option>
           <vscode-option>Ipsum</vscode-option>
           <vscode-option>Dolor</vscode-option>
         </vscode-multi-select>
         <button type="button">focus</button>
+        <div class="size-buttons">
+          <button type="button" data-size="small">small</button>
+          <button type="button" data-size="medium">medium</button>
+          <button type="button" data-size="large">large</button>
+        </div>
       </vscode-demo>
       <script type="module">
         const sl = document.querySelector('vscode-single-select');
@@ -42,5 +47,16 @@
         });
       </script>
     </main>
+    <script type="module">
+      document.querySelectorAll('.size-buttons button').forEach((button) => {
+        button.addEventListener('click', () => {
+          document
+            .querySelectorAll('#size-demo-target vscode-multi-select')
+            .forEach((el) => {
+              el.setAttribute('size', button.dataset.size);
+            });
+        });
+      });
+    </script>
   </body>
 </html>
diff --git a/dev/vscode-multi-select/autofocus-select.html b/dev/vscode-multi-select/autofocus-select.html
index 2b85cfe75..a47fdb739 100644
--- a/dev/vscode-multi-select/autofocus-select.html
+++ b/dev/vscode-multi-select/autofocus-select.html
@@ -30,13 +30,18 @@
 
   <body>
     <main>
-      <vscode-demo>
+      <vscode-demo id="size-demo-target">
         <vscode-multi-select label="Single Select example" autofocus>
           <vscode-option>Lorem</vscode-option>
           <vscode-option>Ipsum</vscode-option>
           <vscode-option>Dolor</vscode-option>
         </vscode-multi-select>
         <button type="button">focus</button>
+        <div class="size-buttons">
+          <button type="button" data-size="small">small</button>
+          <button type="button" data-size="medium">medium</button>
+          <button type="button" data-size="large">large</button>
+        </div>
       </vscode-demo>
       <script type="module">
         const sl = document.querySelector('vscode-multi-select');
@@ -47,5 +52,16 @@
         });
       </script>
     </main>
+    <script type="module">
+      document.querySelectorAll('.size-buttons button').forEach((button) => {
+        button.addEventListener('click', () => {
+          document
+            .querySelectorAll('#size-demo-target vscode-multi-select')
+            .forEach((el) => {
+              el.setAttribute('size', button.dataset.size);
+            });
+        });
+      });
+    </script>
   </body>
 </html>
diff --git a/dev/vscode-multi-select/combobox-suggestion-mode.html b/dev/vscode-multi-select/combobox-suggestion-mode.html
index fb24f754a..c979ced04 100644
--- a/dev/vscode-multi-select/combobox-suggestion-mode.html
+++ b/dev/vscode-multi-select/combobox-suggestion-mode.html
@@ -25,7 +25,7 @@
 
   <body>
     <main>
-      <vscode-demo>
+      <vscode-demo id="size-demo-target">
         <vscode-multi-select combobox creatable>
           <vscode-option>Afghanistan</vscode-option>
           <vscode-option>Albania</vscode-option>
@@ -227,7 +227,23 @@
           logEvents('vscode-multi-select', 'change');
           logEvents('vscode-multi-select', 'vsc-multi-select-create-option');
         </script>
+        <div class="size-buttons">
+          <button type="button" data-size="small">small</button>
+          <button type="button" data-size="medium">medium</button>
+          <button type="button" data-size="large">large</button>
+        </div>
       </vscode-demo>
     </main>
+    <script type="module">
+      document.querySelectorAll('.size-buttons button').forEach((button) => {
+        button.addEventListener('click', () => {
+          document
+            .querySelectorAll('#size-demo-target vscode-multi-select')
+            .forEach((el) => {
+              el.setAttribute('size', button.dataset.size);
+            });
+        });
+      });
+    </script>
   </body>
 </html>
diff --git a/dev/vscode-multi-select/combobox.html b/dev/vscode-multi-select/combobox.html
index 1e3da5916..ca8a73a41 100644
--- a/dev/vscode-multi-select/combobox.html
+++ b/dev/vscode-multi-select/combobox.html
@@ -25,7 +25,7 @@
 
   <body>
     <main>
-      <vscode-demo>
+      <vscode-demo id="size-demo-target">
         <vscode-multi-select combobox>
           <vscode-option>Lorem</vscode-option>
           <vscode-option>Ipsum</vscode-option>
@@ -54,7 +54,23 @@
             });
           });
         </script>
+        <div class="size-buttons">
+          <button type="button" data-size="small">small</button>
+          <button type="button" data-size="medium">medium</button>
+          <button type="button" data-size="large">large</button>
+        </div>
       </vscode-demo>
     </main>
+    <script type="module">
+      document.querySelectorAll('.size-buttons button').forEach((button) => {
+        button.addEventListener('click', () => {
+          document
+            .querySelectorAll('#size-demo-target vscode-multi-select')
+            .forEach((el) => {
+              el.setAttribute('size', button.dataset.size);
+            });
+        });
+      });
+    </script>
   </body>
 </html>
diff --git a/dev/vscode-multi-select/events.html b/dev/vscode-multi-select/events.html
index fa0814c1a..9db286b5a 100644
--- a/dev/vscode-multi-select/events.html
+++ b/dev/vscode-multi-select/events.html
@@ -26,7 +26,7 @@
 
   <body>
     <h1>MultiSelect</h1>
-    <vscode-demo>
+    <vscode-demo id="size-demo-target">
       <h2>Change event</h2>
       <vscode-multi-select id="select-1">
         <vscode-option>Lorem</vscode-option>
@@ -36,6 +36,11 @@ <h2>Change event</h2>
       <script type="module">
         logEvents('#select-1', 'change');
       </script>
+      <div class="size-buttons">
+        <button type="button" data-size="small">small</button>
+        <button type="button" data-size="medium">medium</button>
+        <button type="button" data-size="large">large</button>
+      </div>
     </vscode-demo>
 
     <vscode-demo>
@@ -52,5 +57,16 @@ <h2>Invalid event</h2>
         logEvents('#select-2', 'invalid');
       </script>
     </vscode-demo>
+    <script type="module">
+      document.querySelectorAll('.size-buttons button').forEach((button) => {
+        button.addEventListener('click', () => {
+          document
+            .querySelectorAll('#size-demo-target vscode-multi-select')
+            .forEach((el) => {
+              el.setAttribute('size', button.dataset.size);
+            });
+        });
+      });
+    </script>
   </body>
 </html>
diff --git a/dev/vscode-multi-select/fallback-styles.html b/dev/vscode-multi-select/fallback-styles.html
index 0b973d848..601bc4022 100644
--- a/dev/vscode-multi-select/fallback-styles.html
+++ b/dev/vscode-multi-select/fallback-styles.html
@@ -21,11 +21,29 @@
 
   <body style="background-color: #1f1f1f">
     <main>
-      <vscode-multi-select required>
-        <vscode-option>Lorem</vscode-option>
-        <vscode-option>Ipsum</vscode-option>
-        <vscode-option>Dolor</vscode-option>
-      </vscode-multi-select>
+      <div id="size-demo-target">
+        <vscode-multi-select required>
+          <vscode-option>Lorem</vscode-option>
+          <vscode-option>Ipsum</vscode-option>
+          <vscode-option>Dolor</vscode-option>
+        </vscode-multi-select>
+      </div>
+      <div class="size-buttons">
+        <button type="button" data-size="small">small</button>
+        <button type="button" data-size="medium">medium</button>
+        <button type="button" data-size="large">large</button>
+      </div>
     </main>
+    <script type="module">
+      document.querySelectorAll('.size-buttons button').forEach((button) => {
+        button.addEventListener('click', () => {
+          document
+            .querySelectorAll('#size-demo-target vscode-multi-select')
+            .forEach((el) => {
+              el.setAttribute('size', button.dataset.size);
+            });
+        });
+      });
+    </script>
   </body>
 </html>
diff --git a/dev/vscode-multi-select/issue-510.html b/dev/vscode-multi-select/issue-510.html
index 27b4d8433..c743f69c8 100644
--- a/dev/vscode-multi-select/issue-510.html
+++ b/dev/vscode-multi-select/issue-510.html
@@ -25,13 +25,29 @@
 
   <body>
     <main>
-      <vscode-demo>
+      <vscode-demo id="size-demo-target">
         <vscode-multi-select label="Multi Select example">
           <vscode-option selected>Lorem</vscode-option>
           <vscode-option selected>Ipsum</vscode-option>
           <vscode-option>Dolor</vscode-option>
         </vscode-multi-select>
+        <div class="size-buttons">
+          <button type="button" data-size="small">small</button>
+          <button type="button" data-size="medium">medium</button>
+          <button type="button" data-size="large">large</button>
+        </div>
       </vscode-demo>
     </main>
+    <script type="module">
+      document.querySelectorAll('.size-buttons button').forEach((button) => {
+        button.addEventListener('click', () => {
+          document
+            .querySelectorAll('#size-demo-target vscode-multi-select')
+            .forEach((el) => {
+              el.setAttribute('size', button.dataset.size);
+            });
+        });
+      });
+    </script>
   </body>
 </html>
diff --git a/dev/vscode-multi-select/long-text.html b/dev/vscode-multi-select/long-text.html
index c51497310..3791d1465 100644
--- a/dev/vscode-multi-select/long-text.html
+++ b/dev/vscode-multi-select/long-text.html
@@ -30,7 +30,7 @@
 
   <body>
     <main>
-      <vscode-demo>
+      <vscode-demo id="size-demo-target">
         <vscode-multi-select label="Single Select example" autofocus>
           <vscode-option>Lorem</vscode-option>
           <vscode-option>Ipsum</vscode-option>
@@ -41,6 +41,11 @@
           >
         </vscode-multi-select>
         <button type="button">focus</button>
+        <div class="size-buttons">
+          <button type="button" data-size="small">small</button>
+          <button type="button" data-size="medium">medium</button>
+          <button type="button" data-size="large">large</button>
+        </div>
       </vscode-demo>
       <script type="module">
         const sl = document.querySelector('vscode-multi-select');
@@ -51,5 +56,16 @@
         });
       </script>
     </main>
+    <script type="module">
+      document.querySelectorAll('.size-buttons button').forEach((button) => {
+        button.addEventListener('click', () => {
+          document
+            .querySelectorAll('#size-demo-target vscode-multi-select')
+            .forEach((el) => {
+              el.setAttribute('size', button.dataset.size);
+            });
+        });
+      });
+    </script>
   </body>
 </html>
diff --git a/dev/vscode-multi-select/open-prop.html b/dev/vscode-multi-select/open-prop.html
index 032eb0bfb..a9367d371 100644
--- a/dev/vscode-multi-select/open-prop.html
+++ b/dev/vscode-multi-select/open-prop.html
@@ -26,13 +26,29 @@
   <body>
     <h1>Open by default</h1>
     <main>
-      <vscode-demo>
+      <vscode-demo id="size-demo-target">
         <vscode-multi-select open>
           <vscode-option>Lorem</vscode-option>
           <vscode-option selected>Ipsum</vscode-option>
           <vscode-option selected>Dolor</vscode-option>
         </vscode-multi-select>
+        <div class="size-buttons">
+          <button type="button" data-size="small">small</button>
+          <button type="button" data-size="medium">medium</button>
+          <button type="button" data-size="large">large</button>
+        </div>
       </vscode-demo>
     </main>
+    <script type="module">
+      document.querySelectorAll('.size-buttons button').forEach((button) => {
+        button.addEventListener('click', () => {
+          document
+            .querySelectorAll('#size-demo-target vscode-multi-select')
+            .forEach((el) => {
+              el.setAttribute('size', button.dataset.size);
+            });
+        });
+      });
+    </script>
   </body>
 </html>
diff --git a/dev/vscode-multi-select/set-option.html b/dev/vscode-multi-select/set-option.html
index 76d7ea705..75fbe377b 100644
--- a/dev/vscode-multi-select/set-option.html
+++ b/dev/vscode-multi-select/set-option.html
@@ -27,7 +27,7 @@
   <body>
     <h1>Multi Select</h1>
     <p>description</p>
-    <vscode-demo>
+    <vscode-demo id="size-demo-target">
       <vscode-multi-select id="my-select">
         <vscode-option value="A">A</vscode-option>
         <vscode-option value="B">B</vscode-option>
@@ -42,6 +42,22 @@ <h1>Multi Select</h1>
         select.value = ['A', 'B', 'C']; // fill with all values
         console.log(select.value); // show all set now
       </script>
+      <div class="size-buttons">
+        <button type="button" data-size="small">small</button>
+        <button type="button" data-size="medium">medium</button>
+        <button type="button" data-size="large">large</button>
+      </div>
     </vscode-demo>
+    <script type="module">
+      document.querySelectorAll('.size-buttons button').forEach((button) => {
+        button.addEventListener('click', () => {
+          document
+            .querySelectorAll('#size-demo-target vscode-multi-select')
+            .forEach((el) => {
+              el.setAttribute('size', button.dataset.size);
+            });
+        });
+      });
+    </script>
   </body>
 </html>
diff --git a/dev/vscode-multi-select/set-value-before-options.html b/dev/vscode-multi-select/set-value-before-options.html
index bcd4a7051..50707454f 100644
--- a/dev/vscode-multi-select/set-value-before-options.html
+++ b/dev/vscode-multi-select/set-value-before-options.html
@@ -26,10 +26,15 @@
 
   <body>
     <h1>Select</h1>
-    <vscode-demo>
+    <vscode-demo id="size-demo-target">
       <form>
         <vscode-multi-select id="select" name="test"></vscode-multi-select>
       </form>
+      <div class="size-buttons">
+        <button type="button" data-size="small">small</button>
+        <button type="button" data-size="medium">medium</button>
+        <button type="button" data-size="large">large</button>
+      </div>
     </vscode-demo>
     <script type="module">
       const select = document.querySelector('vscode-multi-select');
@@ -51,5 +56,16 @@ <h1>Select</h1>
       const fd = new FormData(form);
       console.log(fd.get('test'));
     </script>
+    <script type="module">
+      document.querySelectorAll('.size-buttons button').forEach((button) => {
+        button.addEventListener('click', () => {
+          document
+            .querySelectorAll('#size-demo-target vscode-multi-select')
+            .forEach((el) => {
+              el.setAttribute('size', button.dataset.size);
+            });
+        });
+      });
+    </script>
   </body>
 </html>
diff --git a/dev/vscode-multi-select/sync-options.html b/dev/vscode-multi-select/sync-options.html
index 900915f45..7eb6a9c46 100644
--- a/dev/vscode-multi-select/sync-options.html
+++ b/dev/vscode-multi-select/sync-options.html
@@ -26,7 +26,7 @@
   <body>
     <h1>Sync options</h1>
     <main>
-      <vscode-demo>
+      <vscode-demo id="size-demo-target">
         <vscode-multi-select id="select">
           <vscode-option>Lorem</vscode-option>
           <vscode-option>Ipsum</vscode-option>
@@ -46,7 +46,23 @@ <h1>Sync options</h1>
             op3.selected = true;
           });
         </script>
+        <div class="size-buttons">
+          <button type="button" data-size="small">small</button>
+          <button type="button" data-size="medium">medium</button>
+          <button type="button" data-size="large">large</button>
+        </div>
       </vscode-demo>
     </main>
+    <script type="module">
+      document.querySelectorAll('.size-buttons button').forEach((button) => {
+        button.addEventListener('click', () => {
+          document
+            .querySelectorAll('#size-demo-target vscode-multi-select')
+            .forEach((el) => {
+              el.setAttribute('size', button.dataset.size);
+            });
+        });
+      });
+    </script>
   </body>
 </html>
diff --git a/dev/vscode-radio-group/checked.html b/dev/vscode-radio-group/checked.html
index 20d5fe58c..8d40c5194 100644
--- a/dev/vscode-radio-group/checked.html
+++ b/dev/vscode-radio-group/checked.html
@@ -26,7 +26,7 @@
   <body>
     <h1>Component demo</h1>
     <main>
-      <vscode-demo>
+      <vscode-demo id="size-demo-target">
         <form action="/">
           <vscode-radio-group id="radio-group">
             <vscode-radio name="radio-example" value="1">Lorem</vscode-radio>
@@ -70,6 +70,11 @@ <h1>Component demo</h1>
             });
           });
         </script>
+        <div class="size-buttons">
+          <button type="button" data-size="small">small</button>
+          <button type="button" data-size="medium">medium</button>
+          <button type="button" data-size="large">large</button>
+        </div>
       </vscode-demo>
 
       <form action="/">
@@ -101,5 +106,16 @@ <h1>Component demo</h1>
         <button type="submit">Submit</button>
       </form>
     </main>
+    <script type="module">
+      document.querySelectorAll('.size-buttons button').forEach((button) => {
+        button.addEventListener('click', () => {
+          document
+            .querySelectorAll('#size-demo-target vscode-radio')
+            .forEach((el) => {
+              el.setAttribute('size', button.dataset.size);
+            });
+        });
+      });
+    </script>
   </body>
 </html>
diff --git a/dev/vscode-radio-group/default-checked.html b/dev/vscode-radio-group/default-checked.html
index 9cf7c08e8..7061baf88 100644
--- a/dev/vscode-radio-group/default-checked.html
+++ b/dev/vscode-radio-group/default-checked.html
@@ -26,7 +26,7 @@
   <body>
     <h1>Component demo</h1>
     <main>
-      <vscode-demo>
+      <vscode-demo id="size-demo-target">
         <form action="/">
           <vscode-radio-group>
             <vscode-radio name="radio-example" value="1">Lorem</vscode-radio>
@@ -51,6 +51,11 @@ <h1>Component demo</h1>
             console.log(Array.from(fd.entries));
           });
         </script>
+        <div class="size-buttons">
+          <button type="button" data-size="small">small</button>
+          <button type="button" data-size="medium">medium</button>
+          <button type="button" data-size="large">large</button>
+        </div>
       </vscode-demo>
 
       <form action="/">
@@ -82,5 +87,16 @@ <h1>Component demo</h1>
         <button type="submit">Submit</button>
       </form>
     </main>
+    <script type="module">
+      document.querySelectorAll('.size-buttons button').forEach((button) => {
+        button.addEventListener('click', () => {
+          document
+            .querySelectorAll('#size-demo-target vscode-radio')
+            .forEach((el) => {
+              el.setAttribute('size', button.dataset.size);
+            });
+        });
+      });
+    </script>
   </body>
 </html>
diff --git a/dev/vscode-radio-group/issue-511.html b/dev/vscode-radio-group/issue-511.html
index f26893c86..cdb98a874 100644
--- a/dev/vscode-radio-group/issue-511.html
+++ b/dev/vscode-radio-group/issue-511.html
@@ -61,9 +61,25 @@
   <body>
     <h1>Component demo</h1>
     <main>
-      <vscode-demo>
+      <vscode-demo id="size-demo-target">
         <demo-element></demo-element>
+        <div class="size-buttons">
+          <button type="button" data-size="small">small</button>
+          <button type="button" data-size="medium">medium</button>
+          <button type="button" data-size="large">large</button>
+        </div>
       </vscode-demo>
     </main>
+    <script type="module">
+      document.querySelectorAll('.size-buttons button').forEach((button) => {
+        button.addEventListener('click', () => {
+          document
+            .querySelectorAll('#size-demo-target vscode-radio')
+            .forEach((el) => {
+              el.setAttribute('size', button.dataset.size);
+            });
+        });
+      });
+    </script>
   </body>
 </html>
diff --git a/dev/vscode-radio/fallback-styles.html b/dev/vscode-radio/fallback-styles.html
index 23b810c78..3eabde486 100644
--- a/dev/vscode-radio/fallback-styles.html
+++ b/dev/vscode-radio/fallback-styles.html
@@ -22,10 +22,28 @@
   <body style="background-color: #1f1f1f">
     <h1>%%TITLE%%</h1>
     <main>
-      <vscode-radio-group>
-        <vscode-radio name="radio" required>Lorem</vscode-radio>
-        <vscode-radio name="radio">Ipsum</vscode-radio>
-      </vscode-radio-group>
+      <div id="size-demo-target">
+        <vscode-radio-group>
+          <vscode-radio name="radio" required>Lorem</vscode-radio>
+          <vscode-radio name="radio">Ipsum</vscode-radio>
+        </vscode-radio-group>
+      </div>
+      <div class="size-buttons">
+        <button type="button" data-size="small">small</button>
+        <button type="button" data-size="medium">medium</button>
+        <button type="button" data-size="large">large</button>
+      </div>
     </main>
+    <script type="module">
+      document.querySelectorAll('.size-buttons button').forEach((button) => {
+        button.addEventListener('click', () => {
+          document
+            .querySelectorAll('#size-demo-target vscode-radio')
+            .forEach((el) => {
+              el.setAttribute('size', button.dataset.size);
+            });
+        });
+      });
+    </script>
   </body>
 </html>
diff --git a/dev/vscode-single-select/combobox-mode/a11y.html b/dev/vscode-single-select/combobox-mode/a11y.html
index 34ce69c87..8176037dc 100644
--- a/dev/vscode-single-select/combobox-mode/a11y.html
+++ b/dev/vscode-single-select/combobox-mode/a11y.html
@@ -25,7 +25,7 @@
 
   <body>
     <main>
-      <vscode-demo>
+      <vscode-demo id="size-demo-target">
         <vscode-single-select name="fruit" id="select" label="Fruits" combobox>
           <vscode-option value="banana">Banana</vscode-option>
           <vscode-option value="cherry">Cherry</vscode-option>
@@ -34,7 +34,23 @@
           <vscode-option value="lemon">Lemon</vscode-option>
           <vscode-option value="orange">Orange</vscode-option>
         </vscode-single-select>
+        <div class="size-buttons">
+          <button type="button" data-size="small">small</button>
+          <button type="button" data-size="medium">medium</button>
+          <button type="button" data-size="large">large</button>
+        </div>
       </vscode-demo>
     </main>
+    <script type="module">
+      document.querySelectorAll('.size-buttons button').forEach((button) => {
+        button.addEventListener('click', () => {
+          document
+            .querySelectorAll('#size-demo-target vscode-single-select')
+            .forEach((el) => {
+              el.setAttribute('size', button.dataset.size);
+            });
+        });
+      });
+    </script>
   </body>
 </html>
diff --git a/dev/vscode-single-select/combobox-mode/autofocus-combobox.html b/dev/vscode-single-select/combobox-mode/autofocus-combobox.html
index d3666cd38..cd8949541 100644
--- a/dev/vscode-single-select/combobox-mode/autofocus-combobox.html
+++ b/dev/vscode-single-select/combobox-mode/autofocus-combobox.html
@@ -25,13 +25,18 @@
 
   <body>
     <main>
-      <vscode-demo>
+      <vscode-demo id="size-demo-target">
         <vscode-single-select label="Single Select example" autofocus combobox>
           <vscode-option>Lorem</vscode-option>
           <vscode-option>Ipsum</vscode-option>
           <vscode-option>Dolor</vscode-option>
         </vscode-single-select>
         <button type="button">focus</button>
+        <div class="size-buttons">
+          <button type="button" data-size="small">small</button>
+          <button type="button" data-size="medium">medium</button>
+          <button type="button" data-size="large">large</button>
+        </div>
       </vscode-demo>
       <script type="module">
         const sl = document.querySelector('vscode-single-select');
@@ -42,5 +47,16 @@
         });
       </script>
     </main>
+    <script type="module">
+      document.querySelectorAll('.size-buttons button').forEach((button) => {
+        button.addEventListener('click', () => {
+          document
+            .querySelectorAll('#size-demo-target vscode-single-select')
+            .forEach((el) => {
+              el.setAttribute('size', button.dataset.size);
+            });
+        });
+      });
+    </script>
   </body>
 </html>
diff --git a/dev/vscode-single-select/combobox-mode/combobox-suggestion-mode.html b/dev/vscode-single-select/combobox-mode/combobox-suggestion-mode.html
index 294941f5e..2055a88de 100644
--- a/dev/vscode-single-select/combobox-mode/combobox-suggestion-mode.html
+++ b/dev/vscode-single-select/combobox-mode/combobox-suggestion-mode.html
@@ -25,7 +25,7 @@
 
   <body>
     <main>
-      <vscode-demo>
+      <vscode-demo id="size-demo-target">
         <vscode-single-select combobox creatable>
           <vscode-option>Afghanistan</vscode-option>
           <vscode-option>Albania</vscode-option>
@@ -233,6 +233,11 @@
             console.log(ev);
           });
         </script>
+        <div class="size-buttons">
+          <button type="button" data-size="small">small</button>
+          <button type="button" data-size="medium">medium</button>
+          <button type="button" data-size="large">large</button>
+        </div>
       </vscode-demo>
 
       <fieldset>
@@ -437,5 +442,16 @@
         </select>
       </fieldset>
     </main>
+    <script type="module">
+      document.querySelectorAll('.size-buttons button').forEach((button) => {
+        button.addEventListener('click', () => {
+          document
+            .querySelectorAll('#size-demo-target vscode-single-select')
+            .forEach((el) => {
+              el.setAttribute('size', button.dataset.size);
+            });
+        });
+      });
+    </script>
   </body>
 </html>
diff --git a/dev/vscode-single-select/combobox-mode/combobox.html b/dev/vscode-single-select/combobox-mode/combobox.html
index 93ce12c1d..c5c619cdb 100644
--- a/dev/vscode-single-select/combobox-mode/combobox.html
+++ b/dev/vscode-single-select/combobox-mode/combobox.html
@@ -25,7 +25,7 @@
 
   <body>
     <main>
-      <vscode-demo>
+      <vscode-demo id="size-demo-target">
         <vscode-single-select combobox>
           <vscode-option>Lorem</vscode-option>
           <vscode-option>Ipsum</vscode-option>
@@ -37,7 +37,23 @@
             console.log(sl.value);
           });
         </script>
+        <div class="size-buttons">
+          <button type="button" data-size="small">small</button>
+          <button type="button" data-size="medium">medium</button>
+          <button type="button" data-size="large">large</button>
+        </div>
       </vscode-demo>
     </main>
+    <script type="module">
+      document.querySelectorAll('.size-buttons button').forEach((button) => {
+        button.addEventListener('click', () => {
+          document
+            .querySelectorAll('#size-demo-target vscode-single-select')
+            .forEach((el) => {
+              el.setAttribute('size', button.dataset.size);
+            });
+        });
+      });
+    </script>
   </body>
 </html>
diff --git a/dev/vscode-single-select/combobox-mode/deleting-value.html b/dev/vscode-single-select/combobox-mode/deleting-value.html
index d4208d7fd..ebfc671b9 100644
--- a/dev/vscode-single-select/combobox-mode/deleting-value.html
+++ b/dev/vscode-single-select/combobox-mode/deleting-value.html
@@ -26,7 +26,7 @@
   <body>
     <main>
       <form action="#">
-        <vscode-demo>
+        <vscode-demo id="size-demo-target">
           <vscode-single-select name="fruit" id="select" combobox required>
             <vscode-option value="banana">Banana</vscode-option>
             <vscode-option value="cherry">Cherry</vscode-option>
@@ -51,8 +51,24 @@
             logEvents('#native-select', 'change');
             logEvents('#native-select', 'input');
           </script>
+          <div class="size-buttons">
+            <button type="button" data-size="small">small</button>
+            <button type="button" data-size="medium">medium</button>
+            <button type="button" data-size="large">large</button>
+          </div>
         </vscode-demo>
       </form>
     </main>
+    <script type="module">
+      document.querySelectorAll('.size-buttons button').forEach((button) => {
+        button.addEventListener('click', () => {
+          document
+            .querySelectorAll('#size-demo-target vscode-single-select')
+            .forEach((el) => {
+              el.setAttribute('size', button.dataset.size);
+            });
+        });
+      });
+    </script>
   </body>
 </html>
diff --git a/dev/vscode-single-select/issue-530.html b/dev/vscode-single-select/issue-530.html
index 93d43169b..101af82b7 100644
--- a/dev/vscode-single-select/issue-530.html
+++ b/dev/vscode-single-select/issue-530.html
@@ -30,9 +30,14 @@
   </head>
   <body>
     <h1>vscode-single-select stale index repro</h1>
-    <div class="row">
+    <div class="row" id="size-demo-target">
       <vscode-single-select id="sel" combobox></vscode-single-select>
     </div>
+    <div class="row size-buttons">
+      <button type="button" data-size="small">small</button>
+      <button type="button" data-size="medium">medium</button>
+      <button type="button" data-size="large">large</button>
+    </div>
     <div class="row">
       <button id="mount">Mount options</button>
       <button id="select-two">Select "two"</button>
@@ -91,6 +96,12 @@ <h1>vscode-single-select stale index repro</h1>
           throw e;
         }
       };
+
+      document.querySelectorAll('.size-buttons button').forEach((button) => {
+        button.addEventListener('click', () => {
+          sel.setAttribute('size', button.dataset.size);
+        });
+      });
     </script>
   </body>
 </html>
diff --git a/dev/vscode-single-select/select-mode/a11y.html b/dev/vscode-single-select/select-mode/a11y.html
index 01fcb4e7f..2e22eb96d 100644
--- a/dev/vscode-single-select/select-mode/a11y.html
+++ b/dev/vscode-single-select/select-mode/a11y.html
@@ -25,7 +25,7 @@
 
   <body>
     <main>
-      <vscode-demo>
+      <vscode-demo id="size-demo-target">
         <vscode-single-select name="fruit" id="select" label="Fruits">
           <vscode-option value="banana">Banana</vscode-option>
           <vscode-option value="cherry">Cherry</vscode-option>
@@ -34,7 +34,23 @@
           <vscode-option value="lemon">Lemon</vscode-option>
           <vscode-option value="orange">Orange</vscode-option>
         </vscode-single-select>
+        <div class="size-buttons">
+          <button type="button" data-size="small">small</button>
+          <button type="button" data-size="medium">medium</button>
+          <button type="button" data-size="large">large</button>
+        </div>
       </vscode-demo>
     </main>
+    <script type="module">
+      document.querySelectorAll('.size-buttons button').forEach((button) => {
+        button.addEventListener('click', () => {
+          document
+            .querySelectorAll('#size-demo-target vscode-single-select')
+            .forEach((el) => {
+              el.setAttribute('size', button.dataset.size);
+            });
+        });
+      });
+    </script>
   </body>
 </html>
diff --git a/dev/vscode-single-select/select-mode/autofocus-select.html b/dev/vscode-single-select/select-mode/autofocus-select.html
index 5cc564664..fdd1f1b5a 100644
--- a/dev/vscode-single-select/select-mode/autofocus-select.html
+++ b/dev/vscode-single-select/select-mode/autofocus-select.html
@@ -30,13 +30,18 @@
 
   <body>
     <main>
-      <vscode-demo>
+      <vscode-demo id="size-demo-target">
         <vscode-single-select label="Single Select example" autofocus>
           <vscode-option>Lorem</vscode-option>
           <vscode-option>Ipsum</vscode-option>
           <vscode-option>Dolor</vscode-option>
         </vscode-single-select>
         <button type="button">focus</button>
+        <div class="size-buttons">
+          <button type="button" data-size="small">small</button>
+          <button type="button" data-size="medium">medium</button>
+          <button type="button" data-size="large">large</button>
+        </div>
       </vscode-demo>
       <script type="module">
         const sl = document.querySelector('vscode-single-select');
@@ -47,5 +52,16 @@
         });
       </script>
     </main>
+    <script type="module">
+      document.querySelectorAll('.size-buttons button').forEach((button) => {
+        button.addEventListener('click', () => {
+          document
+            .querySelectorAll('#size-demo-target vscode-single-select')
+            .forEach((el) => {
+              el.setAttribute('size', button.dataset.size);
+            });
+        });
+      });
+    </script>
   </body>
 </html>
diff --git a/dev/vscode-single-select/select-mode/basic-example.html b/dev/vscode-single-select/select-mode/basic-example.html
index 6fc8817e9..852c038b9 100644
--- a/dev/vscode-single-select/select-mode/basic-example.html
+++ b/dev/vscode-single-select/select-mode/basic-example.html
@@ -25,7 +25,7 @@
 
   <body>
     <main>
-      <vscode-demo>
+      <vscode-demo id="size-demo-target">
         <vscode-single-select label="Single Select example">
           <vscode-option>Lorem</vscode-option>
           <vscode-option>Ipsum</vscode-option>
@@ -44,6 +44,11 @@
             large
           </button>
         </div>
+        <div class="size-buttons">
+          <button type="button" data-size="small">small</button>
+          <button type="button" data-size="medium">medium</button>
+          <button type="button" data-size="large">large</button>
+        </div>
       </vscode-demo>
       <script type="module">
         const sl = document.querySelector('vscode-single-select');
@@ -60,5 +65,16 @@
         });
       </script>
     </main>
+    <script type="module">
+      document.querySelectorAll('.size-buttons button').forEach((button) => {
+        button.addEventListener('click', () => {
+          document
+            .querySelectorAll('#size-demo-target vscode-single-select')
+            .forEach((el) => {
+              el.setAttribute('size', button.dataset.size);
+            });
+        });
+      });
+    </script>
   </body>
 </html>
diff --git a/dev/vscode-single-select/select-mode/default-empty.html b/dev/vscode-single-select/select-mode/default-empty.html
index 53c9e62a5..24f5967f7 100644
--- a/dev/vscode-single-select/select-mode/default-empty.html
+++ b/dev/vscode-single-select/select-mode/default-empty.html
@@ -26,12 +26,17 @@
 
   <body>
     <h1>Select</h1>
-    <vscode-demo>
+    <vscode-demo id="size-demo-target">
       <vscode-single-select id="select">
         <vscode-option>lorem</vscode-option>
         <vscode-option>ipsum</vscode-option>
         <vscode-option>dolor</vscode-option>
       </vscode-single-select>
+      <div class="size-buttons">
+        <button type="button" data-size="small">small</button>
+        <button type="button" data-size="medium">medium</button>
+        <button type="button" data-size="large">large</button>
+      </div>
     </vscode-demo>
     <script type="module">
       const select = document.querySelector('vscode-single-select');
@@ -48,5 +53,16 @@ <h1>Select</h1>
       // select.appendChild(op2);
       // select.appendChild(op3);
     </script>
+    <script type="module">
+      document.querySelectorAll('.size-buttons button').forEach((button) => {
+        button.addEventListener('click', () => {
+          document
+            .querySelectorAll('#size-demo-target vscode-single-select')
+            .forEach((el) => {
+              el.setAttribute('size', button.dataset.size);
+            });
+        });
+      });
+    </script>
   </body>
 </html>
diff --git a/dev/vscode-single-select/select-mode/description.html b/dev/vscode-single-select/select-mode/description.html
index 074694f8d..fc152d6f0 100644
--- a/dev/vscode-single-select/select-mode/description.html
+++ b/dev/vscode-single-select/select-mode/description.html
@@ -24,7 +24,7 @@ <h2>Description</h2>
       <code>vscode-option</code> registered after
       <code>vscode-single-select</code>!
     </p>
-    <vscode-demo>
+    <vscode-demo id="size-demo-target">
       <vscode-single-select id="select-example">
         <vscode-option description="Consectetur adipiscing elit"
           >Lorem</vscode-option
@@ -36,6 +36,22 @@ <h2>Description</h2>
           >Dolor</vscode-option
         >
       </vscode-single-select>
+      <div class="size-buttons">
+        <button type="button" data-size="small">small</button>
+        <button type="button" data-size="medium">medium</button>
+        <button type="button" data-size="large">large</button>
+      </div>
     </vscode-demo>
+    <script type="module">
+      document.querySelectorAll('.size-buttons button').forEach((button) => {
+        button.addEventListener('click', () => {
+          document
+            .querySelectorAll('#size-demo-target vscode-single-select')
+            .forEach((el) => {
+              el.setAttribute('size', button.dataset.size);
+            });
+        });
+      });
+    </script>
   </body>
 </html>
diff --git a/dev/vscode-single-select/select-mode/disabled-options.html b/dev/vscode-single-select/select-mode/disabled-options.html
index 3767e1a8c..a0c0754c8 100644
--- a/dev/vscode-single-select/select-mode/disabled-options.html
+++ b/dev/vscode-single-select/select-mode/disabled-options.html
@@ -25,7 +25,7 @@
 
   <body>
     <main>
-      <vscode-demo>
+      <vscode-demo id="size-demo-target">
         <vscode-single-select>
           <vscode-option>Lorem</vscode-option>
           <vscode-option disabled>Ipsum</vscode-option>
@@ -38,6 +38,11 @@
             console.log(sl.value);
           });
         </script>
+        <div class="size-buttons">
+          <button type="button" data-size="small">small</button>
+          <button type="button" data-size="medium">medium</button>
+          <button type="button" data-size="large">large</button>
+        </div>
       </vscode-demo>
 
       <fieldset>
@@ -51,5 +56,16 @@
         </select>
       </fieldset>
     </main>
+    <script type="module">
+      document.querySelectorAll('.size-buttons button').forEach((button) => {
+        button.addEventListener('click', () => {
+          document
+            .querySelectorAll('#size-demo-target vscode-single-select')
+            .forEach((el) => {
+              el.setAttribute('size', button.dataset.size);
+            });
+        });
+      });
+    </script>
   </body>
 </html>
diff --git a/dev/vscode-single-select/select-mode/dispatch-invalid-event.html b/dev/vscode-single-select/select-mode/dispatch-invalid-event.html
index 09146b746..e746f5e98 100644
--- a/dev/vscode-single-select/select-mode/dispatch-invalid-event.html
+++ b/dev/vscode-single-select/select-mode/dispatch-invalid-event.html
@@ -20,7 +20,7 @@
   <body>
     <h1>Single Select</h1>
     <h2>Dispatch "invalid" event</h2>
-    <vscode-demo>
+    <vscode-demo id="size-demo-target">
       <form action="#">
         <p>
           <vscode-single-select required name="select-1" id="select-1">
@@ -39,6 +39,22 @@ <h2>Dispatch "invalid" event</h2>
           console.log(ev);
         });
       </script>
+      <div class="size-buttons">
+        <button type="button" data-size="small">small</button>
+        <button type="button" data-size="medium">medium</button>
+        <button type="button" data-size="large">large</button>
+      </div>
     </vscode-demo>
+    <script type="module">
+      document.querySelectorAll('.size-buttons button').forEach((button) => {
+        button.addEventListener('click', () => {
+          document
+            .querySelectorAll('#size-demo-target vscode-single-select')
+            .forEach((el) => {
+              el.setAttribute('size', button.dataset.size);
+            });
+        });
+      });
+    </script>
   </body>
 </html>
diff --git a/dev/vscode-single-select/select-mode/element-value.html b/dev/vscode-single-select/select-mode/element-value.html
index a01655e88..0a1ddaaf6 100644
--- a/dev/vscode-single-select/select-mode/element-value.html
+++ b/dev/vscode-single-select/select-mode/element-value.html
@@ -14,7 +14,7 @@
   </head>
 
   <body class="vscode-light">
-    <vscode-demo>
+    <vscode-demo id="size-demo-target">
       <vscode-single-select id="select">
         <vscode-option value="3f7382c7-d4cb-49a5-a1d3-4e9df19ed432"
           >Lorem</vscode-option
@@ -26,6 +26,11 @@
           >Dolor</vscode-option
         >
       </vscode-single-select>
+      <div class="size-buttons">
+        <button type="button" data-size="small">small</button>
+        <button type="button" data-size="medium">medium</button>
+        <button type="button" data-size="large">large</button>
+      </div>
     </vscode-demo>
     <div id="out"></div>
     <script type="module">
@@ -37,5 +42,16 @@
         out.innerHTML = ev.target.value;
       });
     </script>
+    <script type="module">
+      document.querySelectorAll('.size-buttons button').forEach((button) => {
+        button.addEventListener('click', () => {
+          document
+            .querySelectorAll('#size-demo-target vscode-single-select')
+            .forEach((el) => {
+              el.setAttribute('size', button.dataset.size);
+            });
+        });
+      });
+    </script>
   </body>
 </html>
diff --git a/dev/vscode-single-select/select-mode/empty-label.html b/dev/vscode-single-select/select-mode/empty-label.html
index 2b3010115..f7725e0fb 100644
--- a/dev/vscode-single-select/select-mode/empty-label.html
+++ b/dev/vscode-single-select/select-mode/empty-label.html
@@ -28,12 +28,17 @@
     <h1>Single Select</h1>
 
     <h2>Basic example</h2>
-    <vscode-demo>
+    <vscode-demo id="size-demo-target">
       <vscode-single-select>
         <vscode-option></vscode-option>
         <vscode-option>lorem</vscode-option>
         <vscode-option>ipsum</vscode-option>
       </vscode-single-select>
+      <div class="size-buttons">
+        <button type="button" data-size="small">small</button>
+        <button type="button" data-size="medium">medium</button>
+        <button type="button" data-size="large">large</button>
+      </div>
     </vscode-demo>
 
     <h2>Combobox example</h2>
@@ -44,5 +49,16 @@ <h2>Combobox example</h2>
         <vscode-option>ipsum</vscode-option>
       </vscode-single-select>
     </vscode-demo>
+    <script type="module">
+      document.querySelectorAll('.size-buttons button').forEach((button) => {
+        button.addEventListener('click', () => {
+          document
+            .querySelectorAll('#size-demo-target vscode-single-select')
+            .forEach((el) => {
+              el.setAttribute('size', button.dataset.size);
+            });
+        });
+      });
+    </script>
   </body>
 </html>
diff --git a/dev/vscode-single-select/select-mode/initial-form-value.html b/dev/vscode-single-select/select-mode/initial-form-value.html
index b1d828bdf..d47df28c6 100644
--- a/dev/vscode-single-select/select-mode/initial-form-value.html
+++ b/dev/vscode-single-select/select-mode/initial-form-value.html
@@ -14,7 +14,7 @@
   </head>
 
   <body>
-    <vscode-demo>
+    <vscode-demo id="size-demo-target">
       <form action="#" id="fr">
         <vscode-single-select id="select" name="test">
           <vscode-option value="lorem">Lorem</vscode-option>
@@ -28,6 +28,11 @@
         </select>
         <button type="submit" id="bt">Get Value</button>
       </form>
+      <div class="size-buttons">
+        <button type="button" data-size="small">small</button>
+        <button type="button" data-size="medium">medium</button>
+        <button type="button" data-size="large">large</button>
+      </div>
     </vscode-demo>
     <pre id="out"></pre>
     <script type="module">
@@ -48,5 +53,16 @@
         output.innerHTML = out;
       });
     </script>
+    <script type="module">
+      document.querySelectorAll('.size-buttons button').forEach((button) => {
+        button.addEventListener('click', () => {
+          document
+            .querySelectorAll('#size-demo-target vscode-single-select')
+            .forEach((el) => {
+              el.setAttribute('size', button.dataset.size);
+            });
+        });
+      });
+    </script>
   </body>
 </html>
diff --git a/dev/vscode-single-select/select-mode/issue-514.html b/dev/vscode-single-select/select-mode/issue-514.html
index 1dc1fc6a7..21f44d586 100644
--- a/dev/vscode-single-select/select-mode/issue-514.html
+++ b/dev/vscode-single-select/select-mode/issue-514.html
@@ -27,97 +27,115 @@
     <vscode-dev-toolbar></vscode-dev-toolbar>
     <h1>Component demo</h1>
     <main>
-      <p>line</p>
-      <p>line</p>
-      <p>line</p>
-      <p>line</p>
-      <p>line</p>
-      <p>line</p>
-      <p>line</p>
-      <p>line</p>
-      <p>line</p>
-      <vscode-single-select>
-        <vscode-option>Option 1</vscode-option>
-        <vscode-option>Option 2</vscode-option>
-        <vscode-option>Option 3</vscode-option>
-        <vscode-option>Option 4</vscode-option>
-      </vscode-single-select>
-      <div id="lines">
-        <p>line</p>
-        <p>line</p>
-        <p>line</p>
-        <p>line</p>
-        <p>line</p>
-        <p>line</p>
-        <p>line</p>
-        <p>line</p>
-        <p>line</p>
-        <p>line</p>
-        <p>line</p>
-        <p>line</p>
-        <p>line</p>
-        <p>line</p>
-        <p>line</p>
-        <p>line</p>
-        <p>line</p>
-        <p>line</p>
-        <p>line</p>
-        <p>line</p>
-        <p>line</p>
-        <p>line</p>
-        <p>line</p>
-        <p>line</p>
-        <p>line</p>
-        <p>line</p>
-        <p>line</p>
-        <p>line</p>
-        <p>line</p>
-        <p>line</p>
-        <p>line</p>
-        <p>line</p>
-        <p>line</p>
-        <p>line</p>
-        <p>line</p>
-        <p>line</p>
-        <p>line</p>
-        <p>line</p>
-        <p>line</p>
-        <p>line</p>
-        <p>line</p>
-        <p>line</p>
-        <p>line</p>
-        <p>line</p>
-        <p>line</p>
-        <p>line</p>
-        <p>line</p>
-        <p>line</p>
-        <p>line</p>
-        <p>line</p>
-        <p>line</p>
-        <p>line</p>
-        <p>line</p>
-        <p>line</p>
-        <p>line</p>
-        <p>line</p>
-        <p>line</p>
-        <p>line</p>
-        <p>line</p>
-        <p>line</p>
-        <p>line</p>
-        <p>line</p>
-        <p>line</p>
-        <p>line</p>
-        <p>line</p>
+      <div id="size-demo-target">
+        <p>line</p>
+        <p>line</p>
+        <p>line</p>
+        <p>line</p>
+        <p>line</p>
+        <p>line</p>
+        <p>line</p>
+        <p>line</p>
+        <p>line</p>
+        <vscode-single-select>
+          <vscode-option>Option 1</vscode-option>
+          <vscode-option>Option 2</vscode-option>
+          <vscode-option>Option 3</vscode-option>
+          <vscode-option>Option 4</vscode-option>
+        </vscode-single-select>
+        <div id="lines">
+          <p>line</p>
+          <p>line</p>
+          <p>line</p>
+          <p>line</p>
+          <p>line</p>
+          <p>line</p>
+          <p>line</p>
+          <p>line</p>
+          <p>line</p>
+          <p>line</p>
+          <p>line</p>
+          <p>line</p>
+          <p>line</p>
+          <p>line</p>
+          <p>line</p>
+          <p>line</p>
+          <p>line</p>
+          <p>line</p>
+          <p>line</p>
+          <p>line</p>
+          <p>line</p>
+          <p>line</p>
+          <p>line</p>
+          <p>line</p>
+          <p>line</p>
+          <p>line</p>
+          <p>line</p>
+          <p>line</p>
+          <p>line</p>
+          <p>line</p>
+          <p>line</p>
+          <p>line</p>
+          <p>line</p>
+          <p>line</p>
+          <p>line</p>
+          <p>line</p>
+          <p>line</p>
+          <p>line</p>
+          <p>line</p>
+          <p>line</p>
+          <p>line</p>
+          <p>line</p>
+          <p>line</p>
+          <p>line</p>
+          <p>line</p>
+          <p>line</p>
+          <p>line</p>
+          <p>line</p>
+          <p>line</p>
+          <p>line</p>
+          <p>line</p>
+          <p>line</p>
+          <p>line</p>
+          <p>line</p>
+          <p>line</p>
+          <p>line</p>
+          <p>line</p>
+          <p>line</p>
+          <p>line</p>
+          <p>line</p>
+          <p>line</p>
+          <p>line</p>
+          <p>line</p>
+          <p>line</p>
+          <p>line</p>
+        </div>
+        <script type="module">
+          let counter = 1;
+          setInterval(() => {
+            const line = document.createElement('p');
+            line.innerHTML = counter;
+            counter++;
+            document.getElementById('lines').appendChild(line);
+          }, 700);
+        </script>
+      </div>
+      <div class="size-buttons">
+        <button type="button" data-size="small">small</button>
+        <button type="button" data-size="medium">medium</button>
+        <button type="button" data-size="large">large</button>
       </div>
-      <script type="module">
-        let counter = 1;
-        setInterval(() => {
-          const line = document.createElement('p');
-          line.innerHTML = counter;
-          counter++;
-          document.getElementById('lines').appendChild(line);
-        }, 700);
-      </script>
     </main>
+    <script type="module">
+      document.querySelectorAll('.size-buttons button').forEach((button) => {
+        button.addEventListener('click', () => {
+          document
+            .querySelectorAll('#size-demo-target vscode-single-select')
+            .forEach((el) => {
+              el.setAttribute('size', button.dataset.size);
+            });
+        });
+      });
+    </script>
   </body>
 </html>
diff --git a/dev/vscode-single-select/select-mode/large-list-within-collapsible.html b/dev/vscode-single-select/select-mode/large-list-within-collapsible.html
index e4c88587f..d4a64c573 100644
--- a/dev/vscode-single-select/select-mode/large-list-within-collapsible.html
+++ b/dev/vscode-single-select/select-mode/large-list-within-collapsible.html
@@ -25,7 +25,7 @@
 
   <body>
     <main>
-      <vscode-demo>
+      <vscode-demo id="size-demo-target">
         <vscode-collapsible heading="Large list">
           <vscode-single-select>
             <vscode-option>Afghanistan</vscode-option>
@@ -235,6 +235,11 @@
             console.log(ev);
           });
         </script>
+        <div class="size-buttons">
+          <button type="button" data-size="small">small</button>
+          <button type="button" data-size="medium">medium</button>
+          <button type="button" data-size="large">large</button>
+        </div>
       </vscode-demo>
 
       <fieldset>
@@ -439,5 +444,16 @@
         </select>
       </fieldset>
     </main>
+    <script type="module">
+      document.querySelectorAll('.size-buttons button').forEach((button) => {
+        button.addEventListener('click', () => {
+          document
+            .querySelectorAll('#size-demo-target vscode-single-select')
+            .forEach((el) => {
+              el.setAttribute('size', button.dataset.size);
+            });
+        });
+      });
+    </script>
   </body>
 </html>
diff --git a/dev/vscode-single-select/select-mode/large-list.html b/dev/vscode-single-select/select-mode/large-list.html
index 0665dde49..2b083647e 100644
--- a/dev/vscode-single-select/select-mode/large-list.html
+++ b/dev/vscode-single-select/select-mode/large-list.html
@@ -25,7 +25,7 @@
 
   <body>
     <main>
-      <vscode-demo>
+      <vscode-demo id="size-demo-target">
         <vscode-single-select>
           <vscode-option>Afghanistan</vscode-option>
           <vscode-option>Albania</vscode-option>
@@ -233,6 +233,11 @@
             console.log(ev);
           });
         </script>
+        <div class="size-buttons">
+          <button type="button" data-size="small">small</button>
+          <button type="button" data-size="medium">medium</button>
+          <button type="button" data-size="large">large</button>
+        </div>
       </vscode-demo>
 
       <fieldset>
@@ -437,5 +442,16 @@
         </select>
       </fieldset>
     </main>
+    <script type="module">
+      document.querySelectorAll('.size-buttons button').forEach((button) => {
+        button.addEventListener('click', () => {
+          document
+            .querySelectorAll('#size-demo-target vscode-single-select')
+            .forEach((el) => {
+              el.setAttribute('size', button.dataset.size);
+            });
+        });
+      });
+    </script>
   </body>
 </html>
diff --git a/dev/vscode-single-select/select-mode/long-text.html b/dev/vscode-single-select/select-mode/long-text.html
index 464adfaae..ef91b1179 100644
--- a/dev/vscode-single-select/select-mode/long-text.html
+++ b/dev/vscode-single-select/select-mode/long-text.html
@@ -25,7 +25,7 @@
 
   <body>
     <main>
-      <vscode-demo>
+      <vscode-demo id="size-demo-target">
         <vscode-single-select label="Single Select example">
           <vscode-option>Lorem</vscode-option>
           <vscode-option>Ipsum</vscode-option>
@@ -36,7 +36,23 @@
             elit.</vscode-option
           >
         </vscode-single-select>
+        <div class="size-buttons">
+          <button type="button" data-size="small">small</button>
+          <button type="button" data-size="medium">medium</button>
+          <button type="button" data-size="large">large</button>
+        </div>
       </vscode-demo>
     </main>
+    <script type="module">
+      document.querySelectorAll('.size-buttons button').forEach((button) => {
+        button.addEventListener('click', () => {
+          document
+            .querySelectorAll('#size-demo-target vscode-single-select')
+            .forEach((el) => {
+              el.setAttribute('size', button.dataset.size);
+            });
+        });
+      });
+    </script>
   </body>
 </html>
diff --git a/dev/vscode-single-select/select-mode/open-prop.html b/dev/vscode-single-select/select-mode/open-prop.html
index c6e07fbb9..c3ed2ac96 100644
--- a/dev/vscode-single-select/select-mode/open-prop.html
+++ b/dev/vscode-single-select/select-mode/open-prop.html
@@ -26,13 +26,29 @@
   <body>
     <h1>Open by default</h1>
     <main>
-      <vscode-demo>
+      <vscode-demo id="size-demo-target">
         <vscode-single-select open>
           <vscode-option>Lorem</vscode-option>
           <vscode-option selected>Ipsum</vscode-option>
           <vscode-option>Dolor</vscode-option>
         </vscode-single-select>
+        <div class="size-buttons">
+          <button type="button" data-size="small">small</button>
+          <button type="button" data-size="medium">medium</button>
+          <button type="button" data-size="large">large</button>
+        </div>
       </vscode-demo>
     </main>
+    <script type="module">
+      document.querySelectorAll('.size-buttons button').forEach((button) => {
+        button.addEventListener('click', () => {
+          document
+            .querySelectorAll('#size-demo-target vscode-single-select')
+            .forEach((el) => {
+              el.setAttribute('size', button.dataset.size);
+            });
+        });
+      });
+    </script>
   </body>
 </html>
diff --git a/dev/vscode-single-select/select-mode/open-when-enter-key-pressed.html b/dev/vscode-single-select/select-mode/open-when-enter-key-pressed.html
index 40d8718a5..78bbc8748 100644
--- a/dev/vscode-single-select/select-mode/open-when-enter-key-pressed.html
+++ b/dev/vscode-single-select/select-mode/open-when-enter-key-pressed.html
@@ -26,10 +26,26 @@
 
   <body>
     <h1>Select</h1>
-    <vscode-demo>
+    <vscode-demo id="size-demo-target">
       <vscode-single-select>
         <vscode-option>Lorem</vscode-option>
       </vscode-single-select>
+      <div class="size-buttons">
+        <button type="button" data-size="small">small</button>
+        <button type="button" data-size="medium">medium</button>
+        <button type="button" data-size="large">large</button>
+      </div>
     </vscode-demo>
+    <script type="module">
+      document.querySelectorAll('.size-buttons button').forEach((button) => {
+        button.addEventListener('click', () => {
+          document
+            .querySelectorAll('#size-demo-target vscode-single-select')
+            .forEach((el) => {
+              el.setAttribute('size', button.dataset.size);
+            });
+        });
+      });
+    </script>
   </body>
 </html>
diff --git a/dev/vscode-single-select/select-mode/option-with-empty-value.html b/dev/vscode-single-select/select-mode/option-with-empty-value.html
index 6d830f84f..4823432df 100644
--- a/dev/vscode-single-select/select-mode/option-with-empty-value.html
+++ b/dev/vscode-single-select/select-mode/option-with-empty-value.html
@@ -32,7 +32,7 @@
     <h1>Option with empty value</h1>
     <main>
       <h2>VSCode Elements SingleSelect</h2>
-      <vscode-demo>
+      <vscode-demo id="size-demo-target">
         <form action="">
           <vscode-single-select id="vscode-select" name="select" required>
             <vscode-option value="">--- Choose an option ---</vscode-option>
@@ -42,6 +42,11 @@ <h2>VSCode Elements SingleSelect</h2>
           </vscode-single-select>
           <button type="submit">Submit</button>
         </form>
+        <div class="size-buttons">
+          <button type="button" data-size="small">small</button>
+          <button type="button" data-size="medium">medium</button>
+          <button type="button" data-size="large">large</button>
+        </div>
       </vscode-demo>
       <script type="module">
         logEvents('#vscode-select', 'change');
@@ -60,5 +65,16 @@ <h2>Native select element</h2>
         logEvents('#native-select', 'change');
       </script>
     </main>
+    <script type="module">
+      document.querySelectorAll('.size-buttons button').forEach((button) => {
+        button.addEventListener('click', () => {
+          document
+            .querySelectorAll('#size-demo-target vscode-single-select')
+            .forEach((el) => {
+              el.setAttribute('size', button.dataset.size);
+            });
+        });
+      });
+    </script>
   </body>
 </html>
diff --git a/dev/vscode-single-select/select-mode/position-above.html b/dev/vscode-single-select/select-mode/position-above.html
index 0b1e6d155..43df2b597 100644
--- a/dev/vscode-single-select/select-mode/position-above.html
+++ b/dev/vscode-single-select/select-mode/position-above.html
@@ -25,7 +25,7 @@
 
   <body>
     <main>
-      <vscode-demo>
+      <vscode-demo id="size-demo-target">
         <div style="height: 500px; width: 500px; overflow: auto">
           <p>Scroll down</p>
           <p>&nbsp;</p>
@@ -172,7 +172,23 @@
           <p>&nbsp;</p>
           <p>&nbsp;</p>
         </div>
+        <div class="size-buttons">
+          <button type="button" data-size="small">small</button>
+          <button type="button" data-size="medium">medium</button>
+          <button type="button" data-size="large">large</button>
+        </div>
       </vscode-demo>
     </main>
+    <script type="module">
+      document.querySelectorAll('.size-buttons button').forEach((button) => {
+        button.addEventListener('click', () => {
+          document
+            .querySelectorAll('#size-demo-target vscode-single-select')
+            .forEach((el) => {
+              el.setAttribute('size', button.dataset.size);
+            });
+        });
+      });
+    </script>
   </body>
 </html>
diff --git a/dev/vscode-single-select/select-mode/required-flag.html b/dev/vscode-single-select/select-mode/required-flag.html
index 0e6e56aa8..43f236d50 100644
--- a/dev/vscode-single-select/select-mode/required-flag.html
+++ b/dev/vscode-single-select/select-mode/required-flag.html
@@ -13,7 +13,7 @@
     <script type="module" src="/dist/vscode-option/index.js"></script>
   </head>
   <body>
-    <vscode-demo>
+    <vscode-demo id="size-demo-target">
       <p>
         <vscode-textfield
           id="none-required-textfield-example"
@@ -50,6 +50,22 @@
           select.setAttribute('required', '');
         });
       </script>
+      <div class="size-buttons">
+        <button type="button" data-size="small">small</button>
+        <button type="button" data-size="medium">medium</button>
+        <button type="button" data-size="large">large</button>
+      </div>
     </vscode-demo>
+    <script type="module">
+      document.querySelectorAll('.size-buttons button').forEach((button) => {
+        button.addEventListener('click', () => {
+          document
+            .querySelectorAll('#size-demo-target vscode-single-select')
+            .forEach((el) => {
+              el.setAttribute('size', button.dataset.size);
+            });
+        });
+      });
+    </script>
   </body>
 </html>
diff --git a/dev/vscode-single-select/select-mode/scroll-demo.html b/dev/vscode-single-select/select-mode/scroll-demo.html
index 725f82d1c..d28a168b9 100644
--- a/dev/vscode-single-select/select-mode/scroll-demo.html
+++ b/dev/vscode-single-select/select-mode/scroll-demo.html
@@ -25,7 +25,7 @@
 
   <body>
     <main>
-      <vscode-demo>
+      <vscode-demo id="size-demo-target">
         <vscode-single-select>
           <vscode-option>Option 1</vscode-option>
           <vscode-option>Option 2</vscode-option>
@@ -48,7 +48,23 @@
           <vscode-option>Option 19</vscode-option>
           <vscode-option>Option 20</vscode-option>
         </vscode-single-select>
+        <div class="size-buttons">
+          <button type="button" data-size="small">small</button>
+          <button type="button" data-size="medium">medium</button>
+          <button type="button" data-size="large">large</button>
+        </div>
       </vscode-demo>
     </main>
+    <script type="module">
+      document.querySelectorAll('.size-buttons button').forEach((button) => {
+        button.addEventListener('click', () => {
+          document
+            .querySelectorAll('#size-demo-target vscode-single-select')
+            .forEach((el) => {
+              el.setAttribute('size', button.dataset.size);
+            });
+        });
+      });
+    </script>
   </body>
 </html>
diff --git a/dev/vscode-single-select/select-mode/scroll-to-the-selected-option.html b/dev/vscode-single-select/select-mode/scroll-to-the-selected-option.html
index 3c5f512dc..80f7d40a8 100644
--- a/dev/vscode-single-select/select-mode/scroll-to-the-selected-option.html
+++ b/dev/vscode-single-select/select-mode/scroll-to-the-selected-option.html
@@ -25,7 +25,7 @@
 
   <body>
     <main>
-      <vscode-demo>
+      <vscode-demo id="size-demo-target">
         <vscode-single-select>
           <vscode-option>Afghanistan</vscode-option>
           <vscode-option>Albania</vscode-option>
@@ -48,7 +48,23 @@
           <vscode-option>Benin</vscode-option>
           <vscode-option>Bhutan</vscode-option>
         </vscode-single-select>
+        <div class="size-buttons">
+          <button type="button" data-size="small">small</button>
+          <button type="button" data-size="medium">medium</button>
+          <button type="button" data-size="large">large</button>
+        </div>
       </vscode-demo>
     </main>
+    <script type="module">
+      document.querySelectorAll('.size-buttons button').forEach((button) => {
+        button.addEventListener('click', () => {
+          document
+            .querySelectorAll('#size-demo-target vscode-single-select')
+            .forEach((el) => {
+              el.setAttribute('size', button.dataset.size);
+            });
+        });
+      });
+    </script>
   </body>
 </html>
diff --git a/dev/vscode-single-select/select-mode/set-empty-value-before-options.html b/dev/vscode-single-select/select-mode/set-empty-value-before-options.html
index 94e5ed87d..e4c84fe02 100644
--- a/dev/vscode-single-select/select-mode/set-empty-value-before-options.html
+++ b/dev/vscode-single-select/select-mode/set-empty-value-before-options.html
@@ -26,10 +26,15 @@
 
   <body>
     <h1>Select</h1>
-    <vscode-demo>
+    <vscode-demo id="size-demo-target">
       <form>
         <vscode-single-select id="select" name="test"></vscode-single-select>
       </form>
+      <div class="size-buttons">
+        <button type="button" data-size="small">small</button>
+        <button type="button" data-size="medium">medium</button>
+        <button type="button" data-size="large">large</button>
+      </div>
     </vscode-demo>
     <script type="module">
       const select = document.querySelector('vscode-single-select');
@@ -51,5 +56,16 @@ <h1>Select</h1>
       const fd = new FormData(form);
       console.log(fd.get('test'));
     </script>
+    <script type="module">
+      document.querySelectorAll('.size-buttons button').forEach((button) => {
+        button.addEventListener('click', () => {
+          document
+            .querySelectorAll('#size-demo-target vscode-single-select')
+            .forEach((el) => {
+              el.setAttribute('size', button.dataset.size);
+            });
+        });
+      });
+    </script>
   </body>
 </html>
diff --git a/dev/vscode-single-select/select-mode/set-value-before-options.html b/dev/vscode-single-select/select-mode/set-value-before-options.html
index 23c76afa7..48660ac12 100644
--- a/dev/vscode-single-select/select-mode/set-value-before-options.html
+++ b/dev/vscode-single-select/select-mode/set-value-before-options.html
@@ -26,8 +26,13 @@
 
   <body>
     <h1>Select</h1>
-    <vscode-demo>
+    <vscode-demo id="size-demo-target">
       <vscode-single-select id="select"></vscode-single-select>
+      <div class="size-buttons">
+        <button type="button" data-size="small">small</button>
+        <button type="button" data-size="medium">medium</button>
+        <button type="button" data-size="large">large</button>
+      </div>
     </vscode-demo>
     <script type="module">
       const select = document.querySelector('vscode-single-select');
@@ -45,5 +50,16 @@ <h1>Select</h1>
       select.appendChild(op2);
       select.appendChild(op3);
     </script>
+    <script type="module">
+      document.querySelectorAll('.size-buttons button').forEach((button) => {
+        button.addEventListener('click', () => {
+          document
+            .querySelectorAll('#size-demo-target vscode-single-select')
+            .forEach((el) => {
+              el.setAttribute('size', button.dataset.size);
+            });
+        });
+      });
+    </script>
   </body>
 </html>
diff --git a/dev/vscode-single-select/select-mode/sync-options.html b/dev/vscode-single-select/select-mode/sync-options.html
index 3cc439ef1..f5c015d55 100644
--- a/dev/vscode-single-select/select-mode/sync-options.html
+++ b/dev/vscode-single-select/select-mode/sync-options.html
@@ -26,7 +26,7 @@
   <body>
     <h1>Sync options</h1>
     <main>
-      <vscode-demo>
+      <vscode-demo id="size-demo-target">
         <select id="select-1">
           <option>Lorem</option>
           <option>Ipsum</option>
@@ -49,7 +49,23 @@ <h1>Sync options</h1>
             op1.disabled = true;
           });
         </script>
+        <div class="size-buttons">
+          <button type="button" data-size="small">small</button>
+          <button type="button" data-size="medium">medium</button>
+          <button type="button" data-size="large">large</button>
+        </div>
       </vscode-demo>
     </main>
+    <script type="module">
+      document.querySelectorAll('.size-buttons button').forEach((button) => {
+        button.addEventListener('click', () => {
+          document
+            .querySelectorAll('#size-demo-target vscode-single-select')
+            .forEach((el) => {
+              el.setAttribute('size', button.dataset.size);
+            });
+        });
+      });
+    </script>
   </body>
 </html>
diff --git a/dev/vscode-textarea/a11y.html b/dev/vscode-textarea/a11y.html
index 2f7623815..d752e591b 100644
--- a/dev/vscode-textarea/a11y.html
+++ b/dev/vscode-textarea/a11y.html
@@ -26,8 +26,26 @@
   <body style="background-color: #1f1f1f; color: #fff">
     <h1>A11Y test</h1>
     <main>
-      <vscode-label for="textarea">Test label</vscode-label>
-      <vscode-textarea id="textarea"></vscode-textarea>
+      <div id="size-demo-target">
+        <vscode-label for="textarea">Test label</vscode-label>
+        <vscode-textarea id="textarea"></vscode-textarea>
+      </div>
+      <div class="size-buttons">
+        <button type="button" data-size="small">small</button>
+        <button type="button" data-size="medium">medium</button>
+        <button type="button" data-size="large">large</button>
+      </div>
     </main>
+    <script type="module">
+      document.querySelectorAll('.size-buttons button').forEach((button) => {
+        button.addEventListener('click', () => {
+          document
+            .querySelectorAll('#size-demo-target vscode-textarea')
+            .forEach((el) => {
+              el.setAttribute('size', button.dataset.size);
+            });
+        });
+      });
+    </script>
   </body>
 </html>
diff --git a/dev/vscode-textarea/csp.html b/dev/vscode-textarea/csp.html
index 22431e019..f0f8fc852 100644
--- a/dev/vscode-textarea/csp.html
+++ b/dev/vscode-textarea/csp.html
@@ -52,7 +52,7 @@
   <body>
     <h1>Apply CSP</h1>
     <main>
-      <vscode-demo>
+      <vscode-demo id="size-demo-target">
         <vscode-textarea
           id="textarea"
           value="ffff"
@@ -78,7 +78,23 @@ <h1>Apply CSP</h1>
             });
           });
         </script>
+        <div class="size-buttons">
+          <button type="button" data-size="small">small</button>
+          <button type="button" data-size="medium">medium</button>
+          <button type="button" data-size="large">large</button>
+        </div>
       </vscode-demo>
     </main>
+    <script type="module" nonce="abc123">
+      document.querySelectorAll('.size-buttons button').forEach((button) => {
+        button.addEventListener('click', () => {
+          document
+            .querySelectorAll('#size-demo-target vscode-textarea')
+            .forEach((el) => {
+              el.setAttribute('size', button.dataset.size);
+            });
+        });
+      });
+    </script>
   </body>
 </html>
diff --git a/dev/vscode-textfield/basic-example.html b/dev/vscode-textfield/basic-example.html
index 957c6b8e2..156137c22 100644
--- a/dev/vscode-textfield/basic-example.html
+++ b/dev/vscode-textfield/basic-example.html
@@ -22,7 +22,7 @@
     <main>
       <h1>Textfield</h1>
       <h2>Basic example</h2>
-      <vscode-demo>
+      <vscode-demo id="size-demo-target">
         <vscode-label for="field-1">Lorem ipsum</vscode-label>
         <vscode-textfield
           id="field-1"
@@ -88,7 +88,23 @@ <h2>Basic example</h2>
             document.getElementById('field-1').focus();
           });
         </script>
+        <div class="size-buttons">
+          <button type="button" data-size="small">small</button>
+          <button type="button" data-size="medium">medium</button>
+          <button type="button" data-size="large">large</button>
+        </div>
       </vscode-demo>
     </main>
+    <script type="module">
+      document.querySelectorAll('.size-buttons button').forEach((button) => {
+        button.addEventListener('click', () => {
+          document
+            .querySelectorAll('#size-demo-target vscode-textfield')
+            .forEach((el) => {
+              el.setAttribute('size', button.dataset.size);
+            });
+        });
+      });
+    </script>
   </body>
 </html>
diff --git a/dev/vscode-textfield/events.html b/dev/vscode-textfield/events.html
index d006066f3..07dee9339 100644
--- a/dev/vscode-textfield/events.html
+++ b/dev/vscode-textfield/events.html
@@ -26,12 +26,17 @@
   <body>
     <h1>Textfield</h1>
     <h2>Change, Input</h2>
-    <vscode-demo>
+    <vscode-demo id="size-demo-target">
       <vscode-textfield id="textfield-1"></vscode-textfield>
       <script type="module">
         logEvents('#textfield-1', 'change');
         logEvents('#textfield-1', 'input');
       </script>
+      <div class="size-buttons">
+        <button type="button" data-size="small">small</button>
+        <button type="button" data-size="medium">medium</button>
+        <button type="button" data-size="large">large</button>
+      </div>
     </vscode-demo>
     <h2>Invalid</h2>
     <vscode-demo>
@@ -43,5 +48,16 @@ <h2>Invalid</h2>
         logEvents('#textfield-2', 'invalid');
       </script>
     </vscode-demo>
+    <script type="module">
+      document.querySelectorAll('.size-buttons button').forEach((button) => {
+        button.addEventListener('click', () => {
+          document
+            .querySelectorAll('#size-demo-target vscode-textfield')
+            .forEach((el) => {
+              el.setAttribute('size', button.dataset.size);
+            });
+        });
+      });
+    </script>
   </body>
 </html>
diff --git a/dev/vscode-textfield/fallback-styles.html b/dev/vscode-textfield/fallback-styles.html
index e7b2c82ae..a8d21383c 100644
--- a/dev/vscode-textfield/fallback-styles.html
+++ b/dev/vscode-textfield/fallback-styles.html
@@ -21,12 +21,33 @@
 
   <body style="background-color: #1f1f1f">
     <main>
-      <vscode-textfield placeholder="Placeholder..."></vscode-textfield>
-      <vscode-textfield placeholder="Placeholder..." invalid></vscode-textfield>
-      <vscode-textfield
-        placeholder="Placeholder..."
-        type="file"
-      ></vscode-textfield>
+      <div id="size-demo-target">
+        <vscode-textfield placeholder="Placeholder..."></vscode-textfield>
+        <vscode-textfield
+          placeholder="Placeholder..."
+          invalid
+        ></vscode-textfield>
+        <vscode-textfield
+          placeholder="Placeholder..."
+          type="file"
+        ></vscode-textfield>
+      </div>
+      <div class="size-buttons">
+        <button type="button" data-size="small">small</button>
+        <button type="button" data-size="medium">medium</button>
+        <button type="button" data-size="large">large</button>
+      </div>
     </main>
+    <script type="module">
+      document.querySelectorAll('.size-buttons button').forEach((button) => {
+        button.addEventListener('click', () => {
+          document
+            .querySelectorAll('#size-demo-target vscode-textfield')
+            .forEach((el) => {
+              el.setAttribute('size', button.dataset.size);
+            });
+        });
+      });
+    </script>
   </body>
 </html>
diff --git a/dev/vscode-textfield/file-input.html b/dev/vscode-textfield/file-input.html
index 0f6c536ce..ba06c5822 100644
--- a/dev/vscode-textfield/file-input.html
+++ b/dev/vscode-textfield/file-input.html
@@ -22,7 +22,7 @@
     <main>
       <h1>Textfield</h1>
       <h2>File input</h2>
-      <vscode-demo>
+      <vscode-demo id="size-demo-target">
         <vscode-label for="field-2">Lorem ipsum</vscode-label>
         <vscode-textfield
           id="field-2"
@@ -31,7 +31,23 @@ <h2>File input</h2>
           type="file"
         >
         </vscode-textfield>
+        <div class="size-buttons">
+          <button type="button" data-size="small">small</button>
+          <button type="button" data-size="medium">medium</button>
+          <button type="button" data-size="large">large</button>
+        </div>
       </vscode-demo>
     </main>
+    <script type="module">
+      document.querySelectorAll('.size-buttons button').forEach((button) => {
+        button.addEventListener('click', () => {
+          document
+            .querySelectorAll('#size-demo-target vscode-textfield')
+            .forEach((el) => {
+              el.setAttribute('size', button.dataset.size);
+            });
+        });
+      });
+    </script>
   </body>
 </html>
diff --git a/dev/vscode-textfield/validation-min-validation.html b/dev/vscode-textfield/validation-min-validation.html
index f05708a80..df6ada7d3 100644
--- a/dev/vscode-textfield/validation-min-validation.html
+++ b/dev/vscode-textfield/validation-min-validation.html
@@ -22,7 +22,7 @@
     <main>
       <h1>Textfield</h1>
       <h2>Validation min validation</h2>
-      <vscode-demo>
+      <vscode-demo id="size-demo-target">
         <style>
           input[type='number']:invalid {
             background-color: rgba(255, 0, 0, 0.2);
@@ -36,7 +36,23 @@ <h2>Validation min validation</h2>
           type="number"
         ></vscode-textfield>
         <input type="number" min="10" id="min-test2" name="min-test2" />
+        <div class="size-buttons">
+          <button type="button" data-size="small">small</button>
+          <button type="button" data-size="medium">medium</button>
+          <button type="button" data-size="large">large</button>
+        </div>
       </vscode-demo>
     </main>
+    <script type="module">
+      document.querySelectorAll('.size-buttons button').forEach((button) => {
+        button.addEventListener('click', () => {
+          document
+            .querySelectorAll('#size-demo-target vscode-textfield')
+            .forEach((el) => {
+              el.setAttribute('size', button.dataset.size);
+            });
+        });
+      });
+    </script>
   </body>
 </html>
diff --git a/dev/vscode-textfield/validation-on-value-change.html b/dev/vscode-textfield/validation-on-value-change.html
index 0555827e1..6a8e1cf58 100644
--- a/dev/vscode-textfield/validation-on-value-change.html
+++ b/dev/vscode-textfield/validation-on-value-change.html
@@ -22,7 +22,7 @@
     <main>
       <h1>Textfield</h1>
       <h2>Validation on value change</h2>
-      <vscode-demo>
+      <vscode-demo id="size-demo-target">
         <style>
           input[type='text']:invalid {
             background-color: rgba(255, 0, 0, 0.2);
@@ -36,7 +36,23 @@ <h2>Validation on value change</h2>
           pattern="^(/.*)?$"
         ></vscode-textfield>
         <input type="text" id="path2" name="path2" pattern="^(/.*)?$" />
+        <div class="size-buttons">
+          <button type="button" data-size="small">small</button>
+          <button type="button" data-size="medium">medium</button>
+          <button type="button" data-size="large">large</button>
+        </div>
       </vscode-demo>
     </main>
+    <script type="module">
+      document.querySelectorAll('.size-buttons button').forEach((button) => {
+        button.addEventListener('click', () => {
+          document
+            .querySelectorAll('#size-demo-target vscode-textfield')
+            .forEach((el) => {
+              el.setAttribute('size', button.dataset.size);
+            });
+        });
+      });
+    </script>
   </body>
 </html>

From f40bce6ecd0a0457a261a7699739db576ad89512 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sat, 29 Aug 2026 05:23:13 +0000
Subject: [PATCH 12/31] dev: remove leftover old size-button blocks, fix
 multi-select focus selector

Co-authored-by: 171h <40647432+171h@users.noreply.github.com>
---
 dev/vscode-button/basic-examples.html         | 24 +----------------
 dev/vscode-checkbox/basic-example.html        | 20 --------------
 dev/vscode-label/basic-example.html           | 23 ----------------
 .../autofocus-combobox.html                   |  2 +-
 dev/vscode-multi-select/combobox.html         | 17 ------------
 dev/vscode-radio-group/checked.html           | 21 ---------------
 .../select-mode/basic-example.html            | 21 ++-------------
 dev/vscode-textarea/csp.html                  | 26 +------------------
 dev/vscode-textfield/basic-example.html       | 17 ------------
 9 files changed, 5 insertions(+), 166 deletions(-)

diff --git a/dev/vscode-button/basic-examples.html b/dev/vscode-button/basic-examples.html
index a2cb08f55..ec9d87648 100644
--- a/dev/vscode-button/basic-examples.html
+++ b/dev/vscode-button/basic-examples.html
@@ -26,31 +26,9 @@
   <body>
     <main>
       <div id="size-demo-target">
-        <vscode-demo id="demo">
+        <vscode-demo>
           <vscode-button>Primary Button</vscode-button>
           <vscode-button secondary>Secondary Button</vscode-button>
-          <div>
-            <button type="button" class="size-button" data-size="small">
-              small
-            </button>
-            <button type="button" class="size-button" data-size="medium">
-              medium
-            </button>
-            <button type="button" class="size-button" data-size="large">
-              large
-            </button>
-          </div>
-          <script type="module">
-            document.querySelectorAll('.size-button').forEach((button) => {
-              button.addEventListener('click', () => {
-                document
-                  .querySelectorAll('#demo vscode-button')
-                  .forEach((el) => {
-                    el.setAttribute('size', button.dataset.size);
-                  });
-              });
-            });
-          </script>
           <div class="size-buttons">
             <button type="button" data-size="small">small</button>
             <button type="button" data-size="medium">medium</button>
diff --git a/dev/vscode-checkbox/basic-example.html b/dev/vscode-checkbox/basic-example.html
index 72bd8368c..6e6d76d19 100644
--- a/dev/vscode-checkbox/basic-example.html
+++ b/dev/vscode-checkbox/basic-example.html
@@ -37,30 +37,10 @@ <h2>Basic example</h2>
           ></vscode-checkbox>
           <input type="checkbox" id="native-checkbox-1" disabled />
           <label for="native-checkbox-1" disabled>Native checkbox</label>
-          <div>
-            <button type="button" class="size-button" data-size="small">
-              small
-            </button>
-            <button type="button" class="size-button" data-size="medium">
-              medium
-            </button>
-            <button type="button" class="size-button" data-size="large">
-              large
-            </button>
-          </div>
           <script type="module">
             const cb1 = document.querySelector('#checkbox-1');
             const ncb1 = document.querySelector('#native-checkbox-1');
 
-            document.querySelectorAll('.size-button').forEach((button) => {
-              button.addEventListener('click', () => {
-                document
-                  .querySelectorAll('#demo vscode-checkbox')
-                  .forEach((el) => {
-                    el.setAttribute('size', button.dataset.size);
-                  });
-              });
-            });
             cb1.addEventListener('click', (ev) => {
               console.log(ev);
             });
diff --git a/dev/vscode-label/basic-example.html b/dev/vscode-label/basic-example.html
index 04a354383..dde7add51 100644
--- a/dev/vscode-label/basic-example.html
+++ b/dev/vscode-label/basic-example.html
@@ -30,29 +30,6 @@
           <vscode-label for="textfield">Label example</vscode-label>
           <vscode-textfield id="textfield"></vscode-textfield
         ></vscode-form-group>
-        <div>
-          <button type="button" class="size-button" data-size="small">
-            small
-          </button>
-          <button type="button" class="size-button" data-size="medium">
-            medium
-          </button>
-          <button type="button" class="size-button" data-size="large">
-            large
-          </button>
-        </div>
-        <script type="module">
-          document.querySelectorAll('.size-button').forEach((button) => {
-            button.addEventListener('click', () => {
-              document
-                .getElementById('form-group')
-                .setAttribute('size', button.dataset.size);
-              document
-                .getElementById('textfield')
-                .setAttribute('size', button.dataset.size);
-            });
-          });
-        </script>
         <div class="size-buttons">
           <button type="button" data-size="small">small</button>
           <button type="button" data-size="medium">medium</button>
diff --git a/dev/vscode-multi-select/autofocus-combobox.html b/dev/vscode-multi-select/autofocus-combobox.html
index 6c78e451b..7558c7215 100644
--- a/dev/vscode-multi-select/autofocus-combobox.html
+++ b/dev/vscode-multi-select/autofocus-combobox.html
@@ -39,7 +39,7 @@
         </div>
       </vscode-demo>
       <script type="module">
-        const sl = document.querySelector('vscode-single-select');
+        const sl = document.querySelector('vscode-multi-select');
         const bt = document.querySelector('button');
 
         bt.addEventListener('click', () => {
diff --git a/dev/vscode-multi-select/combobox.html b/dev/vscode-multi-select/combobox.html
index ca8a73a41..0da6d4d5c 100644
--- a/dev/vscode-multi-select/combobox.html
+++ b/dev/vscode-multi-select/combobox.html
@@ -31,28 +31,11 @@
           <vscode-option>Ipsum</vscode-option>
           <vscode-option>Dolor</vscode-option>
         </vscode-multi-select>
-        <div>
-          <button type="button" class="size-button" data-size="small">
-            small
-          </button>
-          <button type="button" class="size-button" data-size="medium">
-            medium
-          </button>
-          <button type="button" class="size-button" data-size="large">
-            large
-          </button>
-        </div>
         <script type="module">
           const sl = document.querySelector('vscode-multi-select');
           sl.addEventListener('change', () => {
             console.log(sl.value);
           });
-
-          document.querySelectorAll('.size-button').forEach((button) => {
-            button.addEventListener('click', () => {
-              sl.setAttribute('size', button.dataset.size);
-            });
-          });
         </script>
         <div class="size-buttons">
           <button type="button" data-size="small">small</button>
diff --git a/dev/vscode-radio-group/checked.html b/dev/vscode-radio-group/checked.html
index 8d40c5194..790f04876 100644
--- a/dev/vscode-radio-group/checked.html
+++ b/dev/vscode-radio-group/checked.html
@@ -37,17 +37,6 @@ <h1>Component demo</h1>
           </vscode-radio-group>
           <button type="reset">Reset</button>
           <button type="submit">Submit</button>
-          <div>
-            <button type="button" class="size-button" data-size="small">
-              small
-            </button>
-            <button type="button" class="size-button" data-size="medium">
-              medium
-            </button>
-            <button type="button" class="size-button" data-size="large">
-              large
-            </button>
-          </div>
         </form>
         <script type="module">
           const form = document.querySelector('form');
@@ -59,16 +48,6 @@ <h1>Component demo</h1>
 
             console.log(Array.from(fd.entries));
           });
-
-          document.querySelectorAll('.size-button').forEach((button) => {
-            button.addEventListener('click', () => {
-              document
-                .querySelectorAll('#radio-group vscode-radio')
-                .forEach((el) => {
-                  el.setAttribute('size', button.dataset.size);
-                });
-            });
-          });
         </script>
         <div class="size-buttons">
           <button type="button" data-size="small">small</button>
diff --git a/dev/vscode-single-select/select-mode/basic-example.html b/dev/vscode-single-select/select-mode/basic-example.html
index 852c038b9..2af773a19 100644
--- a/dev/vscode-single-select/select-mode/basic-example.html
+++ b/dev/vscode-single-select/select-mode/basic-example.html
@@ -32,18 +32,7 @@
           <vscode-option>Dolor</vscode-option>
           <vscode-option>Sit</vscode-option>
         </vscode-single-select>
-        <button type="button">focus</button>
-        <div>
-          <button type="button" class="size-button" data-size="small">
-            small
-          </button>
-          <button type="button" class="size-button" data-size="medium">
-            medium
-          </button>
-          <button type="button" class="size-button" data-size="large">
-            large
-          </button>
-        </div>
+        <button type="button" id="bt-focus">focus</button>
         <div class="size-buttons">
           <button type="button" data-size="small">small</button>
           <button type="button" data-size="medium">medium</button>
@@ -52,17 +41,11 @@
       </vscode-demo>
       <script type="module">
         const sl = document.querySelector('vscode-single-select');
-        const bt = document.querySelector('button');
+        const bt = document.querySelector('#bt-focus');
 
         bt.addEventListener('click', () => {
           sl.focus();
         });
-
-        document.querySelectorAll('.size-button').forEach((button) => {
-          button.addEventListener('click', () => {
-            sl.setAttribute('size', button.dataset.size);
-          });
-        });
       </script>
     </main>
     <script type="module">
diff --git a/dev/vscode-textarea/csp.html b/dev/vscode-textarea/csp.html
index f0f8fc852..68f45ba1c 100644
--- a/dev/vscode-textarea/csp.html
+++ b/dev/vscode-textarea/csp.html
@@ -53,31 +53,7 @@
     <h1>Apply CSP</h1>
     <main>
       <vscode-demo id="size-demo-target">
-        <vscode-textarea
-          id="textarea"
-          value="ffff"
-          resize="vertical"
-        ></vscode-textarea>
-        <div>
-          <button type="button" class="size-button" data-size="small">
-            small
-          </button>
-          <button type="button" class="size-button" data-size="medium">
-            medium
-          </button>
-          <button type="button" class="size-button" data-size="large">
-            large
-          </button>
-        </div>
-        <script type="module" nonce="abc123">
-          const el = document.getElementById('textarea');
-
-          document.querySelectorAll('.size-button').forEach((button) => {
-            button.addEventListener('click', () => {
-              el.setAttribute('size', button.dataset.size);
-            });
-          });
-        </script>
+        <vscode-textarea value="ffff" resize="vertical"></vscode-textarea>
         <div class="size-buttons">
           <button type="button" data-size="small">small</button>
           <button type="button" data-size="medium">medium</button>
diff --git a/dev/vscode-textfield/basic-example.html b/dev/vscode-textfield/basic-example.html
index 156137c22..37d5372e5 100644
--- a/dev/vscode-textfield/basic-example.html
+++ b/dev/vscode-textfield/basic-example.html
@@ -39,27 +39,10 @@ <h2>Basic example</h2>
           ></vscode-icon>
         </vscode-textfield>
         <button type="button" id="bt-focus">focus</button>
-        <div>
-          <button type="button" class="size-button" data-size="small">
-            small
-          </button>
-          <button type="button" class="size-button" data-size="medium">
-            medium
-          </button>
-          <button type="button" class="size-button" data-size="large">
-            large
-          </button>
-        </div>
         <script type="module">
           const el = document.getElementById('field-1');
           const icon = document.getElementById('search-icon');
 
-          document.querySelectorAll('.size-button').forEach((button) => {
-            button.addEventListener('click', () => {
-              el.setAttribute('size', button.dataset.size);
-            });
-          });
-
           document.addEventListener('invalid', (ev) => {
             console.log(ev);
           });

From 3ef5d3bebcc286326cc861678b95fdc0a2d7a80e Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sat, 29 Aug 2026 05:25:22 +0000
Subject: [PATCH 13/31] Changes before error encountered

Agent-Logs-Url: https://github.com/171h/vscode-elements/sessions/1a4fb700-5664-4059-b3aa-2fbf372cef97

Co-authored-by: 171h <40647432+171h@users.noreply.github.com>
---
 dev/vscode-icon/fallback-styles.html     | 20 +++++++++++-
 dev/vscode-icon/missing-codicon-css.html | 20 +++++++++++-
 src/vscode-icon/vscode-icon.test.ts      | 40 +++++++++++++++++++++++-
 src/vscode-icon/vscode-icon.ts           | 20 ++++++++++--
 4 files changed, 94 insertions(+), 6 deletions(-)

diff --git a/dev/vscode-icon/fallback-styles.html b/dev/vscode-icon/fallback-styles.html
index 1c343e8dd..6f39d6565 100644
--- a/dev/vscode-icon/fallback-styles.html
+++ b/dev/vscode-icon/fallback-styles.html
@@ -21,7 +21,25 @@
 
   <body style="background-color: #1f1f1f">
     <main>
-      <vscode-icon name="account" action-icon></vscode-icon>
+      <div id="size-demo-target">
+        <vscode-icon name="account" action-icon></vscode-icon>
+      </div>
+      <div class="size-buttons">
+        <button type="button" data-size="small">small</button>
+        <button type="button" data-size="medium">medium</button>
+        <button type="button" data-size="large">large</button>
+      </div>
     </main>
+    <script type="module">
+      document.querySelectorAll('.size-buttons button').forEach((button) => {
+        button.addEventListener('click', () => {
+          document
+            .querySelectorAll('#size-demo-target vscode-icon')
+            .forEach((el) => {
+              el.setAttribute('size', button.dataset.size);
+            });
+        });
+      });
+    </script>
   </body>
 </html>
diff --git a/dev/vscode-icon/missing-codicon-css.html b/dev/vscode-icon/missing-codicon-css.html
index 42336887a..8399853e3 100644
--- a/dev/vscode-icon/missing-codicon-css.html
+++ b/dev/vscode-icon/missing-codicon-css.html
@@ -20,9 +20,27 @@
 
   <body>
     <main>
-      <vscode-demo>
+      <vscode-demo id="size-demo-target">
         <vscode-icon name="account"></vscode-icon>
+        <div class="size-buttons">
+          <button type="button" data-size="small">small</button>
+          <button type="button" data-size="medium">medium</button>
+          <button type="button" data-size="large">large</button>
+        </div>
       </vscode-demo>
     </main>
+    <script type="module">
+      document.querySelectorAll('.size-buttons button').forEach((button) => {
+        button.addEventListener('click', () => {
+          document
+            .querySelectorAll('#size-demo-target vscode-icon')
+            .forEach((el) => {
+              el.setAttribute('size', button.dataset.size);
+            });
+        });
+      });
+    </script>
+    <main>
+    </main>
   </body>
 </html>
diff --git a/src/vscode-icon/vscode-icon.test.ts b/src/vscode-icon/vscode-icon.test.ts
index 3b3e381b5..c4ca1e12f 100644
--- a/src/vscode-icon/vscode-icon.test.ts
+++ b/src/vscode-icon/vscode-icon.test.ts
@@ -1,9 +1,47 @@
 import {VscodeIcon} from './index.js';
-import {expect} from '@open-wc/testing';
+import {expect, fixture, html} from '@open-wc/testing';
 
 describe('vscode-icon', () => {
   it('is defined', () => {
     const el = document.createElement('vscode-icon');
     expect(el).to.instanceOf(VscodeIcon);
   });
+
+  it('uses medium size (16px) by default', () => {
+    const el = document.createElement('vscode-icon');
+    expect(el.size).to.eq(16);
+  });
+
+  it('accepts a numeric size', () => {
+    const el = document.createElement('vscode-icon');
+    el.size = 24;
+    expect(el.size).to.eq(24);
+  });
+
+  it('maps the small preset to 14px', async () => {
+    const el = await fixture<VscodeIcon>(
+      html`<vscode-icon name="account" size="small"></vscode-icon>`
+    );
+
+    expect(el.size).to.eq(14);
+  });
+
+  it('maps the large preset to 20px', async () => {
+    const el = await fixture<VscodeIcon>(
+      html`<vscode-icon name="account" size="large"></vscode-icon>`
+    );
+
+    expect(el.size).to.eq(20);
+  });
+
+  it('applies the preset size to the icon element', async () => {
+    const el = await fixture<VscodeIcon>(
+      html`<vscode-icon name="account" size="large"></vscode-icon>`
+    );
+    const icon = el.shadowRoot?.querySelector('.codicon') as HTMLElement;
+
+    expect(icon.style.height).to.eq('20px');
+    expect(icon.style.width).to.eq('20px');
+    expect(icon.style.fontSize).to.eq('20px');
+  });
 });
diff --git a/src/vscode-icon/vscode-icon.ts b/src/vscode-icon/vscode-icon.ts
index f9e5a3d36..de3005a1b 100644
--- a/src/vscode-icon/vscode-icon.ts
+++ b/src/vscode-icon/vscode-icon.ts
@@ -34,10 +34,22 @@ export class VscodeIcon extends VscElement {
   name = '';
 
   /**
-   * Icon size in pixels
+   * Icon size. Accepts a number of pixels or one of the predefined sizes:
+   * `small` (14px), `medium` (16px, default) and `large` (20px).
    */
-  @property({type: Number})
-  size = 16;
+  @property()
+  set size(val: number | 'small' | 'medium' | 'large') {
+    const presets = {
+      small: 14,
+      medium: 16,
+      large: 20,
+    };
+
+    this._size = typeof val === 'number' ? val : (presets[val] ?? 16);
+  }
+  get size(): number {
+    return this._size;
+  }
 
   /**
    * Enable rotation animation
@@ -61,6 +73,8 @@ export class VscodeIcon extends VscElement {
 
   private static nonce: string | undefined = '';
 
+  private _size = 16;
+
   override connectedCallback(): void {
     super.connectedCallback();
 

From 222038ac9a9cea7b8d9a965eac5d1c87da250128 Mon Sep 17 00:00:00 2001
From: 171H <40647432+171h@users.noreply.github.com>
Date: Sat, 29 Aug 2026 13:30:34 +0800
Subject: [PATCH 14/31] Revert "Changes before error encountered"

This reverts commit 3ef5d3bebcc286326cc861678b95fdc0a2d7a80e.
---
 dev/vscode-icon/fallback-styles.html     | 20 +-----------
 dev/vscode-icon/missing-codicon-css.html | 20 +-----------
 src/vscode-icon/vscode-icon.test.ts      | 40 +-----------------------
 src/vscode-icon/vscode-icon.ts           | 20 ++----------
 4 files changed, 6 insertions(+), 94 deletions(-)

diff --git a/dev/vscode-icon/fallback-styles.html b/dev/vscode-icon/fallback-styles.html
index 6f39d6565..1c343e8dd 100644
--- a/dev/vscode-icon/fallback-styles.html
+++ b/dev/vscode-icon/fallback-styles.html
@@ -21,25 +21,7 @@
 
   <body style="background-color: #1f1f1f">
     <main>
-      <div id="size-demo-target">
-        <vscode-icon name="account" action-icon></vscode-icon>
-      </div>
-      <div class="size-buttons">
-        <button type="button" data-size="small">small</button>
-        <button type="button" data-size="medium">medium</button>
-        <button type="button" data-size="large">large</button>
-      </div>
+      <vscode-icon name="account" action-icon></vscode-icon>
     </main>
-    <script type="module">
-      document.querySelectorAll('.size-buttons button').forEach((button) => {
-        button.addEventListener('click', () => {
-          document
-            .querySelectorAll('#size-demo-target vscode-icon')
-            .forEach((el) => {
-              el.setAttribute('size', button.dataset.size);
-            });
-        });
-      });
-    </script>
   </body>
 </html>
diff --git a/dev/vscode-icon/missing-codicon-css.html b/dev/vscode-icon/missing-codicon-css.html
index 8399853e3..42336887a 100644
--- a/dev/vscode-icon/missing-codicon-css.html
+++ b/dev/vscode-icon/missing-codicon-css.html
@@ -20,27 +20,9 @@
 
   <body>
     <main>
-      <vscode-demo id="size-demo-target">
+      <vscode-demo>
         <vscode-icon name="account"></vscode-icon>
-        <div class="size-buttons">
-          <button type="button" data-size="small">small</button>
-          <button type="button" data-size="medium">medium</button>
-          <button type="button" data-size="large">large</button>
-        </div>
       </vscode-demo>
     </main>
-    <script type="module">
-      document.querySelectorAll('.size-buttons button').forEach((button) => {
-        button.addEventListener('click', () => {
-          document
-            .querySelectorAll('#size-demo-target vscode-icon')
-            .forEach((el) => {
-              el.setAttribute('size', button.dataset.size);
-            });
-        });
-      });
-    </script>
-    <main>
-    </main>
   </body>
 </html>
diff --git a/src/vscode-icon/vscode-icon.test.ts b/src/vscode-icon/vscode-icon.test.ts
index c4ca1e12f..3b3e381b5 100644
--- a/src/vscode-icon/vscode-icon.test.ts
+++ b/src/vscode-icon/vscode-icon.test.ts
@@ -1,47 +1,9 @@
 import {VscodeIcon} from './index.js';
-import {expect, fixture, html} from '@open-wc/testing';
+import {expect} from '@open-wc/testing';
 
 describe('vscode-icon', () => {
   it('is defined', () => {
     const el = document.createElement('vscode-icon');
     expect(el).to.instanceOf(VscodeIcon);
   });
-
-  it('uses medium size (16px) by default', () => {
-    const el = document.createElement('vscode-icon');
-    expect(el.size).to.eq(16);
-  });
-
-  it('accepts a numeric size', () => {
-    const el = document.createElement('vscode-icon');
-    el.size = 24;
-    expect(el.size).to.eq(24);
-  });
-
-  it('maps the small preset to 14px', async () => {
-    const el = await fixture<VscodeIcon>(
-      html`<vscode-icon name="account" size="small"></vscode-icon>`
-    );
-
-    expect(el.size).to.eq(14);
-  });
-
-  it('maps the large preset to 20px', async () => {
-    const el = await fixture<VscodeIcon>(
-      html`<vscode-icon name="account" size="large"></vscode-icon>`
-    );
-
-    expect(el.size).to.eq(20);
-  });
-
-  it('applies the preset size to the icon element', async () => {
-    const el = await fixture<VscodeIcon>(
-      html`<vscode-icon name="account" size="large"></vscode-icon>`
-    );
-    const icon = el.shadowRoot?.querySelector('.codicon') as HTMLElement;
-
-    expect(icon.style.height).to.eq('20px');
-    expect(icon.style.width).to.eq('20px');
-    expect(icon.style.fontSize).to.eq('20px');
-  });
 });
diff --git a/src/vscode-icon/vscode-icon.ts b/src/vscode-icon/vscode-icon.ts
index de3005a1b..f9e5a3d36 100644
--- a/src/vscode-icon/vscode-icon.ts
+++ b/src/vscode-icon/vscode-icon.ts
@@ -34,22 +34,10 @@ export class VscodeIcon extends VscElement {
   name = '';
 
   /**
-   * Icon size. Accepts a number of pixels or one of the predefined sizes:
-   * `small` (14px), `medium` (16px, default) and `large` (20px).
+   * Icon size in pixels
    */
-  @property()
-  set size(val: number | 'small' | 'medium' | 'large') {
-    const presets = {
-      small: 14,
-      medium: 16,
-      large: 20,
-    };
-
-    this._size = typeof val === 'number' ? val : (presets[val] ?? 16);
-  }
-  get size(): number {
-    return this._size;
-  }
+  @property({type: Number})
+  size = 16;
 
   /**
    * Enable rotation animation
@@ -73,8 +61,6 @@ export class VscodeIcon extends VscElement {
 
   private static nonce: string | undefined = '';
 
-  private _size = 16;
-
   override connectedCallback(): void {
     super.connectedCallback();
 

From a9e0be76459955d4e27603274514d3465d89442e Mon Sep 17 00:00:00 2001
From: 171H <40647432+171h@users.noreply.github.com>
Date: Sat, 29 Aug 2026 07:47:40 +0000
Subject: [PATCH 15/31] Reapply "Changes before error encountered"

This reverts commit 222038ac9a9cea7b8d9a965eac5d1c87da250128.
---
 dev/vscode-icon/fallback-styles.html     | 20 +++++++++++-
 dev/vscode-icon/missing-codicon-css.html | 20 +++++++++++-
 src/vscode-icon/vscode-icon.test.ts      | 40 +++++++++++++++++++++++-
 src/vscode-icon/vscode-icon.ts           | 20 ++++++++++--
 4 files changed, 94 insertions(+), 6 deletions(-)

diff --git a/dev/vscode-icon/fallback-styles.html b/dev/vscode-icon/fallback-styles.html
index 1c343e8dd..6f39d6565 100644
--- a/dev/vscode-icon/fallback-styles.html
+++ b/dev/vscode-icon/fallback-styles.html
@@ -21,7 +21,25 @@
 
   <body style="background-color: #1f1f1f">
     <main>
-      <vscode-icon name="account" action-icon></vscode-icon>
+      <div id="size-demo-target">
+        <vscode-icon name="account" action-icon></vscode-icon>
+      </div>
+      <div class="size-buttons">
+        <button type="button" data-size="small">small</button>
+        <button type="button" data-size="medium">medium</button>
+        <button type="button" data-size="large">large</button>
+      </div>
     </main>
+    <script type="module">
+      document.querySelectorAll('.size-buttons button').forEach((button) => {
+        button.addEventListener('click', () => {
+          document
+            .querySelectorAll('#size-demo-target vscode-icon')
+            .forEach((el) => {
+              el.setAttribute('size', button.dataset.size);
+            });
+        });
+      });
+    </script>
   </body>
 </html>
diff --git a/dev/vscode-icon/missing-codicon-css.html b/dev/vscode-icon/missing-codicon-css.html
index 42336887a..8399853e3 100644
--- a/dev/vscode-icon/missing-codicon-css.html
+++ b/dev/vscode-icon/missing-codicon-css.html
@@ -20,9 +20,27 @@
 
   <body>
     <main>
-      <vscode-demo>
+      <vscode-demo id="size-demo-target">
         <vscode-icon name="account"></vscode-icon>
+        <div class="size-buttons">
+          <button type="button" data-size="small">small</button>
+          <button type="button" data-size="medium">medium</button>
+          <button type="button" data-size="large">large</button>
+        </div>
       </vscode-demo>
     </main>
+    <script type="module">
+      document.querySelectorAll('.size-buttons button').forEach((button) => {
+        button.addEventListener('click', () => {
+          document
+            .querySelectorAll('#size-demo-target vscode-icon')
+            .forEach((el) => {
+              el.setAttribute('size', button.dataset.size);
+            });
+        });
+      });
+    </script>
+    <main>
+    </main>
   </body>
 </html>
diff --git a/src/vscode-icon/vscode-icon.test.ts b/src/vscode-icon/vscode-icon.test.ts
index 3b3e381b5..c4ca1e12f 100644
--- a/src/vscode-icon/vscode-icon.test.ts
+++ b/src/vscode-icon/vscode-icon.test.ts
@@ -1,9 +1,47 @@
 import {VscodeIcon} from './index.js';
-import {expect} from '@open-wc/testing';
+import {expect, fixture, html} from '@open-wc/testing';
 
 describe('vscode-icon', () => {
   it('is defined', () => {
     const el = document.createElement('vscode-icon');
     expect(el).to.instanceOf(VscodeIcon);
   });
+
+  it('uses medium size (16px) by default', () => {
+    const el = document.createElement('vscode-icon');
+    expect(el.size).to.eq(16);
+  });
+
+  it('accepts a numeric size', () => {
+    const el = document.createElement('vscode-icon');
+    el.size = 24;
+    expect(el.size).to.eq(24);
+  });
+
+  it('maps the small preset to 14px', async () => {
+    const el = await fixture<VscodeIcon>(
+      html`<vscode-icon name="account" size="small"></vscode-icon>`
+    );
+
+    expect(el.size).to.eq(14);
+  });
+
+  it('maps the large preset to 20px', async () => {
+    const el = await fixture<VscodeIcon>(
+      html`<vscode-icon name="account" size="large"></vscode-icon>`
+    );
+
+    expect(el.size).to.eq(20);
+  });
+
+  it('applies the preset size to the icon element', async () => {
+    const el = await fixture<VscodeIcon>(
+      html`<vscode-icon name="account" size="large"></vscode-icon>`
+    );
+    const icon = el.shadowRoot?.querySelector('.codicon') as HTMLElement;
+
+    expect(icon.style.height).to.eq('20px');
+    expect(icon.style.width).to.eq('20px');
+    expect(icon.style.fontSize).to.eq('20px');
+  });
 });
diff --git a/src/vscode-icon/vscode-icon.ts b/src/vscode-icon/vscode-icon.ts
index f9e5a3d36..de3005a1b 100644
--- a/src/vscode-icon/vscode-icon.ts
+++ b/src/vscode-icon/vscode-icon.ts
@@ -34,10 +34,22 @@ export class VscodeIcon extends VscElement {
   name = '';
 
   /**
-   * Icon size in pixels
+   * Icon size. Accepts a number of pixels or one of the predefined sizes:
+   * `small` (14px), `medium` (16px, default) and `large` (20px).
    */
-  @property({type: Number})
-  size = 16;
+  @property()
+  set size(val: number | 'small' | 'medium' | 'large') {
+    const presets = {
+      small: 14,
+      medium: 16,
+      large: 20,
+    };
+
+    this._size = typeof val === 'number' ? val : (presets[val] ?? 16);
+  }
+  get size(): number {
+    return this._size;
+  }
 
   /**
    * Enable rotation animation
@@ -61,6 +73,8 @@ export class VscodeIcon extends VscElement {
 
   private static nonce: string | undefined = '';
 
+  private _size = 16;
+
   override connectedCallback(): void {
     super.connectedCallback();
 

From 36c0ffb999ab1c913d0dd61da3e52d4eb1aca725 Mon Sep 17 00:00:00 2001
From: 171H <40647432+171h@users.noreply.github.com>
Date: Sat, 29 Aug 2026 07:56:35 +0000
Subject: [PATCH 16/31] fix: complete icon size support

---
 dev/vscode-icon/missing-codicon-css.html |  2 --
 dev/vscode-icon/nonce.html               | 18 +++++++++++++++++-
 src/vscode-icon/vscode-icon.test.ts      |  8 ++++++++
 src/vscode-icon/vscode-icon.ts           |  8 +++++++-
 4 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/dev/vscode-icon/missing-codicon-css.html b/dev/vscode-icon/missing-codicon-css.html
index 8399853e3..fc152fa03 100644
--- a/dev/vscode-icon/missing-codicon-css.html
+++ b/dev/vscode-icon/missing-codicon-css.html
@@ -40,7 +40,5 @@
         });
       });
     </script>
-    <main>
-    </main>
   </body>
 </html>
diff --git a/dev/vscode-icon/nonce.html b/dev/vscode-icon/nonce.html
index 9a9fbda3c..ad614789b 100644
--- a/dev/vscode-icon/nonce.html
+++ b/dev/vscode-icon/nonce.html
@@ -36,7 +36,7 @@
   <body>
     <h1>Using nonce property</h1>
     <main>
-      <vscode-demo>
+      <vscode-demo id="size-demo-target">
         <vscode-icon name="account"></vscode-icon>
         <vscode-icon
           name="loading"
@@ -46,7 +46,23 @@ <h1>Using nonce property</h1>
         ></vscode-icon>
         <vscode-button icon="account">Hello World</vscode-button>
         <vscode-button secondary>Hello World</vscode-button>
+        <div class="size-buttons">
+          <button type="button" data-size="small">small</button>
+          <button type="button" data-size="medium">medium</button>
+          <button type="button" data-size="large">large</button>
+        </div>
       </vscode-demo>
     </main>
+    <script type="module" nonce="abc123">
+      document.querySelectorAll('.size-buttons button').forEach((button) => {
+        button.addEventListener('click', () => {
+          document
+            .querySelectorAll('#size-demo-target vscode-icon')
+            .forEach((el) => {
+              el.setAttribute('size', button.dataset.size);
+            });
+        });
+      });
+    </script>
   </body>
 </html>
diff --git a/src/vscode-icon/vscode-icon.test.ts b/src/vscode-icon/vscode-icon.test.ts
index c4ca1e12f..e3b49842a 100644
--- a/src/vscode-icon/vscode-icon.test.ts
+++ b/src/vscode-icon/vscode-icon.test.ts
@@ -18,6 +18,14 @@ describe('vscode-icon', () => {
     expect(el.size).to.eq(24);
   });
 
+  it('preserves numeric size attributes', async () => {
+    const el = await fixture<VscodeIcon>(
+      html`<vscode-icon name="account" size="24"></vscode-icon>`
+    );
+
+    expect(el.size).to.eq(24);
+  });
+
   it('maps the small preset to 14px', async () => {
     const el = await fixture<VscodeIcon>(
       html`<vscode-icon name="account" size="small"></vscode-icon>`
diff --git a/src/vscode-icon/vscode-icon.ts b/src/vscode-icon/vscode-icon.ts
index de3005a1b..1c9319c2e 100644
--- a/src/vscode-icon/vscode-icon.ts
+++ b/src/vscode-icon/vscode-icon.ts
@@ -45,7 +45,13 @@ export class VscodeIcon extends VscElement {
       large: 20,
     };
 
-    this._size = typeof val === 'number' ? val : (presets[val] ?? 16);
+    const numericValue = Number(val);
+
+    this._size =
+      typeof val === 'number' ||
+      (String(val).trim() !== '' && Number.isFinite(numericValue))
+        ? numericValue
+        : (presets[val] ?? 16);
   }
   get size(): number {
     return this._size;

From 5d831cd074d0d6a733e06d1ffa3b2827227ab95b Mon Sep 17 00:00:00 2001
From: 171H <40647432+171h@users.noreply.github.com>
Date: Sat, 29 Aug 2026 08:35:39 +0000
Subject: [PATCH 17/31] dev: add icon size controls to demos

---
 .../actions-stop-propagation.html             | 20 +++++++++++++++++++
 .../always-show-header-actions.html           | 20 +++++++++++++++++++
 .../vscode-collapsible.html                   | 20 +++++++++++++++++++
 dev/vscode-tabs/fallback-styles.html          | 20 +++++++++++++++++++
 dev/vscode-tabs/panel-style.html              | 20 +++++++++++++++++++
 dev/vscode-textfield/basic-example.html       | 20 +++++++++++++++++++
 dev/vscode-tree/default-active-item.html      | 20 +++++++++++++++++++
 dev/vscode-tree/double-click-expand-mode.html | 20 +++++++++++++++++++
 dev/vscode-tree/events.html                   | 20 +++++++++++++++++++
 dev/vscode-tree/expand-all-collapse-all.html  | 20 +++++++++++++++++++
 dev/vscode-tree/guides-has-arrows.html        | 20 +++++++++++++++++++
 dev/vscode-tree/guides-wo-arrows.html         | 20 +++++++++++++++++++
 dev/vscode-tree/multi-select.html             | 20 +++++++++++++++++++
 dev/vscode-tree/problems-tree.html            | 20 +++++++++++++++++++
 dev/vscode-tree/scm-tree.html                 | 20 +++++++++++++++++++
 dev/vscode-tree/set-active-item.html          | 20 +++++++++++++++++++
 dev/vscode-tree/stress-test.html              | 20 +++++++++++++++++++
 dev/vscode-tree/with-icons.html               | 20 +++++++++++++++++++
 18 files changed, 360 insertions(+)

diff --git a/dev/vscode-collapsible/actions-stop-propagation.html b/dev/vscode-collapsible/actions-stop-propagation.html
index 339432837..4584b4605 100644
--- a/dev/vscode-collapsible/actions-stop-propagation.html
+++ b/dev/vscode-collapsible/actions-stop-propagation.html
@@ -54,11 +54,31 @@ <h1>Component demo</h1>
           <p>Lorem ipsum</p>
           <p>Lorem ipsum</p>
         </vscode-collapsible>
+        <div class="icon-size-buttons">
+          Icon size:
+          <button type="button" data-icon-size="small">small</button>
+          <button type="button" data-icon-size="medium">medium</button>
+          <button type="button" data-icon-size="large">large</button>
+        </div>
       </vscode-demo>
       <script>
         logEvents('#btn-file-add', 'click');
         logEvents('#btn-refresh', 'click');
       </script>
     </main>
+    <script type="module">
+      document
+        .querySelectorAll('.icon-size-buttons button')
+        .forEach((button) => {
+          button.addEventListener('click', () => {
+            button
+              .closest('vscode-demo')
+              .querySelectorAll('vscode-icon')
+              .forEach((icon) => {
+                icon.setAttribute('size', button.dataset.iconSize);
+              });
+          });
+        });
+    </script>
   </body>
 </html>
diff --git a/dev/vscode-collapsible/always-show-header-actions.html b/dev/vscode-collapsible/always-show-header-actions.html
index 77215ce18..ccccf3f69 100644
--- a/dev/vscode-collapsible/always-show-header-actions.html
+++ b/dev/vscode-collapsible/always-show-header-actions.html
@@ -120,6 +120,12 @@ <h2 class="story-title">Basic example</h2>
             <p>lorem ipsum dolor sit</p>
           </vscode-collapsible>
           <vscode-collapsible title="Dolor"></vscode-collapsible>
+          <div class="icon-size-buttons">
+            Icon size:
+            <button type="button" data-icon-size="small">small</button>
+            <button type="button" data-icon-size="medium">medium</button>
+            <button type="button" data-icon-size="large">large</button>
+          </div>
         </vscode-demo>
         <script type="module">
           const icons = document.querySelectorAll('vscode-icon[action-icon]');
@@ -142,5 +148,19 @@ <h2 class="story-title">Basic example</h2>
         </script>
       </div>
     </div>
+    <script type="module">
+      document
+        .querySelectorAll('.icon-size-buttons button')
+        .forEach((button) => {
+          button.addEventListener('click', () => {
+            button
+              .closest('vscode-demo')
+              .querySelectorAll('vscode-icon')
+              .forEach((icon) => {
+                icon.setAttribute('size', button.dataset.iconSize);
+              });
+          });
+        });
+    </script>
   </body>
 </html>
diff --git a/dev/vscode-collapsible/vscode-collapsible.html b/dev/vscode-collapsible/vscode-collapsible.html
index ba2e31345..4e1e46ea4 100644
--- a/dev/vscode-collapsible/vscode-collapsible.html
+++ b/dev/vscode-collapsible/vscode-collapsible.html
@@ -119,6 +119,12 @@ <h2 class="story-title">Basic example</h2>
             <p>lorem ipsum dolor sit</p>
           </vscode-collapsible>
           <vscode-collapsible title="Dolor"></vscode-collapsible>
+          <div class="icon-size-buttons">
+            Icon size:
+            <button type="button" data-icon-size="small">small</button>
+            <button type="button" data-icon-size="medium">medium</button>
+            <button type="button" data-icon-size="large">large</button>
+          </div>
         </vscode-demo>
         <script type="module">
           const icons = document.querySelectorAll('vscode-icon[action-icon]');
@@ -141,5 +147,19 @@ <h2 class="story-title">Basic example</h2>
         </script>
       </div>
     </div>
+    <script type="module">
+      document
+        .querySelectorAll('.icon-size-buttons button')
+        .forEach((button) => {
+          button.addEventListener('click', () => {
+            button
+              .closest('vscode-demo')
+              .querySelectorAll('vscode-icon')
+              .forEach((icon) => {
+                icon.setAttribute('size', button.dataset.iconSize);
+              });
+          });
+        });
+    </script>
   </body>
 </html>
diff --git a/dev/vscode-tabs/fallback-styles.html b/dev/vscode-tabs/fallback-styles.html
index 9249ed1bd..eeb9de033 100644
--- a/dev/vscode-tabs/fallback-styles.html
+++ b/dev/vscode-tabs/fallback-styles.html
@@ -61,7 +61,27 @@
           <vscode-tab-header>Tab 3</vscode-tab-header>
           <vscode-tab-panel>Panel 3</vscode-tab-panel>
         </vscode-tabs>
+        <div class="icon-size-buttons">
+          Icon size:
+          <button type="button" data-icon-size="small">small</button>
+          <button type="button" data-icon-size="medium">medium</button>
+          <button type="button" data-icon-size="large">large</button>
+        </div>
       </vscode-demo>
     </main>
+    <script type="module">
+      document
+        .querySelectorAll('.icon-size-buttons button')
+        .forEach((button) => {
+          button.addEventListener('click', () => {
+            button
+              .closest('vscode-demo')
+              .querySelectorAll('vscode-icon')
+              .forEach((icon) => {
+                icon.setAttribute('size', button.dataset.iconSize);
+              });
+          });
+        });
+    </script>
   </body>
 </html>
diff --git a/dev/vscode-tabs/panel-style.html b/dev/vscode-tabs/panel-style.html
index 0f3370078..c239851c3 100644
--- a/dev/vscode-tabs/panel-style.html
+++ b/dev/vscode-tabs/panel-style.html
@@ -126,7 +126,27 @@
             >
           </vscode-tab-panel>
         </vscode-tabs>
+        <div class="icon-size-buttons">
+          Icon size:
+          <button type="button" data-icon-size="small">small</button>
+          <button type="button" data-icon-size="medium">medium</button>
+          <button type="button" data-icon-size="large">large</button>
+        </div>
       </vscode-demo>
     </main>
+    <script type="module">
+      document
+        .querySelectorAll('.icon-size-buttons button')
+        .forEach((button) => {
+          button.addEventListener('click', () => {
+            button
+              .closest('vscode-demo')
+              .querySelectorAll('vscode-icon')
+              .forEach((icon) => {
+                icon.setAttribute('size', button.dataset.iconSize);
+              });
+          });
+        });
+    </script>
   </body>
 </html>
diff --git a/dev/vscode-textfield/basic-example.html b/dev/vscode-textfield/basic-example.html
index 37d5372e5..7f3445744 100644
--- a/dev/vscode-textfield/basic-example.html
+++ b/dev/vscode-textfield/basic-example.html
@@ -76,6 +76,12 @@ <h2>Basic example</h2>
           <button type="button" data-size="medium">medium</button>
           <button type="button" data-size="large">large</button>
         </div>
+        <div class="icon-size-buttons">
+          Icon size:
+          <button type="button" data-icon-size="small">small</button>
+          <button type="button" data-icon-size="medium">medium</button>
+          <button type="button" data-icon-size="large">large</button>
+        </div>
       </vscode-demo>
     </main>
     <script type="module">
@@ -89,5 +95,19 @@ <h2>Basic example</h2>
         });
       });
     </script>
+    <script type="module">
+      document
+        .querySelectorAll('.icon-size-buttons button')
+        .forEach((button) => {
+          button.addEventListener('click', () => {
+            button
+              .closest('vscode-demo')
+              .querySelectorAll('vscode-icon')
+              .forEach((icon) => {
+                icon.setAttribute('size', button.dataset.iconSize);
+              });
+          });
+        });
+    </script>
   </body>
 </html>
diff --git a/dev/vscode-tree/default-active-item.html b/dev/vscode-tree/default-active-item.html
index 25725115c..8d3f63359 100644
--- a/dev/vscode-tree/default-active-item.html
+++ b/dev/vscode-tree/default-active-item.html
@@ -233,7 +233,27 @@ <h1>Basic example</h1>
             });
           </script>
         </div>
+        <div class="icon-size-buttons">
+          Icon size:
+          <button type="button" data-icon-size="small">small</button>
+          <button type="button" data-icon-size="medium">medium</button>
+          <button type="button" data-icon-size="large">large</button>
+        </div>
       </vscode-demo>
     </main>
+    <script type="module">
+      document
+        .querySelectorAll('.icon-size-buttons button')
+        .forEach((button) => {
+          button.addEventListener('click', () => {
+            button
+              .closest('vscode-demo')
+              .querySelectorAll('vscode-icon')
+              .forEach((icon) => {
+                icon.setAttribute('size', button.dataset.iconSize);
+              });
+          });
+        });
+    </script>
   </body>
 </html>
diff --git a/dev/vscode-tree/double-click-expand-mode.html b/dev/vscode-tree/double-click-expand-mode.html
index 8cb4ffd29..7cc42cb10 100644
--- a/dev/vscode-tree/double-click-expand-mode.html
+++ b/dev/vscode-tree/double-click-expand-mode.html
@@ -229,7 +229,27 @@ <h1>Expand mode: doubleClick</h1>
           </vscode-tree>
           <input type="text" />
         </div>
+        <div class="icon-size-buttons">
+          Icon size:
+          <button type="button" data-icon-size="small">small</button>
+          <button type="button" data-icon-size="medium">medium</button>
+          <button type="button" data-icon-size="large">large</button>
+        </div>
       </vscode-demo>
     </main>
+    <script type="module">
+      document
+        .querySelectorAll('.icon-size-buttons button')
+        .forEach((button) => {
+          button.addEventListener('click', () => {
+            button
+              .closest('vscode-demo')
+              .querySelectorAll('vscode-icon')
+              .forEach((icon) => {
+                icon.setAttribute('size', button.dataset.iconSize);
+              });
+          });
+        });
+    </script>
   </body>
 </html>
diff --git a/dev/vscode-tree/events.html b/dev/vscode-tree/events.html
index 0c4ec7610..fc71fe945 100644
--- a/dev/vscode-tree/events.html
+++ b/dev/vscode-tree/events.html
@@ -231,7 +231,27 @@ <h1>Events</h1>
             logEvents('vscode-tree', 'vsc-list-select');
           </script>
         </div>
+        <div class="icon-size-buttons">
+          Icon size:
+          <button type="button" data-icon-size="small">small</button>
+          <button type="button" data-icon-size="medium">medium</button>
+          <button type="button" data-icon-size="large">large</button>
+        </div>
       </vscode-demo>
     </main>
+    <script type="module">
+      document
+        .querySelectorAll('.icon-size-buttons button')
+        .forEach((button) => {
+          button.addEventListener('click', () => {
+            button
+              .closest('vscode-demo')
+              .querySelectorAll('vscode-icon')
+              .forEach((icon) => {
+                icon.setAttribute('size', button.dataset.iconSize);
+              });
+          });
+        });
+    </script>
   </body>
 </html>
diff --git a/dev/vscode-tree/expand-all-collapse-all.html b/dev/vscode-tree/expand-all-collapse-all.html
index b7e6e6ecc..42aa459d3 100644
--- a/dev/vscode-tree/expand-all-collapse-all.html
+++ b/dev/vscode-tree/expand-all-collapse-all.html
@@ -243,7 +243,27 @@ <h1>Expand/Collapse all</h1>
             });
           </script>
         </div>
+        <div class="icon-size-buttons">
+          Icon size:
+          <button type="button" data-icon-size="small">small</button>
+          <button type="button" data-icon-size="medium">medium</button>
+          <button type="button" data-icon-size="large">large</button>
+        </div>
       </vscode-demo>
     </main>
+    <script type="module">
+      document
+        .querySelectorAll('.icon-size-buttons button')
+        .forEach((button) => {
+          button.addEventListener('click', () => {
+            button
+              .closest('vscode-demo')
+              .querySelectorAll('vscode-icon')
+              .forEach((icon) => {
+                icon.setAttribute('size', button.dataset.iconSize);
+              });
+          });
+        });
+    </script>
   </body>
 </html>
diff --git a/dev/vscode-tree/guides-has-arrows.html b/dev/vscode-tree/guides-has-arrows.html
index 8482f3040..62c00e117 100644
--- a/dev/vscode-tree/guides-has-arrows.html
+++ b/dev/vscode-tree/guides-has-arrows.html
@@ -238,7 +238,27 @@ <h1>Basic example</h1>
             });
           </script>
         </div>
+        <div class="icon-size-buttons">
+          Icon size:
+          <button type="button" data-icon-size="small">small</button>
+          <button type="button" data-icon-size="medium">medium</button>
+          <button type="button" data-icon-size="large">large</button>
+        </div>
       </vscode-demo>
     </main>
+    <script type="module">
+      document
+        .querySelectorAll('.icon-size-buttons button')
+        .forEach((button) => {
+          button.addEventListener('click', () => {
+            button
+              .closest('vscode-demo')
+              .querySelectorAll('vscode-icon')
+              .forEach((icon) => {
+                icon.setAttribute('size', button.dataset.iconSize);
+              });
+          });
+        });
+    </script>
   </body>
 </html>
diff --git a/dev/vscode-tree/guides-wo-arrows.html b/dev/vscode-tree/guides-wo-arrows.html
index 7921e79e8..3bc636c87 100644
--- a/dev/vscode-tree/guides-wo-arrows.html
+++ b/dev/vscode-tree/guides-wo-arrows.html
@@ -233,7 +233,27 @@ <h1>Basic example</h1>
             });
           </script>
         </div>
+        <div class="icon-size-buttons">
+          Icon size:
+          <button type="button" data-icon-size="small">small</button>
+          <button type="button" data-icon-size="medium">medium</button>
+          <button type="button" data-icon-size="large">large</button>
+        </div>
       </vscode-demo>
     </main>
+    <script type="module">
+      document
+        .querySelectorAll('.icon-size-buttons button')
+        .forEach((button) => {
+          button.addEventListener('click', () => {
+            button
+              .closest('vscode-demo')
+              .querySelectorAll('vscode-icon')
+              .forEach((icon) => {
+                icon.setAttribute('size', button.dataset.iconSize);
+              });
+          });
+        });
+    </script>
   </body>
 </html>
diff --git a/dev/vscode-tree/multi-select.html b/dev/vscode-tree/multi-select.html
index 20f432d49..d4b0f84c2 100644
--- a/dev/vscode-tree/multi-select.html
+++ b/dev/vscode-tree/multi-select.html
@@ -241,7 +241,27 @@ <h1>Basic example</h1>
             logEvents('vscode-tree', 'vsc-tree-select');
           </script>
         </div>
+        <div class="icon-size-buttons">
+          Icon size:
+          <button type="button" data-icon-size="small">small</button>
+          <button type="button" data-icon-size="medium">medium</button>
+          <button type="button" data-icon-size="large">large</button>
+        </div>
       </vscode-demo>
     </main>
+    <script type="module">
+      document
+        .querySelectorAll('.icon-size-buttons button')
+        .forEach((button) => {
+          button.addEventListener('click', () => {
+            button
+              .closest('vscode-demo')
+              .querySelectorAll('vscode-icon')
+              .forEach((icon) => {
+                icon.setAttribute('size', button.dataset.iconSize);
+              });
+          });
+        });
+    </script>
   </body>
 </html>
diff --git a/dev/vscode-tree/problems-tree.html b/dev/vscode-tree/problems-tree.html
index dd911583b..f1df48d1b 100644
--- a/dev/vscode-tree/problems-tree.html
+++ b/dev/vscode-tree/problems-tree.html
@@ -274,6 +274,12 @@ <h1>Problems (demo)</h1>
           id="problem-context-menu"
           class="problem-context-menu"
         ></vscode-context-menu>
+        <div class="icon-size-buttons">
+          Icon size:
+          <button type="button" data-icon-size="small">small</button>
+          <button type="button" data-icon-size="medium">medium</button>
+          <button type="button" data-icon-size="large">large</button>
+        </div>
       </vscode-demo>
     </main>
     <script type="module">
@@ -378,5 +384,19 @@ <h1>Problems (demo)</h1>
         {capture: true}
       );
     </script>
+    <script type="module">
+      document
+        .querySelectorAll('.icon-size-buttons button')
+        .forEach((button) => {
+          button.addEventListener('click', () => {
+            button
+              .closest('vscode-demo')
+              .querySelectorAll('vscode-icon')
+              .forEach((icon) => {
+                icon.setAttribute('size', button.dataset.iconSize);
+              });
+          });
+        });
+    </script>
   </body>
 </html>
diff --git a/dev/vscode-tree/scm-tree.html b/dev/vscode-tree/scm-tree.html
index 584ee0b03..113f754c8 100644
--- a/dev/vscode-tree/scm-tree.html
+++ b/dev/vscode-tree/scm-tree.html
@@ -286,6 +286,12 @@ <h1>SCM (Demo)</h1>
             </vscode-tree-item>
           </vscode-tree-item>
         </vscode-tree>
+        <div class="icon-size-buttons">
+          Icon size:
+          <button type="button" data-icon-size="small">small</button>
+          <button type="button" data-icon-size="medium">medium</button>
+          <button type="button" data-icon-size="large">large</button>
+        </div>
       </vscode-demo>
     </main>
     <script type="module">
@@ -380,5 +386,19 @@ <h1>SCM (Demo)</h1>
       window.addEventListener('load', setupActionGuards);
       widthInput?.addEventListener('input', syncWidth);
     </script>
+    <script type="module">
+      document
+        .querySelectorAll('.icon-size-buttons button')
+        .forEach((button) => {
+          button.addEventListener('click', () => {
+            button
+              .closest('vscode-demo')
+              .querySelectorAll('vscode-icon')
+              .forEach((icon) => {
+                icon.setAttribute('size', button.dataset.iconSize);
+              });
+          });
+        });
+    </script>
   </body>
 </html>
diff --git a/dev/vscode-tree/set-active-item.html b/dev/vscode-tree/set-active-item.html
index 5b2784853..d95fc1115 100644
--- a/dev/vscode-tree/set-active-item.html
+++ b/dev/vscode-tree/set-active-item.html
@@ -233,7 +233,27 @@ <h1>Basic example</h1>
             });
           </script>
         </div>
+        <div class="icon-size-buttons">
+          Icon size:
+          <button type="button" data-icon-size="small">small</button>
+          <button type="button" data-icon-size="medium">medium</button>
+          <button type="button" data-icon-size="large">large</button>
+        </div>
       </vscode-demo>
     </main>
+    <script type="module">
+      document
+        .querySelectorAll('.icon-size-buttons button')
+        .forEach((button) => {
+          button.addEventListener('click', () => {
+            button
+              .closest('vscode-demo')
+              .querySelectorAll('vscode-icon')
+              .forEach((icon) => {
+                icon.setAttribute('size', button.dataset.iconSize);
+              });
+          });
+        });
+    </script>
   </body>
 </html>
diff --git a/dev/vscode-tree/stress-test.html b/dev/vscode-tree/stress-test.html
index 4888b3819..42860d473 100644
--- a/dev/vscode-tree/stress-test.html
+++ b/dev/vscode-tree/stress-test.html
@@ -8389,6 +8389,12 @@ <h1>With icons</h1>
             </vscode-tree>
           </vscode-scrollable>
         </vscode-collapsible>
+        <div class="icon-size-buttons">
+          Icon size:
+          <button type="button" data-icon-size="small">small</button>
+          <button type="button" data-icon-size="medium">medium</button>
+          <button type="button" data-icon-size="large">large</button>
+        </div>
       </vscode-demo>
       <script type="module">
         const bt = document.querySelector('#bt-expand');
@@ -8400,5 +8406,19 @@ <h1>With icons</h1>
         });
       </script>
     </main>
+    <script type="module">
+      document
+        .querySelectorAll('.icon-size-buttons button')
+        .forEach((button) => {
+          button.addEventListener('click', () => {
+            button
+              .closest('vscode-demo')
+              .querySelectorAll('vscode-icon')
+              .forEach((icon) => {
+                icon.setAttribute('size', button.dataset.iconSize);
+              });
+          });
+        });
+    </script>
   </body>
 </html>
diff --git a/dev/vscode-tree/with-icons.html b/dev/vscode-tree/with-icons.html
index b511001c8..da78c918a 100644
--- a/dev/vscode-tree/with-icons.html
+++ b/dev/vscode-tree/with-icons.html
@@ -5577,7 +5577,27 @@ <h1>With icons</h1>
             </vscode-tree-item>
           </vscode-tree-item>
         </vscode-tree>
+        <div class="icon-size-buttons">
+          Icon size:
+          <button type="button" data-icon-size="small">small</button>
+          <button type="button" data-icon-size="medium">medium</button>
+          <button type="button" data-icon-size="large">large</button>
+        </div>
       </vscode-demo>
     </main>
+    <script type="module">
+      document
+        .querySelectorAll('.icon-size-buttons button')
+        .forEach((button) => {
+          button.addEventListener('click', () => {
+            button
+              .closest('vscode-demo')
+              .querySelectorAll('vscode-icon')
+              .forEach((icon) => {
+                icon.setAttribute('size', button.dataset.iconSize);
+              });
+          });
+        });
+    </script>
   </body>
 </html>

From 77cd45ab1f6e8348b72a8ef298a1b9024d13a4d0 Mon Sep 17 00:00:00 2001
From: 171H <40647432+171h@users.noreply.github.com>
Date: Sat, 29 Aug 2026 08:44:54 +0000
Subject: [PATCH 18/31] Update dev page titles

---
 dev/vscode-badge/basic-example.html                             | 2 +-
 dev/vscode-badge/fallback-styles.html                           | 2 +-
 dev/vscode-button-group/dropdown-menu.html                      | 2 +-
 dev/vscode-button-group/vscode-button-group.html                | 2 +-
 dev/vscode-button/autofocus.html                                | 2 +-
 dev/vscode-button/basic-examples.html                           | 2 +-
 dev/vscode-button/block-button.html                             | 2 +-
 dev/vscode-button/fallback-styles.html                          | 2 +-
 dev/vscode-button/icon-button.html                              | 2 +-
 dev/vscode-button/reset.html                                    | 2 +-
 dev/vscode-button/slots.html                                    | 2 +-
 dev/vscode-button/submit.html                                   | 2 +-
 dev/vscode-button/variations.html                               | 2 +-
 dev/vscode-checkbox/basic-example.html                          | 2 +-
 dev/vscode-checkbox/fallback-styles.html                        | 2 +-
 dev/vscode-checkbox/group.html                                  | 2 +-
 dev/vscode-checkbox/toggle.html                                 | 2 +-
 dev/vscode-checkbox/validate-checked.html                       | 2 +-
 dev/vscode-collapsible/actions-stop-propagation.html            | 2 +-
 dev/vscode-collapsible/always-show-header-actions.html          | 2 +-
 dev/vscode-collapsible/vscode-collapsible.html                  | 2 +-
 dev/vscode-context-menu/basic-example.html                      | 2 +-
 dev/vscode-context-menu/fallback-styles.html                    | 2 +-
 dev/vscode-divider/basic-example.html                           | 2 +-
 dev/vscode-divider/fallback-styles.html                         | 2 +-
 dev/vscode-form-helper/csp.html                                 | 2 +-
 dev/vscode-icon/fallback-styles.html                            | 2 +-
 dev/vscode-icon/missing-codicon-css.html                        | 2 +-
 dev/vscode-icon/nonce.html                                      | 2 +-
 dev/vscode-label/basic-example.html                             | 2 +-
 dev/vscode-multi-select/a11y-combobox.html                      | 2 +-
 dev/vscode-multi-select/a11y-select.html                        | 2 +-
 dev/vscode-multi-select/autofocus-combobox.html                 | 2 +-
 dev/vscode-multi-select/autofocus-select.html                   | 2 +-
 dev/vscode-multi-select/combobox-suggestion-mode.html           | 2 +-
 dev/vscode-multi-select/combobox.html                           | 2 +-
 dev/vscode-multi-select/events.html                             | 2 +-
 dev/vscode-multi-select/fallback-styles.html                    | 2 +-
 dev/vscode-multi-select/issue-510.html                          | 2 +-
 dev/vscode-multi-select/long-text.html                          | 2 +-
 dev/vscode-multi-select/open-prop.html                          | 2 +-
 dev/vscode-multi-select/set-option.html                         | 2 +-
 dev/vscode-multi-select/set-value-before-options.html           | 2 +-
 dev/vscode-multi-select/sync-options.html                       | 2 +-
 dev/vscode-progress-bar/basic-example.html                      | 2 +-
 dev/vscode-progress-bar/fallback-styles.html                    | 2 +-
 dev/vscode-progress-ring/fallback-styles.html                   | 2 +-
 dev/vscode-radio-group/checked.html                             | 2 +-
 dev/vscode-radio-group/default-checked.html                     | 2 +-
 dev/vscode-radio-group/issue-511.html                           | 2 +-
 dev/vscode-radio/fallback-styles.html                           | 2 +-
 dev/vscode-scrollable/always-visible.html                       | 2 +-
 dev/vscode-scrollable/change-event.html                         | 2 +-
 dev/vscode-scrollable/csp.html                                  | 2 +-
 dev/vscode-scrollable/fallback-styles.html                      | 2 +-
 dev/vscode-single-select/combobox-mode/a11y.html                | 2 +-
 dev/vscode-single-select/combobox-mode/autofocus-combobox.html  | 2 +-
 .../combobox-mode/combobox-suggestion-mode.html                 | 2 +-
 dev/vscode-single-select/combobox-mode/combobox.html            | 2 +-
 dev/vscode-single-select/combobox-mode/deleting-value.html      | 2 +-
 dev/vscode-single-select/issue-530.html                         | 2 +-
 dev/vscode-single-select/select-mode/a11y.html                  | 2 +-
 dev/vscode-single-select/select-mode/autofocus-select.html      | 2 +-
 dev/vscode-single-select/select-mode/basic-example.html         | 2 +-
 dev/vscode-single-select/select-mode/default-empty.html         | 2 +-
 dev/vscode-single-select/select-mode/description.html           | 2 +-
 dev/vscode-single-select/select-mode/disabled-options.html      | 2 +-
 .../select-mode/dispatch-invalid-event.html                     | 2 +-
 dev/vscode-single-select/select-mode/element-value.html         | 2 +-
 dev/vscode-single-select/select-mode/empty-label.html           | 2 +-
 dev/vscode-single-select/select-mode/initial-form-value.html    | 2 +-
 dev/vscode-single-select/select-mode/issue-514.html             | 2 +-
 .../select-mode/large-list-within-collapsible.html              | 2 +-
 dev/vscode-single-select/select-mode/large-list.html            | 2 +-
 dev/vscode-single-select/select-mode/long-text.html             | 2 +-
 dev/vscode-single-select/select-mode/open-prop.html             | 2 +-
 .../select-mode/open-when-enter-key-pressed.html                | 2 +-
 .../select-mode/option-with-empty-value.html                    | 2 +-
 dev/vscode-single-select/select-mode/position-above.html        | 2 +-
 dev/vscode-single-select/select-mode/required-flag.html         | 2 +-
 dev/vscode-single-select/select-mode/scroll-demo.html           | 2 +-
 .../select-mode/scroll-to-the-selected-option.html              | 2 +-
 .../select-mode/set-empty-value-before-options.html             | 2 +-
 .../select-mode/set-value-before-options.html                   | 2 +-
 dev/vscode-single-select/select-mode/sync-options.html          | 2 +-
 dev/vscode-split-layout/csp.html                                | 2 +-
 dev/vscode-split-layout/default.html                            | 2 +-
 dev/vscode-split-layout/fallback-styles.html                    | 2 +-
 dev/vscode-split-layout/fluid.html                              | 2 +-
 dev/vscode-split-layout/horizontal.html                         | 2 +-
 dev/vscode-split-layout/min-size.html                           | 2 +-
 dev/vscode-split-layout/nested.html                             | 2 +-
 dev/vscode-split-layout/vertical.html                           | 2 +-
 dev/vscode-table/561-col-runtime-error.html                     | 2 +-
 dev/vscode-table/basic-example.html                             | 2 +-
 dev/vscode-table/collapsible-table.html                         | 2 +-
 dev/vscode-table/fallback-styles.html                           | 2 +-
 dev/vscode-table/issue-516.html                                 | 2 +-
 dev/vscode-table/other-examples.html                            | 2 +-
 dev/vscode-table/resizable.html                                 | 2 +-
 dev/vscode-table/resize-empty-table.html                        | 2 +-
 dev/vscode-table/scrollable-body-bug.html                       | 2 +-
 dev/vscode-table/scrollable-content.html                        | 2 +-
 dev/vscode-table/shift-table-columns.html                       | 2 +-
 dev/vscode-table/style-property-map-directive.html              | 2 +-
 dev/vscode-tabs/basic-example.html                              | 2 +-
 dev/vscode-tabs/fallback-styles.html                            | 2 +-
 dev/vscode-tabs/panel-style.html                                | 2 +-
 dev/vscode-textarea/a11y.html                                   | 2 +-
 dev/vscode-textarea/csp.html                                    | 2 +-
 dev/vscode-textfield/basic-example.html                         | 2 +-
 dev/vscode-textfield/events.html                                | 2 +-
 dev/vscode-textfield/fallback-styles.html                       | 2 +-
 dev/vscode-textfield/file-input.html                            | 2 +-
 dev/vscode-textfield/validation-min-validation.html             | 2 +-
 dev/vscode-textfield/validation-on-value-change.html            | 2 +-
 dev/vscode-toolbar-button/basic-example.html                    | 2 +-
 dev/vscode-toolbar-button/change-event.html                     | 2 +-
 dev/vscode-tree/basic-example.html                              | 2 +-
 dev/vscode-tree/custom-styles.html                              | 2 +-
 dev/vscode-tree/default-active-item.html                        | 2 +-
 dev/vscode-tree/double-click-expand-mode.html                   | 2 +-
 dev/vscode-tree/events.html                                     | 2 +-
 dev/vscode-tree/expand-all-collapse-all.html                    | 2 +-
 dev/vscode-tree/fallback-styles.html                            | 2 +-
 dev/vscode-tree/guides-has-arrows.html                          | 2 +-
 dev/vscode-tree/guides-wo-arrows.html                           | 2 +-
 dev/vscode-tree/hide-arrows.html                                | 2 +-
 dev/vscode-tree/hide-guides-and-arrows.html                     | 2 +-
 dev/vscode-tree/hide-guides.html                                | 2 +-
 dev/vscode-tree/multi-select.html                               | 2 +-
 dev/vscode-tree/oversized-icon.html                             | 2 +-
 dev/vscode-tree/problems-tree.html                              | 2 +-
 dev/vscode-tree/scm-tree.html                                   | 2 +-
 dev/vscode-tree/set-active-item.html                            | 2 +-
 dev/vscode-tree/stress-test.html                                | 2 +-
 dev/vscode-tree/with-icons.html                                 | 2 +-
 137 files changed, 137 insertions(+), 137 deletions(-)

diff --git a/dev/vscode-badge/basic-example.html b/dev/vscode-badge/basic-example.html
index 7810dbc93..e3a4c0003 100644
--- a/dev/vscode-badge/basic-example.html
+++ b/dev/vscode-badge/basic-example.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>VSCode Elements</title>
+    <title>badge/basic-example</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-badge/fallback-styles.html b/dev/vscode-badge/fallback-styles.html
index 8803cf7ef..0453b7afa 100644
--- a/dev/vscode-badge/fallback-styles.html
+++ b/dev/vscode-badge/fallback-styles.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>VSCode Elements</title>
+    <title>badge/fallback-styles</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-button-group/dropdown-menu.html b/dev/vscode-button-group/dropdown-menu.html
index d1c89ce7c..ad1a241b2 100644
--- a/dev/vscode-button-group/dropdown-menu.html
+++ b/dev/vscode-button-group/dropdown-menu.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>&lt;vscode-button-group&gt; Demo</title>
+    <title>button-group/dropdown-menu</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-button-group/vscode-button-group.html b/dev/vscode-button-group/vscode-button-group.html
index 6217d6628..81a1d93c4 100644
--- a/dev/vscode-button-group/vscode-button-group.html
+++ b/dev/vscode-button-group/vscode-button-group.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>&lt;vscode-button-group&gt; Demo</title>
+    <title>button-group/vscode-button-group</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-button/autofocus.html b/dev/vscode-button/autofocus.html
index 9bd3b168a..23e4dbfd8 100644
--- a/dev/vscode-button/autofocus.html
+++ b/dev/vscode-button/autofocus.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>VSCode Elements</title>
+    <title>button/autofocus</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-button/basic-examples.html b/dev/vscode-button/basic-examples.html
index ec9d87648..3ce57835c 100644
--- a/dev/vscode-button/basic-examples.html
+++ b/dev/vscode-button/basic-examples.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>VSCode Elements</title>
+    <title>button/basic-examples</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-button/block-button.html b/dev/vscode-button/block-button.html
index db4f04318..f56cc47b2 100644
--- a/dev/vscode-button/block-button.html
+++ b/dev/vscode-button/block-button.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>VSCode Elements</title>
+    <title>button/block-button</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-button/fallback-styles.html b/dev/vscode-button/fallback-styles.html
index 7deb996e7..df0599009 100644
--- a/dev/vscode-button/fallback-styles.html
+++ b/dev/vscode-button/fallback-styles.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>VSCode Elements</title>
+    <title>button/fallback-styles</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-button/icon-button.html b/dev/vscode-button/icon-button.html
index 4195817f5..80990c04e 100644
--- a/dev/vscode-button/icon-button.html
+++ b/dev/vscode-button/icon-button.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>VSCode Elements</title>
+    <title>button/icon-button</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-button/reset.html b/dev/vscode-button/reset.html
index 133dce3a4..ecb07fdda 100644
--- a/dev/vscode-button/reset.html
+++ b/dev/vscode-button/reset.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>VSCode Elements</title>
+    <title>button/reset</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-button/slots.html b/dev/vscode-button/slots.html
index 6031200c6..b42b0834c 100644
--- a/dev/vscode-button/slots.html
+++ b/dev/vscode-button/slots.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>VSCode Elements</title>
+    <title>button/slots</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-button/submit.html b/dev/vscode-button/submit.html
index a844d0c11..09727e71c 100644
--- a/dev/vscode-button/submit.html
+++ b/dev/vscode-button/submit.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>VSCode Elements</title>
+    <title>button/submit</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-button/variations.html b/dev/vscode-button/variations.html
index ff7693568..2d4bfa1c0 100644
--- a/dev/vscode-button/variations.html
+++ b/dev/vscode-button/variations.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>VSCode Elements</title>
+    <title>button/variations</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-checkbox/basic-example.html b/dev/vscode-checkbox/basic-example.html
index 6e6d76d19..570ce0a2a 100644
--- a/dev/vscode-checkbox/basic-example.html
+++ b/dev/vscode-checkbox/basic-example.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-    <title>VSCode Webview Elements demo page</title>
+    <title>checkbox/basic-example</title>
     <script
       type="module"
       src="/node_modules/@vscode-elements/webview-playground/dist/index.js"
diff --git a/dev/vscode-checkbox/fallback-styles.html b/dev/vscode-checkbox/fallback-styles.html
index 3e22c6816..f7a9a4bca 100644
--- a/dev/vscode-checkbox/fallback-styles.html
+++ b/dev/vscode-checkbox/fallback-styles.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>VSCode Elements</title>
+    <title>checkbox/fallback-styles</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-checkbox/group.html b/dev/vscode-checkbox/group.html
index f2d20da83..07569eb94 100644
--- a/dev/vscode-checkbox/group.html
+++ b/dev/vscode-checkbox/group.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Checkbox</title>
+    <title>checkbox/group</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-checkbox/toggle.html b/dev/vscode-checkbox/toggle.html
index 7d1becae8..d65d9ca42 100644
--- a/dev/vscode-checkbox/toggle.html
+++ b/dev/vscode-checkbox/toggle.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-    <title>VSCode Webview Elements — Checkbox Toggle Demo</title>
+    <title>checkbox/toggle</title>
     <script
       type="module"
       src="/node_modules/@vscode-elements/webview-playground/dist/index.js"
diff --git a/dev/vscode-checkbox/validate-checked.html b/dev/vscode-checkbox/validate-checked.html
index b3a9abb63..15dfeaeae 100644
--- a/dev/vscode-checkbox/validate-checked.html
+++ b/dev/vscode-checkbox/validate-checked.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-    <title>VSCode Webview Elements demo page</title>
+    <title>checkbox/validate-checked</title>
     <script
       type="module"
       src="/node_modules/@vscode-elements/webview-playground/dist/index.js"
diff --git a/dev/vscode-collapsible/actions-stop-propagation.html b/dev/vscode-collapsible/actions-stop-propagation.html
index 4584b4605..115e6e418 100644
--- a/dev/vscode-collapsible/actions-stop-propagation.html
+++ b/dev/vscode-collapsible/actions-stop-propagation.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>VSCode Elements</title>
+    <title>collapsible/actions-stop-propagation</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-collapsible/always-show-header-actions.html b/dev/vscode-collapsible/always-show-header-actions.html
index ccccf3f69..c22745297 100644
--- a/dev/vscode-collapsible/always-show-header-actions.html
+++ b/dev/vscode-collapsible/always-show-header-actions.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>VSCode Elements</title>
+    <title>collapsible/always-show-header-actions</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-collapsible/vscode-collapsible.html b/dev/vscode-collapsible/vscode-collapsible.html
index 4e1e46ea4..dd4d3a0fb 100644
--- a/dev/vscode-collapsible/vscode-collapsible.html
+++ b/dev/vscode-collapsible/vscode-collapsible.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>VSCode Elements</title>
+    <title>collapsible/vscode-collapsible</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-context-menu/basic-example.html b/dev/vscode-context-menu/basic-example.html
index de709e3a2..ef51d971a 100644
--- a/dev/vscode-context-menu/basic-example.html
+++ b/dev/vscode-context-menu/basic-example.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Context Menu</title>
+    <title>context-menu/basic-example</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-context-menu/fallback-styles.html b/dev/vscode-context-menu/fallback-styles.html
index 1c48bc5fc..b42f86b59 100644
--- a/dev/vscode-context-menu/fallback-styles.html
+++ b/dev/vscode-context-menu/fallback-styles.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>VSCode Elements</title>
+    <title>context-menu/fallback-styles</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-divider/basic-example.html b/dev/vscode-divider/basic-example.html
index b1d66d7d7..870b36b8e 100644
--- a/dev/vscode-divider/basic-example.html
+++ b/dev/vscode-divider/basic-example.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>VSCode Elements</title>
+    <title>divider/basic-example</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-divider/fallback-styles.html b/dev/vscode-divider/fallback-styles.html
index fe2a8160f..34e6bc37d 100644
--- a/dev/vscode-divider/fallback-styles.html
+++ b/dev/vscode-divider/fallback-styles.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>VSCode Elements</title>
+    <title>divider/fallback-styles</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-form-helper/csp.html b/dev/vscode-form-helper/csp.html
index 4ffa13003..5107f7911 100644
--- a/dev/vscode-form-helper/csp.html
+++ b/dev/vscode-form-helper/csp.html
@@ -15,7 +15,7 @@
         connect-src ws://localhost:8000/wds
       "
     />
-    <title>VSCode Elements</title>
+    <title>form-helper/csp</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-icon/fallback-styles.html b/dev/vscode-icon/fallback-styles.html
index 6f39d6565..eccd7b816 100644
--- a/dev/vscode-icon/fallback-styles.html
+++ b/dev/vscode-icon/fallback-styles.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>VSCode Elements</title>
+    <title>icon/fallback-styles</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-icon/missing-codicon-css.html b/dev/vscode-icon/missing-codicon-css.html
index fc152fa03..aae50f237 100644
--- a/dev/vscode-icon/missing-codicon-css.html
+++ b/dev/vscode-icon/missing-codicon-css.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>VSCode Elements</title>
+    <title>icon/missing-codicon-css</title>
     <script
       type="module"
       src="/node_modules/@vscode-elements/webview-playground/dist/index.js"
diff --git a/dev/vscode-icon/nonce.html b/dev/vscode-icon/nonce.html
index ad614789b..ff14eab9c 100644
--- a/dev/vscode-icon/nonce.html
+++ b/dev/vscode-icon/nonce.html
@@ -7,7 +7,7 @@
       http-equiv="Content-Security-Policy"
       content="default-src 'none'; script-src 'nonce-abc123'; script-src-elem 'nonce-abc123'; font-src 'self' data: 'nonce-abc123'; style-src-elem 'nonce-abc123'"
     />
-    <title>VSCode Elements</title>
+    <title>icon/nonce</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-label/basic-example.html b/dev/vscode-label/basic-example.html
index dde7add51..1f71e18a5 100644
--- a/dev/vscode-label/basic-example.html
+++ b/dev/vscode-label/basic-example.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>VSCode Elements</title>
+    <title>label/basic-example</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-multi-select/a11y-combobox.html b/dev/vscode-multi-select/a11y-combobox.html
index 2f9016588..969d849d8 100644
--- a/dev/vscode-multi-select/a11y-combobox.html
+++ b/dev/vscode-multi-select/a11y-combobox.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>VSCode Elements</title>
+    <title>multi-select/a11y-combobox</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-multi-select/a11y-select.html b/dev/vscode-multi-select/a11y-select.html
index 070ce670f..3ae9e73d2 100644
--- a/dev/vscode-multi-select/a11y-select.html
+++ b/dev/vscode-multi-select/a11y-select.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>VSCode Elements</title>
+    <title>multi-select/a11y-select</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-multi-select/autofocus-combobox.html b/dev/vscode-multi-select/autofocus-combobox.html
index 7558c7215..c43003386 100644
--- a/dev/vscode-multi-select/autofocus-combobox.html
+++ b/dev/vscode-multi-select/autofocus-combobox.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>multi combo</title>
+    <title>multi-select/autofocus-combobox</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-multi-select/autofocus-select.html b/dev/vscode-multi-select/autofocus-select.html
index a47fdb739..b46300a05 100644
--- a/dev/vscode-multi-select/autofocus-select.html
+++ b/dev/vscode-multi-select/autofocus-select.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>multi select</title>
+    <title>multi-select/autofocus-select</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-multi-select/combobox-suggestion-mode.html b/dev/vscode-multi-select/combobox-suggestion-mode.html
index c979ced04..ebbffc556 100644
--- a/dev/vscode-multi-select/combobox-suggestion-mode.html
+++ b/dev/vscode-multi-select/combobox-suggestion-mode.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>VSCode Elements</title>
+    <title>multi-select/combobox-suggestion-mode</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-multi-select/combobox.html b/dev/vscode-multi-select/combobox.html
index 0da6d4d5c..437fe5aa8 100644
--- a/dev/vscode-multi-select/combobox.html
+++ b/dev/vscode-multi-select/combobox.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>VSCode Elements</title>
+    <title>multi-select/combobox</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-multi-select/events.html b/dev/vscode-multi-select/events.html
index 9db286b5a..323d65321 100644
--- a/dev/vscode-multi-select/events.html
+++ b/dev/vscode-multi-select/events.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>MultiSelect</title>
+    <title>multi-select/events</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-multi-select/fallback-styles.html b/dev/vscode-multi-select/fallback-styles.html
index 601bc4022..83480c744 100644
--- a/dev/vscode-multi-select/fallback-styles.html
+++ b/dev/vscode-multi-select/fallback-styles.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>VSCode Elements</title>
+    <title>multi-select/fallback-styles</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-multi-select/issue-510.html b/dev/vscode-multi-select/issue-510.html
index c743f69c8..450f037f1 100644
--- a/dev/vscode-multi-select/issue-510.html
+++ b/dev/vscode-multi-select/issue-510.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>multi combo</title>
+    <title>multi-select/issue-510</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-multi-select/long-text.html b/dev/vscode-multi-select/long-text.html
index 3791d1465..74085084d 100644
--- a/dev/vscode-multi-select/long-text.html
+++ b/dev/vscode-multi-select/long-text.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>multi select</title>
+    <title>multi-select/long-text</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-multi-select/open-prop.html b/dev/vscode-multi-select/open-prop.html
index a9367d371..b039c2aa0 100644
--- a/dev/vscode-multi-select/open-prop.html
+++ b/dev/vscode-multi-select/open-prop.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>VSCode Elements</title>
+    <title>multi-select/open-prop</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-multi-select/set-option.html b/dev/vscode-multi-select/set-option.html
index 75fbe377b..38845e47f 100644
--- a/dev/vscode-multi-select/set-option.html
+++ b/dev/vscode-multi-select/set-option.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Multi Select</title>
+    <title>multi-select/set-option</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-multi-select/set-value-before-options.html b/dev/vscode-multi-select/set-value-before-options.html
index 50707454f..6f22d6979 100644
--- a/dev/vscode-multi-select/set-value-before-options.html
+++ b/dev/vscode-multi-select/set-value-before-options.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Select</title>
+    <title>multi-select/set-value-before-options</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-multi-select/sync-options.html b/dev/vscode-multi-select/sync-options.html
index 7eb6a9c46..f0e009697 100644
--- a/dev/vscode-multi-select/sync-options.html
+++ b/dev/vscode-multi-select/sync-options.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>VSCode Elements</title>
+    <title>multi-select/sync-options</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-progress-bar/basic-example.html b/dev/vscode-progress-bar/basic-example.html
index 51ba11e37..c958821ce 100644
--- a/dev/vscode-progress-bar/basic-example.html
+++ b/dev/vscode-progress-bar/basic-example.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>&lt;vscode-progress-bar&gt; Demo</title>
+    <title>progress-bar/basic-example</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-progress-bar/fallback-styles.html b/dev/vscode-progress-bar/fallback-styles.html
index 01e26ce25..ad638f786 100644
--- a/dev/vscode-progress-bar/fallback-styles.html
+++ b/dev/vscode-progress-bar/fallback-styles.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>VSCode Elements</title>
+    <title>progress-bar/fallback-styles</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-progress-ring/fallback-styles.html b/dev/vscode-progress-ring/fallback-styles.html
index f07181818..93bc2fa90 100644
--- a/dev/vscode-progress-ring/fallback-styles.html
+++ b/dev/vscode-progress-ring/fallback-styles.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>VSCode Elements</title>
+    <title>progress-ring/fallback-styles</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-radio-group/checked.html b/dev/vscode-radio-group/checked.html
index 790f04876..868798066 100644
--- a/dev/vscode-radio-group/checked.html
+++ b/dev/vscode-radio-group/checked.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>VSCode Elements</title>
+    <title>radio-group/checked</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-radio-group/default-checked.html b/dev/vscode-radio-group/default-checked.html
index 7061baf88..5d34e55cb 100644
--- a/dev/vscode-radio-group/default-checked.html
+++ b/dev/vscode-radio-group/default-checked.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>VSCode Elements</title>
+    <title>radio-group/default-checked</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-radio-group/issue-511.html b/dev/vscode-radio-group/issue-511.html
index cdb98a874..e9e545be0 100644
--- a/dev/vscode-radio-group/issue-511.html
+++ b/dev/vscode-radio-group/issue-511.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>VSCode Elements</title>
+    <title>radio-group/issue-511</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-radio/fallback-styles.html b/dev/vscode-radio/fallback-styles.html
index 3eabde486..249cbf5a5 100644
--- a/dev/vscode-radio/fallback-styles.html
+++ b/dev/vscode-radio/fallback-styles.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>VSCode Elements</title>
+    <title>radio/fallback-styles</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-scrollable/always-visible.html b/dev/vscode-scrollable/always-visible.html
index cb87674e0..1a39a3eb3 100644
--- a/dev/vscode-scrollable/always-visible.html
+++ b/dev/vscode-scrollable/always-visible.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>VSCode Elements</title>
+    <title>scrollable/always-visible</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-scrollable/change-event.html b/dev/vscode-scrollable/change-event.html
index b52b5cccc..542ef7f1b 100644
--- a/dev/vscode-scrollable/change-event.html
+++ b/dev/vscode-scrollable/change-event.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>VSCode Elements</title>
+    <title>scrollable/change-event</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-scrollable/csp.html b/dev/vscode-scrollable/csp.html
index d9f860dd7..5bdec4e0e 100644
--- a/dev/vscode-scrollable/csp.html
+++ b/dev/vscode-scrollable/csp.html
@@ -7,7 +7,7 @@
       http-equiv="Content-Security-Policy"
       content="default-src 'none'; script-src 'nonce-abc123'; script-src-elem 'nonce-abc123'; font-src 'self' data: 'nonce-abc123'; style-src 'nonce-abc123'; style-src-elem 'nonce-abc123'"
     />
-    <title>VSCode Elements</title>
+    <title>scrollable/csp</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-scrollable/fallback-styles.html b/dev/vscode-scrollable/fallback-styles.html
index 588ce1ae7..5d8f27bc7 100644
--- a/dev/vscode-scrollable/fallback-styles.html
+++ b/dev/vscode-scrollable/fallback-styles.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>VSCode Elements</title>
+    <title>scrollable/fallback-styles</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-single-select/combobox-mode/a11y.html b/dev/vscode-single-select/combobox-mode/a11y.html
index 8176037dc..5ed8f0e8c 100644
--- a/dev/vscode-single-select/combobox-mode/a11y.html
+++ b/dev/vscode-single-select/combobox-mode/a11y.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>VSCode Elements</title>
+    <title>single-select/combobox-mode/a11y</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-single-select/combobox-mode/autofocus-combobox.html b/dev/vscode-single-select/combobox-mode/autofocus-combobox.html
index cd8949541..c15f90aad 100644
--- a/dev/vscode-single-select/combobox-mode/autofocus-combobox.html
+++ b/dev/vscode-single-select/combobox-mode/autofocus-combobox.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>single combo</title>
+    <title>single-select/combobox-mode/autofocus-combobox</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-single-select/combobox-mode/combobox-suggestion-mode.html b/dev/vscode-single-select/combobox-mode/combobox-suggestion-mode.html
index 2055a88de..be530fc7d 100644
--- a/dev/vscode-single-select/combobox-mode/combobox-suggestion-mode.html
+++ b/dev/vscode-single-select/combobox-mode/combobox-suggestion-mode.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>VSCode Elements</title>
+    <title>single-select/combobox-mode/combobox-suggestion-mode</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-single-select/combobox-mode/combobox.html b/dev/vscode-single-select/combobox-mode/combobox.html
index c5c619cdb..10ff8308f 100644
--- a/dev/vscode-single-select/combobox-mode/combobox.html
+++ b/dev/vscode-single-select/combobox-mode/combobox.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>VSCode Elements</title>
+    <title>single-select/combobox-mode/combobox</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-single-select/combobox-mode/deleting-value.html b/dev/vscode-single-select/combobox-mode/deleting-value.html
index ebfc671b9..c1f649be2 100644
--- a/dev/vscode-single-select/combobox-mode/deleting-value.html
+++ b/dev/vscode-single-select/combobox-mode/deleting-value.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>VSCode Elements</title>
+    <title>single-select/combobox-mode/deleting-value</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-single-select/issue-530.html b/dev/vscode-single-select/issue-530.html
index 101af82b7..bfb9954c5 100644
--- a/dev/vscode-single-select/issue-530.html
+++ b/dev/vscode-single-select/issue-530.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>vscode-single-select stale index repro</title>
+    <title>single-select/issue-530</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-single-select/select-mode/a11y.html b/dev/vscode-single-select/select-mode/a11y.html
index 2e22eb96d..d9ba3ec4f 100644
--- a/dev/vscode-single-select/select-mode/a11y.html
+++ b/dev/vscode-single-select/select-mode/a11y.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>VSCode Elements</title>
+    <title>single-select/select-mode/a11y</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-single-select/select-mode/autofocus-select.html b/dev/vscode-single-select/select-mode/autofocus-select.html
index fdd1f1b5a..c2b6b1d4d 100644
--- a/dev/vscode-single-select/select-mode/autofocus-select.html
+++ b/dev/vscode-single-select/select-mode/autofocus-select.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>single select</title>
+    <title>single-select/select-mode/autofocus-select</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-single-select/select-mode/basic-example.html b/dev/vscode-single-select/select-mode/basic-example.html
index 2af773a19..4f11055aa 100644
--- a/dev/vscode-single-select/select-mode/basic-example.html
+++ b/dev/vscode-single-select/select-mode/basic-example.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>VSCode Elements</title>
+    <title>single-select/select-mode/basic-example</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-single-select/select-mode/default-empty.html b/dev/vscode-single-select/select-mode/default-empty.html
index 24f5967f7..122c8d01b 100644
--- a/dev/vscode-single-select/select-mode/default-empty.html
+++ b/dev/vscode-single-select/select-mode/default-empty.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Select</title>
+    <title>single-select/select-mode/default-empty</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-single-select/select-mode/description.html b/dev/vscode-single-select/select-mode/description.html
index fc152d6f0..d8c9a48c7 100644
--- a/dev/vscode-single-select/select-mode/description.html
+++ b/dev/vscode-single-select/select-mode/description.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Single Select</title>
+    <title>single-select/select-mode/description</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-single-select/select-mode/disabled-options.html b/dev/vscode-single-select/select-mode/disabled-options.html
index a0c0754c8..d5a7b7bda 100644
--- a/dev/vscode-single-select/select-mode/disabled-options.html
+++ b/dev/vscode-single-select/select-mode/disabled-options.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>VSCode Elements</title>
+    <title>single-select/select-mode/disabled-options</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-single-select/select-mode/dispatch-invalid-event.html b/dev/vscode-single-select/select-mode/dispatch-invalid-event.html
index e746f5e98..1f0abd8b8 100644
--- a/dev/vscode-single-select/select-mode/dispatch-invalid-event.html
+++ b/dev/vscode-single-select/select-mode/dispatch-invalid-event.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Single Select</title>
+    <title>single-select/select-mode/dispatch-invalid-event</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-single-select/select-mode/element-value.html b/dev/vscode-single-select/select-mode/element-value.html
index 0a1ddaaf6..f5c6a6077 100644
--- a/dev/vscode-single-select/select-mode/element-value.html
+++ b/dev/vscode-single-select/select-mode/element-value.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-    <title>&lt;vscode-single-select&gt; Demo</title>
+    <title>single-select/select-mode/element-value</title>
     <script
       type="module"
       src="/node_modules/@vscode-elements/webview-playground/dist/index.js"
diff --git a/dev/vscode-single-select/select-mode/empty-label.html b/dev/vscode-single-select/select-mode/empty-label.html
index f7725e0fb..7e7d2bf3f 100644
--- a/dev/vscode-single-select/select-mode/empty-label.html
+++ b/dev/vscode-single-select/select-mode/empty-label.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Single Select</title>
+    <title>single-select/select-mode/empty-label</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-single-select/select-mode/initial-form-value.html b/dev/vscode-single-select/select-mode/initial-form-value.html
index d47df28c6..8d6976c5f 100644
--- a/dev/vscode-single-select/select-mode/initial-form-value.html
+++ b/dev/vscode-single-select/select-mode/initial-form-value.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-    <title>&lt;vscode-single-select&gt; Demo</title>
+    <title>single-select/select-mode/initial-form-value</title>
     <script
       type="module"
       src="/node_modules/@vscode-elements/webview-playground/dist/index.js"
diff --git a/dev/vscode-single-select/select-mode/issue-514.html b/dev/vscode-single-select/select-mode/issue-514.html
index 21f44d586..fe9a45da4 100644
--- a/dev/vscode-single-select/select-mode/issue-514.html
+++ b/dev/vscode-single-select/select-mode/issue-514.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>VSCode Elements</title>
+    <title>single-select/select-mode/issue-514</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-single-select/select-mode/large-list-within-collapsible.html b/dev/vscode-single-select/select-mode/large-list-within-collapsible.html
index d4a64c573..e0e521d60 100644
--- a/dev/vscode-single-select/select-mode/large-list-within-collapsible.html
+++ b/dev/vscode-single-select/select-mode/large-list-within-collapsible.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>VSCode Elements</title>
+    <title>single-select/select-mode/large-list-within-collapsible</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-single-select/select-mode/large-list.html b/dev/vscode-single-select/select-mode/large-list.html
index 2b083647e..e9c097ffc 100644
--- a/dev/vscode-single-select/select-mode/large-list.html
+++ b/dev/vscode-single-select/select-mode/large-list.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>VSCode Elements</title>
+    <title>single-select/select-mode/large-list</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-single-select/select-mode/long-text.html b/dev/vscode-single-select/select-mode/long-text.html
index ef91b1179..548f05265 100644
--- a/dev/vscode-single-select/select-mode/long-text.html
+++ b/dev/vscode-single-select/select-mode/long-text.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>VSCode Elements</title>
+    <title>single-select/select-mode/long-text</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-single-select/select-mode/open-prop.html b/dev/vscode-single-select/select-mode/open-prop.html
index c3ed2ac96..c309be94c 100644
--- a/dev/vscode-single-select/select-mode/open-prop.html
+++ b/dev/vscode-single-select/select-mode/open-prop.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>VSCode Elements</title>
+    <title>single-select/select-mode/open-prop</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-single-select/select-mode/open-when-enter-key-pressed.html b/dev/vscode-single-select/select-mode/open-when-enter-key-pressed.html
index 78bbc8748..1d0c0636b 100644
--- a/dev/vscode-single-select/select-mode/open-when-enter-key-pressed.html
+++ b/dev/vscode-single-select/select-mode/open-when-enter-key-pressed.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Select</title>
+    <title>single-select/select-mode/open-when-enter-key-pressed</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-single-select/select-mode/option-with-empty-value.html b/dev/vscode-single-select/select-mode/option-with-empty-value.html
index 4823432df..a2e5c252c 100644
--- a/dev/vscode-single-select/select-mode/option-with-empty-value.html
+++ b/dev/vscode-single-select/select-mode/option-with-empty-value.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>VSCode Elements</title>
+    <title>single-select/select-mode/option-with-empty-value</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-single-select/select-mode/position-above.html b/dev/vscode-single-select/select-mode/position-above.html
index 43df2b597..f73e38325 100644
--- a/dev/vscode-single-select/select-mode/position-above.html
+++ b/dev/vscode-single-select/select-mode/position-above.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>VSCode Elements</title>
+    <title>single-select/select-mode/position-above</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-single-select/select-mode/required-flag.html b/dev/vscode-single-select/select-mode/required-flag.html
index 43f236d50..facb704bf 100644
--- a/dev/vscode-single-select/select-mode/required-flag.html
+++ b/dev/vscode-single-select/select-mode/required-flag.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Required</title>
+    <title>single-select/select-mode/required-flag</title>
     <script
       type="module"
       src="/node_modules/@vscode-elements/webview-playground/dist/index.js"
diff --git a/dev/vscode-single-select/select-mode/scroll-demo.html b/dev/vscode-single-select/select-mode/scroll-demo.html
index d28a168b9..72badf972 100644
--- a/dev/vscode-single-select/select-mode/scroll-demo.html
+++ b/dev/vscode-single-select/select-mode/scroll-demo.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>VSCode Elements</title>
+    <title>single-select/select-mode/scroll-demo</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-single-select/select-mode/scroll-to-the-selected-option.html b/dev/vscode-single-select/select-mode/scroll-to-the-selected-option.html
index 80f7d40a8..714a3f181 100644
--- a/dev/vscode-single-select/select-mode/scroll-to-the-selected-option.html
+++ b/dev/vscode-single-select/select-mode/scroll-to-the-selected-option.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>VSCode Elements</title>
+    <title>single-select/select-mode/scroll-to-the-selected-option</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-single-select/select-mode/set-empty-value-before-options.html b/dev/vscode-single-select/select-mode/set-empty-value-before-options.html
index e4c84fe02..124ff68ae 100644
--- a/dev/vscode-single-select/select-mode/set-empty-value-before-options.html
+++ b/dev/vscode-single-select/select-mode/set-empty-value-before-options.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Select</title>
+    <title>single-select/select-mode/set-empty-value-before-options</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-single-select/select-mode/set-value-before-options.html b/dev/vscode-single-select/select-mode/set-value-before-options.html
index 48660ac12..51d5eb5be 100644
--- a/dev/vscode-single-select/select-mode/set-value-before-options.html
+++ b/dev/vscode-single-select/select-mode/set-value-before-options.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Select</title>
+    <title>single-select/select-mode/set-value-before-options</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-single-select/select-mode/sync-options.html b/dev/vscode-single-select/select-mode/sync-options.html
index f5c015d55..41013df8d 100644
--- a/dev/vscode-single-select/select-mode/sync-options.html
+++ b/dev/vscode-single-select/select-mode/sync-options.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>VSCode Elements</title>
+    <title>single-select/select-mode/sync-options</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-split-layout/csp.html b/dev/vscode-split-layout/csp.html
index 4c41aa8c0..ad2ad9633 100644
--- a/dev/vscode-split-layout/csp.html
+++ b/dev/vscode-split-layout/csp.html
@@ -14,7 +14,7 @@
         style-src 'nonce-abc123';
         style-src-elem 'nonce-abc123'"
     />
-    <title>VSCode Elements</title>
+    <title>split-layout/csp</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-split-layout/default.html b/dev/vscode-split-layout/default.html
index ab03e0a3e..a49da7fc1 100644
--- a/dev/vscode-split-layout/default.html
+++ b/dev/vscode-split-layout/default.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Split Layout</title>
+    <title>split-layout/default</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-split-layout/fallback-styles.html b/dev/vscode-split-layout/fallback-styles.html
index 051bf9f48..39dcb7ca6 100644
--- a/dev/vscode-split-layout/fallback-styles.html
+++ b/dev/vscode-split-layout/fallback-styles.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Split Layout</title>
+    <title>split-layout/fallback-styles</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-split-layout/fluid.html b/dev/vscode-split-layout/fluid.html
index 493a0a329..8d7c4fa41 100644
--- a/dev/vscode-split-layout/fluid.html
+++ b/dev/vscode-split-layout/fluid.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Split Layout</title>
+    <title>split-layout/fluid</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-split-layout/horizontal.html b/dev/vscode-split-layout/horizontal.html
index cf781ec63..89eb7e100 100644
--- a/dev/vscode-split-layout/horizontal.html
+++ b/dev/vscode-split-layout/horizontal.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Split Layout</title>
+    <title>split-layout/horizontal</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-split-layout/min-size.html b/dev/vscode-split-layout/min-size.html
index fb8b833f7..7e08deb0a 100644
--- a/dev/vscode-split-layout/min-size.html
+++ b/dev/vscode-split-layout/min-size.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Split Layout - Min Size</title>
+    <title>split-layout/min-size</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-split-layout/nested.html b/dev/vscode-split-layout/nested.html
index 4e395704f..0a215b734 100644
--- a/dev/vscode-split-layout/nested.html
+++ b/dev/vscode-split-layout/nested.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Split Layout</title>
+    <title>split-layout/nested</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-split-layout/vertical.html b/dev/vscode-split-layout/vertical.html
index 065cc36a6..6eb045602 100644
--- a/dev/vscode-split-layout/vertical.html
+++ b/dev/vscode-split-layout/vertical.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Split Layout</title>
+    <title>split-layout/vertical</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-table/561-col-runtime-error.html b/dev/vscode-table/561-col-runtime-error.html
index 0d60bf326..57de2d7f0 100644
--- a/dev/vscode-table/561-col-runtime-error.html
+++ b/dev/vscode-table/561-col-runtime-error.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>VSCode Elements</title>
+    <title>table/561-col-runtime-error</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-table/basic-example.html b/dev/vscode-table/basic-example.html
index b11110f70..90acb785c 100644
--- a/dev/vscode-table/basic-example.html
+++ b/dev/vscode-table/basic-example.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>VSCode Elements</title>
+    <title>table/basic-example</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-table/collapsible-table.html b/dev/vscode-table/collapsible-table.html
index d6b737a9f..8ce8d4354 100644
--- a/dev/vscode-table/collapsible-table.html
+++ b/dev/vscode-table/collapsible-table.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-    <title>&lt;vscode-table&gt; Demo</title>
+    <title>table/collapsible-table</title>
     <link rel="stylesheet" href="/dev-assets/default-webview-styles.css" />
     <script type="module" src="/dev-assets/component-preview.js"></script>
     <script type="module" src="/dist/vscode-split-layout/index.js"></script>
diff --git a/dev/vscode-table/fallback-styles.html b/dev/vscode-table/fallback-styles.html
index 1841a9453..0b0803d3f 100644
--- a/dev/vscode-table/fallback-styles.html
+++ b/dev/vscode-table/fallback-styles.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>VSCode Elements</title>
+    <title>table/fallback-styles</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-table/issue-516.html b/dev/vscode-table/issue-516.html
index fc6fb353f..23e288b7e 100644
--- a/dev/vscode-table/issue-516.html
+++ b/dev/vscode-table/issue-516.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>VSCode Elements</title>
+    <title>table/issue-516</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-table/other-examples.html b/dev/vscode-table/other-examples.html
index cb40dfe16..418528452 100644
--- a/dev/vscode-table/other-examples.html
+++ b/dev/vscode-table/other-examples.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-    <title>&lt;vscode-table&gt; Demo</title>
+    <title>table/other-examples</title>
     <link rel="stylesheet" href="../dev-assets/default-webview-styles.css" />
     <script type="module" src="../dev-assets/component-preview.js"></script>
     <script type="module" src="../dist/vscode-split-layout/index.js"></script>
diff --git a/dev/vscode-table/resizable.html b/dev/vscode-table/resizable.html
index fe776b46a..0e7428ca3 100644
--- a/dev/vscode-table/resizable.html
+++ b/dev/vscode-table/resizable.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>VSCode Elements</title>
+    <title>table/resizable</title>
     <meta
       http-equiv="Content-Security-Policy"
       content="
diff --git a/dev/vscode-table/resize-empty-table.html b/dev/vscode-table/resize-empty-table.html
index 0c7855cb3..1e58bf564 100644
--- a/dev/vscode-table/resize-empty-table.html
+++ b/dev/vscode-table/resize-empty-table.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>VSCode Elements</title>
+    <title>table/resize-empty-table</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-table/scrollable-body-bug.html b/dev/vscode-table/scrollable-body-bug.html
index 3b46cbd5a..9c93b394c 100644
--- a/dev/vscode-table/scrollable-body-bug.html
+++ b/dev/vscode-table/scrollable-body-bug.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>VSCode Elements</title>
+    <title>table/scrollable-body-bug</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-table/scrollable-content.html b/dev/vscode-table/scrollable-content.html
index d03e94605..cc15d665b 100644
--- a/dev/vscode-table/scrollable-content.html
+++ b/dev/vscode-table/scrollable-content.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-    <title>&lt;vscode-table&gt; Demo</title>
+    <title>table/scrollable-content</title>
     <link rel="stylesheet" href="/dev-assets/default-webview-styles.css" />
     <script type="module" src="/dev-assets/component-preview.js"></script>
     <script type="module" src="/dist/vscode-split-layout/index.js"></script>
diff --git a/dev/vscode-table/shift-table-columns.html b/dev/vscode-table/shift-table-columns.html
index 72844098f..196192c22 100644
--- a/dev/vscode-table/shift-table-columns.html
+++ b/dev/vscode-table/shift-table-columns.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>VSCode Elements</title>
+    <title>table/shift-table-columns</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-table/style-property-map-directive.html b/dev/vscode-table/style-property-map-directive.html
index 131d098d1..40b465835 100644
--- a/dev/vscode-table/style-property-map-directive.html
+++ b/dev/vscode-table/style-property-map-directive.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>VSCode Elements</title>
+    <title>table/style-property-map-directive</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-tabs/basic-example.html b/dev/vscode-tabs/basic-example.html
index ce7f6b3f1..1289df5fb 100644
--- a/dev/vscode-tabs/basic-example.html
+++ b/dev/vscode-tabs/basic-example.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>VSCode Elements</title>
+    <title>tabs/basic-example</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-tabs/fallback-styles.html b/dev/vscode-tabs/fallback-styles.html
index eeb9de033..a8f77fba4 100644
--- a/dev/vscode-tabs/fallback-styles.html
+++ b/dev/vscode-tabs/fallback-styles.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>VSCode Elements</title>
+    <title>tabs/fallback-styles</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-tabs/panel-style.html b/dev/vscode-tabs/panel-style.html
index c239851c3..3135390ba 100644
--- a/dev/vscode-tabs/panel-style.html
+++ b/dev/vscode-tabs/panel-style.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>VSCode Elements</title>
+    <title>tabs/panel-style</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-textarea/a11y.html b/dev/vscode-textarea/a11y.html
index d752e591b..6403138e2 100644
--- a/dev/vscode-textarea/a11y.html
+++ b/dev/vscode-textarea/a11y.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>VSCode Elements</title>
+    <title>textarea/a11y</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-textarea/csp.html b/dev/vscode-textarea/csp.html
index 68f45ba1c..ff55bfded 100644
--- a/dev/vscode-textarea/csp.html
+++ b/dev/vscode-textarea/csp.html
@@ -14,7 +14,7 @@
         style-src 'nonce-abc123';
         style-src-elem 'nonce-abc123'"
     />
-    <title>VSCode Elements</title>
+    <title>textarea/csp</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-textfield/basic-example.html b/dev/vscode-textfield/basic-example.html
index 7f3445744..6dfb3439f 100644
--- a/dev/vscode-textfield/basic-example.html
+++ b/dev/vscode-textfield/basic-example.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>&lt;vscode-textfield&gt; Demo</title>
+    <title>textfield/basic-example</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-textfield/events.html b/dev/vscode-textfield/events.html
index 07dee9339..641f092b6 100644
--- a/dev/vscode-textfield/events.html
+++ b/dev/vscode-textfield/events.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Textfield</title>
+    <title>textfield/events</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-textfield/fallback-styles.html b/dev/vscode-textfield/fallback-styles.html
index a8d21383c..09f4401dc 100644
--- a/dev/vscode-textfield/fallback-styles.html
+++ b/dev/vscode-textfield/fallback-styles.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>VSCode Elements</title>
+    <title>textfield/fallback-styles</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-textfield/file-input.html b/dev/vscode-textfield/file-input.html
index ba06c5822..aba71cf50 100644
--- a/dev/vscode-textfield/file-input.html
+++ b/dev/vscode-textfield/file-input.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>&lt;vscode-textfield&gt; Demo</title>
+    <title>textfield/file-input</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-textfield/validation-min-validation.html b/dev/vscode-textfield/validation-min-validation.html
index df6ada7d3..7f86dd082 100644
--- a/dev/vscode-textfield/validation-min-validation.html
+++ b/dev/vscode-textfield/validation-min-validation.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>&lt;vscode-textfield&gt; Demo</title>
+    <title>textfield/validation-min-validation</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-textfield/validation-on-value-change.html b/dev/vscode-textfield/validation-on-value-change.html
index 6a8e1cf58..2c3afaaa9 100644
--- a/dev/vscode-textfield/validation-on-value-change.html
+++ b/dev/vscode-textfield/validation-on-value-change.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>&lt;vscode-textfield&gt; Demo</title>
+    <title>textfield/validation-on-value-change</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-toolbar-button/basic-example.html b/dev/vscode-toolbar-button/basic-example.html
index 08a3f9ec1..cbf17f2b5 100644
--- a/dev/vscode-toolbar-button/basic-example.html
+++ b/dev/vscode-toolbar-button/basic-example.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>VSCode Elements</title>
+    <title>toolbar-button/basic-example</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-toolbar-button/change-event.html b/dev/vscode-toolbar-button/change-event.html
index 9ece08298..4d7df13ad 100644
--- a/dev/vscode-toolbar-button/change-event.html
+++ b/dev/vscode-toolbar-button/change-event.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>VSCode Elements</title>
+    <title>toolbar-button/change-event</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-tree/basic-example.html b/dev/vscode-tree/basic-example.html
index 2ef89ca23..701f16b3f 100644
--- a/dev/vscode-tree/basic-example.html
+++ b/dev/vscode-tree/basic-example.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>VSCode Elements</title>
+    <title>tree/basic-example</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-tree/custom-styles.html b/dev/vscode-tree/custom-styles.html
index 00ca79f6f..3fd71aff9 100644
--- a/dev/vscode-tree/custom-styles.html
+++ b/dev/vscode-tree/custom-styles.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>VSCode Elements</title>
+    <title>tree/custom-styles</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-tree/default-active-item.html b/dev/vscode-tree/default-active-item.html
index 8d3f63359..e73a75139 100644
--- a/dev/vscode-tree/default-active-item.html
+++ b/dev/vscode-tree/default-active-item.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>VSCode Elements</title>
+    <title>tree/default-active-item</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-tree/double-click-expand-mode.html b/dev/vscode-tree/double-click-expand-mode.html
index 7cc42cb10..f3b11df9a 100644
--- a/dev/vscode-tree/double-click-expand-mode.html
+++ b/dev/vscode-tree/double-click-expand-mode.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>VSCode Elements</title>
+    <title>tree/double-click-expand-mode</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-tree/events.html b/dev/vscode-tree/events.html
index fc71fe945..028c6afca 100644
--- a/dev/vscode-tree/events.html
+++ b/dev/vscode-tree/events.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>VSCode Elements</title>
+    <title>tree/events</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-tree/expand-all-collapse-all.html b/dev/vscode-tree/expand-all-collapse-all.html
index 42aa459d3..37b9fbcaa 100644
--- a/dev/vscode-tree/expand-all-collapse-all.html
+++ b/dev/vscode-tree/expand-all-collapse-all.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>VSCode Elements</title>
+    <title>tree/expand-all-collapse-all</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-tree/fallback-styles.html b/dev/vscode-tree/fallback-styles.html
index 566ab4440..f293e16c4 100644
--- a/dev/vscode-tree/fallback-styles.html
+++ b/dev/vscode-tree/fallback-styles.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>VSCode Elements</title>
+    <title>tree/fallback-styles</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-tree/guides-has-arrows.html b/dev/vscode-tree/guides-has-arrows.html
index 62c00e117..99b519c5d 100644
--- a/dev/vscode-tree/guides-has-arrows.html
+++ b/dev/vscode-tree/guides-has-arrows.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>VSCode Elements</title>
+    <title>tree/guides-has-arrows</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-tree/guides-wo-arrows.html b/dev/vscode-tree/guides-wo-arrows.html
index 3bc636c87..9d444f306 100644
--- a/dev/vscode-tree/guides-wo-arrows.html
+++ b/dev/vscode-tree/guides-wo-arrows.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>VSCode Elements</title>
+    <title>tree/guides-wo-arrows</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-tree/hide-arrows.html b/dev/vscode-tree/hide-arrows.html
index e529aabb6..e19f9860f 100644
--- a/dev/vscode-tree/hide-arrows.html
+++ b/dev/vscode-tree/hide-arrows.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>VSCode Elements</title>
+    <title>tree/hide-arrows</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-tree/hide-guides-and-arrows.html b/dev/vscode-tree/hide-guides-and-arrows.html
index 41c968e1f..aace50aa3 100644
--- a/dev/vscode-tree/hide-guides-and-arrows.html
+++ b/dev/vscode-tree/hide-guides-and-arrows.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>VSCode Elements</title>
+    <title>tree/hide-guides-and-arrows</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-tree/hide-guides.html b/dev/vscode-tree/hide-guides.html
index 7ad83cb2a..52577535a 100644
--- a/dev/vscode-tree/hide-guides.html
+++ b/dev/vscode-tree/hide-guides.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>VSCode Elements</title>
+    <title>tree/hide-guides</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-tree/multi-select.html b/dev/vscode-tree/multi-select.html
index d4b0f84c2..435b5274e 100644
--- a/dev/vscode-tree/multi-select.html
+++ b/dev/vscode-tree/multi-select.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>VSCode Elements</title>
+    <title>tree/multi-select</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-tree/oversized-icon.html b/dev/vscode-tree/oversized-icon.html
index 6ded087ea..363706b64 100644
--- a/dev/vscode-tree/oversized-icon.html
+++ b/dev/vscode-tree/oversized-icon.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>VSCode Elements — Oversized Icon</title>
+    <title>tree/oversized-icon</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-tree/problems-tree.html b/dev/vscode-tree/problems-tree.html
index f1df48d1b..fca17c287 100644
--- a/dev/vscode-tree/problems-tree.html
+++ b/dev/vscode-tree/problems-tree.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>VSCode Elements — Problems Tree</title>
+    <title>tree/problems-tree</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-tree/scm-tree.html b/dev/vscode-tree/scm-tree.html
index 113f754c8..82959262c 100644
--- a/dev/vscode-tree/scm-tree.html
+++ b/dev/vscode-tree/scm-tree.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>VSCode Elements</title>
+    <title>tree/scm-tree</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-tree/set-active-item.html b/dev/vscode-tree/set-active-item.html
index d95fc1115..82b245676 100644
--- a/dev/vscode-tree/set-active-item.html
+++ b/dev/vscode-tree/set-active-item.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>VSCode Elements</title>
+    <title>tree/set-active-item</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-tree/stress-test.html b/dev/vscode-tree/stress-test.html
index 42860d473..874304b4d 100644
--- a/dev/vscode-tree/stress-test.html
+++ b/dev/vscode-tree/stress-test.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>VSCode Elements</title>
+    <title>tree/stress-test</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
diff --git a/dev/vscode-tree/with-icons.html b/dev/vscode-tree/with-icons.html
index da78c918a..5b9ae9953 100644
--- a/dev/vscode-tree/with-icons.html
+++ b/dev/vscode-tree/with-icons.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>VSCode Elements</title>
+    <title>tree/with-icons</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"

From be07012ad1817239070d55d98542766f3dbbe4f4 Mon Sep 17 00:00:00 2001
From: 171H <40647432+171h@users.noreply.github.com>
Date: Sat, 29 Aug 2026 08:53:35 +0000
Subject: [PATCH 19/31] fix: make icon buttons respond to `size` changes

### Motivation

- Icon-only and icon-containing buttons did not visually change when the `size` attribute was toggled because the generated `vscode-icon` instances kept the default `16px` size.
- Existing minimum dimensions for empty/icon-only buttons prevented small/large variants from rendering the expected heights, causing inconsistent appearance across `small`/`medium`/`large` sizes.

### Description

- Pass a computed icon size into child icons so leading and trailing icons follow the button `size` (12 / 16 / 20px) by setting `.size` on `vscode-icon` in `vscode-button.render()` (file `src/vscode-button/vscode-button.ts`).
- Add CSS minimum-dimension rules for empty and `icon-only` buttons per size to allow `small` and `large` icon buttons to reach their intended heights (`:host([size='small']:empty)` and `:host([size='large']:empty)` in `src/vscode-button/vscode-button.styles.ts`).
- Add a unit test that exercises the three icon-button variants (leading icon, trailing icon, `icon-only`) and verifies button heights and `vscode-icon.size` after toggling `small`/`medium`/`large` (file `src/vscode-button/vscode-button.test.ts`).

### Testing

- Ran the full test suite with `npm test` and all tests passed (423 passed, 25 skipped).
- Ran the targeted button tests with `npm test -- --files dist/vscode-button/vscode-button.test.js` and the button test file passed (21 passed, 1 skipped).
- Type-checking with `npx tsc --noEmit --incremental false` and formatting/lint checks with `npm run prettier` and `npm run lint` completed successfully (the lint run reports one pre-existing warning in an unrelated test file).
---
 src/vscode-button/vscode-button.styles.ts | 12 ++++++++
 src/vscode-button/vscode-button.test.ts   | 36 +++++++++++++++++++++++
 src/vscode-button/vscode-button.ts        |  4 +++
 3 files changed, 52 insertions(+)

diff --git a/src/vscode-button/vscode-button.styles.ts b/src/vscode-button/vscode-button.styles.ts
index 008f09f26..046ff0f5f 100644
--- a/src/vscode-button/vscode-button.styles.ts
+++ b/src/vscode-button/vscode-button.styles.ts
@@ -185,6 +185,18 @@ const styles: CSSResultGroup = [
       padding: 1px 4px;
     }
 
+    :host([size='small']:empty) .base,
+    :host([size='small']) .base.icon-only {
+      min-height: 16px;
+      min-width: 18px;
+    }
+
+    :host([size='large']:empty) .base,
+    :host([size='large']) .base.icon-only {
+      min-height: 30px;
+      min-width: 34px;
+    }
+
     slot {
       align-items: center;
       display: flex;
diff --git a/src/vscode-button/vscode-button.test.ts b/src/vscode-button/vscode-button.test.ts
index 869f6e9c8..5fec54f12 100644
--- a/src/vscode-button/vscode-button.test.ts
+++ b/src/vscode-button/vscode-button.test.ts
@@ -43,6 +43,42 @@ describe('vscode-button', () => {
     expect(el.getAttribute('size')).to.eq('large');
   });
 
+  it('resizes every icon button variation when its size changes', async () => {
+    const wrapper = await fixture<HTMLDivElement>(html`
+      <div>
+        <vscode-button icon="account"></vscode-button>
+        <vscode-button icon-after="account"></vscode-button>
+        <vscode-button icon-only icon="account">Label</vscode-button>
+      </div>
+    `);
+    const buttons = Array.from(
+      wrapper.querySelectorAll<VscodeButton>('vscode-button')
+    );
+
+    for (const [size, expectedHeights, expectedIconSize] of [
+      ['small', [16, 16, 16], 12],
+      ['medium', [24, 24, 26], 16],
+      ['large', [30, 30, 30], 20],
+    ] as const) {
+      for (const button of buttons) {
+        button.size = size;
+      }
+      await Promise.all(buttons.map((button) => button.updateComplete));
+      await aTimeout(0);
+
+      for (const [index, button] of buttons.entries()) {
+        const base = $(button.shadowRoot!, '.base') as HTMLElement;
+        const icon = $(button.shadowRoot!, 'vscode-icon');
+
+        expect(base.getBoundingClientRect().height).to.be.closeTo(
+          expectedHeights[index],
+          0.5
+        );
+        expect(icon.size).to.eq(expectedIconSize);
+      }
+    }
+  });
+
   it('dispatches click event when enter key is pressed', async () => {
     const el = await fixture<VscodeButton>(
       html`<vscode-button>test</vscode-button>`
diff --git a/src/vscode-button/vscode-button.ts b/src/vscode-button/vscode-button.ts
index fd1356429..9430759a7 100644
--- a/src/vscode-button/vscode-button.ts
+++ b/src/vscode-button/vscode-button.ts
@@ -252,6 +252,8 @@ export class VscodeButton extends VscElement {
   override render(): TemplateResult {
     const hasIcon = this.icon !== '';
     const hasIconAfter = this.iconAfter !== '';
+    const iconSize =
+      this.size === 'small' ? 12 : this.size === 'large' ? 20 : 16;
     const baseClasses = {
       base: true,
       'icon-only': this.iconOnly,
@@ -262,6 +264,7 @@ export class VscodeButton extends VscElement {
     const iconElem = hasIcon
       ? html`<vscode-icon
           name=${this.icon}
+          .size=${iconSize}
           ?spin=${this.iconSpin}
           spin-duration=${ifDefined(this.iconSpinDuration)}
           class="icon"
@@ -271,6 +274,7 @@ export class VscodeButton extends VscElement {
     const iconAfterElem = hasIconAfter
       ? html`<vscode-icon
           name=${this.iconAfter}
+          .size=${iconSize}
           ?spin=${this.iconAfterSpin}
           spin-duration=${ifDefined(this.iconAfterSpinDuration)}
           class="icon-after"

From a388f6604e92a7c5cea1955441a25a423b8a121b Mon Sep 17 00:00:00 2001
From: 171H <40647432+171h@users.noreply.github.com>
Date: Sat, 29 Aug 2026 09:05:50 +0000
Subject: [PATCH 20/31] fix(button): keep small icon buttons square

---
 src/vscode-button/vscode-button.styles.ts | 3 ++-
 src/vscode-button/vscode-button.test.ts   | 9 +++++----
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/vscode-button/vscode-button.styles.ts b/src/vscode-button/vscode-button.styles.ts
index 046ff0f5f..aaab2b748 100644
--- a/src/vscode-button/vscode-button.styles.ts
+++ b/src/vscode-button/vscode-button.styles.ts
@@ -188,7 +188,8 @@ const styles: CSSResultGroup = [
     :host([size='small']:empty) .base,
     :host([size='small']) .base.icon-only {
       min-height: 16px;
-      min-width: 18px;
+      min-width: 16px;
+      padding: 1px;
     }
 
     :host([size='large']:empty) .base,
diff --git a/src/vscode-button/vscode-button.test.ts b/src/vscode-button/vscode-button.test.ts
index 5fec54f12..db49410f6 100644
--- a/src/vscode-button/vscode-button.test.ts
+++ b/src/vscode-button/vscode-button.test.ts
@@ -70,10 +70,11 @@ describe('vscode-button', () => {
         const base = $(button.shadowRoot!, '.base') as HTMLElement;
         const icon = $(button.shadowRoot!, 'vscode-icon');
 
-        expect(base.getBoundingClientRect().height).to.be.closeTo(
-          expectedHeights[index],
-          0.5
-        );
+        const rect = base.getBoundingClientRect();
+        expect(rect.height).to.be.closeTo(expectedHeights[index], 0.5);
+        if (size === 'small' && index < 2) {
+          expect(rect.width).to.be.closeTo(rect.height, 0.5);
+        }
         expect(icon.size).to.eq(expectedIconSize);
       }
     }

From 6209382b639d8c1d1901e094af949d487d8695f7 Mon Sep 17 00:00:00 2001
From: 171H <40647432+171h@users.noreply.github.com>
Date: Sat, 29 Aug 2026 09:13:23 +0000
Subject: [PATCH 21/31] docs: explain form control sizes

---
 README.md         |   6 +++
 docs/form-size.md | 124 ++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 130 insertions(+)
 create mode 100644 docs/form-size.md

diff --git a/README.md b/README.md
index bb35b5781..4d1dc969a 100644
--- a/README.md
+++ b/README.md
@@ -4,6 +4,12 @@ For the end-user documentation, [click here](https://vscode-elements.github.io).
 
 This documentation is intended for developers who would like to contribute to or modify the code on their own.
 
+## Documentation
+
+- [Form control sizes](docs/form-size.md) explains the shared `small`,
+  `medium`, and `large` sizes, supported components, runtime usage, form groups,
+  and icon sizing.
+
 VSCode Elements is based on the [Lit](https://lit.dev/) library. The local development environment requires `NodeJS 22` or newer. If you want to use a local copy of the library in your codebase, you can use the `npm link` command. First, navigate to the VSCode Elements directory and run:
 
 ```bash
diff --git a/docs/form-size.md b/docs/form-size.md
new file mode 100644
index 000000000..1f07ba338
--- /dev/null
+++ b/docs/form-size.md
@@ -0,0 +1,124 @@
+# Form control sizes
+
+Form controls support a common `size` attribute for choosing a compact,
+default, or spacious presentation. The accepted values are:
+
+| Value | Purpose |
+| --- | --- |
+| `small` | Compact layouts. Controls are reduced to fit a 16px-high form row where applicable. |
+| `medium` | Default size. Omitting `size` has the same effect. |
+| `large` | Larger text, icons, spacing, and controls. |
+
+The shared TypeScript type is `FormControlSize`, defined as
+`'small' | 'medium' | 'large'`.
+
+## Supported components
+
+The common form-control sizes are available on:
+
+- `vscode-button`
+- `vscode-textfield`
+- `vscode-textarea`
+- `vscode-checkbox`
+- `vscode-radio`
+- `vscode-single-select`
+- `vscode-multi-select`
+- `vscode-form-group`
+
+`medium` remains the default for backward compatibility.
+
+## Set a size in markup
+
+Set `size` independently on each control:
+
+```html
+<vscode-textfield size="small">Compact field</vscode-textfield>
+<vscode-single-select size="medium"></vscode-single-select>
+<vscode-button size="large">Large action</vscode-button>
+```
+
+Controls can use different sizes in the same form. For a consistent layout,
+give related controls the same value:
+
+```html
+<vscode-textfield size="small"></vscode-textfield>
+<vscode-checkbox size="small">Remember me</vscode-checkbox>
+<vscode-button size="small">Save</vscode-button>
+```
+
+## Change a size at runtime
+
+The `size` property and attribute are reflected, so either can be changed at
+runtime:
+
+```js
+const field = document.querySelector('vscode-textfield');
+
+field.size = 'large';
+field.setAttribute('size', 'small');
+```
+
+The existing pages under `dev/` include **small**, **medium**, and **large**
+buttons for interactively checking the supported components. Start the local
+development server and open the relevant component example:
+
+```bash
+npm run serve
+```
+
+## Form groups
+
+`vscode-form-group` uses its `size` to adjust group spacing, label width, and
+the inherited `--vsc-form-control-font-size` custom property. Set the same
+`size` on the controls when their complete dimensions should match the group:
+
+```html
+<vscode-form-group size="small" variant="vertical">
+  <vscode-label for="query">Query</vscode-label>
+  <vscode-textfield id="query" size="small"></vscode-textfield>
+  <vscode-button size="small">Search</vscode-button>
+</vscode-form-group>
+```
+
+The automatic font sizes are 11px for `small`, the configured VS Code font
+size (13px by default) for `medium`, and 15px for `large`. You can override the
+font size for a form group or an individual control with
+`--vsc-form-control-font-size`.
+
+## Buttons with icons
+
+Icons created by `vscode-button` follow the button size automatically:
+
+| Button size | Generated icon size |
+| --- | --- |
+| `small` | 12px |
+| `medium` | 16px |
+| `large` | 20px |
+
+Small icon-only buttons are 16px square. This applies to both leading and
+trailing generated icons:
+
+```html
+<vscode-button size="small" icon="account" aria-label="Account"></vscode-button>
+<vscode-button size="small" icon-after="add" aria-label="Add"></vscode-button>
+```
+
+## Standalone icons
+
+`vscode-icon` also has a `size` property. It accepts the presets `small`
+(14px), `medium` (16px, the default), and `large` (20px), or a numeric pixel
+value:
+
+```html
+<vscode-icon name="account" size="small"></vscode-icon>
+<vscode-icon name="account" size="24"></vscode-icon>
+```
+
+```js
+const icon = document.querySelector('vscode-icon');
+icon.size = 24;
+```
+
+When an icon is generated through the `icon` or `icon-after` property of a
+`vscode-button`, set the button's `size`; the button supplies the corresponding
+numeric icon size.

From 47c407fba292db8d80dd0cdb0c3c3acd089d6e2b Mon Sep 17 00:00:00 2001
From: 171H <40647432+171h@users.noreply.github.com>
Date: Sat, 29 Aug 2026 09:17:39 +0000
Subject: [PATCH 22/31] docs: clarify documentation links

---
 README.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/README.md b/README.md
index 4d1dc969a..6cf03d2b4 100644
--- a/README.md
+++ b/README.md
@@ -6,6 +6,8 @@ This documentation is intended for developers who would like to contribute to or
 
 ## Documentation
 
+Details of the changes made in this repository are documented in the [`docs`](docs/) directory. For all other documentation, visit [https://vscode-elements.github.io/](https://vscode-elements.github.io/).
+
 - [Form control sizes](docs/form-size.md) explains the shared `small`,
   `medium`, and `large` sizes, supported components, runtime usage, form groups,
   and icon sizing.

From 60fa488685f270190ae1d719e952009337e72215 Mon Sep 17 00:00:00 2001
From: 171H <40647432+171h@users.noreply.github.com>
Date: Sat, 29 Aug 2026 17:58:44 +0800
Subject: [PATCH 23/31] fix: address review feedback on component sizes

- use 14px icons in small buttons to match checkbox/radio and icon presets
- keep small icon-only buttons square at 16x16px
- use 11px font size for small textarea
- fix size switcher buttons for radios inside the shadow root demo
- reject invalid vscode-icon size values (NaN, non-numeric strings)
---
 dev/vscode-radio-group/issue-511.html         |  7 ++++--
 docs/form-size.md                             |  2 +-
 src/vscode-button/vscode-button.styles.ts     |  2 +-
 src/vscode-button/vscode-button.test.ts       |  2 +-
 src/vscode-button/vscode-button.ts            |  2 +-
 src/vscode-icon/vscode-icon.test.ts           | 23 ++++++++++++++++++
 src/vscode-icon/vscode-icon.ts                | 24 +++++++++++++------
 src/vscode-textarea/vscode-textarea.styles.ts |  2 +-
 8 files changed, 50 insertions(+), 14 deletions(-)

diff --git a/dev/vscode-radio-group/issue-511.html b/dev/vscode-radio-group/issue-511.html
index e9e545be0..5bc66303b 100644
--- a/dev/vscode-radio-group/issue-511.html
+++ b/dev/vscode-radio-group/issue-511.html
@@ -73,8 +73,11 @@ <h1>Component demo</h1>
     <script type="module">
       document.querySelectorAll('.size-buttons button').forEach((button) => {
         button.addEventListener('click', () => {
-          document
-            .querySelectorAll('#size-demo-target vscode-radio')
+          const demoElement = document.querySelector(
+            '#size-demo-target demo-element'
+          );
+          demoElement.shadowRoot
+            .querySelectorAll('vscode-radio')
             .forEach((el) => {
               el.setAttribute('size', button.dataset.size);
             });
diff --git a/docs/form-size.md b/docs/form-size.md
index 1f07ba338..559822458 100644
--- a/docs/form-size.md
+++ b/docs/form-size.md
@@ -91,7 +91,7 @@ Icons created by `vscode-button` follow the button size automatically:
 
 | Button size | Generated icon size |
 | --- | --- |
-| `small` | 12px |
+| `small` | 14px |
 | `medium` | 16px |
 | `large` | 20px |
 
diff --git a/src/vscode-button/vscode-button.styles.ts b/src/vscode-button/vscode-button.styles.ts
index aaab2b748..5de5923b9 100644
--- a/src/vscode-button/vscode-button.styles.ts
+++ b/src/vscode-button/vscode-button.styles.ts
@@ -189,7 +189,7 @@ const styles: CSSResultGroup = [
     :host([size='small']) .base.icon-only {
       min-height: 16px;
       min-width: 16px;
-      padding: 1px;
+      padding: 0;
     }
 
     :host([size='large']:empty) .base,
diff --git a/src/vscode-button/vscode-button.test.ts b/src/vscode-button/vscode-button.test.ts
index db49410f6..492c0c555 100644
--- a/src/vscode-button/vscode-button.test.ts
+++ b/src/vscode-button/vscode-button.test.ts
@@ -56,7 +56,7 @@ describe('vscode-button', () => {
     );
 
     for (const [size, expectedHeights, expectedIconSize] of [
-      ['small', [16, 16, 16], 12],
+      ['small', [16, 16, 16], 14],
       ['medium', [24, 24, 26], 16],
       ['large', [30, 30, 30], 20],
     ] as const) {
diff --git a/src/vscode-button/vscode-button.ts b/src/vscode-button/vscode-button.ts
index 9430759a7..79f157343 100644
--- a/src/vscode-button/vscode-button.ts
+++ b/src/vscode-button/vscode-button.ts
@@ -253,7 +253,7 @@ export class VscodeButton extends VscElement {
     const hasIcon = this.icon !== '';
     const hasIconAfter = this.iconAfter !== '';
     const iconSize =
-      this.size === 'small' ? 12 : this.size === 'large' ? 20 : 16;
+      this.size === 'small' ? 14 : this.size === 'large' ? 20 : 16;
     const baseClasses = {
       base: true,
       'icon-only': this.iconOnly,
diff --git a/src/vscode-icon/vscode-icon.test.ts b/src/vscode-icon/vscode-icon.test.ts
index e3b49842a..e08ff254b 100644
--- a/src/vscode-icon/vscode-icon.test.ts
+++ b/src/vscode-icon/vscode-icon.test.ts
@@ -52,4 +52,27 @@ describe('vscode-icon', () => {
     expect(icon.style.width).to.eq('20px');
     expect(icon.style.fontSize).to.eq('20px');
   });
+
+  it('rejects non-numeric size attributes', async () => {
+    const el = await fixture<VscodeIcon>(
+      html`<vscode-icon name="account" size="24px"></vscode-icon>`
+    );
+
+    expect(el.size).to.eq(16);
+  });
+
+  it('rejects empty size attributes', async () => {
+    const el = await fixture<VscodeIcon>(
+      html`<vscode-icon name="account" size=""></vscode-icon>`
+    );
+
+    expect(el.size).to.eq(16);
+  });
+
+  it('rejects NaN size values', () => {
+    const el = document.createElement('vscode-icon');
+    el.size = NaN;
+
+    expect(el.size).to.eq(16);
+  });
 });
diff --git a/src/vscode-icon/vscode-icon.ts b/src/vscode-icon/vscode-icon.ts
index 1c9319c2e..de4f1a6f0 100644
--- a/src/vscode-icon/vscode-icon.ts
+++ b/src/vscode-icon/vscode-icon.ts
@@ -36,6 +36,8 @@ export class VscodeIcon extends VscElement {
   /**
    * Icon size. Accepts a number of pixels or one of the predefined sizes:
    * `small` (14px), `medium` (16px, default) and `large` (20px).
+   * Invalid values (for example `NaN`, `24px` or an empty string) are
+   * rejected and fall back to the `medium` default (16px).
    */
   @property()
   set size(val: number | 'small' | 'medium' | 'large') {
@@ -43,15 +45,23 @@ export class VscodeIcon extends VscElement {
       small: 14,
       medium: 16,
       large: 20,
-    };
+    } as const;
 
-    const numericValue = Number(val);
+    if (typeof val === 'string') {
+      const trimmed = val.trim();
 
-    this._size =
-      typeof val === 'number' ||
-      (String(val).trim() !== '' && Number.isFinite(numericValue))
-        ? numericValue
-        : (presets[val] ?? 16);
+      if (trimmed in presets) {
+        this._size = presets[trimmed as keyof typeof presets];
+        return;
+      }
+
+      const numericValue = Number(trimmed);
+      this._size =
+        trimmed !== '' && Number.isFinite(numericValue) ? numericValue : 16;
+      return;
+    }
+
+    this._size = Number.isFinite(val) ? val : 16;
   }
   get size(): number {
     return this._size;
diff --git a/src/vscode-textarea/vscode-textarea.styles.ts b/src/vscode-textarea/vscode-textarea.styles.ts
index 4791954ac..8c8f1dfe3 100644
--- a/src/vscode-textarea/vscode-textarea.styles.ts
+++ b/src/vscode-textarea/vscode-textarea.styles.ts
@@ -20,7 +20,7 @@ const styles: CSSResultGroup = [
     }
 
     :host([size='small']) {
-      --vsc-form-control-font-size: 12px;
+      --vsc-form-control-font-size: 11px;
     }
 
     :host([size='large']) {

From 49b87a3fd4437391e1b9b60ea31413b0316a3de8 Mon Sep 17 00:00:00 2001
From: 171H <40647432+171h@users.noreply.github.com>
Date: Sun, 30 Aug 2026 08:54:35 +0800
Subject: [PATCH 24/31] fix: make small form controls 16px high

- remove small-size wrapper margins on checkbox/radio
- shrink select combobox input and button at small size
- add size property to vscode-label and shrink it at small size
- document label and group container sizing
---
 docs/form-size.md                             | 15 ++++++++++
 .../form-button-widget/base.styles.ts         |  2 ++
 src/includes/vscode-select/styles.ts          | 11 ++++++-
 src/vscode-label/vscode-label.styles.ts       | 30 +++++++++++++++++--
 src/vscode-label/vscode-label.test.ts         | 17 ++++++++++-
 src/vscode-label/vscode-label.ts              |  7 +++++
 6 files changed, 77 insertions(+), 5 deletions(-)

diff --git a/docs/form-size.md b/docs/form-size.md
index 559822458..99df3f7dd 100644
--- a/docs/form-size.md
+++ b/docs/form-size.md
@@ -24,9 +24,21 @@ The common form-control sizes are available on:
 - `vscode-single-select`
 - `vscode-multi-select`
 - `vscode-form-group`
+- `vscode-label`
 
 `medium` remains the default for backward compatibility.
 
+`vscode-radio-group` and `vscode-checkbox-group` are containers without their own
+`size` attribute. Their height follows the child `vscode-radio` / `vscode-checkbox`
+controls, so set `size` on the children:
+
+```html
+<vscode-radio-group>
+  <vscode-radio size="small">One</vscode-radio>
+  <vscode-radio size="small">Two</vscode-radio>
+</vscode-radio-group>
+```
+
 ## Set a size in markup
 
 Set `size` independently on each control:
@@ -80,6 +92,9 @@ the inherited `--vsc-form-control-font-size` custom property. Set the same
 </vscode-form-group>
 ```
 
+A `vscode-label` inside a sized form group shrinks automatically, so it does not
+need its own `size`. It also accepts `size` when used outside a form group.
+
 The automatic font sizes are 11px for `small`, the configured VS Code font
 size (13px by default) for `medium`, and 15px for `large`. You can override the
 font size for a form group or an individual control with
diff --git a/src/includes/form-button-widget/base.styles.ts b/src/includes/form-button-widget/base.styles.ts
index 58461149c..8b94c9970 100644
--- a/src/includes/form-button-widget/base.styles.ts
+++ b/src/includes/form-button-widget/base.styles.ts
@@ -42,6 +42,8 @@ export default [
 
     :host([size='small']) .wrapper {
       line-height: 14px;
+      margin-bottom: 0;
+      margin-top: 0;
       min-height: 16px;
     }
 
diff --git a/src/includes/vscode-select/styles.ts b/src/includes/vscode-select/styles.ts
index 05b4b9e70..29a945c3e 100644
--- a/src/includes/vscode-select/styles.ts
+++ b/src/includes/vscode-select/styles.ts
@@ -49,6 +49,12 @@ export default [
       padding: 1px 4px;
     }
 
+    :host([size='small']) .combobox-button {
+      height: 12px;
+      margin: 0 1px 0 0;
+      padding: 1px;
+    }
+
     :host([size='large']) .combobox-input {
       padding: 5px 4px;
     }
@@ -152,7 +158,10 @@ export default [
       color: var(--vscode-foreground, #cccccc);
       display: block;
       font-family: var(--vscode-font-family, sans-serif);
-      font-size: var(--vscode-font-size, 13px);
+      font-size: var(
+        --vsc-form-control-font-size,
+        var(--vscode-font-size, 13px)
+      );
       line-height: 16px;
       padding: 4px;
       width: 100%;
diff --git a/src/vscode-label/vscode-label.styles.ts b/src/vscode-label/vscode-label.styles.ts
index 8b9c9167c..9d04ef64a 100644
--- a/src/vscode-label/vscode-label.styles.ts
+++ b/src/vscode-label/vscode-label.styles.ts
@@ -1,6 +1,5 @@
 import {css, CSSResultGroup} from 'lit';
 import defaultStyles from '../includes/default.styles.js';
-import {INPUT_LINE_HEIGHT_RATIO} from '../includes/helpers.js';
 
 const styles: CSSResultGroup = [
   defaultStyles,
@@ -9,14 +8,39 @@ const styles: CSSResultGroup = [
       display: block;
     }
 
+    :host([size='small']),
+    :host-context(vscode-form-group[size='small']) {
+      --vsc-form-control-font-size: 11px;
+    }
+
+    :host([size='large']),
+    :host-context(vscode-form-group[size='large']) {
+      --vsc-form-control-font-size: 15px;
+    }
+
     .wrapper {
       color: var(--vscode-foreground, #cccccc);
       cursor: default;
       display: block;
       font-family: var(--vscode-font-family, sans-serif);
-      font-size: var(--vscode-font-size, 13px);
+      font-size: var(
+        --vsc-form-control-font-size,
+        var(--vscode-font-size, 13px)
+      );
       font-weight: 600;
-      line-height: ${INPUT_LINE_HEIGHT_RATIO};
+      line-height: 16px;
+      padding: 5px 0;
+    }
+
+    :host([size='small']) .wrapper,
+    :host-context(vscode-form-group[size='small']) .wrapper {
+      line-height: 12px;
+      padding: 2px 0;
+    }
+
+    :host([size='large']) .wrapper,
+    :host-context(vscode-form-group[size='large']) .wrapper {
+      line-height: 20px;
       padding: 5px 0;
     }
 
diff --git a/src/vscode-label/vscode-label.test.ts b/src/vscode-label/vscode-label.test.ts
index e7b6c5edb..172b2a792 100644
--- a/src/vscode-label/vscode-label.test.ts
+++ b/src/vscode-label/vscode-label.test.ts
@@ -1,9 +1,24 @@
 import {VscodeLabel} from './index.js';
-import {expect} from '@open-wc/testing';
+import {expect, fixture, html} from '@open-wc/testing';
 
 describe('vscode-label', () => {
   it('is defined', () => {
     const el = document.createElement('vscode-label');
     expect(el).to.instanceOf(VscodeLabel);
   });
+
+  it('uses medium size by default', async () => {
+    const el = await fixture<VscodeLabel>(html`<vscode-label></vscode-label>`);
+
+    expect(el.size).to.eq('medium');
+    expect(el.getAttribute('size')).to.eq('medium');
+  });
+
+  it('reflects the size property', async () => {
+    const el = await fixture<VscodeLabel>(html`<vscode-label></vscode-label>`);
+    el.size = 'small';
+    await el.updateComplete;
+
+    expect(el.getAttribute('size')).to.eq('small');
+  });
 });
diff --git a/src/vscode-label/vscode-label.ts b/src/vscode-label/vscode-label.ts
index cc130b786..3d824b4fa 100644
--- a/src/vscode-label/vscode-label.ts
+++ b/src/vscode-label/vscode-label.ts
@@ -1,6 +1,7 @@
 import {html, TemplateResult} from 'lit';
 import {property} from 'lit/decorators.js';
 import {classMap} from 'lit/directives/class-map.js';
+import {FormControlSize} from '../includes/form-control-size.js';
 import uniqueId from '../includes/uniqueId.js';
 import {customElement, VscElement} from '../includes/VscElement.js';
 import styles from './vscode-label.styles.js';
@@ -46,6 +47,12 @@ export class VscodeLabel extends VscElement {
   @property({type: Boolean, reflect: true})
   required = false;
 
+  /**
+   * The size of the component. The `medium` size is the default.
+   */
+  @property({reflect: true})
+  size: FormControlSize = 'medium';
+
   override attributeChangedCallback(
     name: string,
     old: string | null,

From fdc74a8f7fdfa71a6f8c933fe7c4938a0b04758f Mon Sep 17 00:00:00 2001
From: 171H <40647432+171h@users.noreply.github.com>
Date: Sun, 30 Aug 2026 01:27:16 +0000
Subject: [PATCH 25/31] test: cover small label and radio group heights

---
 src/vscode-checkbox/vscode-checkbox.test.ts           |  8 ++++++++
 src/vscode-label/vscode-label.test.ts                 |  8 ++++++++
 src/vscode-multi-select/vscode-multi-select.test.ts   | 10 ++++++++++
 src/vscode-radio-group/vscode-radio-group.test.ts     | 10 ++++++++++
 src/vscode-radio/vscode-radio.test.ts                 |  8 ++++++++
 src/vscode-single-select/vscode-single-select.test.ts | 10 ++++++++++
 6 files changed, 54 insertions(+)

diff --git a/src/vscode-checkbox/vscode-checkbox.test.ts b/src/vscode-checkbox/vscode-checkbox.test.ts
index 30c995221..fed81787e 100644
--- a/src/vscode-checkbox/vscode-checkbox.test.ts
+++ b/src/vscode-checkbox/vscode-checkbox.test.ts
@@ -43,6 +43,14 @@ describe('vscode-checkbox', () => {
     expect(el.getAttribute('size')).to.eq('small');
   });
 
+  it('uses a 16px height at the small size', async () => {
+    const el = await fixture<VscodeCheckbox>(
+      html`<vscode-checkbox size="small">Checkbox</vscode-checkbox>`
+    );
+
+    expect(el.getBoundingClientRect().height).to.eq(16);
+  });
+
   it('should be participated in the form', async () => {
     const form = document.createElement('form');
     await fixture(
diff --git a/src/vscode-label/vscode-label.test.ts b/src/vscode-label/vscode-label.test.ts
index 172b2a792..e95f8726d 100644
--- a/src/vscode-label/vscode-label.test.ts
+++ b/src/vscode-label/vscode-label.test.ts
@@ -21,4 +21,12 @@ describe('vscode-label', () => {
 
     expect(el.getAttribute('size')).to.eq('small');
   });
+
+  it('uses a 16px height at the small size', async () => {
+    const el = await fixture<VscodeLabel>(
+      html`<vscode-label size="small">Label</vscode-label>`
+    );
+
+    expect(el.getBoundingClientRect().height).to.eq(16);
+  });
 });
diff --git a/src/vscode-multi-select/vscode-multi-select.test.ts b/src/vscode-multi-select/vscode-multi-select.test.ts
index c5ec605cc..ed4058b75 100644
--- a/src/vscode-multi-select/vscode-multi-select.test.ts
+++ b/src/vscode-multi-select/vscode-multi-select.test.ts
@@ -32,6 +32,16 @@ describe('vscode-multi-select', () => {
     expect(el.getAttribute('size')).to.eq('large');
   });
 
+  it('uses a 16px height at the small size', async () => {
+    const el = await fixture<VscodeMultiSelect>(html`
+      <vscode-multi-select size="small">
+        <vscode-option selected>Option</vscode-option>
+      </vscode-multi-select>
+    `);
+
+    expect(el.getBoundingClientRect().height).to.eq(16);
+  });
+
   it('should display selected value', async () => {
     const el = (await fixture(html`
       <vscode-multi-select>
diff --git a/src/vscode-radio-group/vscode-radio-group.test.ts b/src/vscode-radio-group/vscode-radio-group.test.ts
index 128907139..4a1f48109 100644
--- a/src/vscode-radio-group/vscode-radio-group.test.ts
+++ b/src/vscode-radio-group/vscode-radio-group.test.ts
@@ -45,6 +45,16 @@ describe('vscode-radio-group', () => {
     expect(el).to.instanceOf(VscodeRadioGroup);
   });
 
+  it('follows the height of its small child radios', async () => {
+    const el = await fixture<VscodeRadioGroup>(html`
+      <vscode-radio-group>
+        <vscode-radio size="small">Option</vscode-radio>
+      </vscode-radio-group>
+    `);
+
+    expect(el.getBoundingClientRect().height).to.eq(16);
+  });
+
   it('checks the default option on page load', async () => {
     await fixture<VscodeRadioGroup>(html`
       <vscode-radio-group>
diff --git a/src/vscode-radio/vscode-radio.test.ts b/src/vscode-radio/vscode-radio.test.ts
index 9890d9c8f..806b71c39 100644
--- a/src/vscode-radio/vscode-radio.test.ts
+++ b/src/vscode-radio/vscode-radio.test.ts
@@ -46,6 +46,14 @@ describe('vscode-radio', () => {
     expect(el.getAttribute('size')).to.eq('large');
   });
 
+  it('uses a 16px height at the small size', async () => {
+    const el = await fixture<VscodeRadio>(
+      html`<vscode-radio size="small">Radio</vscode-radio>`
+    );
+
+    expect(el.getBoundingClientRect().height).to.eq(16);
+  });
+
   it('type should be "radio"', async () => {
     const el = await fixture<VscodeRadio>(html`<vscode-radio></vscode-radio>`);
 
diff --git a/src/vscode-single-select/vscode-single-select.test.ts b/src/vscode-single-select/vscode-single-select.test.ts
index fc046b82d..002fe39c9 100644
--- a/src/vscode-single-select/vscode-single-select.test.ts
+++ b/src/vscode-single-select/vscode-single-select.test.ts
@@ -48,6 +48,16 @@ describe('vscode-single-select', () => {
     expect(el.getAttribute('size')).to.eq('small');
   });
 
+  it('uses a 16px height at the small size', async () => {
+    const el = await fixture<VscodeSingleSelect>(html`
+      <vscode-single-select size="small">
+        <vscode-option selected>Option</vscode-option>
+      </vscode-single-select>
+    `);
+
+    expect(el.getBoundingClientRect().height).to.eq(16);
+  });
+
   describe('select mode', () => {
     it('should display selected value', async () => {
       const el = (await fixture(html`

From 7c2f8747f0418757811dd5eb7c311d7084765703 Mon Sep 17 00:00:00 2001
From: 171H <40647432+171h@users.noreply.github.com>
Date: Sun, 30 Aug 2026 02:49:45 +0000
Subject: [PATCH 26/31] fix(dev): resize label demo controls together

---
 dev/vscode-label/basic-example.html | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/dev/vscode-label/basic-example.html b/dev/vscode-label/basic-example.html
index 1f71e18a5..20a9a0941 100644
--- a/dev/vscode-label/basic-example.html
+++ b/dev/vscode-label/basic-example.html
@@ -41,7 +41,9 @@
       document.querySelectorAll('.size-buttons button').forEach((button) => {
         button.addEventListener('click', () => {
           document
-            .querySelectorAll('#size-demo-target vscode-form-group')
+            .querySelectorAll(
+              '#size-demo-target vscode-form-group, #size-demo-target vscode-label, #size-demo-target vscode-textfield'
+            )
             .forEach((el) => {
               el.setAttribute('size', button.dataset.size);
             });

From 5abfa9a9863721865518d616f8ffadbd2f0c12b8 Mon Sep 17 00:00:00 2001
From: 171H <40647432+171h@users.noreply.github.com>
Date: Tue, 1 Sep 2026 04:18:39 +0000
Subject: [PATCH 27/31] Rename package to nusys-ui
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

### Motivation

- 将发布包名从 `@vscode-elements/elements` 更改为 `nusys-ui`，以反映新的命名/品牌决策并确保文档与打包元数据一致。

### Description

- 在 `package.json` 中将 `name` 字段从 `@vscode-elements/elements` 更新为 `nusys-ui`。
- 同步更新 `package-lock.json` 根元数据中的 `name` 条目以匹配新的包名。
- 在 `README.md` 中将 `npm link @vscode-elements/elements` 等使用示例替换为 `nusys-ui`，并调整示例联动命令。
- 更新 `src/vscode-tree/vscode-tree.ts` 中的示例导入注释，将 `@vscode-elements/elements/...` 改为 `nusys-ui/...`。
- 已将更改提交到仓库（提交信息：`chore: rename package to nusys-ui`，提交哈希 `dc6b9fb`）。

### Testing

- `node -e "const p=require('./package.json'); const l=require('./package-lock.json'); if(p.name !== 'nusys-ui' || l.name !== p.name || l.packages[''].name !== p.name) process.exit(1); console.log(p.name)"` — 成功且输出 `nusys-ui`。
- `rg -n '@vscode-elements/elements' --glob '!node_modules' .` — 成功，未发现旧包名引用。
- `npm ci --ignore-scripts` — 成功安装依赖（注意输出中包含依赖性审计警告），命令完成。
- `npm run lint` — 成功完成，只有与本次修改无关的 ESLint 警告存在。
- `npm run prettier` — 成功，所有文件通过 Prettier 检查。
- `npm pack --dry-run` — 成功生成包预览并列出了 `nusys-ui-2.5.1.tgz` 的内容。
- `git diff --check` — 成功（未发现问题）。
---
 README.md                      | 4 ++--
 package-lock.json              | 4 ++--
 package.json                   | 2 +-
 src/vscode-tree/vscode-tree.ts | 4 ++--
 4 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/README.md b/README.md
index bb35b5781..ff34a7b2d 100644
--- a/README.md
+++ b/README.md
@@ -13,7 +13,7 @@ npm link
 Then, go to the library where you want to use it and run:
 
 ```bash
-npm link @vscode-elements/elements
+npm link nusys-ui
 ```
 
 > [!WARNING]
@@ -21,7 +21,7 @@ npm link @vscode-elements/elements
 > Multiple packages must be linked with a single command. For example:
 >
 > ```bash
-> npm link @vscode-elements/elements @vscode-elements/webview-playground
+> npm link nusys-ui @vscode-elements/webview-playground
 > ```
 
 Don't forget to run the build script before using the package.
diff --git a/package-lock.json b/package-lock.json
index ae76b0010..6a4511426 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,11 +1,11 @@
 {
-  "name": "@vscode-elements/elements",
+  "name": "nusys-ui",
   "version": "2.5.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
-      "name": "@vscode-elements/elements",
+      "name": "nusys-ui",
       "version": "2.5.1",
       "license": "MIT",
       "dependencies": {
diff --git a/package.json b/package.json
index 9bd39b9ce..04ce1119b 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@vscode-elements/elements",
+  "name": "nusys-ui",
   "version": "2.5.1",
   "description": "Web components for creating Visual Studio Code extensions",
   "main": "dist/main.js",
diff --git a/src/vscode-tree/vscode-tree.ts b/src/vscode-tree/vscode-tree.ts
index d586f03c6..75607375f 100644
--- a/src/vscode-tree/vscode-tree.ts
+++ b/src/vscode-tree/vscode-tree.ts
@@ -84,7 +84,7 @@ export class VscodeTree extends VscElement {
    * Valid options are available as constants.
    *
    * ```javascript
-   * import {ExpandMode} from '@vscode-elements/elements/dist/vscode-tree/vscode-tree.js';
+   * import {ExpandMode} from 'nusys-ui/dist/vscode-tree/vscode-tree.js';
    *
    * document.querySelector('vscode-tree').expandMode = ExpandMode.singleClick;
    * ```
@@ -116,7 +116,7 @@ export class VscodeTree extends VscElement {
    * Valid options are available as constants.
    *
    * ```javascript
-   * import {IndentGuides} from '@vscode-elements/elements/dist/vscode-tree/vscode-tree.js';
+   * import {IndentGuides} from 'nusys-ui/dist/vscode-tree/vscode-tree.js';
    *
    * document.querySelector('vscode-tree').expandMode = IndentGuides.onHover;
    * ```

From b86abd25d29b0be43d4cbe161d14b1e090ce9ac6 Mon Sep 17 00:00:00 2001
From: 171H <40647432+171h@users.noreply.github.com>
Date: Tue, 1 Sep 2026 07:15:12 +0000
Subject: [PATCH 28/31] feat(release): add local npm release workflow

---
 CONTRIBUTING.md              |  11 ++++
 package.json                 |   2 +
 scripts/release-lib.mjs      | 110 +++++++++++++++++++++++++++++++++++
 scripts/release-lib.test.mjs |  38 ++++++++++++
 scripts/release.mjs          | 103 ++++++++++++++++++++++++++++++++
 5 files changed, 264 insertions(+)
 create mode 100644 scripts/release-lib.mjs
 create mode 100644 scripts/release-lib.test.mjs
 create mode 100644 scripts/release.mjs

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 5f50b7a0e..b722237b9 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -27,3 +27,14 @@ Writing tests is not required, but we appreciate it if you add tests for new cod
 affect the user-facing functionality, please update the changelog file.
 
 Commit messages aim to follow the [50/72 style](https://tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html).
+
+## Publish a release
+
+Releases are created locally with `npm run release`. The command defaults to a patch release; pass
+`minor`, `major`, or an explicit version when needed, for example `npm run release -- minor`.
+
+The release assistant requires a clean Git working tree. Before publishing, it previews and updates
+`CHANGELOG.md` from commits since the latest tag, synchronizes the package and component versions,
+runs the build, tests, lint, and formatting checks, and creates an npm tarball. After confirmation it
+creates the release commit and annotated tag, publishes the tarball to npmjs, and optionally pushes
+the commit and tag to `origin`. The npm account used locally must have publish access to `nusys-ui`.
diff --git a/package.json b/package.json
index 04ce1119b..e56307e28 100644
--- a/package.json
+++ b/package.json
@@ -33,6 +33,8 @@
     "icons": "node scripts/generateIconList.js",
     "vscode-data": "wireit",
     "ncu": "ncu -u",
+    "release": "node scripts/release.mjs",
+    "test:release": "node --test scripts/release-lib.test.mjs",
     "prepare": "npx playwright install chromium --only-shell"
   },
   "wireit": {
diff --git a/scripts/release-lib.mjs b/scripts/release-lib.mjs
new file mode 100644
index 000000000..862367cca
--- /dev/null
+++ b/scripts/release-lib.mjs
@@ -0,0 +1,110 @@
+import {execFileSync} from 'node:child_process';
+import fs from 'node:fs';
+import path from 'node:path';
+import {fileURLToPath} from 'node:url';
+import semver from 'semver';
+
+export const repoRoot = path.resolve(
+  path.dirname(fileURLToPath(import.meta.url)),
+  '..'
+);
+export const changelogPath = path.join(repoRoot, 'CHANGELOG.md');
+
+const changelogGroups = [
+  ['feat', 'Added'],
+  ['fix', 'Fixed'],
+  ['perf', 'Performance'],
+  ['refactor', 'Changed'],
+  ['docs', 'Documentation'],
+  ['test', 'Tests'],
+  ['ci', 'Continuous integration'],
+  ['chore', 'Maintenance'],
+];
+
+export function git(args, capture = false, quiet = false) {
+  return execFileSync('git', args, {
+    cwd: repoRoot,
+    encoding: 'utf8',
+    stdio: ['ignore', capture ? 'pipe' : 'inherit', quiet ? 'pipe' : 'inherit'],
+  }).trim();
+}
+
+export function resolveVersion(currentVersion, requestedVersion) {
+  const request = requestedVersion?.replace(/^v/, '') ?? 'patch';
+  const nextVersion = ['major', 'minor', 'patch'].includes(request)
+    ? semver.inc(currentVersion, request)
+    : semver.valid(request);
+  if (!nextVersion || !semver.gt(nextVersion, currentVersion)) {
+    throw new Error(
+      `Invalid version "${requestedVersion}". Use major, minor, patch, or a version newer than ${currentVersion}.`
+    );
+  }
+  return nextVersion;
+}
+
+export function getLastReleaseRef(currentVersion) {
+  try {
+    return git(['describe', '--tags', '--abbrev=0', 'HEAD'], true, true);
+  } catch {
+    const releases = git(['log', '--format=%H%x09%s'], true)
+      .split('\n')
+      .map((line) => line.split('\t'));
+    return (
+      releases.find(([, subject]) =>
+        [`${currentVersion}`, `v${currentVersion}`].includes(subject)
+      )?.[0] ?? ''
+    );
+  }
+}
+
+export function collectCommits(lastTag) {
+  const range = lastTag ? `${lastTag}..HEAD` : 'HEAD';
+  const output = git(
+    ['log', range, '--no-merges', '--pretty=format:%h%x09%s'],
+    true
+  );
+  if (!output) return [];
+  return output.split('\n').flatMap((line) => {
+    const [hash, subject] = line.split('\t');
+    if (/^chore\(release\):/i.test(subject)) return [];
+    const match = subject.match(/^([a-z]+)(?:\(([^)]+)\))?:\s+(.+)$/i);
+    return [
+      {
+        hash,
+        type: match?.[1].toLowerCase() ?? 'chore',
+        scope: match?.[2] ?? '',
+        subject: match?.[3] ?? subject,
+      },
+    ];
+  });
+}
+
+export function renderChangelog(version, commits, date = new Date()) {
+  const lines = [`## [${version}] - ${date.toISOString().slice(0, 10)}`, ''];
+  let rendered = false;
+  for (const [type, heading] of changelogGroups) {
+    const entries = commits.filter((commit) => commit.type === type);
+    if (!entries.length) continue;
+    rendered = true;
+    lines.push(`### ${heading}`, '');
+    for (const commit of entries) {
+      const scope = commit.scope ? `**${commit.scope}**: ` : '';
+      lines.push(`- ${scope}${commit.subject} (${commit.hash})`);
+    }
+    lines.push('');
+  }
+  if (!rendered) lines.push('- No user-facing changes.', '');
+  return lines.join('\n');
+}
+
+export function updateChangelog(version, commits) {
+  const content = fs.readFileSync(changelogPath, 'utf8');
+  const block = renderChangelog(version, commits);
+  const firstRelease = content.search(/^## \[/m);
+  if (firstRelease < 0)
+    throw new Error('Could not find where to insert the new CHANGELOG entry.');
+  fs.writeFileSync(
+    changelogPath,
+    `${content.slice(0, firstRelease)}${block}\n${content.slice(firstRelease)}`
+  );
+}
diff --git a/scripts/release-lib.test.mjs b/scripts/release-lib.test.mjs
new file mode 100644
index 000000000..cf79a5e4f
--- /dev/null
+++ b/scripts/release-lib.test.mjs
@@ -0,0 +1,38 @@
+import assert from 'node:assert/strict';
+import test from 'node:test';
+
+import {renderChangelog, resolveVersion} from './release-lib.mjs';
+
+test('resolveVersion accepts release types and explicit versions', () => {
+  assert.equal(resolveVersion('2.5.1', 'patch'), '2.5.2');
+  assert.equal(resolveVersion('2.5.1', 'minor'), '2.6.0');
+  assert.equal(resolveVersion('2.5.1', 'v3.0.0'), '3.0.0');
+  assert.throws(() => resolveVersion('2.5.1', '2.5.0'), /Invalid version/);
+});
+
+test('renderChangelog groups conventional commits', () => {
+  const result = renderChangelog(
+    '2.6.0',
+    [
+      {
+        hash: 'abc1234',
+        type: 'feat',
+        scope: 'button',
+        subject: 'add busy state',
+      },
+      {
+        hash: 'def5678',
+        type: 'fix',
+        scope: '',
+        subject: 'correct focus handling',
+      },
+    ],
+    new Date('2026-09-01T00:00:00Z')
+  );
+  assert.match(result, /^## \[2\.6\.0\] - 2026-09-01/);
+  assert.match(
+    result,
+    /### Added\n\n- \*\*button\*\*: add busy state \(abc1234\)/
+  );
+  assert.match(result, /### Fixed\n\n- correct focus handling \(def5678\)/);
+});
diff --git a/scripts/release.mjs b/scripts/release.mjs
new file mode 100644
index 000000000..ac91e4861
--- /dev/null
+++ b/scripts/release.mjs
@@ -0,0 +1,103 @@
+#!/usr/bin/env node
+
+import {execFileSync} from 'node:child_process';
+import fs from 'node:fs';
+import path from 'node:path';
+import process from 'node:process';
+import readline from 'node:readline/promises';
+import {
+  collectCommits,
+  getLastReleaseRef,
+  git,
+  renderChangelog,
+  repoRoot,
+  resolveVersion,
+  updateChangelog,
+} from './release-lib.mjs';
+
+function run(command, args) {
+  execFileSync(command, args, {cwd: repoRoot, stdio: 'inherit'});
+}
+
+async function confirm(rl, question) {
+  return ['y', 'yes'].includes(
+    (await rl.question(`${question} [y/N] `)).trim().toLowerCase()
+  );
+}
+
+async function main() {
+  if (git(['status', '--porcelain'], true))
+    throw new Error(
+      'The working tree is not clean. Commit or stash your changes first.'
+    );
+  const currentVersion = JSON.parse(
+    fs.readFileSync(path.join(repoRoot, 'package.json'), 'utf8')
+  ).version;
+  const version = resolveVersion(currentVersion, process.argv[2]);
+  const tag = `v${version}`;
+  const releaseBase = getLastReleaseRef(currentVersion);
+  const commits = collectCommits(releaseBase);
+  const rl = readline.createInterface({
+    input: process.stdin,
+    output: process.stdout,
+  });
+
+  try {
+    console.log(`\nRelease ${currentVersion} -> ${version}`);
+    console.log(
+      `Commit range: ${releaseBase ? `${releaseBase}..HEAD` : 'HEAD'}`
+    );
+    console.log('\nCHANGELOG preview:\n');
+    console.log(renderChangelog(version, commits));
+    console.log(
+      'The release will update versions and CHANGELOG, run checks, create a commit/tag, and publish to npmjs.'
+    );
+    if (!(await confirm(rl, 'Continue?')))
+      return console.log('Release cancelled.');
+
+    run('npm', ['version', version, '--no-git-tag-version']);
+    run('node', ['scripts/update-version-number.mjs']);
+    updateChangelog(version, commits);
+    for (const script of ['build', 'test', 'lint', 'prettier'])
+      run('npm', ['run', script]);
+
+    const packResult = JSON.parse(
+      execFileSync('npm', ['pack', '--json'], {cwd: repoRoot, encoding: 'utf8'})
+    );
+    const tarball = packResult[0]?.filename;
+    if (!tarball)
+      throw new Error('npm pack did not return a package filename.');
+
+    git([
+      'add',
+      'package.json',
+      'package-lock.json',
+      'CHANGELOG.md',
+      'src/includes/VscElement.ts',
+    ]);
+    git(['commit', '-m', `chore(release): publish ${tag}`]);
+    git(['tag', '-a', tag, '-m', tag]);
+    run('npm', ['publish', path.join(repoRoot, tarball), '--access=public']);
+    fs.rmSync(path.join(repoRoot, tarball), {force: true});
+    console.log(`\nPublished nusys-ui@${version} to npmjs.`);
+
+    if (await confirm(rl, 'Push the release commit and tag to origin?')) {
+      const branch = git(['branch', '--show-current'], true);
+      if (!branch)
+        throw new Error('Cannot push a release from a detached HEAD.');
+      git(['push', 'origin', branch]);
+      git(['push', 'origin', tag]);
+    } else {
+      console.log(`Push later with: git push origin && git push origin ${tag}`);
+    }
+  } finally {
+    rl.close();
+  }
+}
+
+main().catch((error) => {
+  console.error(
+    `Release failed: ${error instanceof Error ? error.message : error}`
+  );
+  process.exitCode = 1;
+});

From 4a2af71613289f14628b0340bc8707f521042088 Mon Sep 17 00:00:00 2001
From: 171H <40647432+171h@users.noreply.github.com>
Date: Tue, 1 Sep 2026 07:31:43 +0000
Subject: [PATCH 29/31] fix(release): publish tagged versions in GitHub Actions

---
 .github/workflows/release.yml     | 157 +++++++++---------------------
 CONTRIBUTING.md                   |  10 +-
 scripts/extract-release-notes.mjs |  34 +++++++
 scripts/release-lib.test.mjs      |  20 ++++
 scripts/release.mjs               |  45 +++++----
 5 files changed, 133 insertions(+), 133 deletions(-)
 create mode 100644 scripts/extract-release-notes.mjs

diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index 3a7005169..9ba89cee0 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -1,144 +1,83 @@
 name: Release
 
+# `npm run release` creates and pushes this tag after updating the version and
+# CHANGELOG. Building and publishing happen only in GitHub Actions.
 on:
-  workflow_dispatch:
-    inputs:
-      releaseType:
-        description: 'Release Type'
-        required: true
-        type: choice
-        default: 'patch'
-        options:
-          - patch
-          - minor
-          - major
-      releaseChannel:
-        description: 'Release Channel'
-        required: true
-        type: choice
-        default: next
-        options:
-          - stable
-          - next
-          - nextmajor
+  push:
+    tags:
+      - 'v*'
 
 permissions:
-  id-token: write
   contents: write
+  id-token: write
 
 jobs:
   release:
     runs-on: ubuntu-latest
     steps:
-      - name: Input parameters
-        run: echo "${{ toJSON(github.event.inputs) }}"
-
-      - name: Clone Repository
+      - name: Checkout repository
         uses: actions/checkout@v7
         with:
           fetch-depth: 0
 
-      - name: Setup Git
-        run: |
-          git config --global user.name "github-actions"
-          git config --global user.email "szoftverhiba+github-actions@gmail.com"
-
-      - name: Get Current Version Number
-        run: |
-          CURRENT_VERSION=$(npm pkg get version | cut -d'"' -f 2)
-          echo "CURRENT_VERSION=$CURRENT_VERSION" >> $GITHUB_ENV
-          echo $CURRENT_VERSION
-
-      - name: Setup Node version
+      - name: Setup Node.js
         uses: actions/setup-node@v6
         with:
-          scope: '@vscode-elements'
           node-version: 24
           registry-url: 'https://registry.npmjs.org'
-          cache: 'npm'
-          cache-dependency-path: |
-            package-lock.json
+          cache: npm
+
+      - name: Verify release version
+        shell: bash
+        run: |
+          PACKAGE_VERSION=$(node -p "require('./package.json').version")
+          TAG_VERSION=${GITHUB_REF_NAME#v}
+          if [[ "$PACKAGE_VERSION" != "$TAG_VERSION" ]]; then
+            echo "Tag version $TAG_VERSION does not match package version $PACKAGE_VERSION" >&2
+            exit 1
+          fi
+          echo "PACKAGE_VERSION=$PACKAGE_VERSION" >> "$GITHUB_ENV"
 
       - name: Install dependencies
         run: npm ci
 
-      - name: Bump version (Next)
-        run: |
-          RELEASE_VERSION=$(npx semver -i prerelease --preid=pre $CURRENT_VERSION)
-          echo "RELEASE_VERSION=$RELEASE_VERSION" >> $GITHUB_ENV
-          npm version $RELEASE_VERSION --git-tag-version=false
-        if: ${{ github.event.inputs.releaseChannel == 'next' || github.event.inputs.releaseChannel == 'nextmajor' }}
+      - name: Build
+        run: npm run build
 
-      - name: Bump version (Stable)
-        run: |
-          RELEASE_VERSION=$(npx semver $CURRENT_VERSION -i ${{ github.event.inputs.releaseType }})
-          echo "RELEASE_VERSION=$RELEASE_VERSION" >> $GITHUB_ENV
-          npm version $RELEASE_VERSION --git-tag-version=false
-        if: ${{ github.event.inputs.releaseChannel == 'stable' }}
+      - name: Test
+        run: npm run test
 
-      - name: Update Changelog (Stable)
-        run: node scripts/update-changelog.mjs
-        if: ${{ github.event.inputs.releaseChannel == 'stable' }}
+      - name: Test release scripts
+        run: npm run test:release
 
-      - name: Update version number in the base class
-        run: node scripts/update-version-number.mjs
+      - name: Lint
+        run: npm run lint
 
-      - name: Build
-        run: |
-          npm run build
-          npm run test
-          npm run lint
-          npm pack
+      - name: Check formatting
+        run: npm run prettier
 
-      - name: Tagging
-        run: |
-          git add .
-          git commit -m "$RELEASE_VERSION"
-          git tag -a v$RELEASE_VERSION -m "$RELEASE_VERSION"
+      - name: Pack package
+        run: npm pack
 
-      - name: Push tag
+      - name: Publish to npmjs
+        shell: bash
         run: |
-          git push
-          git push origin --tags
-
-      - run: |
-          export GIT_TAG=$(git describe --tags --abbrev=0)
-          echo "GIT_TAG=$GIT_TAG" >> $GITHUB_ENV
-
-      - name: Publish to Npmjs.com (Next)
-        run: npm publish --access=public --tag=next vscode-elements-elements-${{ env.RELEASE_VERSION }}.tgz
+          if npm view "nusys-ui@${PACKAGE_VERSION}" version >/dev/null 2>&1; then
+            echo "nusys-ui@${PACKAGE_VERSION} is already published; skipping npm publish."
+          else
+            npm publish "nusys-ui-${PACKAGE_VERSION}.tgz" --access=public --provenance
+          fi
         env:
           NODE_AUTH_TOKEN: ${{ secrets.ORG_NPM_TOKEN }}
-        if: ${{ github.event.inputs.releaseChannel == 'next' }}
 
-      - name: Publish to Npmjs.com (Next Major)
-        run: npm publish --access=public --tag=nextmajor vscode-elements-elements-${{ env.RELEASE_VERSION }}.tgz
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.ORG_NPM_TOKEN }}
-        if: ${{ github.event.inputs.releaseChannel == 'nextmajor' }}
+      - name: Extract release notes
+        run: node scripts/extract-release-notes.mjs "$PACKAGE_VERSION"
 
-      - name: Publish to Npmjs.com (Stable)
-        run: npm publish --access=public vscode-elements-elements-${{ env.RELEASE_VERSION }}.tgz
+      - name: Create GitHub release
         env:
-          NODE_AUTH_TOKEN: ${{ secrets.ORG_NPM_TOKEN }}
-        if: ${{ github.event.inputs.releaseChannel == 'stable' }}
-
-      - name: Github Release (Next)
-        uses: ncipollo/release-action@v1
-        if: ${{ github.event.inputs.releaseChannel == 'next' || github.event.inputs.releaseChannel == 'nextmajor' }}
-        with:
-          artifacts: './vscode-elements-elements-*'
-          prerelease: true
-          draft: true
-          tag: ${{ env.GIT_TAG }}
-          generateReleaseNotes: true
-
-      - name: Github Release (Stable)
-        uses: ncipollo/release-action@v1
-        if: ${{ github.event.inputs.releaseChannel == 'stable' }}
-        with:
-          artifacts: './vscode-elements-elements-*'
-          prerelease: false
-          draft: true
-          tag: ${{ env.GIT_TAG }}
-          generateReleaseNotes: true
+          GH_TOKEN: ${{ github.token }}
+        run: >-
+          gh release create "$GITHUB_REF_NAME"
+          "nusys-ui-${PACKAGE_VERSION}.tgz"
+          --title "$GITHUB_REF_NAME"
+          --notes-file dist/release-notes.md
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index b722237b9..4ac303fee 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -33,8 +33,8 @@ Commit messages aim to follow the [50/72 style](https://tbaggery.com/2008/04/19/
 Releases are created locally with `npm run release`. The command defaults to a patch release; pass
 `minor`, `major`, or an explicit version when needed, for example `npm run release -- minor`.
 
-The release assistant requires a clean Git working tree. Before publishing, it previews and updates
-`CHANGELOG.md` from commits since the latest tag, synchronizes the package and component versions,
-runs the build, tests, lint, and formatting checks, and creates an npm tarball. After confirmation it
-creates the release commit and annotated tag, publishes the tarball to npmjs, and optionally pushes
-the commit and tag to `origin`. The npm account used locally must have publish access to `nusys-ui`.
+The release assistant requires a clean Git working tree. It previews and updates `CHANGELOG.md` from
+commits since the latest release, synchronizes `package.json` and `package-lock.json`, and creates a
+release commit and annotated tag. When that tag is pushed to `origin`, the GitHub `Release` workflow
+runs all verification steps and publishes the package to npmjs. npm publish credentials are only
+used by GitHub Actions; the local command never publishes a package directly.
diff --git a/scripts/extract-release-notes.mjs b/scripts/extract-release-notes.mjs
new file mode 100644
index 000000000..c4c919b92
--- /dev/null
+++ b/scripts/extract-release-notes.mjs
@@ -0,0 +1,34 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import process from 'node:process';
+import {fileURLToPath} from 'node:url';
+
+export function extractReleaseNotes(changelog, version) {
+  const escapedVersion = version.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  const match = changelog.match(
+    new RegExp(
+      `^## \\[${escapedVersion}\\][^\\n]*\\n([\\s\\S]*?)(?=^## \\[|(?![\\s\\S]))`,
+      'm'
+    )
+  );
+  if (!match) throw new Error(`CHANGELOG entry for ${version} was not found.`);
+  return match[1].trim();
+}
+
+function main() {
+  const version = process.argv[2]?.replace(/^v/, '');
+  if (!version)
+    throw new Error('Usage: node scripts/extract-release-notes.mjs <version>');
+  const repoRoot = path.resolve(
+    path.dirname(fileURLToPath(import.meta.url)),
+    '..'
+  );
+  const notes = extractReleaseNotes(
+    fs.readFileSync(path.join(repoRoot, 'CHANGELOG.md'), 'utf8'),
+    version
+  );
+  fs.mkdirSync(path.join(repoRoot, 'dist'), {recursive: true});
+  fs.writeFileSync(path.join(repoRoot, 'dist/release-notes.md'), `${notes}\n`);
+}
+
+if (process.argv[1] === fileURLToPath(import.meta.url)) main();
diff --git a/scripts/release-lib.test.mjs b/scripts/release-lib.test.mjs
index cf79a5e4f..9e4af3614 100644
--- a/scripts/release-lib.test.mjs
+++ b/scripts/release-lib.test.mjs
@@ -2,6 +2,7 @@ import assert from 'node:assert/strict';
 import test from 'node:test';
 
 import {renderChangelog, resolveVersion} from './release-lib.mjs';
+import {extractReleaseNotes} from './extract-release-notes.mjs';
 
 test('resolveVersion accepts release types and explicit versions', () => {
   assert.equal(resolveVersion('2.5.1', 'patch'), '2.5.2');
@@ -10,6 +11,25 @@ test('resolveVersion accepts release types and explicit versions', () => {
   assert.throws(() => resolveVersion('2.5.1', '2.5.0'), /Invalid version/);
 });
 
+test('extractReleaseNotes returns only the requested release body', () => {
+  const changelog = `# Changelog
+
+## [2.6.0] - 2026-09-01
+
+### Added
+
+- New release workflow.
+
+## [2.5.1] - 2026-02-21
+
+- Previous release.
+`;
+  assert.equal(
+    extractReleaseNotes(changelog, '2.6.0'),
+    '### Added\n\n- New release workflow.'
+  );
+});
+
 test('renderChangelog groups conventional commits', () => {
   const result = renderChangelog(
     '2.6.0',
diff --git a/scripts/release.mjs b/scripts/release.mjs
index ac91e4861..922241e46 100644
--- a/scripts/release.mjs
+++ b/scripts/release.mjs
@@ -15,10 +15,6 @@ import {
   updateChangelog,
 } from './release-lib.mjs';
 
-function run(command, args) {
-  execFileSync(command, args, {cwd: repoRoot, stdio: 'inherit'});
-}
-
 async function confirm(rl, question) {
   return ['y', 'yes'].includes(
     (await rl.question(`${question} [y/N] `)).trim().toLowerCase()
@@ -50,23 +46,33 @@ async function main() {
     console.log('\nCHANGELOG preview:\n');
     console.log(renderChangelog(version, commits));
     console.log(
-      'The release will update versions and CHANGELOG, run checks, create a commit/tag, and publish to npmjs.'
+      'The release will update versions and CHANGELOG, then create a commit and tag.'
     );
     if (!(await confirm(rl, 'Continue?')))
       return console.log('Release cancelled.');
 
-    run('npm', ['version', version, '--no-git-tag-version']);
-    run('node', ['scripts/update-version-number.mjs']);
-    updateChangelog(version, commits);
-    for (const script of ['build', 'test', 'lint', 'prettier'])
-      run('npm', ['run', script]);
-
-    const packResult = JSON.parse(
-      execFileSync('npm', ['pack', '--json'], {cwd: repoRoot, encoding: 'utf8'})
+    const packageJson = JSON.parse(
+      fs.readFileSync(path.join(repoRoot, 'package.json'), 'utf8')
     );
-    const tarball = packResult[0]?.filename;
-    if (!tarball)
-      throw new Error('npm pack did not return a package filename.');
+    packageJson.version = version;
+    fs.writeFileSync(
+      path.join(repoRoot, 'package.json'),
+      `${JSON.stringify(packageJson, null, 2)}\n`
+    );
+    const packageLock = JSON.parse(
+      fs.readFileSync(path.join(repoRoot, 'package-lock.json'), 'utf8')
+    );
+    packageLock.version = version;
+    packageLock.packages[''].version = version;
+    fs.writeFileSync(
+      path.join(repoRoot, 'package-lock.json'),
+      `${JSON.stringify(packageLock, null, 2)}\n`
+    );
+    execFileSync('node', ['scripts/update-version-number.mjs'], {
+      cwd: repoRoot,
+      stdio: 'inherit',
+    });
+    updateChangelog(version, commits);
 
     git([
       'add',
@@ -77,9 +83,7 @@ async function main() {
     ]);
     git(['commit', '-m', `chore(release): publish ${tag}`]);
     git(['tag', '-a', tag, '-m', tag]);
-    run('npm', ['publish', path.join(repoRoot, tarball), '--access=public']);
-    fs.rmSync(path.join(repoRoot, tarball), {force: true});
-    console.log(`\nPublished nusys-ui@${version} to npmjs.`);
+    console.log(`\nCreated release commit and tag ${tag}.`);
 
     if (await confirm(rl, 'Push the release commit and tag to origin?')) {
       const branch = git(['branch', '--show-current'], true);
@@ -87,6 +91,9 @@ async function main() {
         throw new Error('Cannot push a release from a detached HEAD.');
       git(['push', 'origin', branch]);
       git(['push', 'origin', tag]);
+      console.log(
+        `GitHub Actions will build and publish nusys-ui@${version} to npmjs.`
+      );
     } else {
       console.log(`Push later with: git push origin && git push origin ${tag}`);
     }

From df3704f02d473871237a3d810e7323ce4af66ee9 Mon Sep 17 00:00:00 2001
From: 171H <40647432+171h@users.noreply.github.com>
Date: Wed, 2 Sep 2026 21:25:09 +0800
Subject: [PATCH 30/31] ci: require version tag for releases

---
 .github/workflows/release.yml | 31 +++++++++++++++++++++++--------
 CONTRIBUTING.md               |  8 +++++---
 scripts/release.mjs           |  2 +-
 3 files changed, 29 insertions(+), 12 deletions(-)

diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index 9ba89cee0..a3a0844a1 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -1,11 +1,14 @@
 name: Release
 
-# `npm run release` creates and pushes this tag after updating the version and
-# CHANGELOG. Building and publishing happen only in GitHub Actions.
+# `npm run release` creates and pushes a tag after updating the version and
+# CHANGELOG. Start this workflow manually and enter that tag to publish it.
 on:
-  push:
-    tags:
-      - 'v*'
+  workflow_dispatch:
+    inputs:
+      version_tag:
+        description: 'Existing release tag to publish, for example v2.6.0'
+        required: true
+        type: string
 
 permissions:
   contents: write
@@ -14,10 +17,22 @@ permissions:
 jobs:
   release:
     runs-on: ubuntu-latest
+    env:
+      VERSION_TAG: ${{ inputs.version_tag }}
     steps:
+      - name: Validate release tag
+        shell: bash
+        run: |
+          if [[ ! "$VERSION_TAG" =~ ^v(0|[1-9][0-9]*)\.(0|[1-9][0-9]*)\.(0|[1-9][0-9]*)(-[0-9A-Za-z.-]+)?(\+[0-9A-Za-z.-]+)?$ ]]; then
+            echo "Invalid version tag: $VERSION_TAG" >&2
+            echo "Expected a tag such as v2.6.0 or v2.6.0-beta.1" >&2
+            exit 1
+          fi
+
       - name: Checkout repository
         uses: actions/checkout@v7
         with:
+          ref: refs/tags/${{ inputs.version_tag }}
           fetch-depth: 0
 
       - name: Setup Node.js
@@ -31,7 +46,7 @@ jobs:
         shell: bash
         run: |
           PACKAGE_VERSION=$(node -p "require('./package.json').version")
-          TAG_VERSION=${GITHUB_REF_NAME#v}
+          TAG_VERSION=${VERSION_TAG#v}
           if [[ "$PACKAGE_VERSION" != "$TAG_VERSION" ]]; then
             echo "Tag version $TAG_VERSION does not match package version $PACKAGE_VERSION" >&2
             exit 1
@@ -77,7 +92,7 @@ jobs:
         env:
           GH_TOKEN: ${{ github.token }}
         run: >-
-          gh release create "$GITHUB_REF_NAME"
+          gh release create "$VERSION_TAG"
           "nusys-ui-${PACKAGE_VERSION}.tgz"
-          --title "$GITHUB_REF_NAME"
+          --title "$VERSION_TAG"
           --notes-file dist/release-notes.md
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 4ac303fee..bc67a67fc 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -35,6 +35,8 @@ Releases are created locally with `npm run release`. The command defaults to a p
 
 The release assistant requires a clean Git working tree. It previews and updates `CHANGELOG.md` from
 commits since the latest release, synchronizes `package.json` and `package-lock.json`, and creates a
-release commit and annotated tag. When that tag is pushed to `origin`, the GitHub `Release` workflow
-runs all verification steps and publishes the package to npmjs. npm publish credentials are only
-used by GitHub Actions; the local command never publishes a package directly.
+release commit and annotated tag. After pushing that tag to `origin`, open the GitHub `Release`
+workflow, choose **Run workflow**, and enter the existing version tag (for example, `v2.6.0`). The
+workflow checks out that tag, runs all verification steps, and publishes the package to npmjs. npm
+publish credentials are only used by GitHub Actions; the local command never publishes a package
+directly.
diff --git a/scripts/release.mjs b/scripts/release.mjs
index 922241e46..501ccde68 100644
--- a/scripts/release.mjs
+++ b/scripts/release.mjs
@@ -92,7 +92,7 @@ async function main() {
       git(['push', 'origin', branch]);
       git(['push', 'origin', tag]);
       console.log(
-        `GitHub Actions will build and publish nusys-ui@${version} to npmjs.`
+        `Tag ${tag} was pushed. Run the GitHub Actions Release workflow and enter ${tag} to build and publish nusys-ui@${version} to npmjs.`
       );
     } else {
       console.log(`Push later with: git push origin && git push origin ${tag}`);

From 194a47a53b4be97975b3bcef78b5706ace1901b6 Mon Sep 17 00:00:00 2001
From: 171H <40647432+171h@users.noreply.github.com>
Date: Wed, 2 Sep 2026 22:05:56 +0800
Subject: [PATCH 31/31] fix: keep small textfields 16px high

---
 docs/form-size.md                             |  5 +++++
 src/vscode-icon/vscode-icon.styles.ts         |  4 ++--
 src/vscode-icon/vscode-icon.test.ts           | 22 ++++++++++++++++---
 src/vscode-icon/vscode-icon.ts                |  6 ++---
 .../vscode-textfield.styles.ts                |  9 ++++++++
 src/vscode-textfield/vscode-textfield.test.ts | 17 ++++++++++++++
 6 files changed, 55 insertions(+), 8 deletions(-)

diff --git a/docs/form-size.md b/docs/form-size.md
index 99df3f7dd..c18f2167d 100644
--- a/docs/form-size.md
+++ b/docs/form-size.md
@@ -100,6 +100,11 @@ size (13px by default) for `medium`, and 15px for `large`. You can override the
 font size for a form group or an individual control with
 `--vsc-form-control-font-size`.
 
+Small textfields remain 16px high when `vscode-icon` elements are placed in the
+`content-before` or `content-after` slots. Slotted icons are adjusted to the
+available content height: regular icons render at 14px, while action icons use
+a 12px glyph with their focus border preserved.
+
 ## Buttons with icons
 
 Icons created by `vscode-button` follow the button size automatically:
diff --git a/src/vscode-icon/vscode-icon.styles.ts b/src/vscode-icon/vscode-icon.styles.ts
index 668dbbf0a..be19065d4 100644
--- a/src/vscode-icon/vscode-icon.styles.ts
+++ b/src/vscode-icon/vscode-icon.styles.ts
@@ -23,11 +23,11 @@ const styles: CSSResultGroup = [
     .button {
       border-color: transparent;
       border-style: solid;
-      border-width: 1px;
+      border-width: var(--vsc-icon-action-border-width, 1px);
       border-radius: 5px;
       color: currentColor;
       cursor: pointer;
-      padding: 2px;
+      padding: var(--vsc-icon-action-padding, 2px);
     }
 
     .button:hover {
diff --git a/src/vscode-icon/vscode-icon.test.ts b/src/vscode-icon/vscode-icon.test.ts
index e08ff254b..456161c48 100644
--- a/src/vscode-icon/vscode-icon.test.ts
+++ b/src/vscode-icon/vscode-icon.test.ts
@@ -47,10 +47,26 @@ describe('vscode-icon', () => {
       html`<vscode-icon name="account" size="large"></vscode-icon>`
     );
     const icon = el.shadowRoot?.querySelector('.codicon') as HTMLElement;
+    const computedStyle = getComputedStyle(icon);
 
-    expect(icon.style.height).to.eq('20px');
-    expect(icon.style.width).to.eq('20px');
-    expect(icon.style.fontSize).to.eq('20px');
+    expect(computedStyle.height).to.eq('20px');
+    expect(computedStyle.width).to.eq('20px');
+    expect(computedStyle.fontSize).to.eq('20px');
+  });
+
+  it('allows a containing component to override the rendered size', async () => {
+    const el = await fixture<VscodeIcon>(
+      html`<vscode-icon
+        name="account"
+        style="--vsc-icon-size: 12px"
+      ></vscode-icon>`
+    );
+    const icon = el.shadowRoot?.querySelector('.codicon') as HTMLElement;
+    const computedStyle = getComputedStyle(icon);
+
+    expect(computedStyle.height).to.eq('12px');
+    expect(computedStyle.width).to.eq('12px');
+    expect(computedStyle.fontSize).to.eq('12px');
   });
 
   it('rejects non-numeric size attributes', async () => {
diff --git a/src/vscode-icon/vscode-icon.ts b/src/vscode-icon/vscode-icon.ts
index de4f1a6f0..64ffa09c9 100644
--- a/src/vscode-icon/vscode-icon.ts
+++ b/src/vscode-icon/vscode-icon.ts
@@ -148,9 +148,9 @@ export class VscodeIcon extends VscElement {
       })}
       .style=${stylePropertyMap({
         animationDuration: String(this.spinDuration) + 's',
-        fontSize: this.size + 'px',
-        height: this.size + 'px',
-        width: this.size + 'px',
+        fontSize: `var(--vsc-icon-size, ${this.size}px)`,
+        height: `var(--vsc-icon-size, ${this.size}px)`,
+        width: `var(--vsc-icon-size, ${this.size}px)`,
       })}
     ></span>`;
 
diff --git a/src/vscode-textfield/vscode-textfield.styles.ts b/src/vscode-textfield/vscode-textfield.styles.ts
index 93bd531e3..bb4e5d23e 100644
--- a/src/vscode-textfield/vscode-textfield.styles.ts
+++ b/src/vscode-textfield/vscode-textfield.styles.ts
@@ -96,6 +96,15 @@ const styles: CSSResultGroup = [
       padding-top: 1px;
     }
 
+    :host([size='small']) ::slotted(vscode-icon) {
+      --vsc-icon-size: 14px;
+    }
+
+    :host([size='small']) ::slotted(vscode-icon[action-icon]) {
+      --vsc-icon-action-padding: 0;
+      --vsc-icon-size: 12px;
+    }
+
     :host([size='large']) input {
       padding-bottom: 5px;
       padding-top: 5px;
diff --git a/src/vscode-textfield/vscode-textfield.test.ts b/src/vscode-textfield/vscode-textfield.test.ts
index 0046e03eb..2be73efdd 100644
--- a/src/vscode-textfield/vscode-textfield.test.ts
+++ b/src/vscode-textfield/vscode-textfield.test.ts
@@ -2,6 +2,7 @@
 import sinon from 'sinon';
 import {aTimeout, expect, fixture, html} from '@open-wc/testing';
 import {sendKeys, sendMouse} from '@web/test-runner-commands';
+import '../vscode-icon/vscode-icon.js';
 import '../vscode-label/vscode-label.js';
 import {VscodeTextfield} from './index.js';
 
@@ -69,6 +70,22 @@ describe('vscode-textfield', () => {
     expect(el.getAttribute('size')).to.eq('small');
   });
 
+  it('uses a 16px height at the small size with slotted icons', async () => {
+    const el = await fixture<VscodeTextfield>(html`
+      <vscode-textfield size="small">
+        <vscode-icon name="calendar" slot="content-before"></vscode-icon>
+        <vscode-icon
+          name="search"
+          slot="content-after"
+          action-icon
+          label="Search"
+        ></vscode-icon>
+      </vscode-textfield>
+    `);
+
+    expect(el.getBoundingClientRect().height).to.eq(16);
+  });
+
   it('should be participated in the form', async () => {
     const form = document.createElement('form');
     await fixture(