@kerfjs/ui 5.0.0-beta.8 → 5.0.0-beta.80

package/dist/content-item.d.ts

@@ -0,0 +1,99 @@
+import * as kerfjs from 'kerfjs';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
+import { S as SemanticTone } from './semantic-tone-CdW013KF.js';
+
+/** Base surface treatment or semantic status colors. */
+type ContentItemAppearance = 'transparent' | 'surface' | SemanticTone;
+/** Whether the item's always-reserved 1px border is transparent or visible. */
+type ContentItemFrame = 'none' | 'framed';
+/** Corner shape: the 12px rounded rectangle or the 22px pill. */
+type ContentItemShape = 'rounded' | 'pill';
+/** `single` uses an option; `multiple` uses a grid row; `toggle` uses a pressed button. */
+type ContentItemSelectionMode = 'none' | 'single' | 'multiple' | 'toggle';
+type ContentItemRootAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
+    'data-component'?: never;
+    'data-appearance'?: never;
+    'data-outlined'?: never;
+}>;
+type ContentItemInteractiveRootAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
+    'data-component'?: never;
+    'data-appearance'?: never;
+    'data-outlined'?: never;
+    'data-action'?: never;
+    'data-item-id'?: never;
+    'data-interactive'?: never;
+    'data-selected'?: never;
+    'data-disabled'?: never;
+    'data-selection-mode'?: never;
+    'data-kui-pressed'?: never;
+}>;
+interface ContentItemBaseProps {
+    /**
+     * Coordinated background, border, and foreground colors. `transparent`
+     * preserves the surrounding surface; `surface` paints the base surface;
+     * semantic values match StateBanner. Defaults to `transparent`.
+     */
+    appearance?: ContentItemAppearance;
+    /** Item content; a plain string is allowed for bare copy. */
+    children?: KerfUiContent | string;
+    /**
+     * `framed` paints the standard neutral border in the 1px the item always
+     * reserves, so framing never changes geometry. Frame only an item that
+     * marks a real distinction. Defaults to `none` (transparent border).
+     */
+    frame?: ContentItemFrame;
+    /** Remove block padding and block borders while retaining inline geometry. */
+    flush?: boolean;
+    /** Corner shape. Defaults to `rounded`. */
+    shape?: ContentItemShape;
+    /** Native hover tooltip. */
+    title?: string;
+    /**
+     * Names the item as a distinct region (`role="region"`). Omit it for an
+     * ordinary item, which stays a non-landmark grouping.
+     */
+    ariaLabel?: string;
+    /**
+     * Makes the item a programmatic focus target (`tabindex="-1"`, never a tab
+     * stop), for example the preferred initial focus of a NavStack view when
+     * combined with `data-nav-focus` in `rootAttributes`.
+     */
+    focusTarget?: boolean;
+    /** Keep the standard focus outline visible, such as for a drop target. */
+    outlined?: boolean;
+    className?: string;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
+}
+type ContentItemProps = ContentItemBaseProps & ({
+    interactive?: false;
+    action?: never;
+    itemId?: never;
+    selectionMode?: never;
+    selected?: never;
+    disabled?: never;
+    /** Opt into keyboard (`0`) or programmatic (`-1`) focus. */
+    tabIndex?: 0 | -1;
+    /** Existing static `data-*` metadata remains available. */
+    rootAttributes?: ContentItemRootAttributes;
+} | {
+    /** Enable a keyboard reachable card; wire `wireContentItems` once on its containing root. */
+    interactive: true;
+    /** Delegated action dispatched by pointer, Enter, or Space. */
+    action: string;
+    itemId?: string;
+    selectionMode?: ContentItemSelectionMode;
+    selected?: boolean;
+    disabled?: boolean;
+    tabIndex?: never;
+    /** Safe app metadata; interaction attributes are component-owned. */
+    rootAttributes?: ContentItemInteractiveRootAttributes;
+});
+/**
+ * One self-contained `.kui-content` child: an 8px inline margin, a real 1px
+ * border (transparent unless `framed`), 8px padding, and a rounded or pill
+ * radius. It owns that whole geometry, so wrappers must not add more.
+ */
+declare function ContentItem({ appearance, children, frame, flush, shape, title, ariaLabel, focusTarget, outlined, tabIndex, interactive, action, itemId, selectionMode, selected, disabled, className, rootAttributes, slot, }: ContentItemProps): kerfjs.SafeHtml;
+
+export { ContentItem, type ContentItemAppearance, type ContentItemFrame, type ContentItemProps, type ContentItemSelectionMode, type ContentItemShape, SemanticTone };

package/dist/content-item.js

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

package/dist/content-item.js.map

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

package/dist/css-values.d.ts

@@ -0,0 +1,112 @@
+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';
+/** 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;
+
+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 UiSpaceName, calc, colorVar, em, flex, foregroundColor, foregroundColorVar, lengthVar, pct, plus, px, rem, remify, space, uiColor };

package/dist/css-values.js

@@ -0,0 +1,3 @@
+export { calc, colorVar, em, flex, foregroundColor, foregroundColorVar, lengthVar, pct, plus, px, rem, remify, space, uiColor } from './chunk-LRAIS3YB.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":"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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-I4SDIMFA.js';
+
 
 
 //# sourceMappingURL=disclosure-arrow.js.map

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-YLJ6X3AC.js';
+
 
 
 //# sourceMappingURL=empty-state.js.map

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

@@ -0,0 +1,51 @@
+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: KerfUiContent;
+    /** Accessible name for the toolbar (required — it exposes `role="toolbar"`). */
+    label: string;
+    /**
+     * Corner or edge it floats to inside its nearest positioned ancestor.
+     * 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
+ * `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, placement, inset, safeAreaInsets, className, slot, }: FloatingToolbarProps): kerfjs.SafeHtml;
+
+export { FloatingToolbar, type FloatingToolbarPosition, type FloatingToolbarProps };

package/dist/floating-toolbar.js

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

package/dist/floating-toolbar.js.map

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

package/dist/grid.d.ts

@@ -0,0 +1,57 @@
+import * as kerfjs from 'kerfjs';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
+import { S as Sides } from './sides-BPSWde0A.js';
+import { UiSpaceName, CssLength, CssFlexKeyword, CssFlex } 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;
+    /** A named UI spacing token or typed CSS length. Defaults to xs. */
+    gap?: UiSpaceName | CssLength;
+    /** Allow this grid to grow/shrink, use a keyword, or supply a typed CSS flex shorthand. */
+    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, UiSpaceName };

package/dist/grid.js

@@ -0,0 +1,5 @@
+export { Grid } from './chunk-VR7MWD2X.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 registers the
+ * Web Awesome tooltip and 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,9 @@
+import { installHelpTags } from './chunk-O27D24CA.js';
+import '@awesome.me/webawesome/dist/components/tooltip/tooltip.js';
+
+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/integrations/webawesome/help-tags/help-tags-register.ts"],"names":[],"mappings":";;;AAIA,eAAA,EAAgB;AAYT,IAAM,kBAAA,GAAqB","file":"help-tags-register.js","sourcesContent":["import '@awesome.me/webawesome/dist/components/tooltip/tooltip.js';\n\nimport { installHelpTags } from './install-help-tag.js';\n\ninstallHelpTags();\n\n/**\n * Marker export for tests and tooling; importing this module registers the\n * Web Awesome tooltip and installs the document-level help tags that name\n * icon-only controls on hover and keyboard focus: an icon-only `<button>` or\n * link inside a `ToolbarControlGroup` (named by `aria-label`, without a\n * native `title`), plus the icon-only `Select` and `PopupMenu` triggers that\n * `select/register` and `popup-menu/register` already cover. Import it once\n * in an application whose toolbars have icon-only buttons but no registered\n * `Select` or `PopupMenu`; importing it alongside them is harmless.\n */\nexport const helpTagsRegistered = true;\n"]}