@smwb/ui-styles 1.6.0 → 2.1.0

package/README.md

@@ -19,18 +19,18 @@ npm install @smwb/ui-styles
 
 ## What's inside
 
-| Path | Purpose |
-| --- | --- |
-| `less/components.less` | Aggregate entry — `@import`s foundation + every component |
-| `less/foundation/*` | Tokens: palette, spacing, radius, elevation, breakpoints, sizing |
-| `less/default/globals/default.variables.less` | Semantic colors + per-component LESS variables |
-| `less/variables.less` | Declares the `--smui-*` tokens and emits them on `:root` (light) + `[data-theme="dark"]` |
-| `less/components/<name>/<name>.entry.less` | Per-component entry (component rules only, no tokens) |
-| `less/tokens.entry.less` | The `--smui-*` tokens at zero specificity (`:where(:root)`) for per-component CSS |
-| `less/headless-base.less` | Foundation + theme variables only (no component rules) |
-| `less/connects/rt/table.entry.less` | The React TanStack Table adapter's own rules (column resizer) |
-| `less/themes/*` | Built-in theme packs (`summer`, `material`) |
-| `normalize.css` | Optional CSS reset |
+| Path                                          | Purpose                                                                                  |
+| --------------------------------------------- | ---------------------------------------------------------------------------------------- |
+| `less/components.less`                        | Aggregate entry — `@import`s foundation + every component                                |
+| `less/foundation/*`                           | Tokens: palette, spacing, radius, elevation, breakpoints, sizing                         |
+| `less/default/globals/default.variables.less` | Semantic colors + per-component LESS variables                                           |
+| `less/variables.less`                         | Declares the `--smui-*` tokens and emits them on `:root` (light) + `[data-theme="dark"]` |
+| `less/components/<name>/<name>.entry.less`    | Per-component entry (component rules only, no tokens)                                    |
+| `less/tokens.entry.less`                      | The `--smui-*` tokens at zero specificity (`:where(:root)`) for per-component CSS        |
+| `less/headless-base.less`                     | Foundation + theme variables only (no component rules)                                   |
+| `less/connects/rt/table.entry.less`           | The React TanStack Table adapter's own rules (column resizer)                            |
+| `less/themes/*`                               | Built-in theme packs (`summer`, `material`)                                              |
+| `normalize.css`                               | Optional CSS reset                                                                       |
 
 ## Usage
 
@@ -93,21 +93,45 @@ is drawn for the 8th series). Light and dark are separate sets, so set both when
 show in the dark theme. At runtime, set `--smwb-chart-series-N` on the chart itself (its `style`): the chart declares the
 tokens on its own root, so a value set on `:root` or a wrapper does not reach it.
 
+#### StatusDot colours
+
+`StatusDot` reads only runtime tokens, so the dark theme follows without extra settings: `active` takes
+`--smui-infoColor`, `attention` `--smui-warningColor`, `idle` `--smui-onSurfaceVariant`, `done`
+`--smui-successColor`, `error` `--smui-errorColor` and `unknown` `--smui-outlineColor` (as a ring); `color` takes
+the matching `--smui-*Color` token (`default` is `--smui-onSurfaceVariant`). Its sizes are `@statusDotSizeSm`
+(8px), `@statusDotSizeMd` (12px) and `@statusDotRing` (2px, the ring of `unknown`) in `theme.config`.
+
+Against `--smui-surfaceBackground` and `--smui-pageBackground`, the default theme's status colours measure
+at least 3:1 in both modes (the lowest is `attention` on the light surface, 3.04:1). The semantic colours are one
+value for both modes, so a theme that makes `@warningColor` lighter, or any of them darker for the dark theme,
+changes the numbers: re-check them there. `color="secondary"` is the one name that falls short in the default dark
+theme (2.65:1): use a status for state.
+
+#### QrCode colours
+
+`QrCode` never reads theme tokens for the code itself: the modules are always `@qrCodeDarkColor`
+(`rgb(0 0 0)`) on `@qrCodeLightColor` (`rgb(255 255 255)`), including the quiet zone, so a phone camera
+reads the code in the dark theme, under forced colours and in print (`forced-color-adjust: none` and
+`print-color-adjust: exact` are set on the svg, and the same colours are written as SVG `fill` attributes,
+so a copied or printed svg scans without the library CSS). Only the caption is themed
+(`--smui-onSurfaceVariant`). The corner rounding is `@qrCodeRadius` (`@smui-radius-sm`); the svg clips to
+it, and the quiet zone keeps the modules clear of the rounding.
+
 #### DagView colours
 
-The dependency graph (`DagView` in `@smwb/ui-solid`) takes its colours from theme variables that default to the
+The dependency graph (`DagView` in `@smwb/ui-solid` and `@smwb/ui-react`) takes its colours from theme variables that default to the
 runtime tokens, so the dark theme follows without extra settings:
 
-| Variable (`theme.config`) | Runtime property on `.smwb-dag-view` | Default |
-| --- | --- | --- |
-| `@dagViewNodeBg` | `--smwb-dag-view-node-bg` | `var(--smui-surfaceBackground)` |
-| `@dagViewNodeBorder` | `--smwb-dag-view-node-border` | `var(--smui-outlineColor)` |
-| `@dagViewEdgeColor` | `--smwb-dag-view-edge-color` | `var(--smui-outlineColor)` |
-| `@dagViewEdgeActiveColor` | `--smwb-dag-view-edge-active-color` | `var(--smui-primaryColor)` |
-| `@dagViewSelectedRing` | `--smwb-dag-view-selected-ring` | `var(--smui-primaryColor)` |
+| Variable (`theme.config`)                      | Runtime property on `.smwb-dag-view`       | Default                                                                   |
+| ---------------------------------------------- | ------------------------------------------ | ------------------------------------------------------------------------- |
+| `@dagViewNodeBg`                               | `--smwb-dag-view-node-bg`                  | `var(--smui-surfaceBackground)`                                           |
+| `@dagViewNodeBorder`                           | `--smwb-dag-view-node-border`              | `var(--smui-outlineColor)`                                                |
+| `@dagViewEdgeColor`                            | `--smwb-dag-view-edge-color`               | `var(--smui-outlineColor)`                                                |
+| `@dagViewEdgeActiveColor`                      | `--smwb-dag-view-edge-active-color`        | `var(--smui-primaryColor)`                                                |
+| `@dagViewSelectedRing`                         | `--smwb-dag-view-selected-ring`            | `var(--smui-primaryColor)`                                                |
 | `@dagViewStatusIdle` … `@dagViewStatusSkipped` | `--smwb-dag-view-status-idle` … `-skipped` | outline, on-surface variant, info, success, warning, error, disabled text |
-| `@dagViewDimOpacity` | `--smwb-dag-view-dim-opacity` | `0.35` |
-| `@dagViewHeight` | — (the graph's `height`) | `480px` |
+| `@dagViewDimOpacity`                           | `--smwb-dag-view-dim-opacity`              | `0.35`                                                                    |
+| `@dagViewHeight`                               | — (the graph's `height`)                   | `480px`                                                                   |
 
 The statuses are `idle`, `pending`, `running`, `success`, `warning`, `error` and `skipped`; a node with any other
 status is drawn as `idle`. Each colour variable has a `…Dark` twin (e.g. `@dagViewStatusSuccessDark`), `false` by
@@ -120,6 +144,117 @@ node's accent comes from `--smwb-dag-view-accent`. For a status of your own, set
 The graph's default height, `@dagViewHeight`, is set by the stylesheet, so its `height` prop or a height in its
 `style` wins over it.
 
+#### Swimlanes
+
+`Swimlanes` (in `@smwb/ui-react` and `@smwb/ui-solid`) reads only runtime tokens, so the dark theme follows without
+extra settings: the grid's surface and the sticky header's opaque background come from `--smui-surfaceBackground`,
+the row divider from `--smui-dividerColor`, the hover tint from `--smui-onSurfaceHover`, the selected tint, the
+selection stripe and the focus ring from `--smui-primaryColor`, and a disabled lane's text from
+`--smui-disabledTextColor`.
+
+| Variable (`theme.config`) | Runtime property on `.smwb-swimlanes`           | Default |
+| ------------------------- | ----------------------------------------------- | ------- |
+| `@swimlanesHeaderWidth`   | the fallback of `--smwb-swimlanes-header-width` | `240px` |
+| `@swimlanesHeight`        | — (the grid's `height`)                         | `480px` |
+
+Three custom properties drive the layout and the component writes them on its own root:
+`--smwb-swimlanes-row-height` (always, from `rowHeight`), `--smwb-swimlanes-header-width` (only with `headerWidth`)
+and `--smwb-swimlanes-content-min-width` (only with `contentMinWidth`). The last two are yours to set, through the
+props or at runtime on the grid itself (its `style`, which is merged last and wins). The row height is not: the
+virtual window's maths needs it in JS, so it goes through `rowHeight` alone, and a different value in `style` would
+resize the rows in CSS while the window still counts with `rowHeight`, leaving gaps or overlaps. A row's state is one
+internal property, `--smwb-swimlanes-tint`, set on each row and read by both cells so the lane reads as one band:
+`transparent`, `--smui-onSurfaceHover` on hover, and 12% of `--smui-primaryColor` when selected. It is declared on
+the row, so a value set on the grid never reaches the cells.
+
+`@swimlanesHeight` is set by the stylesheet, so the `height` prop or a height in `style` wins over it. A selected
+lane also gets a 3px primary stripe on its header, so the selection is not shown by tint alone; forced colours draw
+it as a `Highlight` outline on both cells instead. Cells clip, so content that needs more room needs a wider
+`contentMinWidth`.
+
+#### Composer
+
+`Composer` is the task input: a textarea that grows from `minRows` to `maxRows`, an optional attach button, a
+`toolbar` slot, a character counter and a send button that turns into Stop while the agent is busy. Its stylesheet is
+`components/composer/composer.less` (per-component entry: `composer.entry.less`). The root's children are flat, and CSS
+grid areas place them for each layout; the spacing is margins, so an absent child leaves no gap.
+
+| Class                                                           | Element                                                                                                                                                                     |
+| --------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `.smwb-composer`                                                | the root; `_stacked` (field on top, a bar under it: attach, toolbar, counter, action) or `_inline` (one row: attach, field, counter, action; the toolbar, if any, under it) |
+| `_focused`, `_disabled`, `_drag-active`, `_over-limit`, `_busy` | root states; `_focused` follows the textarea's focus, not `:focus-within`                                                                                                   |
+| `.smwb-composer__attachments`, `__toolbar`                      | slots above the field and in the bar                                                                                                                                        |
+| `.smwb-composer__field`                                         | the textarea's wrapper; its `data-value` mirrors the text, and `--smwb-composer-min-rows` / `--smwb-composer-max-rows` set the height range                                 |
+| `.smwb-composer__input`                                         | the textarea                                                                                                                                                                |
+| `.smwb-composer__icon-button`                                   | a round native button; with `__attach` and `__action` (`__action_stop` while busy)                                                                                          |
+| `.smwb-composer__counter` (`_error`)                            | the `n / max` text                                                                                                                                                          |
+| `.smwb-composer__status`                                        | the visually hidden live region for the counter                                                                                                                             |
+
+The textarea grows in CSS only: `.smwb-composer__field::after` repeats the text (`content: attr(data-value)`) in a
+hidden box that shares the textarea's font, padding and line height, and the textarea fills the grid cell that box
+sizes, up to `max-height`. Nothing is measured, so the height is right in server-rendered markup and follows a width
+change. The send button is not natively disabled while it is unavailable: `aria-disabled="true"` mutes it, so it keeps
+focus.
+
+The colours are theme variables that default to the runtime tokens, so the dark theme follows without extra settings:
+
+| Variable (`theme.config`)                                | Default                                                                                 |
+| -------------------------------------------------------- | --------------------------------------------------------------------------------------- |
+| `@composerBg`, `@composerBorder`, `@composerBorderFocus` | `var(--smui-surfaceBackground)`, `var(--smui-outlineColor)`, `var(--smui-primaryColor)` |
+| `@composerText`, `@composerPlaceholder`                  | `var(--smui-onSurfaceColor)`, `var(--smui-onSurfaceVariant)`                            |
+| `@composerCounter`, `@composerCounterError`              | `var(--smui-onSurfaceVariant)`, `var(--smui-errorColor)`                                |
+| `@composerActionBg`, `@composerActionColor`              | `var(--smui-primaryColor)`, `var(--smui-onPrimaryColor)`                                |
+| `@composerStopBg`, `@composerStopColor`                  | `var(--smui-onSurfaceColor)`, `var(--smui-surfaceBackground)`                           |
+| `@composerDragBg`                                        | `var(--smui-primaryContainer)`                                                          |
+
+Sizes live in `composer.variables.less`: `@composerPadding`, `@composerGap`, `@composerRadius`, `@composerLineHeight`
+(one text line, `1.5rem`), `@composerFieldPaddingY` / `@composerFieldPaddingX` and `@composerIconButtonSize`.
+
+#### DiffStat colours
+
+`DiffStat` draws its figures and cells in the theme's `--smui-successColor` and `--smui-errorColor`, each mixed toward
+`--smui-onSurfaceColor` so that the text keeps 4.5:1 contrast (the raw tokens measure about 3.9–4.3:1) and a cell
+keeps 3:1 against a neutral one, in the light and the dark theme alike. A cell nobody owns is an outline of the surface ink
+(60% of it, 3.69:1 or better against the page and the surface in every bundled theme, light and dark), not a fill:
+a fill light enough to sit quietly measured 1.08–1.29:1 against a light page and made "4 of 5" look like "5 of 5":
+
+| Variable (`theme.config`) | Runtime property on `.smwb-diff-stat` | Default                                                         |
+| ------------------------- | ------------------------------------- | --------------------------------------------------------------- |
+| `@diffStatColorMix`       | — (compiled into the two below)       | `55%` of the success or error token                             |
+| —                         | `--smwb-diff-stat-added`              | success token mixed toward the surface ink                      |
+| —                         | `--smwb-diff-stat-removed`            | error token mixed toward the surface ink                        |
+| `@diffStatNeutralMix`     | `--smwb-diff-stat-neutral`            | the surface ink at `60%`, the outline colour of an unowned cell |
+
+Sizes are `@diffStatFontSize`, `@diffStatCompactFontSize`, `@diffStatCellWidth`, `@diffStatCellHeight`,
+`@diffStatCompactCellHeight`, `@diffStatCellGap` and `@diffStatCellRadius`. At runtime, set the three properties on the
+`DiffStat` itself (its `style`, or a class that outranks `.smwb-diff-stat`).
+
+#### AppBar window controls
+
+`AppBar variant="window"` is the title bar of a desktop app window (Electron, Tauri, an installed PWA with Window
+Controls Overlay): the bar drags the window (`-webkit-app-region: drag`) and every control inside it is taken out of
+the drag region. The width reserved for the OS window buttons is `@appBarWindowControlsLeft` (64px, the macOS traffic
+lights) and `@appBarWindowControlsRight` (138px, three 46px Windows/Linux caption buttons). Both are read through one
+runtime property, so an app retunes them without recompiling:
+
+```css
+.smwb-appbar.smwb-appbar_variant-window {
+  --smui-appBarWindowControlsWidth: 84px;
+}
+```
+
+`--smui-appBarWindowControlsWidth` is deliberately **not** declared in `variables.less`: it is read with a fallback,
+so unset means the Less defaults above. With `windowControls="auto"` the insets come from the shell instead —
+`env(titlebar-area-x)` / `env(titlebar-area-width)` — and are 0 in a plain browser tab; `left`, `right` and `none`
+pin them with a class. The insets are `padding-left` / `padding-right` on the bar, added to `@appBarPaddingX`, and
+they survive `dense`. Overlays are `no-drag` globally — `[data-smwb-overlay-layer]`, `.smwb-menu`, `.smwb-tooltip`,
+`.smwb-snackbars` and the library's own full-screen portals (`.smwb-chat-attachment-image__overlay`,
+`.smwb-image-modal__overlay`, `.smwb-thumb-card__preview`, `.smwb-chat-shell`): Electron hit-tests drag regions by
+geometry, and those popups portal to `<body>`. Inside the bar, the roles that keep `tabindex="-1"` while the group
+holds the tab stop (`menuitemcheckbox`, `menuitemradio`, `treeitem`, `spinbutton`, `gridcell`, `listbox`,
+`scrollbar`) are listed next to the focusable elements. A control the generic list cannot see opts out with
+`.smwb-appbar__no-drag` or `data-no-drag`.
+
 ## License
 
 [MIT](./LICENSE)

package/less/components/appBar/appBar.less

@@ -39,6 +39,90 @@
     padding: @appBarActionPadding;
     height: 48px;
   }
+  // `variant="window"`: the bar is the title bar of a desktop app window (Electron, Tauri, an installed PWA
+  // with Window Controls Overlay). Compound and ordered after `&.smwb-dense` above, so its side insets
+  // out-rank the dense `padding` shorthand instead of being wiped by it.
+  &.smwb-appbar_variant-window {
+    -webkit-app-region: drag;
+    app-region: drag;
+    // Dragging the window out of the title must not select the title text.
+    user-select: none;
+    // Width to keep clear of the OS window buttons on each side. With no class at all (`windowControls="auto"`)
+    // the area comes from the shell: `env(titlebar-area-*)` is exact under Window Controls Overlay, and in a
+    // plain browser tab the fallbacks make both insets 0, so the bar looks like `variant="default"`.
+    --smwb-appbar-wc-left: env(titlebar-area-x, 0px);
+    --smwb-appbar-wc-right: calc(100vw - env(titlebar-area-x, 0px) - env(titlebar-area-width, 100vw));
+    padding-left: calc(@appBarPaddingX + var(--smwb-appbar-wc-left));
+    padding-right: calc(@appBarPaddingX + var(--smwb-appbar-wc-right));
+    // `left`: the macOS traffic lights (`titleBarStyle: "hiddenInset"`), which Electron does not report
+    // through env() unless `titleBarOverlay` is on, hence the fixed width.
+    &.smwb-appbar_window-controls-left {
+      --smwb-appbar-wc-left: env(titlebar-area-x, var(--smui-appBarWindowControlsWidth, @appBarWindowControlsLeft));
+    }
+    // `right`: the caption buttons Windows/Linux draw at the right edge of the window. The fallback keeps
+    // their width clear by shortening the area the shell would have reported.
+    &.smwb-appbar_window-controls-right {
+      --smwb-appbar-wc-right: calc(
+        100vw - env(titlebar-area-x, 0px) -
+          env(titlebar-area-width, calc(100vw - var(--smui-appBarWindowControlsWidth, @appBarWindowControlsRight)))
+      );
+    }
+    &.smwb-appbar_window-controls-none {
+      --smwb-appbar-wc-left: 0px;
+      --smwb-appbar-wc-right: 0px;
+    }
+    // Electron delivers no mouse events at all inside a drag region, so every control in the bar has to opt
+    // out. Focusable and role-tagged elements are matched generically (the list is `:where()`, so an app's own
+    // selector still wins); a custom control that is neither takes `.smwb-appbar__no-drag` or `data-no-drag`.
+    :where(
+      a[href],
+      button,
+      input,
+      select,
+      textarea,
+      label,
+      summary,
+      iframe,
+      video[controls],
+      [contenteditable]:not([contenteditable="false"]),
+      [tabindex]:not([tabindex="-1"]),
+      [role="button"],
+      [role="link"],
+      [role="menuitem"],
+      [role="tab"],
+      [role="checkbox"],
+      [role="switch"],
+      [role="radio"],
+      [role="combobox"],
+      [role="textbox"],
+      [role="searchbox"],
+      [role="slider"],
+      [role="option"],
+      // Roving-tabindex widgets and the cells of composite widgets: while the group holds
+      // the tab stop their items carry `tabindex="-1"`, so `[tabindex]:not([tabindex="-1"])`
+      // above never matches them and only the role gets them out of the drag region.
+      [role="menuitemcheckbox"],
+      [role="menuitemradio"],
+      [role="treeitem"],
+      [role="spinbutton"],
+      [role="gridcell"],
+      [role="listbox"],
+      [role="scrollbar"],
+      .smwb-tooltip__wrapper,
+      .smwb-appbar__no-drag,
+      [data-no-drag]
+    ) {
+      -webkit-app-region: no-drag;
+      app-region: no-drag;
+    }
+    // Dense keeps the side insets and drops the vertical padding, which the 48px height has no room for.
+    // The insets are repeated here on purpose: `responsive.less` is imported after every component and resets
+    // `.smwb-appbar.smwb-dense` at phone widths, which would otherwise beat the two longhands above.
+    &.smwb-dense {
+      padding: 0 calc(@appBarPaddingX + var(--smwb-appbar-wc-right)) 0
+        calc(@appBarPaddingX + var(--smwb-appbar-wc-left));
+    }
+  }
   &__inner {
     display: flex;
     align-items: center;
@@ -52,6 +136,12 @@
     gap: @appBarActionsGap;
     white-space: nowrap;
   }
+  // The title may be a heading (`titleAs`): drop the UA margins and font so it
+  // looks the same as the div.
+  &__left__title {
+    margin: 0;
+    font: inherit;
+  }
   &__right {
     white-space: nowrap;
   }
@@ -74,6 +164,24 @@
   }
 }
 
+// Overlays opened from a `variant="window"` bar are portaled to `<body>`, outside the bar's own subtree, but
+// Electron hit-tests drag regions by geometry: a dropdown drawn over the bar would be unclickable. `no-drag`
+// is ignored outside app windows, so this is harmless for every other page. The library's own full-screen
+// portals are listed by class because they carry no `data-smwb-overlay-layer`: a lightbox opened over the top
+// of the bar would otherwise stay a drag region, so a backdrop click there would drag the window instead of
+// closing it.
+[data-smwb-overlay-layer],
+.smwb-menu,
+.smwb-tooltip,
+.smwb-snackbars,
+.smwb-chat-attachment-image__overlay,
+.smwb-image-modal__overlay,
+.smwb-thumb-card__preview,
+.smwb-chat-shell {
+  -webkit-app-region: no-drag;
+  app-region: no-drag;
+}
+
 .smwb-appbar_color-primary {
   background-color: var(--smui-primaryColor);
   color: var(--smui-onPrimaryColor);

package/less/components/badge/badge.less

@@ -51,6 +51,14 @@
     background-color: var(--smui-primaryColor);
   }
 
+  &_warning {
+    background-color: var(--smui-warningColor);
+    // The amber fill is too light for the white the other colors use; see
+    // @badgeWarningColor. An app that retunes --smui-warningColor at runtime
+    // retunes this ink to match, through --smui-badgeWarningColor.
+    color: var(--smui-badgeWarningColor, @badgeWarningColor);
+  }
+
   &_no-content {
     padding: 0;
     width: 8px;

package/less/components/button/button.less

@@ -33,14 +33,17 @@
   &.smwb-small {
     font-size: @smallButtonFontSize;
     padding: @buttonPaddingSmall;
+    min-height: var(--smui-control-h-sm, @smui-control-h-sm);
   }
   &.smwb-medium {
     font-size: @mediumButtonFontSize;
     padding: @buttonPaddingMedium;
+    min-height: var(--smui-control-h-md, @smui-control-h-md);
   }
   &.smwb-large {
     font-size: @largeButtonFontSize;
     padding: @buttonPaddingLarge;
+    min-height: var(--smui-control-h-lg, @smui-control-h-lg);
   }
 
   &.smwb-contained {
@@ -52,7 +55,10 @@
       }
       &:hover {
         background-color: var(--smui-buttonContainedHoverBg);
-        box-shadow: 0 4px 22px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+        box-shadow:
+          0 4px 22px -2px rgba(0, 0, 0, 0.2),
+          0 2px 2px 0 rgba(0, 0, 0, 0.14),
+          0 1px 5px 0 rgba(0, 0, 0, 0.12);
       }
       &:disabled {
         background-color: var(--smui-buttonDisabledBg);

package/less/components/checkbox/checkbox.less

@@ -1,10 +1,11 @@
 .smwb-text-field-checkbox {
-    min-width: 0 !important;
+  min-width: 0 !important;
 }
 
 .smwb-checkbox {
-  // The box's size, which the native input takes too.
-  @box-size: 18px;
+  // The box's size, which the native input takes too. The medium default is the
+  // selection token (18px), so the component's unstyled rendering is unchanged.
+  @box-size: @smui-selection-md;
 
   &__icon {
     opacity: 0;
@@ -26,6 +27,10 @@
     position: relative;
     transition: all 0.2s ease-in-out;
     &::before {
+      // The hover/active halo stays 40px at every size. It is already the box's
+      // own minimum touch target (40px >= the md row height) and scales from the
+      // box's center, so shrinking it for sm would buy nothing and drop the
+      // largest size's halo below the 22px box it is meant to surround.
       width: 40px;
       height: 40px;
       border-radius: @circleBorderRadius;
@@ -123,4 +128,33 @@
       }
     }
   }
+
+  // The size prop maps the row onto the control-height scale and the box onto the
+  // selection scale. The size class rides the wrapper (the row), so min-height
+  // goes there; the box keeps a hard height, since a checkbox box must not stretch
+  // to fill the row. The hidden native input is resized with the box so its hit
+  // area stays coincident. medium is the component default and repeats today's
+  // 18px box exactly, so unstyled rendering does not change.
+  &_size-small {
+    min-height: var(--smui-control-h-sm, @smui-control-h-sm);
+    .smwb-checkbox__btn,
+    .smwb-checkbox__input {
+      width: @smui-selection-sm;
+      height: @smui-selection-sm;
+    }
+  }
+  // The medium box stays on the base rule's @box-size: @smui-selection-md
+  // read — repeating it here would only raise specificity and break consumer
+  // overrides of the default checkbox.
+  &_size-medium {
+    min-height: var(--smui-control-h-md, @smui-control-h-md);
+  }
+  &_size-large {
+    min-height: var(--smui-control-h-lg, @smui-control-h-lg);
+    .smwb-checkbox__btn,
+    .smwb-checkbox__input {
+      width: @smui-selection-lg;
+      height: @smui-selection-lg;
+    }
+  }
 }

package/less/components/chip/chip.less

@@ -1,7 +1,9 @@
 .smwb-chip {
   position: relative;
   user-select: none;
-  height: 32px;
+  // Chip's default box is 32px, which is the sm step of the control scale, not md
+  // (Chip has no large size, so sm is the only step it maps to).
+  min-height: var(--smui-control-h-sm, @smui-control-h-sm);
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -33,7 +35,10 @@
     }
     &:active {
       background-color: var(--smui-chipsActiveBg);
-      box-shadow: 0px 3px 5px -1px rgb(0 0 0 / 16%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 2px 3px 0px rgb(0 0 0 / 12%);
+      box-shadow:
+        0px 3px 5px -1px rgb(0 0 0 / 16%),
+        0px 1px 1px 0px rgb(0 0 0 / 14%),
+        0px 2px 3px 0px rgb(0 0 0 / 12%);
     }
     &.smwb-selected {
       background-color: var(--smui-chipsSelectedBg);
@@ -47,7 +52,10 @@
     }
     &:active {
       background-color: var(--smui-chipsActiveBg);
-      box-shadow: 0px 3px 5px -1px rgb(0 0 0 / 11%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 2px 3px 0px rgb(0 0 0 / 12%);
+      box-shadow:
+        0px 3px 5px -1px rgb(0 0 0 / 11%),
+        0px 1px 1px 0px rgb(0 0 0 / 14%),
+        0px 2px 3px 0px rgb(0 0 0 / 12%);
     }
     &.smwb-selected {
       background-color: var(--smui-chipsSelectedBg);
@@ -119,7 +127,11 @@
   }
 
   &_size-small {
+    // 24px is deliberately below the control scale (Fork C): it stays a literal,
+    // not a token. min-height is repeated because the base rule floors the box at
+    // the sm step (32px); without it the height alone would be clamped back up.
     height: 24px;
+    min-height: 24px;
     padding: 0 @smui-space-sm;
     font-size: 0.75rem;
   }

package/less/components/commandPalette/commandPalette.entry.less

@@ -0,0 +1,2 @@
+@import (reference) "../../_prelude.less";
+@import "./commandPalette.less";