@kerfjs/ui 5.0.0-beta.103 → 5.0.0-beta.105

package/dist/split-view.js

@@ -1,161 +1,20 @@
-import { NavStack } from './chunk-6E2H2E5A.js';
-import { ResizableRegion } from './chunk-Y6KT7ZTR.js';
-
-
-
-
-
-
-
-
-
-
-
-
-
-import { remify, pct } from './chunk-IQSRHXZR.js';
-
-import { jsx, jsxs } from 'kerfjs/jsx-runtime';
-
-function listWidthValue(listWidth) {
-  const { size, maxFraction } = typeof listWidth === "number" ? { size: listWidth, maxFraction: void 0 } : listWidth;
-  if (!Number.isFinite(size) || size <= 0)
-    throw new RangeError(
-      "SplitView listWidth size must be a positive number of pixels"
-    );
-  if (maxFraction !== void 0 && (!Number.isFinite(maxFraction) || maxFraction <= 0 || maxFraction > 1))
-    throw new RangeError(
-      "SplitView listWidth maxFraction must be greater than 0 and at most 1"
-    );
-  const preferred = remify(size);
-  return maxFraction === void 0 ? preferred : `min(${preferred}, ${pct(maxFraction * 100)})`;
-}
-function SplitView({
-  id,
-  label,
-  list,
-  detail,
-  compact = false,
-  detailActive = false,
-  listTitle = "",
-  detailTitle = "",
-  backLabel = "Back",
-  compactStack = {},
-  resizable,
-  listWidth,
-  className = "",
-  slot
-}) {
-  if (listWidth !== void 0 && resizable)
-    throw new RangeError(
-      "SplitView listWidth applies to a fixed split; size a resizable list with resizable.size, min, and max"
-    );
-  const listWidthStyle = listWidth === void 0 ? void 0 : `--kui-split-view-list-width:${listWidthValue(listWidth)}`;
-  if (compact) {
-    const listView = {
-      ...compactStack.list,
-      key: "list",
-      toolbar: { ...compactStack.list?.toolbar, title: listTitle },
-      content: list
-    };
-    const views = detailActive ? [
-      listView,
-      {
-        ...compactStack.detail,
-        key: "detail",
-        toolbar: { ...compactStack.detail?.toolbar, title: detailTitle },
-        content: detail
-      }
-    ] : [listView];
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        class: `kui-split-view kui-split-view--compact ${className}`.trim(),
-        id,
-        "data-component": "split-view",
-        "data-split-mode": "compact",
-        slot,
-        children: /* @__PURE__ */ jsx(
-          NavStack,
-          {
-            id: `${id}-stack`,
-            label,
-            views,
-            backLabel,
-            backIcon: compactStack.backIcon,
-            backText: compactStack.backText,
-            toolbarConfig: compactStack.toolbarConfig,
-            hideToolbar: compactStack.hideToolbar,
-            bottomToolbar: compactStack.bottomToolbar,
-            chromeDividers: compactStack.chromeDividers,
-            chromePresentation: compactStack.chromePresentation,
-            bottomToolbarPresentation: compactStack.bottomToolbarPresentation
-          }
-        )
-      }
-    );
-  }
-  const listPane = resizable ? /* @__PURE__ */ jsx(
-    ResizableRegion,
-    {
-      id: `${id}-list`,
-      label: listTitle || "List",
-      size: resizable.size,
-      min: resizable.min,
-      max: resizable.max,
-      separator: resizable.separator,
-      handleIcon: resizable.handleIcon,
-      contentOverflow: resizable.contentOverflow,
-      collapsed: resizable.collapsed,
-      transitioning: resizable.transitioning,
-      collapseMotion: resizable.collapseMotion,
-      restoreControl: resizable.restoreControl,
-      restorePosition: resizable.restorePosition,
-      children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          class: "kui-split-view__list kui-pane",
-          "data-split-list": true,
-          "data-resizable": "true",
-          children: list
-        }
-      )
-    }
-  ) : /* @__PURE__ */ jsx(
-    "div",
-    {
-      class: "kui-split-view__list kui-pane",
-      "data-split-list": true,
-      "data-resizable": "false",
-      children: list
-    }
-  );
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      class: `kui-split-view ${className}`.trim(),
-      id,
-      "data-component": "split-view",
-      "data-split-mode": "split",
-      "aria-label": label,
-      style: listWidthStyle,
-      slot,
-      children: [
-        listPane,
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            class: "kui-split-view__detail kui-pane",
-            "data-split-detail": true,
-            "aria-label": detailTitle || void 0,
-            children: detail
-          }
-        )
-      ]
-    }
-  );
-}
-
-export { SplitView };
+export { SplitView } from './chunk-FKKJHGN5.js';
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 //# sourceMappingURL=split-view.js.map

package/dist/split-view.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/layout/split-view/split-view.tsx"],"names":[],"mappings":"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","file":"split-view.js","sourcesContent":["import type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport { pct, remify } from '../../../shared/styles/css-values.js';\nimport {\n  NavStack,\n  type NavStackProps,\n  type NavStackView,\n} from '../../navigation/nav-stack/nav-stack.js';\nimport {\n  ResizableRegion,\n  type ResizableRegionProps,\n} from '../resizable-region/resizable-region.js';\n\n/**\n * The roomy list pane's `ResizableRegion`: its committed `size` and `min` /\n * `max` limits, plus the region configuration that forwards unchanged\n * (`separator`, `handleIcon`, `contentOverflow`, and collapse:\n * `collapsed`, `transitioning`, `collapseMotion`, `restoreControl`,\n * `restorePosition`). Omitted options keep the region's defaults.\n */\nexport interface SplitViewResizable extends Pick<\n  ResizableRegionProps,\n  | 'separator'\n  | 'handleIcon'\n  | 'contentOverflow'\n  | 'collapsed'\n  | 'transitioning'\n  | 'collapseMotion'\n  | 'restoreControl'\n  | 'restorePosition'\n> {\n  size: number;\n  min: number;\n  max: number;\n}\n\n/** One compact view's top- and bottom-toolbar content (see `NavStackView`). */\nexport type SplitViewCompactViewToolbars = Pick<\n  NavStackView,\n  'toolbar' | 'bottomToolbar'\n>;\n\n/**\n * The compact `NavStack`'s configuration: its toolbar configuration, back\n * control, persistent bottom toolbar, chrome dividers, and chrome and\n * bottom-toolbar presentations forward to the stack, and `list` / `detail`\n * give each view its own toolbar groups.\n */\nexport interface SplitViewCompactStack extends Pick<\n  NavStackProps,\n  | 'toolbarConfig'\n  | 'backIcon'\n  | 'backText'\n  | 'hideToolbar'\n  | 'bottomToolbar'\n  | 'chromeDividers'\n  | 'chromePresentation'\n  | 'bottomToolbarPresentation'\n> {\n  /** Toolbar content for the list (root) view. */\n  list?: SplitViewCompactViewToolbars;\n  /** Toolbar content for the pushed detail view. */\n  detail?: SplitViewCompactViewToolbars;\n}\n\n/**\n * The fixed list column's width: a size in CSS pixels, or that size capped\n * at a fraction of the SplitView's own width so a narrow container (a\n * dialog, a small window) always leaves the detail in view.\n */\nexport type SplitViewListWidth =\n  | number\n  | {\n      /** Preferred width in CSS pixels. */\n      size: number;\n      /** Largest share of the SplitView's width, greater than 0 and at most 1. */\n      maxFraction?: number;\n    };\n\n/** The list-width custom property value for a fixed split. */\nfunction listWidthValue(listWidth: SplitViewListWidth): string {\n  const { size, maxFraction } =\n    typeof listWidth === 'number'\n      ? { size: listWidth, maxFraction: undefined }\n      : listWidth;\n  if (!Number.isFinite(size) || size <= 0)\n    throw new RangeError(\n      'SplitView listWidth size must be a positive number of pixels',\n    );\n  if (\n    maxFraction !== undefined &&\n    (!Number.isFinite(maxFraction) || maxFraction <= 0 || maxFraction > 1)\n  )\n    throw new RangeError(\n      'SplitView listWidth maxFraction must be greater than 0 and at most 1',\n    );\n  const preferred = remify(size);\n  return maxFraction === undefined\n    ? preferred\n    : `min(${preferred}, ${pct(maxFraction * 100)})`;\n}\n\nexport interface SplitViewProps {\n  id: string;\n  label: string;\n  /** The list (primary) pane. */\n  list: KerfUiContent;\n  /** The detail (secondary) pane. */\n  detail: KerfUiContent;\n  /**\n   * Compact (\"one pane at a time\") classes — a handset or portrait tablet.\n   * Derive from `deviceClass().value.compact`. When true the split collapses to\n   * a `NavStack`: the list is the root and the detail is pushed over it.\n   */\n  compact?: boolean;\n  /** In compact mode, whether the detail is currently pushed over the list. */\n  detailActive?: boolean;\n  /** Title/label for the list (compact NavStack root + region label). */\n  listTitle?: string;\n  /** Title/label for the detail (compact NavStack pushed view + region label). */\n  detailTitle?: string;\n  /** Back label for the compact NavStack (default \"Back\"). */\n  backLabel?: string;\n  /** Compact NavStack configuration and per-view toolbars. */\n  compactStack?: SplitViewCompactStack;\n  /** A resizable separator on roomy classes (min/max px). Omit for a fixed split. */\n  resizable?: SplitViewResizable;\n  /**\n   * The fixed split's list column width (default 320px). A number is CSS\n   * pixels; `{ size, maxFraction }` caps it at that share of the SplitView's\n   * width. A resizable split sizes its list with `resizable` instead.\n   */\n  listWidth?: SplitViewListWidth;\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/**\n * A list-detail split. On roomy classes it shows both panes side\n * by side with an optional resizable separator; on compact classes it collapses\n * to a `NavStack` (list → detail). See `docs/23-app-layouts.md` §3.2. Compose the\n * resizable wiring with `wireResizableRegions` and the compact back with\n * `wireNavStack`.\n */\nexport function SplitView({\n  id,\n  label,\n  list,\n  detail,\n  compact = false,\n  detailActive = false,\n  listTitle = '',\n  detailTitle = '',\n  backLabel = 'Back',\n  compactStack = {},\n  resizable,\n  listWidth,\n  className = '',\n  slot,\n}: SplitViewProps) {\n  if (listWidth !== undefined && resizable)\n    throw new RangeError(\n      'SplitView listWidth applies to a fixed split; size a resizable list with resizable.size, min, and max',\n    );\n  const listWidthStyle =\n    listWidth === undefined\n      ? undefined\n      : `--kui-split-view-list-width:${listWidthValue(listWidth)}`;\n  if (compact) {\n    const listView: NavStackView = {\n      ...compactStack.list,\n      key: 'list',\n      toolbar: { ...compactStack.list?.toolbar, title: listTitle },\n      content: list,\n    };\n    const views: NavStackView[] = detailActive\n      ? [\n          listView,\n          {\n            ...compactStack.detail,\n            key: 'detail',\n            toolbar: { ...compactStack.detail?.toolbar, title: detailTitle },\n            content: detail,\n          },\n        ]\n      : [listView];\n    return (\n      <div\n        class={`kui-split-view kui-split-view--compact ${className}`.trim()}\n        id={id}\n        data-component=\"split-view\"\n        data-split-mode=\"compact\"\n        slot={slot}\n      >\n        <NavStack\n          id={`${id}-stack`}\n          label={label}\n          views={views}\n          backLabel={backLabel}\n          backIcon={compactStack.backIcon}\n          backText={compactStack.backText}\n          toolbarConfig={compactStack.toolbarConfig}\n          hideToolbar={compactStack.hideToolbar}\n          bottomToolbar={compactStack.bottomToolbar}\n          chromeDividers={compactStack.chromeDividers}\n          chromePresentation={compactStack.chromePresentation}\n          bottomToolbarPresentation={compactStack.bottomToolbarPresentation}\n        />\n      </div>\n    );\n  }\n  const listPane = resizable ? (\n    <ResizableRegion\n      id={`${id}-list`}\n      label={listTitle || 'List'}\n      size={resizable.size}\n      min={resizable.min}\n      max={resizable.max}\n      separator={resizable.separator}\n      handleIcon={resizable.handleIcon}\n      contentOverflow={resizable.contentOverflow}\n      collapsed={resizable.collapsed}\n      transitioning={resizable.transitioning}\n      collapseMotion={resizable.collapseMotion}\n      restoreControl={resizable.restoreControl}\n      restorePosition={resizable.restorePosition}\n    >\n      <div\n        class=\"kui-split-view__list kui-pane\"\n        data-split-list\n        data-resizable=\"true\"\n      >\n        {list}\n      </div>\n    </ResizableRegion>\n  ) : (\n    <div\n      class=\"kui-split-view__list kui-pane\"\n      data-split-list\n      data-resizable=\"false\"\n    >\n      {list}\n    </div>\n  );\n  return (\n    <div\n      class={`kui-split-view ${className}`.trim()}\n      id={id}\n      data-component=\"split-view\"\n      data-split-mode=\"split\"\n      aria-label={label}\n      style={listWidthStyle}\n      slot={slot}\n    >\n      {listPane}\n      <div\n        class=\"kui-split-view__detail kui-pane\"\n        data-split-detail\n        aria-label={detailTitle || undefined}\n      >\n        {detail}\n      </div>\n    </div>\n  );\n}\n"]}
+{"version":3,"sources":[],"names":[],"mappings":"","file":"split-view.js"}

package/dist/state-banner.js

@@ -1,4 +1,4 @@
-export { StateBanner } from './chunk-FNZQOUZ5.js';
+export { StateBanner } from './chunk-2FW7D4IG.js';
 
 
 

package/dist/styles/badge.css

@@ -125,12 +125,9 @@
   background: var(--_kui-badge-fill-solid);
 }
 
-/* A multiple icon-only Select's count badge, in the trigger's end slot after
-   its fixed icon, sits 4px from the icon (the caret keeps its 12px after it).
-   The summary that ends the Select's label (and accessible name) stays inline
-   text, so a visible label reads "Labels: Bug, Docs" in place of the hidden
-   value. */
-.kui-select > .kui-badge[slot="end"] {
+/* A multiple icon-only Select's count badge, in the trigger after its fixed
+   icon, sits 4px from the icon (the caret keeps its 12px after it). */
+.kui-select__trigger > .kui-badge {
   margin-inline-start: 0.25rem;
 }
 
@@ -143,3 +140,18 @@
   margin-inline-end: var(--kui-layout-item-gap, 0.5rem);
   vertical-align: baseline;
 }
+
+/* `corner`: over the top-trailing corner of the control it sits in, which
+   positions itself for it (button.css, toolbar-control-group.css). A count
+   straddles the corner, growing inward; the dot sits just inside it. */
+.kui-badge[data-placement="corner"] {
+  position: absolute;
+  inset-block-start: -0.25rem;
+  inset-inline-end: -0.25rem;
+  pointer-events: none;
+}
+
+.kui-badge[data-placement="corner"][data-size="dot"] {
+  inset-block-start: 0.125rem;
+  inset-inline-end: 0.125rem;
+}

package/dist/styles/button.css

@@ -0,0 +1,230 @@
+/* Button: a native button (or link) at the 44px control height. The tone
+   picks the color family and the emphasis how loudly it asks; both resolve
+   to the private fill, text, and border colors below. */
+.kui-button {
+  --_kui-button-fill: var(--kui-color-neutral-fill-loud);
+  --_kui-button-text: var(--kui-color-neutral-on-loud);
+  --_kui-button-border: transparent;
+  --_kui-button-quiet: var(--kui-color-neutral-fill-quiet);
+  --_kui-button-on-quiet: var(--kui-color-neutral-on-quiet);
+  --_kui-button-outline: var(--kui-color-neutral-border-loud);
+  --_kui-button-height: round(2.75em, 1px);
+  position: relative;
+  display: inline-flex;
+  box-sizing: border-box;
+  height: var(--_kui-button-height);
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 0 0.5rem;
+  margin: 0;
+  /* Never the platform's native button drawing, like the other Kerf controls. */
+  appearance: none;
+  color: var(--_kui-button-text);
+  font: inherit;
+  font-size: var(--kui-font-m, 1rem);
+  font-weight: 500;
+  line-height: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  border: 1px solid var(--_kui-button-border);
+  /* The shared control radius native controls, fields, and Select follow. */
+  border-radius: var(--kui-layout-rounded-radius, calc(1px + 0.6875rem));
+  background-color: var(--_kui-button-fill);
+  cursor: pointer;
+  transition:
+    background-color 75ms,
+    border-color 75ms,
+    color 75ms;
+  user-select: none;
+  -webkit-user-select: none;
+}
+.kui-button[data-tone="brand"] {
+  --_kui-button-fill: var(--kui-color-brand-fill-loud);
+  --_kui-button-text: var(--kui-color-brand-on-loud);
+  --_kui-button-quiet: var(--kui-color-brand-fill-quiet);
+  --_kui-button-on-quiet: var(--kui-color-brand-on-quiet);
+  --_kui-button-outline: var(--kui-color-brand-border-loud);
+}
+.kui-button[data-tone="danger"] {
+  --_kui-button-fill: var(--kui-color-danger-fill-loud);
+  --_kui-button-text: var(--kui-color-danger-on-loud);
+  --_kui-button-quiet: var(--kui-color-danger-fill-quiet);
+  --_kui-button-on-quiet: var(--kui-color-danger-on-quiet);
+  --_kui-button-outline: var(--kui-color-danger-border-loud);
+}
+/* A secondary button is outlined in its tone; a plain one shows only its
+   text. Both take a quiet tone fill under the pointer. */
+.kui-button[data-emphasis="secondary"],
+.kui-button[data-emphasis="plain"] {
+  --_kui-button-fill: transparent;
+  --_kui-button-text: var(--_kui-button-on-quiet);
+}
+.kui-button[data-emphasis="secondary"] {
+  --_kui-button-border: var(--_kui-button-outline);
+}
+.kui-button[data-size="compact"] {
+  --_kui-button-height: round(calc(1rem + 1.2em), 1px);
+  font-size: var(--kui-font-s, 0.875rem);
+}
+/* An icon-only button is a square one control height on each side, which a
+   tight row never squeezes. */
+.kui-button[data-icon-only] {
+  width: var(--_kui-button-height);
+  flex-shrink: 0;
+  padding: 0;
+}
+/* A pill: fully round ends (a circle when icon-only). */
+.kui-button[data-shape="pill"] {
+  border-radius: var(--kui-layout-pill-radius, calc(1px + 1.3125rem));
+}
+/* A pressed neutral toggle takes the brand accent, as a pressed toolbar group
+   control and a selected chip do; brand and danger keep their own tone. */
+.kui-button[aria-pressed="true"]:not(
+    [data-tone="brand"],
+    [data-tone="danger"]
+  ) {
+  --_kui-button-fill: var(--kui-color-brand-fill-loud);
+  --_kui-button-text: var(--kui-color-brand-on-loud);
+  --_kui-button-quiet: var(--kui-color-brand-fill-quiet);
+  --_kui-button-on-quiet: var(--kui-color-brand-on-quiet);
+  --_kui-button-outline: var(--kui-color-brand-border-loud);
+}
+/* A pressed toggle draws on top of its tone and emphasis. Secondary and plain
+   take the tone's quiet fill with a doubled tone outline; primary keeps its
+   loud fill (darkened for brand and danger) with an inset ring. The second pixel of outline marks
+   the state without relying on hue. */
+.kui-button[aria-pressed="true"]:is(
+    [data-emphasis="secondary"],
+    [data-emphasis="plain"]
+  ) {
+  --_kui-button-fill: var(--_kui-button-quiet);
+  --_kui-button-text: var(--_kui-button-on-quiet);
+  --_kui-button-border: var(--_kui-button-outline);
+  box-shadow: inset 0 0 0 1px var(--_kui-button-outline);
+}
+.kui-button[aria-pressed="true"]:not(
+    [data-emphasis="secondary"],
+    [data-emphasis="plain"]
+  ) {
+  box-shadow: inset 0 0 0 2px
+    color-mix(in oklab, var(--_kui-button-text) 45%, transparent);
+}
+.kui-button[data-tone="brand"][aria-pressed="true"]:not(
+    [data-emphasis="secondary"],
+    [data-emphasis="plain"]
+  ) {
+  --_kui-button-fill: color-mix(
+    in oklab,
+    var(--kui-color-brand-fill-loud),
+    light-dark(#000, #fff) 18%
+  );
+}
+.kui-button[data-tone="danger"][aria-pressed="true"]:not(
+    [data-emphasis="secondary"],
+    [data-emphasis="plain"]
+  ) {
+  --_kui-button-fill: color-mix(
+    in oklab,
+    var(--kui-color-danger-fill-loud),
+    light-dark(#000, #fff) 18%
+  );
+}
+@media (hover: hover) {
+  .kui-button[aria-pressed="true"]:is(
+      [data-emphasis="secondary"],
+      [data-emphasis="plain"]
+    ):not(:disabled, [aria-disabled="true"], [data-loading]):hover {
+    background-color: color-mix(
+      in oklab,
+      var(--_kui-button-quiet),
+      var(--_kui-button-outline) 12%
+    );
+  }
+}
+@media (forced-colors: active) {
+  .kui-button[aria-pressed="true"] {
+    border-color: Highlight;
+    color: HighlightText;
+    background: Highlight;
+  }
+}
+/* In a Toolbar's trailing zone, a standalone Button keeps the first control
+   band's axis, as a ToolbarControlGroup does, so taller siblings never move
+   it. `--_kui-toolbar-band` is the context the Toolbar provides. */
+.kui-toolbar__trailing > .kui-button {
+  flex: 0 0 auto;
+  align-self: flex-start;
+  margin-block-start: max(
+    0px,
+    calc((var(--_kui-toolbar-band) - var(--_kui-button-height)) / 2)
+  );
+}
+/* Beside a field in a ListInsetControl, the square keeps its size instead of
+   growing to share the row, and lines up with the field below its label. */
+.kui-list-inset-control > .kui-button[data-icon-only] {
+  flex: none;
+  align-self: flex-end;
+}
+@media (hover: hover) {
+  .kui-button:not(:disabled, [aria-disabled="true"], [data-loading]):hover {
+    background-color: color-mix(
+      in oklab,
+      var(--_kui-button-fill),
+      oklch(from currentColor calc(1 - l) c h) 10%
+    );
+  }
+  .kui-button:is([data-emphasis="secondary"], [data-emphasis="plain"]):not(
+      :disabled,
+      [aria-disabled="true"],
+      [data-loading]
+    ):hover {
+    background-color: var(--_kui-button-quiet);
+  }
+}
+.kui-button:not(:disabled, [aria-disabled="true"], [data-loading]):active {
+  background-color: color-mix(
+    in oklab,
+    var(--_kui-button-fill),
+    light-dark(#fff, #1c1c1e) 10%
+  );
+}
+.kui-button:focus {
+  outline: none;
+}
+.kui-button:focus-visible {
+  outline: var(--kui-focus-ring);
+  outline-offset: 1px;
+}
+.kui-button:is(:disabled, [aria-disabled="true"]) {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+.kui-button__icon {
+  display: inline-flex;
+  flex: none;
+}
+.kui-button__label {
+  min-width: 0;
+}
+/* Busy: the spinner takes the label's place. The label keeps the width and
+   is only transparent, not hidden, so it still names the button. */
+.kui-button[data-loading] {
+  cursor: wait;
+}
+.kui-button[data-loading] > :is(.kui-button__label, .kui-button__icon) {
+  opacity: 0;
+}
+.kui-button__spinner {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  inset: 0;
+}
+@media (forced-colors: active) {
+  .kui-button {
+    border-color: ButtonText;
+  }
+}

package/dist/styles/catalog/components/catalog-example.css

@@ -185,7 +185,8 @@
 /* Bare specimens use a small inset to align with the surrounding examples. */
 .kui-catalog-example[data-align="glyph"]
   > :not([data-catalog-example-label]):not([data-catalog-example-note]):not(
-    :popover-open
+    :popover-open,
+    :modal
   ) {
   --kui-catalog-example-align: 1rem;
   margin-inline-start: var(--kui-catalog-example-align);
@@ -193,12 +194,20 @@
 
 .kui-catalog-example[data-align="inline-control"]
   > :not([data-catalog-example-label]):not([data-catalog-example-note]):not(
-    :popover-open
+    :popover-open,
+    :modal
   ) {
   --kui-catalog-example-align: 0.5rem;
   margin-inline-start: var(--kui-catalog-example-align);
 }
 
-.kui-catalog-example[data-align="text-trigger"] > wa-dropdown > wa-button {
-  margin-inline-start: 0.5rem;
+/* A trigger's text lines up with the example label's: the trigger's own
+   inset (8px plus its 1px border) follows this 8px offset. */
+.kui-catalog-example[data-align="text-trigger"]
+  > :not([data-catalog-example-label]):not([data-catalog-example-note]):not(
+    :popover-open,
+    :modal
+  ) {
+  --kui-catalog-example-align: 0.5rem;
+  margin-inline-start: var(--kui-catalog-example-align);
 }

package/dist/styles/checkbox.css

@@ -0,0 +1,121 @@
+/* Checkbox: a drawn box beside its label, with hint and error text on the
+   label's column. The native input sits invisibly over the box, so pointer,
+   keyboard, touch exploration, and forms all reach the real control. */
+.kui-checkbox {
+  --_kui-checkbox-box: 1.25rem;
+  --_kui-checkbox-gap: 0.5rem;
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  font-size: var(--kui-font-m, 1rem);
+  font-weight: 400;
+  line-height: 1.2;
+}
+.kui-checkbox[data-size="compact"] {
+  --_kui-checkbox-box: 1.125rem;
+  --_kui-checkbox-gap: 0.4375rem;
+  font-size: var(--kui-font-s, 0.875rem);
+}
+.kui-checkbox__row {
+  display: inline-flex;
+  width: fit-content;
+  align-items: flex-start;
+  gap: var(--_kui-checkbox-gap);
+  color: var(--kui-color-text);
+  cursor: pointer;
+}
+.kui-checkbox__control {
+  position: relative;
+  display: inline-flex;
+  flex: none;
+}
+/* A real input with every native and global form-control style reset. */
+.kui-checkbox__input {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  border: none;
+  opacity: 0;
+  cursor: inherit;
+  appearance: none;
+}
+.kui-checkbox__box {
+  display: inline-flex;
+  box-sizing: border-box;
+  width: var(--_kui-checkbox-box);
+  height: var(--_kui-checkbox-box);
+  align-items: center;
+  justify-content: center;
+  color: var(--kui-color-brand-on-loud);
+  border: 1px solid var(--kui-color-neutral-border-normal);
+  border-radius: 0.1875rem;
+  background-color: var(--kui-color-surface);
+}
+.kui-checkbox__box > [data-lucide] {
+  display: none;
+  width: calc(var(--_kui-checkbox-box) - 0.375rem);
+  height: calc(var(--_kui-checkbox-box) - 0.375rem);
+  stroke-width: 3;
+}
+.kui-checkbox__input:is(:checked, :indeterminate) + .kui-checkbox__box {
+  border-color: var(--kui-color-brand-fill-loud);
+  background-color: var(--kui-color-brand-fill-loud);
+}
+.kui-checkbox__input:checked:not(:indeterminate)
+  + .kui-checkbox__box
+  > [data-lucide="check"],
+.kui-checkbox__input:indeterminate
+  + .kui-checkbox__box
+  > [data-lucide="minus"] {
+  display: block;
+}
+.kui-checkbox__input:focus-visible + .kui-checkbox__box {
+  outline: var(--kui-focus-ring);
+  outline-offset: 1px;
+}
+.kui-checkbox[data-invalid] .kui-checkbox__box {
+  border-color: var(--kui-color-danger-border-loud);
+}
+.kui-checkbox__label {
+  min-width: 0;
+  padding-block-start: calc((var(--_kui-checkbox-box) - 1lh) / 2);
+  overflow-wrap: anywhere;
+}
+.kui-checkbox:has(.kui-checkbox__input:disabled) .kui-checkbox__row {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+.kui-checkbox__hint,
+.kui-checkbox__error {
+  display: block;
+  margin-block-start: 0.4375rem;
+  padding-inline-start: calc(
+    var(--_kui-checkbox-box) + var(--_kui-checkbox-gap)
+  );
+  color: var(--kui-color-text-quiet);
+  font-size: var(--kui-font-s, 0.875rem);
+  line-height: 1.6;
+}
+.kui-checkbox[data-size="compact"]
+  :is(.kui-checkbox__hint, .kui-checkbox__error) {
+  font-size: var(--kui-font-xs, 0.75rem);
+}
+.kui-checkbox__error {
+  color: var(--kui-color-danger-on-quiet);
+}
+.kui-checkbox__hint + .kui-checkbox__error {
+  margin-block-start: 0;
+}
+@media (forced-colors: active) {
+  .kui-checkbox__box {
+    border-color: CanvasText;
+  }
+  .kui-checkbox__input:is(:checked, :indeterminate) + .kui-checkbox__box {
+    color: HighlightText;
+    border-color: Highlight;
+    background-color: Highlight;
+  }
+}