@kerfjs/ui 4.4.1 → 4.5.0-beta.1

package/dist/loading-spinner.js

@@ -1,3 +1,3 @@
-export { LoadingSpinner } from './chunk-55DATV3A.js';
+export { LoadingSpinner } from './chunk-6WTETUZ6.js';
 
 //# sourceMappingURL=loading-spinner.js.map

package/dist/nav-stack.d.ts

@@ -0,0 +1,38 @@
+import { SafeHtml } from 'kerfjs';
+
+/**
+ * One entry in a {@link NavStack}. The app owns the stack as an array (usually a
+ * signal); `NavStack` renders it and `wireNavStack` animates the transitions.
+ */
+interface NavStackView {
+    /** Stable identity for keyed reconcile and transition direction. */
+    key: string;
+    content: SafeHtml;
+    /** Title shown in the top toolbar for this view. */
+    title?: string;
+    /** Trailing actions for this view's top toolbar. */
+    toolbar?: SafeHtml;
+}
+interface NavStackProps {
+    id: string;
+    /** Accessible name for the stack region. */
+    label: string;
+    /** The stack, root first; the last entry is the active top view. */
+    views: NavStackView[];
+    /** Accessible label for the back control (default "Back"). */
+    backLabel?: string;
+    /** Hide the top toolbar entirely (rare — a fully custom-chrome view). */
+    hideToolbar?: boolean;
+    /** Optional persistent bottom toolbar. */
+    bottomToolbar?: SafeHtml;
+    className?: string;
+}
+/**
+ * A navigation stack (iOS-style push/pop). Renders every entry stacked, the last
+ * one active; `@kerfjs/ui/wire-nav-stack`'s `wireNavStack` slides the content and
+ * cross-fades the chrome across a change. A single-pane layout is a `NavStack`
+ * with one entry. See `docs/23-app-layouts.md` §3.1.
+ */
+declare function NavStack({ id, label, views, backLabel, hideToolbar, bottomToolbar, className, }: NavStackProps): SafeHtml;
+
+export { NavStack, type NavStackProps, type NavStackView };

package/dist/nav-stack.js

@@ -0,0 +1,5 @@
+export { NavStack } from './chunk-B3A3IVO5.js';
+
+
+
+//# sourceMappingURL=nav-stack.js.map

package/dist/nav-stack.js.map

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

package/dist/pane.d.ts

@@ -0,0 +1,49 @@
+import { SafeHtml } from 'kerfjs';
+
+/** Logical sides that can show a {@link Pane} separator. */
+type PaneSeparatorSide = 'block-start' | 'block-end' | 'inline-start' | 'inline-end';
+/** Semantic root elements supported by {@link Pane}. */
+type PaneElement = 'article' | 'aside' | 'div' | 'main' | 'section';
+/** Semantic elements supported by the scrolling content slot. */
+type PaneContentElement = 'div' | 'main' | 'nav' | 'section';
+type PaneRootAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
+    'data-component'?: never;
+    'data-separator-block-start'?: never;
+    'data-separator-block-end'?: never;
+    'data-separator-inline-start'?: never;
+    'data-separator-inline-end'?: never;
+}>;
+interface PaneProps {
+    /** Optional fixed chrome above the scrolling content, arranged vertically. */
+    header?: SafeHtml | readonly SafeHtml[];
+    /** The pane's primary vertical, scrolling content stack. */
+    children?: SafeHtml | readonly SafeHtml[];
+    /** Optional fixed chrome below the scrolling content. */
+    footer?: SafeHtml | readonly SafeHtml[];
+    /** Root semantics. Defaults to `div`. */
+    element?: PaneElement;
+    /** Scrolling content semantics. Defaults to `div`. */
+    contentElement?: PaneContentElement;
+    /** Independent logical-edge separator lines. Defaults to none. */
+    separators?: readonly PaneSeparatorSide[];
+    id?: string;
+    /** Accessible name for a landmark root such as `aside` or `main`. */
+    label?: string;
+    /** Accessible name for a landmark scrolling slot such as `nav`. */
+    contentLabel?: string;
+    className?: string;
+    headerClassName?: string;
+    contentClassName?: string;
+    footerClassName?: string;
+    /** Safe `data-*` metadata; Pane-owned structural attributes remain protected. */
+    rootAttributes?: PaneRootAttributes;
+}
+/**
+ * An unpadded application column with optional fixed header/footer slots and one
+ * scrolling vertical content owner. Separator lines are independently opt-in on
+ * each logical edge, so the same component works as a sidebar, main area,
+ * inspector, or dialog column.
+ */
+declare function Pane({ header, children, footer, element, contentElement, separators, id, label, contentLabel, className, headerClassName, contentClassName, footerClassName, rootAttributes, }: PaneProps): SafeHtml;
+
+export { Pane, type PaneContentElement, type PaneElement, type PaneProps, type PaneSeparatorSide };

package/dist/pane.js

@@ -0,0 +1,4 @@
+export { Pane } from './chunk-JRKSK2HX.js';
+
+
+//# sourceMappingURL=pane.js.map

package/dist/pane.js.map

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

package/dist/panel-header.d.ts

@@ -0,0 +1,42 @@
+import { SafeHtml } from 'kerfjs';
+import { HeadingLevel } from './toolbar-text.js';
+
+interface PanelHeaderBaseProps {
+    title: string;
+    titleId: string;
+    icon?: SafeHtml;
+    iconClassName?: string;
+    actions?: SafeHtml;
+    /**
+     * Expose the title as a heading landmark (`role="heading"` + `aria-level`). Set it
+     * for a PAGE or view heading so screen-reader heading navigation works and the view
+     * has a primary heading; omit it (the default) for a dialog title, which is instead
+     * referenced via `aria-labelledby={titleId}` and needs no heading landmark.
+     */
+    headingLevel?: HeadingLevel;
+    /** Render the title and summary as unanimated loading skeletons, keeping the icon and actions. */
+    placeholder?: boolean;
+}
+type PanelHeaderSummaryProps = {
+    summary: string;
+    summaryId?: string;
+} | {
+    summary?: never;
+    summaryId?: never;
+};
+type PanelHeaderProps = PanelHeaderBaseProps & PanelHeaderSummaryProps;
+/**
+ * The heading of a panel, dialog, or page: a plain `Toolbar` whose leading zone
+ * holds an optional icon control group and the title as extra-large `ToolbarText`,
+ * whose trailing zone holds the app's action controls, and with an optional
+ * subtitle on its own row, left-aligned with the title.
+ *
+ * PanelHeader overrides no Toolbar styles — it is just a Toolbar with an xl title.
+ * The only styling it adds is the icon group's fill/border color and the subtitle.
+ * When no icon is provided, the icon group is omitted entirely. The `actions` slot
+ * is passed straight into the toolbar's trailing zone; the app supplies whatever
+ * trailing controls it needs (typically a `ToolbarControlGroup`).
+ */
+declare function PanelHeader({ title, titleId, summary, summaryId, icon, iconClassName, actions, headingLevel, placeholder, }: PanelHeaderProps): SafeHtml;
+
+export { PanelHeader, type PanelHeaderProps };

package/dist/panel-header.js

@@ -0,0 +1,7 @@
+export { PanelHeader } from './chunk-7XRDUG4Y.js';
+
+
+
+
+
+//# sourceMappingURL=panel-header.js.map

package/dist/panel-header.js.map

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

package/dist/resizable-region.d.ts

@@ -12,10 +12,12 @@ interface ResizableRegionProps {
     edge?: ResizableRegionEdge;
     collapsed?: boolean;
     transitioning?: boolean;
+    /** Decorative dormant content for the separator handle. Must not contain interactive descendants. */
+    handleIcon?: SafeHtml;
     children: SafeHtml | SafeHtml[];
 }
 declare const clampRegionSize: (size: number, min: number, max: number) => number;
 declare const resizeRegionFromPointer: (startSize: number, delta: number, edge: ResizableRegionEdge) => number;
-declare function ResizableRegion({ id, label, size, min, max, axis, edge, collapsed, transitioning, children }: ResizableRegionProps): SafeHtml;
+declare function ResizableRegion({ id, label, size, min, max, axis, edge, collapsed, transitioning, handleIcon, children, }: ResizableRegionProps): SafeHtml;
 
 export { ResizableRegion, type ResizableRegionAxis, type ResizableRegionEdge, type ResizableRegionProps, clampRegionSize, resizeRegionFromPointer };

package/dist/resizable-region.js

@@ -1,3 +1,3 @@
-export { ResizableRegion, clampRegionSize, resizeRegionFromPointer } from './chunk-3O7ZEUW2.js';
+export { ResizableRegion, clampRegionSize, resizeRegionFromPointer } from './chunk-NENBUYX5.js';
 
 //# sourceMappingURL=resizable-region.js.map

package/dist/segmented-control.d.ts

@@ -4,25 +4,27 @@ type SegmentedControlAppearance = 'filled' | 'outlined' | 'toolbar';
 type SegmentedControlShape = 'rounded' | 'pill';
 type SegmentedControlSize = 'small' | 'default';
 type SegmentedControlLayout = 'content' | 'equal';
-interface SegmentedControlChoice {
-    value: string;
+interface SegmentedControlChoice<Value extends string = string> {
+    value: Value;
     label: string;
     content?: SafeHtml;
     title?: string;
     disabled?: boolean;
 }
-interface SegmentedControlProps {
+interface SegmentedControlProps<Value extends string = string> {
     id: string;
     label: string;
-    value: string;
-    choices: readonly SegmentedControlChoice[];
+    value: NoInfer<Value>;
+    choices: readonly SegmentedControlChoice<Value>[];
     action?: string;
     appearance?: SegmentedControlAppearance;
     shape?: SegmentedControlShape;
     size?: SegmentedControlSize;
     layout?: SegmentedControlLayout;
     className?: string;
+    /** Render as an unanimated loading skeleton, disabling every segment. */
+    placeholder?: boolean;
 }
-declare function SegmentedControl({ id, label, value, choices, action, appearance, shape, size, layout, className, }: SegmentedControlProps): SafeHtml;
+declare function SegmentedControl<Value extends string>({ id, label, value, choices, action, appearance, shape, size, layout, className, placeholder, }: SegmentedControlProps<Value>): SafeHtml;
 
 export { SegmentedControl, type SegmentedControlAppearance, type SegmentedControlChoice, type SegmentedControlLayout, type SegmentedControlProps, type SegmentedControlShape, type SegmentedControlSize };

package/dist/segmented-control.js

@@ -1,3 +1,4 @@
-export { SegmentedControl } from './chunk-TRNBHPNW.js';
+export { SegmentedControl } from './chunk-IJBSZ4NX.js';
+
 
 //# sourceMappingURL=segmented-control.js.map

package/dist/select-register.d.ts

@@ -1,4 +1,8 @@
-/** Marker export for tests and tooling; importing this module performs registration. */
+/**
+ * Marker export for tests and tooling; importing this module performs registration.
+ * Registers both the `Select` elements and the `Catalog` related-entries popup-menu
+ * elements (`wa-dropdown` / `wa-dropdown-item` / `wa-button`).
+ */
 declare const selectElementsRegistered = true;
 
 export { selectElementsRegistered };

package/dist/select-register.js

@@ -1,4 +1,7 @@
+import '@awesome.me/webawesome/dist/components/button/button.js';
 import '@awesome.me/webawesome/dist/components/divider/divider.js';
+import '@awesome.me/webawesome/dist/components/dropdown/dropdown.js';
+import '@awesome.me/webawesome/dist/components/dropdown-item/dropdown-item.js';
 import '@awesome.me/webawesome/dist/components/option/option.js';
 import '@awesome.me/webawesome/dist/components/select/select.js';
 

package/dist/select-register.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/select-register.ts"],"names":[],"mappings":";;;;;AAKO,IAAM,wBAAA,GAA2B","file":"select-register.js","sourcesContent":["import '@awesome.me/webawesome/dist/components/divider/divider.js';\nimport '@awesome.me/webawesome/dist/components/option/option.js';\nimport '@awesome.me/webawesome/dist/components/select/select.js';\n\n/** Marker export for tests and tooling; importing this module performs registration. */\nexport const selectElementsRegistered = true;\n"]}
+{"version":3,"sources":["../src/select-register.ts"],"names":[],"mappings":";;;;;;;;AAYO,IAAM,wBAAA,GAA2B","file":"select-register.js","sourcesContent":["import '@awesome.me/webawesome/dist/components/button/button.js';\nimport '@awesome.me/webawesome/dist/components/divider/divider.js';\nimport '@awesome.me/webawesome/dist/components/dropdown/dropdown.js';\nimport '@awesome.me/webawesome/dist/components/dropdown-item/dropdown-item.js';\nimport '@awesome.me/webawesome/dist/components/option/option.js';\nimport '@awesome.me/webawesome/dist/components/select/select.js';\n\n/**\n * Marker export for tests and tooling; importing this module performs registration.\n * Registers both the `Select` elements and the `Catalog` related-entries popup-menu\n * elements (`wa-dropdown` / `wa-dropdown-item` / `wa-button`).\n */\nexport const selectElementsRegistered = true;\n"]}

package/dist/select.d.ts

@@ -11,18 +11,27 @@ interface SelectChoice<Value extends string = string> {
     group?: string;
     separatorBefore?: boolean;
 }
-interface SelectProps<Value extends string = string> {
-    name: string;
-    value: Value;
-    label?: string;
+type SelectAccessibleName = {
+    label: string;
     ariaLabel?: string;
+} | {
+    label?: never;
+    ariaLabel: string;
+};
+interface SelectBaseProps<Value extends string = string> {
+    name: string;
+    value: NoInfer<Value>;
     choices: readonly SelectChoice<Value>[];
     className?: string;
-    placeholder?: string;
+    /** Empty-value hint text shown in the closed control (the native select placeholder). */
+    placeholderText?: string;
     disabled?: boolean;
     fitMenu?: boolean;
     renderSelected?: (choice: SelectChoice<Value>) => SafeHtml;
+    /** Render as an unanimated loading skeleton: the label above a static, empty control box. */
+    placeholder?: boolean;
 }
-declare function Select<Value extends string>({ name, value, label, ariaLabel, choices, className, placeholder, disabled, fitMenu, renderSelected }: SelectProps<Value>): SafeHtml;
+type SelectProps<Value extends string = string> = SelectBaseProps<Value> & SelectAccessibleName;
+declare function Select<Value extends string>({ name, value, label, ariaLabel, choices, className, placeholderText, disabled, fitMenu, renderSelected, placeholder, }: SelectProps<Value>): SafeHtml;
 
 export { Select, type SelectChoice, type SelectProps };

package/dist/select.js

@@ -1,4 +1,5 @@
-export { Select } from './chunk-NHXX4JI5.js';
+export { Select } from './chunk-NWSEP5RT.js';
+
 
 
 //# sourceMappingURL=select.js.map

package/dist/skeleton.d.ts

@@ -0,0 +1,24 @@
+import * as kerfjs from 'kerfjs';
+
+interface SkeletonProps {
+    /** Width as any browser CSS length (e.g. `7.5rem`, `60%`). Defaults to filling its slot. */
+    width?: string;
+    /** Height as any CSS length. Defaults to a single text line. */
+    height?: string;
+    /** Corner radius override (a CSS length). Defaults to the small radius token. */
+    radius?: string;
+    /** Render this many stacked lines (the last one shorter), for multi-line text. */
+    lines?: number;
+    /** Accessible label. Omit to keep the block decorative (`aria-hidden`). */
+    label?: string;
+    className?: string;
+}
+/**
+ * A subtle, deliberately **unanimated** loading placeholder block. Use it for a
+ * value slot whose content is not yet known, on its own or via a component's
+ * `placeholder` prop. Decorative by default (`aria-hidden`); pass `label` to
+ * announce it. Sizes to its slot unless `width`/`height` are given.
+ */
+declare function Skeleton({ width, height, radius, lines, label, className, }: SkeletonProps): kerfjs.SafeHtml;
+
+export { Skeleton, type SkeletonProps };

package/dist/skeleton.js

@@ -0,0 +1,3 @@
+export { Skeleton } from './chunk-RKVQEH4J.js';
+
+//# sourceMappingURL=skeleton.js.map

package/dist/skeleton.js.map

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

package/dist/split-view.d.ts

@@ -0,0 +1,42 @@
+import { SafeHtml } from 'kerfjs';
+
+interface SplitViewResizable {
+    size: number;
+    min: number;
+    max: number;
+}
+interface SplitViewProps {
+    id: string;
+    label: string;
+    /** The list (primary) pane. */
+    list: SafeHtml;
+    /** The detail (secondary) pane. */
+    detail: SafeHtml;
+    /**
+     * Compact ("one pane at a time") classes — a handset or portrait tablet.
+     * Derive from `deviceClass().value.compact`. When true the split collapses to
+     * a `NavStack`: the list is the root and the detail is pushed over it.
+     */
+    compact?: boolean;
+    /** In compact mode, whether the detail is currently pushed over the list. */
+    detailActive?: boolean;
+    /** Title/label for the list (compact NavStack root + region label). */
+    listTitle?: string;
+    /** Title/label for the detail (compact NavStack pushed view + region label). */
+    detailTitle?: string;
+    /** Back label for the compact NavStack (default "Back"). */
+    backLabel?: string;
+    /** A resizable separator on roomy classes (min/max px). Omit for a fixed split. */
+    resizable?: SplitViewResizable;
+    className?: string;
+}
+/**
+ * A list-detail split. On roomy classes it shows both panes side
+ * by side with an optional resizable separator; on compact classes it collapses
+ * to a `NavStack` (list → detail). See `docs/23-app-layouts.md` §3.2. Compose the
+ * resizable wiring with `wireResizableRegions` and the compact back with
+ * `wireNavStack`.
+ */
+declare function SplitView({ id, label, list, detail, compact, detailActive, listTitle, detailTitle, backLabel, resizable, className, }: SplitViewProps): SafeHtml;
+
+export { SplitView, type SplitViewProps, type SplitViewResizable };

package/dist/split-view.js

@@ -0,0 +1,81 @@
+import { NavStack } from './chunk-B3A3IVO5.js';
+
+import { ResizableRegion } from './chunk-NENBUYX5.js';
+
+import { jsx, jsxs } from 'kerfjs/jsx-runtime';
+
+function SplitView({
+  id,
+  label,
+  list,
+  detail,
+  compact = false,
+  detailActive = false,
+  listTitle = "",
+  detailTitle = "",
+  backLabel = "Back",
+  resizable,
+  className = ""
+}) {
+  if (compact) {
+    const views = detailActive ? [
+      { key: "list", title: listTitle, content: list },
+      { key: "detail", title: detailTitle, content: detail }
+    ] : [{ key: "list", title: listTitle, content: list }];
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        class: `kui-split-view kui-split-view--compact ${className}`.trim(),
+        id,
+        "data-component": "split-view",
+        "data-split-mode": "compact",
+        children: /* @__PURE__ */ jsx(
+          NavStack,
+          {
+            id: `${id}-stack`,
+            label,
+            views,
+            backLabel
+          }
+        )
+      }
+    );
+  }
+  const listPane = resizable ? /* @__PURE__ */ jsx(
+    ResizableRegion,
+    {
+      id: `${id}-list`,
+      label: listTitle || "List",
+      size: resizable.size,
+      min: resizable.min,
+      max: resizable.max,
+      children: /* @__PURE__ */ jsx("div", { class: "kui-split-view__list kui-pane", "data-split-list": true, children: list })
+    }
+  ) : /* @__PURE__ */ jsx("div", { class: "kui-split-view__list kui-pane", "data-split-list": true, children: list });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      class: `kui-split-view ${className}`.trim(),
+      id,
+      "data-component": "split-view",
+      "data-split-mode": "split",
+      "aria-label": label,
+      children: [
+        listPane,
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            class: "kui-split-view__detail kui-pane",
+            "data-split-detail": true,
+            "aria-label": detailTitle || void 0,
+            children: detail
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { SplitView };
+
+//# sourceMappingURL=split-view.js.map

package/dist/split-view.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/split-view.tsx"],"names":[],"mappings":";;;;;;AA4CO,SAAS,SAAA,CAAU;AAAA,EACxB,EAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA,GAAU,KAAA;AAAA,EACV,YAAA,GAAe,KAAA;AAAA,EACf,SAAA,GAAY,EAAA;AAAA,EACZ,WAAA,GAAc,EAAA;AAAA,EACd,SAAA,GAAY,MAAA;AAAA,EACZ,SAAA;AAAA,EACA,SAAA,GAAY;AACd,CAAA,EAAmB;AACjB,EAAA,IAAI,OAAA,EAAS;AACX,IAAA,MAAM,QAAQ,YAAA,GACV;AAAA,MACE,EAAE,GAAA,EAAK,MAAA,EAAQ,KAAA,EAAO,SAAA,EAAW,SAAS,IAAA,EAAK;AAAA,MAC/C,EAAE,GAAA,EAAK,QAAA,EAAU,KAAA,EAAO,WAAA,EAAa,SAAS,MAAA;AAAO,KACvD,GACA,CAAC,EAAE,GAAA,EAAK,QAAQ,KAAA,EAAO,SAAA,EAAW,OAAA,EAAS,IAAA,EAAM,CAAA;AACrD,IAAA,uBACE,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,KAAA,EAAO,CAAA,uCAAA,EAA0C,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,QAClE,EAAA;AAAA,QACA,gBAAA,EAAe,YAAA;AAAA,QACf,iBAAA,EAAgB,SAAA;AAAA,QAEhB,QAAA,kBAAA,GAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,EAAA,EAAI,GAAG,EAAE,CAAA,MAAA,CAAA;AAAA,YACT,KAAA;AAAA,YACA,KAAA;AAAA,YACA;AAAA;AAAA;AACF;AAAA,KACF;AAAA,EAEJ;AACA,EAAA,MAAM,WAAW,SAAA,mBACf,GAAA;AAAA,IAAC,eAAA;AAAA,IAAA;AAAA,MACC,EAAA,EAAI,GAAG,EAAE,CAAA,KAAA,CAAA;AAAA,MACT,OAAO,SAAA,IAAa,MAAA;AAAA,MACpB,MAAM,SAAA,CAAU,IAAA;AAAA,MAChB,KAAK,SAAA,CAAU,GAAA;AAAA,MACf,KAAK,SAAA,CAAU,GAAA;AAAA,MAEf,8BAAC,KAAA,EAAA,EAAI,KAAA,EAAM,+BAAA,EAAgC,iBAAA,EAAe,MACvD,QAAA,EAAA,IAAA,EACH;AAAA;AAAA,sBAGF,GAAA,CAAC,KAAA,EAAA,EAAI,OAAM,+BAAA,EAAgC,iBAAA,EAAe,MACvD,QAAA,EAAA,IAAA,EACH,CAAA;AAEF,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,eAAA,EAAkB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAC1C,EAAA;AAAA,MACA,gBAAA,EAAe,YAAA;AAAA,MACf,iBAAA,EAAgB,OAAA;AAAA,MAChB,YAAA,EAAY,KAAA;AAAA,MAEX,QAAA,EAAA;AAAA,QAAA,QAAA;AAAA,wBACD,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,KAAA,EAAM,iCAAA;AAAA,YACN,mBAAA,EAAiB,IAAA;AAAA,YACjB,cAAY,WAAA,IAAe,MAAA;AAAA,YAE1B,QAAA,EAAA;AAAA;AAAA;AACH;AAAA;AAAA,GACF;AAEJ","file":"split-view.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport { NavStack } from './nav-stack.js';\nimport { ResizableRegion } from './resizable-region.js';\n\nexport interface SplitViewResizable {\n  size: number;\n  min: number;\n  max: number;\n}\n\nexport interface SplitViewProps {\n  id: string;\n  label: string;\n  /** The list (primary) pane. */\n  list: SafeHtml;\n  /** The detail (secondary) pane. */\n  detail: SafeHtml;\n  /**\n   * Compact (\"one pane at a time\") classes — a handset or portrait tablet.\n   * Derive from `deviceClass().value.compact`. When true the split collapses to\n   * a `NavStack`: the list is the root and the detail is pushed over it.\n   */\n  compact?: boolean;\n  /** In compact mode, whether the detail is currently pushed over the list. */\n  detailActive?: boolean;\n  /** Title/label for the list (compact NavStack root + region label). */\n  listTitle?: string;\n  /** Title/label for the detail (compact NavStack pushed view + region label). */\n  detailTitle?: string;\n  /** Back label for the compact NavStack (default \"Back\"). */\n  backLabel?: string;\n  /** A resizable separator on roomy classes (min/max px). Omit for a fixed split. */\n  resizable?: SplitViewResizable;\n  className?: string;\n}\n\n/**\n * A list-detail split. On roomy classes it shows both panes side\n * by side with an optional resizable separator; on compact classes it collapses\n * to a `NavStack` (list → detail). See `docs/23-app-layouts.md` §3.2. Compose the\n * resizable wiring with `wireResizableRegions` and the compact back with\n * `wireNavStack`.\n */\nexport function SplitView({\n  id,\n  label,\n  list,\n  detail,\n  compact = false,\n  detailActive = false,\n  listTitle = '',\n  detailTitle = '',\n  backLabel = 'Back',\n  resizable,\n  className = '',\n}: SplitViewProps) {\n  if (compact) {\n    const views = detailActive\n      ? [\n          { key: 'list', title: listTitle, content: list },\n          { key: 'detail', title: detailTitle, content: detail },\n        ]\n      : [{ key: 'list', title: listTitle, content: list }];\n    return (\n      <div\n        class={`kui-split-view kui-split-view--compact ${className}`.trim()}\n        id={id}\n        data-component=\"split-view\"\n        data-split-mode=\"compact\"\n      >\n        <NavStack\n          id={`${id}-stack`}\n          label={label}\n          views={views}\n          backLabel={backLabel}\n        />\n      </div>\n    );\n  }\n  const listPane = resizable ? (\n    <ResizableRegion\n      id={`${id}-list`}\n      label={listTitle || 'List'}\n      size={resizable.size}\n      min={resizable.min}\n      max={resizable.max}\n    >\n      <div class=\"kui-split-view__list kui-pane\" data-split-list>\n        {list}\n      </div>\n    </ResizableRegion>\n  ) : (\n    <div class=\"kui-split-view__list kui-pane\" data-split-list>\n      {list}\n    </div>\n  );\n  return (\n    <div\n      class={`kui-split-view ${className}`.trim()}\n      id={id}\n      data-component=\"split-view\"\n      data-split-mode=\"split\"\n      aria-label={label}\n    >\n      {listPane}\n      <div\n        class=\"kui-split-view__detail kui-pane\"\n        data-split-detail\n        aria-label={detailTitle || undefined}\n      >\n        {detail}\n      </div>\n    </div>\n  );\n}\n"]}

package/dist/state-banner.d.ts

@@ -1,15 +1,20 @@
 import { SafeHtml } from 'kerfjs';
 
 type StateBannerTone = 'neutral' | 'info' | 'success' | 'warning' | 'danger';
+type StateBannerUrgency = 'status' | 'alert';
 interface StateBannerProps {
     title: string;
     detail?: string;
+    /** Optional compact status or count shown beside the title. */
+    badge?: string;
     icon?: SafeHtml;
     action?: SafeHtml;
     tone?: StateBannerTone;
-    urgency?: 'status' | 'alert';
+    urgency?: StateBannerUrgency;
     className?: string;
+    /** Render the title, badge, and detail as unanimated loading skeletons, keeping the icon and tone. */
+    placeholder?: boolean;
 }
-declare function StateBanner({ title, detail, icon, action, tone, urgency, className }: StateBannerProps): SafeHtml;
+declare function StateBanner({ title, detail, badge, icon, action, tone, urgency, className, placeholder, }: StateBannerProps): SafeHtml;
 
-export { StateBanner, type StateBannerProps, type StateBannerTone };
+export { StateBanner, type StateBannerProps, type StateBannerTone, type StateBannerUrgency };

package/dist/state-banner.js

@@ -1,3 +1,4 @@
-export { StateBanner } from './chunk-VHW5YNIB.js';
+export { StateBanner } from './chunk-W5L2JSBY.js';
+
 
 //# sourceMappingURL=state-banner.js.map

package/dist/styles/app-tab.css

@@ -0,0 +1,152 @@
+.kui-app-tab {
+  --kui-app-tab-color: var(--kui-color-neutral-on-quiet);
+  --kui-app-tab-hover-background: color-mix(
+    in srgb,
+    var(--kui-color-surface) 72%,
+    transparent
+  );
+  --kui-app-tab-selected-color: var(--kui-color-brand-on-quiet);
+  --kui-app-tab-selected-background: var(--kui-color-surface);
+  --kui-app-tab-selected-border: color-mix(
+    in srgb,
+    var(--kui-color-neutral-border-normal) 80%,
+    transparent
+  );
+  --kui-app-tab-drop-indicator: var(--kui-color-brand-border-normal);
+  position: relative;
+  display: flex;
+  width: max-content;
+  min-width: max-content;
+  height: 2.5rem;
+  box-sizing: border-box;
+  border: 1px solid transparent;
+  border-radius: var(--kui-layout-pill-radius, calc(1px + 1.3125rem));
+  color: var(--kui-app-tab-color);
+  background: transparent;
+  align-items: center;
+  flex: none;
+}
+.kui-app-tab:hover {
+  border-color: var(--kui-color-neutral-border-normal);
+  background: var(--kui-app-tab-hover-background);
+}
+.kui-app-tab[data-selected="true"] {
+  border-color: var(--kui-app-tab-selected-border);
+  color: var(--kui-app-tab-selected-color);
+  background: var(--kui-app-tab-selected-background);
+  box-shadow: var(--kui-shadow-s);
+}
+.kui-app-tab[data-tab-dragging="true"] {
+  opacity: 0.55;
+}
+.kui-app-tab[data-tab-drop-position]::after {
+  position: absolute;
+  z-index: 2;
+  top: 0.2rem;
+  bottom: 0.2rem;
+  width: 2px;
+  border-radius: var(--kui-radius-pill);
+  background: var(--kui-app-tab-drop-indicator);
+  content: "";
+  pointer-events: none;
+}
+.kui-app-tab[data-tab-drop-position="before"]::after {
+  inset-inline-start: calc(var(--kui-space-2xs) * -1);
+}
+.kui-app-tab[data-tab-drop-position="after"]::after {
+  inset-inline-end: calc(var(--kui-space-2xs) * -1);
+}
+.kui-app-tab__select {
+  display: flex;
+  min-width: 0;
+  height: 100%;
+  padding: 0 var(--kui-layout-item-padding, 0.5rem);
+  border: 0;
+  appearance: none;
+  color: inherit;
+  background: transparent;
+  cursor: pointer;
+  font: inherit;
+  align-items: center;
+  gap: var(--kui-layout-item-gap, 0.5rem);
+  text-align: start;
+}
+.kui-app-tab:has(.kui-app-tab__close) .kui-app-tab__select {
+  padding-inline-start: var(--kui-layout-item-padding, 0.5rem);
+}
+.kui-app-tab:has(.kui-app-tab__select:focus-visible) {
+  outline: var(--kui-focus-ring);
+  outline-offset: -2px;
+}
+.kui-app-tab__select:focus-visible {
+  outline: none;
+}
+.kui-app-tab__close:focus-visible {
+  border-radius: var(--kui-radius-pill);
+  outline: var(--kui-focus-ring);
+  outline-offset: -2px;
+}
+.kui-app-tab__select > svg {
+  width: 1rem;
+  height: 1rem;
+  flex: none;
+}
+.kui-app-tab__name {
+  overflow: hidden;
+  font-size: var(--kui-font-xs);
+  font-weight: 650;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.kui-app-tab__trailing {
+  display: grid;
+  min-width: 1.275rem;
+  min-height: 1.275rem;
+  flex: none;
+  place-items: center;
+}
+.kui-app-tab__close {
+  display: grid;
+  width: 1.275rem;
+  height: 1.275rem;
+  margin-inline-start: var(--kui-space-xs);
+  padding: 0;
+  border: 0;
+  appearance: none;
+  color: var(--kui-color-neutral-on-quiet);
+  background: transparent;
+  cursor: pointer;
+  flex: none;
+  place-items: center;
+}
+.kui-app-tab__close:hover {
+  color: var(--kui-color-text);
+}
+.kui-app-tab__close-icon {
+  display: grid;
+  width: 0.6375rem;
+  height: 0.6375rem;
+  pointer-events: none;
+  place-items: center;
+}
+.kui-app-tab__close-icon > svg {
+  width: 100%;
+  height: 100%;
+}
+@media (hover: hover) and (pointer: fine) {
+  .kui-app-tab__close {
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.12s ease;
+  }
+  .kui-app-tab:hover .kui-app-tab__close,
+  .kui-app-tab:focus-within .kui-app-tab__close {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .kui-app-tab__close {
+    transition: none;
+  }
+}