@kerfjs/ui 5.0.0-beta.98 → 5.0.0-beta.99

package/dist/chunk-AV7CPAPT.js

@@ -0,0 +1,82 @@
+import { Text } from './chunk-LL45C7BB.js';
+import { filterDataAttributes } from './chunk-KH4KEMSP.js';
+import { jsxs, jsx } from 'kerfjs/jsx-runtime';
+
+var COMPOSER_PROTECTED = /* @__PURE__ */ new Set([
+  "data-component",
+  "data-disabled",
+  "data-submit-on-enter"
+]);
+function rowCount(value, name) {
+  if (!Number.isInteger(value) || value < 1)
+    throw new RangeError(`Composer ${name} must be a positive integer.`);
+  return value;
+}
+function Composer({
+  label,
+  name,
+  id,
+  value = "",
+  placeholder,
+  minRows = 1,
+  maxRows = 8,
+  hint,
+  actions,
+  disabled = false,
+  submitOnEnter = false,
+  rootAttributes = {},
+  className = "",
+  slot
+}) {
+  const min = rowCount(minRows, "minRows");
+  const max = rowCount(maxRows, "maxRows");
+  if (max < min)
+    throw new RangeError("Composer maxRows must be at least minRows.");
+  const hintId = hint !== void 0 && id !== void 0 ? `${id}-hint` : "";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...filterDataAttributes(rootAttributes, COMPOSER_PROTECTED),
+      class: `kui-composer ${className}`.trim(),
+      "data-component": "composer",
+      "data-disabled": disabled ? "true" : void 0,
+      "data-submit-on-enter": submitOnEnter ? "true" : void 0,
+      style: `--_kui-composer-min-rows:${min};--_kui-composer-max-rows:${max}`,
+      slot,
+      children: [
+        /* @__PURE__ */ jsx(
+          "textarea",
+          {
+            class: "kui-composer__field",
+            id,
+            name,
+            rows: min,
+            "aria-label": label,
+            "aria-describedby": hintId || void 0,
+            "aria-keyshortcuts": submitOnEnter ? "Enter" : void 0,
+            placeholder,
+            disabled,
+            children: value
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { class: "kui-composer__actions", children: [
+          /* @__PURE__ */ jsx("span", { class: "kui-composer__hint", children: hint === void 0 ? null : /* @__PURE__ */ jsx(
+            Text,
+            {
+              variant: "span",
+              tone: "quiet",
+              size: "compact",
+              id: hintId || void 0,
+              children: hint
+            }
+          ) }),
+          /* @__PURE__ */ jsx("span", { class: "kui-composer__trailing", children: actions })
+        ] })
+      ]
+    }
+  );
+}
+
+export { Composer };
+
+//# sourceMappingURL=chunk-AV7CPAPT.js.map

package/dist/chunk-AV7CPAPT.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/forms/composer/composer.tsx"],"names":[],"mappings":"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","file":"chunk-AV7CPAPT.js","sourcesContent":["import type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport { filterDataAttributes } from '../../../shared/dom/extension-attributes.js';\nimport { Text } from '../../typography/text/text.js';\n\n/**\n * Application `data-*` identity on the Composer root, such as `data-key`;\n * the composer's own configuration attributes stay protected.\n */\nexport type ComposerRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined>\n>;\n\nexport interface ComposerProps {\n  /** The message field's accessible name, in title style (\"Message\"). */\n  label: string;\n  /** Native textarea `name`: the form field the message submits under. */\n  name: string;\n  /**\n   * The textarea id. With a `hint`, the hint takes `<id>-hint` and becomes\n   * the field's accessible description.\n   */\n  id?: string;\n  /** The field's text: a draft to restore, or `''` after sending. */\n  value?: string;\n  /** Sentence-style example of what to write (\"Ask about this build\"). */\n  placeholder?: string;\n  /**\n   * Visible lines while the field is empty or short (default 1). The field\n   * grows with its content from here.\n   */\n  minRows?: number;\n  /**\n   * Lines the field grows to before it scrolls (default 8). At least\n   * `minRows`.\n   */\n  maxRows?: number;\n  /** Quiet, sentence-style supporting copy at the start of the action row. */\n  hint?: string;\n  /** Trailing controls in the action row, normally one brand Send button. */\n  actions: KerfUiContent;\n  /** Disable the field; the app disables its own actions. */\n  disabled?: boolean;\n  /**\n   * Opt in to Enter-to-send: with `wireComposers` running over an ancestor,\n   * Enter (or Cmd/Ctrl+Enter) in the field activates the first trailing\n   * action, Shift+Enter inserts a newline, and an Enter that commits an IME\n   * composition or meets an empty message does not send. The field announces\n   * the shortcut with `aria-keyshortcuts`.\n   */\n  submitOnEnter?: boolean;\n  /** Safe `data-*` identity on the root. */\n  rootAttributes?: ComposerRootAttributes;\n  className?: string;\n  /** Native named-slot assignment, such as a `wa-dialog`'s `footer`. */\n  slot?: string;\n}\n\nconst COMPOSER_PROTECTED = new Set([\n  'data-component',\n  'data-disabled',\n  'data-submit-on-enter',\n]);\n\nfunction rowCount(value: number, name: string): number {\n  if (!Number.isInteger(value) || value < 1)\n    throw new RangeError(`Composer ${name} must be a positive integer.`);\n  return value;\n}\n\n/**\n * A chat or prompt composer: a raised frame whose border turns brand while\n * focus is within, holding a borderless message field that grows with its\n * content between `minRows` and `maxRows` lines, above an action row with an\n * optional hint and trailing actions. The app owns the value and sending;\n * `submitOnEnter` with `wireComposers` adds Enter-to-send.\n */\nexport function Composer({\n  label,\n  name,\n  id,\n  value = '',\n  placeholder,\n  minRows = 1,\n  maxRows = 8,\n  hint,\n  actions,\n  disabled = false,\n  submitOnEnter = false,\n  rootAttributes = {},\n  className = '',\n  slot,\n}: ComposerProps) {\n  const min = rowCount(minRows, 'minRows');\n  const max = rowCount(maxRows, 'maxRows');\n  if (max < min)\n    throw new RangeError('Composer maxRows must be at least minRows.');\n  const hintId = hint !== undefined && id !== undefined ? `${id}-hint` : '';\n  return (\n    <div\n      {...filterDataAttributes(rootAttributes, COMPOSER_PROTECTED)}\n      class={`kui-composer ${className}`.trim()}\n      data-component=\"composer\"\n      data-disabled={disabled ? 'true' : undefined}\n      data-submit-on-enter={submitOnEnter ? 'true' : undefined}\n      style={`--_kui-composer-min-rows:${min};--_kui-composer-max-rows:${max}`}\n      slot={slot}\n    >\n      <textarea\n        class=\"kui-composer__field\"\n        id={id}\n        name={name}\n        rows={min}\n        aria-label={label}\n        aria-describedby={hintId || undefined}\n        aria-keyshortcuts={submitOnEnter ? 'Enter' : undefined}\n        placeholder={placeholder}\n        disabled={disabled}\n      >\n        {value}\n      </textarea>\n      <div class=\"kui-composer__actions\">\n        <span class=\"kui-composer__hint\">\n          {hint === undefined ? null : (\n            <Text\n              variant=\"span\"\n              tone=\"quiet\"\n              size=\"compact\"\n              id={hintId || undefined}\n            >\n              {hint}\n            </Text>\n          )}\n        </span>\n        <span class=\"kui-composer__trailing\">{actions}</span>\n      </div>\n    </div>\n  );\n}\n"]}

package/dist/{chunk-XK4E225T.js → chunk-B53PS2LE.js}

@@ -1,4 +1,4 @@
-import { LoadingSpinner } from './chunk-YOKEL75M.js';
+import { LoadingSpinner } from './chunk-WVS6CUCT.js';
 import { jsxs, jsx } from 'kerfjs/jsx-runtime';
 
 function EmptyState({
@@ -31,4 +31,4 @@ function EmptyState({
 
 export { EmptyState };
 
-//# sourceMappingURL=chunk-XK4E225T.js.map
+//# sourceMappingURL=chunk-B53PS2LE.js.map

package/dist/{chunk-XK4E225T.js.map → chunk-B53PS2LE.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/feedback/empty-state/empty-state.tsx"],"names":[],"mappings":";;;AAgBO,SAAS,UAAA,CAAW;AAAA,EACzB,KAAA;AAAA,EACA,MAAA;AAAA,EACA,IAAA;AAAA,EACA,MAAA;AAAA,EACA,IAAA,GAAO,KAAA;AAAA,EACP,SAAA,GAAY,EAAA;AAAA,EACZ;AACF,CAAA,EAAoB;AAClB,EAAA,uBACE,IAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,gBAAA,EAAmB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAC3C,gBAAA,EAAe,aAAA;AAAA,MACf,WAAA,EAAW,OAAO,IAAI,CAAA;AAAA,MACtB,IAAA,EAAK,QAAA;AAAA,MACL,WAAA,EAAW,OAAO,IAAI,CAAA;AAAA,MACtB,IAAA;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,SAAI,KAAA,EAAM,uBAAA,EACR,iCAAO,GAAA,CAAC,cAAA,EAAA,EAAe,IAAK,IAAA,EAC/B,CAAA;AAAA,wBACA,GAAA,CAAC,YAAQ,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,QACd,MAAA,oBAAU,GAAA,CAAC,MAAA,EAAA,EAAM,QAAA,EAAA,MAAA,EAAO,CAAA;AAAA,QACxB,MAAA,oBAAU,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,2BAA2B,QAAA,EAAA,MAAA,EAAO;AAAA;AAAA;AAAA,GAC1D;AAEJ","file":"chunk-XK4E225T.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport { LoadingSpinner } from '../loading-spinner/loading-spinner.js';\n\nexport interface EmptyStateProps {\n  title: string;\n  detail?: string;\n  icon?: SafeHtml;\n  action?: KerfUiContent;\n  busy?: boolean;\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\nexport function EmptyState({\n  title,\n  detail,\n  icon,\n  action,\n  busy = false,\n  className = '',\n  slot,\n}: EmptyStateProps) {\n  return (\n    <section\n      class={`kui-empty-state ${className}`.trim()}\n      data-component=\"empty-state\"\n      data-busy={String(busy)}\n      role=\"status\"\n      aria-busy={String(busy)}\n      slot={slot}\n    >\n      <div class=\"kui-empty-state__icon\">\n        {busy ? <LoadingSpinner /> : icon}\n      </div>\n      <strong>{title}</strong>\n      {detail && <span>{detail}</span>}\n      {action && <div class=\"kui-empty-state__action\">{action}</div>}\n    </section>\n  );\n}\n"]}
+{"version":3,"sources":["../src/components/feedback/empty-state/empty-state.tsx"],"names":[],"mappings":";;;AAgBO,SAAS,UAAA,CAAW;AAAA,EACzB,KAAA;AAAA,EACA,MAAA;AAAA,EACA,IAAA;AAAA,EACA,MAAA;AAAA,EACA,IAAA,GAAO,KAAA;AAAA,EACP,SAAA,GAAY,EAAA;AAAA,EACZ;AACF,CAAA,EAAoB;AAClB,EAAA,uBACE,IAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,gBAAA,EAAmB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAC3C,gBAAA,EAAe,aAAA;AAAA,MACf,WAAA,EAAW,OAAO,IAAI,CAAA;AAAA,MACtB,IAAA,EAAK,QAAA;AAAA,MACL,WAAA,EAAW,OAAO,IAAI,CAAA;AAAA,MACtB,IAAA;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,SAAI,KAAA,EAAM,uBAAA,EACR,iCAAO,GAAA,CAAC,cAAA,EAAA,EAAe,IAAK,IAAA,EAC/B,CAAA;AAAA,wBACA,GAAA,CAAC,YAAQ,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,QACd,MAAA,oBAAU,GAAA,CAAC,MAAA,EAAA,EAAM,QAAA,EAAA,MAAA,EAAO,CAAA;AAAA,QACxB,MAAA,oBAAU,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,2BAA2B,QAAA,EAAA,MAAA,EAAO;AAAA;AAAA;AAAA,GAC1D;AAEJ","file":"chunk-B53PS2LE.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport { LoadingSpinner } from '../loading-spinner/loading-spinner.js';\n\nexport interface EmptyStateProps {\n  title: string;\n  detail?: string;\n  icon?: SafeHtml;\n  action?: KerfUiContent;\n  busy?: boolean;\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\nexport function EmptyState({\n  title,\n  detail,\n  icon,\n  action,\n  busy = false,\n  className = '',\n  slot,\n}: EmptyStateProps) {\n  return (\n    <section\n      class={`kui-empty-state ${className}`.trim()}\n      data-component=\"empty-state\"\n      data-busy={String(busy)}\n      role=\"status\"\n      aria-busy={String(busy)}\n      slot={slot}\n    >\n      <div class=\"kui-empty-state__icon\">\n        {busy ? <LoadingSpinner /> : icon}\n      </div>\n      <strong>{title}</strong>\n      {detail && <span>{detail}</span>}\n      {action && <div class=\"kui-empty-state__action\">{action}</div>}\n    </section>\n  );\n}\n"]}

package/dist/{chunk-R42D2BAO.js → chunk-CA7LNX3J.js}

@@ -1,4 +1,4 @@
-import { LucideIcon } from './chunk-UKKRPP56.js';
+import { LucideIcon } from './chunk-LOSRXZAH.js';
 import { filterDataAttributes } from './chunk-KH4KEMSP.js';
 import { jsx } from 'kerfjs/jsx-runtime';
 
@@ -41,4 +41,4 @@ function IconToggleButton({
 
 export { IconToggleButton };
 
-//# sourceMappingURL=chunk-R42D2BAO.js.map
+//# sourceMappingURL=chunk-CA7LNX3J.js.map

package/dist/{chunk-R42D2BAO.js.map → chunk-CA7LNX3J.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/actions/icon-toggle-button/icon-toggle-button.tsx"],"names":[],"mappings":";;;;AASA,IAAM,mBAAA,uBAA0B,GAAA,CAAI;AAAA,EAClC,gBAAA;AAAA,EACA,aAAA;AAAA,EACA;AACF,CAAC,CAAA;AAsCM,SAAS,gBAAA,CAAiB;AAAA,EAC/B,IAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA;AAAA,EACA,MAAA;AAAA,EACA,KAAA,GAAQ,MAAA;AAAA,EACR,QAAA,GAAW,KAAA;AAAA,EACX,EAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,iBAAiB,EAAC;AAAA,EAClB;AACF,CAAA,EAA0B;AACxB,EAAA,uBACE,GAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACE,GAAG,oBAAA,CAAqB,cAAA,EAAgB,mBAAmB,CAAA;AAAA,MAC5D,IAAA,EAAK,QAAA;AAAA,MACL,EAAA;AAAA,MACA,KAAA,EAAO,CAAA,uBAAA,EAA0B,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAClD,gBAAA,EAAe,oBAAA;AAAA,MACf,aAAA,EAAa,MAAA;AAAA,MACb,YAAA,EAAY,KAAA;AAAA,MACZ,YAAA,EAAY,KAAA;AAAA,MACZ,cAAA,EAAc,UAAU,MAAA,GAAS,OAAA;AAAA,MACjC,QAAA;AAAA,MACA,IAAA;AAAA,MAEA,QAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,8BAAA,EAA+B,aAAA,EAAY,MAAA,EACrD,QAAA,kBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,IAAA,EAAY,IAAA,EAAM,QAAA,EAAU,CAAA,EAC1C;AAAA;AAAA,GACF;AAEJ","file":"chunk-R42D2BAO.js","sourcesContent":["import { filterDataAttributes } from '../../../shared/dom/extension-attributes.js';\nimport {\n  LucideIcon,\n  type LucideNode,\n} from '../../media/lucide-icon/lucide-icon.js';\n\n/** Corner shape: fully round `pill` (default) or a softer `rounded` square. */\nexport type IconToggleButtonShape = 'pill' | 'rounded';\n\nconst iconToggleProtected = new Set([\n  'data-component',\n  'data-action',\n  'data-shape',\n]);\n\ntype IconToggleButtonRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-component'?: never;\n    'data-action'?: never;\n    'data-shape'?: never;\n  }\n>;\n\nexport interface IconToggleButtonProps {\n  /** The Lucide-compatible icon node. */\n  icon: LucideNode;\n  /** The icon's stable name, as `LucideIcon` takes it. */\n  iconName: string;\n  /** Accessible name and hover help tag; required because no text is shown. */\n  label: string;\n  /** Pressed state, exposed as `aria-pressed`; the application owns it. */\n  pressed: boolean;\n  /** Delegated `data-action` the application handles to flip `pressed`. */\n  action?: string;\n  shape?: IconToggleButtonShape;\n  disabled?: boolean;\n  id?: string;\n  className?: string;\n  /** Safe `data-*` metadata; IconToggleButton-owned markers stay protected. */\n  rootAttributes?: IconToggleButtonRootAttributes;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/**\n * A standalone, icon-only toggle: a native `<button aria-pressed>` with the\n * geometry and pressed chrome of a single contained `ToolbarControlGroup`\n * (44px, a 2px-inset face that rises when pressed), for content and pane\n * footers where no `Toolbar` belongs. Inside a toolbar, use a\n * `ToolbarControlGroup` instead.\n */\nexport function IconToggleButton({\n  icon,\n  iconName,\n  label,\n  pressed,\n  action,\n  shape = 'pill',\n  disabled = false,\n  id,\n  className = '',\n  rootAttributes = {},\n  slot,\n}: IconToggleButtonProps) {\n  return (\n    <button\n      {...filterDataAttributes(rootAttributes, iconToggleProtected)}\n      type=\"button\"\n      id={id}\n      class={`kui-icon-toggle-button ${className}`.trim()}\n      data-component=\"icon-toggle-button\"\n      data-action={action}\n      data-shape={shape}\n      aria-label={label}\n      aria-pressed={pressed ? 'true' : 'false'}\n      disabled={disabled}\n      slot={slot}\n    >\n      <span class=\"kui-icon-toggle-button__face\" aria-hidden=\"true\">\n        <LucideIcon icon={icon} name={iconName} />\n      </span>\n    </button>\n  );\n}\n"]}
+{"version":3,"sources":["../src/components/actions/icon-toggle-button/icon-toggle-button.tsx"],"names":[],"mappings":";;;;AASA,IAAM,mBAAA,uBAA0B,GAAA,CAAI;AAAA,EAClC,gBAAA;AAAA,EACA,aAAA;AAAA,EACA;AACF,CAAC,CAAA;AAsCM,SAAS,gBAAA,CAAiB;AAAA,EAC/B,IAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA;AAAA,EACA,MAAA;AAAA,EACA,KAAA,GAAQ,MAAA;AAAA,EACR,QAAA,GAAW,KAAA;AAAA,EACX,EAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,iBAAiB,EAAC;AAAA,EAClB;AACF,CAAA,EAA0B;AACxB,EAAA,uBACE,GAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACE,GAAG,oBAAA,CAAqB,cAAA,EAAgB,mBAAmB,CAAA;AAAA,MAC5D,IAAA,EAAK,QAAA;AAAA,MACL,EAAA;AAAA,MACA,KAAA,EAAO,CAAA,uBAAA,EAA0B,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAClD,gBAAA,EAAe,oBAAA;AAAA,MACf,aAAA,EAAa,MAAA;AAAA,MACb,YAAA,EAAY,KAAA;AAAA,MACZ,YAAA,EAAY,KAAA;AAAA,MACZ,cAAA,EAAc,UAAU,MAAA,GAAS,OAAA;AAAA,MACjC,QAAA;AAAA,MACA,IAAA;AAAA,MAEA,QAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,8BAAA,EAA+B,aAAA,EAAY,MAAA,EACrD,QAAA,kBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,IAAA,EAAY,IAAA,EAAM,QAAA,EAAU,CAAA,EAC1C;AAAA;AAAA,GACF;AAEJ","file":"chunk-CA7LNX3J.js","sourcesContent":["import { filterDataAttributes } from '../../../shared/dom/extension-attributes.js';\nimport {\n  LucideIcon,\n  type LucideNode,\n} from '../../media/lucide-icon/lucide-icon.js';\n\n/** Corner shape: fully round `pill` (default) or a softer `rounded` square. */\nexport type IconToggleButtonShape = 'pill' | 'rounded';\n\nconst iconToggleProtected = new Set([\n  'data-component',\n  'data-action',\n  'data-shape',\n]);\n\ntype IconToggleButtonRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-component'?: never;\n    'data-action'?: never;\n    'data-shape'?: never;\n  }\n>;\n\nexport interface IconToggleButtonProps {\n  /** The Lucide-compatible icon node. */\n  icon: LucideNode;\n  /** The icon's stable name, as `LucideIcon` takes it. */\n  iconName: string;\n  /** Accessible name and hover help tag; required because no text is shown. */\n  label: string;\n  /** Pressed state, exposed as `aria-pressed`; the application owns it. */\n  pressed: boolean;\n  /** Delegated `data-action` the application handles to flip `pressed`. */\n  action?: string;\n  shape?: IconToggleButtonShape;\n  disabled?: boolean;\n  id?: string;\n  className?: string;\n  /** Safe `data-*` metadata; IconToggleButton-owned markers stay protected. */\n  rootAttributes?: IconToggleButtonRootAttributes;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/**\n * A standalone, icon-only toggle: a native `<button aria-pressed>` with the\n * geometry and pressed chrome of a single contained `ToolbarControlGroup`\n * (44px, a 2px-inset face that rises when pressed), for content and pane\n * footers where no `Toolbar` belongs. Inside a toolbar, use a\n * `ToolbarControlGroup` instead.\n */\nexport function IconToggleButton({\n  icon,\n  iconName,\n  label,\n  pressed,\n  action,\n  shape = 'pill',\n  disabled = false,\n  id,\n  className = '',\n  rootAttributes = {},\n  slot,\n}: IconToggleButtonProps) {\n  return (\n    <button\n      {...filterDataAttributes(rootAttributes, iconToggleProtected)}\n      type=\"button\"\n      id={id}\n      class={`kui-icon-toggle-button ${className}`.trim()}\n      data-component=\"icon-toggle-button\"\n      data-action={action}\n      data-shape={shape}\n      aria-label={label}\n      aria-pressed={pressed ? 'true' : 'false'}\n      disabled={disabled}\n      slot={slot}\n    >\n      <span class=\"kui-icon-toggle-button__face\" aria-hidden=\"true\">\n        <LucideIcon icon={icon} name={iconName} />\n      </span>\n    </button>\n  );\n}\n"]}

package/dist/{chunk-AZWE2FB5.js → chunk-CMETHPKR.js}

@@ -1,9 +1,10 @@
-import { ToolbarText } from './chunk-IGTWXPTN.js';
-import { ToolbarControlGroup } from './chunk-YXOMI7ES.js';
+import { ToolbarText } from './chunk-HGV7J4T6.js';
+import { paneConfigProps } from './chunk-UMKV7YVQ.js';
+import { ToolbarControlGroup } from './chunk-QIG4IGUP.js';
 import { Toolbar } from './chunk-CMLPFIC5.js';
-import { Pane } from './chunk-GJYQ27C2.js';
-import { List } from './chunk-V6W56V3N.js';
-import { LucideIcon } from './chunk-UKKRPP56.js';
+import { List } from './chunk-HZPHCSCS.js';
+import { Pane } from './chunk-INI4WDWC.js';
+import { LucideIcon } from './chunk-LOSRXZAH.js';
 import { ChevronLeft } from 'lucide';
 import { jsx, jsxs, Fragment } from 'kerfjs/jsx-runtime';
 
@@ -44,6 +45,8 @@ function NavStack({
   bottomToolbar,
   separator = "auto",
   chromeDividers = "scroll",
+  chromePresentation = "docked",
+  bottomToolbarPresentation = "docked",
   className = "",
   slot
 }) {
@@ -73,6 +76,8 @@ function NavStack({
       "data-depth": String(views.length),
       "data-separator": separator,
       "data-chrome-dividers": chromeDividers === "always" || chromeDividers === "none" ? chromeDividers : void 0,
+      "data-chrome-presentation": chromePresentation === "overlay" && !hideToolbar ? "overlay" : void 0,
+      "data-bottom-toolbar-presentation": bottomToolbarPresentation === "overlay" ? "overlay" : void 0,
       "aria-label": label,
       slot,
       children: [
@@ -136,15 +141,7 @@ function NavStack({
             children: view.pane || view.header !== void 0 || view.footer !== void 0 ? /* @__PURE__ */ jsx(
               Pane,
               {
-                appearance: view.pane?.appearance,
-                deepInset: view.pane?.deepInset,
-                tabIndex: view.pane?.tabIndex,
-                outlined: view.pane?.outlined,
-                contentElement: view.pane?.contentElement,
-                contentLabel: view.pane?.contentLabel,
-                separators: view.pane?.separators,
-                safeAreaEdges: view.pane?.safeAreaEdges,
-                chromeDividers: view.pane?.chromeDividers,
+                ...paneConfigProps(view.pane),
                 header: view.header === void 0 ? void 0 : /* @__PURE__ */ jsx("div", { "data-nav-stack-header": true, children: chromeList(view.header, view.headerList) }),
                 footer: view.footer === void 0 ? void 0 : /* @__PURE__ */ jsx("div", { "data-nav-stack-footer": true, children: chromeList(view.footer, view.footerList) }),
                 children: view.content
@@ -175,4 +172,4 @@ function NavStack({
 
 export { NavStack };
 
-//# sourceMappingURL=chunk-AZWE2FB5.js.map
+//# sourceMappingURL=chunk-CMETHPKR.js.map

package/dist/chunk-CMETHPKR.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/navigation/nav-stack/nav-stack.tsx"],"names":[],"mappings":"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","file":"chunk-CMETHPKR.js","sourcesContent":["import { ChevronLeft } from 'lucide';\n\nimport type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport type { NavPane } from '../../../shared/panels/nav-pane.js';\nimport type { PanelBottomToolbar } from '../../../shared/panels/panel-toolbar.js';\nimport { Toolbar, type ToolbarConfig } from '../../actions/toolbar/toolbar.js';\nimport { ToolbarControlGroup } from '../../actions/toolbar-control-group/toolbar-control-group.js';\nimport {\n  type HeadingLevel,\n  ToolbarText,\n  type ToolbarTextSize,\n} from '../../actions/toolbar-text/toolbar-text.js';\nimport { List, type ListConfig } from '../../collections/list/list.js';\nimport { paneConfigProps } from '../../layout/pane/internal/pane-config-props.js';\nimport { Pane } from '../../layout/pane/pane.js';\nimport { LucideIcon } from '../../media/lucide-icon/lucide-icon.js';\n\n/**\n * One entry in a {@link NavStack}. The app owns the stack as an array (usually a\n * signal); `NavStack` renders it and `wireNavStack` animates the transitions.\n */\nexport interface NavStackView extends NavPane<\n  NavStackViewToolbar,\n  PanelBottomToolbar\n> {\n  /** Stable identity for keyed reconcile and transition direction. */\n  key: string;\n}\n\n/** Per-view top toolbar. The stack supplies its back control before `leading`. */\nexport interface NavStackViewToolbar extends NavStackToolbarConfig {\n  title?: string;\n  leading?: KerfUiContent;\n  center?: KerfUiContent;\n  trailing?: KerfUiContent;\n}\n\n/** A view's structured bottom toolbar; it cross-fades on navigation. */\nexport type NavStackViewBottomToolbar = PanelBottomToolbar;\n\n/**\n * The top toolbar's configuration. Its `ToolbarConfig` forwards to the real\n * `Toolbar` the stack renders; by default that toolbar draws no divider and\n * claims the top and side safe-area edges the stack still touches.\n */\nexport interface NavStackToolbarConfig extends ToolbarConfig {\n  /** Accessible name of the top toolbar (default: none). */\n  label?: string;\n  /**\n   * Size of the view title's `ToolbarText`. Default `xlarge` at the root,\n   * where the title is the page heading, and `large` once a back control\n   * shares the bar.\n   */\n  titleSize?: ToolbarTextSize;\n  /** Expose the view title as a heading at this level (default: a plain span). */\n  headingLevel?: HeadingLevel;\n}\n\n/**\n * How a {@link NavStack}'s top chrome relates to the active view: `docked`\n * above it, or `overlay` laid over its top edge on the translucent chrome\n * material, so the view's content scrolls visibly beneath it.\n */\nexport type NavStackChromePresentation = 'docked' | 'overlay';\n\n/**\n * How a {@link NavStack}'s bottom toolbar relates to the active view:\n * `docked` below it, or `overlay` laid over its bottom edge on the\n * translucent chrome material, so the view's content scrolls visibly beneath\n * it.\n */\nexport type NavStackBottomToolbarPresentation = 'docked' | 'overlay';\n\nexport interface NavStackProps {\n  id: string;\n  /** Accessible name for the stack region. */\n  label: string;\n  /** The stack, root first; the last entry is the active top view. */\n  views: NavStackView[];\n  /** Accessible label for the icon-only back control (default \"Back\"). */\n  backLabel?: string;\n  /** The back control's icon (default a chevron-left `LucideIcon`). */\n  backIcon?: KerfUiContent;\n  /**\n   * Visible text beside the back icon, such as the previous view's title\n   * (default: icon only). When set, the text names the control and\n   * `backLabel` is not used.\n   */\n  backText?: string;\n  /** The top toolbar's configuration, forwarded to its `Toolbar`. */\n  toolbarConfig?: NavStackToolbarConfig;\n  /** Persistent last group in every view's top toolbar, supplied by a hosting panel. */\n  panelToggle?: KerfUiContent;\n  /** Hide the top toolbar entirely (rare — a fully custom-chrome view). */\n  hideToolbar?: boolean;\n  /** Optional persistent bottom toolbar used when the active view does not provide one. */\n  bottomToolbar?: NavStackViewBottomToolbar;\n  /**\n   * Stack chrome separator. `auto` (default) draws both available edges\n   * against a sunken active Pane and otherwise follows `chromeDividers`;\n   * `hidden` suppresses the stack-owned edges.\n   */\n  separator?: 'auto' | 'hidden';\n  /**\n   * The line under the top chrome and over the bottom toolbar, where they\n   * meet the active view. `scroll` (default) shows the chrome's line only\n   * while the view's content is scrolled beneath it, and the bottom\n   * toolbar's only while more content lies below — never when the content\n   * fits — once `wireScrollDividers` (`@kerfjs/ui/wire-scroll-dividers`) is\n   * wired above the stack; unwired, neither shows. `always` shows both\n   * without the wiring; `none` neither, even when wired. The line is drawn\n   * inside the chrome, so no state moves the chrome or the content. A\n   * A sunken active Pane still draws the separator unless\n   * `separator=\"hidden\"`. A `toolbarConfig.dividerSides` edge is the Toolbar's\n   * own and is unaffected.\n   */\n  chromeDividers?: 'scroll' | 'always' | 'none';\n  /**\n   * `docked` (default) gives the top chrome its own band above the active\n   * view. `overlay` lays the chrome over the view's top edge on the\n   * translucent chrome material (`--kui-chrome-material`, opaque under\n   * `prefers-reduced-transparency`, `prefers-contrast: more`, forced colors,\n   * or without `backdrop-filter`), so content scrolls visibly beneath it, as\n   * an iOS navigation bar does. `wireNavStack` measures the live chrome and\n   * hands its height (top safe area included) to the viewport as the\n   * block-start `--kui-edge-inset-*` context, so every view clears it with no\n   * prop: a plain view, a sole `Pane`'s content (or header), and a nested\n   * layout all pad and `scroll-padding` by it, so the first item, and anything\n   * focused or scrolled into view, rests clear of the bar. Until then, and\n   * with `hideToolbar`, the chrome stays docked. An untoned `ToolbarText` in\n   * the chrome lifts its title and description to AA over the content passing\n   * beneath it; keep any other quiet copy in the view.\n   */\n  chromePresentation?: NavStackChromePresentation;\n  /**\n   * `docked` (default) gives the bottom toolbar its own band below the\n   * active view. `overlay` lays it over the view's bottom edge on the\n   * translucent chrome material (opaque under the same preferences as\n   * `chromePresentation`), so content scrolls visibly beneath it, as under\n   * an iOS toolbar. `wireNavStack` measures the live bottom toolbar (never a\n   * cross-fading copy) and hands its height (bottom safe area included) to\n   * the viewport as the block-end `--kui-edge-inset-*` context, so a plain\n   * view, a sole `Pane`'s content (or footer), and a nested layout rest their\n   * last item, and anything focused or scrolled into view, clear of it. Until\n   * then, and while no bottom toolbar is shown, it stays docked. Independent\n   * of `chromePresentation`, which governs only the top chrome. An untoned\n   * `ToolbarText` in the toolbar lifts to AA over the content beneath it.\n   */\n  bottomToolbarPresentation?: NavStackBottomToolbarPresentation;\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\nconst DEFAULT_SAFE_AREA_EDGES = [\n  'block-start',\n  'inline-start',\n  'inline-end',\n] as const;\n\nconst DEFAULT_BOTTOM_SAFE_AREA_EDGES = [\n  'block-end',\n  'inline-start',\n  'inline-end',\n] as const;\n\nfunction chromeList(content: KerfUiContent, config?: ListConfig) {\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 * A navigation stack (iOS-style push/pop). Renders every entry stacked, the last\n * one active; `@kerfjs/ui/wire-nav-stack`'s `wireNavStack` slides the content and\n * cross-fades the chrome across a change. Its top chrome is a real `Toolbar`: the\n * back control and title lead, the active view's `toolbar` fills the zones,\n * and `toolbarConfig` supplies defaults. A single-pane\n * layout is a `NavStack` with one entry. See `docs/23-app-layouts.md` §3.1.\n */\nexport function NavStack({\n  id,\n  label,\n  views,\n  backLabel = 'Back',\n  backIcon,\n  backText,\n  toolbarConfig = {},\n  panelToggle,\n  hideToolbar = false,\n  bottomToolbar,\n  separator = 'auto',\n  chromeDividers = 'scroll',\n  chromePresentation = 'docked',\n  bottomToolbarPresentation = 'docked',\n  className = '',\n  slot,\n}: NavStackProps) {\n  const topIndex = views.length - 1;\n  const top = views[topIndex];\n  const topToolbar = top?.toolbar;\n  const bottom = top?.bottomToolbar ?? bottomToolbar;\n  const canPop = views.length > 1;\n  const topDensity = topToolbar?.density ?? toolbarConfig.density;\n  // With a back control, the title centers on the bar (iOS-style) unless the\n  // view owns the center zone; at the root it leads and fills, left-aligned.\n  const centerTitle = canPop && topToolbar?.center === undefined;\n  const title = (\n    <ToolbarText\n      text={topToolbar?.title ?? ''}\n      size={\n        topToolbar?.titleSize ??\n        toolbarConfig.titleSize ??\n        (canPop ? 'large' : 'xlarge')\n      }\n      headingLevel={topToolbar?.headingLevel ?? toolbarConfig.headingLevel}\n      fill={!centerTitle}\n    />\n  );\n  return (\n    <section\n      class={`kui-nav-stack ${className}`.trim()}\n      id={id}\n      data-component=\"nav-stack\"\n      data-nav-stack-id={id}\n      data-depth={String(views.length)}\n      data-separator={separator}\n      data-chrome-dividers={\n        chromeDividers === 'always' || chromeDividers === 'none'\n          ? chromeDividers\n          : undefined\n      }\n      data-chrome-presentation={\n        chromePresentation === 'overlay' && !hideToolbar ? 'overlay' : undefined\n      }\n      data-bottom-toolbar-presentation={\n        bottomToolbarPresentation === 'overlay' ? 'overlay' : undefined\n      }\n      aria-label={label}\n      slot={slot}\n    >\n      {!hideToolbar && (\n        <div class=\"kui-nav-stack__chrome\" data-nav-stack-chrome>\n          <Toolbar\n            label={topToolbar?.label ?? toolbarConfig.label}\n            density={topDensity}\n            dividerSides={\n              topToolbar?.dividerSides ?? toolbarConfig.dividerSides\n            }\n            centerAlign={\n              centerTitle\n                ? 'balanced'\n                : (topToolbar?.centerAlign ?? toolbarConfig.centerAlign)\n            }\n            responsive={topToolbar?.responsive ?? toolbarConfig.responsive}\n            responsiveAt={\n              topToolbar?.responsiveAt ?? toolbarConfig.responsiveAt\n            }\n            safeAreaEdges={\n              topToolbar?.safeAreaEdges ??\n              toolbarConfig.safeAreaEdges ??\n              DEFAULT_SAFE_AREA_EDGES\n            }\n            leading={\n              <>\n                {canPop && (\n                  <ToolbarControlGroup\n                    content={backText ? 'mixed' : 'icon'}\n                    size={topDensity === 'compact' ? 'compact' : 'default'}\n                    single\n                  >\n                    <button\n                      type=\"button\"\n                      class=\"kui-nav-stack__back\"\n                      data-nav-back\n                      aria-label={backText ? undefined : backLabel}\n                    >\n                      {backIcon ?? (\n                        <LucideIcon\n                          icon={ChevronLeft}\n                          name=\"chevron-left\"\n                          className=\"kui-nav-stack__back-icon\"\n                        />\n                      )}\n                      {backText ? <span>{backText}</span> : null}\n                    </button>\n                  </ToolbarControlGroup>\n                )}\n                {topToolbar?.leading}\n                {centerTitle ? null : title}\n              </>\n            }\n            center={centerTitle ? title : topToolbar?.center}\n            trailing={\n              <>\n                {topToolbar?.trailing}\n                {panelToggle}\n              </>\n            }\n          />\n        </div>\n      )}\n      <div class=\"kui-nav-stack__viewport\" data-nav-stack-viewport>\n        {views.map((view, index) => (\n          <article\n            class=\"kui-nav-stack__view\"\n            data-key={view.key}\n            data-nav-key={view.key}\n            data-nav-active={String(index === topIndex)}\n            aria-hidden={String(index !== topIndex)}\n          >\n            {view.pane ||\n            view.header !== undefined ||\n            view.footer !== undefined ? (\n              <Pane\n                {...paneConfigProps(view.pane)}\n                header={\n                  view.header === undefined ? undefined : (\n                    <div data-nav-stack-header>\n                      {chromeList(view.header, view.headerList)}\n                    </div>\n                  )\n                }\n                footer={\n                  view.footer === undefined ? undefined : (\n                    <div data-nav-stack-footer>\n                      {chromeList(view.footer, view.footerList)}\n                    </div>\n                  )\n                }\n              >\n                {view.content}\n              </Pane>\n            ) : (\n              view.content\n            )}\n          </article>\n        ))}\n      </div>\n      {bottom && (\n        <footer class=\"kui-nav-stack__bottom\" data-nav-stack-bottom>\n          <Toolbar\n            position=\"footer\"\n            label={bottom.label}\n            density={bottom.density}\n            dividerSides={bottom.dividerSides}\n            centerAlign={bottom.centerAlign}\n            responsive={bottom.responsive}\n            responsiveAt={bottom.responsiveAt}\n            safeAreaEdges={\n              bottom.safeAreaEdges ?? DEFAULT_BOTTOM_SAFE_AREA_EDGES\n            }\n            leading={bottom.leading}\n            center={bottom.center}\n            trailing={bottom.trailing}\n          />\n        </footer>\n      )}\n    </section>\n  );\n}\n"]}

package/dist/{chunk-Y43B6DS3.js → chunk-CVD5IZGB.js}

@@ -1,4 +1,4 @@
-import { pct } from './chunk-U657IHFB.js';
+import { pct } from './chunk-IQSRHXZR.js';
 import { jsx } from 'kerfjs/jsx-runtime';
 
 function blockStyle(width, height, radius) {
@@ -63,4 +63,4 @@ function Skeleton({
 
 export { Skeleton };
 
-//# sourceMappingURL=chunk-Y43B6DS3.js.map
+//# sourceMappingURL=chunk-CVD5IZGB.js.map

package/dist/{chunk-Y43B6DS3.js.map → chunk-CVD5IZGB.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/feedback/skeleton/skeleton.tsx"],"names":[],"mappings":";;;AA0BA,SAAS,UAAA,CACP,KAAA,EACA,MAAA,EACA,MAAA,EACoB;AACpB,EAAA,MAAM,KAAA,GAAQ;AAAA,IACZ,KAAA,IAAS,SAAS,KAAK,CAAA,CAAA;AAAA,IACvB,MAAA,IAAU,UAAU,MAAM,CAAA,CAAA;AAAA,IAC1B,MAAA,IAAU,yBAAyB,MAAM,CAAA;AAAA,GAC3C,CAAE,OAAO,OAAO,CAAA;AAChB,EAAA,OAAO,KAAA,CAAM,MAAA,GAAS,KAAA,CAAM,IAAA,CAAK,GAAG,CAAA,GAAI,MAAA;AAC1C;AAQO,SAAS,QAAA,CAAS;AAAA,EACvB,KAAA;AAAA,EACA,MAAA;AAAA,EACA,MAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA,GAAQ,KAAA;AAAA,EACR,KAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ;AACF,CAAA,EAAkB;AAChB,EAAA,MAAM,IAAA,GAAO;AAAA,IACX,IAAA,EAAM,QAAQ,KAAA,GAAQ,MAAA;AAAA,IACtB,YAAA,EAAc,KAAA;AAAA,IACd,aAAA,EAAe,QAAQ,MAAA,GAAa;AAAA,GACtC;AACA,EAAA,IAAI,KAAA,IAAS,QAAQ,CAAA,EAAG;AACtB,IAAA,uBACE,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,KAAA,EAAO,CAAA,mBAAA,EAAsB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,QAC9C,gBAAA,EAAe,UAAA;AAAA,QACf,KAAA,EAAO,KAAA,GAAQ,CAAA,MAAA,EAAS,KAAK,CAAA,CAAA,GAAK,MAAA;AAAA,QACjC,GAAG,IAAA;AAAA,QACJ,IAAA;AAAA,QAEC,QAAA,EAAA,KAAA,CAAM,KAAK,EAAE,MAAA,EAAQ,OAAM,EAAG,CAAC,GAAG,KAAA,qBACjC,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,KAAA,EAAM,cAAA;AAAA,YACN,aAAA,EAAY,MAAA;AAAA,YACZ,KAAA,EAAO,UAAA;AAAA,cACL,KAAA,KAAU,KAAA,GAAQ,CAAA,GAAI,GAAA,CAAI,EAAE,CAAA,GAAI,MAAA;AAAA,cAChC,MAAA;AAAA,cACA;AAAA;AACF;AAAA,SAEH;AAAA;AAAA,KACH;AAAA,EAEJ;AACA,EAAA,uBACE,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,aAAA,EAAgB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MACxC,gBAAA,EAAe,UAAA;AAAA,MACf,YAAA,EAAY,QAAQ,MAAA,GAAS,MAAA;AAAA,MAC7B,KAAA,EAAO,UAAA,CAAW,KAAA,EAAO,MAAA,EAAQ,MAAM,CAAA;AAAA,MACtC,GAAG,IAAA;AAAA,MACJ;AAAA;AAAA,GACF;AAEJ","file":"chunk-Y43B6DS3.js","sourcesContent":["import {\n  type CssLength,\n  type CssSize,\n  pct,\n} from '../../../shared/styles/css-values.js';\n\nexport interface SkeletonProps {\n  /** Typed width or intrinsic sizing keyword. Defaults to filling its slot. */\n  width?: CssSize;\n  /** Typed height or intrinsic sizing keyword. Defaults to a single text line. */\n  height?: CssSize;\n  /** Typed corner-radius override. Defaults to the small radius token. */\n  radius?: CssLength;\n  /** Render this many stacked lines (the last one shorter), for multi-line text. */\n  lines?: number;\n  /** Lay the block out as `display: block` instead of the default\n   *  `inline-block`, so it takes no text line of its own: no baseline gap\n   *  below it, and it centers like an icon in a slot. Defaults to `false`. */\n  block?: boolean;\n  /** Accessible label. Omit to keep the block decorative (`aria-hidden`). */\n  label?: string;\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\nfunction blockStyle(\n  width?: CssSize,\n  height?: CssSize,\n  radius?: CssLength,\n): string | undefined {\n  const parts = [\n    width && `width:${width}`,\n    height && `height:${height}`,\n    radius && `--kui-skeleton-radius:${radius}`,\n  ].filter(Boolean);\n  return parts.length ? parts.join(';') : undefined;\n}\n\n/**\n * A subtle, deliberately **unanimated** loading placeholder block. Use it for a\n * value slot whose content is not yet known, on its own or via a component's\n * `placeholder` prop. Decorative by default (`aria-hidden`); pass `label` to\n * announce it. Sizes to its slot unless `width`/`height` are given.\n */\nexport function Skeleton({\n  width,\n  height,\n  radius,\n  lines,\n  block = false,\n  label,\n  className = '',\n  slot,\n}: SkeletonProps) {\n  const a11y = {\n    role: label ? 'img' : undefined,\n    'aria-label': label,\n    'aria-hidden': label ? undefined : ('true' as const),\n  };\n  if (lines && lines > 1) {\n    return (\n      <span\n        class={`kui-skeleton-lines ${className}`.trim()}\n        data-component=\"skeleton\"\n        style={width ? `width:${width}` : undefined}\n        {...a11y}\n        slot={slot}\n      >\n        {Array.from({ length: lines }, (_, index) => (\n          <span\n            class=\"kui-skeleton\"\n            aria-hidden=\"true\"\n            style={blockStyle(\n              index === lines - 1 ? pct(60) : undefined,\n              height,\n              radius,\n            )}\n          />\n        ))}\n      </span>\n    );\n  }\n  return (\n    <span\n      class={`kui-skeleton ${className}`.trim()}\n      data-component=\"skeleton\"\n      data-block={block ? 'true' : undefined}\n      style={blockStyle(width, height, radius)}\n      {...a11y}\n      slot={slot}\n    />\n  );\n}\n"]}
+{"version":3,"sources":["../src/components/feedback/skeleton/skeleton.tsx"],"names":[],"mappings":";;;AA0BA,SAAS,UAAA,CACP,KAAA,EACA,MAAA,EACA,MAAA,EACoB;AACpB,EAAA,MAAM,KAAA,GAAQ;AAAA,IACZ,KAAA,IAAS,SAAS,KAAK,CAAA,CAAA;AAAA,IACvB,MAAA,IAAU,UAAU,MAAM,CAAA,CAAA;AAAA,IAC1B,MAAA,IAAU,yBAAyB,MAAM,CAAA;AAAA,GAC3C,CAAE,OAAO,OAAO,CAAA;AAChB,EAAA,OAAO,KAAA,CAAM,MAAA,GAAS,KAAA,CAAM,IAAA,CAAK,GAAG,CAAA,GAAI,MAAA;AAC1C;AAQO,SAAS,QAAA,CAAS;AAAA,EACvB,KAAA;AAAA,EACA,MAAA;AAAA,EACA,MAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA,GAAQ,KAAA;AAAA,EACR,KAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ;AACF,CAAA,EAAkB;AAChB,EAAA,MAAM,IAAA,GAAO;AAAA,IACX,IAAA,EAAM,QAAQ,KAAA,GAAQ,MAAA;AAAA,IACtB,YAAA,EAAc,KAAA;AAAA,IACd,aAAA,EAAe,QAAQ,MAAA,GAAa;AAAA,GACtC;AACA,EAAA,IAAI,KAAA,IAAS,QAAQ,CAAA,EAAG;AACtB,IAAA,uBACE,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,KAAA,EAAO,CAAA,mBAAA,EAAsB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,QAC9C,gBAAA,EAAe,UAAA;AAAA,QACf,KAAA,EAAO,KAAA,GAAQ,CAAA,MAAA,EAAS,KAAK,CAAA,CAAA,GAAK,MAAA;AAAA,QACjC,GAAG,IAAA;AAAA,QACJ,IAAA;AAAA,QAEC,QAAA,EAAA,KAAA,CAAM,KAAK,EAAE,MAAA,EAAQ,OAAM,EAAG,CAAC,GAAG,KAAA,qBACjC,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,KAAA,EAAM,cAAA;AAAA,YACN,aAAA,EAAY,MAAA;AAAA,YACZ,KAAA,EAAO,UAAA;AAAA,cACL,KAAA,KAAU,KAAA,GAAQ,CAAA,GAAI,GAAA,CAAI,EAAE,CAAA,GAAI,MAAA;AAAA,cAChC,MAAA;AAAA,cACA;AAAA;AACF;AAAA,SAEH;AAAA;AAAA,KACH;AAAA,EAEJ;AACA,EAAA,uBACE,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,aAAA,EAAgB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MACxC,gBAAA,EAAe,UAAA;AAAA,MACf,YAAA,EAAY,QAAQ,MAAA,GAAS,MAAA;AAAA,MAC7B,KAAA,EAAO,UAAA,CAAW,KAAA,EAAO,MAAA,EAAQ,MAAM,CAAA;AAAA,MACtC,GAAG,IAAA;AAAA,MACJ;AAAA;AAAA,GACF;AAEJ","file":"chunk-CVD5IZGB.js","sourcesContent":["import {\n  type CssLength,\n  type CssSize,\n  pct,\n} from '../../../shared/styles/css-values.js';\n\nexport interface SkeletonProps {\n  /** Typed width or intrinsic sizing keyword. Defaults to filling its slot. */\n  width?: CssSize;\n  /** Typed height or intrinsic sizing keyword. Defaults to a single text line. */\n  height?: CssSize;\n  /** Typed corner-radius override. Defaults to the small radius token. */\n  radius?: CssLength;\n  /** Render this many stacked lines (the last one shorter), for multi-line text. */\n  lines?: number;\n  /** Lay the block out as `display: block` instead of the default\n   *  `inline-block`, so it takes no text line of its own: no baseline gap\n   *  below it, and it centers like an icon in a slot. Defaults to `false`. */\n  block?: boolean;\n  /** Accessible label. Omit to keep the block decorative (`aria-hidden`). */\n  label?: string;\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\nfunction blockStyle(\n  width?: CssSize,\n  height?: CssSize,\n  radius?: CssLength,\n): string | undefined {\n  const parts = [\n    width && `width:${width}`,\n    height && `height:${height}`,\n    radius && `--kui-skeleton-radius:${radius}`,\n  ].filter(Boolean);\n  return parts.length ? parts.join(';') : undefined;\n}\n\n/**\n * A subtle, deliberately **unanimated** loading placeholder block. Use it for a\n * value slot whose content is not yet known, on its own or via a component's\n * `placeholder` prop. Decorative by default (`aria-hidden`); pass `label` to\n * announce it. Sizes to its slot unless `width`/`height` are given.\n */\nexport function Skeleton({\n  width,\n  height,\n  radius,\n  lines,\n  block = false,\n  label,\n  className = '',\n  slot,\n}: SkeletonProps) {\n  const a11y = {\n    role: label ? 'img' : undefined,\n    'aria-label': label,\n    'aria-hidden': label ? undefined : ('true' as const),\n  };\n  if (lines && lines > 1) {\n    return (\n      <span\n        class={`kui-skeleton-lines ${className}`.trim()}\n        data-component=\"skeleton\"\n        style={width ? `width:${width}` : undefined}\n        {...a11y}\n        slot={slot}\n      >\n        {Array.from({ length: lines }, (_, index) => (\n          <span\n            class=\"kui-skeleton\"\n            aria-hidden=\"true\"\n            style={blockStyle(\n              index === lines - 1 ? pct(60) : undefined,\n              height,\n              radius,\n            )}\n          />\n        ))}\n      </span>\n    );\n  }\n  return (\n    <span\n      class={`kui-skeleton ${className}`.trim()}\n      data-component=\"skeleton\"\n      data-block={block ? 'true' : undefined}\n      style={blockStyle(width, height, radius)}\n      {...a11y}\n      slot={slot}\n    />\n  );\n}\n"]}

package/dist/{chunk-6STQXRT4.js → chunk-CXZXHZTR.js}

@@ -9,6 +9,10 @@ var TARGET_EDGES = {
 };
 var SCROLL_OVERFLOW = "data-scroll-overflow";
 var SCROLL_DIVIDER = "data-scroll-divider";
+var HEADER_OVERLAY = "data-header-overlay";
+var CLEARANCE_BLOCK_START = "--kui-scroll-clearance-block-start";
+var SCROLLBAR_INLINE_SIZE = "--kui-pane-scrollbar-inline-size";
+var OVERLAY_PANE = '.kui-pane[data-header-presentation="overlay"]:not([data-chrome-placement="auto"])';
 var THRESHOLD = 1;
 var quoted = (value) => `"${value.replaceAll("\\", "\\\\").replaceAll('"', '\\"')}"`;
 function within(root, selector) {
@@ -126,6 +130,10 @@ function createController(ownerDocument) {
   let pairings = [];
   const overflow = /* @__PURE__ */ new Map();
   const written = /* @__PURE__ */ new Map();
+  let overlays = /* @__PURE__ */ new Map();
+  const headerSizes = /* @__PURE__ */ new Map();
+  const scrollbarSizes = /* @__PURE__ */ new Map();
+  const published = /* @__PURE__ */ new Set();
   const byId = (root, id) => {
     if (!id) return void 0;
     const [match] = within(root, `[id=${quoted(id)}]`);
@@ -170,6 +178,69 @@ function createController(ownerDocument) {
     }
     return found;
   };
+  const collectOverlays = () => {
+    const found = /* @__PURE__ */ new Map();
+    for (const { root } of registrations)
+      for (const pane of within(root, OVERLAY_PANE)) {
+        const header = directChild(pane, PANE_CHROME.t);
+        if (header) found.set(header, pane);
+      }
+    return found;
+  };
+  const measureScrollbars = () => {
+    let changed = false;
+    for (const [header, pane] of overlays) {
+      const scroller = directChild(pane, ".kui-pane__content");
+      let size = 0;
+      if (scroller) {
+        const style = scroller.ownerDocument.defaultView.getComputedStyle(scroller);
+        size = Math.max(
+          0,
+          scroller.offsetWidth - scroller.clientWidth - (Number.parseFloat(style.borderLeftWidth) || 0) - (Number.parseFloat(style.borderRightWidth) || 0)
+        );
+      }
+      if (scrollbarSizes.get(header) === size) continue;
+      scrollbarSizes.set(header, size);
+      changed = true;
+    }
+    return changed;
+  };
+  const overlayObserver = view?.MutationObserver ? new view.MutationObserver(() => {
+    if (!disposed) publish();
+  }) : void 0;
+  const publish = () => {
+    const current = /* @__PURE__ */ new Map();
+    for (const [header, pane] of overlays) {
+      const size = headerSizes.get(header);
+      const scrollbar = scrollbarSizes.get(header);
+      if (size !== void 0)
+        current.set(pane, [`${size}px`, scrollbar ? `${scrollbar}px` : ""]);
+    }
+    overlayObserver?.disconnect();
+    for (const pane of published)
+      if (!current.has(pane)) {
+        pane.style.removeProperty(CLEARANCE_BLOCK_START);
+        pane.style.removeProperty(SCROLLBAR_INLINE_SIZE);
+        if (!pane.getAttribute("style")) pane.removeAttribute("style");
+        pane.removeAttribute(HEADER_OVERLAY);
+      }
+    published.clear();
+    for (const [pane, [value, scrollbar]] of current) {
+      if (pane.style.getPropertyValue(CLEARANCE_BLOCK_START) !== value)
+        pane.style.setProperty(CLEARANCE_BLOCK_START, value);
+      if (pane.style.getPropertyValue(SCROLLBAR_INLINE_SIZE) !== scrollbar) {
+        if (scrollbar) pane.style.setProperty(SCROLLBAR_INLINE_SIZE, scrollbar);
+        else pane.style.removeProperty(SCROLLBAR_INLINE_SIZE);
+      }
+      if (pane.getAttribute(HEADER_OVERLAY) !== "measured")
+        pane.setAttribute(HEADER_OVERLAY, "measured");
+      published.add(pane);
+      overlayObserver?.observe(pane, {
+        attributes: true,
+        attributeFilter: ["style", HEADER_OVERLAY]
+      });
+    }
+  };
   const apply = () => {
     const current = /* @__PURE__ */ new Map();
     const dividers = /* @__PURE__ */ new Map();
@@ -195,13 +266,25 @@ function createController(ownerDocument) {
       for (const [name, value] of values) write(element, name, value);
     }
   };
-  const observed = /* @__PURE__ */ new Set();
+  const observed = /* @__PURE__ */ new Map();
   let probe;
   let probePending = false;
   const resizeObserver = view?.ResizeObserver ? new view.ResizeObserver((entries) => {
     if (disposed) return;
     const scrollers = new Set(pairings.map(({ scroller }) => scroller));
-    for (const { target } of entries) {
+    let headerResized = false;
+    let scrollersResized = false;
+    for (const entry of entries) {
+      const { target } = entry;
+      if (overlays.has(target)) {
+        headerSizes.set(
+          target,
+          entry.borderBoxSize?.[0]?.blockSize ?? target.getBoundingClientRect().height
+        );
+        headerResized = true;
+        continue;
+      }
+      scrollersResized = true;
       if (target === probe) {
         probePending = false;
         for (const scroller2 of overflow.keys())
@@ -212,24 +295,30 @@ function createController(ownerDocument) {
       if (scroller && scrollers.has(scroller))
         overflow.set(scroller, measure(scroller));
     }
+    if (scrollersResized && measureScrollbars()) headerResized = true;
     apply();
+    if (headerResized) publish();
   }) : void 0;
   const observeSizes = () => {
     if (!resizeObserver) return;
-    const wanted = /* @__PURE__ */ new Set();
+    const wanted = /* @__PURE__ */ new Map();
     for (const { scroller } of pairings) {
-      wanted.add(scroller);
-      for (const child of scroller.children) wanted.add(child);
+      wanted.set(scroller, false);
+      for (const child of scroller.children) wanted.set(child, false);
     }
-    for (const element of observed)
+    for (const header of overlays.keys()) wanted.set(header, true);
+    for (const element of observed.keys())
       if (!wanted.has(element)) {
         resizeObserver.unobserve(element);
         observed.delete(element);
       }
-    for (const element of wanted)
-      if (!observed.has(element)) {
-        resizeObserver.observe(element);
-        observed.add(element);
+    for (const [element, borderBox] of wanted)
+      if (observed.get(element) !== borderBox) {
+        resizeObserver.observe(
+          element,
+          borderBox ? { box: "border-box" } : void 0
+        );
+        observed.set(element, borderBox);
       }
   };
   const refresh = (afterLayout = false) => {
@@ -242,8 +331,19 @@ function createController(ownerDocument) {
         scroller,
         previous ? previous.get(scroller) ?? "" : measure(scroller)
       );
+    overlays = collectOverlays();
+    for (const sizes of [headerSizes, scrollbarSizes])
+      for (const header of sizes.keys())
+        if (!overlays.has(header)) sizes.delete(header);
+    if (!deferred) {
+      for (const header of overlays.keys())
+        if (!headerSizes.has(header))
+          headerSizes.set(header, header.getBoundingClientRect().height);
+    }
+    if (!deferred) measureScrollbars();
     observeSizes();
     apply();
+    publish();
     if (deferred) scheduleRemeasure();
   };
   const remeasure = () => {
@@ -255,6 +355,7 @@ function createController(ownerDocument) {
       changed = true;
     }
     if (changed) apply();
+    if (measureScrollbars()) publish();
   };
   let remeasureFrame;
   const scheduleRemeasure = () => {
@@ -359,8 +460,11 @@ function createController(ownerDocument) {
         attributes: true,
         // Old values tell a class or id that stopped being structural.
         attributeOldValue: true,
-        // The shown NavStack view and TabNavigator scene change by attribute.
+        // The shown NavStack view and TabNavigator scene change by attribute,
+        // and a Pane's header presentation by its attributes.
         attributeFilter: [
+          "data-header-presentation",
+          "data-chrome-placement",
           SCROLL_OVERFLOW,
           SCROLL_DIVIDER,
           "id",
@@ -391,6 +495,11 @@ function createController(ownerDocument) {
         for (const [element, values] of written)
           for (const name of values.keys()) write(element, name, "");
         written.clear();
+        overlays.clear();
+        headerSizes.clear();
+        scrollbarSizes.clear();
+        publish();
+        overlayObserver?.disconnect();
         overflow.clear();
         observed.clear();
         pairings = [];
@@ -402,4 +511,4 @@ function createController(ownerDocument) {
 
 export { wireScrollDividers };
 
-//# sourceMappingURL=chunk-6STQXRT4.js.map
+//# sourceMappingURL=chunk-CXZXHZTR.js.map