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

package/dist/chunk-UCKKT6KO.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/grid.tsx"],"names":[],"mappings":";;;;AAUA,IAAM,uBAAA,uBAA8B,GAAA,CAAI;AAAA,EACtC,gBAAA;AAAA,EACA,cAAA;AAAA,EACA,uBAAA;AAAA,EACA,WAAA;AAAA,EACA;AACF,CAAC,CAAA;AAYD,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;AAoCO,SAAS,IAAA,CAAK;AAAA,EACnB,QAAA;AAAA,EACA,OAAA;AAAA,EACA,cAAA;AAAA,EACA,GAAA,GAAM,IAAA;AAAA,EACN,IAAA,GAAO,KAAA;AAAA,EACP,IAAA,GAAO,KAAA;AAAA,EACP,SAAA,GAAY,EAAA;AAAA,EACZ,iBAAiB,EAAC;AAAA,EAClB;AACF,CAAA,EAAc;AACZ,EAAA,IAAI,cAAA,KAAmB,MAAA,IAAa,OAAA,KAAY,MAAA,EAAW;AACzD,IAAA,MAAM,IAAI,UAAA;AAAA,MACR;AAAA,KACF;AAAA,EACF;AACA,EAAA,IACE,cAAA,KAAmB,MAAA,KAClB,OAAA,KAAY,MAAA,IAAa,CAAC,OAAO,aAAA,CAAc,OAAO,CAAA,IAAK,OAAA,GAAU,CAAA,CAAA,EACtE;AACA,IAAA,MAAM,IAAI,WAAW,8CAA8C,CAAA;AAAA,EACrE;AAEA,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,OAAA,KAAY,MAAA,GAAY,EAAA,GAAK,CAAA,oBAAA,EAAuB,OAAO,CAAA,CAAA;AAAA,IAC3D,cAAA,KAAmB,MAAA,GACf,EAAA,GACA,CAAA,6BAAA,EAAgC,cAAc,CAAA,CAAA;AAAA,IAClD,mBAAmB,QAAQ,CAAA,CAAA;AAAA,IAC3B,SAAA,GAAY,CAAA,iBAAA,EAAoB,SAAS,CAAA,CAAA,GAAK;AAAA,GAChD,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,SAAA,EAAY,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MACpC,gBAAA,EAAe,MAAA;AAAA,MACf,cAAA,EAAc,OAAA,KAAY,MAAA,GAAY,MAAA,GAAY,OAAO,OAAO,CAAA;AAAA,MAChE,uBAAA,EAAuB,cAAA,KAAmB,MAAA,GAAY,MAAA,GAAY,MAAA;AAAA,MAClE,WAAA,EAAW,MAAA,CAAO,OAAA,CAAQ,IAAI,CAAC,CAAA;AAAA,MAC/B,WAAA,EAAW,OAAO,MAAA,GAAS,MAAA;AAAA,MAC3B,KAAA;AAAA,MACA,IAAA;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ","file":"chunk-UCKKT6KO.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 type { KerfUiContent } from './semantic-content.js';\n\nconst gridProtectedAttributes = new Set([\n  'data-component',\n  'data-columns',\n  'data-min-column-width',\n  'data-flex',\n  'data-fill',\n]);\n\ntype GridRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-component'?: never;\n    'data-columns'?: never;\n    'data-min-column-width'?: never;\n    'data-flex'?: never;\n    'data-fill'?: never;\n  }\n>;\n\nconst spaceNames: readonly UiSpaceName[] = [\n  'none',\n  '2xs',\n  'xs',\n  's',\n  'm',\n  'l',\n  'xl',\n];\n\ninterface GridCommonProps {\n  children?: KerfUiContent;\n  /** A named UI spacing token or typed CSS length. Defaults to xs. */\n  gap?: UiSpaceName | CssLength;\n  /** Allow this grid 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 grid is that parent's layout root. Inside a\n   * flex layout use `flex` instead. Defaults to false.\n   */\n  fill?: boolean;\n  className?: string;\n  /** Safe `data-*` metadata; Grid-owned structural attributes remain protected. */\n  rootAttributes?: GridRootAttributes;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\nexport type GridProps = GridCommonProps &\n  (\n    | {\n        /** Number of equal-width columns. Must be a positive safe integer. */\n        columns: number;\n        minColumnWidth?: never;\n      }\n    | {\n        columns?: never;\n        /** Fit equal columns of at least this width; collapse as the container narrows. */\n        minColumnWidth: CssLength;\n      }\n  );\n\n/** Render equal tracks with a fixed count or a responsive minimum width. */\nexport function Grid({\n  children,\n  columns,\n  minColumnWidth,\n  gap = 'xs',\n  flex = false,\n  fill = false,\n  className = '',\n  rootAttributes = {},\n  slot,\n}: GridProps) {\n  if (minColumnWidth !== undefined && columns !== undefined) {\n    throw new RangeError(\n      'Grid columns and minColumnWidth are mutually exclusive',\n    );\n  }\n  if (\n    minColumnWidth === undefined &&\n    (columns === undefined || !Number.isSafeInteger(columns) || columns < 1)\n  ) {\n    throw new RangeError('Grid columns must be a positive safe integer');\n  }\n\n  const safeRootAttributes = filterDataAttributes(\n    rootAttributes,\n    gridProtectedAttributes,\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    columns === undefined ? '' : `--_kui-grid-columns:${columns}`,\n    minColumnWidth === undefined\n      ? ''\n      : `--_kui-grid-min-column-width:${minColumnWidth}`,\n    `--_kui-grid-gap:${gapValue}`,\n    flexValue ? `--_kui-grid-flex:${flexValue}` : '',\n  ]\n    .filter(Boolean)\n    .join(';');\n\n  return (\n    <div\n      {...safeRootAttributes}\n      class={`kui-grid ${className}`.trim()}\n      data-component=\"grid\"\n      data-columns={columns === undefined ? undefined : String(columns)}\n      data-min-column-width={minColumnWidth === undefined ? undefined : 'true'}\n      data-flex={String(Boolean(flex))}\n      data-fill={fill ? 'true' : 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';\n"]}

package/dist/{chunk-3SXMEK3B.js → chunk-V3DX3K65.js}

@@ -40,4 +40,4 @@ function ToolbarText({
 
 export { ToolbarText };
 
-//# sourceMappingURL=chunk-3SXMEK3B.js.map
+//# sourceMappingURL=chunk-V3DX3K65.js.map

package/dist/chunk-V3DX3K65.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/toolbar-text.tsx"],"names":[],"mappings":";;;;AAqDO,SAAS,WAAA,CAAY;AAAA,EAC1B,IAAA;AAAA,EACA,IAAA,GAAO,SAAA;AAAA,EACP,SAAA,GAAY,EAAA;AAAA,EACZ,EAAA;AAAA,EACA,YAAA;AAAA,EACA,WAAA,GAAc,KAAA;AAAA,EACd,IAAA,GAAO,KAAA;AAAA,EACP,QAAA,GAAW,IAAA;AAAA,EACX,QAAA,GAAW,IAAA;AAAA,EACX,IAAA,GAAO,KAAA;AAAA,EACP;AACF,CAAA,EAAqB;AACnB,EAAA,MAAM,MAAA,GAAS,IAAA,IAAQ,QAAA,IAAY,IAAA,IAAQ,QAAA,GAAW,CAAA;AACtD,EAAA,uBACE,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,iBAAA,EAAoB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAC5C,gBAAA,EAAe,cAAA;AAAA,MACf,WAAA,EAAW,IAAA;AAAA,MACX,WAAA,EAAW,OAAO,MAAA,GAAS,MAAA;AAAA,MAC3B,WAAA,EAAW,OAAO,MAAA,GAAS,MAAA;AAAA,MAC3B,eAAA,EAAe,WAAW,MAAA,GAAY,OAAA;AAAA,MACtC,gBAAA,EAAgB,MAAA,GAAS,MAAA,CAAO,QAAQ,CAAA,GAAI,MAAA;AAAA,MAC5C,KAAA,EAAO,MAAA,GAAS,CAAA,6BAAA,EAAgC,QAAQ,CAAA,CAAA,GAAK,MAAA;AAAA,MAC7D,kBAAA,EAAkB,cAAc,MAAA,GAAS,MAAA;AAAA,MACzC,EAAA;AAAA,MACA,IAAA,EAAM,eAAe,SAAA,GAAY,MAAA;AAAA,MACjC,YAAA,EAAY,YAAA,GAAe,MAAA,CAAO,YAAY,CAAA,GAAI,MAAA;AAAA,MAClD,WAAA,EAAW,cAAc,MAAA,GAAS,MAAA;AAAA,MAClC,IAAA;AAAA,MAEC,QAAA,EAAA,WAAA,mBACC,GAAA,CAAC,QAAA,EAAA,EAAS,KAAA,EAAO,EAAA,CAAG,CAAC,CAAA,EAAG,CAAA,mBAExB,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,wBAAA,EAA0B,QAAA,EAAA,IAAA,EAAK;AAAA;AAAA,GAE/C;AAEJ","file":"chunk-V3DX3K65.js","sourcesContent":["import { em } from './css-values.js';\nimport { Skeleton } from './skeleton.js';\n\nexport type ToolbarTextSize =\n  'xlarge' | 'xlarge-fixed' | 'large' | 'default' | 'small' | 'xsmall';\n\n/** ARIA heading level for a title exposed as a heading landmark. */\nexport type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;\n\ninterface ToolbarTextBaseProps {\n  text: string;\n  size?: ToolbarTextSize;\n  className?: string;\n  /** Optional id, e.g. so a dialog can reference the title via aria-labelledby. */\n  id?: string;\n  /**\n   * Expose heading semantics (`role=\"heading\"` + `aria-level`) so the text acts as\n   * a heading landmark — e.g. a page's primary title. Omit to keep the plain span\n   * (the default), which suits a dialog title referenced via `aria-labelledby`.\n   */\n  headingLevel?: HeadingLevel;\n  /** Render the text as an unanimated loading skeleton instead of its value. */\n  placeholder?: boolean;\n  /**\n   * Show a trailing ellipsis (…) where the text is truncated — on the single line\n   * (default), or at the `maxLines` boundary when wrapping. Set false to hard-clip\n   * instead. Default true.\n   */\n  ellipsis?: boolean;\n  /**\n   * Grow to fill the free space of the flex row it sits in (a Toolbar zone),\n   * truncating at the space left by its siblings instead of taking only its\n   * text's width. Default false.\n   */\n  fill?: boolean;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n  /**\n   * Cap wrapped text to this many lines, truncating past it. Only takes effect with\n   * `wrap`; ignored on a single line. `null`/omitted wraps without a line cap. Default null.\n   */\n}\n\ntype ToolbarTextWrappingProps =\n  | {\n      /** Wrap onto multiple lines; combine with `maxLines` to cap them. */\n      wrap: true;\n      maxLines?: number | null;\n    }\n  | { wrap?: false; maxLines?: never };\n\nexport type ToolbarTextProps = ToolbarTextBaseProps & ToolbarTextWrappingProps;\n\nexport function ToolbarText({\n  text,\n  size = 'default',\n  className = '',\n  id,\n  headingLevel,\n  placeholder = false,\n  wrap = false,\n  ellipsis = true,\n  maxLines = null,\n  fill = false,\n  slot,\n}: ToolbarTextProps) {\n  const capped = wrap && maxLines != null && maxLines > 0;\n  return (\n    <span\n      class={`kui-toolbar-text ${className}`.trim()}\n      data-component=\"toolbar-text\"\n      data-size={size}\n      data-fill={fill ? 'true' : undefined}\n      data-wrap={wrap ? 'true' : undefined}\n      data-ellipsis={ellipsis ? undefined : 'false'}\n      data-max-lines={capped ? String(maxLines) : undefined}\n      style={capped ? `--kui-toolbar-text-max-lines:${maxLines}` : undefined}\n      data-placeholder={placeholder ? 'true' : undefined}\n      id={id}\n      role={headingLevel ? 'heading' : undefined}\n      aria-level={headingLevel ? String(headingLevel) : undefined}\n      aria-busy={placeholder ? 'true' : undefined}\n      slot={slot}\n    >\n      {placeholder ? (\n        <Skeleton width={em(8)} />\n      ) : (\n        <span class=\"kui-toolbar-text__text\">{text}</span>\n      )}\n    </span>\n  );\n}\n"]}

package/dist/{chunk-UWONG4QE.js → chunk-VCBTX62E.js}

@@ -27,9 +27,17 @@ function entryKey(entry) {
   ].join("
");
 }
 function renderEntry(entry, nested = false) {
-  if (entry.kind === "divider") return /* @__PURE__ */ jsx("wa-divider", {});
+  if (entry.kind === "divider")
+    return /* @__PURE__ */ jsx("wa-divider", { slot: nested ? "submenu" : void 0 });
   if (entry.kind === "heading")
-    return /* @__PURE__ */ jsx("div", { class: "kui-popup-menu__heading", children: entry.label });
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        class: "kui-popup-menu__heading",
+        slot: nested ? "submenu" : void 0,
+        children: entry.label
+      }
+    );
   return /* @__PURE__ */ jsxs(
     "wa-dropdown-item",
     {
@@ -124,4 +132,4 @@ function PopupMenu({
 
 export { PopupMenu, closePopupMenu, openPopupMenuAt };
 
-//# sourceMappingURL=chunk-UWONG4QE.js.map
+//# sourceMappingURL=chunk-VCBTX62E.js.map

package/dist/chunk-VCBTX62E.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/popup-menu.tsx"],"names":[],"mappings":"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","file":"chunk-VCBTX62E.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  /** A checked menu choice, including nested choices. */\n  checked?: boolean;\n  /** Trailing safe content, such as a selected-choice tick. */\n  details?: SafeHtml;\n  /** Destructive command styling. */\n  tone?: 'default' | 'danger';\n  disabled?: boolean;\n  /** Native tooltip text for a disabled command. */\n  disabledReason?: string;\n  /** Application `data-*` metadata such as a record id. */\n  attributes?: PopupMenuDataAttributes;\n  /** Child commands, headings, and dividers opened by hover or keyboard navigation. */\n  submenu?: readonly PopupMenuEntry[];\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\ntype PopupMenuTrigger =\n  | (PopupMenuTriggerName & { context?: false })\n  | {\n      context: true;\n      label: string;\n      text?: never;\n      icon?: never;\n      caret?: never;\n      disabled?: never;\n    };\n\nexport type PopupMenuProps = PopupMenuTrigger & {\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    entry.checked ? '1' : '0',\n    entry.tone ?? '',\n    entry.disabledReason ?? '',\n    String(entry.icon ?? ''),\n    String(entry.details ?? ''),\n    JSON.stringify(entry.attributes ?? {}),\n    ...(entry.submenu ?? []).map(entryKey),\n  ].join('\\u0001');\n}\n\nfunction renderEntry(entry: PopupMenuEntry, nested = false) {\n  if (entry.kind === 'divider')\n    return <wa-divider slot={nested ? 'submenu' : undefined}></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 (\n      <div\n        class=\"kui-popup-menu__heading\"\n        slot={nested ? 'submenu' : undefined}\n      >\n        {entry.label}\n      </div>\n    );\n  return (\n    <wa-dropdown-item\n      {...(entry.attributes ?? {})}\n      slot={nested ? 'submenu' : undefined}\n      data-action={entry.action}\n      value={entry.value}\n      type={entry.checked === undefined ? undefined : 'checkbox'}\n      checked={entry.checked}\n      variant={entry.tone === 'danger' ? 'danger' : undefined}\n      disabled={entry.disabled}\n      title={entry.disabled ? entry.disabledReason : undefined}\n    >\n      {entry.icon ? (\n        <span slot=\"icon\" class=\"kui-popup-menu__icon\">\n          {entry.icon}\n        </span>\n      ) : null}\n      {entry.label}\n      {entry.details ? (\n        <span slot=\"details\" class=\"kui-popup-menu__details\">\n          {entry.details}\n        </span>\n      ) : entry.submenu ? (\n        <span slot=\"details\"></span>\n      ) : null}\n      {entry.submenu?.map((child) => renderEntry(child, true))}\n    </wa-dropdown-item>\n  );\n}\n\n/** A rendered context PopupMenu with Web Awesome's controlled open state. */\nexport type PopupMenuElement = HTMLElement & { open: boolean };\n\n/** Open a context PopupMenu at viewport pointer coordinates. */\nexport function openPopupMenuAt(\n  menu: PopupMenuElement,\n  x: number,\n  y: number,\n): void {\n  menu.style.setProperty('--kui-popup-menu-context-x', `${x}px`);\n  menu.style.setProperty('--kui-popup-menu-context-y', `${y}px`);\n  menu.open = true;\n}\n\n/** Close a programmatically opened PopupMenu. */\nexport function closePopupMenu(menu: PopupMenuElement): void {\n  menu.open = false;\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  context = false,\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    String(context),\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      data-trigger={context ? 'context' : 'button'}\n      placement={placement}\n      slot={slot}\n    >\n      {context ? (\n        <button\n          type=\"button\"\n          slot=\"trigger\"\n          class=\"kui-popup-menu__context-anchor\"\n          aria-label={label}\n          aria-hidden=\"true\"\n          tabindex={-1}\n        ></button>\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      )}\n      {items.map((entry) => renderEntry(entry))}\n    </wa-dropdown>\n  );\n}\n"]}

package/dist/{chunk-2OXQHM7I.js → chunk-X6ADHJNI.js}

@@ -2,9 +2,9 @@ import { WORKBENCH_MAIN_MIN_SIZE, WORKBENCH_MAIN_MIN_HEIGHT, workbenchRegionId,
 import { clampRegionSize, ResizeGrip } from './chunk-KLJKU6ZL.js';
 import { List } from './chunk-NAPE7WUS.js';
 import { FloatingToolbar } from './chunk-I3Q7KKYM.js';
-import { composedPanelBody, relocatedPanelGroups } from './chunk-T57AXDFM.js';
-import { Toolbar } from './chunk-MERWRTBG.js';
-import { Pane } from './chunk-EZVNC4J6.js';
+import { composedPanelBody, relocatedPanelGroups } from './chunk-ENGVYQPG.js';
+import { Pane } from './chunk-OD2VXAPL.js';
+import { Toolbar } from './chunk-N2DRU35S.js';
 import { jsxs, jsx, Fragment } from 'kerfjs/jsx-runtime';
 
 var SIDES = {
@@ -132,6 +132,7 @@ function mainBody({
       separators: mainPane?.separators,
       safeAreaEdges: mainPane?.safeAreaEdges,
       chromeDividers: mainPane?.chromeDividers,
+      appearance: mainPane?.appearance,
       children: scrollHeader || scrollFooter ? (
         // Chrome that scrolls joins the content in one gapless column that
         // fills the scroller, so it scrolls away with the content.
@@ -220,6 +221,10 @@ function hiddenFromAccessibility(panel) {
   return panel.collapsed || panel.presentation === "hidden" ? "true" : void 0;
 }
 var responsiveAt = (at) => at === "never" ? void 0 : at;
+var inline = (panel) => Boolean(panel && (panel.presentation ?? "inline") === "inline");
+var expanded = (panel) => Boolean(panel && !panel.collapsed);
+var responsiveRail = (panel) => panel ? responsiveAt(panel.responsiveOverlayAt ?? "narrow") : void 0;
+var responsiveDrawer = (panel) => panel ? responsiveAt(panel.responsiveOverlayAt) : void 0;
 function Rail({
   id,
   side,
@@ -233,6 +238,7 @@ function Rail({
       id: workbenchRegionId(id, key),
       class: `kui-workbench__rail kui-workbench__rail--${side}`,
       "data-workbench-rail": side,
+      "data-appearance": !panel.toolbar && panel.pane?.appearance === "sunken" ? "sunken" : void 0,
       "data-collapsed": String(panel.collapsed ?? false),
       "data-separator": panel.separator ?? "auto",
       "data-collapse-motion": panel.collapseMotion ?? "slide",
@@ -277,6 +283,7 @@ function Drawer({ id, panel }) {
       id: workbenchRegionId(id, "bottomDrawer"),
       class: "kui-workbench__drawer",
       "data-workbench-drawer": true,
+      "data-appearance": !panel.toolbar && panel.pane?.appearance === "sunken" ? "sunken" : void 0,
       "data-collapsed": String(panel.collapsed ?? false),
       "data-separator": panel.separator ?? "auto",
       "data-collapse-motion": panel.collapseMotion ?? "slide",
@@ -360,6 +367,14 @@ function Workbench({
       "data-component": "workbench",
       "data-main-min-size": mainMin === void 0 ? void 0 : String(mainMin),
       "data-main-min-height": mainMinBlock === void 0 ? void 0 : String(mainMinBlock),
+      "data-left-inline-expanded": inline(leftRail) && expanded(leftRail) ? "true" : void 0,
+      "data-right-inline-expanded": inline(rightRail) && expanded(rightRail) ? "true" : void 0,
+      "data-left-responsive-inline": inline(leftRail) ? responsiveRail(leftRail) : void 0,
+      "data-right-responsive-inline": inline(rightRail) ? responsiveRail(rightRail) : void 0,
+      "data-left-responsive-expanded": inline(leftRail) && expanded(leftRail) ? responsiveRail(leftRail) : void 0,
+      "data-right-responsive-expanded": inline(rightRail) && expanded(rightRail) ? responsiveRail(rightRail) : void 0,
+      "data-rail-overlay-expanded": leftRail?.presentation === "overlay" && expanded(leftRail) || rightRail?.presentation === "overlay" && expanded(rightRail) ? "true" : void 0,
+      "data-responsive-overlay": responsiveRail(leftRail) || responsiveRail(rightRail) || responsiveDrawer(bottomDrawer) ? "true" : void 0,
       style: style || void 0,
       "aria-label": label,
       slot,
@@ -372,22 +387,32 @@ function Workbench({
           floatingRestore(id, "leftRail", leftRail, Boolean(mainToolbar))
         ),
         /* @__PURE__ */ jsxs("div", { class: "kui-workbench__center", children: [
-          /* @__PURE__ */ jsx("div", { class: "kui-workbench__main", "data-workbench-main": true, children: mainBody({
-            workbenchId: id,
-            main,
-            mainToolbar,
-            mainHeader,
-            mainFooter,
-            mainBottomToolbar,
-            mainHeaderPlacement,
-            mainFooterPlacement,
-            mainPane,
-            mainHeaderList,
-            mainFooterList,
-            leftRail,
-            rightRail,
-            bottomDrawer
-          }) }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              class: "kui-workbench__main",
+              "data-workbench-main": true,
+              "data-drawer-inline-expanded": inline(bottomDrawer) && expanded(bottomDrawer) ? "true" : void 0,
+              "data-drawer-responsive-inline": inline(bottomDrawer) ? responsiveDrawer(bottomDrawer) : void 0,
+              "data-appearance": !mainToolbar && !mainBottomToolbar && !mainHeader && !mainFooter && mainPane?.appearance === "sunken" ? "sunken" : void 0,
+              children: mainBody({
+                workbenchId: id,
+                main,
+                mainToolbar,
+                mainHeader,
+                mainFooter,
+                mainBottomToolbar,
+                mainHeaderPlacement,
+                mainFooterPlacement,
+                mainPane,
+                mainHeaderList,
+                mainFooterList,
+                leftRail,
+                rightRail,
+                bottomDrawer
+              })
+            }
+          ),
           bottomDrawer && /* @__PURE__ */ jsx(Drawer, { id, panel: bottomDrawer }),
           restore(
             bottomDrawer,
@@ -415,4 +440,4 @@ function Workbench({
 
 export { Workbench };
 
-//# sourceMappingURL=chunk-2OXQHM7I.js.map
+//# sourceMappingURL=chunk-X6ADHJNI.js.map

package/dist/chunk-X6ADHJNI.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/workbench-toolbars.tsx","../src/workbench.tsx"],"names":["jsx","jsxs"],"mappings":"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","file":"chunk-X6ADHJNI.js","sourcesContent":["import {\n  FloatingToolbar,\n  type FloatingToolbarPosition,\n} from './floating-toolbar.js';\nimport { List, type ListConfig } from './list.js';\nimport { Pane, type PaneConfig } from './pane.js';\nimport {\n  composedPanelBody,\n  type PanelSide,\n  type PanelToggle,\n  type PanelToggleAttributes,\n  type PanelToolbar,\n  relocatedPanelGroups,\n} from './panel-toolbar.js';\nimport type { KerfUiContent } from './semantic-content.js';\nimport { Toolbar, type ToolbarConfig } from './toolbar.js';\nimport {\n  type WorkbenchPanelKey,\n  workbenchRegionId,\n} from './workbench-resize.js';\n\n/** The standard toggle a Workbench renders for a panel (see {@link PanelToggle}). */\nexport type WorkbenchPanelToggle = PanelToggle;\n\n/**\n * A Workbench panel's top toolbar, composed by the Workbench so its groups can\n * follow the panel's open state (see {@link PanelToolbar} for the roles).\n * A collapsed rail's marked groups and toggle go to the leading edge of\n * `mainToolbar` (left rail) or its trailing edge (right rail); a collapsed\n * drawer's go to the trailing edge of `mainBottomToolbar`, else to a\n * `FloatingToolbar` in the work area's bottom-end corner.\n */\nexport type WorkbenchPanelToolbar = PanelToolbar;\n\n/**\n * The work area's top toolbar; collapsed rails add their groups to it. Its\n * configuration forwards to its `Toolbar`. It draws no divider of its own by\n * default: the work area's `Pane` draws one under its header chrome, wherever\n * that chrome ends, while `main` is scrolled (`mainPane.chromeDividers`).\n */\nexport interface WorkbenchMainToolbar extends ToolbarConfig {\n  label: string;\n  /** The work area's title, usually an extra-large `ToolbarText`. */\n  title?: KerfUiContent;\n  /** Groups after the title. */\n  leading?: KerfUiContent;\n  center?: KerfUiContent;\n  /** Groups at the trailing edge, before a collapsed right rail's groups. */\n  trailing?: KerfUiContent;\n}\n\n/**\n * The work area's bottom toolbar; a collapsed drawer adds its groups to it.\n * Its configuration forwards to its `Toolbar`. It draws no divider of its own\n * by default: the work area's `Pane` draws one over its footer chrome while\n * more of `main` lies below (`mainPane.chromeDividers`).\n */\nexport interface WorkbenchMainBottomToolbar extends ToolbarConfig {\n  label: string;\n  leading?: KerfUiContent;\n  center?: KerfUiContent;\n  trailing?: KerfUiContent;\n}\n\nconst SIDES: Record<WorkbenchPanelKey, PanelSide> = {\n  leftRail: 'left',\n  rightRail: 'right',\n  bottomDrawer: 'bottom',\n};\n\n/** A panel as far as its toolbar is concerned. */\nexport interface WorkbenchToolbarPanel {\n  toolbar?: WorkbenchPanelToolbar;\n  footer?: KerfUiContent;\n  /** Configuration for the `Pane` a `toolbar` panel's content renders in. */\n  pane?: PaneConfig;\n  content: KerfUiContent;\n  collapsed?: boolean;\n  /** The corner a collapsed panel's restore controls float in. */\n  restorePosition?: FloatingToolbarPosition;\n}\n\n/** A Workbench toggle's wiring hooks: its side, morph key, and panel. */\nconst toggleAttributes = (\n  workbenchId: string,\n  key: WorkbenchPanelKey,\n): PanelToggleAttributes => ({\n  'data-workbench-toggle': SIDES[key],\n  // Keyed, so the morph removes a toggle that leaves a toolbar instead of\n  // reusing its (possibly focused) button for a different control.\n  'data-key': `${workbenchRegionId(workbenchId, key)}-toggle`,\n  'aria-controls': workbenchRegionId(workbenchId, key),\n});\n\n/**\n * The groups a collapsed panel hands to the work area: its marked groups,\n * then its toggle. Empty while the panel is open or has no toolbar.\n */\nexport function relocatedGroups(\n  workbenchId: string,\n  key: WorkbenchPanelKey,\n  panel: WorkbenchToolbarPanel | undefined,\n): KerfUiContent[] {\n  return relocatedPanelGroups(\n    panel?.toolbar,\n    SIDES[key],\n    Boolean(panel?.collapsed),\n    toggleAttributes(workbenchId, key),\n  );\n}\n\n/**\n * A panel's content, wrapped in a `Pane` under its composed toolbar when it\n * has one (with its optional `footer` below). Without a toolbar the content\n * renders as given.\n */\nexport function panelBody(\n  workbenchId: string,\n  key: WorkbenchPanelKey,\n  panel: WorkbenchToolbarPanel,\n) {\n  const toolbar = panel.toolbar;\n  if (!toolbar) return panel.content;\n  return composedPanelBody({\n    toolbar,\n    side: SIDES[key],\n    collapsed: Boolean(panel.collapsed),\n    attributes: toggleAttributes(workbenchId, key),\n    pane: panel.pane,\n    footer: panel.footer,\n    content: panel.content,\n  });\n}\n\n/**\n * The work area's `mainHeader` / `mainFooter` chrome in a `List` carrying the\n * app's configuration; an omitted or `undefined` field keeps the `List`\n * default (no divider: the work area's `Pane` draws its chrome dividers).\n */\nfunction chromeList(content: KerfUiContent, config: ListConfig | undefined) {\n  return (\n    <List\n      dividerSides={config?.dividerSides}\n      gap={config?.gap}\n      hAlign={config?.hAlign}\n      vAlign={config?.vAlign}\n      textInsets={config?.textInsets}\n      controlInsets={config?.controlInsets}\n    >\n      {content}\n    </List>\n  );\n}\n\n/**\n * Whether the work area's header or footer chrome stays pinned (`fixed`),\n * scrolls away with the content (`scroll`), or stays pinned while the work\n * area is tall enough and scrolls with the content when it is short (`auto`,\n * the Pane's `chromePlacement=\"auto\"`; it applies to the pinned header and\n * footer together).\n */\nexport type WorkbenchChromePlacement = 'fixed' | 'scroll' | 'auto';\n\n/**\n * The work area: the app's `main` in a `Pane` (configured by `mainPane`)\n * under `mainToolbar` and any `mainHeader` list, and above any `mainFooter`\n * list and `mainBottomToolbar` (the header and footer lists configured by\n * `mainHeaderList` / `mainFooterList`), with each collapsed panel's groups\n * added to the toolbar on its side. Without any of that chrome, `main`\n * renders as given; only `mainPane.appearance` applies to the Workbench's\n * own scroll region in that case.\n */\nexport function mainBody({\n  workbenchId,\n  main,\n  mainToolbar,\n  mainHeader,\n  mainFooter,\n  mainBottomToolbar,\n  mainHeaderPlacement = 'fixed',\n  mainFooterPlacement = 'fixed',\n  mainPane,\n  mainHeaderList,\n  mainFooterList,\n  leftRail,\n  rightRail,\n  bottomDrawer,\n}: {\n  workbenchId: string;\n  main: KerfUiContent;\n  mainToolbar?: WorkbenchMainToolbar;\n  mainHeader?: KerfUiContent;\n  mainFooter?: KerfUiContent;\n  mainBottomToolbar?: WorkbenchMainBottomToolbar;\n  mainHeaderPlacement?: WorkbenchChromePlacement;\n  mainFooterPlacement?: WorkbenchChromePlacement;\n  mainPane?: PaneConfig;\n  mainHeaderList?: ListConfig;\n  mainFooterList?: ListConfig;\n  leftRail?: WorkbenchToolbarPanel;\n  rightRail?: WorkbenchToolbarPanel;\n  bottomDrawer?: WorkbenchToolbarPanel;\n}) {\n  if (!mainToolbar && !mainBottomToolbar && !mainHeader && !mainFooter)\n    return main;\n  const left = relocatedGroups(workbenchId, 'leftRail', leftRail);\n  const right = relocatedGroups(workbenchId, 'rightRail', rightRail);\n  const drawer = mainBottomToolbar\n    ? relocatedGroups(workbenchId, 'bottomDrawer', bottomDrawer)\n    : [];\n  // The Pane draws one divider under the header chrome and one over the\n  // footer chrome, wherever that chrome ends, from the scroll state.\n  const header =\n    !mainToolbar && !mainHeader ? undefined : (\n      <>\n        {mainToolbar ? (\n          <Toolbar\n            label={mainToolbar.label}\n            dividerSides={mainToolbar.dividerSides}\n            centerAlign={mainToolbar.centerAlign}\n            responsive={mainToolbar.responsive}\n            responsiveAt={mainToolbar.responsiveAt}\n            safeAreaEdges={mainToolbar.safeAreaEdges}\n            leading={\n              <>\n                {left}\n                {mainToolbar.title}\n                {mainToolbar.leading}\n              </>\n            }\n            center={mainToolbar.center}\n            trailing={\n              <>\n                {mainToolbar.trailing}\n                {right}\n              </>\n            }\n          />\n        ) : null}\n        {mainHeader ? chromeList(mainHeader, mainHeaderList) : null}\n      </>\n    );\n  const footer =\n    !mainFooter && !mainBottomToolbar ? undefined : (\n      <>\n        {mainFooter ? chromeList(mainFooter, mainFooterList) : null}\n        {mainBottomToolbar ? (\n          <Toolbar\n            label={mainBottomToolbar.label}\n            dividerSides={mainBottomToolbar.dividerSides}\n            centerAlign={mainBottomToolbar.centerAlign}\n            responsive={mainBottomToolbar.responsive}\n            responsiveAt={mainBottomToolbar.responsiveAt}\n            safeAreaEdges={mainBottomToolbar.safeAreaEdges}\n            leading={mainBottomToolbar.leading}\n            center={mainBottomToolbar.center}\n            trailing={\n              <>\n                {mainBottomToolbar.trailing}\n                {drawer}\n              </>\n            }\n          />\n        ) : null}\n      </>\n    );\n  const scrollHeader = mainHeaderPlacement === 'scroll';\n  const scrollFooter = mainFooterPlacement === 'scroll';\n  return (\n    <Pane\n      header={scrollHeader ? undefined : header}\n      footer={scrollFooter ? undefined : footer}\n      chromePlacement={\n        mainHeaderPlacement === 'auto' || mainFooterPlacement === 'auto'\n          ? 'auto'\n          : 'fixed'\n      }\n      contentElement={mainPane?.contentElement}\n      contentLabel={mainPane?.contentLabel}\n      separators={mainPane?.separators}\n      safeAreaEdges={mainPane?.safeAreaEdges}\n      chromeDividers={mainPane?.chromeDividers}\n      appearance={mainPane?.appearance}\n    >\n      {scrollHeader || scrollFooter ? (\n        // Chrome that scrolls joins the content in one gapless column that\n        // fills the scroller, so it scrolls away with the content.\n        <List flex>\n          {scrollHeader ? header : null}\n          {main}\n          {scrollFooter ? footer : null}\n        </List>\n      ) : (\n        main\n      )}\n    </Pane>\n  );\n}\n\n/**\n * A collapsed panel's groups when the work area has no toolbar on its side\n * to take them: a `FloatingToolbar` for the panel's restore corner, so the\n * panel can always be reopened.\n */\nexport function floatingRestore(\n  workbenchId: string,\n  key: WorkbenchPanelKey,\n  panel: WorkbenchToolbarPanel | undefined,\n  hasTargetToolbar: boolean,\n) {\n  if (hasTargetToolbar) return undefined;\n  const groups = relocatedGroups(workbenchId, key, panel);\n  if (groups.length === 0) return undefined;\n  return (\n    <FloatingToolbar\n      label={panel!.toolbar!.label}\n      position={\n        panel!.restorePosition ??\n        (key === 'leftRail' ? 'bottom-start' : 'bottom-end')\n      }\n    >\n      {groups}\n    </FloatingToolbar>\n  );\n}\n","import type { SafeHtml } from 'kerfjs';\n\nimport type { ListConfig } from './list.js';\nimport type { PaneConfig } from './pane.js';\nimport {\n  clampRegionSize,\n  type ResizableRegionAxis,\n  type ResizableRegionCollapseMotion,\n  type ResizableRegionContentOverflow,\n  type ResizableRegionEdge,\n  type ResizableRegionPresentation,\n  type ResizableRegionRestorePosition,\n  type ResizableRegionSeparator,\n} from './resizable-region.js';\nimport { ResizeGrip } from './resize-grip.js';\nimport type { KerfUiContent } from './semantic-content.js';\nimport {\n  WORKBENCH_MAIN_MIN_HEIGHT,\n  WORKBENCH_MAIN_MIN_SIZE,\n  WORKBENCH_RESIZE_DEFAULTS,\n  type WorkbenchPanelKey,\n  workbenchRegionId,\n} from './workbench-resize.js';\nimport {\n  floatingRestore,\n  mainBody,\n  panelBody,\n  type WorkbenchChromePlacement,\n  type WorkbenchMainBottomToolbar,\n  type WorkbenchMainToolbar,\n  type WorkbenchPanelToolbar,\n} from './workbench-toolbars.js';\n\nexport type {\n  WorkbenchChromePlacement,\n  WorkbenchMainBottomToolbar,\n  WorkbenchMainToolbar,\n  WorkbenchPanelToggle,\n  WorkbenchPanelToolbar,\n} from './workbench-toolbars.js';\n\n/**\n * The Workbench container breakpoint below which a panel presents as an\n * overlay: `narrow` (704px or less) or `compact` (448px or less) — the same\n * breakpoints as `ResizableRegion`'s `responsiveFillAt` — or `never` to keep\n * it inline at every width.\n */\nexport type WorkbenchResponsiveOverlayAt = 'compact' | 'narrow' | 'never';\n\n/**\n * How wide a rail's overlay is in a compact (448px or less) Workbench: `inset`\n * fills the Workbench less a dismiss margin on the side away from the rail's\n * edge, so a press beside it closes it; `full` fills the Workbench.\n */\nexport type WorkbenchCompactOverlay = 'inset' | 'full';\n\n/** Drag-resize limits for a resizable Workbench panel, in px. */\nexport interface WorkbenchPanelResizable {\n  /** Smallest size (default 180 for a rail, 120 for the drawer). */\n  min?: number;\n  /** Largest size (default 480). */\n  max?: number;\n}\n\n/** A collapsible Workbench panel — a side rail or the bottom drawer. */\nexport interface WorkbenchPanel {\n  content: KerfUiContent;\n  /**\n   * The panel's top toolbar, composed by the Workbench: its marked groups\n   * and standard `toggle` move to the work area's toolbar while the panel is\n   * collapsed. With it, `content` renders in a `Pane` below the toolbar.\n   */\n  toolbar?: WorkbenchPanelToolbar;\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`, `chromeDividers`) — 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 `content` renders as given.\n   */\n  pane?: PaneConfig;\n  /** Whether the panel is currently collapsed (the app owns this). */\n  collapsed?: boolean;\n  /**\n   * Rail width, or drawer height, in px. Overrides the CSS default. For a\n   * resizable panel it is the current size (default 280 for a rail, 220 for\n   * the drawer), clamped to the limits; the app owns it and `wireWorkbench`\n   * reports each resize.\n   */\n  size?: number;\n  /**\n   * Opt in to drag and keyboard resizing on the panel's inner separator:\n   * `true` for the default limits, or `{ min, max }`. Off by default. Pair it\n   * with `wireWorkbench` from `@kerfjs/ui/wire-workbench`.\n   */\n  resizable?: boolean | WorkbenchPanelResizable;\n  /** Accessible name for the panel region. */\n  label?: string;\n  separator?: ResizableRegionSeparator;\n  collapseMotion?: ResizableRegionCollapseMotion;\n  contentOverflow?: ResizableRegionContentOverflow;\n  presentation?: ResizableRegionPresentation;\n  /**\n   * Present the panel as an overlay, without a separator, below a Workbench\n   * container breakpoint, and inline above it — the CSS decides, so the app\n   * needs no device-class check. A rail overlays from its side at full\n   * height, over the work area and an open drawer; the bottom drawer\n   * overlays the bottom of the work-area column. Rails default to `narrow`\n   * (pass `never` to keep one inline); the drawer defaults to inline.\n   */\n  responsiveOverlayAt?: WorkbenchResponsiveOverlayAt;\n  /**\n   * A rail's overlay width in a compact Workbench (default `inset`: the\n   * Workbench less `--kui-workbench-overlay-dismiss-margin`, 44px). Ignored\n   * by the drawer.\n   */\n  compactOverlay?: WorkbenchCompactOverlay;\n  /**\n   * Control shown while collapsed, in a safe-area-aware corner of the\n   * Workbench (not the viewport); the bottom drawer's sits in the work-area\n   * column. Prefer `toolbar.toggle`, which the Workbench relocates into the\n   * work area's toolbar (or this corner when that toolbar is absent).\n   */\n  restoreControl?: SafeHtml;\n  restorePosition?: ResizableRegionRestorePosition;\n}\n\nexport interface WorkbenchProps {\n  /**\n   * The Workbench's `id`. Each panel's `id` derives from it —\n   * `<id>-left-rail`, `<id>-right-rail`, `<id>-bottom-drawer` — so a toggle\n   * can name the panel it shows and hides with `aria-controls`.\n   */\n  id: string;\n  label: string;\n  /** The central work area. */\n  main: KerfUiContent;\n  /**\n   * The work area's top toolbar. A collapsed left rail's marked groups\n   * and toggle lead it; a collapsed right rail's trail it. With it, `main`\n   * renders in a `Pane` below the toolbar.\n   */\n  mainToolbar?: WorkbenchMainToolbar;\n  /**\n   * Fixed content under `mainToolbar` — supporting copy such as a\n   * description — divided from the scrolling `main` below it.\n   */\n  mainHeader?: KerfUiContent;\n  /**\n   * Fixed content over `mainBottomToolbar` — a status line or a resource\n   * toolbar — divided from the scrolling `main` above it.\n   */\n  mainFooter?: KerfUiContent;\n  /**\n   * The work area's bottom toolbar. A collapsed drawer's marked groups and\n   * toggle trail it; without it they float in the work area's corner.\n   */\n  mainBottomToolbar?: WorkbenchMainBottomToolbar;\n  /**\n   * Whether `mainToolbar` and `mainHeader` stay pinned (`fixed`, default),\n   * scroll away with `main` (`scroll`) — useful where large text would leave\n   * pinned chrome little room — or stay pinned while the work area is tall\n   * enough and scroll with `main` when it is short (`auto`).\n   */\n  mainHeaderPlacement?: WorkbenchChromePlacement;\n  /** The same for `mainFooter` and `mainBottomToolbar` (default `fixed`). */\n  mainFooterPlacement?: WorkbenchChromePlacement;\n  /**\n   * Configuration for the work area's `Pane` (`contentElement`,\n   * `contentLabel`, `separators`, `safeAreaEdges`, `chromeDividers`), which it has whenever it\n   * has a toolbar, `mainHeader`, or `mainFooter`; without that chrome, `main`\n   * renders as given and this is ignored. Omitted or `undefined` fields keep\n   * the `Pane` defaults.\n   */\n  mainPane?: PaneConfig;\n  /**\n   * Configuration for the `List` that holds `mainHeader` (`gap`, `hAlign`,\n   * `vAlign`, `dividerSides`, `textInsets`, `controlInsets`). Omitted or\n   * `undefined` fields keep the defaults (no divider: the work area's\n   * `Pane` draws the line under its header chrome).\n   */\n  mainHeaderList?: ListConfig;\n  /**\n   * The same for the `List` that holds `mainFooter` (no divider by default:\n   * the work area's `Pane` draws the line over its footer chrome).\n   */\n  mainFooterList?: ListConfig;\n  leftRail?: WorkbenchPanel;\n  rightRail?: WorkbenchPanel;\n  bottomDrawer?: WorkbenchPanel;\n  /**\n   * Minimum width, in px, the work area keeps beside the inline rails, fixed\n   * or `resizable` (default 320; `0` turns it off). Resizing a rail stops\n   * where the work area would drop below it, and inline rails shrink\n   * proportionally when the Workbench gets narrower. Workbenches without a\n   * rail ignore it.\n   */\n  mainMinSize?: number;\n  /**\n   * Minimum height, in px, the work area keeps above an inline bottom drawer,\n   * fixed or `resizable` (default 120; `0` turns it off) — the drawer's\n   * counterpart of `mainMinSize`. Resizing the drawer stops where the work\n   * area would drop below it, and the drawer shrinks when the Workbench gets\n   * shorter. Workbenches without a drawer ignore it.\n   */\n  mainMinHeight?: number;\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\ninterface ResolvedResize {\n  regionId: string;\n  axis: ResizableRegionAxis;\n  edge: ResizableRegionEdge;\n  size: number;\n  min: number;\n  max: number;\n}\n\n/**\n * Each panel's separator is its inner edge. Growing the left rail moves that\n * edge toward the inline end; growing the right rail or the drawer moves it\n * toward the start — the same edge vocabulary `ResizableRegion` uses.\n */\nconst EDGES: Record<WorkbenchPanelKey, ResizableRegionEdge> = {\n  leftRail: 'end',\n  rightRail: 'start',\n  bottomDrawer: 'start',\n};\n\nconst DEFAULT_LABELS: Record<WorkbenchPanelKey, string> = {\n  leftRail: 'left rail',\n  rightRail: 'right rail',\n  bottomDrawer: 'bottom drawer',\n};\n\nfunction resolveResize(\n  id: string,\n  key: WorkbenchPanelKey,\n  panel: WorkbenchPanel,\n): ResolvedResize | undefined {\n  if (!panel.resizable) return undefined;\n  const defaults = WORKBENCH_RESIZE_DEFAULTS[key];\n  const limits = panel.resizable === true ? {} : panel.resizable;\n  const min = limits.min ?? defaults.min;\n  const max = Math.max(min, limits.max ?? defaults.max);\n  return {\n    regionId: workbenchRegionId(id, key),\n    axis: key === 'bottomDrawer' ? 'vertical' : 'horizontal',\n    edge: EDGES[key],\n    size: clampRegionSize(panel.size ?? defaults.size, min, max),\n    min,\n    max,\n  };\n}\n\n/** The attributes a resizable panel adds for the resize wiring to read. */\nconst resizeAttributes = (resize: ResolvedResize | undefined) =>\n  resize\n    ? {\n        'data-resizable': 'true',\n        'data-region-id': resize.regionId,\n        'data-axis': resize.axis,\n        'data-edge': resize.edge,\n      }\n    : {};\n\n/**\n * A resizable panel's size lives in the resize wiring's track property, so a\n * drag or key press resizes the panel before the app re-renders; the CSS maps\n * it onto the rail width or drawer height.\n */\nfunction panelStyle(\n  panel: WorkbenchPanel,\n  resize: ResolvedResize | undefined,\n  sizeProperty: string,\n) {\n  if (resize) return `--kui-resizable-region-size:${resize.size}px`;\n  return panel.size ? `${sizeProperty}: ${panel.size}px` : undefined;\n}\n\n/**\n * The separator a resizable panel owns: the same focusable `role=\"separator\"`\n * contract a `ResizableRegion` handle carries, so one resize wiring drives\n * both. It leaves the tab order while the panel is collapsed or not inline.\n */\nfunction PanelHandle({\n  panel,\n  resize,\n  label,\n}: {\n  panel: WorkbenchPanel;\n  resize: ResolvedResize;\n  label: string;\n}) {\n  const inert =\n    Boolean(panel.collapsed) || (panel.presentation ?? 'inline') !== 'inline';\n  return (\n    <div\n      class=\"kui-workbench__handle\"\n      role=\"separator\"\n      tabindex={inert ? '-1' : '0'}\n      aria-label={`Resize ${label}`}\n      aria-orientation={\n        resize.axis === 'horizontal' ? 'vertical' : 'horizontal'\n      }\n      aria-valuemin={resize.min}\n      aria-valuemax={resize.max}\n      aria-valuenow={resize.size}\n      aria-hidden={inert ? 'true' : undefined}\n      data-kui-resize-handle\n      data-region-id={resize.regionId}\n    >\n      <span class=\"kui-workbench__handle-icon\" aria-hidden=\"true\">\n        <ResizeGrip axis={resize.axis} />\n      </span>\n    </div>\n  );\n}\n\n/**\n * A collapsed panel leaves the accessibility tree as a whole, like a collapsed\n * `CollapsiblePanel`: its content and separator are already inert or hidden,\n * so the labeled landmark would otherwise stay behind, empty, for a screen\n * reader to land on. Its restore control renders outside it and stays\n * reachable.\n */\nfunction hiddenFromAccessibility(panel: WorkbenchPanel) {\n  return panel.collapsed || panel.presentation === 'hidden'\n    ? ('true' as const)\n    : undefined;\n}\n\n/** A breakpoint's attribute value; `never` (or none) renders no attribute. */\nconst responsiveAt = (at: WorkbenchResponsiveOverlayAt | undefined) =>\n  at === 'never' ? undefined : at;\n\nconst inline = (panel: WorkbenchPanel | undefined) =>\n  Boolean(panel && (panel.presentation ?? 'inline') === 'inline');\n\nconst expanded = (panel: WorkbenchPanel | undefined) =>\n  Boolean(panel && !panel.collapsed);\n\nconst responsiveRail = (panel: WorkbenchPanel | undefined) =>\n  panel ? responsiveAt(panel.responsiveOverlayAt ?? 'narrow') : undefined;\n\nconst responsiveDrawer = (panel: WorkbenchPanel | undefined) =>\n  panel ? responsiveAt(panel.responsiveOverlayAt) : undefined;\n\nfunction Rail({\n  id,\n  side,\n  panel,\n}: {\n  id: string;\n  side: 'left' | 'right';\n  panel: WorkbenchPanel;\n}) {\n  const key: WorkbenchPanelKey = side === 'left' ? 'leftRail' : 'rightRail';\n  const resize = resolveResize(id, key, panel);\n  return (\n    <aside\n      id={workbenchRegionId(id, key)}\n      class={`kui-workbench__rail kui-workbench__rail--${side}`}\n      data-workbench-rail={side}\n      data-appearance={\n        !panel.toolbar && panel.pane?.appearance === 'sunken'\n          ? 'sunken'\n          : undefined\n      }\n      data-collapsed={String(panel.collapsed ?? false)}\n      data-separator={panel.separator ?? 'auto'}\n      data-collapse-motion={panel.collapseMotion ?? 'slide'}\n      data-content-overflow={panel.contentOverflow ?? 'clip'}\n      data-presentation={panel.presentation ?? 'inline'}\n      data-responsive-overlay-at={responsiveAt(\n        panel.responsiveOverlayAt ?? 'narrow',\n      )}\n      data-compact-overlay={panel.compactOverlay ?? 'inset'}\n      {...resizeAttributes(resize)}\n      aria-label={panel.label || undefined}\n      aria-hidden={hiddenFromAccessibility(panel)}\n      inert={Boolean(panel.collapsed)}\n      style={panelStyle(panel, resize, '--kui-workbench-rail-width')}\n    >\n      <div\n        class=\"kui-workbench__panel-content\"\n        data-workbench-panel-content\n        inert={Boolean(panel.collapsed)}\n      >\n        {panelBody(id, key, panel)}\n      </div>\n      {resize && (\n        <PanelHandle\n          panel={panel}\n          resize={resize}\n          label={panel.label || DEFAULT_LABELS[key]}\n        />\n      )}\n    </aside>\n  );\n}\n\nfunction Drawer({ id, panel }: { id: string; panel: WorkbenchPanel }) {\n  const resize = resolveResize(id, 'bottomDrawer', panel);\n  return (\n    <section\n      id={workbenchRegionId(id, 'bottomDrawer')}\n      class=\"kui-workbench__drawer\"\n      data-workbench-drawer\n      data-appearance={\n        !panel.toolbar && panel.pane?.appearance === 'sunken'\n          ? 'sunken'\n          : undefined\n      }\n      data-collapsed={String(panel.collapsed ?? false)}\n      data-separator={panel.separator ?? 'auto'}\n      data-collapse-motion={panel.collapseMotion ?? 'slide'}\n      data-content-overflow={panel.contentOverflow ?? 'clip'}\n      data-presentation={panel.presentation ?? 'inline'}\n      data-responsive-overlay-at={responsiveAt(panel.responsiveOverlayAt)}\n      {...resizeAttributes(resize)}\n      aria-label={panel.label || undefined}\n      aria-hidden={hiddenFromAccessibility(panel)}\n      inert={Boolean(panel.collapsed)}\n      style={panelStyle(panel, resize, '--kui-workbench-drawer-height')}\n    >\n      <div\n        class=\"kui-workbench__panel-content\"\n        data-workbench-panel-content\n        inert={Boolean(panel.collapsed)}\n      >\n        {panelBody(id, 'bottomDrawer', panel)}\n      </div>\n      {resize && (\n        <PanelHandle\n          panel={panel}\n          resize={resize}\n          label={panel.label || DEFAULT_LABELS.bottomDrawer}\n        />\n      )}\n    </section>\n  );\n}\n\n/** A collapsed panel's restore control, outside the clipped panel. */\nfunction restore(\n  panel: WorkbenchPanel | undefined,\n  side: 'left' | 'right' | 'bottom',\n  position: ResizableRegionRestorePosition,\n  generated: SafeHtml | undefined,\n) {\n  const control = panel?.restoreControl ?? generated;\n  if (!panel?.collapsed || !control || panel.presentation === 'hidden')\n    return '';\n  return (\n    <div\n      class=\"kui-workbench__restore\"\n      data-panel={side}\n      data-position={panel.restorePosition ?? position}\n    >\n      {control}\n    </div>\n  );\n}\n\n/**\n * The Xcode-like multi-panel workspace: a collapsible left rail, right rail, and\n * bottom drawer around a central work area (any absent). Collapsing snaps the\n * panel's track to zero in one reflow while its fixed-size content slides out via\n * a composited transform — the instant-width / sliding-content technique, so the\n * work area relayouts once, not per frame. Bottom-drawer content stays anchored\n * to the shell's stable bottom edge throughout that transition. The app owns\n * each `collapsed` flag; the collapse is pure CSS. A collapsed panel renders\n * `inert` and `aria-hidden`, so neither Tab nor assistive technology reaches\n * controls that have slid out of view or an empty landmark (its restore control\n * lives outside it and stays reachable). A panel may opt in to drag and keyboard resizing with\n * `resizable`, which `wireWorkbench` drives. See `docs/23-app-layouts.md` §3.3.\n */\nexport function Workbench({\n  id,\n  label,\n  main,\n  leftRail,\n  rightRail,\n  bottomDrawer,\n  mainToolbar,\n  mainHeader,\n  mainFooter,\n  mainBottomToolbar,\n  mainHeaderPlacement,\n  mainFooterPlacement,\n  mainPane,\n  mainHeaderList,\n  mainFooterList,\n  mainMinSize = WORKBENCH_MAIN_MIN_SIZE,\n  mainMinHeight = WORKBENCH_MAIN_MIN_HEIGHT,\n  className = '',\n  slot,\n}: WorkbenchProps) {\n  // Each work-area minimum applies only on an axis a panel shares with it:\n  // the width beside a rail, the height above the drawer.\n  const px = (value: number) => Math.max(0, Math.round(value));\n  const mainMin = leftRail || rightRail ? px(mainMinSize) : undefined;\n  const mainMinBlock = bottomDrawer ? px(mainMinHeight) : undefined;\n  const style = [\n    mainMin === undefined ? '' : `--_kui-workbench-main-min-width:${mainMin}px`,\n    mainMinBlock === undefined\n      ? ''\n      : `--_kui-workbench-main-min-height:${mainMinBlock}px`,\n  ]\n    .filter(Boolean)\n    .join(';');\n  return (\n    <section\n      class={`kui-workbench ${className}`.trim()}\n      id={id}\n      data-component=\"workbench\"\n      data-main-min-size={mainMin === undefined ? undefined : String(mainMin)}\n      data-main-min-height={\n        mainMinBlock === undefined ? undefined : String(mainMinBlock)\n      }\n      data-left-inline-expanded={\n        inline(leftRail) && expanded(leftRail) ? 'true' : undefined\n      }\n      data-right-inline-expanded={\n        inline(rightRail) && expanded(rightRail) ? 'true' : undefined\n      }\n      data-left-responsive-inline={\n        inline(leftRail) ? responsiveRail(leftRail) : undefined\n      }\n      data-right-responsive-inline={\n        inline(rightRail) ? responsiveRail(rightRail) : undefined\n      }\n      data-left-responsive-expanded={\n        inline(leftRail) && expanded(leftRail)\n          ? responsiveRail(leftRail)\n          : undefined\n      }\n      data-right-responsive-expanded={\n        inline(rightRail) && expanded(rightRail)\n          ? responsiveRail(rightRail)\n          : undefined\n      }\n      data-rail-overlay-expanded={\n        (leftRail?.presentation === 'overlay' && expanded(leftRail)) ||\n        (rightRail?.presentation === 'overlay' && expanded(rightRail))\n          ? 'true'\n          : undefined\n      }\n      data-responsive-overlay={\n        responsiveRail(leftRail) ||\n        responsiveRail(rightRail) ||\n        responsiveDrawer(bottomDrawer)\n          ? 'true'\n          : undefined\n      }\n      style={style || undefined}\n      aria-label={label}\n      slot={slot}\n    >\n      {leftRail && <Rail id={id} side=\"left\" panel={leftRail} />}\n      {restore(\n        leftRail,\n        'left',\n        'bottom-start',\n        floatingRestore(id, 'leftRail', leftRail, Boolean(mainToolbar)),\n      )}\n      <div class=\"kui-workbench__center\">\n        <div\n          class=\"kui-workbench__main\"\n          data-workbench-main\n          data-drawer-inline-expanded={\n            inline(bottomDrawer) && expanded(bottomDrawer) ? 'true' : undefined\n          }\n          data-drawer-responsive-inline={\n            inline(bottomDrawer) ? responsiveDrawer(bottomDrawer) : undefined\n          }\n          data-appearance={\n            !mainToolbar &&\n            !mainBottomToolbar &&\n            !mainHeader &&\n            !mainFooter &&\n            mainPane?.appearance === 'sunken'\n              ? 'sunken'\n              : undefined\n          }\n        >\n          {mainBody({\n            workbenchId: id,\n            main,\n            mainToolbar,\n            mainHeader,\n            mainFooter,\n            mainBottomToolbar,\n            mainHeaderPlacement,\n            mainFooterPlacement,\n            mainPane,\n            mainHeaderList,\n            mainFooterList,\n            leftRail,\n            rightRail,\n            bottomDrawer,\n          })}\n        </div>\n        {bottomDrawer && <Drawer id={id} panel={bottomDrawer} />}\n        {restore(\n          bottomDrawer,\n          'bottom',\n          'bottom-end',\n          floatingRestore(\n            id,\n            'bottomDrawer',\n            bottomDrawer,\n            Boolean(mainBottomToolbar),\n          ),\n        )}\n      </div>\n      {rightRail && <Rail id={id} side=\"right\" panel={rightRail} />}\n      {restore(\n        rightRail,\n        'right',\n        'bottom-end',\n        floatingRestore(id, 'rightRail', rightRail, Boolean(mainToolbar)),\n      )}\n    </section>\n  );\n}\n"]}

package/dist/collapsible-panel.js

@@ -1,5 +1,5 @@
-import { collapsiblePanelToggleIcon, composedPanelBody, relocatedPanelGroups } from './chunk-T57AXDFM.js';
-export { collapsiblePanelToggleIcon } from './chunk-T57AXDFM.js';
+import { collapsiblePanelToggleIcon, composedPanelBody, relocatedPanelGroups } from './chunk-ENGVYQPG.js';
+export { collapsiblePanelToggleIcon } from './chunk-ENGVYQPG.js';
 
 
 

package/dist/grid.d.ts

@@ -5,13 +5,12 @@ import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
 type GridRootAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
     'data-component'?: never;
     'data-columns'?: never;
+    'data-min-column-width'?: never;
     'data-flex'?: never;
     'data-fill'?: never;
 }>;
-interface GridProps {
+interface GridCommonProps {
     children?: KerfUiContent;
-    /** Number of equal-width columns. Must be a positive safe integer. */
-    columns: number;
     /** A named UI spacing token or typed CSS length. Defaults to xs. */
     gap?: UiSpaceName | CssLength;
     /** Allow this grid to grow/shrink, use a keyword, or supply a typed CSS flex shorthand. */
@@ -28,7 +27,16 @@ interface GridProps {
     /** Native named-slot assignment when composed inside a web component. */
     slot?: string;
 }
-/** A fixed-count grid whose columns share the available width equally. */
-declare function Grid({ children, columns, gap, flex, fill, className, rootAttributes, slot, }: GridProps): kerfjs.SafeHtml;
+type GridProps = GridCommonProps & ({
+    /** Number of equal-width columns. Must be a positive safe integer. */
+    columns: number;
+    minColumnWidth?: never;
+} | {
+    columns?: never;
+    /** Fit equal columns of at least this width; collapse as the container narrows. */
+    minColumnWidth: CssLength;
+});
+/** Render equal tracks with a fixed count or a responsive minimum width. */
+declare function Grid({ children, columns, minColumnWidth, gap, flex, fill, className, rootAttributes, slot, }: GridProps): kerfjs.SafeHtml;
 
 export { CssFlex, CssFlexKeyword, CssLength, Grid, type GridProps, UiSpaceName };

package/dist/grid.js

@@ -1,4 +1,4 @@
-export { Grid } from './chunk-AGXQQFKZ.js';
+export { Grid } from './chunk-UCKKT6KO.js';
 
 
 

package/dist/index.d.ts

@@ -1,5 +1,6 @@
-export { AppTab, AppTabPresentation, AppTabProps, AppTabSize } from './app-tab.js';
+export { AppTab, AppTabNameOverflow, AppTabPresentation, AppTabProps, AppTabSize } from './app-tab.js';
 export { Badge, BadgeAppearance, BadgeDotProps, BadgeProps, BadgeShape, BadgeSize, BadgeTextProps, BadgeTone } from './badge.js';
+export { Chip, ChipProps } from './chip.js';
 export { ContentItem, ContentItemFrame, ContentItemProps, ContentItemShape } from './content-item.js';
 export { CssColor, CssFlex, CssFlexBasis, CssFlexKeyword, CssForegroundColor, CssLength, CssLengthExpression, CssSize, CssSizeKeyword, CssValue, UiColor, UiColorName, UiForegroundColorName, UiSpaceName, calc, colorVar, em, flex, foregroundColorVar, lengthVar, pct, plus, px, rem, space, uiColor } from './css-values.js';
 export { DisclosureArrow, DisclosureArrowProps, DisclosureDirection } from './disclosure-arrow.js';
@@ -11,10 +12,10 @@ export { ListActionRow, ListActionRowProps } from './list-action-row.js';
 export { ListHeader, ListHeaderProps } from './list-header.js';
 export { ListInsetControl, ListInsetControlProps } from './list-inset-control.js';
 export { ListInsetText, ListInsetTextProps } from './list-inset-text.js';
-export { ListItem, ListItemProps } from './list-item.js';
+export { ListItem, ListItemLink, ListItemLinkProps, ListItemProps } from './list-item.js';
 export { LoadingSpinner, LoadingSpinnerProps } from './loading-spinner.js';
 export { LucideIcon, LucideIconProps, LucideNode } from './lucide-icon.js';
-export { Pane, PaneChromeDividers, PaneChromePlacement, PaneConfig, PaneContentElement, PaneElement, PaneProps, PaneSeparatorSide } from './pane.js';
+export { Pane, PaneAppearance, PaneChromeDividers, PaneChromePlacement, PaneConfig, PaneContentElement, PaneElement, PaneProps, PaneSeparatorSide } from './pane.js';
 export { PopupMenu, PopupMenuDivider, PopupMenuElement, PopupMenuEntry, PopupMenuHeading, PopupMenuItem, PopupMenuPlacement, PopupMenuProps, closePopupMenu, openPopupMenuAt } from './popup-menu.js';
 export { ResizableRegion, ResizableRegionAxis, ResizableRegionCollapseMotion, ResizableRegionContentOverflow, ResizableRegionEdge, ResizableRegionPresentation, ResizableRegionProps, ResizableRegionResponsiveFillAt, ResizableRegionRestorePosition, ResizableRegionSeparator, clampRegionSize, resizeRegionFromPointer } from './resizable-region.js';
 export { Row, RowProps } from './row.js';
@@ -28,7 +29,7 @@ export { SunkenPanel, SunkenPanelProps, SunkenPanelShape } from './sunken-panel.
 export { DialogSurface, DialogSurfacePresentation, DialogSurfaceProps, DialogSurfaceSize, PopupSurface, PopupSurfaceInset, PopupSurfaceProps, SurfaceInset } from './surface-scaffold.js';
 export { TabActivation, TabBar, TabBarAllocation, TabBarPresentation, TabBarProps, TabBarTrailingPlacement } from './tab-bar.js';
 export { Text, TextContent, TextFont, TextProps, TextSize, TextTone, TextVariant } from './text.js';
-export { T as TokenSearchEditorAttributes, a as TokenSearchField, b as TokenSearchFieldProps, c as TokenSearchFieldValue, d as TokenSearchModel, e as TokenSearchModelOptions, f as TokenSearchResolvedToken, g as TokenSearchRule, h as TokenSearchState, i as TokenSearchSuggestion, j as TokenSearchToken, k as createTokenSearchModel, 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, d as TokenSearchModel, e as TokenSearchModelOptions, f as TokenSearchResolvedToken, g as TokenSearchRule, h as TokenSearchState, i as TokenSearchSuggestion, j as TokenSearchToken, k as createTokenSearchModel, p as placeTokenSearchCaret, r as readTokenSearchField } from './token-search-field-DvgFLhLL.js';
 export { Toolbar, ToolbarConfig, ToolbarProps } from './toolbar.js';
 export { ToolbarActionLink, ToolbarActionLinkProps, ToolbarControlGroup, ToolbarControlGroupAppearance, ToolbarControlGroupButtonAppearance, ToolbarControlGroupContent, ToolbarControlGroupDensity, ToolbarControlGroupMenuInset, ToolbarControlGroupOverflow, ToolbarControlGroupProps, ToolbarControlGroupSelectedChrome, ToolbarControlGroupSelectedTone, ToolbarControlGroupShape, ToolbarControlGroupSize, ToolbarControlGroupTone, ToolbarControlGroupVisibility } from './toolbar-control-group.js';
 export { HeadingLevel, ToolbarText, ToolbarTextProps, ToolbarTextSize } from './toolbar-text.js';

package/dist/index.js

@@ -1,42 +1,43 @@
 export { wireResizableRegions } from './chunk-UIDKY4UB.js';
-export { reorderTabs, wireTabBars } from './chunk-46263QLK.js';
+
+export { wireScrollDividers } from './chunk-JCV4GXWB.js';
+export { reorderTabs, wireTabBars } from './chunk-UA6JW52D.js';
 export { wireTokenSearchFields } from './chunk-A3CKOW2R.js';
 export { TokenSearchField, placeTokenSearchCaret, readTokenSearchField } from './chunk-RRB26JRJ.js';
-export { createTokenSearchModel } from './chunk-F7F7KRO2.js';
+export { createTokenSearchModel } from './chunk-4SQK27MR.js';
 export { ValueTable, ValueTableRow } from './chunk-P7D3EMXM.js';
-export { wireScrollDividers } from './chunk-JCV4GXWB.js';
-
 export { Spacer } from './chunk-MEY33VWB.js';
 export { StateBanner } from './chunk-GLDWRCAM.js';
 export { SunkenPanel } from './chunk-6ZXOQEAN.js';
 export { DialogSurface, PopupSurface } from './chunk-NN6GYOA2.js';
-export { TabBar } from './chunk-N3GKMPDW.js';
+export { TabBar } from './chunk-RKTTF3L4.js';
 export { SegmentedControl } from './chunk-X5QSICJ3.js';
-export { Select } from './chunk-WPLIO5WJ.js';
+export { Select } from './chunk-4MG3KXJM.js';
 export { ListInsetControl } from './chunk-5I7QGQVT.js';
 export { EmptyState } from './chunk-E36EVCKG.js';
-export { Grid } from './chunk-AGXQQFKZ.js';
+export { Grid } from './chunk-UCKKT6KO.js';
 export { ListActionRow } from './chunk-F4QMLOXJ.js';
-export { AppTab } from './chunk-T66UNBXL.js';
-export { PopupMenu, closePopupMenu, openPopupMenuAt } from './chunk-UWONG4QE.js';
+export { AppTab } from './chunk-Q6YU3BT7.js';
+export { PopupMenu, closePopupMenu, openPopupMenuAt } from './chunk-VCBTX62E.js';
 export { ResizableRegion, clampRegionSize, resizeRegionFromPointer } from './chunk-KLJKU6ZL.js';
 export { Row } from './chunk-VZOFZPSO.js';
+export { ListHeader } from './chunk-5Q3N6EV7.js';
+export { Text } from './chunk-AUKT3KMG.js';
 export { ListInsetText } from './chunk-DG6G5EPF.js';
-export { ListItem } from './chunk-5I7OHCIP.js';
+export { ListItem, ListItemLink } from './chunk-SWVW56CV.js';
 export { List } from './chunk-NAPE7WUS.js';
 
-export { ToolbarText } from './chunk-3SXMEK3B.js';
+export { ToolbarText } from './chunk-V3DX3K65.js';
+export { DisclosureArrow } from './chunk-KROD7KZK.js';
 export { FloatingToolbar } from './chunk-I3Q7KKYM.js';
 
 export { LoadingSpinner } from './chunk-ZLWQZUGF.js';
-export { ListHeader } from './chunk-5Q3N6EV7.js';
-export { Text } from './chunk-AUKT3KMG.js';
-export { DisclosureArrow } from './chunk-KROD7KZK.js';
 export { Skeleton } from './chunk-AHEG27M7.js';
 export { Badge } from './chunk-MP2GDBQZ.js';
+export { Chip } from './chunk-EAC4CDY7.js';
+export { Pane } from './chunk-OD2VXAPL.js';
 export { ToolbarActionLink, ToolbarControlGroup } from './chunk-7JUBXOIV.js';
-export { Toolbar } from './chunk-MERWRTBG.js';
-export { Pane } from './chunk-EZVNC4J6.js';
+export { Toolbar } from './chunk-N2DRU35S.js';
 export { LucideIcon } from './chunk-4R777DUZ.js';
 export { ContentItem } from './chunk-MA73TA6D.js';
 

package/dist/list-item.d.ts

@@ -47,6 +47,16 @@ interface ListItemProps {
     /** Native named-slot assignment when composed inside a web component. */
     slot?: string;
 }
+interface ListItemLinkProps extends Omit<ListItemProps, 'action' | 'pressed'> {
+    /** Native destination for this navigation row. */
+    href: string;
+    /** Open in a new tab with a safe rel and announce that behavior. */
+    external?: boolean;
+    action?: never;
+    pressed?: never;
+}
 declare function ListItem({ label, description, icon, trailing, status, busy, density, divider, selected, action, itemId, className, pressed, accessibleLabel, title, multiline, multilineIconAlign, state, disabled, tabIndex, placeholder, rootAttributes, slot, }: ListItemProps): SafeHtml;
+/** A navigation row with native link activation and ListItem geometry. */
+declare function ListItemLink({ href, external, label, description, icon, trailing, status, busy, density, divider, selected, itemId, className, accessibleLabel, title, multiline, multilineIconAlign, state, disabled, tabIndex, placeholder, rootAttributes, slot, }: ListItemLinkProps): SafeHtml;
 
-export { ListItem, type ListItemProps };
+export { ListItem, ListItemLink, type ListItemLinkProps, type ListItemProps };

package/dist/list-item.js

@@ -1,4 +1,4 @@
-export { ListItem } from './chunk-5I7OHCIP.js';
+export { ListItem, ListItemLink } from './chunk-SWVW56CV.js';
 
 
 

package/dist/nav-stack.d.ts

@@ -1,8 +1,8 @@
 import * as kerfjs from 'kerfjs';
+import { PaneAppearance } from './pane.js';
 import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
 import { ToolbarConfig } from './toolbar.js';
 import { ToolbarTextSize, HeadingLevel } from './toolbar-text.js';
-import './pane.js';
 import './sides-BPSWde0A.js';
 
 /**
@@ -13,6 +13,8 @@ interface NavStackView {
     /** Stable identity for keyed reconcile and transition direction. */
     key: string;
     content: KerfUiContent;
+    /** Background of this view's scrolling work surface. */
+    appearance?: PaneAppearance;
     /** Title shown in the top toolbar for this view. */
     title?: string;
     /** Leading groups for this view's top toolbar, after the back control and before the title. */

package/dist/nav-stack.js

@@ -1,4 +1,4 @@
-export { NavStack } from './chunk-5PESG2VP.js';
+export { NavStack } from './chunk-KYDDCJXU.js';
 
 
 

package/dist/pane.d.ts

@@ -22,6 +22,7 @@ type PaneRootAttributes = Readonly<Record<`data-${string}`, string | undefined>
     'data-safe-area-inline-end'?: never;
     'data-chrome-placement'?: never;
     'data-chrome-dividers'?: never;
+    'data-appearance'?: never;
 }>;
 /** How a Pane's header and footer relate to its scrolling content. */
 type PaneChromePlacement = 'fixed' | 'auto';
@@ -31,6 +32,8 @@ type PaneChromePlacement = 'fixed' | 'auto';
  * chrome, as `wireScrollDividers` reports; `always`; or `none`.
  */
 type PaneChromeDividers = 'scroll' | 'always' | 'none';
+/** Background treatment of the Pane's scrolling work surface. */
+type PaneAppearance = 'default' | 'sunken';
 interface PaneProps {
     /** Optional fixed chrome above the scrolling content, arranged vertically. */
     header?: KerfUiContent;
@@ -56,6 +59,8 @@ interface PaneProps {
      * The line is drawn inside the chrome, so no state moves the content.
      */
     chromeDividers?: PaneChromeDividers;
+    /** Paint the scrolling work surface with the shared lowered-surface color. */
+    appearance?: PaneAppearance;
     /** Root semantics. Defaults to `div`. */
     element?: PaneElement;
     /** Scrolling content semantics. Defaults to `div`. */
@@ -90,13 +95,13 @@ interface PaneProps {
  * or a CollapsiblePanel) forwards, so the app configures that pane instead of
  * styling it. An omitted or `undefined` field keeps the composite's default.
  */
-type PaneConfig = Pick<PaneProps, 'contentElement' | 'contentLabel' | 'separators' | 'safeAreaEdges' | 'chromeDividers'>;
+type PaneConfig = Pick<PaneProps, 'contentElement' | 'contentLabel' | 'separators' | 'safeAreaEdges' | 'chromeDividers' | 'appearance'>;
 /**
  * An unpadded application column with optional fixed header/footer slots and one
  * scrolling vertical content owner. Separator lines are independently opt-in on
  * each logical edge, so the same component works as a sidebar, main area,
  * inspector, or dialog column.
  */
-declare function Pane({ header, children, footer, chromePlacement, chromeDividers, element, contentElement, separators, safeAreaEdges, id, label, contentLabel, className, headerClassName, contentClassName, footerClassName, rootAttributes, slot, }: PaneProps): kerfjs.SafeHtml;
+declare function Pane({ header, children, footer, chromePlacement, chromeDividers, appearance, element, contentElement, separators, safeAreaEdges, id, label, contentLabel, className, headerClassName, contentClassName, footerClassName, rootAttributes, slot, }: PaneProps): kerfjs.SafeHtml;
 
-export { Pane, type PaneChromeDividers, type PaneChromePlacement, type PaneConfig, type PaneContentElement, type PaneElement, type PaneProps, type PaneSeparatorSide };
+export { Pane, type PaneAppearance, type PaneChromeDividers, type PaneChromePlacement, type PaneConfig, type PaneContentElement, type PaneElement, type PaneProps, type PaneSeparatorSide };

package/dist/pane.js

@@ -1,4 +1,4 @@
-export { Pane } from './chunk-EZVNC4J6.js';
+export { Pane } from './chunk-OD2VXAPL.js';
 
 
 //# sourceMappingURL=pane.js.map

package/dist/popup-menu.d.ts

@@ -29,8 +29,8 @@ interface PopupMenuItem {
     disabledReason?: string;
     /** Application `data-*` metadata such as a record id. */
     attributes?: PopupMenuDataAttributes;
-    /** Child commands opened by hover or keyboard navigation. */
-    submenu?: readonly PopupMenuItem[];
+    /** Child commands, headings, and dividers opened by hover or keyboard navigation. */
+    submenu?: readonly PopupMenuEntry[];
 }
 /** A labeled group heading; items that follow it belong to the group. */
 interface PopupMenuHeading {

package/dist/popup-menu.js

@@ -1,3 +1,3 @@
-export { PopupMenu, closePopupMenu, openPopupMenuAt } from './chunk-UWONG4QE.js';
+export { PopupMenu, closePopupMenu, openPopupMenuAt } from './chunk-VCBTX62E.js';
 
 //# sourceMappingURL=popup-menu.js.map