@kerfjs/ui 5.0.0-beta.50 → 5.0.0-beta.52

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

@@ -1,137 +1,139 @@
 import '@kerfjs/ui/layout.css';
-import './navigation-sidebar.css';
 
+import { List } from '@kerfjs/ui/list';
 import { ListHeader } from '@kerfjs/ui/list-header';
 import { ListItem } from '@kerfjs/ui/list-item';
 import { LucideIcon } from '@kerfjs/ui/lucide-icon';
 import { Pane } from '@kerfjs/ui/pane';
+import { Text } from '@kerfjs/ui/text';
 import { Toolbar } from '@kerfjs/ui/toolbar';
 import { ToolbarControlGroup } from '@kerfjs/ui/toolbar-control-group';
 import { signal } from 'kerfjs';
 import { Folder, Inbox, Plus, Settings, Users } from 'lucide';
 
-import {
-  RecipeMutedText,
-  RecipeOwnershipNote,
-  RecipeRoot,
-} from './recipe-root.js';
-import type { RecipeFactory } from './types.js';
+import type { RecipeFactory, RecipePresentation } from './types.js';
+
+export const presentation: RecipePresentation = {
+  viewport: {
+    layout: 'grid',
+    width: 'compact',
+    minHeight: 'medium',
+    frame: 'solid',
+    surface: 'default',
+    overflow: 'hidden',
+    shadow: true,
+  },
+  note: 'The recipe owns pane, content-item, and toolbar geometry. The app owns routes, permissions, labels, and disclosure state.',
+};
 
 export const createRecipe: RecipeFactory = (announce) => {
   const selected = signal('inbox');
   const expanded = signal(true);
   const render = () => (
-    <RecipeRoot
+    <Pane
       element="aside"
-      recipe="recipe-navigation-sidebar"
-      measure="sidebar"
-    >
-      <div class="recipe-sidebar">
-        <Pane
-          element="div"
-          contentClassName="recipe-sidebar__body"
-          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>
-              }
-            />
+      label="Workspace navigation"
+      rootAttributes={{ 'data-recipe': 'recipe-navigation-sidebar' }}
+      footer={
+        <Toolbar
+          label="Sidebar actions"
+          dividerSides="t"
+          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>
           }
-        >
-          <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'}
-            />
+          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>
+          }
+        />
+      }
+    >
+      <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="shared"
-              label="Shared with me"
-              icon={<LucideIcon icon={Users} name="users" />}
-              selected={selected.value === 'shared'}
+              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="drafts"
-              label="Drafts without an icon"
-              selected={selected.value === 'drafts'}
-            />
-          </section>
-          <section>
-            <ListHeader
-              label="Projects"
-              toggle
-              action="recipe-action"
-              expanded={expanded.value}
+              itemId="archive"
+              label="Archived"
+              disabled
+              title="Available to administrators"
             />
-            {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">
+            <div class="kui-content-item">
+              <List gap="2xs">
+                <Text variant="span">
                   <strong>Quarterly goal</strong>
-                  <RecipeMutedText>
-                    Ship accessible navigation patterns to every workspace.
-                  </RecipeMutedText>
-                </div>
-              </>
-            )}
-          </section>
-          <RecipeOwnershipNote>
-            The recipe owns pane, content-item, and toolbar geometry. The app
-            owns routes, permissions, labels, and disclosure state.
-          </RecipeOwnershipNote>
-        </Pane>
-      </div>
-    </RecipeRoot>
+                </Text>
+                <Text variant="span" tone="quiet" size="compact">
+                  Ship accessible navigation patterns to every workspace.
+                </Text>
+              </List>
+            </div>
+          </>
+        )}
+      </section>
+    </Pane>
   );
   return {
     render,

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

@@ -1,22 +1,31 @@
 import '@kerfjs/ui/layout.css';
 import '@kerfjs/ui/nav-stack.css';
 import '@kerfjs/ui/toolbar-text.css';
-import './navigation-stack.css';
 
 import { List } from '@kerfjs/ui/list';
 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 { Row } from '@kerfjs/ui/row';
+import { Text } from '@kerfjs/ui/text';
 import { signal } from 'kerfjs';
 import { ChevronRight, FileText, Folder } from 'lucide';
 
-import {
-  RecipeMutedText,
-  RecipeOwnershipNote,
-  RecipeRoot,
-} from './recipe-root.js';
-import type { RecipeFactory } from './types.js';
+import type { RecipeFactory, RecipePresentation } from './types.js';
+
+export const presentation: RecipePresentation = {
+  viewport: {
+    layout: 'grid',
+    width: 'compact',
+    height: 'tall',
+    frame: 'solid',
+    surface: 'default',
+    overflow: 'hidden',
+    shadow: true,
+  },
+  note: '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.',
+};
 
 interface LibraryItem {
   id: string;
@@ -50,29 +59,20 @@ export const createRecipe: RecipeFactory = (announce) => {
     key: 'library',
     title: 'Library',
     content: (
-      <div class="recipe-navstack__view">
-        <List gap="m">
-          <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>
-          <RecipeOwnershipNote>
-            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.
-          </RecipeOwnershipNote>
-        </List>
-      </div>
+      <List>
+        <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>
+      </List>
     ),
   });
 
@@ -80,32 +80,33 @@ export const createRecipe: RecipeFactory = (announce) => {
     key: item.id,
     title: item.label,
     content: (
-      <div class="recipe-navstack__view">
-        <List gap="m">
-          <div class="kui-content-item">
+      <List controlInsets="t">
+        <div class="kui-content-item">
+          <Row gap="xs">
             <LucideIcon icon={FileText} name="file-text" />
-            <strong>{item.label}</strong>
-            <RecipeMutedText>{item.detail}</RecipeMutedText>
-          </div>
-        </List>
-      </div>
+            <List gap="2xs">
+              <Text variant="span">
+                <strong>{item.label}</strong>
+              </Text>
+              <Text variant="span" tone="quiet" size="compact">
+                {item.detail}
+              </Text>
+            </List>
+          </Row>
+        </div>
+      </List>
     ),
   });
 
   const views = signal<NavStackView[]>([listView()]);
 
   const render = () => (
-    <RecipeRoot recipe="recipe-navigation-stack" measure="stack">
-      <div class="recipe-navstack">
-        <div class="recipe-navstack__stage">
-          <NavStack
-            id="recipe-nav"
-            label="Component library"
-            views={views.value}
-          />
-        </div>
-      </div>
-    </RecipeRoot>
+    <section
+      data-recipe="recipe-navigation-stack"
+      aria-label="Component library"
+    >
+      <NavStack id="recipe-nav" label="Component library" views={views.value} />
+    </section>
   );
 
   return {

package/ux-demo/recipes/types.ts

@@ -1,3 +1,4 @@
+import type { CatalogExampleViewport } from '@kerfjs/ui/catalog';
 import type { SafeHtml } from 'kerfjs';
 
 export interface RecipeController {
@@ -17,3 +18,16 @@ export interface RecipeController {
 export type RecipeFactory = (
   announce: (message: string) => void,
 ) => RecipeController;
+
+/**
+ * Catalog-only presentation for one recipe. The UX catalog frames the recipe in
+ * a `CatalogExample` viewport and shows `note` when recipe notes are toggled on;
+ * an application that copies the recipe ignores this export and mounts the
+ * controller into its own container.
+ */
+export interface RecipePresentation {
+  /** Catalog-owned specimen frame: width, height, surface, and border. */
+  viewport?: CatalogExampleViewport;
+  /** Ownership note: what the recipe owns versus what the application owns. */
+  note: string;
+}

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

@@ -1,75 +1,92 @@
 import '@kerfjs/ui/layout.css';
-import './workspace-header.css';
 
+import { List } from '@kerfjs/ui/list';
+import { ListInsetText } from '@kerfjs/ui/list-inset-text';
 import { StateBanner } from '@kerfjs/ui/state-banner';
+import { Text } from '@kerfjs/ui/text';
 import { Toolbar } from '@kerfjs/ui/toolbar';
 import { ToolbarControlGroup } from '@kerfjs/ui/toolbar-control-group';
 import { ToolbarText } from '@kerfjs/ui/toolbar-text';
 
-import { RecipeOwnershipNote, RecipeRoot } from './recipe-root.js';
-import type { RecipeFactory } from './types.js';
+import type { RecipeFactory, RecipePresentation } from './types.js';
+
+export const presentation: RecipePresentation = {
+  viewport: {
+    width: 'full',
+    frame: 'solid',
+    surface: 'default',
+    overflow: 'hidden',
+    shadow: true,
+  },
+  note: 'The recipe owns page hierarchy and action relocation. The app owns authorization, command behavior, breadcrumbs, and product copy.',
+};
 
 export const createRecipe: RecipeFactory = (announce) => ({
   render: () => (
-    <RecipeRoot recipe="recipe-workspace-header">
-      <div class="recipe-header kui-content">
-        <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"
-              buttonAppearance="push"
-              content="text"
-            >
-              <button
-                type="button"
-                data-action="recipe-action"
-                data-recipe-command="share"
-              >
-                Share
-              </button>
-              <button
-                type="button"
-                data-action="recipe-action"
-                data-recipe-command="more"
+    <section
+      data-recipe="recipe-workspace-header"
+      aria-labelledby="recipe-workspace-title"
+    >
+      <List gap="l" controlInsets="tb">
+        <List>
+          <ListInsetText sides="rl">
+            <Text variant="span" tone="quiet" size="compact">
+              Northstar workspace · Product planning
+            </Text>
+          </ListInsetText>
+          <Toolbar
+            label="Workspace heading"
+            dividerSides=""
+            responsive="stack"
+            responsiveAt="compact"
+            leading={
+              <ToolbarText
+                text="Accessibility readiness and responsive navigation rollout"
+                size="xlarge"
+                id="recipe-workspace-title"
+                headingLevel={1}
+                wrap
+                maxLines={2}
+              />
+            }
+            trailing={
+              <ToolbarControlGroup
+                appearance="borderless"
+                buttonAppearance="push"
+                content="text"
               >
-                More actions
-              </button>
-              <button
-                type="button"
-                data-action="recipe-action"
-                data-recipe-command="publish"
-              >
-                Publish update
-              </button>
-            </ToolbarControlGroup>
-          }
-        />
+                <button
+                  type="button"
+                  data-action="recipe-action"
+                  data-recipe-command="share"
+                >
+                  Share
+                </button>
+                <button
+                  type="button"
+                  data-action="recipe-action"
+                  data-recipe-command="more"
+                >
+                  More actions
+                </button>
+                <button
+                  type="button"
+                  data-action="recipe-action"
+                  data-recipe-command="publish"
+                >
+                  Publish update
+                </button>
+              </ToolbarControlGroup>
+            }
+          />
+        </List>
         <StateBanner
           title="Ready for review"
           detail="All required checks passed 18 minutes ago."
           tone="success"
         />
-        <RecipeOwnershipNote>
-          The recipe owns page hierarchy and action relocation. The app owns
-          authorization, command behavior, breadcrumbs, and product copy.
-        </RecipeOwnershipNote>
-      </div>
-    </RecipeRoot>
+      </List>
+    </section>
   ),
   action(command) {
     announce(`${command} requested`);

package/dist/chunk-54HM36IQ.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/skeleton.tsx"],"names":[],"mappings":";;;AAkBA,SAAS,UAAA,CACP,KAAA,EACA,MAAA,EACA,MAAA,EACoB;AACpB,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;AAAA,EACvB,KAAA;AAAA,EACA,MAAA;AAAA,EACA,MAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ;AACF,CAAA,EAAkB;AAChB,EAAA,MAAM,IAAA,GAAO;AAAA,IACX,IAAA,EAAM,QAAQ,KAAA,GAAQ,MAAA;AAAA,IACtB,YAAA,EAAc,KAAA;AAAA,IACd,aAAA,EAAe,QAAQ,MAAA,GAAa;AAAA,GACtC;AACA,EAAA,IAAI,KAAA,IAAS,QAAQ,CAAA,EAAG;AACtB,IAAA,uBACE,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,KAAA,EAAO,CAAA,mBAAA,EAAsB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,QAC9C,gBAAA,EAAe,UAAA;AAAA,QACf,KAAA,EAAO,KAAA,GAAQ,CAAA,MAAA,EAAS,KAAK,CAAA,CAAA,GAAK,MAAA;AAAA,QACjC,GAAG,IAAA;AAAA,QACJ,IAAA;AAAA,QAEC,QAAA,EAAA,KAAA,CAAM,KAAK,EAAE,MAAA,EAAQ,OAAM,EAAG,CAAC,GAAG,KAAA,qBACjC,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,KAAA,EAAM,cAAA;AAAA,YACN,aAAA,EAAY,MAAA;AAAA,YACZ,KAAA,EAAO,UAAA;AAAA,cACL,KAAA,KAAU,KAAA,GAAQ,CAAA,GAAI,GAAA,CAAI,EAAE,CAAA,GAAI,MAAA;AAAA,cAChC,MAAA;AAAA,cACA;AAAA;AACF;AAAA,SAEH;AAAA;AAAA,KACH;AAAA,EAEJ;AACA,EAAA,uBACE,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,aAAA,EAAgB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MACxC,gBAAA,EAAe,UAAA;AAAA,MACf,KAAA,EAAO,UAAA,CAAW,KAAA,EAAO,MAAA,EAAQ,MAAM,CAAA;AAAA,MACtC,GAAG,IAAA;AAAA,MACJ;AAAA;AAAA,GACD;AAEL","file":"chunk-54HM36IQ.js","sourcesContent":["import { type CssLength, type CssSize, pct } from './css-values.js';\n\nexport interface SkeletonProps {\n  /** Typed width or intrinsic sizing keyword. Defaults to filling its slot. */\n  width?: CssSize;\n  /** Typed height or intrinsic sizing keyword. Defaults to a single text line. */\n  height?: CssSize;\n  /** Typed corner-radius override. Defaults to the small radius token. */\n  radius?: CssLength;\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  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\nfunction blockStyle(\n  width?: CssSize,\n  height?: CssSize,\n  radius?: CssLength,\n): 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({\n  width,\n  height,\n  radius,\n  lines,\n  label,\n  className = '',\n  slot,\n}: SkeletonProps) {\n  const a11y = {\n    role: label ? 'img' : undefined,\n    'aria-label': label,\n    'aria-hidden': label ? undefined : ('true' as const),\n  };\n  if (lines && lines > 1) {\n    return (\n      <span\n        class={`kui-skeleton-lines ${className}`.trim()}\n        data-component=\"skeleton\"\n        style={width ? `width:${width}` : undefined}\n        {...a11y}\n        slot={slot}\n      >\n        {Array.from({ length: lines }, (_, index) => (\n          <span\n            class=\"kui-skeleton\"\n            aria-hidden=\"true\"\n            style={blockStyle(\n              index === lines - 1 ? pct(60) : undefined,\n              height,\n              radius,\n            )}\n          ></span>\n        ))}\n      </span>\n    );\n  }\n  return (\n    <span\n      class={`kui-skeleton ${className}`.trim()}\n      data-component=\"skeleton\"\n      style={blockStyle(width, height, radius)}\n      {...a11y}\n      slot={slot}\n    ></span>\n  );\n}\n"]}

package/dist/chunk-AQSKJ6U6.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/row.tsx"],"names":[],"mappings":";;;;AAgBA,IAAM,UAAA,GAAqC;AAAA,EACzC,MAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA;AAAA,EACA,GAAA;AAAA,EACA,GAAA;AAAA,EACA,GAAA;AAAA,EACA;AACF,CAAA;AAwBO,SAAS,GAAA,CAAI;AAAA,EAClB,QAAA;AAAA,EACA,MAAA,GAAS,MAAA;AAAA,EACT,MAAA,GAAS,MAAA;AAAA,EACT,GAAA,GAAM,IAAA;AAAA,EACN,IAAA,GAAO,KAAA;AAAA,EACP,IAAA,GAAO,KAAA;AAAA,EACP,UAAA,GAAa,EAAA;AAAA,EACb,aAAA,GAAgB,EAAA;AAAA,EAChB,SAAA,GAAY,EAAA;AAAA,EACZ;AACF,CAAA,EAAa;AACX,EAAA,MAAM,WAAW,UAAA,CAAW,QAAA,CAAS,GAAkB,CAAA,GACnD,KAAA,CAAM,GAAkB,CAAA,GACxB,GAAA;AACJ,EAAA,MAAM,SAAA,GAAY,IAAA,KAAS,IAAA,GAAO,UAAA,GAAa,IAAA,IAAQ,MAAA;AACvD,EAAA,MAAM,KAAA,GAAQ;AAAA,IACZ,kBAAkB,QAAQ,CAAA,CAAA;AAAA,IAC1B,SAAA,GAAY,CAAA,gBAAA,EAAmB,SAAS,CAAA,CAAA,GAAK;AAAA,GAC/C,CACG,MAAA,CAAO,OAAO,CAAA,CACd,KAAK,GAAG,CAAA;AAEX,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,QAAA,EAAW,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MACnC,gBAAA,EAAe,KAAA;AAAA,MACf,cAAA,EAAc,oBAAoB,MAAM,CAAA;AAAA,MACxC,cAAA,EAAc,kBAAkB,MAAM,CAAA;AAAA,MACtC,WAAA,EAAW,MAAA,CAAO,OAAA,CAAQ,IAAI,CAAC,CAAA;AAAA,MAC/B,WAAA,EAAW,OAAO,IAAI,CAAA;AAAA,MACtB,oBAAkB,UAAA,IAAc,MAAA;AAAA,MAChC,uBAAqB,aAAA,IAAiB,MAAA;AAAA,MACtC,KAAA;AAAA,MACA,IAAA;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ","file":"chunk-AQSKJ6U6.js","sourcesContent":["import {\n  type CssFlex,\n  type CssFlexKeyword,\n  type CssLength,\n  space,\n  type UiSpaceName,\n} from './css-values.js';\nimport type { Sides } from './divider-sides.js';\nimport {\n  type HorizontalAlignment,\n  horizontalAlignment,\n  type VerticalAlignment,\n  verticalAlignment,\n} from './flex-alignment.js';\nimport type { KerfUiContent } from './semantic-content.js';\n\nconst spaceNames: readonly UiSpaceName[] = [\n  'none',\n  '2xs',\n  'xs',\n  's',\n  'm',\n  'l',\n  'xl',\n];\n\nexport interface RowProps {\n  children?: KerfUiContent;\n  /** Horizontal distribution. Defaults to left. */\n  hAlign?: HorizontalAlignment;\n  /** Vertical alignment and wrapped-line distribution. Defaults to full. */\n  vAlign?: VerticalAlignment;\n  /** A named UI spacing token or typed CSS length. Defaults to xs. */\n  gap?: UiSpaceName | CssLength;\n  /** Allow this row to grow/shrink, use a keyword, or supply a typed CSS flex shorthand. */\n  flex?: boolean | CssFlexKeyword | CssFlex;\n  /** Allow children to wrap onto additional lines. */\n  wrap?: boolean;\n  /** Physical sides that receive the standard 17px text inset. */\n  textInsets?: Sides;\n  /** Physical sides that receive the standard 8px control inset. Text insets win on overlap. */\n  controlInsets?: Sides;\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/** A horizontal flex row with explicit physical-axis alignment and spacing. */\nexport function Row({\n  children,\n  hAlign = 'left',\n  vAlign = 'full',\n  gap = 'xs',\n  flex = false,\n  wrap = false,\n  textInsets = '',\n  controlInsets = '',\n  className = '',\n  slot,\n}: RowProps) {\n  const gapValue = spaceNames.includes(gap as UiSpaceName)\n    ? space(gap as UiSpaceName)\n    : gap;\n  const flexValue = flex === true ? '1 1 auto' : flex || undefined;\n  const style = [\n    `--_kui-row-gap:${gapValue}`,\n    flexValue ? `--_kui-row-flex:${flexValue}` : '',\n  ]\n    .filter(Boolean)\n    .join(';');\n\n  return (\n    <div\n      class={`kui-row ${className}`.trim()}\n      data-component=\"row\"\n      data-h-align={horizontalAlignment(hAlign)}\n      data-v-align={verticalAlignment(vAlign)}\n      data-flex={String(Boolean(flex))}\n      data-wrap={String(wrap)}\n      data-text-insets={textInsets || undefined}\n      data-control-insets={controlInsets || undefined}\n      style={style}\n      slot={slot}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport type {\n  CssFlex,\n  CssFlexKeyword,\n  CssLength,\n  UiSpaceName,\n} from './css-values.js';\nexport type { Sides } from './divider-sides.js';\nexport type {\n  HorizontalAlignment,\n  VerticalAlignment,\n} from './flex-alignment.js';\n"]}

package/dist/chunk-COUPLRZG.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/app-tab.tsx"],"names":[],"mappings":"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","file":"chunk-COUPLRZG.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport { em } from './css-values.js';\nimport { filterDataAttributes } from './extension-attributes.js';\nimport type { KerfUiContent } from './semantic-content.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 type AppTabPresentation = 'pill' | 'segmented' | 'icon-only';\nexport type AppTabSize = 'default' | 'compact';\n\nexport interface AppTabProps {\n  id: string;\n  name: string;\n  selected?: boolean;\n  closable?: boolean;\n  draggable?: boolean;\n  leading?: KerfUiContent;\n  trailing?: KerfUiContent;\n  /** Visual treatment within a TabBar. Icon-only tabs retain `name` as their accessible name. */\n  presentation?: AppTabPresentation;\n  /** Compact tabs use the 32px application-rail height. */\n  size?: AppTabSize;\n  /** Maximum visible label width in CSS pixels before ellipsis. */\n  labelMaxWidth?: number;\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  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\nfunction CloseIcon() {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2.25\"\n      stroke-linecap=\"round\"\n    >\n      <path d=\"m7 7 10 10\"></path>\n      <path d=\"M17 7 7 17\"></path>\n    </svg>\n  );\n}\n\nexport function AppTab({\n  id,\n  name,\n  selected = false,\n  closable = true,\n  draggable = false,\n  leading,\n  trailing,\n  presentation = 'pill',\n  size = 'default',\n  labelMaxWidth,\n  closeIcon,\n  selectAction = 'select-tab',\n  closeAction = 'close-tab',\n  className = '',\n  placeholder = false,\n  rootAttributes = {},\n  slot,\n}: AppTabProps) {\n  const keyshortcuts = [\n    closable ? 'Delete Backspace' : '',\n    draggable ? 'Alt+Shift+ArrowLeft Alt+Shift+ArrowRight' : '',\n  ]\n    .filter(Boolean)\n    .join(' ');\n  const extensionAttributes = filterDataAttributes(\n    rootAttributes,\n    PROTECTED_ROOT_DATA_ATTRIBUTES,\n  );\n  return (\n    <div\n      {...extensionAttributes}\n      class={`kui-app-tab ${className}`.trim()}\n      data-component=\"app-tab\"\n      data-tab-id={id}\n      data-selected={String(selected)}\n      data-presentation={presentation}\n      data-size={size}\n      data-placeholder={placeholder ? 'true' : undefined}\n      draggable={placeholder ? 'false' : draggable ? 'true' : 'false'}\n      aria-busy={placeholder ? 'true' : undefined}\n      style={\n        labelMaxWidth === undefined\n          ? undefined\n          : `--kui-app-tab-label-max-width:${labelMaxWidth}px`\n      }\n      slot={slot}\n    >\n      {closable && (\n        <button\n          type=\"button\"\n          tabindex=\"-1\"\n          class=\"kui-app-tab__close\"\n          data-action={placeholder ? undefined : closeAction}\n          data-tab-id={id}\n          disabled={placeholder || undefined}\n          aria-label={`Close ${name}`}\n          title={`Close ${name}`}\n        >\n          <span class=\"kui-app-tab__close-icon\" aria-hidden=\"true\">\n            {closeIcon ?? <CloseIcon />}\n          </span>\n        </button>\n      )}\n      <button\n        type=\"button\"\n        class=\"kui-app-tab__select\"\n        role=\"tab\"\n        aria-selected={String(selected)}\n        aria-label={presentation === 'icon-only' ? name : undefined}\n        aria-keyshortcuts={placeholder ? undefined : keyshortcuts || undefined}\n        data-action={placeholder ? undefined : selectAction}\n        data-tab-id={id}\n        disabled={placeholder || undefined}\n        tabindex={placeholder ? '-1' : selected ? '0' : '-1'}\n      >\n        {leading}\n        <span\n          class=\"kui-app-tab__name\"\n          aria-hidden={presentation === 'icon-only' ? 'true' : undefined}\n        >\n          {placeholder ? <Skeleton width={em(7)} /> : name}\n        </span>\n        {closable || trailing ? (\n          <span class=\"kui-app-tab__trailing\">{trailing}</span>\n        ) : undefined}\n      </button>\n    </div>\n  );\n}\n"]}

package/dist/chunk-ELRMBQEC.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/grid.tsx"],"names":[],"mappings":";;;AASA,IAAM,UAAA,GAAqC;AAAA,EACzC,MAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA;AAAA,EACA,GAAA;AAAA,EACA,GAAA;AAAA,EACA,GAAA;AAAA,EACA;AACF,CAAA;AAgBO,SAAS,IAAA,CAAK;AAAA,EACnB,QAAA;AAAA,EACA,OAAA;AAAA,EACA,GAAA,GAAM,IAAA;AAAA,EACN,IAAA,GAAO,KAAA;AAAA,EACP,SAAA,GAAY,EAAA;AAAA,EACZ;AACF,CAAA,EAAc;AACZ,EAAA,IAAI,CAAC,MAAA,CAAO,aAAA,CAAc,OAAO,CAAA,IAAK,UAAU,CAAA,EAAG;AACjD,IAAA,MAAM,IAAI,WAAW,8CAA8C,CAAA;AAAA,EACrE;AAEA,EAAA,MAAM,WAAW,UAAA,CAAW,QAAA,CAAS,GAAkB,CAAA,GACnD,KAAA,CAAM,GAAkB,CAAA,GACxB,GAAA;AACJ,EAAA,MAAM,SAAA,GAAY,IAAA,KAAS,IAAA,GAAO,UAAA,GAAa,IAAA,IAAQ,MAAA;AACvD,EAAA,MAAM,KAAA,GAAQ;AAAA,IACZ,uBAAuB,OAAO,CAAA,CAAA;AAAA,IAC9B,mBAAmB,QAAQ,CAAA,CAAA;AAAA,IAC3B,SAAA,GAAY,CAAA,iBAAA,EAAoB,SAAS,CAAA,CAAA,GAAK;AAAA,GAChD,CACG,MAAA,CAAO,OAAO,CAAA,CACd,KAAK,GAAG,CAAA;AAEX,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,SAAA,EAAY,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MACpC,gBAAA,EAAe,MAAA;AAAA,MACf,cAAA,EAAc,OAAO,OAAO,CAAA;AAAA,MAC5B,WAAA,EAAW,MAAA,CAAO,OAAA,CAAQ,IAAI,CAAC,CAAA;AAAA,MAC/B,KAAA;AAAA,MACA,IAAA;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ","file":"chunk-ELRMBQEC.js","sourcesContent":["import {\n  type CssFlex,\n  type CssFlexKeyword,\n  type CssLength,\n  space,\n  type UiSpaceName,\n} from './css-values.js';\nimport type { KerfUiContent } from './semantic-content.js';\n\nconst spaceNames: readonly UiSpaceName[] = [\n  'none',\n  '2xs',\n  'xs',\n  's',\n  'm',\n  'l',\n  'xl',\n];\n\nexport interface GridProps {\n  children?: KerfUiContent;\n  /** Number of equal-width columns. Must be a positive safe integer. */\n  columns: number;\n  /** A named UI spacing token or typed CSS length. Defaults to xs. */\n  gap?: UiSpaceName | CssLength;\n  /** Allow this grid to grow/shrink, use a keyword, or supply a typed CSS flex shorthand. */\n  flex?: boolean | CssFlexKeyword | CssFlex;\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/** A fixed-count grid whose columns share the available width equally. */\nexport function Grid({\n  children,\n  columns,\n  gap = 'xs',\n  flex = false,\n  className = '',\n  slot,\n}: GridProps) {\n  if (!Number.isSafeInteger(columns) || columns < 1) {\n    throw new RangeError('Grid columns must be a positive safe integer');\n  }\n\n  const gapValue = spaceNames.includes(gap as UiSpaceName)\n    ? space(gap as UiSpaceName)\n    : gap;\n  const flexValue = flex === true ? '1 1 auto' : flex || undefined;\n  const style = [\n    `--_kui-grid-columns:${columns}`,\n    `--_kui-grid-gap:${gapValue}`,\n    flexValue ? `--_kui-grid-flex:${flexValue}` : '',\n  ]\n    .filter(Boolean)\n    .join(';');\n\n  return (\n    <div\n      class={`kui-grid ${className}`.trim()}\n      data-component=\"grid\"\n      data-columns={String(columns)}\n      data-flex={String(Boolean(flex))}\n      style={style}\n      slot={slot}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport type {\n  CssFlex,\n  CssFlexKeyword,\n  CssLength,\n  UiSpaceName,\n} from './css-values.js';\n"]}