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

package/dist/color-swatches.d.ts

@@ -0,0 +1,56 @@
+import * as kerfjs from 'kerfjs';
+import { CssColor } from './css-values.js';
+
+/** `default` is a 24px swatch; `compact` is 20px. */
+type ColorSwatchesSize = 'default' | 'compact';
+/** One color in the palette. */
+interface ColorSwatch {
+    /** The submitted value, such as `#0a84ff` or `blue`. */
+    value: string;
+    /** The color's name: the swatch's accessible name and its hover hint. */
+    label: string;
+    /**
+     * The swatch's paint: a `CssColor` from `uiColor()`, `colorVar()`, or
+     * `fillColor()` (`@kerfjs/ui/css-values`), or `'transparent'` for the
+     * no-color swatch, drawn outlined and struck through.
+     */
+    color: CssColor | 'transparent';
+}
+/** Application `data-*` metadata; the group's own markers stay protected. */
+type ColorSwatchesRootAttributes = Readonly<Record<`data-${string}`, string | undefined>>;
+type ColorSwatchesProps = {
+    /** The radio group name the chosen value submits under. */
+    name: string;
+    swatches: readonly ColorSwatch[];
+    /** The chosen swatch's value. */
+    value?: string;
+    size?: ColorSwatchesSize;
+    disabled?: boolean;
+    /** Delegated `data-action` on each radio; listen for `change`. */
+    action?: string;
+    /** Associate the radios with a form outside their ancestor chain. */
+    form?: string;
+    /** The group's id. */
+    id?: string;
+    className?: string;
+    rootAttributes?: ColorSwatchesRootAttributes;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
+} & ({
+    label: string;
+    ariaLabel?: never;
+} | {
+    label?: never;
+    ariaLabel: string;
+});
+/**
+ * A fixed palette: a group of round color swatches with no visible text, one
+ * of which is chosen. It is a native radio group, so arrow keys move the
+ * choice, Tab reaches it once, and the chosen value submits under `name`.
+ * Each swatch is named by its color's label (also its hover hint), and the
+ * chosen one wears a ring that does not rely on its hue. A `'transparent'`
+ * swatch offers "no color".
+ */
+declare function ColorSwatches({ name, swatches, value, label, ariaLabel, size, disabled, action, form, id, className, rootAttributes, slot, }: ColorSwatchesProps): kerfjs.SafeHtml;
+
+export { type ColorSwatch, ColorSwatches, type ColorSwatchesProps, type ColorSwatchesRootAttributes, type ColorSwatchesSize };

package/dist/color-swatches.js

@@ -0,0 +1,4 @@
+export { ColorSwatches } from './chunk-IO27YTL3.js';
+
+
+//# sourceMappingURL=color-swatches.js.map

package/dist/color-swatches.js.map

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

package/dist/column-track.d.ts

@@ -0,0 +1,41 @@
+import * as kerfjs from 'kerfjs';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
+import { S as StructuralRootAttributes } from './extension-attributes-mu8MFUl0.js';
+import { CssLength } from './css-values.js';
+
+/** `scroll` keeps equal min-width columns; `paged` shows one near-full-width column per page. */
+type ColumnTrackLayout = 'scroll' | 'paged';
+type ColumnTrackRootAttributes = StructuralRootAttributes & Readonly<{
+    'data-component'?: never;
+    'data-layout'?: never;
+}>;
+interface ColumnTrackProps {
+    /** The columns, in order; each owns its own inset and scrolling. */
+    children: KerfUiContent;
+    /**
+     * `scroll` (default): equal columns that never shrink below
+     * `minColumnWidth`, so a narrow track scrolls sideways instead of crushing
+     * them. `paged`: each column is nearly the visible width, the next one peeks
+     * in, and scrolling snaps to column starts.
+     */
+    layout?: ColumnTrackLayout;
+    /** Narrowest a `scroll` column gets before the track scrolls; default 250px. */
+    minColumnWidth?: CssLength;
+    /** How much of the next column a `paged` track shows; default 24px. */
+    peek?: CssLength;
+    id?: string;
+    className?: string;
+    /** Safe `data-*`, `aria-*`, and structural `role` metadata on the scroller. */
+    rootAttributes?: ColumnTrackRootAttributes;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
+}
+/**
+ * A horizontal track of columns (a kanban board): the track is the sideways
+ * scroll owner and fills its parent's height; columns sit flush and own their
+ * insets and vertical scrolling. Kerf owns the overflow, the paged snapping,
+ * and reduced motion.
+ */
+declare function ColumnTrack({ children, layout, minColumnWidth, peek, id, className, rootAttributes, slot, }: ColumnTrackProps): kerfjs.SafeHtml;
+
+export { ColumnTrack, type ColumnTrackLayout, type ColumnTrackProps };

package/dist/column-track.js

@@ -0,0 +1,4 @@
+export { ColumnTrack } from './chunk-QYMJHS4K.js';
+
+
+//# sourceMappingURL=column-track.js.map

package/dist/column-track.js.map

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

package/dist/combobox.d.ts

@@ -0,0 +1,40 @@
+import * as kerfjs from 'kerfjs';
+
+/** A suggestion: a plain string, or a value with a distinct visible label. */
+type ComboboxSuggestion = string | {
+    value: string;
+    label: string;
+};
+interface ComboboxProps {
+    /** Unique id; it also identifies the field in `wireComboboxes` reports. */
+    id: string;
+    /** Visible field label. */
+    label: string;
+    /** Suggestions to filter as the person types. */
+    suggestions: readonly ComboboxSuggestion[];
+    /** Initial text; the field owns its text while the person types. */
+    value?: string;
+    placeholder?: string;
+    /** Optional hint below the field, such as "Press Enter to add". */
+    hint?: string;
+    /** Form field name. */
+    name?: string;
+    /**
+     * Offer to create the typed text when it matches no suggestion; the option
+     * reads `createLabel` with `{value}` replaced. Omit to only allow
+     * suggestions. Default `Create “{value}”`.
+     */
+    createLabel?: string | false;
+    disabled?: boolean;
+    className?: string;
+}
+/**
+ * A free-text field with a filtered suggestion list that can also create a new
+ * value: the ARIA combobox pattern on a native input with the themed Web
+ * Awesome field chrome. `wireComboboxes` filters, moves the active option,
+ * and reports commits (Enter, comma, or a click). Use `Select` when only
+ * existing values are allowed and nothing is typed.
+ */
+declare function Combobox({ id, label, suggestions, value, placeholder, hint, name, createLabel, disabled, className, }: ComboboxProps): kerfjs.SafeHtml;
+
+export { Combobox, type ComboboxProps, type ComboboxSuggestion };

package/dist/combobox.js

@@ -0,0 +1,3 @@
+export { Combobox } from './chunk-BKUMG2KB.js';
+
+//# sourceMappingURL=combobox.js.map

package/dist/combobox.js.map

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

package/dist/content-item.d.ts

@@ -0,0 +1,170 @@
+import * as kerfjs from 'kerfjs';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
+import { CssColor } from './css-values.js';
+import { S as SemanticTone } from './semantic-tone-CdW013KF.js';
+import { S as SurfaceTint } from './surface-tint-DQgYCaP9.js';
+import { BackdropImagePosition, BackdropImageParallax, BackdropImageBlur, BackdropImageScrim } from './backdrop-image.js';
+import './extension-attributes-mu8MFUl0.js';
+
+/**
+ * Base surface treatment, semantic status colors, or `brand-loud`: the solid
+ * brand fill with its on-loud foreground (a transcript's own messages).
+ */
+type ContentItemAppearance = 'transparent' | 'surface' | 'brand-loud' | SemanticTone;
+/**
+ * A chat-bubble layout for transcripts: the item fits its content up to 80%
+ * of the row and sits at the `start` (other participants) or `end` (the
+ * person's own messages) of the line.
+ */
+type ContentItemBubble = 'start' | 'end';
+/** 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';
+/** One card-owned lead image in the containing feed's shared scrollport. */
+interface ContentItemMedia {
+    src: string;
+    alt: string;
+    srcset?: string;
+    sizes?: string;
+    /** Width divided by height; reserves the image block before it loads. Default 16/9. */
+    aspectRatio?: number;
+    position?: BackdropImagePosition;
+    /** Default subtle (35% lag); set none for a static lead image. */
+    parallax?: BackdropImageParallax;
+    /** App-supplied soft copy; its opacity changes, never its blur filter. */
+    blurredSrc?: string;
+    /** Shared BackdropImage blur behavior; use instead of `blurredSrc`. */
+    blur?: BackdropImageBlur;
+    /** Color the image dissolves into and the card body continues on. */
+    fadeTo?: CssColor;
+    /** Content layered over the image, including native controls. */
+    overlay?: KerfUiContent;
+    /** Dim the image behind overlay content. */
+    scrim?: BackdropImageScrim;
+    /** Extend the image to the card's top, left, and right inner edges. */
+    edgeToEdge?: boolean;
+}
+type ContentItemRootAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
+    'data-component'?: never;
+    'data-appearance'?: never;
+    'data-outlined'?: never;
+    'data-bubble'?: never;
+    'data-grid-row'?: never;
+    'data-media-state'?: never;
+    'data-media-edge'?: never;
+    'data-media-fade'?: never;
+    'data-kui-tint'?: never;
+    'data-kui-tint-accent'?: never;
+}>;
+type ContentItemInteractiveRootAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
+    'data-component'?: never;
+    'data-appearance'?: never;
+    'data-outlined'?: never;
+    'data-bubble'?: never;
+    'data-grid-row'?: never;
+    'data-media-state'?: never;
+    'data-media-edge'?: never;
+    'data-media-fade'?: never;
+    'data-kui-tint'?: never;
+    'data-kui-tint-accent'?: 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;
+    /** Reserved lead image with a per-image scroll timeline. Wire the containing root with `wireContentItems`. */
+    media?: ContentItemMedia;
+    /** App-sampled image color, scoped to this card once its image loads. */
+    tint?: SurfaceTint;
+    /** 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;
+    /**
+     * Lay the item out as a chat bubble: content width up to 80% of the row,
+     * at the `start` or `end` of the line. Pair `end` with `brand-loud` for the
+     * person's own messages. Omit for an ordinary full-width item.
+     */
+    bubble?: ContentItemBubble;
+    /** 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;
+    /**
+     * A non-selectable row of a multi-select `List` or `Grid`: renders
+     * `role="row"` around a `gridcell`, with no `aria-selected` and no
+     * Tab stop of its own, for content between selectable rows (an
+     * activity group, a "messages skipped" divider). Its controls stay
+     * reachable by Tab; arrow keys skip it.
+     */
+    gridRow?: boolean;
+    /** 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;
+    /** An interactive item is already a row in a multi-select grid. */
+    gridRow?: 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, media, tint, children, frame, flush, shape, bubble, title, ariaLabel, focusTarget, outlined, tabIndex, gridRow, interactive, action, itemId, selectionMode, selected, disabled, className, rootAttributes, slot, }: ContentItemProps): kerfjs.SafeHtml;
+
+export { ContentItem, type ContentItemAppearance, type ContentItemBubble, type ContentItemFrame, type ContentItemMedia, type ContentItemProps, type ContentItemSelectionMode, type ContentItemShape, SemanticTone };

package/dist/content-item.js

@@ -0,0 +1,7 @@
+export { ContentItem } from './chunk-WD6KABEU.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/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
+    );
   });
 }