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

package/dist/content-swap.d.ts

@@ -0,0 +1,34 @@
+import * as kerfjs from 'kerfjs';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
+
+type ContentSwapSide = 'a' | 'b';
+type ContentSwapTransition = 'none' | 'crossfade' | 'push';
+/** `forward` pushes the incoming side in from the inline end; `backward` from the start. */
+type ContentSwapDirection = 'forward' | 'backward';
+interface ContentSwapProps {
+    /** Which side is shown. Changing it runs the transition. */
+    active: ContentSwapSide;
+    a: KerfUiContent;
+    b: KerfUiContent;
+    /** `push` (default) slides the sides, `crossfade` fades them, `none` swaps instantly. */
+    transition?: ContentSwapTransition;
+    /** Push direction; mirrors in right-to-left documents. Default `forward`. */
+    direction?: ContentSwapDirection;
+    /** Accessible name; when set, the swap is a named region. */
+    label?: string;
+    /** Span the full width of its slot (a dialog label or footer) instead of its content. */
+    fill?: boolean;
+    className?: string;
+    /** Native named-slot assignment, such as a dialog's `label` or `footer`. */
+    slot?: string;
+}
+/**
+ * Two content sides sharing one cell (a dialog body that steps to a second
+ * page, a footer whose actions change), with the swap animated in place.
+ * Kerf owns the motion, the reduced-motion fallback, and the inactive side's
+ * `inert`/`aria-hidden`. Use `NavStack` for full views with their own
+ * toolbars.
+ */
+declare function ContentSwap({ active, a, b, transition, direction, label, fill, className, slot, }: ContentSwapProps): kerfjs.SafeHtml;
+
+export { ContentSwap, type ContentSwapDirection, type ContentSwapProps, type ContentSwapSide, type ContentSwapTransition };

package/dist/content-swap.js

@@ -0,0 +1,3 @@
+export { ContentSwap } from './chunk-EIET4QLK.js';
+
+//# sourceMappingURL=content-swap.js.map

package/dist/content-swap.js.map

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

package/dist/corner-status.d.ts

@@ -0,0 +1,36 @@
+import * as kerfjs from 'kerfjs';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
+
+/** The viewport corner a CornerStatus occupies, in logical (RTL-aware) terms. */
+type CornerStatusPlacement = 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';
+/** Where a CornerStatus appears: the top layer, or in flow. */
+type CornerStatusPresentation = 'overlay' | 'embedded';
+interface CornerStatusProps {
+    /** The root id: what a `popovertarget` control or `getElementById` names. */
+    id?: string;
+    /** One or more `StateBanner`s, typically `urgency="status"`; they stack. */
+    children: KerfUiContent;
+    /** Viewport corner; defaults to `bottom-end`. */
+    placement?: CornerStatusPlacement;
+    /**
+     * `overlay` (default) is a native `popover="manual"` host in the top layer,
+     * opened by `wireCornerStatus`: above fixed and z-indexed page chrome,
+     * never focused, and with no close button, light dismiss, or Escape.
+     * `embedded` renders the same stack in flow for a catalog or inline use.
+     */
+    presentation?: CornerStatusPresentation;
+    className?: string;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
+}
+/**
+ * A non-dismissible status surface pinned to a viewport corner — "Loading…",
+ * "Updating Tickets… 3 of 12" — for app-level progress that has no better
+ * home beside the affected work. The application owns its lifetime: render it
+ * while the work runs and remove it when the work ends. It carries no role of
+ * its own; the composed `StateBanner` is the polite live region. Use a toast
+ * for transient, dismissible confirmation instead.
+ */
+declare function CornerStatus({ id, children, placement, presentation, className, slot, }: CornerStatusProps): kerfjs.SafeHtml;
+
+export { CornerStatus, type CornerStatusPlacement, type CornerStatusPresentation, type CornerStatusProps };

package/dist/corner-status.js

@@ -0,0 +1,3 @@
+export { CornerStatus } from './chunk-G3J7JDP6.js';
+
+//# sourceMappingURL=corner-status.js.map

package/dist/corner-status.js.map

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

package/dist/css-values.d.ts

@@ -0,0 +1,127 @@
+declare const cssValueBrand: unique symbol;
+declare const cssLengthBrand: unique symbol;
+declare const cssLengthExpressionBrand: unique symbol;
+declare const cssFlexBrand: unique symbol;
+declare const cssColorBrand: unique symbol;
+declare const cssForegroundColorBrand: unique symbol;
+/**
+ * A complete typed CSS value minted by a property-specific Kerf UI builder.
+ *
+ * This brand is an authoring correctness aid, not a sanitizer or security
+ * boundary. Prefer the narrower property grammar, such as {@link CssLength},
+ * whenever one is available.
+ */
+type CssValue = string & {
+    readonly [cssValueBrand]: 'CssValue';
+};
+/**
+ * A complete CSS length-percentage value suitable for dimension-valued UI
+ * props. Despite the concise name, percentages are intentionally included.
+ */
+type CssLength = CssValue & {
+    readonly [cssLengthBrand]: 'CssLength';
+};
+/**
+ * An incomplete arithmetic expression. Wrap it with {@link calc} before
+ * passing it to a prop that accepts {@link CssLength}.
+ */
+type CssLengthExpression = string & {
+    readonly [cssLengthExpressionBrand]: 'CssLengthExpression';
+};
+/** A complete CSS `flex` shorthand. It is not interchangeable with a length. */
+type CssFlex = CssValue & {
+    readonly [cssFlexBrand]: 'CssFlex';
+};
+/** A complete CSS color value. It is not interchangeable with a length. */
+type CssColor = CssValue & {
+    readonly [cssColorBrand]: 'CssColor';
+};
+/**
+ * A complete CSS color meant to paint a foreground: text or an icon drawn over
+ * a surface. Mint it with {@link uiColor} and a foreground token name
+ * ({@link UiForegroundColorName}) or with {@link foregroundColorVar}. It is a
+ * {@link CssColor}, but a plain `CssColor` is not a foreground color: fill,
+ * border, and surface tokens are pale backgrounds that leave a foreground
+ * nearly invisible.
+ */
+type CssForegroundColor = CssColor & {
+    readonly [cssForegroundColorBrand]: 'CssForegroundColor';
+};
+type CssFlexKeyword = 'none' | 'auto' | 'initial';
+type CssFlexBasis = CssLength | 'auto' | 'content' | 'min-content' | 'max-content' | 'fit-content';
+type CssSizeKeyword = 'auto' | 'min-content' | 'max-content' | 'fit-content';
+/** A complete width/height value accepted by dimension-valued UI props. */
+type CssSize = CssLength | CssSizeKeyword;
+declare const uiColorNames: readonly ["brand-border-loud", "brand-border-normal", "brand-border-quiet", "brand-fill-loud", "brand-fill-normal", "brand-fill-quiet", "brand-on-fill", "brand-on-loud", "brand-on-normal", "brand-on-quiet", "danger-border-loud", "danger-border-normal", "danger-border-quiet", "danger-fill-loud", "danger-fill-normal", "danger-fill-quiet", "danger-on-fill", "danger-on-loud", "danger-on-normal", "danger-on-quiet", "neutral-border-loud", "neutral-border-normal", "neutral-border-quiet", "neutral-fill-loud", "neutral-fill-normal", "neutral-fill-quiet", "neutral-on-loud", "neutral-on-normal", "neutral-on-quiet", "pop-border-loud", "pop-border-normal", "pop-border-quiet", "pop-fill-loud", "pop-fill-normal", "pop-fill-quiet", "pop-on-fill", "pop-on-loud", "pop-on-normal", "pop-on-quiet", "success-border-loud", "success-border-normal", "success-border-quiet", "success-fill-loud", "success-fill-normal", "success-fill-quiet", "success-on-fill", "success-on-loud", "success-on-normal", "success-on-quiet", "surface", "surface-lowered", "surface-raised", "text", "text-link", "text-quiet", "warning-border-loud", "warning-border-normal", "warning-border-quiet", "warning-fill-loud", "warning-fill-normal", "warning-fill-quiet", "warning-on-fill", "warning-on-loud", "warning-on-normal", "warning-on-quiet"];
+/** Names of the public `--kui-color-*` semantic tokens. */
+type UiColorName = (typeof uiColorNames)[number];
+/** The semantic tokens that paint a foreground: the `*-on-*` and text roles. */
+type UiForegroundColorName = Extract<UiColorName, `${string}-on-${string}` | 'text' | 'text-quiet' | 'text-link'>;
+/** Kerf UI's complete spacing-token vocabulary. `s` and `xl` are exceptions. */
+type UiSpaceName = 'none' | '2xs' | 'xs' | 's' | 'm' | 'l' | 'xl';
+/** A token or complete typed length for one gap axis. */
+type UiGapValue = UiSpaceName | CssLength;
+/** A shared gap or independent column and row gaps. */
+type UiGap = UiGapValue | Readonly<{
+    column: UiGapValue;
+    row: UiGapValue;
+}>;
+/** Create a complete pixel length. */
+declare function px(value: number): CssLength;
+/** Create a complete root-font-relative length. */
+declare function rem(value: number): CssLength;
+/** Converts a pixel value into rem units by dividing by 16. */
+declare function remify(value: number): CssLength;
+/** Create a complete current-font-relative length. */
+declare function em(value: number): CssLength;
+/** Create a complete percentage length. */
+declare function pct(value: number): CssLength;
+/** Resolve a Kerf UI spacing step to its public custom property. */
+declare function space(name: UiSpaceName): CssLength;
+/**
+ * Reference an application-owned custom property whose contract is a CSS
+ * length-percentage. The deliberately narrow name grammar keeps this helper
+ * from becoming an arbitrary CSS-string constructor.
+ */
+declare function lengthVar(name: `--${string}`, fallback?: CssLength): CssLength;
+/** Combine two or more complete lengths into a non-standalone sum. */
+declare function plus(first: CssLength, second: CssLength, ...rest: readonly CssLength[]): CssLengthExpression;
+/** Turn a typed length expression into a complete CSS `calc()` value. */
+declare function calc(expression: CssLengthExpression): CssLength;
+/** Build a complete, structured CSS flex shorthand. */
+declare function flex(grow: number, shrink?: number, basis?: CssFlexBasis): CssFlex;
+/**
+ * The brand {@link uiColor} returns for a token name: a
+ * {@link CssForegroundColor} for a foreground token, otherwise a plain
+ * {@link CssColor}.
+ */
+type UiColor<Name extends UiColorName> = Name extends UiForegroundColorName ? CssForegroundColor : CssColor;
+/**
+ * Resolve a public Kerf UI semantic color token. A foreground token name
+ * (`success-on-quiet`, `text-quiet`, …) returns a {@link CssForegroundColor};
+ * any other token returns a plain {@link CssColor}.
+ */
+declare function uiColor<Name extends UiColorName>(name: Name): UiColor<Name>;
+/** Reference an application-owned custom property whose contract is a color. */
+declare function colorVar(name: `--${string}`, fallback?: CssColor): CssColor;
+/**
+ * Reference an application-owned custom property whose contract is a
+ * foreground color (text or an icon over a surface). Use it where a prop
+ * accepts only {@link CssForegroundColor}, such as `SelectChoice.color`.
+ */
+declare function foregroundColorVar(name: `--${string}`, fallback?: CssForegroundColor): CssForegroundColor;
+/**
+ * Use an application-chosen CSS color for foreground content. The browser
+ * resolves the color syntax; this checks only that it is one declaration value.
+ */
+declare function foregroundColor(value: string): CssForegroundColor;
+/**
+ * Use an application-chosen CSS color as a fill: a `ChoiceChips` swatch, a list
+ * row's `iconTile` color, or any other prop that takes a plain
+ * {@link CssColor}. It returns a `CssColor`, not a {@link CssForegroundColor},
+ * so a fill literal cannot reach a prop that paints text or an icon. The browser
+ * resolves the color syntax; this checks only that it is one declaration value.
+ */
+declare function fillColor(value: string): CssColor;
+
+export { type CssColor, type CssFlex, type CssFlexBasis, type CssFlexKeyword, type CssForegroundColor, type CssLength, type CssLengthExpression, type CssSize, type CssSizeKeyword, type CssValue, type UiColor, type UiColorName, type UiForegroundColorName, type UiGap, type UiGapValue, type UiSpaceName, calc, colorVar, em, fillColor, flex, foregroundColor, foregroundColorVar, lengthVar, pct, plus, px, rem, remify, space, uiColor };

package/dist/css-values.js

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

package/dist/css-values.js.map

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

package/dist/device-class.js

@@ -1,14 +1,25 @@
 import { computed, signal } from 'kerfjs';
 
-// src/device-class.ts
+// src/shared/environment/device-class.ts
 var DEFAULT_BREAKPOINTS = {
   mobile: 360,
   tablet: 720,
   desktop: 1024,
   "xl-desktop": 1440
 };
-var SIZE_ORDER = ["xs-mobile", "mobile", "tablet", "desktop", "xl-desktop"];
-var SSR_VIEWPORT = { width: 1024, height: 768, segments: 1, verticalSegments: 1 };
+var SIZE_ORDER = [
+  "xs-mobile",
+  "mobile",
+  "tablet",
+  "desktop",
+  "xl-desktop"
+];
+var SSR_VIEWPORT = {
+  width: 1024,
+  height: 768,
+  segments: 1,
+  verticalSegments: 1
+};
 function classifyViewport(width, orientation, segments = 1, verticalSegments = 1, breakpoints = DEFAULT_BREAKPOINTS) {
   const size = width >= breakpoints["xl-desktop"] ? "xl-desktop" : width >= breakpoints.desktop ? "desktop" : width >= breakpoints.tablet ? "tablet" : width >= breakpoints.mobile ? "mobile" : "xs-mobile";
   const rank = SIZE_ORDER.indexOf(size);
@@ -57,16 +68,33 @@ function orientationOf(view) {
   return view.height > view.width ? "portrait" : "landscape";
 }
 function deviceClass(options = {}) {
-  const breakpoints = { ...DEFAULT_BREAKPOINTS, ...options.breakpoints };
+  const breakpoints = {
+    ...DEFAULT_BREAKPOINTS,
+    ...options.breakpoints
+  };
   const view = browserWindow();
   if (!view) {
     const snapshot = { ...SSR_VIEWPORT, ...options.ssr };
-    return computed(() => classifyViewport(snapshot.width, orientationOf(snapshot), snapshot.segments, snapshot.verticalSegments, breakpoints));
+    return computed(
+      () => classifyViewport(
+        snapshot.width,
+        orientationOf(snapshot),
+        snapshot.segments,
+        snapshot.verticalSegments,
+        breakpoints
+      )
+    );
   }
   const source = viewportSource(view);
   return computed(() => {
     const v = source.value;
-    return classifyViewport(v.width, orientationOf(v), v.segments, v.verticalSegments, breakpoints);
+    return classifyViewport(
+      v.width,
+      orientationOf(v),
+      v.segments,
+      v.verticalSegments,
+      breakpoints
+    );
   });
 }
 

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":";;;AAsDO,IAAM,mBAAA,GAAyC;AAAA,EACpD,MAAA,EAAQ,GAAA;AAAA,EACR,MAAA,EAAQ,GAAA;AAAA,EACR,OAAA,EAAS,IAAA;AAAA,EACT,YAAA,EAAc;AAChB;AAEA,IAAM,UAAA,GAAoC;AAAA,EACxC,WAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAAA;AAEA,IAAM,YAAA,GAAyB;AAAA,EAC7B,KAAA,EAAO,IAAA;AAAA,EACP,MAAA,EAAQ,GAAA;AAAA,EACR,QAAA,EAAU,CAAA;AAAA,EACV,gBAAA,EAAkB;AACpB,CAAA;AAMO,SAAS,gBAAA,CACd,OACA,WAAA,EACA,QAAA,GAAW,GACX,gBAAA,GAAmB,CAAA,EACnB,cAAiC,mBAAA,EACpB;AACb,EAAA,MAAM,OACJ,KAAA,IAAS,WAAA,CAAY,YAAY,CAAA,GAC7B,eACA,KAAA,IAAS,WAAA,CAAY,OAAA,GACnB,SAAA,GACA,SAAS,WAAA,CAAY,MAAA,GACnB,WACA,KAAA,IAAS,WAAA,CAAY,SACnB,QAAA,GACA,WAAA;AACZ,EAAA,MAAM,IAAA,GAAO,UAAA,CAAW,OAAA,CAAQ,IAAI,CAAA;AACpC,EAAA,OAAO;AAAA,IACL,IAAA;AAAA,IACA,WAAA;AAAA,IACA,QAAA;AAAA,IACA,gBAAA;AAAA,IACA,SAAS,IAAA,IAAQ,CAAA;AAAA,IACjB,OAAA,EAAS,IAAA,IAAQ,CAAA,IAAM,IAAA,KAAS,YAAY,WAAA,KAAgB,UAAA;AAAA,IAC5D,SAAS,CAAC,MAAA,KAAW,IAAA,IAAQ,UAAA,CAAW,QAAQ,MAAM;AAAA,GACxD;AACF;AAGA,SAAS,aAAA,CAAc,MAAiC,IAAA,EAAsB;AAC5E,EAAA,MAAM,KAAK,IAAA,CAAK,UAAA;AAChB,EAAA,IAAI,OAAO,EAAA,KAAO,UAAA,EAAY,OAAO,CAAA;AACrC,EAAA,KAAA,IAAS,CAAA,GAAI,CAAA,EAAG,CAAA,IAAK,CAAA,EAAG,CAAA,EAAA,EAAK;AAC3B,IAAA,IAAI,EAAA,CAAG,IAAA,CAAK,IAAA,EAAM,CAAA,CAAA,EAAI,IAAI,uBAAuB,CAAC,CAAA,CAAA,CAAG,CAAA,CAAE,OAAA,EAAS,OAAO,CAAA;AAAA,EACzE;AACA,EAAA,OAAO,CAAA;AACT;AAGA,SAAS,aAAa,IAAA,EAAwB;AAC5C,EAAA,OAAO;AAAA,IACL,OAAO,IAAA,CAAK,UAAA;AAAA,IACZ,QAAQ,IAAA,CAAK,WAAA;AAAA,IACb,QAAA,EAAU,aAAA,CAAc,YAAA,EAAc,IAAI,CAAA;AAAA,IAC1C,gBAAA,EAAkB,aAAA,CAAc,UAAA,EAAY,IAAI;AAAA,GAClD;AACF;AAGA,SAAS,aAAA,GAAoC;AAC3C,EAAA,OAAO,OAAO,MAAA,KAAW,WAAA,GAAc,MAAA,GAAY,MAAA;AACrD;AAEA,IAAI,YAAA;AAOJ,SAAS,eAAe,IAAA,EAAmD;AACzE,EAAA,IAAI,cAAc,OAAO,YAAA;AACzB,EAAA,MAAM,MAAA,GAAS,MAAA,CAAO,YAAA,CAAa,IAAI,CAAC,CAAA;AACxC,EAAA,YAAA,GAAe,MAAA;AACf,EAAA,MAAM,SAAS,MAAY;AACzB,IAAA,MAAA,CAAO,KAAA,GAAQ,aAAa,IAAI,CAAA;AAAA,EAClC,CAAA;AACA,EAAA,IAAA,CAAK,gBAAA,CAAiB,UAAU,MAAM,CAAA;AACtC,EAAA,IAAA,CAAK,gBAAA,CAAiB,qBAAqB,MAAM,CAAA;AACjD,EAAA,OAAO,MAAA;AACT;AAEA,SAAS,cAAc,IAAA,EAAmC;AACxD,EAAA,OAAO,IAAA,CAAK,MAAA,GAAS,IAAA,CAAK,KAAA,GAAQ,UAAA,GAAa,WAAA;AACjD;AAQO,SAAS,WAAA,CACd,OAAA,GAA8B,EAAC,EACF;AAC7B,EAAA,MAAM,WAAA,GAAiC;AAAA,IACrC,GAAG,mBAAA;AAAA,IACH,GAAG,OAAA,CAAQ;AAAA,GACb;AACA,EAAA,MAAM,OAAO,aAAA,EAAc;AAC3B,EAAA,IAAI,CAAC,IAAA,EAAM;AACT,IAAA,MAAM,WAAqB,EAAE,GAAG,YAAA,EAAc,GAAG,QAAQ,GAAA,EAAI;AAC7D,IAAA,OAAO,QAAA;AAAA,MAAS,MACd,gBAAA;AAAA,QACE,QAAA,CAAS,KAAA;AAAA,QACT,cAAc,QAAQ,CAAA;AAAA,QACtB,QAAA,CAAS,QAAA;AAAA,QACT,QAAA,CAAS,gBAAA;AAAA,QACT;AAAA;AACF,KACF;AAAA,EACF;AACA,EAAA,MAAM,MAAA,GAAS,eAAe,IAAI,CAAA;AAClC,EAAA,OAAO,SAAS,MAAM;AACpB,IAAA,MAAM,IAAI,MAAA,CAAO,KAAA;AACjB,IAAA,OAAO,gBAAA;AAAA,MACL,CAAA,CAAE,KAAA;AAAA,MACF,cAAc,CAAC,CAAA;AAAA,MACf,CAAA,CAAE,QAAA;AAAA,MACF,CAAA,CAAE,gBAAA;AAAA,MACF;AAAA,KACF;AAAA,EACF,CAAC,CAAA;AACH","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