@kerfjs/ui 5.0.0-beta.3 → 5.0.0-beta.30

package/ux-demo/recipes/navigation-sidebar.tsx

@@ -1,9 +1,9 @@
 import '@kerfjs/ui/layout.css';
 import './recipes.css';
 
+import { ListHeader } from '@kerfjs/ui/list-header';
+import { ListItem } from '@kerfjs/ui/list-item';
 import { LucideIcon } from '@kerfjs/ui/lucide-icon';
-import { MenuHeader } from '@kerfjs/ui/menu-header';
-import { MenuItem } from '@kerfjs/ui/menu-item';
 import { Toolbar } from '@kerfjs/ui/toolbar';
 import { ToolbarControlGroup } from '@kerfjs/ui/toolbar-control-group';
 import { signal } from 'kerfjs';
@@ -14,13 +14,124 @@ import type { RecipeFactory } from './types.js';
 export const createRecipe: RecipeFactory = (announce) => {
   const selected = signal('inbox');
   const expanded = signal(true);
-  const render = () => <aside class="kui-recipe recipe-sidebar kui-recipe__surface kui-pane" data-recipe="recipe-navigation-sidebar">
-    <div class="recipe-sidebar__body kui-pane__content kui-content">
-      <section><MenuHeader label="Workspace" count={3} countLabel="3 workspaces" action="recipe-action" actionLabel="Add workspace item" actionIcon={<LucideIcon icon={Plus} name="plus" />} /><MenuItem action="recipe-action" itemId="inbox" label="Inbox" icon={<LucideIcon icon={Inbox} name="inbox" />} trailing={<span>12</span>} selected={selected.value === 'inbox'} /><MenuItem action="recipe-action" itemId="shared" label="Shared with me" icon={<LucideIcon icon={Users} name="users" />} selected={selected.value === 'shared'} /><MenuItem action="recipe-action" itemId="drafts" label="Drafts without an icon" selected={selected.value === 'drafts'} /></section>
-      <section><MenuHeader label="Projects" toggle action="recipe-action" expanded={expanded.value} />{expanded.value && <><MenuItem action="recipe-action" itemId="design" label="Design system rollout across desktop and tablet" icon={<LucideIcon icon={Folder} name="folder" />} selected={selected.value === 'design'} multiline /><MenuItem action="recipe-action" itemId="archive" label="Archived" disabled title="Available to administrators" /><div class="kui-content-item"><strong>Quarterly goal</strong><p class="kui-recipe__muted">Ship accessible navigation patterns to every workspace.</p></div></>}</section>
-      <p class="kui-recipe__ownership kui-content-item">The recipe owns pane, content-item, and toolbar geometry. The app owns routes, permissions, labels, and disclosure state.</p>
-    </div>
-    <footer class="recipe-sidebar__footer kui-pane__footer"><Toolbar label="Sidebar actions" divider={false} leading={<ToolbarControlGroup appearance="borderless" single><button type="button" aria-label="Add project" data-action="recipe-action" data-recipe-command="add"><LucideIcon icon={Plus} name="plus" /></button></ToolbarControlGroup>} trailing={<ToolbarControlGroup appearance="borderless" single><button type="button" aria-label="Workspace settings" data-action="recipe-action" data-recipe-command="settings"><LucideIcon icon={Settings} name="settings" /></button></ToolbarControlGroup>} /></footer>
-  </aside>;
-  return { render, action(command, element) { if (element.matches('.kui-menu-header__toggle')) { expanded.value = !expanded.value; announce(expanded.value ? 'Projects expanded' : 'Projects collapsed'); return; } const id = element.dataset.itemId; if (id) selected.value = id; announce(id ? `Selected ${id}` : `${command} requested`); } };
+  const render = () => (
+    <aside
+      class="kui-recipe recipe-sidebar kui-recipe__surface kui-pane"
+      data-recipe="recipe-navigation-sidebar"
+    >
+      <div class="recipe-sidebar__body kui-pane__content kui-content">
+        <section>
+          <ListHeader
+            label="Workspace"
+            count={3}
+            countLabel="3 workspaces"
+            action="recipe-action"
+            actionLabel="Add workspace item"
+            actionIcon={<LucideIcon icon={Plus} name="plus" />}
+          />
+          <ListItem
+            action="recipe-action"
+            itemId="inbox"
+            label="Inbox"
+            icon={<LucideIcon icon={Inbox} name="inbox" />}
+            trailing={<span>12</span>}
+            selected={selected.value === 'inbox'}
+          />
+          <ListItem
+            action="recipe-action"
+            itemId="shared"
+            label="Shared with me"
+            icon={<LucideIcon icon={Users} name="users" />}
+            selected={selected.value === 'shared'}
+          />
+          <ListItem
+            action="recipe-action"
+            itemId="drafts"
+            label="Drafts without an icon"
+            selected={selected.value === 'drafts'}
+          />
+        </section>
+        <section>
+          <ListHeader
+            label="Projects"
+            toggle
+            action="recipe-action"
+            expanded={expanded.value}
+          />
+          {expanded.value && (
+            <>
+              <ListItem
+                action="recipe-action"
+                itemId="design"
+                label="Design system rollout across desktop and tablet"
+                icon={<LucideIcon icon={Folder} name="folder" />}
+                selected={selected.value === 'design'}
+                multiline
+              />
+              <ListItem
+                action="recipe-action"
+                itemId="archive"
+                label="Archived"
+                disabled
+                title="Available to administrators"
+              />
+              <div class="kui-content-item">
+                <strong>Quarterly goal</strong>
+                <p class="kui-recipe__muted">
+                  Ship accessible navigation patterns to every workspace.
+                </p>
+              </div>
+            </>
+          )}
+        </section>
+        <p class="kui-recipe__ownership kui-content-item">
+          The recipe owns pane, content-item, and toolbar geometry. The app owns
+          routes, permissions, labels, and disclosure state.
+        </p>
+      </div>
+      <footer class="recipe-sidebar__footer kui-pane__footer">
+        <Toolbar
+          label="Sidebar actions"
+          dividerSides=""
+          leading={
+            <ToolbarControlGroup appearance="borderless" single>
+              <button
+                type="button"
+                aria-label="Add project"
+                data-action="recipe-action"
+                data-recipe-command="add"
+              >
+                <LucideIcon icon={Plus} name="plus" />
+              </button>
+            </ToolbarControlGroup>
+          }
+          trailing={
+            <ToolbarControlGroup appearance="borderless" single>
+              <button
+                type="button"
+                aria-label="Workspace settings"
+                data-action="recipe-action"
+                data-recipe-command="settings"
+              >
+                <LucideIcon icon={Settings} name="settings" />
+              </button>
+            </ToolbarControlGroup>
+          }
+        />
+      </footer>
+    </aside>
+  );
+  return {
+    render,
+    action(command, element) {
+      if (element.matches('.kui-list-header__toggle')) {
+        expanded.value = !expanded.value;
+        announce(expanded.value ? 'Projects expanded' : 'Projects collapsed');
+        return;
+      }
+      const id = element.dataset.itemId;
+      if (id) selected.value = id;
+      announce(id ? `Selected ${id}` : `${command} requested`);
+    },
+  };
 };

package/ux-demo/recipes/navigation-stack.tsx

@@ -0,0 +1,118 @@
+import '@kerfjs/ui/layout.css';
+import '@kerfjs/ui/nav-stack.css';
+import '@kerfjs/ui/toolbar-text.css';
+import './recipes.css';
+
+import { ListHeader } from '@kerfjs/ui/list-header';
+import { ListItem } from '@kerfjs/ui/list-item';
+import { LucideIcon } from '@kerfjs/ui/lucide-icon';
+import { NavStack, type NavStackView } from '@kerfjs/ui/nav-stack';
+import { signal } from 'kerfjs';
+import { ChevronRight, FileText, Folder } from 'lucide';
+
+import type { RecipeFactory } from './types.js';
+
+interface LibraryItem {
+  id: string;
+  label: string;
+  detail: string;
+}
+
+const ITEMS: LibraryItem[] = [
+  {
+    id: 'tokens',
+    label: 'Design tokens',
+    detail:
+      'Semantic color, spacing, and radius scales shared across every surface.',
+  },
+  {
+    id: 'controls',
+    label: 'Toolbar controls',
+    detail:
+      'Control groups and segmented controls with their hover and pressed contracts.',
+  },
+  {
+    id: 'layouts',
+    label: 'App layouts',
+    detail:
+      'Navigation stacks, split views, workbench, and bottom-tab scaffolds.',
+  },
+];
+
+export const createRecipe: RecipeFactory = (announce) => {
+  const listView = (): NavStackView => ({
+    key: 'library',
+    title: 'Library',
+    content: (
+      <div class="recipe-navstack__view kui-pane__content kui-content">
+        <section>
+          <ListHeader label="Components" />
+          {ITEMS.map((item) => (
+            <ListItem
+              action="recipe-action"
+              itemId={item.id}
+              label={item.label}
+              icon={<LucideIcon icon={Folder} name="folder" />}
+              trailing={<LucideIcon icon={ChevronRight} name="chevron-right" />}
+            />
+          ))}
+        </section>
+        <p class="kui-recipe__ownership kui-content-item">
+          The recipe owns the stack as a signal of views and pushes/pops it;
+          `NavStack` renders the stack and `wireNavStack` slides the content and
+          settles the chrome. The app owns selection, data, and routing.
+        </p>
+      </div>
+    ),
+  });
+
+  const detailView = (item: LibraryItem): NavStackView => ({
+    key: item.id,
+    title: item.label,
+    content: (
+      <div class="recipe-navstack__view kui-pane__content kui-content">
+        <div class="kui-content-item">
+          <LucideIcon icon={FileText} name="file-text" />
+          <strong>{item.label}</strong>
+          <p class="kui-recipe__muted">{item.detail}</p>
+        </div>
+      </div>
+    ),
+  });
+
+  const views = signal<NavStackView[]>([listView()]);
+
+  const render = () => (
+    <section
+      class="kui-recipe recipe-navstack kui-recipe__surface"
+      data-recipe="recipe-navigation-stack"
+    >
+      <div class="recipe-navstack__stage">
+        <NavStack
+          id="recipe-nav"
+          label="Component library"
+          views={views.value}
+        />
+      </div>
+    </section>
+  );
+
+  return {
+    render,
+    action(command, element) {
+      if (command === 'nav-back') {
+        if (views.value.length > 1) {
+          views.value = views.value.slice(0, -1);
+          announce('Navigated back');
+        }
+        return;
+      }
+      const id = element.dataset.itemId;
+      const item = ITEMS.find((candidate) => candidate.id === id);
+      if (item) {
+        views.value = [...views.value, detailView(item)];
+        announce(`Opened ${item.label}`);
+      }
+    },
+  };
+};

package/ux-demo/recipes/recipes.css

@@ -113,27 +113,40 @@
 .recipe-header__context {
   margin: 0;
 }
-.recipe-header .kui-page-header__action {
-  max-width: 100%;
-}
 
-.recipe-master-detail {
+.recipe-list-detail {
   display: grid;
-  width: min(58rem, 100%);
+  width: 100%;
   min-height: 25rem;
   grid-template-columns: minmax(13rem, 0.8fr) minmax(18rem, 1.4fr);
 }
-.recipe-master-detail__master {
+.recipe-list-detail__list {
   border-inline-end: 1px solid var(--kui-color-border);
 }
-.recipe-master-detail__detail {
+.recipe-list-detail__detail {
   min-width: 0;
+}
+.recipe-list-detail__body {
   padding-block: var(--kui-layout-item-gap);
 }
+.recipe-list-detail__title {
+  margin-inline: var(--kui-layout-inline-margin, remify(8px));
+}
+.recipe-list-detail__actions {
+  margin-inline: var(--kui-layout-inline-margin, remify(8px));
+}
 .recipe-dialog {
   --spacing: 0;
   --width: min(62rem, calc(100vw - 2rem));
 }
+.kui-recipe__heading-summary {
+  min-width: 0;
+  margin: 0 var(--kui-layout-inline-margin, remify(8px));
+  overflow: hidden;
+  color: var(--kui-color-text-quiet);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 
 .recipe-form {
   width: min(38rem, 100%);
@@ -141,17 +154,24 @@
   padding-block: var(--kui-layout-item-gap);
 }
 .recipe-form__section {
-  --kui-content-item-border: transparent;
-  --kui-content-item-background: transparent;
   display: grid;
+  min-width: 0;
+  margin-inline: var(--kui-layout-inline-margin, remify(8px));
   gap: var(--kui-layout-item-gap);
 }
-.recipe-form__introduction > :where(h2, p) {
-  margin: 0;
-}
 .recipe-form__fields {
   align-content: start;
 }
+.recipe-form__fields wa-input::part(form-control-label),
+.recipe-form__fields wa-input::part(hint),
+.recipe-form__fields wa-textarea::part(form-control-label),
+.recipe-form__fields wa-textarea::part(hint),
+.recipe-form__fields .kui-select::part(form-control-label) {
+  padding-inline: remify(8px);
+}
+.recipe-form__fields wa-textarea::part(textarea) {
+  padding-inline: remify(8px);
+}
 .recipe-form__footer {
   align-content: start;
 }
@@ -190,8 +210,11 @@
   gap: var(--kui-layout-content-gap);
 }
 .recipe-compact-toolbar__guide {
+  /* Span the toolbar's full width instead of the 8px content-item inset — under a
+     full-bleed toolbar/divider the inset read as the boxes floating too far in. */
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
+  margin-inline: 0;
   gap: var(--kui-layout-control-gap);
 }
 .recipe-compact-toolbar__guide > div {
@@ -240,10 +263,10 @@
   .recipe-compact-toolbar__guide {
     grid-template-columns: 1fr 1fr;
   }
-  .recipe-master-detail {
+  .recipe-list-detail {
     grid-template-columns: 1fr;
   }
-  .recipe-master-detail__master {
+  .recipe-list-detail__list {
     border-inline-end: 0;
     border-block-end: 1px solid var(--kui-color-border);
   }
@@ -305,10 +328,6 @@
   .recipe-compact-toolbar__guide {
     grid-template-columns: 1fr;
   }
-  .recipe-header .kui-page-header {
-    align-items: flex-start;
-    flex-direction: column;
-  }
 }
 
 @media (forced-colors: active) {
@@ -326,3 +345,109 @@
     transition-duration: 1ms !important;
   }
 }
+
+.recipe-navstack {
+  display: flex;
+  width: min(28rem, 100%);
+  margin-inline: auto;
+  flex-direction: column;
+}
+.recipe-navstack__stage {
+  height: 24rem;
+}
+.recipe-navstack__view {
+  /* The view is a .kui-content stack whose rows own their 8px margins; add only a
+     little block breathing room, not an inline pad that would double-inset them. */
+  padding-block: var(--kui-space-2xs);
+}
+
+.recipe-inspector {
+  width: min(remify(560px), 100%);
+}
+
+/* The bare Select + SegmentedControl carry no content-item geometry, so inset
+   them to the shared inline margin to line up with the ValueTable / list / banner
+   content-items, and group the two related controls closer than the 24px
+   between-region content gap. */
+.recipe-inspector__controls {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  margin-inline: var(--kui-layout-inline-margin, remify(8px));
+  gap: var(--kui-space-s);
+}
+
+/* Collapsible-sidebar recipe: a mini app frame with a left rail (CollapsiblePanel)
+   full-height at the leading edge, the main pane, and a bottom drawer under it.
+   `contain: paint` bounds the wire's compact overlay (a viewport-`fixed` panel +
+   backdrop) to this frame so the embedded demo does not cover the whole catalog. */
+.recipe-collapsible-sidebar {
+  display: grid;
+  height: min(34rem, 70vh);
+  contain: paint;
+  grid-template-areas:
+    "rail main"
+    "rail drawer";
+  grid-template-columns: auto minmax(0, 1fr);
+  grid-template-rows: minmax(0, 1fr) auto;
+}
+.recipe-collapsible-sidebar__rail {
+  grid-area: rail;
+  display: flex;
+  min-height: 0;
+  flex-direction: column;
+}
+.recipe-collapsible-sidebar__rail-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--kui-space-2xs) var(--kui-layout-inline-margin, remify(8px));
+  border-block-end: 1px solid var(--kui-color-border);
+}
+.recipe-collapsible-sidebar__nav {
+  min-height: 0;
+}
+.recipe-collapsible-sidebar__main {
+  display: grid;
+  grid-area: main;
+  min-width: 0;
+  min-height: 0;
+  grid-template-rows: auto minmax(0, 1fr);
+  background: var(--kui-color-surface-lowered);
+}
+.recipe-collapsible-sidebar__body {
+  min-height: 0;
+}
+.recipe-collapsible-sidebar__card strong {
+  display: block;
+}
+.recipe-collapsible-sidebar__drawer {
+  grid-area: drawer;
+  display: flex;
+  min-height: 0;
+  flex-direction: column;
+}
+.recipe-collapsible-sidebar__drawer-body {
+  min-height: 0;
+}
+.recipe-collapsible-sidebar__log {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  margin: 0;
+  margin-inline: var(--kui-layout-inline-margin, remify(8px));
+  padding: 0;
+  list-style: none;
+  gap: var(--kui-space-xs);
+}
+.recipe-collapsible-sidebar__log li {
+  display: flex;
+  align-items: center;
+  color: var(--kui-color-text-quiet);
+  font-size: var(--kui-font-s);
+  gap: var(--kui-space-xs);
+}
+.recipe-collapsible-sidebar__log svg {
+  width: remify(16px);
+  height: remify(16px);
+}

package/ux-demo/recipes/types.ts

@@ -6,6 +6,14 @@ export interface RecipeController {
   change?(element: HTMLElement): void;
   afterHide?(element: HTMLElement): void;
   resize?(id: string, size: number): void;
+  /**
+   * Install any imperative wiring the recipe owns on its mounted root (e.g.
+   * `wireSidebar` for a collapsible rail/drawer), returning a disposer. The
+   * application boundary calls it once per mount and disposes it on teardown.
+   */
+  wire?(root: HTMLElement): () => void;
 }
 
-export type RecipeFactory = (announce: (message: string) => void) => RecipeController;
+export type RecipeFactory = (
+  announce: (message: string) => void,
+) => RecipeController;

package/ux-demo/recipes/workspace-header.tsx

@@ -1,12 +1,77 @@
 import '@kerfjs/ui/layout.css';
 import './recipes.css';
 
-import { PageHeader } from '@kerfjs/ui/page-header';
 import { StateBanner } from '@kerfjs/ui/state-banner';
+import { Toolbar } from '@kerfjs/ui/toolbar';
+import { ToolbarControlGroup } from '@kerfjs/ui/toolbar-control-group';
+import { ToolbarText } from '@kerfjs/ui/toolbar-text';
 
 import type { RecipeFactory } from './types.js';
 
 export const createRecipe: RecipeFactory = (announce) => ({
-  render: () => <section class="kui-recipe recipe-header kui-recipe__surface kui-content" data-recipe="recipe-workspace-header"><p class="recipe-header__context kui-inline-metadata kui-content-item"><span>Northstar workspace</span><span>·</span><span>Product planning</span></p><PageHeader title="Accessibility readiness and responsive navigation rollout" action={<div class="kui-control-cluster"><button class="kui-recipe__button" type="button" data-action="recipe-action" data-recipe-command="share">Share</button><button class="kui-recipe__button" type="button" data-action="recipe-action" data-recipe-command="more">More actions</button><button class="kui-recipe__button" data-primary="true" type="button" data-action="recipe-action" data-recipe-command="publish">Publish update</button></div>} /><StateBanner title="Ready for review" detail="All required checks passed 18 minutes ago." tone="success" /><p class="kui-recipe__ownership kui-content-item">The recipe owns page hierarchy and action relocation. The app owns authorization, command behavior, breadcrumbs, and product copy.</p></section>,
-  action(command) { announce(`${command} requested`); },
+  render: () => (
+    <section
+      class="kui-recipe recipe-header kui-recipe__surface kui-content"
+      data-recipe="recipe-workspace-header"
+    >
+      <p class="recipe-header__context kui-inline-metadata kui-content-item">
+        <span>Northstar workspace</span>
+        <span>·</span>
+        <span>Product planning</span>
+      </p>
+      <Toolbar
+        label="Workspace heading"
+        dividerSides=""
+        leading={
+          <ToolbarText
+            text="Accessibility readiness and responsive navigation rollout"
+            size="xlarge"
+            id="recipe-workspace-title"
+            headingLevel={1}
+          />
+        }
+        trailing={
+          <ToolbarControlGroup appearance="borderless">
+            <button
+              class="kui-recipe__button"
+              type="button"
+              data-action="recipe-action"
+              data-recipe-command="share"
+            >
+              Share
+            </button>
+            <button
+              class="kui-recipe__button"
+              type="button"
+              data-action="recipe-action"
+              data-recipe-command="more"
+            >
+              More actions
+            </button>
+            <button
+              class="kui-recipe__button"
+              data-primary="true"
+              type="button"
+              data-action="recipe-action"
+              data-recipe-command="publish"
+            >
+              Publish update
+            </button>
+          </ToolbarControlGroup>
+        }
+      />
+      <StateBanner
+        title="Ready for review"
+        detail="All required checks passed 18 minutes ago."
+        tone="success"
+      />
+      <p class="kui-recipe__ownership kui-content-item">
+        The recipe owns page hierarchy and action relocation. The app owns
+        authorization, command behavior, breadcrumbs, and product copy.
+      </p>
+    </section>
+  ),
+  action(command) {
+    announce(`${command} requested`);
+  },
 });

package/dist/browser/dialog-header.js

@@ -1,5 +0,0 @@
-import '../styles/foundation.css';
-import '../styles/toolbar.css';
-import '../styles/toolbar-control-group.css';
-import '../styles/dialog-header.css';
-export * from '../dialog-header.js';

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

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

package/dist/browser/menu-item.js

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

package/dist/browser/page-header.js

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

package/dist/chunk-2PES33HS.js

@@ -1,13 +0,0 @@
-import { jsxs, jsx } from 'kerfjs/jsx-runtime';
-
-// src/page-header.tsx
-function PageHeader({ title, action }) {
-  return /* @__PURE__ */ jsxs("header", { class: "kui-page-header", "data-component": "page-header", children: [
-    /* @__PURE__ */ jsx("h1", { children: title }),
-    action && /* @__PURE__ */ jsx("div", { class: "kui-page-header__action", children: action })
-  ] });
-}
-
-export { PageHeader };
-
-//# sourceMappingURL=chunk-2PES33HS.js.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/page-header.tsx"],"names":[],"mappings":";;;AAOO,SAAS,UAAA,CAAW,EAAE,KAAA,EAAO,MAAA,EAAO,EAAoB;AAC7D,EAAA,uBAAO,IAAA,CAAC,QAAA,EAAA,EAAO,KAAA,EAAM,iBAAA,EAAkB,kBAAe,aAAA,EAAc,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,QAAI,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,IAAM,MAAA,oBAAU,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,2BAA2B,QAAA,EAAA,MAAA,EAAO;AAAA,GAAA,EAAO,CAAA;AACrJ","file":"chunk-2PES33HS.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nexport interface PageHeaderProps {\n  title: string | SafeHtml;\n  action?: SafeHtml;\n}\n\nexport function PageHeader({ title, action }: PageHeaderProps) {\n  return <header class=\"kui-page-header\" data-component=\"page-header\"><h1>{title}</h1>{action && <div class=\"kui-page-header__action\">{action}</div>}</header>;\n}\n"]}

package/dist/chunk-55DATV3A.js

@@ -1,10 +0,0 @@
-import { jsx } from 'kerfjs/jsx-runtime';
-
-// src/loading-spinner.tsx
-function LoadingSpinner({ className = "", label }) {
-  return /* @__PURE__ */ jsx("svg", { class: `kui-loading-spinner ${className}`.trim(), "data-component": "loading-spinner", viewBox: "0 0 24 24", role: label ? "img" : void 0, "aria-label": label, "aria-hidden": label ? void 0 : "true", children: /* @__PURE__ */ jsx("path", { d: "M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,0,0,1.48-1.75,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z" }) });
-}
-
-export { LoadingSpinner };
-
-//# sourceMappingURL=chunk-55DATV3A.js.map

package/dist/chunk-55DATV3A.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/loading-spinner.tsx"],"names":[],"mappings":";;;AAMO,SAAS,cAAA,CAAe,EAAE,SAAA,GAAY,EAAA,EAAI,OAAM,EAAwB;AAC7E,EAAA,uBAAO,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAO,CAAA,oBAAA,EAAuB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK,EAAG,gBAAA,EAAe,iBAAA,EAAkB,OAAA,EAAQ,WAAA,EAAY,IAAA,EAAM,QAAQ,KAAA,GAAQ,MAAA,EAAW,YAAA,EAAY,KAAA,EAAO,aAAA,EAAa,KAAA,GAAQ,MAAA,GAAY,MAAA,EAAQ,QAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,kKAAA,EAAmK,CAAA,EAAO,CAAA;AACpY","file":"chunk-55DATV3A.js","sourcesContent":["export interface LoadingSpinnerProps {\n  className?: string;\n  label?: string;\n}\n\n/** Stable viewBox-centered progress ring based on svg-spinners' MIT-licensed 180-ring. */\nexport function LoadingSpinner({ className = '', label }: LoadingSpinnerProps) {\n  return <svg class={`kui-loading-spinner ${className}`.trim()} data-component=\"loading-spinner\" viewBox=\"0 0 24 24\" role={label ? 'img' : undefined} aria-label={label} aria-hidden={label ? undefined : 'true'}><path d=\"M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,0,0,1.48-1.75,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z\"></path></svg>;\n}\n"]}

package/dist/chunk-7BR3DO2A.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/extension-attributes.ts"],"names":[],"mappings":";AAEA,IAAM,mBAAA,GAAsB,sBAAA;AAC5B,IAAM,yCAAyB,IAAI,GAAA,CAAI,CAAC,QAAA,EAAU,MAAA,EAAQ,MAAM,CAAC,CAAA;AACjE,IAAM,oBAAA,mBAAuB,IAAI,GAAA,CAAI,CAAC,QAAA,EAAU,QAAQ,SAAA,EAAW,MAAA,EAAQ,MAAA,EAAQ,MAAM,CAAC,CAAA;AAEnF,SAAS,oBAAA,CACd,YACA,cAAA,EACwB;AACxB,EAAA,MAAM,WAAmC,EAAC;AAE1C,EAAA,KAAA,MAAW,CAAC,IAAA,EAAM,KAAK,KAAK,MAAA,CAAO,OAAA,CAAQ,UAA0B,CAAA,EAAG;AACtE,IAAA,MAAM,cAAA,GAAiB,KAAK,WAAA,EAAY;AACxC,IAAA,IACE,OAAO,KAAA,KAAU,QAAA,IACd,mBAAA,CAAoB,IAAA,CAAK,cAAc,CAAA,IACvC,CAAC,cAAA,CAAe,GAAA,CAAI,cAAc,CAAA,EACrC;AACA,MAAA,QAAA,CAAS,cAAc,CAAA,GAAI,KAAA;AAAA,IAC7B;AAAA,EACF;AAEA,EAAA,OAAO,QAAA;AACT;AAEO,SAAS,uBAAA,CACd,YACA,kBAAA,EACwB;AACxB,EAAA,MAAM,MAAA,GAAS,UAAA;AACf,EAAA,MAAM,QAAA,GAAW,oBAAA,CAAqB,UAAA,EAAY,kBAAkB,CAAA;AAEpE,EAAA,IAAI,OAAO,MAAA,CAAO,aAAA,KAAkB,QAAA,EAAU,QAAA,CAAS,gBAAgB,MAAA,CAAO,aAAA;AAC9E,EAAA,IAAI,sBAAA,CAAuB,GAAA,CAAI,MAAA,CAAO,mBAA6B,CAAA,EAAG;AACpE,IAAA,QAAA,CAAS,sBAAsB,MAAA,CAAO,mBAAA;AAAA,EACxC;AACA,EAAA,IAAI,OAAO,OAAO,eAAe,CAAA,KAAM,UAAU,QAAA,CAAS,eAAe,CAAA,GAAI,MAAA,CAAO,eAAe,CAAA;AACnG,EAAA,IAAI,oBAAA,CAAqB,GAAA,CAAI,MAAA,CAAO,eAAe,CAAW,CAAA,EAAG;AAC/D,IAAA,QAAA,CAAS,eAAe,CAAA,GAAI,MAAA,CAAO,eAAe,CAAA;AAAA,EACpD;AAEA,EAAA,OAAO,QAAA;AACT","file":"chunk-7BR3DO2A.js","sourcesContent":["type AttributeBag = Readonly<Record<string, unknown>>;\n\nconst DATA_ATTRIBUTE_NAME = /^data-[a-z0-9_.:-]+$/;\nconst POPOVER_TARGET_ACTIONS = new Set(['toggle', 'show', 'hide']);\nconst ARIA_HASPOPUP_VALUES = new Set(['dialog', 'menu', 'listbox', 'tree', 'grid', 'true']);\n\nexport function filterDataAttributes(\n  attributes: object,\n  protectedNames: ReadonlySet<string>,\n): Record<string, string> {\n  const filtered: Record<string, string> = {};\n\n  for (const [name, value] of Object.entries(attributes as AttributeBag)) {\n    const normalizedName = name.toLowerCase();\n    if (\n      typeof value === 'string'\n      && DATA_ATTRIBUTE_NAME.test(normalizedName)\n      && !protectedNames.has(normalizedName)\n    ) {\n      filtered[normalizedName] = value;\n    }\n  }\n\n  return filtered;\n}\n\nexport function filterControlAttributes(\n  attributes: object,\n  protectedDataNames: ReadonlySet<string>,\n): Record<string, string> {\n  const source = attributes as AttributeBag;\n  const filtered = filterDataAttributes(attributes, protectedDataNames);\n\n  if (typeof source.popoverTarget === 'string') filtered.popoverTarget = source.popoverTarget;\n  if (POPOVER_TARGET_ACTIONS.has(source.popoverTargetAction as string)) {\n    filtered.popoverTargetAction = source.popoverTargetAction as string;\n  }\n  if (typeof source['aria-controls'] === 'string') filtered['aria-controls'] = source['aria-controls'];\n  if (ARIA_HASPOPUP_VALUES.has(source['aria-haspopup'] as string)) {\n    filtered['aria-haspopup'] = source['aria-haspopup'] as string;\n  }\n\n  return filtered;\n}\n"]}