@kerfjs/ui 5.0.0-beta.11 → 5.0.0-beta.111

package/dist/device-class.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/device-class.ts"],"names":[],"mappings":"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","file":"device-class.js","sourcesContent":["import { computed, type ReadonlySignal, signal } from 'kerfjs';\n\n/**\n * Reactive device-class detection for `@kerfjs/ui` (see `docs/23-app-layouts.md`\n * §2). `deviceClass()` returns a `ReadonlySignal<DeviceClass>` describing the\n * current viewport as a size bucket × orientation × viewport-segment count, so a\n * layout can pick its presentation reactively instead of hand-wiring `matchMedia`.\n *\n * One shared viewport source backs every reader; the pure `classifyViewport`\n * core is DOM-free and directly unit-tested.\n */\n\nexport type DeviceSize = 'xs-mobile' | 'mobile' | 'tablet' | 'desktop' | 'xl-desktop';\nexport type DeviceOrientation = 'portrait' | 'landscape';\n\n/** Minimum widths (px) at which each larger bucket begins. `xs-mobile` is 0. */\nexport interface DeviceBreakpoints {\n  mobile: number;\n  tablet: number;\n  desktop: number;\n  'xl-desktop': number;\n}\n\nexport interface DeviceClass {\n  size: DeviceSize;\n  orientation: DeviceOrientation;\n  /** Horizontal viewport segments (foldables / dual-screen); 1 on ordinary devices. */\n  segments: number;\n  /** Vertical viewport segments; 1 on ordinary devices. */\n  verticalSegments: number;\n  /** Small phones — `xs-mobile` or `mobile`. */\n  handset: boolean;\n  /** \"One pane at a time\" — a handset or a portrait tablet. */\n  compact: boolean;\n  /** True when the current size is `size` or larger, e.g. `atLeast('tablet')`. */\n  atLeast(size: DeviceSize): boolean;\n}\n\n/** A raw viewport snapshot, before breakpoints are applied. */\nexport interface Viewport {\n  width: number;\n  height: number;\n  segments: number;\n  verticalSegments: number;\n}\n\nexport interface DeviceClassOptions {\n  /** Override any of the default bucket thresholds. */\n  breakpoints?: Partial<DeviceBreakpoints>;\n  /** The viewport assumed when there is no DOM (SSR). Defaults to 1024×768, one segment. */\n  ssr?: Partial<Viewport>;\n}\n\nexport const DEFAULT_BREAKPOINTS: DeviceBreakpoints = {\n  mobile: 360,\n  tablet: 720,\n  desktop: 1024,\n  'xl-desktop': 1440,\n};\n\nconst SIZE_ORDER: readonly DeviceSize[] = ['xs-mobile', 'mobile', 'tablet', 'desktop', 'xl-desktop'];\n\nconst SSR_VIEWPORT: Viewport = { width: 1024, height: 768, segments: 1, verticalSegments: 1 };\n\n/**\n * Classify a raw viewport into a {@link DeviceClass}. Pure and DOM-free — the\n * single source of truth for the bucketing rules.\n */\nexport function classifyViewport(\n  width: number,\n  orientation: DeviceOrientation,\n  segments = 1,\n  verticalSegments = 1,\n  breakpoints: DeviceBreakpoints = DEFAULT_BREAKPOINTS,\n): DeviceClass {\n  const size: DeviceSize =\n    width >= breakpoints['xl-desktop']\n      ? 'xl-desktop'\n      : width >= breakpoints.desktop\n        ? 'desktop'\n        : width >= breakpoints.tablet\n          ? 'tablet'\n          : width >= breakpoints.mobile\n            ? 'mobile'\n            : 'xs-mobile';\n  const rank = SIZE_ORDER.indexOf(size);\n  return {\n    size,\n    orientation,\n    segments,\n    verticalSegments,\n    handset: rank <= 1,\n    compact: rank <= 1 || (size === 'tablet' && orientation === 'portrait'),\n    atLeast: (target) => rank >= SIZE_ORDER.indexOf(target),\n  };\n}\n\n/** Count viewport segments along one axis, feature-detecting the media query. */\nfunction countSegments(axis: 'horizontal' | 'vertical', view: Window): number {\n  const mq = view.matchMedia;\n  if (typeof mq !== 'function') return 1;\n  for (let n = 4; n >= 2; n--) {\n    if (mq.call(view, `(${axis}-viewport-segments: ${n})`).matches) return n;\n  }\n  return 1;\n}\n\n/** Read the current viewport from a browser window. */\nfunction readViewport(view: Window): Viewport {\n  return {\n    width: view.innerWidth,\n    height: view.innerHeight,\n    segments: countSegments('horizontal', view),\n    verticalSegments: countSegments('vertical', view),\n  };\n}\n\n/** The browser window, or `undefined` when running without a DOM (SSR). */\nfunction browserWindow(): Window | undefined {\n  return typeof window === 'undefined' ? undefined : window;\n}\n\nlet sharedSource: ReturnType<typeof signal<Viewport>> | undefined;\n\n/**\n * The shared reactive viewport source. Installed lazily on first read and kept\n * for the life of the page — there is only ever one viewport, so a single\n * listener set backs every `deviceClass()` reader.\n */\nfunction viewportSource(view: Window): ReturnType<typeof signal<Viewport>> {\n  if (sharedSource) return sharedSource;\n  const source = signal(readViewport(view));\n  sharedSource = source;\n  const update = (): void => {\n    source.value = readViewport(view);\n  };\n  view.addEventListener('resize', update);\n  view.addEventListener('orientationchange', update);\n  return source;\n}\n\nfunction orientationOf(view: Viewport): DeviceOrientation {\n  return view.height > view.width ? 'portrait' : 'landscape';\n}\n\n/**\n * A reactive signal of the current {@link DeviceClass}. Reading it inside an\n * `effect`/`computed` re-runs when the viewport crosses a breakpoint, rotates,\n * or changes its segment count. Without a DOM it resolves to `options.ssr`\n * (default 1024×768, landscape, one segment).\n */\nexport function deviceClass(options: DeviceClassOptions = {}): ReadonlySignal<DeviceClass> {\n  const breakpoints: DeviceBreakpoints = { ...DEFAULT_BREAKPOINTS, ...options.breakpoints };\n  const view = browserWindow();\n  if (!view) {\n    const snapshot: Viewport = { ...SSR_VIEWPORT, ...options.ssr };\n    return computed(() => classifyViewport(snapshot.width, orientationOf(snapshot), snapshot.segments, snapshot.verticalSegments, breakpoints));\n  }\n  const source = viewportSource(view);\n  return computed(() => {\n    const v = source.value;\n    return classifyViewport(v.width, orientationOf(v), v.segments, v.verticalSegments, breakpoints);\n  });\n}\n"]}
+{"version":3,"sources":["../src/shared/environment/device-class.ts"],"names":[],"mappings":"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","file":"device-class.js","sourcesContent":["import { computed, type ReadonlySignal, signal } from 'kerfjs';\n\n/**\n * Reactive device-class detection for `@kerfjs/ui` (see `docs/23-app-layouts.md`\n * §2). `deviceClass()` returns a `ReadonlySignal<DeviceClass>` describing the\n * current viewport as a size bucket × orientation × viewport-segment count, so a\n * layout can pick its presentation reactively instead of hand-wiring `matchMedia`.\n *\n * One shared viewport source backs every reader; the pure `classifyViewport`\n * core is DOM-free and directly unit-tested.\n */\n\nexport type DeviceSize =\n  'xs-mobile' | 'mobile' | 'tablet' | 'desktop' | 'xl-desktop';\nexport type DeviceOrientation = 'portrait' | 'landscape';\n\n/** Minimum widths (px) at which each larger bucket begins. `xs-mobile` is 0. */\nexport interface DeviceBreakpoints {\n  mobile: number;\n  tablet: number;\n  desktop: number;\n  'xl-desktop': number;\n}\n\nexport interface DeviceClass {\n  size: DeviceSize;\n  orientation: DeviceOrientation;\n  /** Horizontal viewport segments (foldables / dual-screen); 1 on ordinary devices. */\n  segments: number;\n  /** Vertical viewport segments; 1 on ordinary devices. */\n  verticalSegments: number;\n  /** Small phones — `xs-mobile` or `mobile`. */\n  handset: boolean;\n  /** \"One pane at a time\" — a handset or a portrait tablet. */\n  compact: boolean;\n  /** True when the current size is `size` or larger, e.g. `atLeast('tablet')`. */\n  atLeast(size: DeviceSize): boolean;\n}\n\n/** A raw viewport snapshot, before breakpoints are applied. */\nexport interface Viewport {\n  width: number;\n  height: number;\n  segments: number;\n  verticalSegments: number;\n}\n\nexport interface DeviceClassOptions {\n  /** Override any of the default bucket thresholds. */\n  breakpoints?: Partial<DeviceBreakpoints>;\n  /** The viewport assumed when there is no DOM (SSR). Defaults to 1024×768, one segment. */\n  ssr?: Partial<Viewport>;\n}\n\nexport const DEFAULT_BREAKPOINTS: DeviceBreakpoints = {\n  mobile: 360,\n  tablet: 720,\n  desktop: 1024,\n  'xl-desktop': 1440,\n};\n\nconst SIZE_ORDER: readonly DeviceSize[] = [\n  'xs-mobile',\n  'mobile',\n  'tablet',\n  'desktop',\n  'xl-desktop',\n];\n\nconst SSR_VIEWPORT: Viewport = {\n  width: 1024,\n  height: 768,\n  segments: 1,\n  verticalSegments: 1,\n};\n\n/**\n * Classify a raw viewport into a {@link DeviceClass}. Pure and DOM-free — the\n * single source of truth for the bucketing rules.\n */\nexport function classifyViewport(\n  width: number,\n  orientation: DeviceOrientation,\n  segments = 1,\n  verticalSegments = 1,\n  breakpoints: DeviceBreakpoints = DEFAULT_BREAKPOINTS,\n): DeviceClass {\n  const size: DeviceSize =\n    width >= breakpoints['xl-desktop']\n      ? 'xl-desktop'\n      : width >= breakpoints.desktop\n        ? 'desktop'\n        : width >= breakpoints.tablet\n          ? 'tablet'\n          : width >= breakpoints.mobile\n            ? 'mobile'\n            : 'xs-mobile';\n  const rank = SIZE_ORDER.indexOf(size);\n  return {\n    size,\n    orientation,\n    segments,\n    verticalSegments,\n    handset: rank <= 1,\n    compact: rank <= 1 || (size === 'tablet' && orientation === 'portrait'),\n    atLeast: (target) => rank >= SIZE_ORDER.indexOf(target),\n  };\n}\n\n/** Count viewport segments along one axis, feature-detecting the media query. */\nfunction countSegments(axis: 'horizontal' | 'vertical', view: Window): number {\n  const mq = view.matchMedia;\n  if (typeof mq !== 'function') return 1;\n  for (let n = 4; n >= 2; n--) {\n    if (mq.call(view, `(${axis}-viewport-segments: ${n})`).matches) return n;\n  }\n  return 1;\n}\n\n/** Read the current viewport from a browser window. */\nfunction readViewport(view: Window): Viewport {\n  return {\n    width: view.innerWidth,\n    height: view.innerHeight,\n    segments: countSegments('horizontal', view),\n    verticalSegments: countSegments('vertical', view),\n  };\n}\n\n/** The browser window, or `undefined` when running without a DOM (SSR). */\nfunction browserWindow(): Window | undefined {\n  return typeof window === 'undefined' ? undefined : window;\n}\n\nlet sharedSource: ReturnType<typeof signal<Viewport>> | undefined;\n\n/**\n * The shared reactive viewport source. Installed lazily on first read and kept\n * for the life of the page — there is only ever one viewport, so a single\n * listener set backs every `deviceClass()` reader.\n */\nfunction viewportSource(view: Window): ReturnType<typeof signal<Viewport>> {\n  if (sharedSource) return sharedSource;\n  const source = signal(readViewport(view));\n  sharedSource = source;\n  const update = (): void => {\n    source.value = readViewport(view);\n  };\n  view.addEventListener('resize', update);\n  view.addEventListener('orientationchange', update);\n  return source;\n}\n\nfunction orientationOf(view: Viewport): DeviceOrientation {\n  return view.height > view.width ? 'portrait' : 'landscape';\n}\n\n/**\n * A reactive signal of the current {@link DeviceClass}. Reading it inside an\n * `effect`/`computed` re-runs when the viewport crosses a breakpoint, rotates,\n * or changes its segment count. Without a DOM it resolves to `options.ssr`\n * (default 1024×768, landscape, one segment).\n */\nexport function deviceClass(\n  options: DeviceClassOptions = {},\n): ReadonlySignal<DeviceClass> {\n  const breakpoints: DeviceBreakpoints = {\n    ...DEFAULT_BREAKPOINTS,\n    ...options.breakpoints,\n  };\n  const view = browserWindow();\n  if (!view) {\n    const snapshot: Viewport = { ...SSR_VIEWPORT, ...options.ssr };\n    return computed(() =>\n      classifyViewport(\n        snapshot.width,\n        orientationOf(snapshot),\n        snapshot.segments,\n        snapshot.verticalSegments,\n        breakpoints,\n      ),\n    );\n  }\n  const source = viewportSource(view);\n  return computed(() => {\n    const v = source.value;\n    return classifyViewport(\n      v.width,\n      orientationOf(v),\n      v.segments,\n      v.verticalSegments,\n      breakpoints,\n    );\n  });\n}\n"]}

package/dist/disclosure-arrow.d.ts

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

package/dist/disclosure-arrow.js

@@ -1,4 +1,5 @@
-export { DisclosureArrow } from './chunk-56RJXPHG.js';
+export { DisclosureArrow } from './chunk-TKNVL53O.js';
+
 
 
 //# sourceMappingURL=disclosure-arrow.js.map

package/dist/disclosure.d.ts

@@ -0,0 +1,66 @@
+import * as kerfjs from 'kerfjs';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
+
+/**
+ * The Disclosure's surface: `plain` (default) on the surrounding surface,
+ * `framed` with the standard neutral border, `sunken` on the lowered,
+ * textured work surface with a border, or `embedded` inside owner chrome such
+ * as a `ContentItem`: no margin, border, or padding of its own and a compact
+ * summary row, so the arrow sits on the owner's content inset.
+ */
+type DisclosureAppearance = 'plain' | 'framed' | 'sunken' | 'embedded';
+/**
+ * Application `data-*` identity on the `<details>` root, such as `data-key`;
+ * the Disclosure's own configuration attributes stay protected.
+ */
+type DisclosureRootAttributes = Readonly<Record<`data-${string}`, string | undefined>>;
+interface DisclosureProps {
+    /** The always-visible summary: a short title for the hidden content. */
+    title: KerfUiContent | string;
+    /** A quiet line after the title in the summary, such as a count. */
+    detail?: KerfUiContent | string;
+    /** The content shown while open. */
+    children: KerfUiContent | string;
+    /**
+     * Render it open. The open state belongs to the native `<details>` once it
+     * is on the page: a person toggles it, a re-render that passes `open` opens
+     * it, and a re-render never closes it (kerf's morph leaves a `<details>`
+     * element's live `open` alone). Close it from code with `element.open = false`.
+     */
+    open?: boolean;
+    /**
+     * An exclusive group: Disclosures sharing a `name` behave as an accordion,
+     * where opening one closes the others (the native `<details name>`).
+     */
+    name?: string;
+    /**
+     * Surface treatment; defaults to `plain`. Use `embedded` only inside chrome
+     * that already owns the content-item inset, such as a `ContentItem`, and
+     * give it content that draws no inset of its own (`Text flush`).
+     */
+    appearance?: DisclosureAppearance;
+    /**
+     * A `data-action` value on the `<details>` root, for a delegated listener of
+     * the native `toggle` event (it does not bubble: listen in the capture phase,
+     * for example with `delegateCapture`). `event.newState` is `open` or `closed`.
+     */
+    toggleAction?: string;
+    id?: string;
+    rootAttributes?: DisclosureRootAttributes;
+    className?: string;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
+}
+/**
+ * Content a person shows and hides under a summary row: a native `<details>`
+ * with a `<summary>` that carries a `DisclosureArrow` and the title, on the
+ * shared content-item geometry (8px inline margin, a 1px border, 8px
+ * padding, the rounded radius). `appearance="embedded"` drops that geometry
+ * for a Disclosure inside owner chrome (a `ContentItem`) that already insets
+ * it. Keyboard and screen-reader behavior is the
+ * platform's: the summary is a button that Enter and Space toggle, and it
+ * reports its expanded state. Disclosures sharing a `name` form an accordion.
+ */
+declare function Disclosure({ title, detail, children, open, name, appearance, toggleAction, id, rootAttributes, className, slot, }: DisclosureProps): kerfjs.SafeHtml;
+
+export { Disclosure, type DisclosureAppearance, type DisclosureProps, type DisclosureRootAttributes };

package/dist/disclosure.js

@@ -0,0 +1,51 @@
+import { DisclosureArrow } from './chunk-TKNVL53O.js';
+
+
+import { filterDataAttributes } from './chunk-KH4KEMSP.js';
+import { jsxs, jsx } from 'kerfjs/jsx-runtime';
+
+var DISCLOSURE_PROTECTED = /* @__PURE__ */ new Set([
+  "data-component",
+  "data-appearance",
+  "data-action"
+]);
+function Disclosure({
+  title,
+  detail,
+  children,
+  open = false,
+  name,
+  appearance = "plain",
+  toggleAction,
+  id,
+  rootAttributes = {},
+  className = "",
+  slot
+}) {
+  return /* @__PURE__ */ jsxs(
+    "details",
+    {
+      ...filterDataAttributes(rootAttributes, DISCLOSURE_PROTECTED),
+      id,
+      class: `kui-disclosure ${className}`.trim(),
+      "data-component": "disclosure",
+      "data-appearance": appearance,
+      "data-action": toggleAction,
+      name,
+      open: open || void 0,
+      slot,
+      children: [
+        /* @__PURE__ */ jsxs("summary", { class: "kui-disclosure__summary", children: [
+          /* @__PURE__ */ jsx(DisclosureArrow, { open }),
+          /* @__PURE__ */ jsx("span", { class: "kui-disclosure__title", children: title }),
+          detail === void 0 ? null : /* @__PURE__ */ jsx("span", { class: "kui-disclosure__detail", children: detail })
+        ] }),
+        /* @__PURE__ */ jsx("div", { class: "kui-disclosure__content", children })
+      ]
+    }
+  );
+}
+
+export { Disclosure };
+
+//# sourceMappingURL=disclosure.js.map

package/dist/disclosure.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/surfaces/disclosure/disclosure.tsx"],"names":[],"mappings":";;;;;;AAqBA,IAAM,oBAAA,uBAA2B,GAAA,CAAI;AAAA,EACnC,gBAAA;AAAA,EACA,iBAAA;AAAA,EACA;AACF,CAAC,CAAA;AAkDM,SAAS,UAAA,CAAW;AAAA,EACzB,KAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,IAAA,GAAO,KAAA;AAAA,EACP,IAAA;AAAA,EACA,UAAA,GAAa,OAAA;AAAA,EACb,YAAA;AAAA,EACA,EAAA;AAAA,EACA,iBAAiB,EAAC;AAAA,EAClB,SAAA,GAAY,EAAA;AAAA,EACZ;AACF,CAAA,EAAoB;AAClB,EAAA,uBACE,IAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACE,GAAG,oBAAA,CAAqB,cAAA,EAAgB,oBAAoB,CAAA;AAAA,MAC7D,EAAA;AAAA,MACA,KAAA,EAAO,CAAA,eAAA,EAAkB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAC1C,gBAAA,EAAe,YAAA;AAAA,MACf,iBAAA,EAAiB,UAAA;AAAA,MACjB,aAAA,EAAa,YAAA;AAAA,MACb,IAAA;AAAA,MACA,MAAM,IAAA,IAAQ,MAAA;AAAA,MACd,IAAA;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,SAAA,EAAA,EAAQ,OAAM,yBAAA,EACb,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,mBAAgB,IAAA,EAAY,CAAA;AAAA,0BAC7B,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,uBAAA,EAAyB,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,UAC1C,WAAW,MAAA,GAAY,IAAA,uBACrB,MAAA,EAAA,EAAK,KAAA,EAAM,0BAA0B,QAAA,EAAA,MAAA,EAAO;AAAA,SAAA,EAEjD,CAAA;AAAA,wBACA,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,yBAAA,EAA2B,QAAA,EAAS;AAAA;AAAA;AAAA,GACjD;AAEJ","file":"disclosure.js","sourcesContent":["import type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport { filterDataAttributes } from '../../../shared/dom/extension-attributes.js';\nimport { DisclosureArrow } from '../../navigation/disclosure-arrow/disclosure-arrow.js';\n\n/**\n * The Disclosure's surface: `plain` (default) on the surrounding surface,\n * `framed` with the standard neutral border, `sunken` on the lowered,\n * textured work surface with a border, or `embedded` inside owner chrome such\n * as a `ContentItem`: no margin, border, or padding of its own and a compact\n * summary row, so the arrow sits on the owner's content inset.\n */\nexport type DisclosureAppearance = 'plain' | 'framed' | 'sunken' | 'embedded';\n\n/**\n * Application `data-*` identity on the `<details>` root, such as `data-key`;\n * the Disclosure's own configuration attributes stay protected.\n */\nexport type DisclosureRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined>\n>;\n\nconst DISCLOSURE_PROTECTED = new Set([\n  'data-component',\n  'data-appearance',\n  'data-action',\n]);\n\nexport interface DisclosureProps {\n  /** The always-visible summary: a short title for the hidden content. */\n  title: KerfUiContent | string;\n  /** A quiet line after the title in the summary, such as a count. */\n  detail?: KerfUiContent | string;\n  /** The content shown while open. */\n  children: KerfUiContent | string;\n  /**\n   * Render it open. The open state belongs to the native `<details>` once it\n   * is on the page: a person toggles it, a re-render that passes `open` opens\n   * it, and a re-render never closes it (kerf's morph leaves a `<details>`\n   * element's live `open` alone). Close it from code with `element.open = false`.\n   */\n  open?: boolean;\n  /**\n   * An exclusive group: Disclosures sharing a `name` behave as an accordion,\n   * where opening one closes the others (the native `<details name>`).\n   */\n  name?: string;\n  /**\n   * Surface treatment; defaults to `plain`. Use `embedded` only inside chrome\n   * that already owns the content-item inset, such as a `ContentItem`, and\n   * give it content that draws no inset of its own (`Text flush`).\n   */\n  appearance?: DisclosureAppearance;\n  /**\n   * A `data-action` value on the `<details>` root, for a delegated listener of\n   * the native `toggle` event (it does not bubble: listen in the capture phase,\n   * for example with `delegateCapture`). `event.newState` is `open` or `closed`.\n   */\n  toggleAction?: string;\n  id?: string;\n  rootAttributes?: DisclosureRootAttributes;\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/**\n * Content a person shows and hides under a summary row: a native `<details>`\n * with a `<summary>` that carries a `DisclosureArrow` and the title, on the\n * shared content-item geometry (8px inline margin, a 1px border, 8px\n * padding, the rounded radius). `appearance=\"embedded\"` drops that geometry\n * for a Disclosure inside owner chrome (a `ContentItem`) that already insets\n * it. Keyboard and screen-reader behavior is the\n * platform's: the summary is a button that Enter and Space toggle, and it\n * reports its expanded state. Disclosures sharing a `name` form an accordion.\n */\nexport function Disclosure({\n  title,\n  detail,\n  children,\n  open = false,\n  name,\n  appearance = 'plain',\n  toggleAction,\n  id,\n  rootAttributes = {},\n  className = '',\n  slot,\n}: DisclosureProps) {\n  return (\n    <details\n      {...filterDataAttributes(rootAttributes, DISCLOSURE_PROTECTED)}\n      id={id}\n      class={`kui-disclosure ${className}`.trim()}\n      data-component=\"disclosure\"\n      data-appearance={appearance}\n      data-action={toggleAction}\n      name={name}\n      open={open || undefined}\n      slot={slot}\n    >\n      <summary class=\"kui-disclosure__summary\">\n        <DisclosureArrow open={open} />\n        <span class=\"kui-disclosure__title\">{title}</span>\n        {detail === undefined ? null : (\n          <span class=\"kui-disclosure__detail\">{detail}</span>\n        )}\n      </summary>\n      <div class=\"kui-disclosure__content\">{children}</div>\n    </details>\n  );\n}\n"]}

package/dist/edge-activity-indicator.d.ts

@@ -0,0 +1,28 @@
+import * as kerfjs from 'kerfjs';
+import { S as SemanticTone } from './semantic-tone-CdW013KF.js';
+
+interface EdgeActivityIndicatorProps {
+    /** Whether work is in progress; shows the strip and runs its wave. */
+    busy: boolean;
+    /**
+     * Optional status shown in a small pill hanging from the edge while busy.
+     * The pill is a polite live region; omit it for a purely decorative strip.
+     */
+    message?: string;
+    /** Strip and pill color; defaults to `info`. */
+    tone?: SemanticTone;
+    /** Clear the device's top safe area (default) or sit at the very edge. */
+    inset?: 'safe-area' | 'none';
+    className?: string;
+}
+/**
+ * A layout-free activity strip pinned to the top edge of the viewport: a row
+ * of thin bars that ripple in a traveling wave while `busy`, plus an optional
+ * hanging status pill. It allocates no layout, ignores the pointer, and its
+ * bars are hidden from assistive technology; only the pill announces.
+ * Kerf owns the motion: it scales in from the edge and, under reduced motion,
+ * only fades.
+ */
+declare function EdgeActivityIndicator({ busy, message, tone, inset, className, }: EdgeActivityIndicatorProps): kerfjs.SafeHtml;
+
+export { EdgeActivityIndicator, type EdgeActivityIndicatorProps };

package/dist/edge-activity-indicator.js

@@ -0,0 +1,3 @@
+export { EdgeActivityIndicator } from './chunk-QH5KOFNS.js';
+
+//# sourceMappingURL=edge-activity-indicator.js.map

package/dist/edge-activity-indicator.js.map

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

package/dist/empty-state.d.ts

@@ -1,13 +1,16 @@
 import { SafeHtml } from 'kerfjs';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
 
 interface EmptyStateProps {
     title: string;
     detail?: string;
     icon?: SafeHtml;
-    action?: SafeHtml;
+    action?: KerfUiContent;
     busy?: boolean;
     className?: string;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
 }
-declare function EmptyState({ title, detail, icon, action, busy, className }: EmptyStateProps): SafeHtml;
+declare function EmptyState({ title, detail, icon, action, busy, className, slot, }: EmptyStateProps): SafeHtml;
 
 export { EmptyState, type EmptyStateProps };

package/dist/empty-state.js

@@ -1,4 +1,5 @@
-export { EmptyState } from './chunk-WVPYVDXY.js';
+export { EmptyState } from './chunk-B53PS2LE.js';
+
 
 
 //# sourceMappingURL=empty-state.js.map

package/dist/extension-attributes-mu8MFUl0.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Non-widget roles an application may give a layout root: landmarks, named
+ * regions, groups, and live regions. Widget roles (button, grid, listbox, …)
+ * promise keyboard behavior a layout primitive does not provide.
+ */
+declare const STRUCTURAL_ROOT_ROLES: readonly ["region", "group", "list", "feed", "log", "status", "note", "article", "navigation", "complementary", "search", "form", "presentation", "none"];
+type StructuralRootRole = (typeof STRUCTURAL_ROOT_ROLES)[number];
+/** Safe `data-*`, `aria-*`, and structural `role` metadata on a layout root. */
+type StructuralRootAttributes = Readonly<Record<`data-${string}` | `aria-${string}`, string | undefined> & {
+    role?: StructuralRootRole;
+}>;
+
+export type { StructuralRootAttributes as S };

package/dist/file-picker.d.ts

@@ -0,0 +1,54 @@
+import { SafeHtml } from 'kerfjs';
+
+interface FileInputProps {
+    /** Accepted types, as the native `accept` attribute (`.png,image/*`). */
+    accept?: string;
+    /** Allow several files at once. */
+    multiple?: boolean;
+    /** Form field name of the native file input. */
+    name?: string;
+    /** Identifies this picker in `wireFilePickers` reports. */
+    pickerId?: string;
+    disabled?: boolean;
+    className?: string;
+}
+interface FilePickerTriggerProps extends FileInputProps {
+    /** Visible trigger text, such as "Add". */
+    label: string;
+    /** Accessible name of the file input when it should say more than `label`. */
+    accessibleLabel?: string;
+    /** Optional decorative leading icon, normally an unsized LucideIcon. */
+    icon?: SafeHtml;
+}
+interface FileDropZoneProps extends FileInputProps {
+    /** Primary copy, such as "Drop attachments here or browse". */
+    title: string;
+    /** Optional secondary copy, such as accepted types or a size limit. */
+    detail?: string;
+    /** Optional decorative icon above the copy, normally an unsized LucideIcon. */
+    icon?: SafeHtml;
+    /** Accessible name of the file input when it should say more than `title`. */
+    accessibleLabel?: string;
+    /**
+     * A selector for an enclosing element (the zone's ancestor) that also
+     * takes drops, such as an attachments panel: while files are dragged over
+     * any part of it the zone is highlighted, and files dropped there are
+     * reported for this zone (`via: 'drop'`).
+     */
+    dropScope?: string;
+}
+/**
+ * A compact, link-toned trigger that opens the native file chooser: a label
+ * around a visually hidden `<input type="file">`, so a click or keyboard
+ * activation reaches the input without script. Report choices with
+ * `wireFilePickers`.
+ */
+declare function FilePickerTrigger(props: FilePickerTriggerProps): SafeHtml;
+/**
+ * A dashed drop target that also opens the file chooser when clicked. While
+ * files are dragged over it, `wireFilePickers` sets `data-dragging` and Kerf
+ * highlights it; dropped and chosen files are reported the same way.
+ */
+declare function FileDropZone(props: FileDropZoneProps): SafeHtml;
+
+export { FileDropZone, type FileDropZoneProps, FilePickerTrigger, type FilePickerTriggerProps };

package/dist/file-picker.js

@@ -0,0 +1,3 @@
+export { FileDropZone, FilePickerTrigger } from './chunk-KDQZ3E5C.js';
+
+//# sourceMappingURL=file-picker.js.map

package/dist/file-picker.js.map

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

package/dist/flex-alignment-4ms8ZbV8.d.ts

@@ -0,0 +1,5 @@
+type HorizontalAlignment = 'left' | 'l' | 'flex-start' | 'center' | 'c' | 'space-around' | 'right' | 'r' | 'flex-end' | 'full' | 'f' | 'space-between';
+type VerticalAlignment = 'top' | 't' | 'flex-start' | 'middle' | 'm' | 'c' | 'space-around' | 'bottom' | 'b' | 'flex-end' | 'full' | 'f' | 'space-between' | 'baseline';
+type ListVerticalAlignment = Exclude<VerticalAlignment, 'baseline'>;
+
+export type { HorizontalAlignment as H, ListVerticalAlignment as L, VerticalAlignment as V };

package/dist/floating-toolbar.d.ts

@@ -1,10 +1,12 @@
-import { SafeHtml } from 'kerfjs';
+import * as kerfjs from 'kerfjs';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
+import { CssLength } from './css-values.js';
 
 /** Where a {@link FloatingToolbar} floats within its positioned container. */
 type FloatingToolbarPosition = 'bottom' | 'bottom-start' | 'bottom-end' | 'top' | 'top-start' | 'top-end';
 interface FloatingToolbarProps {
     /** Toolbar contents — normally one or more `ToolbarControlGroup`s. */
-    children: SafeHtml | SafeHtml[];
+    children: KerfUiContent;
     /** Accessible name for the toolbar (required — it exposes `role="toolbar"`). */
     label: string;
     /**
@@ -12,17 +14,38 @@ interface FloatingToolbarProps {
      * Default: `'bottom-end'`.
      */
     position?: FloatingToolbarPosition;
+    /** Keep the toolbar in normal document flow instead of floating over content. */
+    placement?: 'floating' | 'inline';
+    /**
+     * Distance from the container edges named by `position`. Default:
+     * `space('m')` (16px, 8px past a top toolbar's own inset). Omit it inside a
+     * `Workbench`, `CollapsiblePanel`, or `ResizableRegion` restore corner: the
+     * corner owns the inset there and sets it to zero.
+     */
+    inset?: CssLength;
+    /** Add device or layout-routed safe-area insets to the positioned edges. */
+    safeAreaInsets?: boolean;
     className?: string;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
 }
 /**
  * A toolbar that floats above the main content of its nearest positioned
  * ancestor — a transparent, forced-dark cluster of controls (e.g. a drawer
  * restore button) that sits over the content but NOT over dialogs or overlays
  * (it is not in the top layer). It is inset from the container edges by
- * `--kui-floating-toolbar-inset` (default `--kui-space-m`, i.e. 8px more than a
- * top toolbar's own inset); override that token to move it. The app owns the
- * controls and their behavior — wire them with `delegate()` as usual.
+ * `inset` (default `--kui-space-m`, i.e. 8px more than a top toolbar's own
+ * inset); pass a typed length to move it. Inside a `Workbench`, `CollapsiblePanel`, or
+ * `ResizableRegion` restore corner the corner owns the inset, so the toolbar
+ * floats from the corner's own position. While one of those layouts has a
+ * side overlay open over the toolbar's region (a Workbench rail overlay, a
+ * `wireSidebar` compact overlay, an overlay `CollapsiblePanel` or horizontal
+ * `ResizableRegion`), the toolbar is hidden — unfocusable and out of the
+ * accessibility tree — until the overlay closes. The app owns the controls
+ * and their behavior — wire them with `delegate()` as usual. Set
+ * `placement="inline"` for normal flow when an owner already positions the
+ * control; floating placement can add safe-area insets to its per-edge tokens.
  */
-declare function FloatingToolbar({ children, label, position, className }: FloatingToolbarProps): SafeHtml;
+declare function FloatingToolbar({ children, label, position, placement, inset, safeAreaInsets, className, slot, }: FloatingToolbarProps): kerfjs.SafeHtml;
 
 export { FloatingToolbar, type FloatingToolbarPosition, type FloatingToolbarProps };

package/dist/floating-toolbar.js

@@ -1,3 +1,3 @@
-export { FloatingToolbar } from './chunk-5E2HVJ33.js';
+export { FloatingToolbar } from './chunk-S3ECMF23.js';
 
 //# sourceMappingURL=floating-toolbar.js.map

package/dist/framed-list.d.ts

@@ -0,0 +1,47 @@
+import * as kerfjs from 'kerfjs';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
+
+/** The frame's fill: the lowered surface (as `ValueTable`), or the page surface. */
+type FramedListSurface = 'lowered' | 'base';
+type FramedListRootAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
+    'data-component'?: never;
+    'data-surface'?: never;
+}>;
+type FramedListRowRootAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
+    'data-component'?: never;
+    'data-highlighted'?: never;
+}>;
+interface FramedListProps {
+    /** `FramedListRow` children. */
+    children: KerfUiContent;
+    /** Accessible name for the list, when no heading names it. */
+    label?: string;
+    /** Frame fill; defaults to `lowered`, matching `ValueTable`. */
+    surface?: FramedListSurface;
+    id?: string;
+    className?: string;
+    /** Safe `data-*` metadata; FramedList-owned markers stay protected. */
+    rootAttributes?: FramedListRootAttributes;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
+}
+interface FramedListRowProps {
+    /** Arbitrary row content: a `Row` of copy and controls, a keycap, … */
+    children: KerfUiContent;
+    /** Tint the row (the row being edited or the current item). */
+    highlighted?: boolean;
+    id?: string;
+    className?: string;
+    /** Safe `data-*` metadata; FramedListRow-owned markers stay protected. */
+    rootAttributes?: FramedListRowRootAttributes;
+}
+/**
+ * An inset-grouped list (the settings-list pattern): one rounded, bordered
+ * frame with 1px dividers between rows of arbitrary content. `ValueTable` is
+ * the same frame for label/value facts; this one takes any row content.
+ */
+declare function FramedList({ children, label, surface, id, className, rootAttributes, slot, }: FramedListProps): kerfjs.SafeHtml;
+/** One row of a `FramedList`; it owns the row inset and the divider above it. */
+declare function FramedListRow({ children, highlighted, id, className, rootAttributes, }: FramedListRowProps): kerfjs.SafeHtml;
+
+export { FramedList, type FramedListProps, FramedListRow, type FramedListRowProps, type FramedListSurface };

package/dist/framed-list.js

@@ -0,0 +1,4 @@
+export { FramedList, FramedListRow } from './chunk-S2XULQEK.js';
+
+
+//# sourceMappingURL=framed-list.js.map

package/dist/framed-list.js.map

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

package/dist/grid.d.ts

@@ -0,0 +1,58 @@
+import * as kerfjs from 'kerfjs';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
+import { S as Sides } from './sides-BPSWde0A.js';
+import { UiGap, CssFlexKeyword, CssFlex, CssLength } from './css-values.js';
+export { UiGapValue, UiSpaceName } from './css-values.js';
+
+type GridRootAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
+    'data-component'?: never;
+    'data-columns'?: never;
+    'data-min-column-width'?: never;
+    'data-auto-fill'?: never;
+    'data-flex'?: never;
+    'data-fill'?: never;
+    'data-text-insets'?: never;
+    'data-control-insets'?: never;
+}>;
+interface GridCommonProps {
+    children?: KerfUiContent;
+    /** Make this a labeled multi-select grid for `ContentItem selectionMode="multiple"` tiles. */
+    selectionMode?: 'multiple';
+    /** Accessible name for the multi-select grid. */
+    ariaLabel?: string;
+    /** One spacing value or separate column and row values. Defaults to xs. */
+    gap?: UiGap;
+    /** Allow this grid to grow/shrink, use a keyword, or supply a typed CSS flex shorthand. */
+    flex?: boolean | CssFlexKeyword | CssFlex;
+    /**
+     * Fill the height of a parent with a definite height, such as an app root or
+     * a fixed-height frame, when this grid is that parent's layout root. Inside a
+     * flex layout use `flex` instead. Defaults to false.
+     */
+    fill?: boolean;
+    /** Physical sides that receive the standard 17px text inset. */
+    textInsets?: Sides;
+    /** Physical sides that receive the standard 8px control inset. Text insets win on overlap. */
+    controlInsets?: Sides;
+    className?: string;
+    /** Safe `data-*` metadata; Grid-owned structural attributes remain protected. */
+    rootAttributes?: GridRootAttributes;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
+}
+type GridProps = GridCommonProps & ({
+    /** Number of equal-width columns. Must be a positive safe integer. */
+    columns: number;
+    minColumnWidth?: never;
+    autoFill?: never;
+} | {
+    columns?: never;
+    /** Fit equal columns of at least this width; collapse as the container narrows. */
+    minColumnWidth: CssLength;
+    /** Keep empty tracks instead of stretching a sparse row. Defaults to false. */
+    autoFill?: boolean;
+});
+/** Render equal tracks with a fixed count or a responsive minimum width. */
+declare function Grid({ children, selectionMode, ariaLabel, columns, minColumnWidth, autoFill, gap, flex, fill, textInsets, controlInsets, className, rootAttributes, slot, }: GridProps): kerfjs.SafeHtml;
+
+export { CssFlex, CssFlexKeyword, CssLength, Grid, type GridProps, Sides, UiGap };

package/dist/grid.js

@@ -0,0 +1,6 @@
+export { Grid } from './chunk-KCS6NJ3O.js';
+
+
+
+
+//# sourceMappingURL=grid.js.map

package/dist/grid.js.map

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

package/dist/help-tags-register.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Marker export for tests and tooling; importing this module installs the
+ * document-level help tags that name icon-only controls on hover and
+ * keyboard focus: an icon-only `<button>` or link inside a
+ * `ToolbarControlGroup` (named by `aria-label`, without a native `title`),
+ * plus the icon-only `Select` and `PopupMenu` triggers that `select/register`
+ * and `popup-menu/register` already cover. Import it once in an application
+ * whose toolbars have icon-only buttons but no registered `Select` or
+ * `PopupMenu`; importing it alongside them is harmless.
+ */
+declare const helpTagsRegistered = true;
+
+export { helpTagsRegistered };

package/dist/help-tags-register.js

@@ -0,0 +1,10 @@
+import { installHelpTags } from './chunk-2LM3PYHA.js';
+
+
+// src/wiring/help-tags-register.ts
+installHelpTags();
+var helpTagsRegistered = true;
+
+export { helpTagsRegistered };
+
+//# sourceMappingURL=help-tags-register.js.map

package/dist/help-tags-register.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/wiring/help-tags-register.ts"],"names":[],"mappings":";;;;AAEA,eAAA,EAAgB;AAYT,IAAM,kBAAA,GAAqB","file":"help-tags-register.js","sourcesContent":["import { installHelpTags } from './help-tags.js';\n\ninstallHelpTags();\n\n/**\n * Marker export for tests and tooling; importing this module installs the\n * document-level help tags that name icon-only controls on hover and\n * keyboard focus: an icon-only `<button>` or link inside a\n * `ToolbarControlGroup` (named by `aria-label`, without a native `title`),\n * plus the icon-only `Select` and `PopupMenu` triggers that `select/register`\n * and `popup-menu/register` already cover. Import it once in an application\n * whose toolbars have icon-only buttons but no registered `Select` or\n * `PopupMenu`; importing it alongside them is harmless.\n */\nexport const helpTagsRegistered = true;\n"]}