@kerfjs/ui 5.0.0-beta.60 → 5.0.0-beta.62

package/dist/tab-scaffold.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/tab-scaffold.tsx"],"names":[],"mappings":";;;AAkFO,SAAS,WAAA,CAA+B;AAAA,EAC7C,EAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA;AAAA,EACA,MAAA;AAAA,EACA,cAAA,GAAiB,QAAA;AAAA,EACjB,SAAA,GAAY,EAAA;AAAA,EACZ;AACF,CAAA,EAAyB;AACvB,EAAA,uBACE,IAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,iBAAA,EAAoB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAC5C,EAAA;AAAA,MACA,gBAAA,EAAe,cAAA;AAAA,MACf,sBAAA,EAAsB,EAAA;AAAA,MACtB,sBAAA,EACE,cAAA,KAAmB,QAAA,IAAY,cAAA,KAAmB,SAC9C,cAAA,GACA,MAAA;AAAA,MAEN,IAAA;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,SAAI,KAAA,EAAM,0BAAA,EACR,QAAA,EAAA,IAAA,CAAK,GAAA,CAAI,CAAC,GAAA,qBACT,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,KAAA,EAAM,yBAAA;AAAA,YACN,2BAAyB,GAAA,CAAI,EAAA;AAAA,YAC7B,aAAA,EAAa,MAAA,CAAO,GAAA,CAAI,EAAA,KAAO,MAAM,CAAA;AAAA,YACrC,aAAA,EAAa,MAAA,CAAO,GAAA,CAAI,EAAA,KAAO,MAAM,CAAA;AAAA,YAEpC,QAAA,EAAA,GAAA,CAAI;AAAA;AAAA,SAER,CAAA,EACH,CAAA;AAAA,wBACA,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,uBAAA,EAAwB,IAAA,EAAK,SAAA,EAAU,YAAA,EAAY,KAAA,EAC3D,QAAA,EAAA,IAAA,CAAK,GAAA,CAAI,CAAC,GAAA,KAAQ;AACjB,UAAA,MAAM,GAAA,GAAM,IAAI,KAAA,KAAU,IAAA;AAC1B,UAAA,MAAM,SAAA,GAAY,GAAA,GAAM,MAAA,GAAY,cAAA,CAAe,IAAI,KAAK,CAAA;AAC5D,UAAA,MAAM,QAAA,GAAW,OAAO,SAAA,KAAc,MAAA;AACtC,UAAA,MAAM,QAAQ,QAAA,oBACZ,GAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,KAAA,EAAM,6BAAA;AAAA,cACN,iBAAA,EAAiB,MAAM,KAAA,GAAQ,MAAA;AAAA,cAE9B,QAAA,EAAA,SAAA,KAAc,MAAA,mBACb,GAAA,CAAC,KAAA,EAAA,EAAM,IAAA,EAAK,UAAS,IAAA,EAAK,KAAA,EAAM,UAAA,EAAU,IAAA,EAAC,CAAA,mBAE3C,GAAA;AAAA,gBAAC,KAAA;AAAA,gBAAA;AAAA,kBACC,IAAA,EAAK,QAAA;AAAA,kBACL,UAAA,EAAW,OAAA;AAAA,kBACX,IAAA,EAAK,SAAA;AAAA,kBACL,UAAA,EAAU,IAAA;AAAA,kBAET,QAAA,EAAA;AAAA;AAAA;AACH;AAAA,WAEJ;AAIF,UAAA,MAAM,aAAa,QAAA,GACf,GAAA,CAAI,UAAA,EAAY,IAAA,MAAU,SAAA,GAC1B,MAAA;AACJ,UAAA,uBACE,IAAA;AAAA,YAAC,QAAA;AAAA,YAAA;AAAA,cACC,IAAA,EAAK,QAAA;AAAA,cACL,KAAA,EAAM,uBAAA;AAAA,cACN,IAAA,EAAK,KAAA;AAAA,cACL,yBAAuB,GAAA,CAAI,EAAA;AAAA,cAC3B,eAAA,EAAe,MAAA,CAAO,GAAA,CAAI,EAAA,KAAO,MAAM,CAAA;AAAA,cACvC,QAAA,EAAU,GAAA,CAAI,EAAA,KAAO,MAAA,GAAS,GAAA,GAAM,IAAA;AAAA,cACpC,YAAA,EACE,eAAe,MAAA,GACX,MAAA,GACA,GAAG,GAAA,CAAI,KAAK,KAAK,UAAU,CAAA,CAAA;AAAA,cAEjC,gBAAA,EAAgB,WAAW,MAAA,GAAS,MAAA;AAAA,cAEnC,QAAA,EAAA;AAAA,gBAAA,GAAA,CAAI,uBACH,IAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,4BAAA,EAA6B,eAAY,MAAA,EAClD,QAAA,EAAA;AAAA,kBAAA,GAAA,CAAI,IAAA;AAAA,kBACJ;AAAA,iBAAA,EACH,CAAA,GAEA,KAAA;AAAA,gCAEF,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,6BAAA,EAA+B,cAAI,KAAA,EAAM;AAAA;AAAA;AAAA,WACvD;AAAA,QAEJ,CAAC,CAAA,EACH;AAAA;AAAA;AAAA,GACF;AAEJ;AAEA,SAAS,eACP,KAAA,EACoB;AACpB,EAAA,IAAI,OAAO,KAAA,KAAU,QAAA;AACnB,IAAA,OAAO,OAAO,QAAA,CAAS,KAAK,CAAA,GAAI,MAAA,CAAO,KAAK,CAAA,GAAI,MAAA;AAClD,EAAA,IAAI,OAAO,UAAU,QAAA,IAAY,KAAA,CAAM,MAAK,EAAG,OAAO,MAAM,IAAA,EAAK;AACjE,EAAA,OAAO,MAAA;AACT","file":"tab-scaffold.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport { Badge } from './badge.js';\nimport type { KerfUiContent } from './semantic-content.js';\n\ninterface TabScaffoldTabBase<Id extends string> {\n  id: Id;\n  label: string;\n  /** Decorative icon shown above the label in the bottom bar. */\n  icon?: SafeHtml;\n  /** The tab's content — typically a `NavStack` so each tab keeps its own stack. */\n  content: KerfUiContent;\n}\n\n/** A tab with an optional count or short-status badge. */\ninterface TabScaffoldTabCountBadge {\n  /**\n   * Optional count or short status shown as a solid danger `Badge` at the\n   * top-trailing corner of the tab icon (the iOS tab-bar badge). Omitted, `''`,\n   * or non-finite numbers render no badge. The visual badge is `aria-hidden`;\n   * its meaning reaches assistive technology through `badgeLabel`.\n   *\n   * Pass `true` instead for the text-free dot (new content without a count).\n   */\n  badge?: string | number;\n  /**\n   * Localized phrase folded into the tab's accessible name as\n   * `\"<label>, <badgeLabel>\"` (for example `\"3 unread\"` → `\"Inbox, 3 unread\"`).\n   * Defaults to the badge text itself. Ignored when no badge renders.\n   */\n  badgeLabel?: string;\n}\n\n/** A tab with the text-free dot badge (new content without a count). */\ninterface TabScaffoldTabDotBadge {\n  /**\n   * `true` shows a solid danger dot `Badge` at the top-trailing corner of the\n   * tab icon — the iOS tab-bar dot for new content without a count.\n   */\n  badge: true;\n  /**\n   * Required localized phrase folded into the tab's accessible name as\n   * `\"<label>, <badgeLabel>\"` (for example `\"New activity\"` →\n   * `\"Feed, New activity\"`). A dot has no text, so this is its only meaning.\n   */\n  badgeLabel: string;\n}\n\n/** One bottom-bar destination: its label, optional icon and badge, and content. */\nexport type TabScaffoldTab<Id extends string = string> =\n  TabScaffoldTabBase<Id> & (TabScaffoldTabCountBadge | TabScaffoldTabDotBadge);\n\nexport interface TabScaffoldProps<Id extends string = string> {\n  id: string;\n  /** Accessible name for the tab bar. */\n  label: string;\n  tabs: readonly TabScaffoldTab<Id>[];\n  /** The controlled active tab id (the app owns selection). */\n  active: NoInfer<Id>;\n  /**\n   * The line over the tab bar, where it meets the active scene. `scroll`\n   * (default) shows it only while more of the scene's content lies below —\n   * never at the scroll end or when the content fits — once\n   * `wireScrollDividers` (`@kerfjs/ui/wire-scroll-dividers`) is wired above\n   * the scaffold; unwired, it does not show. `always` shows it without the\n   * wiring; `none` never, even when wired. The line is the bar's own 1px top\n   * border, so no state moves the bar or a tab.\n   */\n  chromeDividers?: 'scroll' | 'always' | 'none';\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/**\n * A mobile-first, iOS-like bottom tab scaffold: a bottom tab bar that switches\n * between major sections, each tab keeping its own content (usually a `NavStack`)\n * mounted so its stack and scroll survive a switch. Controlled — the app owns\n * `active`; wire selection with `@kerfjs/ui/wire-tab-scaffold`'s `wireTabScaffold`.\n * On larger classes, promote the tabs to a `Workbench` rail or sidebar instead of\n * a bottom bar. See `docs/23-app-layouts.md` §3.4.\n */\nexport function TabScaffold<Id extends string>({\n  id,\n  label,\n  tabs,\n  active,\n  chromeDividers = 'scroll',\n  className = '',\n  slot,\n}: TabScaffoldProps<Id>) {\n  return (\n    <section\n      class={`kui-tab-scaffold ${className}`.trim()}\n      id={id}\n      data-component=\"tab-scaffold\"\n      data-tab-scaffold-id={id}\n      data-chrome-dividers={\n        chromeDividers === 'always' || chromeDividers === 'none'\n          ? chromeDividers\n          : undefined\n      }\n      slot={slot}\n    >\n      <div class=\"kui-tab-scaffold__scenes\">\n        {tabs.map((tab) => (\n          <div\n            class=\"kui-tab-scaffold__scene\"\n            data-tab-scaffold-scene={tab.id}\n            data-active={String(tab.id === active)}\n            aria-hidden={String(tab.id !== active)}\n          >\n            {tab.content}\n          </div>\n        ))}\n      </div>\n      <nav class=\"kui-tab-scaffold__bar\" role=\"tablist\" aria-label={label}>\n        {tabs.map((tab) => {\n          const dot = tab.badge === true;\n          const badgeText = dot ? undefined : normalizeBadge(tab.badge);\n          const hasBadge = dot || badgeText !== undefined;\n          const badge = hasBadge && (\n            <span\n              class=\"kui-tab-scaffold__tab-badge\"\n              data-badge-kind={dot ? 'dot' : 'text'}\n            >\n              {badgeText === undefined ? (\n                <Badge tone=\"danger\" size=\"dot\" ariaHidden />\n              ) : (\n                <Badge\n                  tone=\"danger\"\n                  appearance=\"solid\"\n                  size=\"compact\"\n                  ariaHidden\n                >\n                  {badgeText}\n                </Badge>\n              )}\n            </span>\n          );\n          // A dot has no text fallback: without a usable badgeLabel (reachable\n          // only from untyped callers) the tab keeps its plain accessible name.\n          const badgeLabel = hasBadge\n            ? tab.badgeLabel?.trim() || badgeText\n            : undefined;\n          return (\n            <button\n              type=\"button\"\n              class=\"kui-tab-scaffold__tab\"\n              role=\"tab\"\n              data-tab-scaffold-tab={tab.id}\n              aria-selected={String(tab.id === active)}\n              tabindex={tab.id === active ? '0' : '-1'}\n              aria-label={\n                badgeLabel === undefined\n                  ? undefined\n                  : `${tab.label}, ${badgeLabel}`\n              }\n              data-has-badge={hasBadge ? 'true' : undefined}\n            >\n              {tab.icon ? (\n                <span class=\"kui-tab-scaffold__tab-icon\" aria-hidden=\"true\">\n                  {tab.icon}\n                  {badge}\n                </span>\n              ) : (\n                badge\n              )}\n              <span class=\"kui-tab-scaffold__tab-label\">{tab.label}</span>\n            </button>\n          );\n        })}\n      </nav>\n    </section>\n  );\n}\n\nfunction normalizeBadge(\n  badge: string | number | undefined,\n): string | undefined {\n  if (typeof badge === 'number')\n    return Number.isFinite(badge) ? String(badge) : undefined;\n  if (typeof badge === 'string' && badge.trim()) return badge.trim();\n  return undefined;\n}\n"]}
+{"version":3,"sources":["../src/tab-scaffold.tsx"],"names":[],"mappings":";;;AAqFO,SAAS,WAAA,CAA+B;AAAA,EAC7C,EAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA;AAAA,EACA,MAAA;AAAA,EACA,cAAA,GAAiB,QAAA;AAAA,EACjB,SAAA,GAAY,EAAA;AAAA,EACZ;AACF,CAAA,EAAyB;AACvB,EAAA,uBACE,IAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,iBAAA,EAAoB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAC5C,EAAA;AAAA,MACA,gBAAA,EAAe,cAAA;AAAA,MACf,sBAAA,EAAsB,EAAA;AAAA,MACtB,sBAAA,EACE,cAAA,KAAmB,QAAA,IAAY,cAAA,KAAmB,SAC9C,cAAA,GACA,MAAA;AAAA,MAEN,IAAA;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,SAAI,KAAA,EAAM,0BAAA,EACR,QAAA,EAAA,IAAA,CAAK,GAAA,CAAI,CAAC,GAAA,qBACT,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,KAAA,EAAM,yBAAA;AAAA,YACN,2BAAyB,GAAA,CAAI,EAAA;AAAA,YAC7B,aAAA,EAAa,MAAA,CAAO,GAAA,CAAI,EAAA,KAAO,MAAM,CAAA;AAAA,YACrC,iBAAA,EAAiB,GAAA,CAAI,UAAA,KAAe,QAAA,GAAW,QAAA,GAAW,MAAA;AAAA,YAC1D,aAAA,EAAa,MAAA,CAAO,GAAA,CAAI,EAAA,KAAO,MAAM,CAAA;AAAA,YAEpC,QAAA,EAAA,GAAA,CAAI;AAAA;AAAA,SAER,CAAA,EACH,CAAA;AAAA,wBACA,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,uBAAA,EAAwB,IAAA,EAAK,SAAA,EAAU,YAAA,EAAY,KAAA,EAC3D,QAAA,EAAA,IAAA,CAAK,GAAA,CAAI,CAAC,GAAA,KAAQ;AACjB,UAAA,MAAM,GAAA,GAAM,IAAI,KAAA,KAAU,IAAA;AAC1B,UAAA,MAAM,SAAA,GAAY,GAAA,GAAM,MAAA,GAAY,cAAA,CAAe,IAAI,KAAK,CAAA;AAC5D,UAAA,MAAM,QAAA,GAAW,OAAO,SAAA,KAAc,MAAA;AACtC,UAAA,MAAM,QAAQ,QAAA,oBACZ,GAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,KAAA,EAAM,6BAAA;AAAA,cACN,iBAAA,EAAiB,MAAM,KAAA,GAAQ,MAAA;AAAA,cAE9B,QAAA,EAAA,SAAA,KAAc,MAAA,mBACb,GAAA,CAAC,KAAA,EAAA,EAAM,IAAA,EAAK,UAAS,IAAA,EAAK,KAAA,EAAM,UAAA,EAAU,IAAA,EAAC,CAAA,mBAE3C,GAAA;AAAA,gBAAC,KAAA;AAAA,gBAAA;AAAA,kBACC,IAAA,EAAK,QAAA;AAAA,kBACL,UAAA,EAAW,OAAA;AAAA,kBACX,IAAA,EAAK,SAAA;AAAA,kBACL,UAAA,EAAU,IAAA;AAAA,kBAET,QAAA,EAAA;AAAA;AAAA;AACH;AAAA,WAEJ;AAIF,UAAA,MAAM,aAAa,QAAA,GACf,GAAA,CAAI,UAAA,EAAY,IAAA,MAAU,SAAA,GAC1B,MAAA;AACJ,UAAA,uBACE,IAAA;AAAA,YAAC,QAAA;AAAA,YAAA;AAAA,cACC,IAAA,EAAK,QAAA;AAAA,cACL,KAAA,EAAM,uBAAA;AAAA,cACN,IAAA,EAAK,KAAA;AAAA,cACL,yBAAuB,GAAA,CAAI,EAAA;AAAA,cAC3B,eAAA,EAAe,MAAA,CAAO,GAAA,CAAI,EAAA,KAAO,MAAM,CAAA;AAAA,cACvC,QAAA,EAAU,GAAA,CAAI,EAAA,KAAO,MAAA,GAAS,GAAA,GAAM,IAAA;AAAA,cACpC,YAAA,EACE,eAAe,MAAA,GACX,MAAA,GACA,GAAG,GAAA,CAAI,KAAK,KAAK,UAAU,CAAA,CAAA;AAAA,cAEjC,gBAAA,EAAgB,WAAW,MAAA,GAAS,MAAA;AAAA,cAEnC,QAAA,EAAA;AAAA,gBAAA,GAAA,CAAI,uBACH,IAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,4BAAA,EAA6B,eAAY,MAAA,EAClD,QAAA,EAAA;AAAA,kBAAA,GAAA,CAAI,IAAA;AAAA,kBACJ;AAAA,iBAAA,EACH,CAAA,GAEA,KAAA;AAAA,gCAEF,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,6BAAA,EAA+B,cAAI,KAAA,EAAM;AAAA;AAAA;AAAA,WACvD;AAAA,QAEJ,CAAC,CAAA,EACH;AAAA;AAAA;AAAA,GACF;AAEJ;AAEA,SAAS,eACP,KAAA,EACoB;AACpB,EAAA,IAAI,OAAO,KAAA,KAAU,QAAA;AACnB,IAAA,OAAO,OAAO,QAAA,CAAS,KAAK,CAAA,GAAI,MAAA,CAAO,KAAK,CAAA,GAAI,MAAA;AAClD,EAAA,IAAI,OAAO,UAAU,QAAA,IAAY,KAAA,CAAM,MAAK,EAAG,OAAO,MAAM,IAAA,EAAK;AACjE,EAAA,OAAO,MAAA;AACT","file":"tab-scaffold.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport { Badge } from './badge.js';\nimport type { PaneAppearance } from './pane.js';\nimport type { KerfUiContent } from './semantic-content.js';\n\ninterface TabScaffoldTabBase<Id extends string> {\n  id: Id;\n  label: string;\n  /** Decorative icon shown above the label in the bottom bar. */\n  icon?: SafeHtml;\n  /** The tab's content — typically a `NavStack` so each tab keeps its own stack. */\n  content: KerfUiContent;\n  /** Background of this scene's scrolling work surface. */\n  appearance?: PaneAppearance;\n}\n\n/** A tab with an optional count or short-status badge. */\ninterface TabScaffoldTabCountBadge {\n  /**\n   * Optional count or short status shown as a solid danger `Badge` at the\n   * top-trailing corner of the tab icon (the iOS tab-bar badge). Omitted, `''`,\n   * or non-finite numbers render no badge. The visual badge is `aria-hidden`;\n   * its meaning reaches assistive technology through `badgeLabel`.\n   *\n   * Pass `true` instead for the text-free dot (new content without a count).\n   */\n  badge?: string | number;\n  /**\n   * Localized phrase folded into the tab's accessible name as\n   * `\"<label>, <badgeLabel>\"` (for example `\"3 unread\"` → `\"Inbox, 3 unread\"`).\n   * Defaults to the badge text itself. Ignored when no badge renders.\n   */\n  badgeLabel?: string;\n}\n\n/** A tab with the text-free dot badge (new content without a count). */\ninterface TabScaffoldTabDotBadge {\n  /**\n   * `true` shows a solid danger dot `Badge` at the top-trailing corner of the\n   * tab icon — the iOS tab-bar dot for new content without a count.\n   */\n  badge: true;\n  /**\n   * Required localized phrase folded into the tab's accessible name as\n   * `\"<label>, <badgeLabel>\"` (for example `\"New activity\"` →\n   * `\"Feed, New activity\"`). A dot has no text, so this is its only meaning.\n   */\n  badgeLabel: string;\n}\n\n/** One bottom-bar destination: its label, optional icon and badge, and content. */\nexport type TabScaffoldTab<Id extends string = string> =\n  TabScaffoldTabBase<Id> & (TabScaffoldTabCountBadge | TabScaffoldTabDotBadge);\n\nexport interface TabScaffoldProps<Id extends string = string> {\n  id: string;\n  /** Accessible name for the tab bar. */\n  label: string;\n  tabs: readonly TabScaffoldTab<Id>[];\n  /** The controlled active tab id (the app owns selection). */\n  active: NoInfer<Id>;\n  /**\n   * The line over the tab bar, where it meets the active scene. `scroll`\n   * (default) shows it only while more of the scene's content lies below —\n   * never at the scroll end or when the content fits — once\n   * `wireScrollDividers` (`@kerfjs/ui/wire-scroll-dividers`) is wired above\n   * the scaffold; unwired, it does not show. `always` shows it without the\n   * wiring; `none` never, even when wired. The line is the bar's own 1px top\n   * border, so no state moves the bar or a tab.\n   */\n  chromeDividers?: 'scroll' | 'always' | 'none';\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/**\n * A mobile-first, iOS-like bottom tab scaffold: a bottom tab bar that switches\n * between major sections, each tab keeping its own content (usually a `NavStack`)\n * mounted so its stack and scroll survive a switch. Controlled — the app owns\n * `active`; wire selection with `@kerfjs/ui/wire-tab-scaffold`'s `wireTabScaffold`.\n * On larger classes, promote the tabs to a `Workbench` rail or sidebar instead of\n * a bottom bar. See `docs/23-app-layouts.md` §3.4.\n */\nexport function TabScaffold<Id extends string>({\n  id,\n  label,\n  tabs,\n  active,\n  chromeDividers = 'scroll',\n  className = '',\n  slot,\n}: TabScaffoldProps<Id>) {\n  return (\n    <section\n      class={`kui-tab-scaffold ${className}`.trim()}\n      id={id}\n      data-component=\"tab-scaffold\"\n      data-tab-scaffold-id={id}\n      data-chrome-dividers={\n        chromeDividers === 'always' || chromeDividers === 'none'\n          ? chromeDividers\n          : undefined\n      }\n      slot={slot}\n    >\n      <div class=\"kui-tab-scaffold__scenes\">\n        {tabs.map((tab) => (\n          <div\n            class=\"kui-tab-scaffold__scene\"\n            data-tab-scaffold-scene={tab.id}\n            data-active={String(tab.id === active)}\n            data-appearance={tab.appearance === 'sunken' ? 'sunken' : undefined}\n            aria-hidden={String(tab.id !== active)}\n          >\n            {tab.content}\n          </div>\n        ))}\n      </div>\n      <nav class=\"kui-tab-scaffold__bar\" role=\"tablist\" aria-label={label}>\n        {tabs.map((tab) => {\n          const dot = tab.badge === true;\n          const badgeText = dot ? undefined : normalizeBadge(tab.badge);\n          const hasBadge = dot || badgeText !== undefined;\n          const badge = hasBadge && (\n            <span\n              class=\"kui-tab-scaffold__tab-badge\"\n              data-badge-kind={dot ? 'dot' : 'text'}\n            >\n              {badgeText === undefined ? (\n                <Badge tone=\"danger\" size=\"dot\" ariaHidden />\n              ) : (\n                <Badge\n                  tone=\"danger\"\n                  appearance=\"solid\"\n                  size=\"compact\"\n                  ariaHidden\n                >\n                  {badgeText}\n                </Badge>\n              )}\n            </span>\n          );\n          // A dot has no text fallback: without a usable badgeLabel (reachable\n          // only from untyped callers) the tab keeps its plain accessible name.\n          const badgeLabel = hasBadge\n            ? tab.badgeLabel?.trim() || badgeText\n            : undefined;\n          return (\n            <button\n              type=\"button\"\n              class=\"kui-tab-scaffold__tab\"\n              role=\"tab\"\n              data-tab-scaffold-tab={tab.id}\n              aria-selected={String(tab.id === active)}\n              tabindex={tab.id === active ? '0' : '-1'}\n              aria-label={\n                badgeLabel === undefined\n                  ? undefined\n                  : `${tab.label}, ${badgeLabel}`\n              }\n              data-has-badge={hasBadge ? 'true' : undefined}\n            >\n              {tab.icon ? (\n                <span class=\"kui-tab-scaffold__tab-icon\" aria-hidden=\"true\">\n                  {tab.icon}\n                  {badge}\n                </span>\n              ) : (\n                badge\n              )}\n              <span class=\"kui-tab-scaffold__tab-label\">{tab.label}</span>\n            </button>\n          );\n        })}\n      </nav>\n    </section>\n  );\n}\n\nfunction normalizeBadge(\n  badge: string | number | undefined,\n): string | undefined {\n  if (typeof badge === 'number')\n    return Number.isFinite(badge) ? String(badge) : undefined;\n  if (typeof badge === 'string' && badge.trim()) return badge.trim();\n  return undefined;\n}\n"]}

package/dist/{token-search-field-CCke1yvQ.d.ts → token-search-field-DvgFLhLL.d.ts}

@@ -8,8 +8,8 @@ interface TokenSearchRule {
     parse?: (input: string) => string | undefined;
     /** Label for a committed chip. Defaults to `name:input`. */
     label?: (value: string, input: string) => string;
-    /** Suggestions for the unfinished value after `name:`. */
-    suggest?: (input: string) => readonly (string | {
+    /** Suggestions for the unfinished value after `name:`, with current committed tokens. */
+    suggest?: (input: string, state: TokenSearchState) => readonly (string | {
         value: string;
         label: string;
     })[];
@@ -33,8 +33,12 @@ interface TokenSearchModel<Result = unknown> {
     suggestions: Signal<readonly TokenSearchSuggestion[]>;
     result: Signal<Result | undefined>;
     edit(value: TokenSearchFieldValue, commit?: boolean): void;
+    /** Replace app-owned search state and rebuild the DOM-owned editor text. */
+    replace(value: TokenSearchFieldValue): void;
     submit(value: TokenSearchFieldValue): void;
     choose(value: string): void;
+    /** Commit a value for the active `name:` prefix, even when it is not suggested. */
+    commit(value: string): void;
     expandToken(value: string): void;
     remove(value: string): void;
     clear(): void;

package/dist/token-search-field.d.ts

@@ -1,3 +1,3 @@
 import 'kerfjs';
 import './semantic-content-BbzjvSu9.js';
-export { T as TokenSearchEditorAttributes, a as TokenSearchField, b as TokenSearchFieldProps, c as TokenSearchFieldValue, j as TokenSearchToken, p as placeTokenSearchCaret, r as readTokenSearchField } from './token-search-field-CCke1yvQ.js';
+export { T as TokenSearchEditorAttributes, a as TokenSearchField, b as TokenSearchFieldProps, c as TokenSearchFieldValue, j as TokenSearchToken, p as placeTokenSearchCaret, r as readTokenSearchField } from './token-search-field-DvgFLhLL.js';

package/dist/token-search-model.d.ts

@@ -1,3 +1,3 @@
 import 'kerfjs';
-export { d as TokenSearchModel, e as TokenSearchModelOptions, f as TokenSearchResolvedToken, g as TokenSearchRule, h as TokenSearchState, i as TokenSearchSuggestion, k as createTokenSearchModel } from './token-search-field-CCke1yvQ.js';
+export { d as TokenSearchModel, e as TokenSearchModelOptions, f as TokenSearchResolvedToken, g as TokenSearchRule, h as TokenSearchState, i as TokenSearchSuggestion, k as createTokenSearchModel } from './token-search-field-DvgFLhLL.js';
 import './semantic-content-BbzjvSu9.js';

package/dist/token-search-model.js

@@ -1,3 +1,3 @@
-export { createTokenSearchModel } from './chunk-F7F7KRO2.js';
+export { createTokenSearchModel } from './chunk-4SQK27MR.js';
 
 //# sourceMappingURL=token-search-model.js.map

package/dist/toolbar-text.d.ts

@@ -1,6 +1,6 @@
 import * as kerfjs from 'kerfjs';
 
-type ToolbarTextSize = 'xlarge' | 'large' | 'default' | 'small' | 'xsmall';
+type ToolbarTextSize = 'xlarge' | 'xlarge-fixed' | 'large' | 'default' | 'small' | 'xsmall';
 /** ARIA heading level for a title exposed as a heading landmark. */
 type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
 interface ToolbarTextBaseProps {

package/dist/toolbar-text.js

@@ -1,4 +1,4 @@
-export { ToolbarText } from './chunk-3SXMEK3B.js';
+export { ToolbarText } from './chunk-V3DX3K65.js';
 
 
 

package/dist/toolbar.d.ts

@@ -17,8 +17,8 @@ interface ToolbarProps {
      * then draws its facing side the same way.
      */
     dividerSides?: Sides;
-    /** Horizontal treatment of the center zone. Defaults to centered content. */
-    centerAlign?: 'center' | 'stretch';
+    /** `balanced` gives both side zones equal tracks, centering the middle zone on the toolbar even if only one side has controls. */
+    centerAlign?: 'center' | 'stretch' | 'balanced';
     /**
      * Component-owned responsive layout; applications choose the policy rather
      * than restyling toolbar internals. Under every policy the trailing zone

package/dist/toolbar.js

@@ -1,3 +1,3 @@
-export { Toolbar } from './chunk-MERWRTBG.js';
+export { Toolbar } from './chunk-N2DRU35S.js';
 
 //# sourceMappingURL=toolbar.js.map

package/dist/wire-catalog.js

@@ -1,6 +1,6 @@
 import { wireWorkbench } from './chunk-NNMLEDMD.js';
-import { wireScrollDividers } from './chunk-JCV4GXWB.js';
 
+import { wireScrollDividers } from './chunk-JCV4GXWB.js';
 
 
 import { delegate } from 'kerfjs';

package/dist/wire-tab-bars.js

@@ -1,3 +1,3 @@
-export { reorderTabs, wireTabBars } from './chunk-46263QLK.js';
+export { reorderTabs, wireTabBars } from './chunk-UA6JW52D.js';
 
 //# sourceMappingURL=wire-tab-bars.js.map

package/dist/wire-token-search-fields.d.ts

@@ -1,5 +1,5 @@
 import { Signal } from 'kerfjs';
-import { d as TokenSearchModel } from './token-search-field-CCke1yvQ.js';
+import { d as TokenSearchModel } from './token-search-field-DvgFLhLL.js';
 import './semantic-content-BbzjvSu9.js';
 
 interface TokenSearchSubmit {

package/dist/workbench.js

@@ -1,4 +1,4 @@
-export { Workbench } from './chunk-2OXQHM7I.js';
+export { Workbench } from './chunk-X6ADHJNI.js';
 
 
 

package/docs/accessibility.md

@@ -7,6 +7,7 @@ These are normative contracts for package components and consuming applications.
 - All controls have accessible names and visible `:focus-visible` treatment.
 - Decorative `LucideIcon` output is `aria-hidden`; pass `label` only when the SVG itself conveys meaning.
 - `ListItem` uses native button Enter/Space behavior. `selected` maps to `aria-current="page"`; `pressed` maps to `aria-pressed`. Selected rows keep the normal foreground over their brand-tinted fill so text retains WCAG AA contrast in light and dark themes. Its leading icon visual is 18px while the row retains its 44px minimum target; multiline icons align to the first text line. Its `trailing` content is dormant and must not contain controls. Its `rootAttributes` slot accepts only application `data-*` metadata and deliberately cannot emit `role="menuitem"` in isolation—a true ARIA menu must own arrow, Home/End, Escape, and focus behavior as one widget.
+- `ListItemLink` shares that row content and geometry but uses native anchor Enter behavior and requires `href`. It has no `action` or `pressed` state. `external` opens a new tab with `rel="noopener noreferrer"`; the default accessible name announces the new tab for a string label, so an explicit `accessibleLabel` should do the same. Disabled and loading links omit `href`, expose `aria-disabled`, and leave the tab order. Its trailing content remains dormant.
 - `ListHeader` owns action naming, disabled state, and disclosure `aria-expanded`. Toggle mode supplies one decorative 18px `DisclosureArrow` when `actionIcon` is omitted; it mirrors `expanded` while the native button's accessible name stays stable. The application must update that controlled state and reveal or hide real content. A valid `count` is visually rendered in an `aria-hidden` neutral pill while the required localized `countLabel` becomes part of the owning heading or disclosure button's accessible name; zero remains a real count. Its narrow `triggerAttributes` slot may describe a native popover or controlled-content relationship with `popoverTarget`, `popoverTargetAction`, `aria-controls`, and `aria-haspopup`; the application owns the target surface and its focus/dismissal behavior.
 - Dispose `wireTabBars` and `wireTokenSearchFields` with their owning view. Disposal cancels queued controlled-render focus restoration, so a torn-down view cannot reclaim focus from its successor.
 - `wireNavStack` moves focus into every newly active top view and remembers the last focused descendant of each mounted view for pop restoration. Mark a preferred initial heading or control with `data-nav-focus` (and `tabindex="-1"` when it is not normally tabbable); otherwise the helper uses the first enabled focusable descendant, then a programmatically focusable view-container fallback.
@@ -14,6 +15,7 @@ These are normative contracts for package components and consuming applications.
 - `LoadingSpinner` is either labeled (`role="img"`) or hidden. Its rotation stops for reduced motion.
 - An unlabeled `Skeleton` (including the value slots a component's `placeholder` prop renders) is decorative loading chrome: it is `aria-hidden`, conveys no information a user needs to act on, and is deliberately exempt from the WCAG 3:1 non-text-contrast target. Inside a solid `Badge` it stays subtle (about 2.1–4.4:1 in light, 2.4–2.8:1 in dark, depending on tone); `tests/browser/tone-contrast.spec.ts` holds those values as a regression floor rather than an accessibility threshold. Announce loading through a labeled `Skeleton`, `LoadingSpinner`, or `aria-busy` on the owning region, never through the skeleton's visibility.
 - `StateBanner` defaults to polite `role="status"`; use `urgency="alert"` only for an attention-requiring failure. Its optional `badge` is persistent inline status/count content beside the title and is announced as part of the banner; keep it terse and do not rely on color alone for its meaning.
+- A removable `Chip` has a native button with a specific `removeLabel`, such as "Remove Urgent tag". The button is absent for a plain chip and disabled for a disabled chip. Tag text remains visible because tone does not convey meaning alone.
 - `EmptyState` reports busy state through `aria-busy` and never relies on an illustration as its label.
 - `Select` follows the Web Awesome host's standard `input`/`change` events. Application tests verify the live `value`, focus, and events—not attributes alone. Its decorative option icons and value-dependent selected content remain present after controlled rerenders, so the visible choice does not silently lose its non-text cue.
 - `DisclosureArrow` is an 18px root-scaled decorative visual by default, not an interaction target. Its owning native control supplies a stable accessible name, pointer and keyboard interaction, and `aria-expanded`; multiple arrows keep independently controlled state. Consumers may resize it with the typed `size` prop without changing that ownership. Configured directions animate over the shortest path; a 180-degree closed-to-open tie uses counterclockwise rotation.
@@ -38,6 +40,12 @@ chosen option shows its check, and the closed control reads the chosen labels
 in choice order as one short localized list (the `placeholderText` when none
 are chosen) instead of a removable tag per choice. `change` and `input` report
 the value array; in a form, every chosen value is submitted under `name`.
+Disabled choices remain visible with `aria-disabled` and cannot be selected;
+`disabledReason` adds a native tooltip. For a multiple Select, opt-in
+`selectAllLabel` and `clearLabel` render named footer buttons. They keep the
+popup open, select only enabled choices or clear the selection, and emit the
+ordinary `input` and `change` events only when the value changes. Their labels
+come from the application so they can be localized.
 
 A toolbar filter menu (a "Filter by label" funnel) is a multiple Select with
 `selectedPresentation="icon-only"` and a fixed `triggerIcon`; the types accept
@@ -196,7 +204,8 @@ with the Select's current-option fill rather than a second focus ring inside the
 open popup. A disabled item stays in the menu but cannot be
 chosen; disable the whole trigger only when every command is unavailable.
 Nested items use Web Awesome's submenu pointer and Left/Right arrow routing;
-checked items expose checkbox menu semantics. `details` supplies optional
+headings and dividers can separate nested groups without becoming keyboard
+choices. Checked items expose checkbox menu semantics. `details` supplies optional
 trailing visual content without changing a command's accessible label. A
 `context` menu's invisible anchor is outside the accessibility tree and normal
 Tab order; opening the menu moves focus into its commands and Escape dismisses
@@ -317,7 +326,11 @@ trailing, and end actions remain visible and do not shrink. The component owns
 that geometry; applications must not override its anatomy to create the split.
 `AppTab` provides compact 32px, segmented, truncating-label, and icon-only
 presentations. Icon-only tabs keep the required `name` as the tab button's
-accessible name while visually hiding the duplicate label. A `pending` tab (known,
+accessible name while visually hiding the duplicate label. The default name
+overflow is an ellipsis; `nameOverflow="visible"` lets an inline loading
+treatment show the whole name, without changing the accessible name. The app
+sets `dropTarget` during a content drag-over to paint a brand highlight;
+selection and tab focus stay independent of that visual state. A `pending` tab (known,
 still opening) keeps its visible name as the tab button's accessible name, so a
 trailing spinner's own label is not folded into it. It is `aria-busy` and stays
 selectable (in the roving tab order like a live tab), so the application can
@@ -330,6 +343,12 @@ filtering rejects roles plus case variants of component- or wiring-owned
 action, identity, selection, drag, drop, and component attributes. An optional
 `closeIcon` is decorative dormant content inside the already named close button
 and must not contain interactive descendants.
+The first `AppTab` can set `pinned` to stay at the inline start while its peers
+scroll. It remains a normal tab within the same tablist and roving-focus order;
+focus and controlled selection reveal peers beyond the pinned tab. Pin only the
+leading tab of a strip.
+WebKit currently moves a pinned tab outside an RTL strip as it scrolls;
+`KF-MYFQAS` tracks the browser correction.
 `wireTabBars()` adds Left/Right wrapping, Home/End, Delete/Backspace close
 activation, same-bar pointer reordering, `Alt+Shift+ArrowLeft/ArrowRight`
 reordering, focus restoration, scroll-into-view, and pointer-proximity
@@ -363,7 +382,8 @@ stays in sequential Tab order, matching Hot Sheet 2's compact view and inspector
 controls; Enter and Space use native button activation. The application handles
 the supplied `data-action`, reads `data-segment-value`, updates `value`, and
 re-renders. Keep labels unique and meaningful even when `content` shows only an
-icon. Use tabs—not a segmented control—when choices switch page regions that
+icon. The filled track uses the normal neutral text role for readable unselected
+labels in light and dark themes. Use tabs—not a segmented control—when choices switch page regions that
 need `tab`/`tabpanel` semantics.
 
 ## TokenSearchField
@@ -390,6 +410,12 @@ trailing controls share the first text line's fixed vertical center and remain
 there as the editor wraps. In `collapsible` mode, the closed state is one named
 iconic search button and the open state is the same named searchbox, whether
 the field stands alone or is composed inside `ToolbarControlGroup`.
+
+For an app-driven query replacement with an unmanaged field, change its
+`revision` along with `query` so the editor text rebuilds. For a model-managed
+field, call `model.replace({ query, tokens })`: it parses the supplied state and
+advances `editorRevision` even when the tokens did not change.
+
 Applications set `expanded` while the field is focused, move focus from the
 trigger into the revealed editor, and clear `expanded` only after focus leaves
 the complete component. Text or tokens keep the field expanded even when that

package/docs/collapsible-panel.md

@@ -80,9 +80,10 @@ and that of the components it renders (`Pane`, `Toolbar`, `ToolbarControlGroup`,
   corners, with typed `restoreInset` for the corner distance. Set
   `restorePlacement="inline"` when the container should place the control in
   normal flow. An inline region's surface uses
-  `--kui-resizable-region-background`; set `contentOverflow="visible"` while
-  an anchored popup must escape the region's content box, then return to the
-  normal overflow policy when it closes.
+  `--kui-resizable-region-background`; an open descendant `PopupMenu` or Web
+  Awesome dropdown releases clipping and raises the popup layer for its
+  lifecycle. Set `contentOverflow="visible"` for other anchored content that
+  must escape the region's content box.
   Overlay presentation also clamps fixed-size animated content to the configured
   responsive overlay maximum, so a remembered desktop size cannot escape a narrow
   viewport.

package/docs/component-contract.md

@@ -52,6 +52,11 @@ CSS boundaries, diagnostics, and provenance. A wrapper entry may add
 composition checks treat its elements as each root rather than as an unknown
 child. A placement with listed parent constraints produces one `KUI-L201`
 diagnostic even when both the wrapper and a rendered root reject that parent.
+When one catalog entry exports another JSX component with different placement,
+`jsxExports` gives that export its own parent contract. The extra export does
+not stand for the entry's root when a parent zone is checked.
+Generated `boundaries.rootClass` prefers the public `kui-<entry-id>` class when
+present, so a sibling export's class cannot become the entry's root class.
 
 `boundaries.placeableClasses` names the subset of `publicClasses` an
 application may write onto its own elements (layout utilities, the document

package/docs/component-selection.md

@@ -72,6 +72,8 @@ import { Row } from "@kerfjs/ui/row";
 ```
 
 `CssValue` is the common branded base, not an arbitrary-string constructor.
+For a responsive equal-width form, pass `Grid minColumnWidth={px(376)}` instead
+of `columns`; the Grid's container width decides when the tracks collapse.
 Raw strings such as `"0.25rem"` do not satisfy `Row.gap`, `Grid.gap`, or `List.gap`; this
 contract lands before the 5.0 stable release so misspelled tokens and incomplete
 expressions fail during typechecking rather than in the browser.
@@ -141,7 +143,7 @@ an upstream component or recipe request.
 | Toolbar identity text — `ToolbarText`                                                                                   | A toolbar needs extra-large (page/panel title), large, default, or compact textual identity.                                                                                                                                                                                                                                                             | Plain text is not a heading by default; when a title needs heading semantics pass `headingLevel`. Sizes below `xlarge` are intentionally quiet identity text with no tone option — do not use them as a normal-color subsection title; use `Text` with an `h2`–`h6` variant, or `ListHeader` for a list section.                           | Optional `headingLevel` for `role="heading"` + `aria-level`. Defaults to one line, ellipsized when it does not fit; `wrap` flows onto multiple lines, `ellipsis` toggles the trailing …, and `maxLines` caps a wrap.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | Text, heading level, overflow behavior, and responsive priority.                                                                                         | `@kerfjs/ui/toolbar-text`                                                                 | [Toolbar composition](../README.md#component-subpaths)                              |
 | Semantic block or inline text — `Text`                                                                                  | Ordinary application copy needs native `h1`–`h6` or `p` semantics plus standard geometry, or inline secondary copy needs a native `span` without box geometry.                                                                                                                                                                                           | Do not choose heading levels for appearance alone or recreate muted, error, small, or code utility classes. Use `ToolbarText` for toolbar identity/title content and `ListInsetText` when list-aligned prose needs full margin/border/padding geometry.                                                                                    | Omit `variant` for the default `p`, choose `h1`–`h6` from the document outline, or choose `span` inside a row, label, or table cell. Independently compose `tone="quiet                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | danger"`, `size="compact"`, and `font="monospace"`; ordinary native global, `data-_`, and `aria-_` attributes pass through.                              | Copy, localization, semantic variant, presentation roles, and document heading hierarchy. | `@kerfjs/ui/text`                                                                   | [Text](./layout.md#text) |
 | Vertical stack — `List`                                                                                                 | Rows, sections, or arbitrary components need a consistent vertical stretch layout, optional standard/custom gap, flex growth, one vertical scroll owner, or edge dividers.                                                                                                                                                                               | It is layout-only and does not provide `ul`/`ol` semantics. Do not nest scroll owners or use it when a horizontal layout is required.                                                                                                                                                                                                      | Choose `gap`, `flex`, `scrollable`, and canonical `dividerSides` (`t`, `r`, `b`, `l` combinations in that order); bound the block size when scrolling.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | Child semantics/content, containing height, and which optional layout behaviors apply.                                                                   | `@kerfjs/ui/list`                                                                         | [Pane geometry](../README.md#pane-and-content-geometry)                             |
-| Equal-width columns — `Grid`                                                                                            | A fixed positive number of sibling columns must divide the available width evenly, including when child content has different intrinsic widths.                                                                                                                                                                                                          | Do not use it for intrinsic, asymmetric, spanning, auto-fit, or masonry tracks; use application-owned CSS grid. Do not use it for a user-operable separator; use `ResizableRegion`.                                                                                                                                                        | Choose `columns`, a typed `gap`, and optional typed `flex`; preserve source order when the app changes the count responsively.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | Child semantics/content, the column count and responsive policy, and typed gap/flex choices.                                                             | `@kerfjs/ui/grid`                                                                         | [Grid](./layout.md#grid)                                                            |
+| Equal-width columns — `Grid`                                                                                            | Equal-width sibling columns need a fixed count or should collapse as their container narrows, while preserving equal tracks despite intrinsic child widths.                                                                                                                                                                                              | Do not use it for intrinsic, asymmetric, spanning, or masonry tracks; use application-owned CSS grid. Do not use it for a user-operable separator; use `ResizableRegion`.                                                                                                                                                                  | Choose fixed `columns` or typed `minColumnWidth`, plus a typed `gap` and optional `flex`; responsive tracks preserve source order.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | Child semantics/content, outer width, fixed count or minimum width, and typed gap/flex choices.                                                          | `@kerfjs/ui/grid`                                                                         | [Grid](./layout.md#grid)                                                            |
 | Navigation row — `ListItem`                                                                                             | A pane or navigation area needs a selectable, disabled, dormant-trailing, or multiline action row.                                                                                                                                                                                                                                                       | Do not put a control in `trailing`; use `ListActionRow` when the trailing region must be independently interactive. Use an `<a>` for navigation that must retain link behavior, a native `<button>` for an ordinary action, or implement the complete ARIA menu widget.                                                                    | Delegate its `data-action`; compose inside a `.kui-content` section. Put domain event/drop metadata in `rootAttributes` rather than adding wrapper markup. The rounded root clips overflowing descendants; set `multiline` when the primary label should wrap.                                                                                                                                                                                                                                                                                                                                                                                                                                                         | Routing, selection, permissions, copy, action handling, and domain `data-*` values.                                                                      | `@kerfjs/ui/list-item`                                                                    | [Pane geometry](../README.md#pane-and-content-geometry)                             |
 | Navigation row with trailing action — `ListActionRow`                                                                   | A full-width row needs a selectable primary action and an independently focusable trailing action.                                                                                                                                                                                                                                                       | Use `ListItem` when trailing content is dormant metadata. Do not put controls inside the row's `label`, `icon`, or `trailingActionIcon` SafeHtml slots. Do not use `AppTab` outside tablist semantics or `ToolbarControlGroup` outside a toolbar.                                                                                          | Delegate both action strings; update controlled selection and any popover/context-menu state in the app.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | Routing, selection, both action policies, domain metadata, and popover/context-menu behavior.                                                            | `@kerfjs/ui/list-action-row`                                                              | [Accessibility](./accessibility.md#listactionrow)                                   |
 | Navigation section heading — `ListHeader`                                                                               | A menu section needs a full-width label, semantic count, non-count badge, logical-end action, or real disclosure state.                                                                                                                                                                                                                                  | Do not concatenate counts into `label` or put numeric content in `badge`; use `count` with the localized full phrase in `countLabel`. Do not add a disclosure arrow to navigation that reveals nothing. Keep its 44px hit target; do not resize its 36px square. Do not use it as a page, panel, or dialog title; use a heading `Toolbar`. | Delegate its optional action; the app controls expanded state and revealed content. Toggle mode supplies `DisclosureArrow` unless `actionIcon` replaces it. Use `triggerAttributes` only for domain `data-*` or a native popover relationship.                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | Section organization, valid count and localized count label, disclosure state and content, non-count badge content, popover target behavior, and policy. | `@kerfjs/ui/list-header`                                                                  | [Pane geometry](../README.md#pane-and-content-geometry)                             |
@@ -174,10 +176,16 @@ an upstream component or recipe request.
 
 ## Ambiguous choices
 
+For a lowered background behind an entire scrolling work area, choose
+`Pane appearance="sunken"` or the appearance option on the layout that owns
+the scroll viewport. Use `SunkenPanel` for a padded content group that does
+not introduce scrolling. See [Lowered work surfaces](./layout.md#lowered-work-surfaces).
+
 Set `ResizableRegion`'s `--kui-resizable-region-background` for an inline
-surface. Use `contentOverflow="visible"` while an anchored popup must escape
-the region; this also raises the region on its public popup layer. A collapsed
-region can place `restoreControl` in a top or bottom corner with
+surface. An open descendant `PopupMenu` or Web Awesome dropdown automatically
+releases clipping and raises the region on its public popup layer. Set
+`contentOverflow="visible"` for other anchored content that must escape the
+region. A collapsed region can place `restoreControl` in a top or bottom corner with
 `restorePosition`, set its typed `restoreInset`, or use
 `restorePlacement="inline"` for a control in normal flow.
 
@@ -194,21 +202,41 @@ whole label. `divider` owns a before or after separator. Set
 `--kui-list-item-*` tokens control its row, icon, label, and trailing geometry
 and color. `ListHeader` exposes `--kui-list-header-min-height`, title padding,
 title minimum height, and border-width tokens for section density.
+For a filled command list, set `--kui-list-item-background` and
+`--kui-list-item-border` on the list or row. The matching
+`--kui-list-item-hover-border` and `--kui-list-item-selected-border` tokens
+set state outlines without replacing ListItem CSS or neutralizing global
+semantic border colors.
+
+Use `ListItemLink` from `@kerfjs/ui/list-item` for a navigation row with a
+real `href`. It shares `ListItem` content slots, density, selection, and row
+geometry while rendering a native anchor. `external` opens a new tab with
+`noopener noreferrer` and announces that behavior in the default accessible
+name. Disabled and loading links omit `href` and leave the tab order. Use
+`ListItem` for an application action dispatched through `action`.
 
 Use `Toolbar responsive="trailing-priority"` for a collapsible search in the
 trailing zone that should take a full second row when expanded. `responsiveAt`
 chooses the compact or narrow container breakpoint. The leading identity stays
-in the first row. `--kui-toolbar-leading-min-width`,
+in the first row. Set `centerAlign="balanced"` when the center zone must sit on
+the toolbar's midpoint despite unequal or empty side content; it gives the
+leading and trailing zones equal tracks. `--kui-toolbar-leading-min-width`,
 `--kui-toolbar-trailing-gap`, `--kui-toolbar-trailing-justify`, and the
 `--kui-toolbar-*-padding-inline` zone tokens adjust local geometry without
 selecting toolbar anatomy from application CSS.
+Set `--kui-toolbar-inset: 0px` on an embedded Toolbar that should have no outer
+padding while keeping its `--kui-toolbar-gap` between control zones. The token
+also reduces its minimum height by the removed inset; safe-area compensation
+still adds to the chosen inset on claimed edges.
 
 For compact dialog copy, use `Text flush lineHeight="tight"`; block Text still
 resets native margins. `ValueTable density="compact"` reduces row padding and
 gap. Its `--kui-value-table-row-columns`, `--kui-value-table-row-padding-block`,
 and `--kui-value-table-row-gap` tokens support a specific metadata layout.
-Use `ToolbarText size="xsmall"` for a dense rail heading. A
-`TokenSearchField` editor can shrink to zero minimum width inside a narrow
+Use `ToolbarText size="xsmall"` for a dense rail heading. Use
+`size="xlarge-fixed"` for a toolbar heading at the fixed 20px step; `xlarge`
+retains the responsive page-title clamp. Pass `headingLevel` when the text is
+a section landmark. A `TokenSearchField` editor can shrink to zero minimum width inside a narrow
 group; set `--kui-token-search-editor-min-width` only when a wider editor is
 required.
 
@@ -216,11 +244,25 @@ required.
 - `TabBar` changes tabpanels and supports overflow/reorder; `SegmentedControl` chooses among a few compact views; `Select` handles a longer value list.
 
 Use `AppTab presentation="icon-only"` with its `name` kept as the accessible
-tab name, and `labelMaxWidth` for an ellipsized visible name. Set `attention`
-to color a tab's name with `--kui-app-tab-attention-color`. A `TabBar` owns its
+tab name. For segmented tabs that should show names in a wide reader and icons
+in a narrower container, set `TabBar iconOnlyAt="wide"` (832px), `"narrow"`
+(704px), or `"compact"` (448px), and give each segmented `AppTab` a leading
+icon. The tablist's own width controls the switch; the visually hidden name
+remains its accessible name. Use `labelMaxWidth` for an ellipsized visible name. Set `attention`
+to color a tab's name with `--kui-app-tab-attention-color`. Set `dropTarget`
+while an app drag is over a tab's content; the tab keeps its selection semantics
+and uses the `--kui-app-tab-drop-target-*` tokens for its highlight. Set
+`nameOverflow="visible"` when an inline loading treatment needs the full name
+instead of the default ellipsis. A `TabBar` owns its
 scrolling strip; its public `--kui-tab-bar-strip-*` tokens configure strip
 height, spacing, border, radius, background, and scroll inset without styling
 its internal classes. `--kui-tab-bar-trailing-flex` controls the trailing zone.
+Set `pinned` on the first `AppTab` when that tab must remain visible as peers
+scroll. It stays inside the tablist and keyboard order. Set the public
+`--kui-app-tab-pinned-background` token if the surrounding surface differs from
+the default; the pinned tab must cover peers as they scroll beneath it. Call
+`wireTabBars` for keyboard selection and reorder behavior and its WebKit RTL
+scroll correction.
 
 - `StateBanner` persists beside affected work; `EmptyState` replaces absent content; `wa-callout` is contextual ecosystem content; `wa-toast` and `wa-toast-item` are transient and must not carry the only copy of important state.
 
@@ -232,11 +274,21 @@ stacked copy's spacing at an instance boundary.
 
 For a compact `Select`, set `triggerWidth` to `"fit-content"`, `"max-content"`,
 or `"fill"` and cap it with `--kui-select-trigger-max-width` when needed.
+For a round icon-only toolbar trigger, set `selectedPresentation="icon-only"`
+and `caret={false}`. The control keeps its accessible name, current choice help
+tag, and keyboard-operated listbox; the default keeps the visible caret.
 Custom `renderSelected` text inherits the control color by default; the
 `--kui-select-selected-color`, `--kui-select-selected-font-size`, and
 `--kui-select-selected-font-weight` tokens configure its typography. Plain
 selected text stays on one ellipsized line when the trigger narrows.
 
+For an unavailable entry, set `SelectChoice.disabled` and optionally
+`disabledReason`; the option stays visible but cannot be chosen. A multiple
+`Select` can opt in to `selectAllLabel` and `clearLabel` footer buttons.
+Select all includes only enabled choices, Clear removes the selection, and
+both report changes through the normal `input` and `change` events. The app
+still owns the controlled `value` and localized action labels.
+
 - `ResizableRegion` is an interactive controlled pane. `Grid` is the right answer for static equal-width columns; application CSS grid remains the answer for asymmetric or intrinsic tracks.
 - A `ResizableRegion`'s content spans the whole region, like its separator. Give
   it one child — normally a `Pane` — and that child fills the region, so the
@@ -271,6 +323,9 @@ selected text stays on one ellipsized line when the trigger narrows.
 - `TokenSearchField` is a structured editor. A native input or `wa-input` is the right answer for ordinary text.
 
 For common structured search, use `createTokenSearchModel` from `@kerfjs/ui/token-search-model`, pass the model to `TokenSearchField`, and register it under the field id in `wireTokenSearchFields(root, { models })`. Rules parse `name:value` expressions and provide suggestions; the model owns chips, selection, removal, clear, and an optional evaluation result. Omit `model` and `models` for full manual control.
+`TokenSearchRule.suggest(input, state)` receives the unfinished value and current committed tokens, so a rule can omit values already selected. Existing one-argument suggestion callbacks continue to work.
+For a sibling date picker or other app helper, call `model.commit(value)` while a `name:` prefix is active. It parses and commits that value for the active rule even when it is absent from suggestions, replacing the unfinished prefix text. Invalid values and calls without an active prefix leave the query unchanged; `choose(value)` remains restricted to suggested tokens.
+To apply a saved search or restore a query programmatically, call `model.replace({ query, tokens })`. It publishes parsed state and rebuilds the DOM-owned editor text even when no chip changed. For a field without a model, change the field's `revision` prop when setting `query` yourself.
 When one root contains both kinds of field, a registered model enables chip keyboard behavior only for its own field. Other fields keep native editing unless the root opts into `keyboard` with an application removal callback.
 
 ## Toolbar composition
@@ -338,7 +393,8 @@ menu.
 
 Nested decisions use an item with `submenu`. Children keep their own actions,
 `attributes` metadata, icons, `checked` state, disabled state and
-`disabledReason` tooltip. `tone: 'danger'` maps to the Web Awesome destructive
+`disabledReason` tooltip. Nested `heading` and `divider` entries group those
+commands without entering keyboard navigation. `tone: 'danger'` maps to the Web Awesome destructive
 variant. A parent can sit among ordinary commands and dividers, so the same
 items shape covers single-line and batch actions; compute each batch child's
 `disabled` state from the current selection.
@@ -349,8 +405,11 @@ items shape covers single-line and batch actions; compute each batch child's
   items={[
     { label: 'Copy reference', action: 'copy-reference', attributes: { 'data-item-id': lineId } },
     { label: 'Decide', submenu: [
+      { kind: 'heading', label: 'Review' },
       { label: 'Approve', action: 'decide', checked: current === 'approve', attributes: { 'data-item-id': lineId, 'data-decision': 'approve' } },
       { label: 'Reject', action: 'decide', tone: 'danger', disabled: needsPrice, disabledReason: needsPrice ? 'Add a price first' : undefined, attributes: { 'data-item-id': lineId, 'data-decision': 'reject' } },
+      { kind: 'divider' },
+      { label: 'Other…', action: 'choose-other' },
     ] },
     { kind: 'divider' },
     { label: 'Remove', action: 'remove', tone: 'danger' },
@@ -421,6 +480,28 @@ forks the package anatomy and spacing contract.
 </aside>
 ```
 
+## Removable tags
+
+Use `Chip` when a short tag has a remove action. `removeAction` becomes the
+native button's `data-action`; `removeLabel` must name the specific tag for
+assistive technology. Use `itemId` for the application's delegated handler.
+The application updates its tag list after the action. `size="compact"` uses a
+20px chip with a 16px remove button, and `disabled` disables removal. Tone,
+appearance, and shape use the same semantic choices as `Badge`; use `Badge`
+when no removal is needed and the content is status or count metadata.
+
+```tsx
+<Chip
+  size="compact"
+  tone="brand"
+  itemId={tag.id}
+  removeAction="remove-tag"
+  removeLabel={`Remove ${tag.name} tag`}
+>
+  {tag.name}
+</Chip>
+```
+
 ## Web Awesome overlap policy
 
 Web Awesome catalog coverage means supported and themed, not preferred. Import
@@ -437,7 +518,7 @@ replaces it (`PopupMenu` renders `wa-dropdown`; `Select` renders `wa-select` /
 | ------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `wa-button`, `wa-dropdown`, `wa-dropdown-item`                     | Use buttons for actions and `PopupMenu` for a command menu, never raw dropdown markup. Use `ListItem` for a navigation row and `Select` for a value.  |
 | `wa-button-group`                                                  | Use only for exceptional grouped actions; use `SegmentedControl` for one-of-many selection.                                                           |
-| `wa-input`, `wa-tag`                                               | Use for ordinary text and tags; use `TokenSearchField` only when text and ordered filter tokens form one editor.                                      |
+| `wa-input`, `wa-tag`                                               | Use `Chip` for removable or disabled tags; use `TokenSearchField` only when text and ordered filter tokens form one editor.                           |
 | `wa-select`, `wa-option`                                           | Use `Select`, which owns Kerf spacing, controlled rendering, icon stability, and explicit registration.                                               |
 | `wa-tab-group`, `wa-tab`, `wa-tab-panel`                           | Use `TabBar`/`AppTab` for application tabs or `SegmentedControl` for compact local views.                                                             |
 | `wa-icon`                                                          | Use `LucideIcon` in application UI.                                                                                                                   |

package/docs/design/templates/segmented-control/equal-dark.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 460 88" width="460" height="88"><defs><clipPath id="cp0"><rect x="20" y="20" width="210.3" height="44"/></clipPath><clipPath id="ov1"><rect x="21" y="21" width="208.3" height="42" rx="11"/></clipPath><filter id="sh2" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="1.5"/></filter><clipPath id="ct3"><rect x="38.7" y="36" width="35.3" height="12"/></clipPath><clipPath id="ct4"><rect x="114.1" y="36" width="22" height="12"/></clipPath><clipPath id="ct5"><rect x="168.5" y="36" width="50.8" height="12"/></clipPath></defs><g clip-path="url(#cp0)"><rect x="20" y="20" width="210.3" height="44" rx="12" fill="rgb(58,58,60)"/><rect x="20.5" y="20.5" width="209" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/></g><g clip-path="url(#cp0)"><g clip-path="url(#ov1)"><rect x="22" y="23" width="68.8" height="40" rx="10" fill="rgba(0,0,0,0.5)" filter="url(#sh2)"/><rect x="22" y="22" width="68.8" height="40" rx="10" fill="rgb(28,28,30)"/><rect x="22.5" y="22.5" width="68" height="39" rx="9.5" fill="none" stroke="rgb(72,72,74)" stroke-width="1"/><text x="38.7" y="46" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(138,203,255)">Board</text><rect x="91.5" y="22.5" width="68" height="39" rx="9.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="114.13" y="46" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(174,174,178)">List</text><rect x="160.5" y="22.5" width="67" height="39" rx="9.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="168.5" y="46" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(174,174,178)">Timeline</text></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 460 88" width="460" height="88"><defs><clipPath id="cp0"><rect x="20" y="20" width="210.3" height="44"/></clipPath><clipPath id="ov1"><rect x="21" y="21" width="208.3" height="42" rx="11"/></clipPath><filter id="sh2" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="1.5"/></filter><clipPath id="ct3"><rect x="38.7" y="36" width="35.3" height="12"/></clipPath><clipPath id="ct4"><rect x="114.1" y="36" width="22" height="12"/></clipPath><clipPath id="ct5"><rect x="168.5" y="36" width="50.8" height="12"/></clipPath></defs><g clip-path="url(#cp0)"><rect x="20" y="20" width="210.3" height="44" rx="12" fill="rgb(58,58,60)"/><rect x="20.5" y="20.5" width="209" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/></g><g clip-path="url(#cp0)"><g clip-path="url(#ov1)"><rect x="22" y="23" width="68.8" height="40" rx="10" fill="rgba(0,0,0,0.5)" filter="url(#sh2)"/><rect x="22" y="22" width="68.8" height="40" rx="10" fill="rgb(28,28,30)"/><rect x="22.5" y="22.5" width="68" height="39" rx="9.5" fill="none" stroke="rgb(72,72,74)" stroke-width="1"/><text x="38.7" y="46" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(138,203,255)">Board</text><rect x="91.5" y="22.5" width="68" height="39" rx="9.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="114.13" y="46" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(245,245,247)">List</text><rect x="160.5" y="22.5" width="67" height="39" rx="9.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="168.5" y="46" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(245,245,247)">Timeline</text></g></g></svg>

package/docs/design/templates/segmented-control/equal.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 460 88" width="460" height="88"><defs><clipPath id="cp0"><rect x="20" y="20" width="210.3" height="44"/></clipPath><clipPath id="ov1"><rect x="21" y="21" width="208.3" height="42" rx="11"/></clipPath><filter id="sh2" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="1.5"/></filter><clipPath id="ct3"><rect x="38.7" y="36" width="35.3" height="12"/></clipPath><clipPath id="ct4"><rect x="114.1" y="36" width="22" height="12"/></clipPath><clipPath id="ct5"><rect x="168.5" y="36" width="50.8" height="12"/></clipPath></defs><g clip-path="url(#cp0)"><rect x="20" y="20" width="210.3" height="44" rx="12" fill="rgb(229,229,234)"/><rect x="20.5" y="20.5" width="209" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/></g><g clip-path="url(#cp0)"><g clip-path="url(#ov1)"><rect x="22" y="23" width="68.8" height="40" rx="10" fill="rgba(0,0,0,0.14)" filter="url(#sh2)"/><rect x="22" y="22" width="68.8" height="40" rx="10" fill="rgb(255,255,255)"/><rect x="22.5" y="22.5" width="68" height="39" rx="9.5" fill="none" stroke="rgb(209,209,214)" stroke-width="1"/><text x="38.7" y="46" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(12,98,243)">Board</text><rect x="91.5" y="22.5" width="68" height="39" rx="9.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="114.13" y="46" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(110,110,115)">List</text><rect x="160.5" y="22.5" width="67" height="39" rx="9.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="168.5" y="46" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(110,110,115)">Timeline</text></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 460 88" width="460" height="88"><defs><clipPath id="cp0"><rect x="20" y="20" width="210.3" height="44"/></clipPath><clipPath id="ov1"><rect x="21" y="21" width="208.3" height="42" rx="11"/></clipPath><filter id="sh2" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="1.5"/></filter><clipPath id="ct3"><rect x="38.7" y="36" width="35.3" height="12"/></clipPath><clipPath id="ct4"><rect x="114.1" y="36" width="22" height="12"/></clipPath><clipPath id="ct5"><rect x="168.5" y="36" width="50.8" height="12"/></clipPath></defs><g clip-path="url(#cp0)"><rect x="20" y="20" width="210.3" height="44" rx="12" fill="rgb(229,229,234)"/><rect x="20.5" y="20.5" width="209" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/></g><g clip-path="url(#cp0)"><g clip-path="url(#ov1)"><rect x="22" y="23" width="68.8" height="40" rx="10" fill="rgba(0,0,0,0.14)" filter="url(#sh2)"/><rect x="22" y="22" width="68.8" height="40" rx="10" fill="rgb(255,255,255)"/><rect x="22.5" y="22.5" width="68" height="39" rx="9.5" fill="none" stroke="rgb(209,209,214)" stroke-width="1"/><text x="38.7" y="46" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(12,98,243)">Board</text><rect x="91.5" y="22.5" width="68" height="39" rx="9.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="114.13" y="46" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(29,29,31)">List</text><rect x="160.5" y="22.5" width="67" height="39" rx="9.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="168.5" y="46" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(29,29,31)">Timeline</text></g></g></svg>

package/docs/design/templates/segmented-control/pill-small-dark.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 460 88" width="460" height="88"><defs><clipPath id="cp0"><rect x="20" y="20" width="141.4" height="44"/></clipPath><clipPath id="ov1"><rect x="21" y="21" width="139.4" height="42" rx="21"/></clipPath><clipPath id="ct2"><rect x="31.5" y="36.5" width="21.1" height="11"/></clipPath><filter id="sh3" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="1.5"/></filter><clipPath id="ct4"><rect x="70" y="36.5" width="30.3" height="11"/></clipPath><clipPath id="ct5"><rect x="116.3" y="36.5" width="35.1" height="11"/></clipPath></defs><g clip-path="url(#cp0)"><rect x="20" y="20" width="141.4" height="44" rx="22" fill="rgb(58,58,60)"/><rect x="20.5" y="20.5" width="140" height="43" rx="21.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#ov1)"><rect x="22.5" y="22.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="31.47" y="46.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" font-weight="650" fill="rgb(174,174,178)">Day</text><rect x="62" y="23" width="46.3" height="40" rx="20" fill="rgba(0,0,0,0.5)" filter="url(#sh3)"/><rect x="62" y="22" width="46.3" height="40" rx="20" fill="rgb(28,28,30)"/><rect x="62.5" y="22.5" width="45" height="39" rx="19.5" fill="none" stroke="rgb(72,72,74)" stroke-width="1"/><text x="70" y="46.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" font-weight="650" fill="rgb(138,203,255)">Week</text><rect x="108.5" y="22.5" width="50" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="116.28" y="46.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" font-weight="650" fill="rgb(174,174,178)">Month</text></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 460 88" width="460" height="88"><defs><clipPath id="cp0"><rect x="20" y="20" width="141.4" height="44"/></clipPath><clipPath id="ov1"><rect x="21" y="21" width="139.4" height="42" rx="21"/></clipPath><clipPath id="ct2"><rect x="31.5" y="36.5" width="21.1" height="11"/></clipPath><filter id="sh3" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="1.5"/></filter><clipPath id="ct4"><rect x="70" y="36.5" width="30.3" height="11"/></clipPath><clipPath id="ct5"><rect x="116.3" y="36.5" width="35.1" height="11"/></clipPath></defs><g clip-path="url(#cp0)"><rect x="20" y="20" width="141.4" height="44" rx="22" fill="rgb(58,58,60)"/><rect x="20.5" y="20.5" width="140" height="43" rx="21.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#ov1)"><rect x="22.5" y="22.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="31.47" y="46.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" font-weight="650" fill="rgb(245,245,247)">Day</text><rect x="62" y="23" width="46.3" height="40" rx="20" fill="rgba(0,0,0,0.5)" filter="url(#sh3)"/><rect x="62" y="22" width="46.3" height="40" rx="20" fill="rgb(28,28,30)"/><rect x="62.5" y="22.5" width="45" height="39" rx="19.5" fill="none" stroke="rgb(72,72,74)" stroke-width="1"/><text x="70" y="46.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" font-weight="650" fill="rgb(138,203,255)">Week</text><rect x="108.5" y="22.5" width="50" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="116.28" y="46.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" font-weight="650" fill="rgb(245,245,247)">Month</text></g></g></svg>

package/docs/design/templates/segmented-control/pill-small.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 460 88" width="460" height="88"><defs><clipPath id="cp0"><rect x="20" y="20" width="141.4" height="44"/></clipPath><clipPath id="ov1"><rect x="21" y="21" width="139.4" height="42" rx="21"/></clipPath><clipPath id="ct2"><rect x="31.5" y="36.5" width="21.1" height="11"/></clipPath><filter id="sh3" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="1.5"/></filter><clipPath id="ct4"><rect x="70" y="36.5" width="30.3" height="11"/></clipPath><clipPath id="ct5"><rect x="116.3" y="36.5" width="35.1" height="11"/></clipPath></defs><g clip-path="url(#cp0)"><rect x="20" y="20" width="141.4" height="44" rx="22" fill="rgb(229,229,234)"/><rect x="20.5" y="20.5" width="140" height="43" rx="21.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#ov1)"><rect x="22.5" y="22.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="31.47" y="46.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" font-weight="650" fill="rgb(110,110,115)">Day</text><rect x="62" y="23" width="46.3" height="40" rx="20" fill="rgba(0,0,0,0.14)" filter="url(#sh3)"/><rect x="62" y="22" width="46.3" height="40" rx="20" fill="rgb(255,255,255)"/><rect x="62.5" y="22.5" width="45" height="39" rx="19.5" fill="none" stroke="rgb(209,209,214)" stroke-width="1"/><text x="70" y="46.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" font-weight="650" fill="rgb(12,98,243)">Week</text><rect x="108.5" y="22.5" width="50" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="116.28" y="46.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" font-weight="650" fill="rgb(110,110,115)">Month</text></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 460 88" width="460" height="88"><defs><clipPath id="cp0"><rect x="20" y="20" width="141.4" height="44"/></clipPath><clipPath id="ov1"><rect x="21" y="21" width="139.4" height="42" rx="21"/></clipPath><clipPath id="ct2"><rect x="31.5" y="36.5" width="21.1" height="11"/></clipPath><filter id="sh3" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="1.5"/></filter><clipPath id="ct4"><rect x="70" y="36.5" width="30.3" height="11"/></clipPath><clipPath id="ct5"><rect x="116.3" y="36.5" width="35.1" height="11"/></clipPath></defs><g clip-path="url(#cp0)"><rect x="20" y="20" width="141.4" height="44" rx="22" fill="rgb(229,229,234)"/><rect x="20.5" y="20.5" width="140" height="43" rx="21.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#ov1)"><rect x="22.5" y="22.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="31.47" y="46.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" font-weight="650" fill="rgb(29,29,31)">Day</text><rect x="62" y="23" width="46.3" height="40" rx="20" fill="rgba(0,0,0,0.14)" filter="url(#sh3)"/><rect x="62" y="22" width="46.3" height="40" rx="20" fill="rgb(255,255,255)"/><rect x="62.5" y="22.5" width="45" height="39" rx="19.5" fill="none" stroke="rgb(209,209,214)" stroke-width="1"/><text x="70" y="46.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" font-weight="650" fill="rgb(12,98,243)">Week</text><rect x="108.5" y="22.5" width="50" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="116.28" y="46.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" font-weight="650" fill="rgb(29,29,31)">Month</text></g></g></svg>