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

package/README.md

@@ -109,6 +109,7 @@ as a `New` marker.
 | `TabBar` | `@kerfjs/ui/tab-bar` | `@kerfjs/ui/tab-bar.css` |
 | `wireTabBars`, `reorderTabs` | `@kerfjs/ui/wire-tab-bars` | — |
 | `LoadingSpinner` | `@kerfjs/ui/loading-spinner` | `@kerfjs/ui/loading-spinner.css` |
+| `Skeleton` | `@kerfjs/ui/skeleton` | `@kerfjs/ui/skeleton.css` |
 | `Select` | `@kerfjs/ui/select` | `@kerfjs/ui/select.css` |
 | `SegmentedControl` | `@kerfjs/ui/segmented-control` | `@kerfjs/ui/segmented-control.css` |
 | `TokenSearchField`, `readTokenSearchField`, `placeTokenSearchCaret` | `@kerfjs/ui/token-search-field` | `@kerfjs/ui/token-search-field.css` |

package/ai/component-catalog.json

@@ -485,9 +485,12 @@
       "variants": [
         "large",
         "default",
-        "small"
+        "small",
+        "placeholder (loading)"
+      ],
+      "accessibility": [
+        "Plain text is not a heading; pass headingLevel to expose role=heading + aria-level for a page/section title."
       ],
-      "accessibility": [],
       "delivery": {
         "browserImport": "@kerfjs/ui/toolbar-text",
         "manualCssImport": "@kerfjs/ui/toolbar-text.css",
@@ -612,11 +615,14 @@
         "title",
         "optional summary",
         "icon",
-        "actions"
+        "actions",
+        "placeholder (loading)",
+        "page heading (headingLevel)"
       ],
       "accessibility": [
         "Connect the title id and any provided summary id to the dialog or panel host.",
-        "Pass the trailing actions as a labeled ToolbarControlGroup when the group needs an accessible name."
+        "Pass the trailing actions as a labeled ToolbarControlGroup when the group needs an accessible name.",
+        "For a page/view title pass headingLevel (usually 1) so the title exposes role=heading + aria-level as a heading landmark; omit it for a dialog title, which is referenced via aria-labelledby to titleId."
       ],
       "delivery": {
         "browserImport": "@kerfjs/ui/panel-header",
@@ -674,7 +680,8 @@
       ],
       "variants": [
         "icon rows",
-        "iconless rows"
+        "iconless rows",
+        "placeholder (loading)"
       ],
       "accessibility": [
         "Name ValueTable with its label; ValueTableRow supplies dt/dd semantics, and row icons stay decorative unless meaning requires an accessible label."
@@ -817,7 +824,8 @@
         "count",
         "badge",
         "action",
-        "toggle"
+        "toggle",
+        "placeholder (loading)"
       ],
       "accessibility": [
         "A valid count is hidden as duplicate visual text and its required localized countLabel joins the owned heading or disclosure-button accessible name; zero remains visible.",
@@ -906,7 +914,8 @@
         "pressed",
         "disabled primary",
         "disabled trailing action",
-        "multiline"
+        "multiline",
+        "placeholder (loading)"
       ],
       "accessibility": [
         "The noninteractive root contains two sibling native buttons in primary-then-trailing focus order; each button has its own action, item identity, accessible name, and disabled state.",
@@ -996,7 +1005,8 @@
         "pressed",
         "disabled",
         "trailing",
-        "multiline"
+        "multiline",
+        "placeholder (loading)"
       ],
       "accessibility": [
         "Uses native button activation; selected maps to aria-current and pressed to aria-pressed; rootAttributes cannot add role=menuitem or replace owned ARIA; trailing is dormant content and must not contain controls."
@@ -1261,7 +1271,8 @@
         "rounded",
         "pill",
         "equal width",
-        "small"
+        "small",
+        "placeholder (loading)"
       ],
       "accessibility": [
         "Keep choice labels meaningful and every enabled native button in sequential Tab order."
@@ -1566,7 +1577,8 @@
         "disabled",
         "fit menu",
         "grouped",
-        "custom selected content"
+        "custom selected content",
+        "placeholder (loading)"
       ],
       "accessibility": [
         "Verify the live value, standard events, focus, and rendered output."
@@ -1717,7 +1729,8 @@
         "warning",
         "danger",
         "status",
-        "alert"
+        "alert",
+        "placeholder (loading)"
       ],
       "accessibility": [
         "Use alert urgency only for an attention-requiring failure."
@@ -1919,6 +1932,66 @@
         "recipe": "docs/component-selection.md#problem-to-component-matrix"
       }
     },
+    {
+      "id": "skeleton",
+      "name": "Skeleton",
+      "category": "Feedback",
+      "kind": "component",
+      "source": "kerf",
+      "description": "A subtle, unanimated loading placeholder block for a not-yet-known value slot.",
+      "uses": [],
+      "purpose": "A subtle, unanimated loading placeholder block for a not-yet-known value slot.",
+      "publicExports": [
+        "Skeleton"
+      ],
+      "useWhen": [
+        "Stand in for a value that is still loading, on its own or via a component's placeholder prop, keeping the surrounding layout stable.",
+        "Placeholder a custom or free-text slot with the same visual the components' placeholder mode uses."
+      ],
+      "avoidWhen": [
+        "Do not use for known progress or a busy spinner; use LoadingSpinner.",
+        "Do not animate it or use it as decorative filler."
+      ],
+      "alternatives": [
+        {
+          "id": "wa-skeleton",
+          "relationship": "prefer-over"
+        }
+      ],
+      "appOwns": [
+        "loading lifecycle",
+        "which slots are unknown",
+        "announcing the loading region"
+      ],
+      "variants": [
+        "block",
+        "lines",
+        "labeled"
+      ],
+      "accessibility": [
+        "Decorative by default (aria-hidden); pass label to announce it as an image. A component in placeholder mode marks itself aria-busy and disables its own controls."
+      ],
+      "delivery": {
+        "browserImport": "@kerfjs/ui/skeleton",
+        "manualCssImport": "@kerfjs/ui/skeleton.css",
+        "sideEffects": [
+          "browser-condition-css"
+        ]
+      },
+      "wiring": [],
+      "publicClasses": [
+        "kui-skeleton",
+        "kui-skeleton-lines"
+      ],
+      "publicTokens": [
+        "--kui-skeleton-radius"
+      ],
+      "links": {
+        "catalogRoute": "?component=skeleton",
+        "documentation": "docs/component-selection.md",
+        "recipe": "docs/component-selection.md#problem-to-component-matrix"
+      }
+    },
     {
       "id": "wa-button",
       "name": "Button",

package/ai/public-api-signatures-v1.md

@@ -1,6 +1,6 @@
 # Public API signatures for the UI authoring corpus
 
-Generated from emitted declarations for `@kerfjs/ui@5.0.0-beta.6` and `kerfjs@5.0.0-beta.6`. This bounded reference covers only APIs used by the seven-task corpus. It is interface evidence, not an implementation or runtime guarantee.
+Generated from emitted declarations for `@kerfjs/ui@5.0.0-beta.8` and `kerfjs@5.0.0-beta.8`. This bounded reference covers only APIs used by the seven-task corpus. It is interface evidence, not an implementation or runtime guarantee.
 
 ## `@kerfjs/ui/disclosure-arrow`
 
@@ -45,16 +45,26 @@ export { Toolbar, type ToolbarProps };
 import * as kerfjs from 'kerfjs';
 
 type ToolbarTextSize = 'xlarge' | 'large' | 'default' | 'small';
+/** ARIA heading level for a title exposed as a heading landmark. */
+type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
 interface ToolbarTextProps {
     text: string;
     size?: ToolbarTextSize;
     className?: string;
     /** Optional id, e.g. so a dialog can reference the title via aria-labelledby. */
     id?: string;
+    /**
+     * Expose heading semantics (`role="heading"` + `aria-level`) so the text acts as
+     * a heading landmark — e.g. a page's primary title. Omit to keep the plain span
+     * (the default), which suits a dialog title referenced via `aria-labelledby`.
+     */
+    headingLevel?: HeadingLevel;
+    /** Render the text as an unanimated loading skeleton instead of its value. */
+    placeholder?: boolean;
 }
-declare function ToolbarText({ text, size, className, id }: ToolbarTextProps): kerfjs.SafeHtml;
+declare function ToolbarText({ text, size, className, id, headingLevel, placeholder }: ToolbarTextProps): kerfjs.SafeHtml;
 
-export { ToolbarText, type ToolbarTextProps, type ToolbarTextSize };
+export { type HeadingLevel, ToolbarText, type ToolbarTextProps, type ToolbarTextSize };
 ```
 
 ## `@kerfjs/ui/toolbar-control-group`
@@ -105,6 +115,8 @@ interface MenuHeaderBaseProps {
     disabledReason?: string;
     expanded?: boolean;
     toggle?: boolean;
+    /** Render as an unanimated loading skeleton: keep the label and action affordance, disable interaction. */
+    placeholder?: boolean;
     rootAttributes?: MenuHeaderRootAttributes;
     triggerAttributes?: MenuHeaderTriggerAttributes;
 }
@@ -118,7 +130,7 @@ type MenuHeaderIndicatorProps = {
     badge?: SafeHtml;
 };
 type MenuHeaderProps = MenuHeaderBaseProps & MenuHeaderIndicatorProps;
-declare function MenuHeader({ label, count, countLabel, badge, action, actionLabel, actionIcon, actionDisabled, disabledReason, expanded, toggle, rootAttributes, triggerAttributes }: MenuHeaderProps): SafeHtml;
+declare function MenuHeader({ label, count, countLabel, badge, action, actionLabel, actionIcon, actionDisabled, disabledReason, expanded, toggle, placeholder, rootAttributes, triggerAttributes }: MenuHeaderProps): SafeHtml;
 
 export { MenuHeader, type MenuHeaderProps };
 ```
@@ -162,6 +174,8 @@ interface MenuActionRowProps {
     state?: string;
     disabled?: boolean;
     tabIndex?: number;
+    /** Render as an unanimated loading skeleton, disabling both actions. */
+    placeholder?: boolean;
     trailingAction: string;
     trailingActionLabel: string;
     /** Decorative dormant content for the trailing button. Must not contain interactive descendants. */
@@ -173,7 +187,7 @@ interface MenuActionRowProps {
     rootAttributes?: MenuActionRowRootAttributes;
     trailingActionAttributes?: MenuActionRowTrailingAttributes;
 }
-declare function MenuActionRow({ label, icon, action, itemId, selected, pressed, accessibleLabel, title, multiline, state, disabled, tabIndex, trailingAction, trailingActionLabel, trailingActionIcon, trailingActionDisabled, trailingActionTitle, className, style, rootAttributes, trailingActionAttributes }: MenuActionRowProps): SafeHtml;
+declare function MenuActionRow({ label, icon, action, itemId, selected, pressed, accessibleLabel, title, multiline, state, disabled, tabIndex, placeholder, trailingAction, trailingActionLabel, trailingActionIcon, trailingActionDisabled, trailingActionTitle, className, style, rootAttributes, trailingActionAttributes }: MenuActionRowProps): SafeHtml;
 
 export { MenuActionRow, type MenuActionRowProps };
 ```
@@ -207,9 +221,11 @@ interface MenuItemProps {
     state?: string;
     disabled?: boolean;
     tabIndex?: number;
+    /** Render the row as an unanimated loading skeleton, disabling its action. */
+    placeholder?: boolean;
     rootAttributes?: MenuItemRootAttributes;
 }
-declare function MenuItem({ label, icon, trailing, selected, action, itemId, className, style, pressed, accessibleLabel, title, multiline, state, disabled, tabIndex, rootAttributes }: MenuItemProps): SafeHtml;
+declare function MenuItem({ label, icon, trailing, selected, action, itemId, className, style, pressed, accessibleLabel, title, multiline, state, disabled, tabIndex, placeholder, rootAttributes }: MenuItemProps): SafeHtml;
 
 export { MenuItem, type MenuItemProps };
 ```
@@ -218,6 +234,7 @@ export { MenuItem, type MenuItemProps };
 
 ```ts
 import { SafeHtml } from 'kerfjs';
+import { HeadingLevel } from './toolbar-text.js';
 
 interface PanelHeaderProps {
     title: string;
@@ -227,6 +244,15 @@ interface PanelHeaderProps {
     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;
 }
 /**
  * The heading of a panel, dialog, or page: a plain `Toolbar` whose leading zone
@@ -240,7 +266,7 @@ interface PanelHeaderProps {
  * 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 }: PanelHeaderProps): SafeHtml;
+declare function PanelHeader({ title, titleId, summary, summaryId, icon, iconClassName, actions, headingLevel, placeholder }: PanelHeaderProps): SafeHtml;
 
 export { PanelHeader, type PanelHeaderProps };
 ```
@@ -255,8 +281,10 @@ interface ValueTableRowProps {
     value: string | SafeHtml;
     icon?: SafeHtml;
     className?: string;
+    /** Render the value as an unanimated loading skeleton, keeping the field label. */
+    placeholder?: boolean;
 }
-declare function ValueTableRow({ label, value, icon, className }: ValueTableRowProps): SafeHtml;
+declare function ValueTableRow({ label, value, icon, className, placeholder }: ValueTableRowProps): SafeHtml;
 
 interface ValueTableProps {
     label: string;
@@ -294,9 +322,11 @@ interface AppTabProps {
     selectAction?: string;
     closeAction?: string;
     className?: string;
+    /** Render as an unanimated loading skeleton, disabling select/close and dragging. */
+    placeholder?: boolean;
     rootAttributes?: AppTabRootAttributes;
 }
-declare function AppTab({ id, name, selected, closable, draggable, leading, trailing, closeIcon, selectAction, closeAction, className, rootAttributes }: AppTabProps): SafeHtml;
+declare function AppTab({ id, name, selected, closable, draggable, leading, trailing, closeIcon, selectAction, closeAction, className, placeholder, rootAttributes }: AppTabProps): SafeHtml;
 
 export { AppTab, type AppTabProps };
 ```
@@ -683,8 +713,10 @@ interface SegmentedControlProps {
     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({ id, label, value, choices, action, appearance, shape, size, layout, className, placeholder, }: SegmentedControlProps): SafeHtml;
 
 export { SegmentedControl, type SegmentedControlAppearance, type SegmentedControlChoice, type SegmentedControlLayout, type SegmentedControlProps, type SegmentedControlShape, type SegmentedControlSize };
 ```
@@ -703,8 +735,10 @@ interface StateBannerProps {
     tone?: StateBannerTone;
     urgency?: 'status' | 'alert';
     className?: string;
+    /** Render the title 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, icon, action, tone, urgency, className, placeholder }: StateBannerProps): SafeHtml;
 
 export { StateBanner, type StateBannerProps, type StateBannerTone };
 ```
@@ -742,6 +776,35 @@ declare function LoadingSpinner({ className, label }: LoadingSpinnerProps): kerf
 export { LoadingSpinner, type LoadingSpinnerProps };
 ```
 
+## `@kerfjs/ui/skeleton`
+
+```ts
+import * as kerfjs from 'kerfjs';
+
+interface SkeletonProps {
+    /** Width as any CSS length (e.g. `remify(120px)`, `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 };
+```
+
 ## `@kerfjs/ui/token-search-field`
 
 ```ts

package/ai/skill.md

@@ -32,6 +32,7 @@ Quick routing:
 | Page, panel, or dialog heading | `Toolbar` or `PanelHeader` | Toolbar is persistent chrome; `PanelHeader` heads a panel, dialog, or page. |
 | Exclusive choice | `TabBar`, `SegmentedControl`, or `Select` | Tabs switch tabpanels; segments expose a few choices; Select handles a longer value list. |
 | Status or absent content | `StateBanner` or `EmptyState` | Web Awesome callouts suit ecosystem content; toasts are transient and never the only record of important state. |
+| Loading placeholder | a component's `placeholder` prop, or `Skeleton` | Set `placeholder` on a value-bearing component (`Select`, `MenuHeader`, `MenuItem`, `ValueTableRow`, `PanelHeader`, `SegmentedControl`, `StateBanner`, `AppTab`, `ToolbarText`, `MenuActionRow`) to render its real chrome with value slots as subtle **unanimated** skeletons and interactivity disabled — do not hand-rebuild an empty state. `Skeleton` is the standalone block for a custom slot. Use `LoadingSpinner` for known busy activity, not a skeleton; never animate a skeleton; prefer it over `wa-skeleton`. |
 | Adjustable or static columns | `ResizableRegion` or CSS grid | Use the component only for a user-operable controlled separator. |
 | Structured or ordinary search | `TokenSearchField` or an input | Use token search only when text and ordered filter chips form one editor. |
 | Key/value facts | `ValueTable` with `ValueTableRow` | Use rows with `icon` only when the optional 24px leading visual adds context. |

package/ai/webawesome-jsx-signatures-v1.md

@@ -1,6 +1,6 @@
 # Web Awesome JSX signatures for the UI authoring corpus
 
-Generated from the emitted `@kerfjs/ui@5.0.0-beta.6` declaration boundary. Import `@kerfjs/ui/webawesome` for type effects when authoring direct `wa-*` JSX. The module emits no runtime behavior and does not register custom elements.
+Generated from the emitted `@kerfjs/ui@5.0.0-beta.8` declaration boundary. Import `@kerfjs/ui/webawesome` for type effects when authoring direct `wa-*` JSX. The module emits no runtime behavior and does not register custom elements.
 
 ```ts
 import { KerfCustomElement } from 'kerfjs/jsx-runtime';

package/dist/app-tab.d.ts

@@ -21,8 +21,10 @@ interface AppTabProps {
     selectAction?: string;
     closeAction?: string;
     className?: string;
+    /** Render as an unanimated loading skeleton, disabling select/close and dragging. */
+    placeholder?: boolean;
     rootAttributes?: AppTabRootAttributes;
 }
-declare function AppTab({ id, name, selected, closable, draggable, leading, trailing, closeIcon, selectAction, closeAction, className, rootAttributes }: AppTabProps): SafeHtml;
+declare function AppTab({ id, name, selected, closable, draggable, leading, trailing, closeIcon, selectAction, closeAction, className, placeholder, rootAttributes }: AppTabProps): SafeHtml;
 
 export { AppTab, type AppTabProps };

package/dist/app-tab.js

@@ -1,4 +1,5 @@
-export { AppTab } from './chunk-XZXRLY5Q.js';
+export { AppTab } from './chunk-2Z5TWHKQ.js';
+
 
 
 //# sourceMappingURL=app-tab.js.map

package/dist/browser/app-tab.js

@@ -1,3 +1,4 @@
 import '../styles/foundation.css';
+import '../styles/skeleton.css';
 import '../styles/app-tab.css';
 export * from '../app-tab.js';

package/dist/browser/menu-action-row.js

@@ -1,3 +1,4 @@
 import '../styles/foundation.css';
+import '../styles/skeleton.css';
 import '../styles/menu-action-row.css';
 export * from '../menu-action-row.js';

package/dist/browser/menu-header.js

@@ -1,5 +1,6 @@
 import '../styles/foundation.css';
 import '../styles/lucide-icon.css';
 import '../styles/disclosure-arrow.css';
+import '../styles/skeleton.css';
 import '../styles/menu-header.css';
 export * from '../menu-header.js';

package/dist/browser/menu-item.js

@@ -1,3 +1,4 @@
 import '../styles/foundation.css';
+import '../styles/skeleton.css';
 import '../styles/menu-item.css';
 export * from '../menu-item.js';

package/dist/browser/panel-header.js

@@ -1,4 +1,5 @@
 import '../styles/foundation.css';
+import '../styles/skeleton.css';
 import '../styles/toolbar.css';
 import '../styles/toolbar-control-group.css';
 import '../styles/toolbar-text.css';

package/dist/browser/segmented-control.js

@@ -1,3 +1,4 @@
 import '../styles/foundation.css';
+import '../styles/skeleton.css';
 import '../styles/segmented-control.css';
 export * from '../segmented-control.js';

package/dist/browser/select.js

@@ -1,4 +1,5 @@
 import '../styles/foundation.css';
 import '../styles/lucide-icon.css';
+import '../styles/skeleton.css';
 import '../styles/select.css';
 export * from '../select.js';

package/dist/browser/skeleton.js

@@ -0,0 +1,3 @@
+import '../styles/foundation.css';
+import '../styles/skeleton.css';
+export * from '../skeleton.js';

package/dist/browser/state-banner.js

@@ -1,3 +1,4 @@
 import '../styles/foundation.css';
+import '../styles/skeleton.css';
 import '../styles/state-banner.css';
 export * from '../state-banner.js';

package/dist/browser/toolbar-text.js

@@ -1,3 +1,4 @@
 import '../styles/foundation.css';
+import '../styles/skeleton.css';
 import '../styles/toolbar-text.css';
 export * from '../toolbar-text.js';

package/dist/browser/value-table.js

@@ -1,3 +1,4 @@
 import '../styles/foundation.css';
+import '../styles/skeleton.css';
 import '../styles/value-table.css';
 export * from '../value-table.js';

package/dist/{chunk-XZXRLY5Q.js → chunk-2Z5TWHKQ.js}

@@ -1,4 +1,5 @@
 import { filterDataAttributes } from './chunk-7BR3DO2A.js';
+import { Skeleton } from './chunk-B24C4A6T.js';
 import { jsxs, jsx } from 'kerfjs/jsx-runtime';
 
 var PROTECTED_ROOT_DATA_ATTRIBUTES = /* @__PURE__ */ new Set([
@@ -15,14 +16,14 @@ function CloseIcon() {
     /* @__PURE__ */ jsx("path", { d: "M17 7 7 17" })
   ] });
 }
-function AppTab({ id, name, selected = false, closable = true, draggable = false, leading, trailing, closeIcon, selectAction = "select-tab", closeAction = "close-tab", className = "", rootAttributes = {} }) {
+function AppTab({ id, name, selected = false, closable = true, draggable = false, leading, trailing, closeIcon, selectAction = "select-tab", closeAction = "close-tab", className = "", placeholder = false, rootAttributes = {} }) {
   const keyshortcuts = [closable ? "Delete Backspace" : "", draggable ? "Alt+Shift+ArrowLeft Alt+Shift+ArrowRight" : ""].filter(Boolean).join(" ");
   const extensionAttributes = filterDataAttributes(rootAttributes, PROTECTED_ROOT_DATA_ATTRIBUTES);
-  return /* @__PURE__ */ jsxs("div", { ...extensionAttributes, class: `kui-app-tab ${className}`.trim(), "data-component": "app-tab", "data-tab-id": id, "data-selected": String(selected), draggable: draggable ? "true" : "false", children: [
-    closable && /* @__PURE__ */ jsx("button", { type: "button", tabindex: "-1", class: "kui-app-tab__close", "data-action": closeAction, "data-tab-id": id, "aria-label": `Close ${name}`, title: `Close ${name}`, children: /* @__PURE__ */ jsx("span", { class: "kui-app-tab__close-icon", "aria-hidden": "true", children: closeIcon ?? /* @__PURE__ */ jsx(CloseIcon, {}) }) }),
-    /* @__PURE__ */ jsxs("button", { type: "button", class: "kui-app-tab__select", role: "tab", "aria-selected": String(selected), "aria-keyshortcuts": keyshortcuts || void 0, "data-action": selectAction, "data-tab-id": id, tabindex: selected ? "0" : "-1", children: [
+  return /* @__PURE__ */ jsxs("div", { ...extensionAttributes, class: `kui-app-tab ${className}`.trim(), "data-component": "app-tab", "data-tab-id": id, "data-selected": String(selected), "data-placeholder": placeholder ? "true" : void 0, draggable: placeholder ? "false" : draggable ? "true" : "false", "aria-busy": placeholder ? "true" : void 0, children: [
+    closable && /* @__PURE__ */ jsx("button", { type: "button", tabindex: "-1", class: "kui-app-tab__close", "data-action": placeholder ? void 0 : closeAction, "data-tab-id": id, disabled: placeholder || void 0, "aria-label": `Close ${name}`, title: `Close ${name}`, children: /* @__PURE__ */ jsx("span", { class: "kui-app-tab__close-icon", "aria-hidden": "true", children: closeIcon ?? /* @__PURE__ */ jsx(CloseIcon, {}) }) }),
+    /* @__PURE__ */ jsxs("button", { type: "button", class: "kui-app-tab__select", role: "tab", "aria-selected": String(selected), "aria-keyshortcuts": placeholder ? void 0 : keyshortcuts || void 0, "data-action": placeholder ? void 0 : selectAction, "data-tab-id": id, disabled: placeholder || void 0, tabindex: placeholder ? "-1" : selected ? "0" : "-1", children: [
       leading,
-      /* @__PURE__ */ jsx("span", { class: "kui-app-tab__name", children: name }),
+      /* @__PURE__ */ jsx("span", { class: "kui-app-tab__name", children: placeholder ? /* @__PURE__ */ jsx(Skeleton, { width: "7em" }) : name }),
       closable || trailing ? /* @__PURE__ */ jsx("span", { class: "kui-app-tab__trailing", children: trailing }) : void 0
     ] })
   ] });
@@ -30,4 +31,4 @@ function AppTab({ id, name, selected = false, closable = true, draggable = false
 
 export { AppTab };
 
-//# sourceMappingURL=chunk-XZXRLY5Q.js.map
+//# sourceMappingURL=chunk-2Z5TWHKQ.js.map

package/dist/chunk-2Z5TWHKQ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/app-tab.tsx"],"names":[],"mappings":"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","file":"chunk-2Z5TWHKQ.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport { filterDataAttributes } from './extension-attributes.js';\nimport { Skeleton } from './skeleton.js';\n\nconst PROTECTED_ROOT_DATA_ATTRIBUTES = new Set([\n  'data-component',\n  'data-action',\n  'data-tab-id',\n  'data-selected',\n  'data-tab-dragging',\n  'data-tab-drop-position',\n]);\n\ntype AppTabRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-component'?: never;\n    'data-action'?: never;\n    'data-tab-id'?: never;\n    'data-selected'?: never;\n    'data-tab-dragging'?: never;\n    'data-tab-drop-position'?: never;\n  }\n>;\n\nexport interface AppTabProps {\n  id: string;\n  name: string;\n  selected?: boolean;\n  closable?: boolean;\n  draggable?: boolean;\n  leading?: SafeHtml;\n  trailing?: SafeHtml;\n  /** Decorative dormant content for the close button. Must not contain interactive descendants. */\n  closeIcon?: SafeHtml;\n  selectAction?: string;\n  closeAction?: string;\n  className?: string;\n  /** Render as an unanimated loading skeleton, disabling select/close and dragging. */\n  placeholder?: boolean;\n  rootAttributes?: AppTabRootAttributes;\n}\n\nfunction CloseIcon() {\n  return <svg aria-hidden=\"true\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.25\" stroke-linecap=\"round\"><path d=\"m7 7 10 10\"></path><path d=\"M17 7 7 17\"></path></svg>;\n}\n\nexport function AppTab({ id, name, selected = false, closable = true, draggable = false, leading, trailing, closeIcon, selectAction = 'select-tab', closeAction = 'close-tab', className = '', placeholder = false, rootAttributes = {} }: AppTabProps) {\n  const keyshortcuts = [closable ? 'Delete Backspace' : '', draggable ? 'Alt+Shift+ArrowLeft Alt+Shift+ArrowRight' : ''].filter(Boolean).join(' ');\n  const extensionAttributes = filterDataAttributes(rootAttributes, PROTECTED_ROOT_DATA_ATTRIBUTES);\n  return <div {...extensionAttributes} class={`kui-app-tab ${className}`.trim()} data-component=\"app-tab\" data-tab-id={id} data-selected={String(selected)} data-placeholder={placeholder ? 'true' : undefined} draggable={placeholder ? 'false' : draggable ? 'true' : 'false'} aria-busy={placeholder ? 'true' : undefined}>\n    {closable && <button type=\"button\" tabindex=\"-1\" class=\"kui-app-tab__close\" data-action={placeholder ? undefined : closeAction} data-tab-id={id} disabled={placeholder || undefined} aria-label={`Close ${name}`} title={`Close ${name}`}><span class=\"kui-app-tab__close-icon\" aria-hidden=\"true\">{closeIcon ?? <CloseIcon />}</span></button>}\n    <button type=\"button\" class=\"kui-app-tab__select\" role=\"tab\" aria-selected={String(selected)} aria-keyshortcuts={placeholder ? undefined : keyshortcuts || undefined} data-action={placeholder ? undefined : selectAction} data-tab-id={id} disabled={placeholder || undefined} tabindex={placeholder ? '-1' : selected ? '0' : '-1'}>\n      {leading}<span class=\"kui-app-tab__name\">{placeholder ? <Skeleton width=\"7em\" /> : name}</span>{closable || trailing ? <span class=\"kui-app-tab__trailing\">{trailing}</span> : undefined}\n    </button>\n  </div>;\n}\n"]}

package/dist/{chunk-EGHL5S4P.js → chunk-3YD6ZNRA.js}

@@ -1,4 +1,5 @@
 import { filterDataAttributes, filterControlAttributes } from './chunk-7BR3DO2A.js';
+import { Skeleton } from './chunk-B24C4A6T.js';
 import { jsxs, jsx } from 'kerfjs/jsx-runtime';
 
 var PROTECTED_ROOT_DATA_ATTRIBUTES = /* @__PURE__ */ new Set([
@@ -16,18 +17,18 @@ var PROTECTED_TRAILING_DATA_ATTRIBUTES = /* @__PURE__ */ new Set([
   "data-action",
   "data-item-id"
 ]);
-function MenuActionRow({ label, icon, action, itemId, selected = false, pressed, accessibleLabel, title, multiline = false, state, disabled = false, tabIndex, trailingAction, trailingActionLabel, trailingActionIcon, trailingActionDisabled = false, trailingActionTitle, className = "", style, rootAttributes = {}, trailingActionAttributes = {} }) {
+function MenuActionRow({ label, icon, action, itemId, selected = false, pressed, accessibleLabel, title, multiline = false, state, disabled = false, tabIndex, placeholder = false, trailingAction, trailingActionLabel, trailingActionIcon, trailingActionDisabled = false, trailingActionTitle, className = "", style, rootAttributes = {}, trailingActionAttributes = {} }) {
   const extensionRootAttributes = filterDataAttributes(rootAttributes, PROTECTED_ROOT_DATA_ATTRIBUTES);
   const extensionTrailingAttributes = filterControlAttributes(trailingActionAttributes, PROTECTED_TRAILING_DATA_ATTRIBUTES);
-  return /* @__PURE__ */ jsxs("div", { ...extensionRootAttributes, class: `kui-menu-action-row ${className}`.trim(), style, "data-component": "menu-action-row", "data-item-id": itemId, "data-has-icon": String(Boolean(icon)), "data-multiline": multiline ? "true" : void 0, "data-state": state, "data-selected": String(selected), "data-pressed": pressed === void 0 ? void 0 : String(pressed), children: [
-    /* @__PURE__ */ jsxs("button", { type: "button", class: "kui-menu-action-row__primary", title, disabled, tabindex: tabIndex, "data-action": action, "data-item-id": itemId, "aria-label": accessibleLabel, "aria-current": selected ? "page" : void 0, "aria-pressed": pressed === void 0 ? void 0 : String(pressed), children: [
-      icon && /* @__PURE__ */ jsx("span", { class: "kui-menu-action-row__icon", children: icon }),
-      /* @__PURE__ */ jsx("span", { class: "kui-menu-action-row__label", children: label })
+  return /* @__PURE__ */ jsxs("div", { ...extensionRootAttributes, class: `kui-menu-action-row ${className}`.trim(), style, "data-component": "menu-action-row", "data-item-id": itemId, "data-has-icon": String(Boolean(icon)), "data-multiline": multiline ? "true" : void 0, "data-state": state, "data-selected": String(selected), "data-pressed": pressed === void 0 ? void 0 : String(pressed), "data-placeholder": placeholder ? "true" : void 0, "aria-busy": placeholder ? "true" : void 0, children: [
+    /* @__PURE__ */ jsxs("button", { type: "button", class: "kui-menu-action-row__primary", title: placeholder ? void 0 : title, disabled: disabled || placeholder, tabindex: placeholder ? -1 : tabIndex, "data-action": placeholder ? void 0 : action, "data-item-id": itemId, "aria-label": accessibleLabel, "aria-current": selected ? "page" : void 0, "aria-pressed": pressed === void 0 ? void 0 : String(pressed), children: [
+      icon && /* @__PURE__ */ jsx("span", { class: "kui-menu-action-row__icon", children: placeholder ? /* @__PURE__ */ jsx(Skeleton, { width: "1em", height: "1em" }) : icon }),
+      /* @__PURE__ */ jsx("span", { class: "kui-menu-action-row__label", children: placeholder ? /* @__PURE__ */ jsx(Skeleton, { width: "9em" }) : label })
     ] }),
-    /* @__PURE__ */ jsx("button", { ...extensionTrailingAttributes, type: "button", class: "kui-menu-action-row__trailing-action", "data-action": trailingAction, "data-item-id": itemId, "aria-label": trailingActionLabel, title: trailingActionTitle ?? trailingActionLabel, disabled: trailingActionDisabled || void 0, children: trailingActionIcon })
+    /* @__PURE__ */ jsx("button", { ...extensionTrailingAttributes, type: "button", class: "kui-menu-action-row__trailing-action", "data-action": placeholder ? void 0 : trailingAction, "data-item-id": itemId, "aria-label": trailingActionLabel, title: trailingActionTitle ?? trailingActionLabel, disabled: trailingActionDisabled || placeholder || void 0, children: trailingActionIcon })
   ] });
 }
 
 export { MenuActionRow };
 
-//# sourceMappingURL=chunk-EGHL5S4P.js.map
+//# sourceMappingURL=chunk-3YD6ZNRA.js.map

package/dist/chunk-3YD6ZNRA.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/menu-action-row.tsx"],"names":[],"mappings":"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","file":"chunk-3YD6ZNRA.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport { filterControlAttributes, filterDataAttributes } from './extension-attributes.js';\nimport { Skeleton } from './skeleton.js';\n\nconst PROTECTED_ROOT_DATA_ATTRIBUTES = new Set([\n  'data-component',\n  'data-action',\n  'data-item-id',\n  'data-has-icon',\n  'data-multiline',\n  'data-state',\n  'data-selected',\n  'data-pressed',\n]);\nconst PROTECTED_TRAILING_DATA_ATTRIBUTES = new Set([\n  'data-component',\n  'data-action',\n  'data-item-id',\n]);\n\ntype MenuActionRowRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-component'?: never;\n    'data-action'?: never;\n    'data-item-id'?: never;\n    'data-has-icon'?: never;\n    'data-multiline'?: never;\n    'data-state'?: never;\n    'data-selected'?: never;\n    'data-pressed'?: never;\n  }\n>;\n\ntype MenuActionRowTrailingAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-component'?: never;\n    'data-action'?: never;\n    'data-item-id'?: never;\n    popoverTarget?: string;\n    popoverTargetAction?: 'toggle' | 'show' | 'hide';\n    'aria-controls'?: string;\n    'aria-haspopup'?: 'dialog' | 'menu' | 'listbox' | 'tree' | 'grid' | 'true';\n  }\n>;\n\nexport interface MenuActionRowProps {\n  /** Visible dormant content for the primary button. Must not contain interactive descendants. */\n  label: string | SafeHtml;\n  /** Decorative dormant content for the primary button. Must not contain interactive descendants. */\n  icon?: SafeHtml;\n  action: string;\n  itemId?: string;\n  selected?: boolean;\n  pressed?: boolean;\n  accessibleLabel?: string;\n  title?: string;\n  multiline?: boolean;\n  state?: string;\n  disabled?: boolean;\n  tabIndex?: number;\n  /** Render as an unanimated loading skeleton, disabling both actions. */\n  placeholder?: boolean;\n  trailingAction: string;\n  trailingActionLabel: string;\n  /** Decorative dormant content for the trailing button. Must not contain interactive descendants. */\n  trailingActionIcon: SafeHtml;\n  trailingActionDisabled?: boolean;\n  trailingActionTitle?: string;\n  className?: string;\n  style?: string;\n  rootAttributes?: MenuActionRowRootAttributes;\n  trailingActionAttributes?: MenuActionRowTrailingAttributes;\n}\n\nexport function MenuActionRow({ label, icon, action, itemId, selected = false, pressed, accessibleLabel, title, multiline = false, state, disabled = false, tabIndex, placeholder = false, trailingAction, trailingActionLabel, trailingActionIcon, trailingActionDisabled = false, trailingActionTitle, className = '', style, rootAttributes = {}, trailingActionAttributes = {} }: MenuActionRowProps) {\n  const extensionRootAttributes = filterDataAttributes(rootAttributes, PROTECTED_ROOT_DATA_ATTRIBUTES);\n  const extensionTrailingAttributes = filterControlAttributes(trailingActionAttributes, PROTECTED_TRAILING_DATA_ATTRIBUTES);\n\n  return <div {...extensionRootAttributes} class={`kui-menu-action-row ${className}`.trim()} style={style} data-component=\"menu-action-row\" data-item-id={itemId} data-has-icon={String(Boolean(icon))} data-multiline={multiline ? 'true' : undefined} data-state={state} data-selected={String(selected)} data-pressed={pressed === undefined ? undefined : String(pressed)} data-placeholder={placeholder ? 'true' : undefined} aria-busy={placeholder ? 'true' : undefined}>\n    <button type=\"button\" class=\"kui-menu-action-row__primary\" title={placeholder ? undefined : title} disabled={disabled || placeholder} tabindex={placeholder ? -1 : tabIndex} data-action={placeholder ? undefined : action} data-item-id={itemId} aria-label={accessibleLabel} aria-current={selected ? 'page' : undefined} aria-pressed={pressed === undefined ? undefined : String(pressed)}>\n      {icon && <span class=\"kui-menu-action-row__icon\">{placeholder ? <Skeleton width=\"1em\" height=\"1em\" /> : icon}</span>}\n      <span class=\"kui-menu-action-row__label\">{placeholder ? <Skeleton width=\"9em\" /> : label}</span>\n    </button>\n    <button {...extensionTrailingAttributes} type=\"button\" class=\"kui-menu-action-row__trailing-action\" data-action={placeholder ? undefined : trailingAction} data-item-id={itemId} aria-label={trailingActionLabel} title={trailingActionTitle ?? trailingActionLabel} disabled={trailingActionDisabled || placeholder || undefined}>{trailingActionIcon}</button>\n  </div>;\n}\n"]}

package/dist/chunk-B24C4A6T.js

@@ -0,0 +1,22 @@
+import { jsx } from 'kerfjs/jsx-runtime';
+
+// src/skeleton.tsx
+function blockStyle(width, height, radius) {
+  const parts = [
+    width && `width:${width}`,
+    height && `height:${height}`,
+    radius && `--kui-skeleton-radius:${radius}`
+  ].filter(Boolean);
+  return parts.length ? parts.join(";") : void 0;
+}
+function Skeleton({ width, height, radius, lines, label, className = "" }) {
+  const a11y = { role: label ? "img" : void 0, "aria-label": label, "aria-hidden": label ? void 0 : "true" };
+  if (lines && lines > 1) {
+    return /* @__PURE__ */ jsx("span", { class: `kui-skeleton-lines ${className}`.trim(), "data-component": "skeleton", style: width ? `width:${width}` : void 0, ...a11y, children: Array.from({ length: lines }, (_, index) => /* @__PURE__ */ jsx("span", { class: "kui-skeleton", "aria-hidden": "true", style: blockStyle(index === lines - 1 ? "60%" : void 0, height, radius) })) });
+  }
+  return /* @__PURE__ */ jsx("span", { class: `kui-skeleton ${className}`.trim(), "data-component": "skeleton", style: blockStyle(width, height, radius), ...a11y });
+}
+
+export { Skeleton };
+
+//# sourceMappingURL=chunk-B24C4A6T.js.map

package/dist/chunk-B24C4A6T.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/skeleton.tsx"],"names":[],"mappings":";;;AAcA,SAAS,UAAA,CAAW,KAAA,EAAgB,MAAA,EAAiB,MAAA,EAAqC;AACxF,EAAA,MAAM,KAAA,GAAQ;AAAA,IACZ,KAAA,IAAS,SAAS,KAAK,CAAA,CAAA;AAAA,IACvB,MAAA,IAAU,UAAU,MAAM,CAAA,CAAA;AAAA,IAC1B,MAAA,IAAU,yBAAyB,MAAM,CAAA;AAAA,GAC3C,CAAE,OAAO,OAAO,CAAA;AAChB,EAAA,OAAO,KAAA,CAAM,MAAA,GAAS,KAAA,CAAM,IAAA,CAAK,GAAG,CAAA,GAAI,MAAA;AAC1C;AAQO,SAAS,QAAA,CAAS,EAAE,KAAA,EAAO,MAAA,EAAQ,QAAQ,KAAA,EAAO,KAAA,EAAO,SAAA,GAAY,EAAA,EAAG,EAAkB;AAC/F,EAAA,MAAM,IAAA,GAAO,EAAE,IAAA,EAAM,KAAA,GAAQ,KAAA,GAAQ,MAAA,EAAW,YAAA,EAAc,KAAA,EAAO,aAAA,EAAe,KAAA,GAAQ,MAAA,GAAa,MAAA,EAAiB;AAC1H,EAAA,IAAI,KAAA,IAAS,QAAQ,CAAA,EAAG;AACtB,IAAA,uBAAO,GAAA,CAAC,UAAK,KAAA,EAAO,CAAA,mBAAA,EAAsB,SAAS,CAAA,CAAA,CAAG,IAAA,IAAQ,gBAAA,EAAe,UAAA,EAAW,OAAO,KAAA,GAAQ,CAAA,MAAA,EAAS,KAAK,CAAA,CAAA,GAAK,MAAA,EAAY,GAAG,IAAA,EACtI,QAAA,EAAA,KAAA,CAAM,KAAK,EAAE,MAAA,EAAQ,OAAM,EAAG,CAAC,GAAG,KAAA,qBAAU,GAAA,CAAC,UAAK,KAAA,EAAM,cAAA,EAAe,eAAY,MAAA,EAAO,KAAA,EAAO,WAAW,KAAA,KAAU,KAAA,GAAQ,IAAI,KAAA,GAAQ,MAAA,EAAW,QAAQ,MAAM,CAAA,EAAG,CAAO,CAAA,EAChL,CAAA;AAAA,EACF;AACA,EAAA,2BAAQ,MAAA,EAAA,EAAK,KAAA,EAAO,CAAA,aAAA,EAAgB,SAAS,GAAG,IAAA,EAAK,EAAG,gBAAA,EAAe,UAAA,EAAW,OAAO,UAAA,CAAW,KAAA,EAAO,QAAQ,MAAM,CAAA,EAAI,GAAG,IAAA,EAAM,CAAA;AACxI","file":"chunk-B24C4A6T.js","sourcesContent":["export interface SkeletonProps {\n  /** Width as any CSS length (e.g. `remify(120px)`, `60%`). Defaults to filling its slot. */\n  width?: string;\n  /** Height as any CSS length. Defaults to a single text line. */\n  height?: string;\n  /** Corner radius override (a CSS length). Defaults to the small radius token. */\n  radius?: string;\n  /** Render this many stacked lines (the last one shorter), for multi-line text. */\n  lines?: number;\n  /** Accessible label. Omit to keep the block decorative (`aria-hidden`). */\n  label?: string;\n  className?: string;\n}\n\nfunction blockStyle(width?: string, height?: string, radius?: string): string | undefined {\n  const parts = [\n    width && `width:${width}`,\n    height && `height:${height}`,\n    radius && `--kui-skeleton-radius:${radius}`,\n  ].filter(Boolean);\n  return parts.length ? parts.join(';') : undefined;\n}\n\n/**\n * A subtle, deliberately **unanimated** loading placeholder block. Use it for a\n * value slot whose content is not yet known, on its own or via a component's\n * `placeholder` prop. Decorative by default (`aria-hidden`); pass `label` to\n * announce it. Sizes to its slot unless `width`/`height` are given.\n */\nexport function Skeleton({ width, height, radius, lines, label, className = '' }: SkeletonProps) {\n  const a11y = { role: label ? 'img' : undefined, 'aria-label': label, 'aria-hidden': label ? undefined : ('true' as const) };\n  if (lines && lines > 1) {\n    return <span class={`kui-skeleton-lines ${className}`.trim()} data-component=\"skeleton\" style={width ? `width:${width}` : undefined} {...a11y}>\n      {Array.from({ length: lines }, (_, index) => <span class=\"kui-skeleton\" aria-hidden=\"true\" style={blockStyle(index === lines - 1 ? '60%' : undefined, height, radius)}></span>)}\n    </span>;\n  }\n  return <span class={`kui-skeleton ${className}`.trim()} data-component=\"skeleton\" style={blockStyle(width, height, radius)} {...a11y}></span>;\n}\n"]}