Size Modifiers

The .size-sm, .size-md, and .size-lg modifiers size supported controls and adjust container spacing through CSS variables. These are modifiers, so they do not use !important.

Modifier	Meaning	Control/label font	Block / inline padding	Container spacing	Range scale
.size-sm	Small	0.875rem	0.25rem / 0.5rem	0.5 × --spacing	0.875
.size-md	Medium (default)	Component/context default	Component/context default	Component/context default	Unchanged
.size-lg	Large	1.125rem	0.625rem / 1rem	1.5 × --spacing	1.125

Omitting a size modifier keeps normal sizing. .size-md selects the same default, including the existing theme and contextual navigation/group styling. Use one size modifier per element. Intent variants, .ghost, and .subtle can be combined with any size.

<div class="auto-grid" style="--auto-grid-min-column: 18rem"><section data-size="default">
  <h3>No modifier</h3>
  <label class="">Name <input value="Example"></label>
  <p><button type="button" class="">Action</button></p>
  <p><label class=""><input type="checkbox" checked> Option</label></p>
  <label class="">Level <input type="range" value="50"></label>
  <div class="pane "><p>Container spacing changes; content text retains its normal size.</p></div>
</section>
<section data-size="size-sm">
  <h3>.size-sm</h3>
  <label class="size-sm">Name <input value="Example"></label>
  <p><button type="button" class="size-sm">Action</button></p>
  <p><label class="size-sm"><input type="checkbox" checked> Option</label></p>
  <label class="size-sm">Level <input type="range" value="50"></label>
  <div class="pane size-sm"><p>Container spacing changes; content text retains its normal size.</p></div>
</section>
<section data-size="size-md">
  <h3>.size-md</h3>
  <label class="size-md">Name <input value="Example"></label>
  <p><button type="button" class="size-md">Action</button></p>
  <p><label class="size-md"><input type="checkbox" checked> Option</label></p>
  <label class="size-md">Level <input type="range" value="50"></label>
  <div class="pane size-md"><p>Container spacing changes; content text retains its normal size.</p></div>
</section>
<section data-size="size-lg">
  <h3>.size-lg</h3>
  <label class="size-lg">Name <input value="Example"></label>
  <p><button type="button" class="size-lg">Action</button></p>
  <p><label class="size-lg"><input type="checkbox" checked> Option</label></p>
  <label class="size-lg">Level <input type="range" value="50"></label>
  <div class="pane size-lg"><p>Container spacing changes; content text retains its normal size.</p></div>
</section></div>

The examples below compare the unmodified component with .size-sm. Each demo function accepts a size argument, for example SizeDemo.buttons('size-lg'); Storybook exposes the same choices through its size control.

Apply a size modifier directly to the element you want to change. A generic wrapper such as <div class="size-sm"> does not resize its descendants. A supported button/search group (role="group" or role="search") is an explicit exception: the modifier sizes its direct controls together. Direct labels and the inputs they wrap also follow group sizing. Nested groups need their own size modifier. An explicit child modifier takes precedence over the group or wrapping label, including .size-md to select normal sizing. For dropdowns, apply the modifier to the owning details element to size both the trigger and menu.

Supported element	Effect
button, [role="button"], button/submit/reset inputs	Sized text and padding
Text-like inputs, file inputs, color inputs, select, textarea	Sized text and padding; input height follows the new size
Checkboxes, radio buttons, switches	Sized indicators; switch thumb travel follows its track
Ranges	Scaled thumb and track, with unchanged width
label	Sized label text; direct wrapped controls follow the size
details with a direct summary[aria-haspopup="menu"]	Sized trigger and menu text and padding, including button-style triggers
.card	Adjusted content, header, footer, and list-item spacing
.pane	Adjusted internal padding
[role="alert"], [role="status"]	Adjusted padding, keeping message text unchanged
dialog	Adjusted content, header, and footer spacing; independent of width
Non-dropdown details	Adjusted content spacing and sized button-style summaries
[role="group"], [role="search"]	Coordinated sizing of direct controls
Pagination	Apply a size modifier to its role="group" wrapper or individual button controls

Hidden inputs are unaffected. Cards and panes keep their typography and the size of nested controls; apply a size modifier to an individual child control if desired. Textarea rows and select options still determine their content height.

Buttons

<div class="auto-grid" style="--auto-grid-min-column: 18rem">
  <section data-size="default"><h3>Default</h3><p><button type="button" class="">Save changes</button></p>
<p><button type="button" class="secondary ghost ">Cancel</button></p>
<p><button type="button" class="" disabled>Unavailable</button></p></section>
  <section data-size="size-sm"><h3>.size-sm</h3><p><button type="button" class="size-sm">Save changes</button></p>
<p><button type="button" class="secondary ghost size-sm">Cancel</button></p>
<p><button type="button" class="size-sm" disabled>Unavailable</button></p></section>
</div>

Role Buttons

Prefer native buttons. A custom [role="button"] also needs focusability and Enter/Space keyboard activation. This toggle example implements both and exposes its state through aria-pressed.

<div class="auto-grid" style="--auto-grid-min-column: 18rem">
  <section data-size="default"><h3>Default</h3><div role="button" tabindex="0" aria-pressed="false" class=""
  onclick="this.setAttribute('aria-pressed', this.getAttribute('aria-pressed') !== 'true')"
  onkeydown="if (event.key === ' ' || event.key === 'Enter') { event.preventDefault(); this.click(); }">Pin item</div></section>
  <section data-size="size-sm"><h3>.size-sm</h3><div role="button" tabindex="0" aria-pressed="false" class="size-sm"
  onclick="this.setAttribute('aria-pressed', this.getAttribute('aria-pressed') !== 'true')"
  onkeydown="if (event.key === ' ' || event.key === 'Enter') { event.preventDefault(); this.click(); }">Pin item</div></section>
</div>

Input Buttons

<div class="auto-grid" style="--auto-grid-min-column: 18rem">
  <section data-size="default"><h3>Default</h3><p><input type="button" class="" value="Action"></p>
<p><input type="submit" class="" value="Submit"></p>
<p><input type="reset" class="" value="Reset"></p></section>
  <section data-size="size-sm"><h3>.size-sm</h3><p><input type="button" class="size-sm" value="Action"></p>
<p><input type="submit" class="size-sm" value="Submit"></p>
<p><input type="reset" class="size-sm" value="Reset"></p></section>
</div>

Inputs

Search and validation icons retain their reserved space. File inputs also use the selected font on their file-selector button.

<div class="auto-grid" style="--auto-grid-min-column: 18rem">
  <section data-size="default"><h3>Default</h3><label class="">Text <input class="" type="text" value="Example text"></label>
<label class="">Search <input class="" type="search" placeholder="Search" aria-invalid="false"></label>
<label class="">Email <input class="" type="email" value="invalid" aria-invalid="true"></label>
<label class="">Number <input class="" type="number" value="12"></label>
<label class="">Date <input class="" type="date" value="2026-01-15"></label>
<label class="">File <input class="" type="file"></label></section>
  <section data-size="size-sm"><h3>.size-sm</h3><label class="size-sm">Text <input class="size-sm" type="text" value="Example text"></label>
<label class="size-sm">Search <input class="size-sm" type="search" placeholder="Search" aria-invalid="false"></label>
<label class="size-sm">Email <input class="size-sm" type="email" value="invalid" aria-invalid="true"></label>
<label class="size-sm">Number <input class="size-sm" type="number" value="12"></label>
<label class="size-sm">Date <input class="size-sm" type="date" value="2026-01-15"></label>
<label class="size-sm">File <input class="size-sm" type="file"></label></section>
</div>

Checkboxes, Radio Buttons, and Switches

The indicators scale through their input font size. Switch tracks, thumbs, and thumb travel scale together. Use a wrapping label to keep the option text clickable; checked, disabled, and keyboard focus styles remain available.

<div class="auto-grid" style="--auto-grid-min-column: 18rem">
  <section data-size="default"><h3>Default</h3><p><label class=""><input type="checkbox" checked> Checked option</label></p>
<p><label class=""><input type="checkbox"> Another option</label></p>
<p><label class=""><input type="checkbox" disabled> Unavailable option</label></p></section>
  <section data-size="size-sm"><h3>.size-sm</h3><p><label class="size-sm"><input type="checkbox" checked> Checked option</label></p>
<p><label class="size-sm"><input type="checkbox"> Another option</label></p>
<p><label class="size-sm"><input type="checkbox" disabled> Unavailable option</label></p></section>
</div>

<div class="auto-grid" style="--auto-grid-min-column: 18rem">
  <section data-size="default"><h3>Default</h3><fieldset><legend>Choose an option</legend>
<p><label class=""><input type="radio" name="radio-default" value="first" checked> First option</label></p>
<p><label class=""><input type="radio" name="radio-default" value="second"> Second option</label></p>
<p><label class=""><input type="radio" name="radio-default" value="third" disabled> Unavailable option</label></p>
</fieldset></section>
  <section data-size="size-sm"><h3>.size-sm</h3><fieldset><legend>Choose an option</legend>
<p><label class="size-sm"><input type="radio" name="radio-size-sm" value="first" checked> First option</label></p>
<p><label class="size-sm"><input type="radio" name="radio-size-sm" value="second"> Second option</label></p>
<p><label class="size-sm"><input type="radio" name="radio-size-sm" value="third" disabled> Unavailable option</label></p>
</fieldset></section>
</div>

<div class="auto-grid" style="--auto-grid-min-column: 18rem">
  <section data-size="default"><h3>Default</h3><p><label class=""><input type="checkbox" role="switch" checked> Notifications</label></p>
<p><label class=""><input type="checkbox" role="switch"> Automatic updates</label></p>
<p><label class=""><input type="checkbox" role="switch" disabled> Unavailable setting</label></p></section>
  <section data-size="size-sm"><h3>.size-sm</h3><p><label class="size-sm"><input type="checkbox" role="switch" checked> Notifications</label></p>
<p><label class="size-sm"><input type="checkbox" role="switch"> Automatic updates</label></p>
<p><label class="size-sm"><input type="checkbox" role="switch" disabled> Unavailable setting</label></p></section>
</div>

Ranges

The selected level scales the existing thumb and track sizes and recalculates thumb centering. The compact .size-sm level uses 87.5%. Slider width, min/max/step values, and native keyboard behavior remain unchanged. The existing --input-range-thumb-size and --input-range-track-height tokens still provide the base dimensions.

<div class="auto-grid" style="--auto-grid-min-column: 18rem">
  <section data-size="default"><h3>Default</h3><label class="">Volume <input type="range" min="0" max="100" value="50"></label>
<label class="">Unavailable level <input type="range" min="0" max="100" value="25" disabled></label></section>
  <section data-size="size-sm"><h3>.size-sm</h3><label class="size-sm">Volume <input type="range" min="0" max="100" value="50"></label>
<label class="size-sm">Unavailable level <input type="range" min="0" max="100" value="25" disabled></label></section>
</div>

Color Pickers

Color inputs use the same selected height and padding as text inputs. The native color picker remains unchanged.

<div class="auto-grid" style="--auto-grid-min-column: 18rem">
  <section data-size="default"><h3>Default</h3><label class="">Accent color <input type="color" value="#0172ad"></label>
<label class="">Unavailable color <input type="color" value="#546178" disabled></label></section>
  <section data-size="size-sm"><h3>.size-sm</h3><label class="size-sm">Accent color <input type="color" value="#0172ad"></label>
<label class="size-sm">Unavailable color <input type="color" value="#546178" disabled></label></section>
</div>

Labels

Apply .size-sm to a wrapping label to resize both its text and its direct input, select, or textarea. For a separate label connected with for/id, put .size-sm on both the label and the control. Styling an input alone does not resize a separate label. Labels use the --label-font-size slot, which otherwise inherits the surrounding text size.

<div class="auto-grid" style="--auto-grid-min-column: 18rem">
  <section data-size="default"><h3>Default</h3><label class="" for="separate-default">Separate label</label>
<input class="" id="separate-default" value="Apply the modifier to both elements">
<label class="">Wrapping label <input value="The direct child follows the label size"></label>
<p><label class=""><input type="checkbox"> Clickable option label</label></p></section>
  <section data-size="size-sm"><h3>.size-sm</h3><label class="size-sm" for="separate-size-sm">Separate label</label>
<input class="size-sm" id="separate-size-sm" value="Apply the modifier to both elements">
<label class="size-sm">Wrapping label <input value="The direct child follows the label size"></label>
<p><label class="size-sm"><input type="checkbox"> Clickable option label</label></p></section>
</div>

Select

<div class="auto-grid" style="--auto-grid-min-column: 18rem">
  <section data-size="default"><h3>Default</h3><label class="">Language <select class=""><option>English</option><option>Portuguese</option></select></label>
<label class="">Topics <select class="" multiple size="3"><option selected>Design</option><option>Development</option><option>Accessibility</option></select></label></section>
  <section data-size="size-sm"><h3>.size-sm</h3><label class="size-sm">Language <select class="size-sm"><option>English</option><option>Portuguese</option></select></label>
<label class="size-sm">Topics <select class="size-sm" multiple size="3"><option selected>Design</option><option>Development</option><option>Accessibility</option></select></label></section>
</div>

Textarea

<div class="auto-grid" style="--auto-grid-min-column: 18rem">
  <section data-size="default"><h3>Default</h3><label class="">Notes <textarea class="" rows="3">A short note.</textarea></label></section>
  <section data-size="size-sm"><h3>.size-sm</h3><label class="size-sm">Notes <textarea class="size-sm" rows="3">A short note.</textarea></label></section>
</div>

Dropdowns

Put the size modifier on details to resize the complete dropdown. Putting it only on summary[role="button"] resizes that button, leaving the menu unchanged. Styling does not add menu keyboard behavior; see the dropdown composite for its structure and interaction requirements.

<div class="auto-grid" style="--auto-grid-min-column: 18rem">
  <section data-size="default"><h3>Default</h3><div style="min-block-size: 12rem"><details>
  <summary aria-haspopup="menu">Dropdown</summary>
  <ul role="menu">
    <li><a role="menuitem" href="#">Solid</a></li>
    <li><a role="menuitem" href="#">Liquid</a></li>
    <li><a role="menuitem" href="#">Gas</a></li>
    <li><a role="menuitem" href="#">Plasma</a></li>
  </ul>
</details></div>
<div style="min-block-size: 12rem"><details class="">
  <summary role="button" aria-haspopup="menu">
    Dropdown as a button
  </summary>
  <ul role="menu">
    <li><a role="menuitem" href="#">Solid</a></li>
    <li><a role="menuitem" href="#">Liquid</a></li>
    <li><a role="menuitem" href="#">Gas</a></li>
    <li><a role="menuitem" href="#">Plasma</a></li>
  </ul>
</details></div>
<p>Open either dropdown to compare its menu spacing.</p></section>
  <section data-size="size-sm"><h3>.size-sm</h3><div style="min-block-size: 12rem"><details class="size-sm">
  <summary aria-haspopup="menu">Dropdown</summary>
  <ul role="menu">
    <li><a role="menuitem" href="#">Solid</a></li>
    <li><a role="menuitem" href="#">Liquid</a></li>
    <li><a role="menuitem" href="#">Gas</a></li>
    <li><a role="menuitem" href="#">Plasma</a></li>
  </ul>
</details></div>
<div style="min-block-size: 12rem"><details class="size-sm">
  <summary role="button" aria-haspopup="menu">
    Dropdown as a button
  </summary>
  <ul role="menu">
    <li><a role="menuitem" href="#">Solid</a></li>
    <li><a role="menuitem" href="#">Liquid</a></li>
    <li><a role="menuitem" href="#">Gas</a></li>
    <li><a role="menuitem" href="#">Plasma</a></li>
  </ul>
</details></div>
<p>Open either dropdown to compare its menu spacing.</p></section>
</div>

Cards

<div class="auto-grid" style="--auto-grid-min-column: 18rem">
  <section data-size="default"><h3>Default</h3><article class="card">
  <header>
    <h2>Card title</h2>
  </header>
  <p>Cards support optional header and footer sections that are visually distinct from the main content.</p>
  <footer>
    <button class="secondary">Cancel</button>
    <button>Confirm</button>
  </footer>
</article></section>
  <section data-size="size-sm"><h3>.size-sm</h3><article class="card size-sm">
  <header>
    <h2>Card title</h2>
  </header>
  <p>Cards support optional header and footer sections that are visually distinct from the main content.</p>
  <footer>
    <button class="secondary">Cancel</button>
    <button>Confirm</button>
  </footer>
</article></section>
</div>

Panes

<div class="auto-grid" style="--auto-grid-min-column: 18rem">
  <section data-size="default"><h3>Default</h3><section class="pane">
  <h4>Pane title</h4>
  <p>Variable padding with unchanged content typography.</p>
  <button type="button">Default-size action</button>
</section></section>
  <section data-size="size-sm"><h3>.size-sm</h3><section class="pane size-sm">
  <h4>Pane title</h4>
  <p>Variable padding with unchanged content typography.</p>
  <button type="button">Default-size action</button>
</section></section>
</div>

Alerts

Both role="alert" and role="status" support size-dependent padding. Message text and nested action buttons retain their normal size. Use the role appropriate to the urgency of the message.

<div class="auto-grid" style="--auto-grid-min-column: 18rem">
  <section data-size="default"><h3>Default</h3><div role="status" class="success ">Your changes have been saved.</div>
<div role="alert" class="danger subtle "><p>Unable to save. Check the form and try again.</p><button type="button" onclick="this.parentElement.remove()" aria-label="Dismiss error">Dismiss</button></div></section>
  <section data-size="size-sm"><h3>.size-sm</h3><div role="status" class="success size-sm">Your changes have been saved.</div>
<div role="alert" class="danger subtle size-sm"><p>Unable to save. Check the form and try again.</p><button type="button" onclick="this.parentElement.remove()" aria-label="Dismiss error">Dismiss</button></div></section>
</div>

Pagination

Pagination uses the existing group composite. Put the size modifier on its role="group" wrapper to size all page controls, or on an individual button. Navigation gaps and current/disabled state styles are preserved. The demo changes aria-current; loading the selected page remains application behavior.

<div class="auto-grid" style="--auto-grid-min-column: 18rem">
  <section data-size="default"><h3>Default</h3><nav aria-label="Pagination">
  <div role="group" class="">
    <button type="button" aria-label="Previous page" disabled>Prev</button>
    <button type="button" aria-label="Page 1" aria-current="page" onclick="this.parentElement.querySelector('[aria-current]')?.removeAttribute('aria-current'); this.setAttribute('aria-current', 'page')">1</button>
    <button type="button" aria-label="Page 2" onclick="this.parentElement.querySelector('[aria-current]')?.removeAttribute('aria-current'); this.setAttribute('aria-current', 'page')">2</button>
    <button type="button" aria-label="Page 3" onclick="this.parentElement.querySelector('[aria-current]')?.removeAttribute('aria-current'); this.setAttribute('aria-current', 'page')">3</button>
  </div>
</nav></section>
  <section data-size="size-sm"><h3>.size-sm</h3><nav aria-label="Pagination">
  <div role="group" class="size-sm">
    <button type="button" aria-label="Previous page" disabled>Prev</button>
    <button type="button" aria-label="Page 1" aria-current="page" onclick="this.parentElement.querySelector('[aria-current]')?.removeAttribute('aria-current'); this.setAttribute('aria-current', 'page')">1</button>
    <button type="button" aria-label="Page 2" onclick="this.parentElement.querySelector('[aria-current]')?.removeAttribute('aria-current'); this.setAttribute('aria-current', 'page')">2</button>
    <button type="button" aria-label="Page 3" onclick="this.parentElement.querySelector('[aria-current]')?.removeAttribute('aria-current'); this.setAttribute('aria-current', 'page')">3</button>
  </div>
</nav></section>
</div>

Dialogs and Modals

Put the size modifier on the native dialog. It adjusts padding and header/footer spacing, without changing width, text size, or child control sizing. Modal behavior still comes from showModal(), Escape dismissal, and native focus handling. The examples use the same explicit width to make that distinction visible.

<div class="auto-grid" style="--auto-grid-min-column: 18rem">
  <section data-size="default"><h3>Default</h3><button type="button" onclick="document.getElementById('default-dialog').showModal()">Open default dialog</button>
<dialog id="default-dialog" class="" aria-labelledby="default-dialog-title" style="width: min(32rem, calc(100vw - 2rem))">
  <header><h2 id="default-dialog-title">Confirm changes</h2></header>
  <p>Review your changes before continuing.</p>
  <footer><form method="dialog"><button value="cancel" class="secondary" autofocus>Cancel</button> <button value="confirm">Confirm</button></form></footer>
</dialog></section>
  <section data-size="size-sm"><h3>.size-sm</h3><button type="button" onclick="document.getElementById('size-sm-dialog').showModal()">Open size-sm dialog</button>
<dialog id="size-sm-dialog" class="size-sm" aria-labelledby="size-sm-dialog-title" style="width: min(32rem, calc(100vw - 2rem))">
  <header><h2 id="size-sm-dialog-title">Confirm changes</h2></header>
  <p>Review your changes before continuing.</p>
  <footer><form method="dialog"><button value="cancel" class="secondary" autofocus>Cancel</button> <button value="confirm">Confirm</button></form></footer>
</dialog></section>
</div>

Accordions

Apply the size modifier to non-dropdown details. Plain summaries have no default padding to scale; the modifier adjusts the gap below the open summary and content paragraph/list margins. Button-style summaries also follow the chosen control size. Content text remains unchanged, and native keyboard/disclosure behavior is preserved.

<div class="auto-grid" style="--auto-grid-min-column: 18rem">
  <section data-size="default"><h3>Default</h3><details class="" open>
  <summary>Plain accordion</summary>
  <p>Native summaries have no padding to reduce. The modifier changes the space around the revealed content.</p>
  <p>Content stays at its normal text size.</p>
</details>
<details class="" open>
  <summary role="button">Button-style accordion</summary>
  <p>The trigger follows the selected size, while content text keeps its normal size.</p>
</details></section>
  <section data-size="size-sm"><h3>.size-sm</h3><details class="size-sm" open>
  <summary>Plain accordion</summary>
  <p>Native summaries have no padding to reduce. The modifier changes the space around the revealed content.</p>
  <p>Content stays at its normal text size.</p>
</details>
<details class="size-sm" open>
  <summary role="button">Button-style accordion</summary>
  <p>The trigger follows the selected size, while content text keeps its normal size.</p>
</details></section>
</div>

Button Groups

Group-level sizing applies to direct buttons and button-role controls, rather than requiring .size-sm on every child. Disabled and focus states remain available.

<div class="auto-grid" style="--auto-grid-min-column: 18rem">
  <section data-size="default"><h3>Default</h3><div role="group" aria-label="Text actions" class="">
  <button type="button">Copy</button><button type="button" class="secondary">Paste</button><button type="button" disabled>Delete</button>
</div></section>
  <section data-size="size-sm"><h3>.size-sm</h3><div role="group" aria-label="Text actions" class="size-sm">
  <button type="button">Copy</button><button type="button" class="secondary">Paste</button><button type="button" disabled>Delete</button>
</div></section>
</div>

Search and Form Groups

Direct inputs, selects, textareas, buttons, dropdowns, and labels share the selected sizing. Controls directly wrapped by those labels also follow the group size. Generic wrappers and nested groups do not automatically propagate sizing.

<div class="auto-grid" style="--auto-grid-min-column: 18rem">
  <section data-size="default"><h3>Default</h3><form role="search" aria-label="Search examples" class="" onsubmit="event.preventDefault(); this.nextElementSibling.textContent = 'Search submitted'">
  <input type="search" aria-label="Search text" placeholder="Search">
  <button type="submit">Search</button>
</form>
<p role="status"></p>
<div role="group" aria-label="Filter by topic" class="">
  <select aria-label="Topic"><option>All topics</option><option>Design</option></select>
  <button type="button">Filter</button>
</div>
<div role="group" aria-label="Search with scope" class="">
  <input type="search" aria-label="Scoped search" placeholder="Search">
  <details><summary role="button" aria-haspopup="menu">Scope</summary><ul role="menu"><li><a role="menuitem" href="#all">All</a></li></ul></details>
  <button type="button">Go</button>
</div></section>
  <section data-size="size-sm"><h3>.size-sm</h3><form role="search" aria-label="Search examples" class="size-sm" onsubmit="event.preventDefault(); this.nextElementSibling.textContent = 'Search submitted'">
  <input type="search" aria-label="Search text" placeholder="Search">
  <button type="submit">Search</button>
</form>
<p role="status"></p>
<div role="group" aria-label="Filter by topic" class="size-sm">
  <select aria-label="Topic"><option>All topics</option><option>Design</option></select>
  <button type="button">Filter</button>
</div>
<div role="group" aria-label="Search with scope" class="size-sm">
  <input type="search" aria-label="Scoped search" placeholder="Search">
  <details><summary role="button" aria-haspopup="menu">Scope</summary><ul role="menu"><li><a role="menuitem" href="#all">All</a></li></ul></details>
  <button type="button">Go</button>
</div></section>
</div>

<div class="auto-grid" style="--auto-grid-min-column: 18rem">
  <section data-size="default"><h3>Default</h3><div role="group" aria-label="Options" class="">
  <label><input type="checkbox" checked> One</label>
  <label><input type="radio" name="group-default" checked> Two</label>
  <label><input type="checkbox" role="switch"> Three</label>
</div>
<div role="group" aria-label="Direct controls" class="">
  <input type="checkbox" aria-label="Direct checkbox" checked>
  <input type="radio" aria-label="Direct radio" checked>
  <input type="checkbox" role="switch" aria-label="Direct switch">
</div>
<div role="group" aria-label="Volume control" class=""><input type="range" aria-label="Volume" value="50"></div>
<div role="group" aria-label="Accent control" class=""><input type="color" aria-label="Accent color" value="#0172ad"></div></section>
  <section data-size="size-sm"><h3>.size-sm</h3><div role="group" aria-label="Options" class="size-sm">
  <label><input type="checkbox" checked> One</label>
  <label><input type="radio" name="group-size-sm" checked> Two</label>
  <label><input type="checkbox" role="switch"> Three</label>
</div>
<div role="group" aria-label="Direct controls" class="size-sm">
  <input type="checkbox" aria-label="Direct checkbox" checked>
  <input type="radio" aria-label="Direct radio" checked>
  <input type="checkbox" role="switch" aria-label="Direct switch">
</div>
<div role="group" aria-label="Volume control" class="size-sm"><input type="range" aria-label="Volume" value="50"></div>
<div role="group" aria-label="Accent control" class="size-sm"><input type="color" aria-label="Accent color" value="#0172ad"></div></section>
</div>

Customization

Non-default size classes define these local tokens:

Token	Purpose
--size-control-font-size	Control and label font size; also scales checkbox/radio/switch geometry
--size-padding-block	Control vertical padding
--size-padding-inline	Control horizontal padding
--size-spacing	Container and content spacing
--size-range-scale	Multiplier for the existing range thumb and track dimensions

Override tokens on an instance or in a size-class rule loaded after Semanticus:

.size-lg {
  --size-padding-inline: 1.25rem;
}

.size-md preserves normal component styles and clear inherited size-selection tokens. Generic wrappers still do not apply size behavior. Explicit child size classes override group/label sizing without compounding the scale.

The component slots --buttons-font-size, --inputs-font-size, and --label-font-size remain available. Dropdowns expose --details-dropdown-font-size, --details-menu-font-size, --details-menu-padding-block, and --details-menu-padding-inline, alongside their trigger-padding tokens. --details-dropdown-height keeps grouped controls aligned. --dialog-spacing controls dialog interiors and marginals; --details-spacing controls the gap after an open accordion summary.

Controls retain their semantic focus, disabled, and validation styles. Smaller levels also reduce hit areas, so keep enough separation and assess touch target sizes. Container sizing changes spacing rather than content typography, dialog width, or slider width. The HTML small element and its existing --small-font-size token retain their fine-print semantics; the unreleased .small modifier has been replaced by .size-sm.