@kerfjs/ui 5.0.0-beta.54 → 5.0.0-beta.56

package/dist/{chunk-GUIHMIT2.js → chunk-VNPQDCQZ.js}

@@ -1,7 +1,7 @@
 import { LoadingSpinner } from './chunk-ZLWQZUGF.js';
-import { Skeleton } from './chunk-ATHXW6RP.js';
+import { Skeleton } from './chunk-AHEG27M7.js';
 import { filterDataAttributes } from './chunk-SRSJO5QE.js';
-import { remify, em } from './chunk-WZ2GLEY4.js';
+import { remify, em } from './chunk-2G2ZJQYK.js';
 import { jsxs, jsx } from 'kerfjs/jsx-runtime';
 
 var PROTECTED_ROOT_DATA_ATTRIBUTES = /* @__PURE__ */ new Set([
@@ -89,4 +89,4 @@ function ListItem({
 
 export { ListItem };
 
-//# sourceMappingURL=chunk-GUIHMIT2.js.map
+//# sourceMappingURL=chunk-VNPQDCQZ.js.map

package/dist/{chunk-GUIHMIT2.js.map → chunk-VNPQDCQZ.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/list-item.tsx"],"names":[],"mappings":"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","file":"chunk-GUIHMIT2.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport { em, remify } from './css-values.js';\nimport { filterDataAttributes } from './extension-attributes.js';\nimport { LoadingSpinner } from './loading-spinner.js';\nimport type { KerfUiContent } from './semantic-content.js';\nimport { Skeleton } from './skeleton.js';\n\nconst PROTECTED_ROOT_DATA_ATTRIBUTES = new Set([\n  'data-component',\n  'data-action',\n  'data-item-id',\n  'data-has-icon',\n  'data-has-description',\n  'data-multiline',\n  'data-density',\n  'data-divider',\n  'data-busy',\n  'data-state',\n  'data-kui-disabled',\n]);\n\ntype ListItemRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-component'?: never;\n    'data-action'?: never;\n    'data-item-id'?: never;\n    'data-has-icon'?: never;\n    'data-has-description'?: never;\n    'data-multiline'?: never;\n    'data-density'?: never;\n    'data-divider'?: never;\n    'data-busy'?: never;\n    'data-state'?: never;\n    'data-kui-disabled'?: never;\n  }\n>;\n\nexport interface ListItemProps {\n  label: string | SafeHtml;\n  /** App-owned supporting text rendered in the component's stable label stack. */\n  description?: string | SafeHtml;\n  icon?: SafeHtml;\n  /** Dormant author content at the row's end; a placeholder renders it as a skeleton. */\n  trailing?: KerfUiContent;\n  /** Dormant status metadata rendered before trailing content; a placeholder renders it as a skeleton. */\n  status?: string | SafeHtml;\n  /** Show a progress indicator and expose the row as busy without replacing its content; a placeholder keeps the indicator. */\n  busy?: boolean;\n  density?: 'standard' | 'compact';\n  divider?: 'none' | 'before' | 'after' | 'both';\n  selected?: boolean;\n  action: string;\n  itemId?: string;\n  className?: string;\n  pressed?: boolean;\n  accessibleLabel?: string;\n  title?: string;\n  multiline?: boolean;\n  state?: string;\n  disabled?: boolean;\n  tabIndex?: number;\n  /** Render the row as an unanimated loading skeleton, disabling its action: label, description, icon, status, and trailing content become skeletons; the `busy` indicator stays live. */\n  placeholder?: boolean;\n  rootAttributes?: ListItemRootAttributes;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\nexport function ListItem({\n  label,\n  description,\n  icon,\n  trailing,\n  status,\n  busy = false,\n  density = 'standard',\n  divider = 'none',\n  selected = false,\n  action,\n  itemId,\n  className = '',\n  pressed,\n  accessibleLabel,\n  title,\n  multiline = false,\n  state,\n  disabled = false,\n  tabIndex,\n  placeholder = false,\n  rootAttributes = {},\n  slot,\n}: ListItemProps) {\n  const extensionAttributes = filterDataAttributes(\n    rootAttributes,\n    PROTECTED_ROOT_DATA_ATTRIBUTES,\n  );\n  return (\n    <button\n      {...extensionAttributes}\n      type=\"button\"\n      class={`kui-list-item ${className}`.trim()}\n      title={placeholder ? undefined : title}\n      disabled={disabled || placeholder}\n      tabindex={placeholder ? -1 : tabIndex}\n      data-component=\"list-item\"\n      data-action={placeholder ? undefined : action}\n      data-item-id={itemId}\n      data-has-icon={String(Boolean(icon))}\n      data-has-description={String(Boolean(description))}\n      data-multiline={multiline ? 'true' : undefined}\n      data-density={density}\n      data-divider={divider}\n      data-busy={busy ? 'true' : undefined}\n      data-state={state}\n      data-kui-disabled={disabled ? 'true' : undefined}\n      data-placeholder={placeholder ? 'true' : undefined}\n      aria-label={accessibleLabel}\n      aria-current={selected ? 'page' : undefined}\n      aria-pressed={pressed === undefined ? undefined : String(pressed)}\n      aria-busy={placeholder || busy ? 'true' : undefined}\n      slot={slot}\n    >\n      {icon && (\n        <span class=\"kui-list-item__icon\">\n          {placeholder ? (\n            <Skeleton block width={remify(18)} height={remify(18)} />\n          ) : (\n            icon\n          )}\n        </span>\n      )}\n      <span class=\"kui-list-item__label\">\n        <span class=\"kui-list-item__primary-label\">\n          {placeholder ? <Skeleton width={em(9)} /> : label}\n        </span>\n        {description && (\n          <span class=\"kui-list-item__description\">\n            {placeholder ? <Skeleton width={em(11)} /> : description}\n          </span>\n        )}\n      </span>\n      {(busy || status || trailing) && (\n        <span class=\"kui-list-item__trailing\">\n          {/* The busy spinner is component-owned chrome drawn from a known\n              prop, so a placeholder keeps it live. Status text and\n              author-supplied trailing content are values: skeletons. */}\n          {busy && <LoadingSpinner />}\n          {status && (\n            <span class=\"kui-list-item__status\">\n              {placeholder ? <Skeleton width={em(3.5)} /> : status}\n            </span>\n          )}\n          {trailing && (placeholder ? <Skeleton width={em(1.5)} /> : trailing)}\n        </span>\n      )}\n    </button>\n  );\n}\n"]}
+{"version":3,"sources":["../src/list-item.tsx"],"names":[],"mappings":"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","file":"chunk-VNPQDCQZ.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport { em, remify } from './css-values.js';\nimport { filterDataAttributes } from './extension-attributes.js';\nimport { LoadingSpinner } from './loading-spinner.js';\nimport type { KerfUiContent } from './semantic-content.js';\nimport { Skeleton } from './skeleton.js';\n\nconst PROTECTED_ROOT_DATA_ATTRIBUTES = new Set([\n  'data-component',\n  'data-action',\n  'data-item-id',\n  'data-has-icon',\n  'data-has-description',\n  'data-multiline',\n  'data-density',\n  'data-divider',\n  'data-busy',\n  'data-state',\n  'data-kui-disabled',\n]);\n\ntype ListItemRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-component'?: never;\n    'data-action'?: never;\n    'data-item-id'?: never;\n    'data-has-icon'?: never;\n    'data-has-description'?: never;\n    'data-multiline'?: never;\n    'data-density'?: never;\n    'data-divider'?: never;\n    'data-busy'?: never;\n    'data-state'?: never;\n    'data-kui-disabled'?: never;\n  }\n>;\n\nexport interface ListItemProps {\n  label: string | SafeHtml;\n  /** App-owned supporting text rendered in the component's stable label stack. */\n  description?: string | SafeHtml;\n  icon?: SafeHtml;\n  /** Dormant author content at the row's end; a placeholder renders it as a skeleton. */\n  trailing?: KerfUiContent;\n  /** Dormant status metadata rendered before trailing content; a placeholder renders it as a skeleton. */\n  status?: string | SafeHtml;\n  /** Show a progress indicator and expose the row as busy without replacing its content; a placeholder keeps the indicator. */\n  busy?: boolean;\n  density?: 'standard' | 'compact';\n  divider?: 'none' | 'before' | 'after' | 'both';\n  selected?: boolean;\n  action: string;\n  itemId?: string;\n  className?: string;\n  pressed?: boolean;\n  accessibleLabel?: string;\n  title?: string;\n  multiline?: boolean;\n  state?: string;\n  disabled?: boolean;\n  tabIndex?: number;\n  /** Render the row as an unanimated loading skeleton, disabling its action: label, description, icon, status, and trailing content become skeletons; the `busy` indicator stays live. */\n  placeholder?: boolean;\n  rootAttributes?: ListItemRootAttributes;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\nexport function ListItem({\n  label,\n  description,\n  icon,\n  trailing,\n  status,\n  busy = false,\n  density = 'standard',\n  divider = 'none',\n  selected = false,\n  action,\n  itemId,\n  className = '',\n  pressed,\n  accessibleLabel,\n  title,\n  multiline = false,\n  state,\n  disabled = false,\n  tabIndex,\n  placeholder = false,\n  rootAttributes = {},\n  slot,\n}: ListItemProps) {\n  const extensionAttributes = filterDataAttributes(\n    rootAttributes,\n    PROTECTED_ROOT_DATA_ATTRIBUTES,\n  );\n  return (\n    <button\n      {...extensionAttributes}\n      type=\"button\"\n      class={`kui-list-item ${className}`.trim()}\n      title={placeholder ? undefined : title}\n      disabled={disabled || placeholder}\n      tabindex={placeholder ? -1 : tabIndex}\n      data-component=\"list-item\"\n      data-action={placeholder ? undefined : action}\n      data-item-id={itemId}\n      data-has-icon={String(Boolean(icon))}\n      data-has-description={String(Boolean(description))}\n      data-multiline={multiline ? 'true' : undefined}\n      data-density={density}\n      data-divider={divider}\n      data-busy={busy ? 'true' : undefined}\n      data-state={state}\n      data-kui-disabled={disabled ? 'true' : undefined}\n      data-placeholder={placeholder ? 'true' : undefined}\n      aria-label={accessibleLabel}\n      aria-current={selected ? 'page' : undefined}\n      aria-pressed={pressed === undefined ? undefined : String(pressed)}\n      aria-busy={placeholder || busy ? 'true' : undefined}\n      slot={slot}\n    >\n      {icon && (\n        <span class=\"kui-list-item__icon\">\n          {placeholder ? (\n            <Skeleton block width={remify(18)} height={remify(18)} />\n          ) : (\n            icon\n          )}\n        </span>\n      )}\n      <span class=\"kui-list-item__label\">\n        <span class=\"kui-list-item__primary-label\">\n          {placeholder ? <Skeleton width={em(9)} /> : label}\n        </span>\n        {description && (\n          <span class=\"kui-list-item__description\">\n            {placeholder ? <Skeleton width={em(11)} /> : description}\n          </span>\n        )}\n      </span>\n      {(busy || status || trailing) && (\n        <span class=\"kui-list-item__trailing\">\n          {/* The busy spinner is component-owned chrome drawn from a known\n              prop, so a placeholder keeps it live. Status text and\n              author-supplied trailing content are values: skeletons. */}\n          {busy && <LoadingSpinner />}\n          {status && (\n            <span class=\"kui-list-item__status\">\n              {placeholder ? <Skeleton width={em(3.5)} /> : status}\n            </span>\n          )}\n          {trailing && (placeholder ? <Skeleton width={em(1.5)} /> : trailing)}\n        </span>\n      )}\n    </button>\n  );\n}\n"]}

package/dist/{chunk-5I22LMCV.js → chunk-VZOFZPSO.js}

@@ -1,6 +1,6 @@
 import { verticalAlignment, horizontalAlignment } from './chunk-AYUHMAI6.js';
 import { filterDataAttributes } from './chunk-SRSJO5QE.js';
-import { space } from './chunk-WZ2GLEY4.js';
+import { space } from './chunk-2G2ZJQYK.js';
 import { jsx } from 'kerfjs/jsx-runtime';
 
 var rowProtectedAttributes = /* @__PURE__ */ new Set([
@@ -68,4 +68,4 @@ function Row({
 
 export { Row };
 
-//# sourceMappingURL=chunk-5I22LMCV.js.map
+//# sourceMappingURL=chunk-VZOFZPSO.js.map

package/dist/chunk-VZOFZPSO.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/row.tsx"],"names":[],"mappings":";;;;;AAiBA,IAAM,sBAAA,uBAA6B,GAAA,CAAI;AAAA,EACrC,gBAAA;AAAA,EACA,cAAA;AAAA,EACA,cAAA;AAAA,EACA,WAAA;AAAA,EACA,WAAA;AAAA,EACA,WAAA;AAAA,EACA,kBAAA;AAAA,EACA;AACF,CAAC,CAAA;AAeD,IAAM,UAAA,GAAqC;AAAA,EACzC,MAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA;AAAA,EACA,GAAA;AAAA,EACA,GAAA;AAAA,EACA,GAAA;AAAA,EACA;AACF,CAAA;AAgCO,SAAS,GAAA,CAAI;AAAA,EAClB,QAAA;AAAA,EACA,MAAA,GAAS,MAAA;AAAA,EACT,MAAA,GAAS,MAAA;AAAA,EACT,GAAA,GAAM,IAAA;AAAA,EACN,IAAA,GAAO,KAAA;AAAA,EACP,IAAA,GAAO,KAAA;AAAA,EACP,IAAA,GAAO,KAAA;AAAA,EACP,UAAA,GAAa,EAAA;AAAA,EACb,aAAA,GAAgB,EAAA;AAAA,EAChB,SAAA,GAAY,EAAA;AAAA,EACZ,iBAAiB,EAAC;AAAA,EAClB;AACF,CAAA,EAAa;AACX,EAAA,MAAM,kBAAA,GAAqB,oBAAA;AAAA,IACzB,cAAA;AAAA,IACA;AAAA,GACF;AACA,EAAA,MAAM,WAAW,UAAA,CAAW,QAAA,CAAS,GAAkB,CAAA,GACnD,KAAA,CAAM,GAAkB,CAAA,GACxB,GAAA;AACJ,EAAA,MAAM,SAAA,GAAY,IAAA,KAAS,IAAA,GAAO,UAAA,GAAa,IAAA,IAAQ,MAAA;AACvD,EAAA,MAAM,KAAA,GAAQ;AAAA,IACZ,kBAAkB,QAAQ,CAAA,CAAA;AAAA,IAC1B,SAAA,GAAY,CAAA,gBAAA,EAAmB,SAAS,CAAA,CAAA,GAAK;AAAA,GAC/C,CACG,MAAA,CAAO,OAAO,CAAA,CACd,KAAK,GAAG,CAAA;AAEX,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,kBAAA;AAAA,MACJ,KAAA,EAAO,CAAA,QAAA,EAAW,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MACnC,gBAAA,EAAe,KAAA;AAAA,MACf,cAAA,EAAc,oBAAoB,MAAM,CAAA;AAAA,MACxC,cAAA,EAAc,kBAAkB,MAAM,CAAA;AAAA,MACtC,WAAA,EAAW,MAAA,CAAO,OAAA,CAAQ,IAAI,CAAC,CAAA;AAAA,MAC/B,WAAA,EAAW,OAAO,MAAA,GAAS,MAAA;AAAA,MAC3B,WAAA,EAAW,OAAO,IAAI,CAAA;AAAA,MACtB,oBAAkB,UAAA,IAAc,MAAA;AAAA,MAChC,uBAAqB,aAAA,IAAiB,MAAA;AAAA,MACtC,KAAA;AAAA,MACA,IAAA;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ","file":"chunk-VZOFZPSO.js","sourcesContent":["import {\n  type CssFlex,\n  type CssFlexKeyword,\n  type CssLength,\n  space,\n  type UiSpaceName,\n} from './css-values.js';\nimport { filterDataAttributes } from './extension-attributes.js';\nimport {\n  type HorizontalAlignment,\n  horizontalAlignment,\n  type VerticalAlignment,\n  verticalAlignment,\n} from './flex-alignment.js';\nimport type { KerfUiContent } from './semantic-content.js';\nimport type { Sides } from './sides.js';\n\nconst rowProtectedAttributes = new Set([\n  'data-component',\n  'data-h-align',\n  'data-v-align',\n  'data-flex',\n  'data-fill',\n  'data-wrap',\n  'data-text-insets',\n  'data-control-insets',\n]);\n\ntype RowRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-component'?: never;\n    'data-h-align'?: never;\n    'data-v-align'?: never;\n    'data-flex'?: never;\n    'data-fill'?: never;\n    'data-wrap'?: never;\n    'data-text-insets'?: never;\n    'data-control-insets'?: never;\n  }\n>;\n\nconst spaceNames: readonly UiSpaceName[] = [\n  'none',\n  '2xs',\n  'xs',\n  's',\n  'm',\n  'l',\n  'xl',\n];\n\nexport interface RowProps {\n  children?: KerfUiContent;\n  /** Horizontal distribution. Defaults to left. */\n  hAlign?: HorizontalAlignment;\n  /** Vertical alignment and wrapped-line distribution. Defaults to full. */\n  vAlign?: VerticalAlignment;\n  /** A named UI spacing token or typed CSS length. Defaults to xs. */\n  gap?: UiSpaceName | CssLength;\n  /** Allow this row to grow/shrink, use a keyword, or supply a typed CSS flex shorthand. */\n  flex?: boolean | CssFlexKeyword | CssFlex;\n  /**\n   * Fill the height of a parent with a definite height, such as an app root or\n   * a fixed-height frame, when this row is that parent's layout root. Inside a\n   * flex layout use `flex` instead. Defaults to false.\n   */\n  fill?: boolean;\n  /** Allow children to wrap onto additional lines. */\n  wrap?: boolean;\n  /** Physical sides that receive the standard 17px text inset. */\n  textInsets?: Sides;\n  /** Physical sides that receive the standard 8px control inset. Text insets win on overlap. */\n  controlInsets?: Sides;\n  className?: string;\n  /** Safe `data-*` metadata; Row-owned structural attributes remain protected. */\n  rootAttributes?: RowRootAttributes;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/** A horizontal flex row with explicit physical-axis alignment and spacing. */\nexport function Row({\n  children,\n  hAlign = 'left',\n  vAlign = 'full',\n  gap = 'xs',\n  flex = false,\n  fill = false,\n  wrap = false,\n  textInsets = '',\n  controlInsets = '',\n  className = '',\n  rootAttributes = {},\n  slot,\n}: RowProps) {\n  const safeRootAttributes = filterDataAttributes(\n    rootAttributes,\n    rowProtectedAttributes,\n  );\n  const gapValue = spaceNames.includes(gap as UiSpaceName)\n    ? space(gap as UiSpaceName)\n    : gap;\n  const flexValue = flex === true ? '1 1 auto' : flex || undefined;\n  const style = [\n    `--_kui-row-gap:${gapValue}`,\n    flexValue ? `--_kui-row-flex:${flexValue}` : '',\n  ]\n    .filter(Boolean)\n    .join(';');\n\n  return (\n    <div\n      {...safeRootAttributes}\n      class={`kui-row ${className}`.trim()}\n      data-component=\"row\"\n      data-h-align={horizontalAlignment(hAlign)}\n      data-v-align={verticalAlignment(vAlign)}\n      data-flex={String(Boolean(flex))}\n      data-fill={fill ? 'true' : undefined}\n      data-wrap={String(wrap)}\n      data-text-insets={textInsets || undefined}\n      data-control-insets={controlInsets || undefined}\n      style={style}\n      slot={slot}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport type {\n  CssFlex,\n  CssFlexKeyword,\n  CssLength,\n  UiSpaceName,\n} from './css-values.js';\nexport type {\n  HorizontalAlignment,\n  VerticalAlignment,\n} from './flex-alignment.js';\nexport type { Sides } from './sides.js';\n"]}

package/dist/chunk-WLG6SSNT.js

@@ -0,0 +1,94 @@
+import { jsxs, jsx } from 'kerfjs/jsx-runtime';
+
+// src/popup-menu.tsx
+function contentKey(parts) {
+  let hash = 2166136261;
+  for (const character of parts.join("\0")) {
+    hash ^= character.codePointAt(0);
+    hash = Math.imul(hash, 16777619);
+  }
+  return (hash >>> 0).toString(36);
+}
+function entryKey(entry) {
+  if (entry.kind === "divider") return "-";
+  if (entry.kind === "heading") return `#${entry.label}`;
+  return [
+    entry.label,
+    entry.action ?? "",
+    entry.value ?? "",
+    entry.disabled ? "1" : "0",
+    String(entry.icon ?? ""),
+    JSON.stringify(entry.attributes ?? {})
+  ].join("
");
+}
+function renderEntry(entry) {
+  if (entry.kind === "divider") return /* @__PURE__ */ jsx("wa-divider", {});
+  if (entry.kind === "heading")
+    return /* @__PURE__ */ jsx("div", { class: "kui-popup-menu__heading", children: entry.label });
+  return /* @__PURE__ */ jsxs(
+    "wa-dropdown-item",
+    {
+      ...entry.attributes ?? {},
+      "data-action": entry.action,
+      value: entry.value,
+      disabled: entry.disabled,
+      children: [
+        entry.icon ? /* @__PURE__ */ jsx("span", { slot: "icon", class: "kui-popup-menu__icon", children: entry.icon }) : null,
+        entry.label
+      ]
+    }
+  );
+}
+function PopupMenu({
+  text,
+  label,
+  icon,
+  items,
+  placement = "bottom-start",
+  caret = true,
+  disabled = false,
+  rootAttributes = {},
+  slot
+}) {
+  const key = `kui-popup-menu-${contentKey([
+    text ?? "",
+    label ?? "",
+    String(icon ?? ""),
+    String(caret),
+    String(disabled),
+    ...items.map(entryKey)
+  ])}`;
+  return /* @__PURE__ */ jsxs(
+    "wa-dropdown",
+    {
+      size: "m",
+      ...rootAttributes,
+      class: "kui-popup-menu",
+      "data-component": "popup-menu",
+      "data-key": key,
+      "data-morph-skip-children": true,
+      placement,
+      slot,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "wa-button",
+          {
+            slot: "trigger",
+            appearance: "plain",
+            "with-caret": caret,
+            disabled,
+            children: [
+              icon,
+              text ? /* @__PURE__ */ jsx("span", { children: text }) : /* @__PURE__ */ jsx("span", { class: "kui-popup-menu__label", children: label })
+            ]
+          }
+        ),
+        items.map(renderEntry)
+      ]
+    }
+  );
+}
+
+export { PopupMenu };
+
+//# sourceMappingURL=chunk-WLG6SSNT.js.map

package/dist/chunk-WLG6SSNT.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/popup-menu.tsx"],"names":[],"mappings":"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","file":"chunk-WLG6SSNT.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport type { KerfUiContent } from './semantic-content.js';\n\nexport type PopupMenuPlacement =\n  'bottom-start' | 'bottom' | 'bottom-end' | 'top-start' | 'top' | 'top-end';\n\ntype PopupMenuDataAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-action'?: never;\n    'data-component'?: never;\n    'data-key'?: never;\n    'data-morph-skip-children'?: never;\n  }\n>;\n\n/** One command in the menu. */\nexport interface PopupMenuItem {\n  kind?: 'item';\n  label: string;\n  /** Delegated `data-action` the app handles when the item is chosen. */\n  action?: string;\n  /** Native `wa-dropdown-item` value, reported by its `wa-select` event. */\n  value?: string;\n  /** Leading icon, typically a `LucideIcon`; it is placed in the item's icon slot. */\n  icon?: SafeHtml;\n  disabled?: boolean;\n  /** Application `data-*` metadata such as a record id. */\n  attributes?: PopupMenuDataAttributes;\n}\n\n/** A labeled group heading; items that follow it belong to the group. */\nexport interface PopupMenuHeading {\n  kind: 'heading';\n  label: string;\n}\n\n/** A separator between groups of items. */\nexport interface PopupMenuDivider {\n  kind: 'divider';\n}\n\nexport type PopupMenuEntry =\n  PopupMenuItem | PopupMenuHeading | PopupMenuDivider;\n\ntype PopupMenuTriggerName =\n  | {\n      /** Visible trigger text, which is also its accessible name. */\n      text: string;\n      label?: never;\n    }\n  | {\n      text?: never;\n      /**\n       * Accessible name of an icon-only trigger, rendered as visually hidden\n       * slotted text (a Web Awesome button takes its name from its content).\n       */\n      label: string;\n    };\n\nexport type PopupMenuProps = PopupMenuTriggerName & {\n  /** Trigger icon, typically a `LucideIcon`, before any visible text. */\n  icon?: KerfUiContent;\n  items: readonly PopupMenuEntry[];\n  /** Where the menu opens relative to its trigger. Defaults to `bottom-start`. */\n  placement?: PopupMenuPlacement;\n  /** Show the disclosure caret after the trigger content. Defaults to true. */\n  caret?: boolean;\n  disabled?: boolean;\n  /** Application `data-*` metadata on the menu root. */\n  rootAttributes?: PopupMenuDataAttributes;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n};\n\n/** A short, stable FNV-1a digest of the trigger and item structure. */\nfunction contentKey(parts: readonly string[]): string {\n  let hash = 0x811c9dc5;\n  for (const character of parts.join('\\u0000')) {\n    hash ^= character.codePointAt(0)!;\n    hash = Math.imul(hash, 0x01000193);\n  }\n  return (hash >>> 0).toString(36);\n}\n\nfunction entryKey(entry: PopupMenuEntry): string {\n  if (entry.kind === 'divider') return '-';\n  if (entry.kind === 'heading') return `#${entry.label}`;\n  return [\n    entry.label,\n    entry.action ?? '',\n    entry.value ?? '',\n    entry.disabled ? '1' : '0',\n    String(entry.icon ?? ''),\n    JSON.stringify(entry.attributes ?? {}),\n  ].join('\\u0001');\n}\n\nfunction renderEntry(entry: PopupMenuEntry) {\n  if (entry.kind === 'divider') return <wa-divider></wa-divider>;\n  // A group title styled like the Select's group title. It is not a slotted\n  // h1-h6, whose Web Awesome group-label metrics are !important.\n  if (entry.kind === 'heading')\n    return <div class=\"kui-popup-menu__heading\">{entry.label}</div>;\n  return (\n    <wa-dropdown-item\n      {...(entry.attributes ?? {})}\n      data-action={entry.action}\n      value={entry.value}\n      disabled={entry.disabled}\n    >\n      {entry.icon ? (\n        <span slot=\"icon\" class=\"kui-popup-menu__icon\">\n          {entry.icon}\n        </span>\n      ) : null}\n      {entry.label}\n    </wa-dropdown-item>\n  );\n}\n\n/**\n * An action menu: a trigger button that opens a list of commands. Renders the\n * `wa-dropdown` root directly, so a `single` `ToolbarControlGroup` (with\n * `nestedDropdown`) or a `PopupSurface` sizes and insets it as usual. Items\n * dispatch through delegated `data-action`s; the app owns the commands and any\n * open-state reaction. Import `@kerfjs/ui/popup-menu/register` once to register\n * the Web Awesome elements.\n */\nexport function PopupMenu({\n  text,\n  label,\n  icon,\n  items,\n  placement = 'bottom-start',\n  caret = true,\n  disabled = false,\n  rootAttributes = {},\n  slot,\n}: PopupMenuProps) {\n  // Web Awesome owns the trigger and item DOM once upgraded, so the morph\n  // skips the children; the content key rebuilds the menu when they change.\n  const key = `kui-popup-menu-${contentKey([\n    text ?? '',\n    label ?? '',\n    String(icon ?? ''),\n    String(caret),\n    String(disabled),\n    ...items.map(entryKey),\n  ])}`;\n  // size=\"m\" is Web Awesome's reflected default; rendering it keeps a\n  // re-render's morph from stripping it and forcing a Lit update.\n  return (\n    <wa-dropdown\n      size=\"m\"\n      {...rootAttributes}\n      class=\"kui-popup-menu\"\n      data-component=\"popup-menu\"\n      data-key={key}\n      data-morph-skip-children\n      placement={placement}\n      slot={slot}\n    >\n      <wa-button\n        slot=\"trigger\"\n        appearance=\"plain\"\n        with-caret={caret}\n        disabled={disabled}\n      >\n        {icon}\n        {text ? (\n          <span>{text}</span>\n        ) : (\n          <span class=\"kui-popup-menu__label\">{label}</span>\n        )}\n      </wa-button>\n      {items.map(renderEntry)}\n    </wa-dropdown>\n  );\n}\n"]}

package/dist/{chunk-NE5JAOQS.js → chunk-WOUF7YXM.js}

@@ -1,6 +1,6 @@
-import { Skeleton } from './chunk-ATHXW6RP.js';
+import { Skeleton } from './chunk-AHEG27M7.js';
 import { filterDataAttributes } from './chunk-SRSJO5QE.js';
-import { em } from './chunk-WZ2GLEY4.js';
+import { em } from './chunk-2G2ZJQYK.js';
 import { jsxs, jsx } from 'kerfjs/jsx-runtime';
 
 var PROTECTED_ROOT_DATA_ATTRIBUTES = /* @__PURE__ */ new Set([
@@ -123,4 +123,4 @@ function AppTab({
 
 export { AppTab };
 
-//# sourceMappingURL=chunk-NE5JAOQS.js.map
+//# sourceMappingURL=chunk-WOUF7YXM.js.map

package/dist/{chunk-NE5JAOQS.js.map → chunk-WOUF7YXM.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/app-tab.tsx"],"names":[],"mappings":"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","file":"chunk-NE5JAOQS.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport { em } from './css-values.js';\nimport { filterDataAttributes } from './extension-attributes.js';\nimport type { KerfUiContent } from './semantic-content.js';\nimport { Skeleton } from './skeleton.js';\n\nconst PROTECTED_ROOT_DATA_ATTRIBUTES = new Set([\n  'data-component',\n  'data-action',\n  'data-tab-id',\n  'data-selected',\n  'data-tab-dragging',\n  'data-tab-drop-position',\n]);\n\ntype AppTabRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-component'?: never;\n    'data-action'?: never;\n    'data-tab-id'?: never;\n    'data-selected'?: never;\n    'data-tab-dragging'?: never;\n    'data-tab-drop-position'?: never;\n  }\n>;\n\nexport type AppTabPresentation = 'pill' | 'segmented' | 'icon-only';\nexport type AppTabSize = 'default' | 'compact';\n\nexport interface AppTabProps {\n  id: string;\n  name: string;\n  selected?: boolean;\n  closable?: boolean;\n  draggable?: boolean;\n  leading?: KerfUiContent;\n  trailing?: KerfUiContent;\n  /** Visual treatment within a TabBar. Icon-only tabs retain `name` as their accessible name. */\n  presentation?: AppTabPresentation;\n  /** Compact tabs use the 32px application-rail height. */\n  size?: AppTabSize;\n  /** Maximum visible label width in CSS pixels before ellipsis. */\n  labelMaxWidth?: number;\n  /** Decorative dormant content for the close button. Must not contain interactive descendants. */\n  closeIcon?: SafeHtml;\n  selectAction?: string;\n  closeAction?: string;\n  className?: string;\n  /** Render as an unanimated loading skeleton, disabling select/close and dragging. */\n  placeholder?: boolean;\n  /**\n   * Named and still opening: the tab is known but its content is loading.\n   * Keeps `name` visible in the quiet text color and as the tab's accessible\n   * name, shows `trailing` (for example a `LoadingSpinner`), and marks the\n   * tab `aria-busy`. Unlike `placeholder` it stays selectable — the\n   * application shows placeholder content in its panel until loading\n   * completes — while close and dragging stay disabled. Same pill geometry\n   * as the live tab, so swapping it in place does not shift the bar.\n   * `placeholder` wins when both are set.\n   */\n  pending?: boolean;\n  rootAttributes?: AppTabRootAttributes;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\nfunction CloseIcon() {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2.25\"\n      stroke-linecap=\"round\"\n    >\n      <path d=\"m7 7 10 10\"></path>\n      <path d=\"M17 7 7 17\"></path>\n    </svg>\n  );\n}\n\nexport function AppTab({\n  id,\n  name,\n  selected = false,\n  closable = true,\n  draggable = false,\n  leading,\n  trailing,\n  presentation = 'pill',\n  size = 'default',\n  labelMaxWidth,\n  closeIcon,\n  selectAction = 'select-tab',\n  closeAction = 'close-tab',\n  className = '',\n  placeholder = false,\n  pending = false,\n  rootAttributes = {},\n  slot,\n}: AppTabProps) {\n  // Both loading states disable close and dragging; a `placeholder` (unknown\n  // tab) is also unselectable and hides its name, while a `pending` (known,\n  // still opening) tab stays selectable so its panel can show placeholders.\n  const dormant = placeholder || pending;\n  const named = pending && !placeholder;\n  const keyshortcuts = [\n    closable && !dormant ? 'Delete Backspace' : '',\n    draggable && !dormant ? 'Alt+Shift+ArrowLeft Alt+Shift+ArrowRight' : '',\n  ]\n    .filter(Boolean)\n    .join(' ');\n  const extensionAttributes = filterDataAttributes(\n    rootAttributes,\n    PROTECTED_ROOT_DATA_ATTRIBUTES,\n  );\n  return (\n    <div\n      {...extensionAttributes}\n      class={`kui-app-tab ${className}`.trim()}\n      data-component=\"app-tab\"\n      data-tab-id={id}\n      data-selected={String(selected)}\n      data-presentation={presentation}\n      data-size={size}\n      data-placeholder={placeholder ? 'true' : undefined}\n      data-pending={named ? 'true' : undefined}\n      draggable={dormant ? 'false' : draggable ? 'true' : 'false'}\n      aria-busy={dormant ? 'true' : undefined}\n      style={\n        labelMaxWidth === undefined\n          ? undefined\n          : `--kui-app-tab-label-max-width:${labelMaxWidth}px`\n      }\n      slot={slot}\n    >\n      {closable && (\n        <button\n          type=\"button\"\n          tabindex=\"-1\"\n          class=\"kui-app-tab__close\"\n          data-action={dormant ? undefined : closeAction}\n          data-tab-id={id}\n          disabled={dormant || undefined}\n          aria-label={`Close ${name}`}\n          title={`Close ${name}`}\n        >\n          <span class=\"kui-app-tab__close-icon\" aria-hidden=\"true\">\n            {closeIcon ?? <CloseIcon />}\n          </span>\n        </button>\n      )}\n      <button\n        type=\"button\"\n        class=\"kui-app-tab__select\"\n        role=\"tab\"\n        aria-selected={String(selected)}\n        aria-label={presentation === 'icon-only' || named ? name : undefined}\n        aria-keyshortcuts={keyshortcuts || undefined}\n        data-action={placeholder ? undefined : selectAction}\n        data-tab-id={id}\n        disabled={placeholder || undefined}\n        tabindex={!placeholder && selected ? '0' : '-1'}\n      >\n        {leading}\n        <span\n          class=\"kui-app-tab__name\"\n          aria-hidden={presentation === 'icon-only' ? 'true' : undefined}\n        >\n          {placeholder ? <Skeleton width={em(7)} /> : name}\n        </span>\n        {closable || trailing ? (\n          <span class=\"kui-app-tab__trailing\">{trailing}</span>\n        ) : undefined}\n      </button>\n    </div>\n  );\n}\n"]}
+{"version":3,"sources":["../src/app-tab.tsx"],"names":[],"mappings":"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","file":"chunk-WOUF7YXM.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport { em } from './css-values.js';\nimport { filterDataAttributes } from './extension-attributes.js';\nimport type { KerfUiContent } from './semantic-content.js';\nimport { Skeleton } from './skeleton.js';\n\nconst PROTECTED_ROOT_DATA_ATTRIBUTES = new Set([\n  'data-component',\n  'data-action',\n  'data-tab-id',\n  'data-selected',\n  'data-tab-dragging',\n  'data-tab-drop-position',\n]);\n\ntype AppTabRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-component'?: never;\n    'data-action'?: never;\n    'data-tab-id'?: never;\n    'data-selected'?: never;\n    'data-tab-dragging'?: never;\n    'data-tab-drop-position'?: never;\n  }\n>;\n\nexport type AppTabPresentation = 'pill' | 'segmented' | 'icon-only';\nexport type AppTabSize = 'default' | 'compact';\n\nexport interface AppTabProps {\n  id: string;\n  name: string;\n  selected?: boolean;\n  closable?: boolean;\n  draggable?: boolean;\n  leading?: KerfUiContent;\n  trailing?: KerfUiContent;\n  /** Visual treatment within a TabBar. Icon-only tabs retain `name` as their accessible name. */\n  presentation?: AppTabPresentation;\n  /** Compact tabs use the 32px application-rail height. */\n  size?: AppTabSize;\n  /** Maximum visible label width in CSS pixels before ellipsis. */\n  labelMaxWidth?: number;\n  /** Decorative dormant content for the close button. Must not contain interactive descendants. */\n  closeIcon?: SafeHtml;\n  selectAction?: string;\n  closeAction?: string;\n  className?: string;\n  /** Render as an unanimated loading skeleton, disabling select/close and dragging. */\n  placeholder?: boolean;\n  /**\n   * Named and still opening: the tab is known but its content is loading.\n   * Keeps `name` visible in the quiet text color and as the tab's accessible\n   * name, shows `trailing` (for example a `LoadingSpinner`), and marks the\n   * tab `aria-busy`. Unlike `placeholder` it stays selectable — the\n   * application shows placeholder content in its panel until loading\n   * completes — while close and dragging stay disabled. Same pill geometry\n   * as the live tab, so swapping it in place does not shift the bar.\n   * `placeholder` wins when both are set.\n   */\n  pending?: boolean;\n  rootAttributes?: AppTabRootAttributes;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\nfunction CloseIcon() {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2.25\"\n      stroke-linecap=\"round\"\n    >\n      <path d=\"m7 7 10 10\"></path>\n      <path d=\"M17 7 7 17\"></path>\n    </svg>\n  );\n}\n\nexport function AppTab({\n  id,\n  name,\n  selected = false,\n  closable = true,\n  draggable = false,\n  leading,\n  trailing,\n  presentation = 'pill',\n  size = 'default',\n  labelMaxWidth,\n  closeIcon,\n  selectAction = 'select-tab',\n  closeAction = 'close-tab',\n  className = '',\n  placeholder = false,\n  pending = false,\n  rootAttributes = {},\n  slot,\n}: AppTabProps) {\n  // Both loading states disable close and dragging; a `placeholder` (unknown\n  // tab) is also unselectable and hides its name, while a `pending` (known,\n  // still opening) tab stays selectable so its panel can show placeholders.\n  const dormant = placeholder || pending;\n  const named = pending && !placeholder;\n  const keyshortcuts = [\n    closable && !dormant ? 'Delete Backspace' : '',\n    draggable && !dormant ? 'Alt+Shift+ArrowLeft Alt+Shift+ArrowRight' : '',\n  ]\n    .filter(Boolean)\n    .join(' ');\n  const extensionAttributes = filterDataAttributes(\n    rootAttributes,\n    PROTECTED_ROOT_DATA_ATTRIBUTES,\n  );\n  return (\n    <div\n      {...extensionAttributes}\n      class={`kui-app-tab ${className}`.trim()}\n      data-component=\"app-tab\"\n      data-tab-id={id}\n      data-selected={String(selected)}\n      data-presentation={presentation}\n      data-size={size}\n      data-placeholder={placeholder ? 'true' : undefined}\n      data-pending={named ? 'true' : undefined}\n      draggable={dormant ? 'false' : draggable ? 'true' : 'false'}\n      aria-busy={dormant ? 'true' : undefined}\n      style={\n        labelMaxWidth === undefined\n          ? undefined\n          : `--kui-app-tab-label-max-width:${labelMaxWidth}px`\n      }\n      slot={slot}\n    >\n      {closable && (\n        <button\n          type=\"button\"\n          tabindex=\"-1\"\n          class=\"kui-app-tab__close\"\n          data-action={dormant ? undefined : closeAction}\n          data-tab-id={id}\n          disabled={dormant || undefined}\n          aria-label={`Close ${name}`}\n          title={`Close ${name}`}\n        >\n          <span class=\"kui-app-tab__close-icon\" aria-hidden=\"true\">\n            {closeIcon ?? <CloseIcon />}\n          </span>\n        </button>\n      )}\n      <button\n        type=\"button\"\n        class=\"kui-app-tab__select\"\n        role=\"tab\"\n        aria-selected={String(selected)}\n        aria-label={presentation === 'icon-only' || named ? name : undefined}\n        aria-keyshortcuts={keyshortcuts || undefined}\n        data-action={placeholder ? undefined : selectAction}\n        data-tab-id={id}\n        disabled={placeholder || undefined}\n        tabindex={!placeholder && selected ? '0' : '-1'}\n      >\n        {leading}\n        <span\n          class=\"kui-app-tab__name\"\n          aria-hidden={presentation === 'icon-only' ? 'true' : undefined}\n        >\n          {placeholder ? <Skeleton width={em(7)} /> : name}\n        </span>\n        {closable || trailing ? (\n          <span class=\"kui-app-tab__trailing\">{trailing}</span>\n        ) : undefined}\n      </button>\n    </div>\n  );\n}\n"]}

package/dist/collapsible-panel.d.ts

@@ -1,22 +1,25 @@
 import { SafeHtml } from 'kerfjs';
-import { LucideIcon } from './lucide-icon.js';
+import { PaneConfig } from './pane.js';
+import { P as PanelSide, a as PanelToolbar, b as PanelToggle } from './panel-toolbar-C8sF-YZC.js';
+export { c as collapsiblePanelToggleIcon } from './panel-toolbar-C8sF-YZC.js';
 import { ResizableRegionSeparator, ResizableRegionCollapseMotion, ResizableRegionContentOverflow, ResizableRegionPresentation, ResizableRegionRestorePosition } from './resizable-region.js';
 import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
+import './lucide-icon.js';
 import 'lucide';
+import './toolbar.js';
+import './sides-BPSWde0A.js';
 
 /** Which edge a {@link CollapsiblePanel} docks to. */
-type CollapsiblePanelSide = 'left' | 'right' | 'bottom';
+type CollapsiblePanelSide = PanelSide;
+/** The standard toggle a panel toolbar renders (see {@link CollapsiblePanelToolbar}). */
+type CollapsiblePanelToolbarToggle = PanelToggle;
 /**
- * The standard collapse/expand icon for a panel `side` and `collapsed` state,
- * so every app's sidebars and drawers use one recognizable convention:
- * `PanelLeft*` for a left rail, `PanelRight*` for a right rail, `PanelBottom*`
- * for a bottom drawer — the `Close` glyph while open, the `Open` glyph while
- * collapsed. Exposed so an app can render its own toggle affordance.
+ * A panel's composed top toolbar. `title` and `panelOnly` groups lead it and
+ * are available only while the panel is open; `constant` groups and the
+ * standard `toggle` trail it while open and move to the app's work-area
+ * toolbar — through {@link CollapsiblePanelRelocated} — while it is collapsed.
  */
-declare function collapsiblePanelToggleIcon(side: CollapsiblePanelSide, collapsed: boolean): {
-    icon: Parameters<typeof LucideIcon>[0]['icon'];
-    name: string;
-};
+type CollapsiblePanelToolbar = PanelToolbar;
 interface CollapsiblePanelToggleProps {
     /** The panel this toggle controls. */
     side: CollapsiblePanelSide;
@@ -53,6 +56,23 @@ interface CollapsiblePanelProps {
     label?: string;
     /** Panel content. */
     children?: KerfUiContent;
+    /**
+     * The panel's top toolbar, composed so its groups follow the panel's open
+     * state. With it, `children` renders in a `Pane` below the toolbar; render
+     * {@link CollapsiblePanelRelocated} in the app's work-area toolbar so the
+     * `constant` groups and toggle stay reachable while the panel is collapsed.
+     */
+    toolbar?: CollapsiblePanelToolbar;
+    /** Optional bottom toolbar under a `toolbar` panel's content. */
+    footer?: KerfUiContent;
+    /**
+     * Configuration for a `toolbar` panel's `Pane` (`contentElement`,
+     * `contentLabel`, `separators`, `safeAreaEdges`) — for example
+     * `{ contentElement: 'nav', contentLabel: 'Sections' }` for a navigation
+     * rail. Omitted or `undefined` fields keep the `Pane` defaults. Ignored
+     * without a `toolbar`, where `children` renders as given.
+     */
+    pane?: PaneConfig;
     separator?: ResizableRegionSeparator;
     collapseMotion?: ResizableRegionCollapseMotion;
     contentOverflow?: ResizableRegionContentOverflow;
@@ -78,6 +98,24 @@ interface CollapsiblePanelProps {
  * and persistence semantics, and with `CollapsiblePanelToggle` for the standard
  * affordance. See `ui/docs/collapsible-panel.md` and `docs/23-app-layouts.md`.
  */
-declare function CollapsiblePanel({ id, side, collapsed, size, label, children, separator, collapseMotion, contentOverflow, presentation, restoreControl, restorePosition, className, }: CollapsiblePanelProps): SafeHtml;
+declare function CollapsiblePanel({ id, side, collapsed, size, label, children, toolbar, footer, pane, separator, collapseMotion, contentOverflow, presentation, restoreControl, restorePosition, className, }: CollapsiblePanelProps): SafeHtml;
+interface CollapsiblePanelRelocatedProps {
+    /** The panel's `id`. */
+    panelId: string;
+    side: CollapsiblePanelSide;
+    /** The panel's current collapsed state. */
+    collapsed: boolean;
+    /** The same `toolbar` the panel receives. */
+    toolbar: CollapsiblePanelToolbar;
+}
+/**
+ * A collapsed {@link CollapsiblePanel}'s `constant` groups and standard
+ * toggle, for the app's work-area toolbar — nothing while the panel is open.
+ * Put it first in the leading zone for a left rail, last in the trailing zone
+ * for a right rail, and last in a bottom toolbar (or a `FloatingToolbar`
+ * `restoreControl`) for a bottom drawer. `wireSidebar` hands focus to it when
+ * the panel closes from its own toggle.
+ */
+declare function CollapsiblePanelRelocated({ panelId, side, collapsed, toolbar, }: CollapsiblePanelRelocatedProps): SafeHtml;
 
-export { CollapsiblePanel, type CollapsiblePanelProps, type CollapsiblePanelSide, CollapsiblePanelToggle, type CollapsiblePanelToggleProps, collapsiblePanelToggleIcon };
+export { CollapsiblePanel, type CollapsiblePanelProps, CollapsiblePanelRelocated, type CollapsiblePanelRelocatedProps, type CollapsiblePanelSide, CollapsiblePanelToggle, type CollapsiblePanelToggleProps, type CollapsiblePanelToolbar, type CollapsiblePanelToolbarToggle };

package/dist/collapsible-panel.js

@@ -1,14 +1,18 @@
+import { collapsiblePanelToggleIcon, composedPanelBody, relocatedPanelGroups } from './chunk-V65EOWNF.js';
+export { collapsiblePanelToggleIcon } from './chunk-V65EOWNF.js';
+
+
+
 import { LucideIcon } from './chunk-4R777DUZ.js';
-import { PanelLeftOpen, PanelLeftClose, PanelRightOpen, PanelRightClose, PanelBottomOpen, PanelBottomClose } from 'lucide';
+
 import { jsx, jsxs, Fragment } from 'kerfjs/jsx-runtime';
 
-function collapsiblePanelToggleIcon(side, collapsed) {
-  if (side === "left")
-    return collapsed ? { icon: PanelLeftOpen, name: "panel-left-open" } : { icon: PanelLeftClose, name: "panel-left-close" };
-  if (side === "right")
-    return collapsed ? { icon: PanelRightOpen, name: "panel-right-open" } : { icon: PanelRightClose, name: "panel-right-close" };
-  return collapsed ? { icon: PanelBottomOpen, name: "panel-bottom-open" } : { icon: PanelBottomClose, name: "panel-bottom-close" };
-}
+var toggleAttributes = (panelId) => ({
+  "data-collapsible-target": panelId,
+  // Keyed, so the morph never reuses a (possibly focused) toggle's button for
+  // another control as the toggle moves between toolbars.
+  "data-key": `${panelId}-toggle`
+});
 function CollapsiblePanelToggle({
   side,
   collapsed,
@@ -41,6 +45,9 @@ function CollapsiblePanel({
   size,
   label,
   children,
+  toolbar,
+  footer,
+  pane,
   separator = "auto",
   collapseMotion = "slide",
   contentOverflow = "clip",
@@ -67,7 +74,15 @@ function CollapsiblePanel({
         "aria-hidden": collapsed || presentation === "hidden" ? "true" : void 0,
         inert: collapsed,
         style: size ? `${sizeVar}: ${size}px` : void 0,
-        children: /* @__PURE__ */ jsx("div", { class: "kui-collapsible-panel__content", children })
+        children: /* @__PURE__ */ jsx("div", { class: "kui-collapsible-panel__content", children: toolbar ? composedPanelBody({
+          toolbar,
+          side,
+          collapsed,
+          attributes: toggleAttributes(id),
+          pane,
+          footer,
+          content: children
+        }) : children })
       }
     ),
     collapsed && restoreControl && presentation !== "hidden" && /* @__PURE__ */ jsx(
@@ -81,7 +96,20 @@ function CollapsiblePanel({
     )
   ] });
 }
+function CollapsiblePanelRelocated({
+  panelId,
+  side,
+  collapsed,
+  toolbar
+}) {
+  return /* @__PURE__ */ jsx(Fragment, { children: relocatedPanelGroups(
+    toolbar,
+    side,
+    collapsed,
+    toggleAttributes(panelId)
+  ) });
+}
 
-export { CollapsiblePanel, CollapsiblePanelToggle, collapsiblePanelToggleIcon };
+export { CollapsiblePanel, CollapsiblePanelRelocated, CollapsiblePanelToggle };
 
 //# sourceMappingURL=collapsible-panel.js.map

package/dist/collapsible-panel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/collapsible-panel.tsx"],"names":[],"mappings":"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","file":"collapsible-panel.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\nimport {\n  PanelBottomClose,\n  PanelBottomOpen,\n  PanelLeftClose,\n  PanelLeftOpen,\n  PanelRightClose,\n  PanelRightOpen,\n} from 'lucide';\n\nimport { LucideIcon } from './lucide-icon.js';\nimport type {\n  ResizableRegionCollapseMotion,\n  ResizableRegionContentOverflow,\n  ResizableRegionPresentation,\n  ResizableRegionRestorePosition,\n  ResizableRegionSeparator,\n} from './resizable-region.js';\nimport type { KerfUiContent } from './semantic-content.js';\n\n/** Which edge a {@link CollapsiblePanel} docks to. */\nexport type CollapsiblePanelSide = 'left' | 'right' | 'bottom';\n\n/**\n * The standard collapse/expand icon for a panel `side` and `collapsed` state,\n * so every app's sidebars and drawers use one recognizable convention:\n * `PanelLeft*` for a left rail, `PanelRight*` for a right rail, `PanelBottom*`\n * for a bottom drawer — the `Close` glyph while open, the `Open` glyph while\n * collapsed. Exposed so an app can render its own toggle affordance.\n */\nexport function collapsiblePanelToggleIcon(\n  side: CollapsiblePanelSide,\n  collapsed: boolean,\n): { icon: Parameters<typeof LucideIcon>[0]['icon']; name: string } {\n  if (side === 'left')\n    return collapsed\n      ? { icon: PanelLeftOpen, name: 'panel-left-open' }\n      : { icon: PanelLeftClose, name: 'panel-left-close' };\n  if (side === 'right')\n    return collapsed\n      ? { icon: PanelRightOpen, name: 'panel-right-open' }\n      : { icon: PanelRightClose, name: 'panel-right-close' };\n  return collapsed\n    ? { icon: PanelBottomOpen, name: 'panel-bottom-open' }\n    : { icon: PanelBottomClose, name: 'panel-bottom-close' };\n}\n\nexport interface CollapsiblePanelToggleProps {\n  /** The panel this toggle controls. */\n  side: CollapsiblePanelSide;\n  /** The panel's current collapsed state (drives the icon direction). */\n  collapsed: boolean;\n  /** `data-action` the button carries so `wireSidebar` can delegate its click. */\n  action: string;\n  /** The panel id the button targets (`data-tab-panel`-style: `data-collapsible-panel`). */\n  panelId?: string;\n  /** Accessible label; defaults to \"Collapse\"/\"Expand\". */\n  label?: string;\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/**\n * A standard collapse/expand toggle button for a {@link CollapsiblePanel}: the\n * recognizable per-side icon (see {@link collapsiblePanelToggleIcon}) plus the\n * `data-action` / `aria-expanded` `wireSidebar` reads. Placement is the app's —\n * put it in the panel's own header (to collapse) and somewhere always-visible\n * (to expand while collapsed).\n */\nexport function CollapsiblePanelToggle({\n  side,\n  collapsed,\n  action,\n  panelId,\n  label,\n  className = '',\n  slot,\n}: CollapsiblePanelToggleProps) {\n  const glyph = collapsiblePanelToggleIcon(side, collapsed);\n  const accessible = label ?? (collapsed ? 'Expand' : 'Collapse');\n  return (\n    <button\n      type=\"button\"\n      class={`kui-collapsible-panel__toggle ${className}`.trim()}\n      data-action={action}\n      data-collapsible-target={panelId}\n      aria-expanded={String(!collapsed)}\n      aria-label={accessible}\n      slot={slot}\n    >\n      <LucideIcon icon={glyph.icon} name={glyph.name} />\n    </button>\n  );\n}\n\nexport interface CollapsiblePanelProps {\n  /** A stable id for the panel — `wireSidebar` targets it and toggles reference it. */\n  id: string;\n  /** Which edge the panel docks to: a left/right rail or a bottom drawer. */\n  side: CollapsiblePanelSide;\n  /** Whether the panel is currently collapsed (the app owns this signal). */\n  collapsed?: boolean;\n  /** Rail width or drawer height in px. Overrides the CSS default. */\n  size?: number;\n  /** Accessible label for the panel region. */\n  label?: string;\n  /** Panel content. */\n  children?: KerfUiContent;\n  separator?: ResizableRegionSeparator;\n  collapseMotion?: ResizableRegionCollapseMotion;\n  contentOverflow?: ResizableRegionContentOverflow;\n  presentation?: ResizableRegionPresentation;\n  /** Control shown while collapsed, in a safe-area-aware corner of the panel's container (not the viewport). */\n  restoreControl?: SafeHtml;\n  restorePosition?: ResizableRegionRestorePosition;\n  className?: string;\n}\n\n/**\n * A standalone collapsible side rail or bottom drawer, outside the full\n * {@link Workbench} shell. It owns only the presentation: a fixed-size content\n * area that stays laid out while the panel's track snaps to zero and the content\n * slides out via `transform` (one reflow, composited — the same technique\n * `Workbench` and the catalog sidebar use). Bottom-drawer content stays anchored\n * to the panel's fixed bottom edge, so the track cannot move its layout origin\n * underneath the transform transition. A collapsed panel renders `inert` (with\n * `aria-hidden`), so neither Tab, pointer, nor assistive technology reaches\n * content that has slid out of view; its `restoreControl` renders outside the\n * panel and stays reachable.\n * The app owns the `collapsed` signal;\n * pair it with `wireSidebar` for the toggle, focus, compact-overlay, keyboard,\n * and persistence semantics, and with `CollapsiblePanelToggle` for the standard\n * affordance. See `ui/docs/collapsible-panel.md` and `docs/23-app-layouts.md`.\n */\nexport function CollapsiblePanel({\n  id,\n  side,\n  collapsed = false,\n  size,\n  label,\n  children,\n  separator = 'auto',\n  collapseMotion = 'slide',\n  contentOverflow = 'clip',\n  presentation = 'inline',\n  restoreControl,\n  restorePosition = side === 'left' ? 'bottom-start' : 'bottom-end',\n  className = '',\n}: CollapsiblePanelProps) {\n  const sizeVar =\n    side === 'bottom'\n      ? '--kui-collapsible-panel-height'\n      : '--kui-collapsible-panel-width';\n  return (\n    <>\n      <aside\n        class={`kui-collapsible-panel kui-collapsible-panel--${side} ${className}`.trim()}\n        data-component=\"collapsible-panel\"\n        data-collapsible-panel={id}\n        data-side={side}\n        data-collapsed={String(collapsed)}\n        data-separator={separator}\n        data-collapse-motion={collapseMotion}\n        data-content-overflow={contentOverflow}\n        data-presentation={presentation}\n        aria-label={label || undefined}\n        aria-hidden={\n          collapsed || presentation === 'hidden' ? 'true' : undefined\n        }\n        inert={collapsed}\n        style={size ? `${sizeVar}: ${size}px` : undefined}\n      >\n        <div class=\"kui-collapsible-panel__content\">{children}</div>\n      </aside>\n      {collapsed && restoreControl && presentation !== 'hidden' && (\n        <div\n          class=\"kui-collapsible-panel__restore\"\n          data-panel-restore={id}\n          data-position={restorePosition}\n        >\n          {restoreControl}\n        </div>\n      )}\n    </>\n  );\n}\n"]}
+{"version":3,"sources":["../src/collapsible-panel.tsx"],"names":[],"mappings":"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","file":"collapsible-panel.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport { LucideIcon } from './lucide-icon.js';\nimport type { PaneConfig } from './pane.js';\nimport {\n  collapsiblePanelToggleIcon,\n  composedPanelBody,\n  type PanelSide,\n  type PanelToggle,\n  type PanelToggleAttributes,\n  type PanelToolbar,\n  relocatedPanelGroups,\n} from './panel-toolbar.js';\nimport type {\n  ResizableRegionCollapseMotion,\n  ResizableRegionContentOverflow,\n  ResizableRegionPresentation,\n  ResizableRegionRestorePosition,\n  ResizableRegionSeparator,\n} from './resizable-region.js';\nimport type { KerfUiContent } from './semantic-content.js';\n\nexport { collapsiblePanelToggleIcon } from './panel-toolbar.js';\n\n/** Which edge a {@link CollapsiblePanel} docks to. */\nexport type CollapsiblePanelSide = PanelSide;\n\n/** The standard toggle a panel toolbar renders (see {@link CollapsiblePanelToolbar}). */\nexport type CollapsiblePanelToolbarToggle = PanelToggle;\n\n/**\n * A panel's composed top toolbar. `title` and `panelOnly` groups lead it and\n * are available only while the panel is open; `constant` groups and the\n * standard `toggle` trail it while open and move to the app's work-area\n * toolbar — through {@link CollapsiblePanelRelocated} — while it is collapsed.\n */\nexport type CollapsiblePanelToolbar = PanelToolbar;\n\n/** A CollapsiblePanel toggle's `wireSidebar` hook. */\nconst toggleAttributes = (panelId: string): PanelToggleAttributes => ({\n  'data-collapsible-target': panelId,\n  // Keyed, so the morph never reuses a (possibly focused) toggle's button for\n  // another control as the toggle moves between toolbars.\n  'data-key': `${panelId}-toggle`,\n});\n\nexport interface CollapsiblePanelToggleProps {\n  /** The panel this toggle controls. */\n  side: CollapsiblePanelSide;\n  /** The panel's current collapsed state (drives the icon direction). */\n  collapsed: boolean;\n  /** `data-action` the button carries so `wireSidebar` can delegate its click. */\n  action: string;\n  /** The panel id the button targets (`data-tab-panel`-style: `data-collapsible-panel`). */\n  panelId?: string;\n  /** Accessible label; defaults to \"Collapse\"/\"Expand\". */\n  label?: string;\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/**\n * A standard collapse/expand toggle button for a {@link CollapsiblePanel}: the\n * recognizable per-side icon (see {@link collapsiblePanelToggleIcon}) plus the\n * `data-action` / `aria-expanded` `wireSidebar` reads. Placement is the app's —\n * put it in the panel's own header (to collapse) and somewhere always-visible\n * (to expand while collapsed).\n */\nexport function CollapsiblePanelToggle({\n  side,\n  collapsed,\n  action,\n  panelId,\n  label,\n  className = '',\n  slot,\n}: CollapsiblePanelToggleProps) {\n  const glyph = collapsiblePanelToggleIcon(side, collapsed);\n  const accessible = label ?? (collapsed ? 'Expand' : 'Collapse');\n  return (\n    <button\n      type=\"button\"\n      class={`kui-collapsible-panel__toggle ${className}`.trim()}\n      data-action={action}\n      data-collapsible-target={panelId}\n      aria-expanded={String(!collapsed)}\n      aria-label={accessible}\n      slot={slot}\n    >\n      <LucideIcon icon={glyph.icon} name={glyph.name} />\n    </button>\n  );\n}\n\nexport interface CollapsiblePanelProps {\n  /** A stable id for the panel — `wireSidebar` targets it and toggles reference it. */\n  id: string;\n  /** Which edge the panel docks to: a left/right rail or a bottom drawer. */\n  side: CollapsiblePanelSide;\n  /** Whether the panel is currently collapsed (the app owns this signal). */\n  collapsed?: boolean;\n  /** Rail width or drawer height in px. Overrides the CSS default. */\n  size?: number;\n  /** Accessible label for the panel region. */\n  label?: string;\n  /** Panel content. */\n  children?: KerfUiContent;\n  /**\n   * The panel's top toolbar, composed so its groups follow the panel's open\n   * state. With it, `children` renders in a `Pane` below the toolbar; render\n   * {@link CollapsiblePanelRelocated} in the app's work-area toolbar so the\n   * `constant` groups and toggle stay reachable while the panel is collapsed.\n   */\n  toolbar?: CollapsiblePanelToolbar;\n  /** Optional bottom toolbar under a `toolbar` panel's content. */\n  footer?: KerfUiContent;\n  /**\n   * Configuration for a `toolbar` panel's `Pane` (`contentElement`,\n   * `contentLabel`, `separators`, `safeAreaEdges`) — for example\n   * `{ contentElement: 'nav', contentLabel: 'Sections' }` for a navigation\n   * rail. Omitted or `undefined` fields keep the `Pane` defaults. Ignored\n   * without a `toolbar`, where `children` renders as given.\n   */\n  pane?: PaneConfig;\n  separator?: ResizableRegionSeparator;\n  collapseMotion?: ResizableRegionCollapseMotion;\n  contentOverflow?: ResizableRegionContentOverflow;\n  presentation?: ResizableRegionPresentation;\n  /** Control shown while collapsed, in a safe-area-aware corner of the panel's container (not the viewport). */\n  restoreControl?: SafeHtml;\n  restorePosition?: ResizableRegionRestorePosition;\n  className?: string;\n}\n\n/**\n * A standalone collapsible side rail or bottom drawer, outside the full\n * {@link Workbench} shell. It owns only the presentation: a fixed-size content\n * area that stays laid out while the panel's track snaps to zero and the content\n * slides out via `transform` (one reflow, composited — the same technique\n * `Workbench` and the catalog sidebar use). Bottom-drawer content stays anchored\n * to the panel's fixed bottom edge, so the track cannot move its layout origin\n * underneath the transform transition. A collapsed panel renders `inert` (with\n * `aria-hidden`), so neither Tab, pointer, nor assistive technology reaches\n * content that has slid out of view; its `restoreControl` renders outside the\n * panel and stays reachable.\n * The app owns the `collapsed` signal;\n * pair it with `wireSidebar` for the toggle, focus, compact-overlay, keyboard,\n * and persistence semantics, and with `CollapsiblePanelToggle` for the standard\n * affordance. See `ui/docs/collapsible-panel.md` and `docs/23-app-layouts.md`.\n */\nexport function CollapsiblePanel({\n  id,\n  side,\n  collapsed = false,\n  size,\n  label,\n  children,\n  toolbar,\n  footer,\n  pane,\n  separator = 'auto',\n  collapseMotion = 'slide',\n  contentOverflow = 'clip',\n  presentation = 'inline',\n  restoreControl,\n  restorePosition = side === 'left' ? 'bottom-start' : 'bottom-end',\n  className = '',\n}: CollapsiblePanelProps) {\n  const sizeVar =\n    side === 'bottom'\n      ? '--kui-collapsible-panel-height'\n      : '--kui-collapsible-panel-width';\n  return (\n    <>\n      <aside\n        class={`kui-collapsible-panel kui-collapsible-panel--${side} ${className}`.trim()}\n        data-component=\"collapsible-panel\"\n        data-collapsible-panel={id}\n        data-side={side}\n        data-collapsed={String(collapsed)}\n        data-separator={separator}\n        data-collapse-motion={collapseMotion}\n        data-content-overflow={contentOverflow}\n        data-presentation={presentation}\n        aria-label={label || undefined}\n        aria-hidden={\n          collapsed || presentation === 'hidden' ? 'true' : undefined\n        }\n        inert={collapsed}\n        style={size ? `${sizeVar}: ${size}px` : undefined}\n      >\n        <div class=\"kui-collapsible-panel__content\">\n          {toolbar\n            ? composedPanelBody({\n                toolbar,\n                side,\n                collapsed,\n                attributes: toggleAttributes(id),\n                pane,\n                footer,\n                content: children,\n              })\n            : children}\n        </div>\n      </aside>\n      {collapsed && restoreControl && presentation !== 'hidden' && (\n        <div\n          class=\"kui-collapsible-panel__restore\"\n          data-panel-restore={id}\n          data-position={restorePosition}\n        >\n          {restoreControl}\n        </div>\n      )}\n    </>\n  );\n}\n\nexport interface CollapsiblePanelRelocatedProps {\n  /** The panel's `id`. */\n  panelId: string;\n  side: CollapsiblePanelSide;\n  /** The panel's current collapsed state. */\n  collapsed: boolean;\n  /** The same `toolbar` the panel receives. */\n  toolbar: CollapsiblePanelToolbar;\n}\n\n/**\n * A collapsed {@link CollapsiblePanel}'s `constant` groups and standard\n * toggle, for the app's work-area toolbar — nothing while the panel is open.\n * Put it first in the leading zone for a left rail, last in the trailing zone\n * for a right rail, and last in a bottom toolbar (or a `FloatingToolbar`\n * `restoreControl`) for a bottom drawer. `wireSidebar` hands focus to it when\n * the panel closes from its own toggle.\n */\nexport function CollapsiblePanelRelocated({\n  panelId,\n  side,\n  collapsed,\n  toolbar,\n}: CollapsiblePanelRelocatedProps) {\n  return (\n    <>\n      {relocatedPanelGroups(\n        toolbar,\n        side,\n        collapsed,\n        toggleAttributes(panelId),\n      )}\n    </>\n  );\n}\n"]}

package/dist/content-item.d.ts

@@ -0,0 +1,46 @@
+import * as kerfjs from 'kerfjs';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
+
+/** Whether the item's always-reserved 1px border is transparent or visible. */
+type ContentItemFrame = 'none' | 'framed';
+/** Corner shape: the 12px rounded rectangle or the 22px pill. */
+type ContentItemShape = 'rounded' | 'pill';
+type ContentItemRootAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
+    'data-component'?: never;
+}>;
+interface ContentItemProps {
+    /** Item content; a plain string is allowed for bare copy. */
+    children?: KerfUiContent | string;
+    /**
+     * `framed` paints the standard neutral border in the 1px the item always
+     * reserves, so framing never changes geometry. Frame only an item that
+     * marks a real distinction. Defaults to `none` (transparent border).
+     */
+    frame?: ContentItemFrame;
+    /** Corner shape. Defaults to `rounded`. */
+    shape?: ContentItemShape;
+    /**
+     * Names the item as a distinct region (`role="region"`). Omit it for an
+     * ordinary item, which stays a non-landmark grouping.
+     */
+    ariaLabel?: string;
+    /**
+     * Makes the item a programmatic focus target (`tabindex="-1"`, never a tab
+     * stop), for example the preferred initial focus of a NavStack view when
+     * combined with `data-nav-focus` in `rootAttributes`.
+     */
+    focusTarget?: boolean;
+    className?: string;
+    /** Safe `data-*` metadata; component-owned structural attributes stay protected. */
+    rootAttributes?: ContentItemRootAttributes;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
+}
+/**
+ * One self-contained `.kui-content` child: an 8px inline margin, a real 1px
+ * border (transparent unless `framed`), 8px padding, and a rounded or pill
+ * radius. It owns that whole geometry, so wrappers must not add more.
+ */
+declare function ContentItem({ children, frame, shape, ariaLabel, focusTarget, className, rootAttributes, slot, }: ContentItemProps): kerfjs.SafeHtml;
+
+export { ContentItem, type ContentItemFrame, type ContentItemProps, type ContentItemShape };

package/dist/content-item.js

@@ -0,0 +1,4 @@
+export { ContentItem } from './chunk-MA73TA6D.js';
+
+
+//# sourceMappingURL=content-item.js.map

package/dist/content-item.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"content-item.js"}

package/dist/css-values.d.ts

@@ -41,9 +41,8 @@ type CssColor = CssValue & {
  * a surface. Mint it with {@link uiColor} and a foreground token name
  * ({@link UiForegroundColorName}) or with {@link foregroundColorVar}. It is a
  * {@link CssColor}, but a plain `CssColor` is not a foreground color: fill,
- * border, and surface tokens (including the `success` / `warning` / `danger` /
- * `pop` fill aliases) are pale backgrounds that leave a foreground nearly
- * invisible.
+ * border, and surface tokens are pale backgrounds that leave a foreground
+ * nearly invisible.
  */
 type CssForegroundColor = CssColor & {
     readonly [cssForegroundColorBrand]: 'CssForegroundColor';
@@ -53,16 +52,11 @@ type CssFlexBasis = CssLength | 'auto' | 'content' | 'min-content' | 'max-conten
 type CssSizeKeyword = 'auto' | 'min-content' | 'max-content' | 'fit-content';
 /** A complete width/height value accepted by dimension-valued UI props. */
 type CssSize = CssLength | CssSizeKeyword;
-declare const uiColorNames: readonly ["accent", "accent-text", "border", "border-quiet", "brand-border-loud", "brand-border-normal", "brand-border-quiet", "brand-fill-loud", "brand-fill-normal", "brand-fill-quiet", "brand-on-fill", "brand-on-loud", "brand-on-normal", "brand-on-quiet", "danger", "danger-border-loud", "danger-border-normal", "danger-border-quiet", "danger-fill-loud", "danger-fill-normal", "danger-fill-quiet", "danger-on-fill", "danger-on-loud", "danger-on-normal", "danger-on-quiet", "danger-text", "neutral-border-loud", "neutral-border-normal", "neutral-border-quiet", "neutral-fill-loud", "neutral-fill-normal", "neutral-fill-quiet", "neutral-on-loud", "neutral-on-normal", "neutral-on-quiet", "pop", "pop-border-loud", "pop-border-normal", "pop-border-quiet", "pop-fill-loud", "pop-fill-normal", "pop-fill-quiet", "pop-on-fill", "pop-on-loud", "pop-on-normal", "pop-on-quiet", "pop-text", "success", "success-border-loud", "success-border-normal", "success-border-quiet", "success-fill-loud", "success-fill-normal", "success-fill-quiet", "success-on-fill", "success-on-loud", "success-on-normal", "success-on-quiet", "success-text", "surface", "surface-lowered", "surface-raised", "text", "text-link", "text-quiet", "warning", "warning-border-loud", "warning-border-normal", "warning-border-quiet", "warning-fill-loud", "warning-fill-normal", "warning-fill-quiet", "warning-on-fill", "warning-on-loud", "warning-on-normal", "warning-on-quiet", "warning-text"];
+declare const uiColorNames: readonly ["brand-border-loud", "brand-border-normal", "brand-border-quiet", "brand-fill-loud", "brand-fill-normal", "brand-fill-quiet", "brand-on-fill", "brand-on-loud", "brand-on-normal", "brand-on-quiet", "danger-border-loud", "danger-border-normal", "danger-border-quiet", "danger-fill-loud", "danger-fill-normal", "danger-fill-quiet", "danger-on-fill", "danger-on-loud", "danger-on-normal", "danger-on-quiet", "neutral-border-loud", "neutral-border-normal", "neutral-border-quiet", "neutral-fill-loud", "neutral-fill-normal", "neutral-fill-quiet", "neutral-on-loud", "neutral-on-normal", "neutral-on-quiet", "pop-border-loud", "pop-border-normal", "pop-border-quiet", "pop-fill-loud", "pop-fill-normal", "pop-fill-quiet", "pop-on-fill", "pop-on-loud", "pop-on-normal", "pop-on-quiet", "success-border-loud", "success-border-normal", "success-border-quiet", "success-fill-loud", "success-fill-normal", "success-fill-quiet", "success-on-fill", "success-on-loud", "success-on-normal", "success-on-quiet", "surface", "surface-lowered", "surface-raised", "text", "text-link", "text-quiet", "warning-border-loud", "warning-border-normal", "warning-border-quiet", "warning-fill-loud", "warning-fill-normal", "warning-fill-quiet", "warning-on-fill", "warning-on-loud", "warning-on-normal", "warning-on-quiet"];
 /** Names of the public `--kui-color-*` semantic tokens. */
 type UiColorName = (typeof uiColorNames)[number];
-/**
- * The semantic tokens that paint a foreground: the `*-on-*` roles, the text
- * roles, and their `*-text` compatibility aliases. The bare `success`,
- * `warning`, `danger`, `pop`, and `accent` aliases are quiet fills, not
- * foregrounds.
- */
-type UiForegroundColorName = Extract<UiColorName, `${string}-on-${string}` | `${string}-text` | 'text' | 'text-quiet' | 'text-link'>;
+/** The semantic tokens that paint a foreground: the `*-on-*` and text roles. */
+type UiForegroundColorName = Extract<UiColorName, `${string}-on-${string}` | 'text' | 'text-quiet' | 'text-link'>;
 /** Kerf UI's complete spacing-token vocabulary. `s` and `xl` are exceptions. */
 type UiSpaceName = 'none' | '2xs' | 'xs' | 's' | 'm' | 'l' | 'xl';
 /** Create a complete pixel length. */

package/dist/css-values.js

@@ -1,3 +1,3 @@
-export { calc, colorVar, em, flex, foregroundColorVar, lengthVar, pct, plus, px, rem, remify, space, uiColor } from './chunk-WZ2GLEY4.js';
+export { calc, colorVar, em, flex, foregroundColorVar, lengthVar, pct, plus, px, rem, remify, space, uiColor } from './chunk-2G2ZJQYK.js';
 
 //# sourceMappingURL=css-values.js.map

package/dist/disclosure-arrow.d.ts

@@ -1,4 +1,5 @@
 import { SafeHtml } from 'kerfjs';
+import { CssLength } from './css-values.js';
 
 type DisclosureDirection = 'up' | 'down' | 'left' | 'right';
 interface DisclosureArrowProps {
@@ -7,10 +8,12 @@ interface DisclosureArrowProps {
     closedDirection?: DisclosureDirection;
     /** Replacement icons should use right as their unrotated orientation. */
     icon?: SafeHtml;
+    /** Typed box size for the square visual. Default: `remify(18px)`. */
+    size?: CssLength;
     className?: string;
     /** Native named-slot assignment when composed inside a web component. */
     slot?: string;
 }
-declare function DisclosureArrow({ open, openDirection, closedDirection, icon, className, slot, }: DisclosureArrowProps): SafeHtml;
+declare function DisclosureArrow({ open, openDirection, closedDirection, icon, size, className, slot, }: DisclosureArrowProps): SafeHtml;
 
 export { DisclosureArrow, type DisclosureArrowProps, type DisclosureDirection };

package/dist/disclosure-arrow.js

@@ -1,4 +1,4 @@
-export { DisclosureArrow } from './chunk-HMQ2ZDGG.js';
+export { DisclosureArrow } from './chunk-KROD7KZK.js';
 
 
 //# sourceMappingURL=disclosure-arrow.js.map