@kerfjs/ui 5.0.0-beta.9 → 5.0.0-beta.90

package/dist/split-view.js

@@ -1,19 +1,134 @@
-import { NavStack } from './chunk-BLK3UEEI.js';
+import { NavStack } from './chunk-SJW5BCEQ.js';
+
+import { ResizableRegion } from './chunk-Y6KT7ZTR.js';
+
+
+
+
+
+
+
+
+
 
-import { ResizableRegion } from './chunk-M5JRI6MN.js';
 
 import { jsx, jsxs } from 'kerfjs/jsx-runtime';
 
-function SplitView({ id, label, list, detail, compact = false, detailActive = false, listTitle = "", detailTitle = "", backLabel = "Back", resizable, className = "" }) {
+function SplitView({
+  id,
+  label,
+  list,
+  detail,
+  compact = false,
+  detailActive = false,
+  listTitle = "",
+  detailTitle = "",
+  backLabel = "Back",
+  compactStack = {},
+  resizable,
+  className = "",
+  slot
+}) {
   if (compact) {
-    const views = detailActive ? [{ key: "list", title: listTitle, content: list }, { key: "detail", title: detailTitle, content: detail }] : [{ key: "list", title: listTitle, content: list }];
-    return /* @__PURE__ */ jsx("div", { class: `kui-split-view kui-split-view--compact ${className}`.trim(), id, "data-component": "split-view", "data-split-mode": "compact", children: /* @__PURE__ */ jsx(NavStack, { id: `${id}-stack`, label, views, backLabel }) });
+    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
+          }
+        )
+      }
+    );
   }
-  const listPane = resizable ? /* @__PURE__ */ jsx(ResizableRegion, { id: `${id}-list`, label: listTitle || "List", size: resizable.size, min: resizable.min, max: resizable.max, children: /* @__PURE__ */ jsx("div", { class: "kui-split-view__list kui-pane", "data-split-list": true, children: list }) }) : /* @__PURE__ */ jsx("div", { class: "kui-split-view__list kui-pane", "data-split-list": true, children: list });
-  return /* @__PURE__ */ jsxs("div", { class: `kui-split-view ${className}`.trim(), id, "data-component": "split-view", "data-split-mode": "split", "aria-label": label, children: [
-    listPane,
-    /* @__PURE__ */ jsx("div", { class: "kui-split-view__detail kui-pane", "data-split-detail": true, "aria-label": detailTitle || void 0, children: detail })
-  ] });
+  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,
+      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 };

package/dist/split-view.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/split-view.tsx"],"names":[],"mappings":";;;;;;AA4CO,SAAS,UAAU,EAAE,EAAA,EAAI,OAAO,IAAA,EAAM,MAAA,EAAQ,UAAU,KAAA,EAAO,YAAA,GAAe,OAAO,SAAA,GAAY,EAAA,EAAI,cAAc,EAAA,EAAI,SAAA,GAAY,QAAQ,SAAA,EAAW,SAAA,GAAY,IAAG,EAAmB;AAC7L,EAAA,IAAI,OAAA,EAAS;AACX,IAAA,MAAM,KAAA,GAAQ,YAAA,GACV,CAAC,EAAE,GAAA,EAAK,MAAA,EAAQ,KAAA,EAAO,SAAA,EAAW,OAAA,EAAS,IAAA,EAAK,EAAG,EAAE,GAAA,EAAK,QAAA,EAAU,KAAA,EAAO,WAAA,EAAa,OAAA,EAAS,MAAA,EAAQ,CAAA,GACzG,CAAC,EAAE,GAAA,EAAK,MAAA,EAAQ,KAAA,EAAO,SAAA,EAAW,OAAA,EAAS,IAAA,EAAM,CAAA;AACrD,IAAA,uBAAO,GAAA,CAAC,SAAI,KAAA,EAAO,CAAA,uCAAA,EAA0C,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK,EAAG,EAAA,EAAQ,gBAAA,EAAe,YAAA,EAAa,mBAAgB,SAAA,EACnI,QAAA,kBAAA,GAAA,CAAC,YAAS,EAAA,EAAI,CAAA,EAAG,EAAE,CAAA,MAAA,CAAA,EAAU,KAAA,EAAc,KAAA,EAAc,SAAA,EAAsB,CAAA,EACjF,CAAA;AAAA,EACF;AACA,EAAA,MAAM,QAAA,GAAW,SAAA,mBACb,GAAA,CAAC,eAAA,EAAA,EAAgB,IAAI,CAAA,EAAG,EAAE,CAAA,KAAA,CAAA,EAAS,KAAA,EAAO,aAAa,MAAA,EAAQ,IAAA,EAAM,SAAA,CAAU,IAAA,EAAM,KAAK,SAAA,CAAU,GAAA,EAAK,GAAA,EAAK,SAAA,CAAU,KACtH,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,+BAAA,EAAgC,mBAAe,IAAA,EAAE,QAAA,EAAA,IAAA,EAAK,CAAA,EACnE,CAAA,uBACC,KAAA,EAAA,EAAI,KAAA,EAAM,+BAAA,EAAgC,iBAAA,EAAe,MAAE,QAAA,EAAA,IAAA,EAAK,CAAA;AACrE,EAAA,uBAAO,IAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAO,CAAA,eAAA,EAAkB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK,EAAG,EAAA,EAAQ,gBAAA,EAAe,YAAA,EAAa,iBAAA,EAAgB,OAAA,EAAQ,cAAY,KAAA,EAC9H,QAAA,EAAA;AAAA,IAAA,QAAA;AAAA,oBACD,GAAA,CAAC,SAAI,KAAA,EAAM,iCAAA,EAAkC,qBAAiB,IAAA,EAAC,YAAA,EAAY,WAAA,IAAe,MAAA,EAAY,QAAA,EAAA,MAAA,EAAO;AAAA,GAAA,EAC/G,CAAA;AACF","file":"split-view.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport { NavStack } from './nav-stack.js';\nimport { ResizableRegion } from './resizable-region.js';\n\nexport interface SplitViewResizable {\n  size: number;\n  min: number;\n  max: number;\n}\n\nexport interface SplitViewProps {\n  id: string;\n  label: string;\n  /** The list (primary) pane. */\n  list: SafeHtml;\n  /** The detail (secondary) pane. */\n  detail: SafeHtml;\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  /** A resizable separator on roomy classes (min/max px). Omit for a fixed split. */\n  resizable?: SplitViewResizable;\n  className?: 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({ id, label, list, detail, compact = false, detailActive = false, listTitle = '', detailTitle = '', backLabel = 'Back', resizable, className = '' }: SplitViewProps) {\n  if (compact) {\n    const views = detailActive\n      ? [{ key: 'list', title: listTitle, content: list }, { key: 'detail', title: detailTitle, content: detail }]\n      : [{ key: 'list', title: listTitle, content: list }];\n    return <div class={`kui-split-view kui-split-view--compact ${className}`.trim()} id={id} data-component=\"split-view\" data-split-mode=\"compact\">\n      <NavStack id={`${id}-stack`} label={label} views={views} backLabel={backLabel} />\n    </div>;\n  }\n  const listPane = resizable\n    ? <ResizableRegion id={`${id}-list`} label={listTitle || 'List'} size={resizable.size} min={resizable.min} max={resizable.max}>\n        <div class=\"kui-split-view__list kui-pane\" data-split-list>{list}</div>\n      </ResizableRegion>\n    : <div class=\"kui-split-view__list kui-pane\" data-split-list>{list}</div>;\n  return <div class={`kui-split-view ${className}`.trim()} id={id} data-component=\"split-view\" data-split-mode=\"split\" aria-label={label}>\n    {listPane}\n    <div class=\"kui-split-view__detail kui-pane\" data-split-detail aria-label={detailTitle || undefined}>{detail}</div>\n  </div>;\n}\n"]}
+{"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 {\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, and chrome dividers forward to the\n * stack, and `list` / `detail` 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> {\n  /** Toolbar content for the list (root) view. */\n  list?: SplitViewCompactViewToolbars;\n  /** Toolbar content for the pushed detail view. */\n  detail?: SplitViewCompactViewToolbars;\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  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  className = '',\n  slot,\n}: SplitViewProps) {\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        />\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      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"]}

package/dist/state-banner.d.ts

@@ -1,17 +1,31 @@
 import { SafeHtml } from 'kerfjs';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
+import { S as SemanticTone } from './semantic-tone-CdW013KF.js';
 
-type StateBannerTone = 'neutral' | 'info' | 'success' | 'warning' | 'danger';
+/** @deprecated Use SemanticTone. */
+type StateBannerTone = SemanticTone;
+type StateBannerUrgency = 'status' | 'alert';
+type StateBannerCopyLayout = 'inline' | 'stacked';
+type StateBannerActionPlacement = 'trailing' | 'below';
 interface StateBannerProps {
     title: string;
     detail?: string;
+    /** Optional compact status or count shown beside the title. */
+    badge?: string;
     icon?: SafeHtml;
-    action?: SafeHtml;
-    tone?: StateBannerTone;
-    urgency?: 'status' | 'alert';
+    action?: KerfUiContent;
+    tone?: SemanticTone;
+    urgency?: StateBannerUrgency;
+    /** Keep the detail beside the title, or give it its own line. */
+    copyLayout?: StateBannerCopyLayout;
+    /** Place the action beside the copy or on a separate trailing row. */
+    actionPlacement?: StateBannerActionPlacement;
     className?: string;
-    /** Render the title and detail as unanimated loading skeletons, keeping the icon and tone. */
+    /** Render the title, badge, and detail as unanimated loading skeletons, keeping the icon and tone. The detail line appears only when `detail` is set, as in the live banner. */
     placeholder?: boolean;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
 }
-declare function StateBanner({ title, detail, icon, action, tone, urgency, className, placeholder }: StateBannerProps): SafeHtml;
+declare function StateBanner({ title, detail, badge, icon, action, tone, urgency, copyLayout, actionPlacement, className, placeholder, slot, }: StateBannerProps): SafeHtml;
 
-export { StateBanner, type StateBannerProps, type StateBannerTone };
+export { SemanticTone, StateBanner, type StateBannerActionPlacement, type StateBannerCopyLayout, type StateBannerProps, type StateBannerTone, type StateBannerUrgency };

package/dist/state-banner.js

@@ -1,4 +1,6 @@
-export { StateBanner } from './chunk-I7INRJO4.js';
+export { StateBanner } from './chunk-PGL6TXFW.js';
+
+
 
 
 //# sourceMappingURL=state-banner.js.map

package/dist/styles/anchored-surface.css

@@ -0,0 +1,15 @@
+.kui-anchored-surface {
+  box-sizing: border-box;
+  inset: auto;
+  width: max-content;
+  max-width: calc(100vw - 2 * var(--kui-space-xs, 8px));
+  max-height: calc(100dvh - 2 * var(--kui-space-xs, 8px));
+  overflow: auto;
+  padding: var(--kui-anchored-surface-inset, var(--kui-space-xs, 8px));
+  border: 1px solid var(--kui-color-neutral-border-normal);
+  border-radius: var(--kui-anchored-surface-radius, var(--kui-radius-m));
+  color: var(--kui-color-text, inherit);
+  background: var(--kui-color-surface-raised);
+  box-shadow: var(--kui-shadow-l);
+  font: inherit;
+}

package/dist/styles/app-tab.css

@@ -13,6 +13,9 @@
     transparent
   );
   --kui-app-tab-drop-indicator: var(--kui-color-brand-border-normal);
+  --kui-app-tab-drop-target-background: var(--kui-color-brand-fill-quiet);
+  --kui-app-tab-drop-target-ring: var(--kui-color-brand-border-normal);
+  --kui-app-tab-drop-target-color: var(--kui-color-brand-on-quiet);
   position: relative;
   display: flex;
   width: max-content;
@@ -26,6 +29,79 @@
   align-items: center;
   flex: none;
 }
+.kui-app-tab[data-pinned="true"] {
+  position: sticky;
+  z-index: 1;
+  inset-inline-start: 0;
+  background: var(
+    --kui-app-tab-pinned-background,
+    var(--_kui-app-tab-pinned-default-background, var(--kui-color-surface))
+  );
+}
+.kui-tab-bar__tabs[data-snap-tabs="true"]
+  > .kui-app-tab:not([data-pinned="true"]) {
+  scroll-snap-align: start;
+}
+.kui-app-tab[data-pinned="true"]::before {
+  content: "";
+  position: absolute;
+  z-index: -1;
+  inset-block: 0;
+  inset-inline-start: calc(
+    -1 *
+      (
+        var(--kui-tab-bar-strip-padding, 1px) +
+          var(--kui-tab-bar-strip-border-width, 1px)
+      )
+  );
+  inset-inline-end: 0;
+  /* Keep the opaque scroll backing inside the tab's pill silhouette so it
+     cannot square off a selected tab's trailing corner and shadow. */
+  border-radius: inherit;
+  background: var(
+    --kui-app-tab-pinned-background,
+    var(--_kui-app-tab-pinned-default-background, var(--kui-color-surface))
+  );
+}
+/* The leading overflow line belongs after the pinned tab, where its scrolling
+   peers disappear. Reuse the opaque backing so drag indicators can still use
+   ::after. */
+.kui-tab-bar__tabs:dir(ltr)[data-scroll-overflow*="l"]
+  > .kui-app-tab[data-pinned="true"]::before,
+.kui-tab-bar__tabs:dir(rtl)[data-scroll-overflow*="r"]
+  > .kui-app-tab[data-pinned="true"]::before {
+  inset-inline-end: -1px;
+  border-inline-end: 1px solid
+    var(--kui-tab-bar-divider-color, var(--kui-color-neutral-border-normal));
+}
+.kui-tab-bar[data-presentation="segmented"] .kui-app-tab[data-pinned="true"],
+.kui-tab-bar[data-presentation="inspector"] .kui-app-tab[data-pinned="true"] {
+  --_kui-app-tab-pinned-default-background: var(
+    --kui-tab-bar-strip-background,
+    var(--kui-color-neutral-fill-quiet)
+  );
+}
+.kui-app-tab[data-pinned="true"]:not([data-selected="true"]):hover {
+  background: var(
+    --kui-app-tab-pinned-hover-background,
+    var(--kui-color-neutral-fill-quiet)
+  );
+}
+.kui-app-tab[data-size="compact"] {
+  height: 2rem;
+}
+.kui-app-tab[data-presentation="segmented"] {
+  border-radius: var(--kui-radius-s);
+  box-shadow: none;
+}
+.kui-tab-bar[data-presentation="inspector"]
+  .kui-app-tab[data-presentation="segmented"] {
+  border-radius: calc(
+    var(--kui-tab-bar-strip-radius, var(--kui-layout-rounded-radius)) -
+      var(--kui-tab-bar-strip-padding, 1px) -
+      var(--kui-tab-bar-strip-border-width, 1px)
+  );
+}
 .kui-app-tab:hover {
   border-color: var(--kui-color-neutral-border-normal);
   background: var(--kui-app-tab-hover-background);
@@ -36,6 +112,11 @@
   background: var(--kui-app-tab-selected-background);
   box-shadow: var(--kui-shadow-s);
 }
+.kui-app-tab[data-drop-target="true"] {
+  color: var(--kui-app-tab-drop-target-color);
+  background: var(--kui-app-tab-drop-target-background);
+  box-shadow: inset 0 0 0 2px var(--kui-app-tab-drop-target-ring);
+}
 .kui-app-tab[data-tab-dragging="true"] {
   opacity: 0.55;
 }
@@ -92,12 +173,154 @@
   flex: none;
 }
 .kui-app-tab__name {
+  max-width: var(--kui-app-tab-label-max-width, none);
   overflow: hidden;
   font-size: var(--kui-font-xs);
   font-weight: 650;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.kui-app-tab[data-name-overflow="visible"] .kui-app-tab__name {
+  max-width: none;
+  overflow: visible;
+  text-overflow: clip;
+}
+.kui-app-tab[data-attention="true"] .kui-app-tab__name {
+  color: var(--kui-app-tab-attention-color, var(--kui-color-warning-on-quiet));
+}
+.kui-app-tab[data-presentation="icon-only"] .kui-app-tab__select {
+  width: 100%;
+  justify-content: center;
+}
+.kui-app-tab[data-presentation="icon-only"] .kui-app-tab__name {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  clip-path: inset(50%);
+}
+.kui-app-tab[data-presentation="icon-only"] {
+  width: 2rem;
+  min-width: 2rem;
+}
+/* TabBar owns the tablist width query; AppTab owns its own responsive
+   geometry and visually hidden name. The name remains in the accessibility
+   tree, so the tab keeps its accessible name without a rerender. */
+@container kui-tab-bar-tabs (max-width: 52rem) {
+  .kui-tab-bar[data-icon-only-at="wide"]
+    .kui-tab-bar__tabs
+    > .kui-app-tab[data-presentation="segmented"] {
+    width: 2rem;
+    min-width: 2rem;
+    flex: none;
+  }
+  .kui-tab-bar[data-icon-only-at="wide"]
+    .kui-app-tab[data-presentation="segmented"]
+    .kui-app-tab__select {
+    width: 100%;
+    justify-content: center;
+  }
+  .kui-tab-bar[data-icon-only-at="wide"]
+    .kui-app-tab[data-presentation="segmented"]
+    .kui-app-tab__name {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    clip-path: inset(50%);
+  }
+}
+@container kui-tab-bar-tabs (max-width: 44rem) {
+  .kui-tab-bar[data-icon-only-at="narrow"]
+    .kui-tab-bar__tabs
+    > .kui-app-tab[data-presentation="segmented"] {
+    width: 2rem;
+    min-width: 2rem;
+    flex: none;
+  }
+  .kui-tab-bar[data-icon-only-at="narrow"]
+    .kui-app-tab[data-presentation="segmented"]
+    .kui-app-tab__select {
+    width: 100%;
+    justify-content: center;
+  }
+  .kui-tab-bar[data-icon-only-at="narrow"]
+    .kui-app-tab[data-presentation="segmented"]
+    .kui-app-tab__name {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    clip-path: inset(50%);
+  }
+}
+@container kui-tab-bar-tabs (max-width: 28rem) {
+  .kui-tab-bar[data-icon-only-at="compact"]
+    .kui-tab-bar__tabs
+    > .kui-app-tab[data-presentation="segmented"] {
+    width: 2rem;
+    min-width: 2rem;
+    flex: none;
+  }
+  .kui-tab-bar[data-icon-only-at="compact"]
+    .kui-app-tab[data-presentation="segmented"]
+    .kui-app-tab__select {
+    width: 100%;
+    justify-content: center;
+  }
+  .kui-tab-bar[data-icon-only-at="compact"]
+    .kui-app-tab[data-presentation="segmented"]
+    .kui-app-tab__name {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    clip-path: inset(50%);
+  }
+}
+/* In a TabBar, the tab styles itself in the context of its parent strip. A
+   segmented strip's outer ends follow the pill track: the first tab's leading
+   corners, and a filled strip's last tab's trailing corners, are pill-rounded
+   so each end is concentric with the track (TabBar insets a compact strip's
+   tabs to match). Only fill allocation carries the last tab to the track's
+   trailing end; an intrinsic strip's last tab stops short of it and keeps the
+   segment radius, as do the corners between tabs. */
+.kui-tab-bar[data-presentation="segmented"]
+  .kui-tab-bar__tabs
+  > .kui-app-tab:first-child {
+  border-start-start-radius: var(--kui-radius-pill);
+  border-end-start-radius: var(--kui-radius-pill);
+}
+.kui-tab-bar[data-presentation="segmented"][data-allocation="fill"]
+  .kui-tab-bar__tabs
+  > .kui-app-tab:last-child {
+  border-start-end-radius: var(--kui-radius-pill);
+  border-end-end-radius: var(--kui-radius-pill);
+}
+/* Fill allocation shares the strip equally and centers each tab's content. */
+.kui-tab-bar[data-allocation="fill"] .kui-tab-bar__tabs > .kui-app-tab {
+  min-width: 0;
+  flex: 1 1 0;
+}
+.kui-tab-bar[data-allocation="fill"]
+  .kui-tab-bar__tabs
+  > .kui-app-tab
+  > .kui-app-tab__select {
+  width: 100%;
+  justify-content: center;
+}
 .kui-app-tab__trailing {
   display: grid;
   min-width: 1.275rem;
@@ -122,6 +345,15 @@
 .kui-app-tab__close:hover {
   color: var(--kui-color-text);
 }
+/* A dormant tab keeps its close button's space, so it matches the live tab's
+   geometry, but never shows a control it has disabled. */
+.kui-app-tab:is([data-placeholder="true"], [data-pending="true"])
+  .kui-app-tab__close {
+  visibility: hidden;
+}
+.kui-app-tab[data-pending="true"] .kui-app-tab__name {
+  color: var(--kui-color-text-quiet);
+}
 .kui-app-tab__close-icon {
   display: grid;
   width: 0.6375rem;

package/dist/styles/badge.css

@@ -0,0 +1,118 @@
+.kui-badge {
+  --_kui-badge-fill-quiet: var(--kui-color-neutral-fill-quiet);
+  --_kui-badge-fill-solid: var(--kui-color-neutral-on-normal);
+  --_kui-badge-border: var(--kui-color-neutral-border-normal);
+  --_kui-badge-on-quiet: var(--kui-color-neutral-on-quiet);
+  --_kui-badge-on-solid: var(--kui-color-surface);
+
+  display: inline-flex;
+  min-width: 0;
+  min-height: 1.5rem;
+  padding-inline: var(--kui-layout-item-padding, 0.5rem);
+  box-sizing: border-box;
+  border: 1px solid transparent;
+  border-radius: var(--kui-layout-pill-radius, calc(1px + 1.3125rem));
+  color: var(--_kui-badge-on-quiet);
+  background: var(--_kui-badge-fill-quiet);
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  font-size: var(--kui-font-xs);
+  font-weight: 650;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.kui-badge[data-tone="info"] {
+  --_kui-badge-fill-quiet: var(--kui-color-brand-fill-quiet);
+  --_kui-badge-fill-solid: var(--kui-color-brand-on-fill);
+  --_kui-badge-border: var(--kui-color-brand-border-normal);
+  --_kui-badge-on-quiet: var(--kui-color-brand-on-fill);
+  --_kui-badge-on-solid: var(--kui-color-surface);
+}
+
+.kui-badge[data-tone="pop"] {
+  --_kui-badge-fill-quiet: var(--kui-color-pop-fill-quiet);
+  --_kui-badge-fill-solid: var(--kui-color-pop-on-fill);
+  --_kui-badge-border: var(--kui-color-pop-border-normal);
+  --_kui-badge-on-quiet: var(--kui-color-pop-on-fill);
+  --_kui-badge-on-solid: var(--kui-color-surface);
+}
+
+.kui-badge[data-tone="success"] {
+  --_kui-badge-fill-quiet: var(--kui-color-success-fill-quiet);
+  --_kui-badge-fill-solid: var(--kui-color-success-on-fill);
+  --_kui-badge-border: var(--kui-color-success-border-normal);
+  --_kui-badge-on-quiet: var(--kui-color-success-on-fill);
+  --_kui-badge-on-solid: var(--kui-color-surface);
+}
+
+.kui-badge[data-tone="warning"] {
+  --_kui-badge-fill-quiet: var(--kui-color-warning-fill-quiet);
+  --_kui-badge-fill-solid: var(--kui-color-warning-on-fill);
+  --_kui-badge-border: var(--kui-color-warning-border-normal);
+  --_kui-badge-on-quiet: var(--kui-color-warning-on-fill);
+  --_kui-badge-on-solid: var(--kui-color-surface);
+}
+
+.kui-badge[data-tone="danger"] {
+  --_kui-badge-fill-quiet: var(--kui-color-danger-fill-quiet);
+  --_kui-badge-fill-solid: var(--kui-color-danger-on-fill);
+  --_kui-badge-border: var(--kui-color-danger-border-normal);
+  --_kui-badge-on-quiet: var(--kui-color-danger-on-fill);
+  --_kui-badge-on-solid: var(--kui-color-surface);
+}
+
+.kui-badge[data-appearance="solid"] {
+  color: var(--_kui-badge-on-solid);
+  background: var(--_kui-badge-fill-solid);
+}
+
+.kui-badge[data-appearance="outline"] {
+  border-color: var(--_kui-badge-border);
+  color: var(--_kui-badge-on-quiet);
+  background: transparent;
+}
+
+.kui-badge[data-shape="rounded"] {
+  border-radius: var(--kui-radius-s);
+}
+
+.kui-badge[data-size="compact"] {
+  min-width: 1.25rem;
+  min-height: 1.25rem;
+  padding-inline: 0.35rem;
+  font-size: var(--kui-font-2xs);
+}
+
+/* The text-free status dot (the iOS "new content" dot): a small solid circle
+   in the tone's solid fill, without the text box's padding or minimum size. */
+.kui-badge[data-size="dot"] {
+  width: 0.5rem;
+  min-width: 0.5rem;
+  height: 0.5rem;
+  min-height: 0.5rem;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  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"] {
+  margin-inline-start: 0.25rem;
+}
+
+/* A StateBanner's badge follows its title inline and is taller than the
+   title's line. Negative block margins keep it out of the line-height
+   calculation, so a wrapped title's lines stay evenly spaced whichever line
+   the badge lands on. */
+.kui-state-banner__copy > .kui-badge {
+  margin-block: -0.5em;
+  margin-inline-end: var(--kui-layout-item-gap, 0.5rem);
+  vertical-align: baseline;
+}

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

@@ -0,0 +1,9 @@
+.kui-catalog-example-stack {
+  display: flex;
+  width: 100%;
+  min-width: 0;
+  max-width: 46rem;
+  box-sizing: border-box;
+  flex-direction: column;
+  gap: 1rem;
+}