@kerfjs/ui 4.4.1 → 5.0.0-beta.4

package/ai/skill.md

@@ -1,28 +1,71 @@
 ---
 name: kerf-ui
 description: Build interfaces with kerfjs and the @kerfjs/ui production component package. Use whenever code imports @kerfjs/ui or a task asks for Kerf UI components.
-kerf-ui-skill-version: 1.5.0
+kerf-ui-skill-version: 1.32.0
 ---
 
 # Building with @kerfjs/ui
 
-Read `../README.md`, `../docs/component-contract.md`, and `../docs/accessibility.md` before changing a consuming interface. Read `../docs/webawesome-theme.md` when using Web Awesome components or changing shared theme tokens.
+Read `../docs/component-selection.md` first, then `./component-catalog.json`,
+`./public-api-signatures-v1.md`, `./webawesome-jsx-signatures-v1.md`,
+`../docs/recipes.md`, `../README.md`,
+`../docs/component-contract.md`, and `../docs/accessibility.md` before changing
+a consuming interface. Use the signature snapshot for exact props, callbacks,
+return values, and supported import paths; do not infer them from examples.
+Read `../docs/webawesome-theme.md` when using Web Awesome components or changing
+shared theme tokens.
+
+Choose from the need, not from visual resemblance:
+
+1. Search the Kerf catalog and preferred Web Awesome subset.
+2. Reuse a primitive when purpose, anatomy, state, and interaction match.
+3. Compose primitives for recurring layout. Prefer public props and tokens; use only cataloged `publicClasses` when composition-specific CSS needs a selector.
+4. Add a thin application adapter for copy, domain mapping, actions, routing, persistence, permissions, and transport.
+5. Build custom markup only when the semantic contract differs; if it recurs across products, open an upstream component or recipe request.
+
+Quick routing:
+
+| Need | Choose | Nearest alternatives / boundary |
+| --- | --- | --- |
+| Navigation row | `MenuItem` | Use an ordinary link or button when sidebar/menu anatomy and state do not apply. Multiline leading icons stay aligned with the first text line. |
+| Navigation row with a trailing action | `MenuActionRow` | Use `MenuItem` when the trailing region is dormant; never put controls inside either component's SafeHtml slots. Multiline leading icons stay aligned with the first text line. |
+| Page chrome or heading | `Toolbar`, `PageHeader`, or `DialogHeader` | Toolbar is persistent chrome; page and dialog headers identify different scopes. |
+| 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. |
+| 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. |
+| Command search | Application-local semantics using shared layout vocabulary | No runtime component or production recipe is exported; the app owns behavior, policy, and copy. |
+
+For a complete shell, sidebar, workspace header, master-detail dialog, composer
+form, list-state lifecycle, or mixed-control toolbar, start from the runnable
+reference in [`docs/recipes.md`](../docs/recipes.md). Preserve its production
+primitives and semantic ownership; replace application state, policy, and copy.
+
+The concise human decision matrix is in [`component-selection.md`](../docs/component-selection.md). For exhaustive tool retrieval, load [`component-catalog.json`](./component-catalog.json), the canonical metadata for every public component/helper, composition, and supported Web Awesome entry. Use its linked current recipes instead of inferring behavior from CSS.
 
 Hard rules:
 
 1. Import visual components from explicit JavaScript subpaths. In CSS-aware browser builds each subpath brings in its own reachable CSS, including UI subcomponents, while unrelated CSS remains out. The root barrel and `@kerfjs/ui/unstyled` are CSS-free; pair the root barrel with `styles.css` only when the complete layer is intentional. Manual CSS subpaths remain available for custom pipelines.
 2. Components return Kerf `SafeHtml`. Never pass DOM nodes as children or use inline JSX event handlers.
-3. Keep state, product copy, persistence, and domain mappings in the application. Do not add product-specific actions or fields to a generic component.
+3. Keep state, product copy, persistence, and domain mappings in the application. Do not add product-specific actions or fields to a generic component. Put MenuItem/MenuActionRow/MenuHeader/AppTab domain `data-*` metadata in `rootAttributes`; use MenuActionRow `trailingActionAttributes` and MenuHeader `triggerAttributes` only for domain `data-*` or native popover target/action and `aria-controls`/`aria-haspopup`. These slots do not replace component-owned action, item/tab identity, selection, disclosure, naming, disabled, icon, or role semantics.
 4. Wire `data-action` hooks from one stable root with `delegate()` or `delegateActions()` and retain disposers.
-5. Use the opinionated `--kui-color-*` semantic ramps and component-level override properties. Override tokens at the narrowest useful scope; do not hard-code appearance-specific colors or replace private descendant rules.
-6. `Select` is pure until the app explicitly imports `@kerfjs/ui/select/register`; do not import Web Awesome's full registration bundle. When an app uses Web Awesome components, import the CSS-only `@kerfjs/ui/webawesome.css` theme once and keep importing individual Web Awesome component modules so their JavaScript remains tree-shakeable.
-7. Decorative icons are hidden; controls are named; focus is visible; state never relies on color alone; reduced motion and increased contrast remain usable.
-8. `ResizableRegion` uses `wireResizableRegions()` for Arrow, Shift+Arrow, Home/End, and pointer behavior. The app owns size persistence.
+5. Use the opinionated `--kui-color-*` semantic ramps and component-level override properties. Override tokens at the narrowest useful scope and prefer equivalent props/tokens. Public-class-to-public-class selectors are supported when every Kerf class appears in the catalog entry's `publicClasses`; never target descendant tags, ids, attribute-only anatomy, or unlisted implementation classes.
+6. `Select` is pure until the app explicitly imports `@kerfjs/ui/select/register`; do not import Web Awesome's full registration bundle. When an app writes direct `wa-*` JSX, add `import type {} from '@kerfjs/ui/webawesome'` for the catalog-supported intrinsic-element declarations, import the CSS-only `@kerfjs/ui/webawesome.css` theme once, and keep importing individual Web Awesome component modules so their JavaScript remains tree-shakeable. The type boundary emits no code and registers nothing. Pass icon-bearing `choices` and `renderSelected` content normally: `Select` preserves its slotted option icons across Kerf rerenders and keys selected content by the controlled value, so app wrappers must not add competing morph-control attributes.
+7. Decorative icons are hidden; controls are named; focus is visible; state never relies on color alone; reduced motion and increased contrast remain usable. `DisclosureArrow` defaults to an 18px root-scaled visual and exposes `--kui-disclosure-arrow-size` for consumer sizing; it never becomes the interaction or accessible-name owner. Put it in an owning native control with a stable accessible name and controlled `aria-expanded`. `MenuHeader` toggle mode supplies it when `actionIcon` is omitted, but the app must reveal matching content; a custom icon replaces it. Author replacement icon content facing right before its configured direction transform is applied. Direction changes take the shortest rotation path, with counterclockwise chosen for a 180-degree closed-to-open tie. Kerf `Select` separately keeps its intrinsic Web Awesome expand glyph at `--kui-disclosure-icon-scale: .5`.
+8. `ResizableRegion` uses `wireResizableRegions()` for Arrow, Shift+Arrow, Home/End, and pointer behavior. The app owns size persistence. `handleIcon` replaces decorative dormant glyph content only.
 9. Use controlled `SegmentedControl` for a small exclusive choice set. Select `appearance="toolbar"` when nesting it inside `ToolbarControlGroup`; use rounded or pill shapes for standalone contexts. Handle its action, update `value`, keep meaningful choice labels, and preserve every enabled native button in sequential Tab order.
-10. Compose `AppTab` inside controlled `TabBar`; call `wireTabBars()` once and retain its disposer. It owns same-bar drag mechanics, including proximity-based horizontal edge autoscroll, while the app applies `onReorder` and owns order, selection, panels, close policy, routing, and persistence.
-11. Demo work uses public production component subpaths and their browser-selected CSS. Give every public visual component its own category-grouped catalog route; list themed third-party components under a clearly labeled collapsible ecosystem section, with a focused route for each. Declare direct `uses` relationships so `Used by` stays derivable, and theme shell chrome through the same semantic tokens as the stage instead of drawing a substitute.
-12. The Web Awesome theme makes Tooltip and Popover arrowless by default. Keep that default unless a pointer materially clarifies the anchor; opt back in with `--wa-tooltip-arrow-size`, `--kui-wa-popover-arrow-size`, or a popover's public `--arrow-size`, and use `without-arrow` when local no-arrow intent should survive theme changes.
-13. Treat the complete Web Awesome catalog as support coverage, not a recommendation list. Consider Popup when it replaces custom anchored positioning. Prefer Kerf `Select` over direct Dropdown/Dropdown Item/Select/Option composition, `SegmentedControl` over Button Group, `TabBar` or `SegmentedControl` over Web Awesome Tabs, `LucideIcon` over Web Awesome Icon, and `ResizableRegion` over Split Panel. Use Tree/Tree Item, Animated Image, and Comparison only for a specific required behavior; avoid Zoomable Frame.
+10. Compose `AppTab` inside controlled `TabBar`; call `wireTabBars()` once and retain its disposer. It owns same-bar drag mechanics, including proximity-based horizontal edge autoscroll, while the app applies `onReorder` and owns order, selection, panels, close policy, routing, and persistence. Use runtime-filtered `rootAttributes` for domain metadata and keep an optional `closeIcon` decorative and noninteractive.
+11. Use token-controlled `TokenSearchField` when free text and removable structured filters share one editor. Editable text stays DOM-owned between token changes. The leading icon, first text line, clear action, and trailing slot share one fixed row when content wraps. The app owns parsing and suggestions; call `readTokenSearchField()` on input, empty `textContent` on clear, use `placeTokenSearchCaret()` after explicit controlled focus changes, and call `wireTokenSearchFields()` once so Enter submits without inserting a line break and keyboard chip deletion restores focus plus the text-relative caret after controlled replacement. Enable `collapsible` for an animated iconic closed state, standalone or inside `ToolbarControlGroup`; the field keeps text or tokens expanded while the app controls transient `expanded` state, focus transfer, and focusout timing.
+12. Demo work uses public production component subpaths and their browser-selected CSS. Give every public visual component its own category-grouped catalog route; list themed third-party components under a clearly labeled collapsible ecosystem section, with a focused route for each. Project its deterministic repository-relative demo source and existing documentation path so the detail can expose `View demo source` and `Read guidance` links without a runtime export; also derive first-party component implementation paths from their canonical browser imports, and label Web Awesome documentation as Kerf integration guidance. Declare direct `uses` relationships so `Used by` stays derivable, and theme shell chrome through the same semantic tokens as the stage instead of drawing a substitute.
+13. The Web Awesome theme makes Tooltip and Popover arrowless by default. Keep that default unless a pointer materially clarifies the anchor; opt back in with `--wa-tooltip-arrow-size`, `--kui-wa-popover-arrow-size`, or a popover's public `--arrow-size`, and use `without-arrow` when local no-arrow intent should survive theme changes.
+14. Treat the complete Web Awesome catalog as support coverage, not a recommendation list. Consider Popup when it replaces custom anchored positioning. Prefer Kerf `Select` over direct Dropdown/Dropdown Item/Select/Option composition, `SegmentedControl` over Button Group, `TabBar` or `SegmentedControl` over Web Awesome Tabs, `LucideIcon` over Web Awesome Icon, and `ResizableRegion` over Split Panel. Use Tree/Tree Item, Animated Image, and Comparison only for a specific required behavior; avoid Zoomable Frame.
+15. Build sidebars, main areas, inspectors, and dialogs from `@kerfjs/ui/layout.css`: an unpadded `.kui-pane`, optional `.kui-pane__toolbar`, one scrolling `.kui-pane__content`, and optional `.kui-pane__footer`. Add `.kui-content` for 24px major vertical separation and `.kui-content-item` for a child-owned 8px inline margin, 1px transparent-or-visible border, 8px padding, and 12px radius. Use the pill modifier for 22px. Do not pad pane shells or duplicate item geometry in wrappers.
+16. Keep a visible collapsible pane's collapse control in its own toolbar. When hidden, move its restore control into the adjacent main toolbar on the corresponding logical edge: leading for an inline-start sidebar and trailing for an inline-end inspector. Collapse the pane completely; do not preserve an empty icon-only rail.
+16. Wrap every toolbar item, including dormant text, in `ToolbarControlGroup`. A group remains 44px outside (`calc(2px + remify(42px))`) when its border/background are transparent; use 8px between groups and inside items. Split dormant and interactive regions: `MenuHeader` fills the available inline width and keeps its label and mutually exclusive semantic count or non-count `badge` together, with an independent logical-end 44px action unless disclosure mode makes the title cluster the button. Its action visual defaults to 18px through `--kui-menu-header-action-icon-size`; never shrink the target to match it. Pass every non-negative safe-integer section quantity through `count` with a localized full spoken `countLabel`; never concatenate it into `label` or put a number in `badge`. `MenuItem.trailing` is dormant; use `MenuActionRow` when primary and trailing actions need sibling 44px native buttons. Its `label`, `icon`, and `trailingActionIcon` slots are also dormant and cannot contain controls. Let panes relocate at narrow widths instead of shrinking targets.
+17. When a recurring concept has no matching export or production recipe, keep its semantics in a thin application adapter while reusing the public layout vocabulary. The composer recipe uses one visible form surface, `DialogHeader` title/summary ids, shared 8px field/action gutters, 24px major rhythm, and a conditional StateBanner as its only nested semantic surface; do not turn every section into a card or double-inset intrinsically bordered controls. The application-local `../docs/examples/command-palette-adapter.tsx` is reference source for one such missing concept, not an `@kerfjs/ui` runtime export or catalog recipe. The application owns its registration, ranking, history, permissions, availability, shortcut policy, focus policy, dispatch, and copy. If a missing concept recurs across products, open an upstream component or recipe request.
+18. Compose `ValueTable` from typed `ValueTableRow` entries instead of handwritten `dt`/`dd` wrappers. Pass `icon` for the optional 24px leading visual; the row owns 8px of root-scaled top and bottom padding, the 8px iconless or 40px icon-bearing separator start, and the common 8px right inset.
+19. Use `DialogHeader` for dialog hierarchy, not a custom heading row. Its real top `Toolbar` puts the optional 24px icon in a 34px circular background and the first title line in a borderless `ToolbarControlGroup`, centered against the automatic action `ToolbarControlGroup`; pass action children directly and add a localized `actionsLabel` when that group needs a name. Its optional `summary`/`summaryId` row stays below the title. The app owns modal behavior, focus, dismissal, command policy, and action handling.
 
 Common mistakes:
 
@@ -31,8 +74,19 @@ Common mistakes:
 | Hard-coded project/transport action in a component | Pass a semantic `data-action` string from an application adapter |
 | Per-instance signal at module scope | Create state in the application or a factory and pass it in |
 | `role="menuitem"` on one button | Use the native button, or implement the complete ARIA menu widget |
+| Put a button/link/interactive role in `MenuItem.trailing` or a `MenuActionRow` SafeHtml slot | Use `MenuActionRow` for the sibling controls and keep its label/icon slots dormant |
+| Copy MenuItem/MenuHeader markup to add product data or a popover target | Use the typed `rootAttributes`/`triggerAttributes` slots and retain the component's protected semantics |
+| Concatenate a section count into a MenuHeader label or numeric badge | Pass `count={value}` and a localized full phrase such as `countLabel="3 notes"`; reserve `badge` for non-count SafeHtml |
+| Put a chevron on navigation that reveals nothing | Remove it, or model a real controlled `MenuHeader` disclosure; omit `actionIcon` to use the production `DisclosureArrow` |
 | Test only a custom-element attribute | Assert live property, emitted event, focus, and rendered output |
 | Import all Web Awesome components | Import only `@kerfjs/ui/select/register` for `Select`, or individual Web Awesome modules for other controls; `webawesome.css` registers no JavaScript |
+| Write `wa-*` JSX without activating its types | Add `import type {} from '@kerfjs/ui/webawesome'`; registration and theme imports remain separate |
 | Maintain a root list of component styles | Import each visual component from its JS subpath; its reachable CSS follows automatically |
 | Add demo-only markup for a production state | Add the state to the production component, then render that export in the catalog |
 | Choose a listed ecosystem component by default | Apply the component-selection guidance above; catalog coverage means supported and themed, not preferred |
+| Add sidebar-specific wrapper padding | Use the unpadded `.kui-pane`; let `MenuHeader`, `MenuItem`, and `.kui-content-item` own their 8/1/8 geometry |
+| Put bare text or controls directly in a toolbar slot | Wrap every item in `ToolbarControlGroup`, using `appearance="borderless"` for transparent chrome |
+| Let the document, pane, and list all scroll | Keep fixed chrome outside one `.kui-pane__content` scroll owner per pane |
+| Invent an `@kerfjs/ui` command-palette export | Keep the semantics application-local, reuse public layout vocabulary, and propose recurring behavior upstream |
+| Handwrite `ValueTable` row wrappers or compensate their padding or separators | Compose `ValueTableRow`; its root-scaled block padding, optional icon hook, and separator geometry are public contract |
+| Rebuild a dialog heading or pre-wrap new `DialogHeader.actions` in groups | Pass action children directly; `DialogHeader` supplies aligned identity/action groups and keeps the optional subtitle below |

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

@@ -0,0 +1,106 @@
+# Web Awesome JSX signatures for the UI authoring corpus
+
+Generated from the emitted `@kerfjs/ui@5.0.0-beta.4` 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';
+
+/**
+ * Opt-in Kerf JSX declarations for the Web Awesome elements supported by the
+ * @kerfjs/ui catalog. Import this module for type effects only; component
+ * registration remains an explicit application concern.
+ */
+declare module 'kerfjs/jsx-runtime' {
+    namespace JSX {
+        interface IntrinsicElements {
+            'wa-accordion': KerfCustomElement;
+            'wa-accordion-item': KerfCustomElement;
+            'wa-animated-image': KerfCustomElement;
+            'wa-animation': KerfCustomElement;
+            'wa-avatar': KerfCustomElement;
+            'wa-badge': KerfCustomElement;
+            'wa-breadcrumb': KerfCustomElement;
+            'wa-breadcrumb-item': KerfCustomElement;
+            'wa-select': KerfCustomElement & {
+                class?: string;
+                name?: string;
+                label?: string;
+                'aria-label'?: string;
+                value?: string;
+                placeholder?: string;
+                disabled?: boolean;
+            };
+            'wa-option': KerfCustomElement & {
+                value?: string;
+            };
+            'wa-button-group': KerfCustomElement;
+            'wa-callout': KerfCustomElement;
+            'wa-card': KerfCustomElement;
+            'wa-carousel': KerfCustomElement;
+            'wa-carousel-item': KerfCustomElement;
+            'wa-checkbox': KerfCustomElement;
+            'wa-checkbox-group': KerfCustomElement;
+            'wa-color-picker': KerfCustomElement;
+            'wa-comparison': KerfCustomElement;
+            'wa-copy-button': KerfCustomElement;
+            'wa-details': KerfCustomElement;
+            'wa-divider': KerfCustomElement;
+            'wa-dialog': KerfCustomElement;
+            'wa-drawer': KerfCustomElement;
+            'wa-button': KerfCustomElement & {
+                slot?: string;
+                appearance?: string;
+                'with-caret'?: boolean;
+                'aria-label'?: string;
+            };
+            'wa-dropdown': KerfCustomElement & {
+                placement?: string;
+            };
+            'wa-dropdown-item': KerfCustomElement;
+            'wa-format-bytes': KerfCustomElement;
+            'wa-format-date': KerfCustomElement;
+            'wa-format-number': KerfCustomElement;
+            'wa-icon': KerfCustomElement;
+            'wa-include': KerfCustomElement;
+            'wa-input': KerfCustomElement;
+            'wa-intersection-observer': KerfCustomElement;
+            'wa-known-date': KerfCustomElement;
+            'wa-markdown': KerfCustomElement;
+            'wa-mutation-observer': KerfCustomElement;
+            'wa-number-input': KerfCustomElement;
+            'wa-otp-input': KerfCustomElement;
+            'wa-page': KerfCustomElement;
+            'wa-pagination': KerfCustomElement;
+            'wa-popover': KerfCustomElement;
+            'wa-popup': KerfCustomElement;
+            'wa-progress-bar': KerfCustomElement;
+            'wa-progress-ring': KerfCustomElement;
+            'wa-qr-code': KerfCustomElement;
+            'wa-radio': KerfCustomElement;
+            'wa-radio-group': KerfCustomElement;
+            'wa-random-content': KerfCustomElement;
+            'wa-rating': KerfCustomElement;
+            'wa-relative-time': KerfCustomElement;
+            'wa-resize-observer': KerfCustomElement;
+            'wa-scroller': KerfCustomElement;
+            'wa-skeleton': KerfCustomElement;
+            'wa-slider': KerfCustomElement;
+            'wa-spinner': KerfCustomElement;
+            'wa-split-panel': KerfCustomElement;
+            'wa-switch': KerfCustomElement;
+            'wa-tab': KerfCustomElement;
+            'wa-tab-group': KerfCustomElement;
+            'wa-tab-panel': KerfCustomElement;
+            'wa-tag': KerfCustomElement;
+            'wa-textarea': KerfCustomElement;
+            'wa-time-input': KerfCustomElement;
+            'wa-toast': KerfCustomElement;
+            'wa-toast-item': KerfCustomElement;
+            'wa-tooltip': KerfCustomElement;
+            'wa-tree': KerfCustomElement;
+            'wa-tree-item': KerfCustomElement;
+            'wa-zoomable-frame': KerfCustomElement;
+        }
+    }
+}
+```

package/dist/app-tab.d.ts

@@ -1,5 +1,13 @@
 import { SafeHtml } from 'kerfjs';
 
+type AppTabRootAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
+    'data-component'?: never;
+    'data-action'?: never;
+    'data-tab-id'?: never;
+    'data-selected'?: never;
+    'data-tab-dragging'?: never;
+    'data-tab-drop-position'?: never;
+}>;
 interface AppTabProps {
     id: string;
     name: string;
@@ -8,11 +16,13 @@ interface AppTabProps {
     draggable?: boolean;
     leading?: SafeHtml;
     trailing?: SafeHtml;
+    /** Decorative dormant content for the close button. Must not contain interactive descendants. */
+    closeIcon?: SafeHtml;
     selectAction?: string;
     closeAction?: string;
     className?: string;
-    rootAttributes?: Readonly<Record<`data-${string}`, string>>;
+    rootAttributes?: AppTabRootAttributes;
 }
-declare function AppTab({ id, name, selected, closable, draggable, leading, trailing, selectAction, closeAction, className, rootAttributes }: AppTabProps): SafeHtml;
+declare function AppTab({ id, name, selected, closable, draggable, leading, trailing, closeIcon, selectAction, closeAction, className, rootAttributes }: AppTabProps): SafeHtml;
 
 export { AppTab, type AppTabProps };

package/dist/app-tab.js

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

package/dist/browser/app-tab.js

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

package/dist/browser/dialog-header.js

@@ -1,3 +1,5 @@
-import '../../src/foundation.css';
-import '../../src/dialog-header.css';
+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/disclosure-arrow.js

@@ -0,0 +1,4 @@
+import '../styles/foundation.css';
+import '../styles/lucide-icon.css';
+import '../styles/disclosure-arrow.css';
+export * from '../disclosure-arrow.js';

package/dist/browser/empty-state.js

@@ -1,4 +1,4 @@
-import '../../src/foundation.css';
-import '../../src/loading-spinner.css';
-import '../../src/empty-state.css';
+import '../styles/foundation.css';
+import '../styles/loading-spinner.css';
+import '../styles/empty-state.css';
 export * from '../empty-state.js';

package/dist/browser/loading-spinner.js

@@ -1,3 +1,3 @@
-import '../../src/foundation.css';
-import '../../src/loading-spinner.css';
+import '../styles/foundation.css';
+import '../styles/loading-spinner.css';
 export * from '../loading-spinner.js';

package/dist/browser/lucide-icon.js

@@ -1,3 +1,3 @@
-import '../../src/foundation.css';
-import '../../src/lucide-icon.css';
+import '../styles/foundation.css';
+import '../styles/lucide-icon.css';
 export * from '../lucide-icon.js';

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

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

package/dist/browser/menu-header.js

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

package/dist/browser/menu-item.js

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

package/dist/browser/page-header.js

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

package/dist/browser/resizable-region.js

@@ -1,3 +1,3 @@
-import '../../src/foundation.css';
-import '../../src/resizable-region.css';
+import '../styles/foundation.css';
+import '../styles/resizable-region.css';
 export * from '../resizable-region.js';

package/dist/browser/segmented-control.js

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

package/dist/browser/select.js

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

package/dist/browser/state-banner.js

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

package/dist/browser/tab-bar.js

@@ -1,3 +1,3 @@
-import '../../src/foundation.css';
-import '../../src/tab-bar.css';
+import '../styles/foundation.css';
+import '../styles/tab-bar.css';
 export * from '../tab-bar.js';

package/dist/browser/token-search-field.js

@@ -0,0 +1,4 @@
+import '../styles/foundation.css';
+import '../styles/lucide-icon.css';
+import '../styles/token-search-field.css';
+export * from '../token-search-field.js';

package/dist/browser/toolbar-control-group.js

@@ -1,3 +1,3 @@
-import '../../src/foundation.css';
-import '../../src/toolbar-control-group.css';
+import '../styles/foundation.css';
+import '../styles/toolbar-control-group.css';
 export * from '../toolbar-control-group.js';

package/dist/browser/toolbar-text.js

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

package/dist/browser/toolbar.js

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

package/dist/browser/value-table.js

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

package/dist/chunk-56RJXPHG.js

@@ -0,0 +1,43 @@
+import { LucideIcon } from './chunk-W2FK7ZNY.js';
+import { ChevronRight } from 'lucide';
+import { jsx } from 'kerfjs/jsx-runtime';
+
+var directionRotations = {
+  right: 0,
+  down: 90,
+  left: 180,
+  up: 270
+};
+function rotationForState(open, openDirection, closedDirection) {
+  const closedRotation = directionRotations[closedDirection];
+  if (!open) return closedRotation;
+  const openRotation = directionRotations[openDirection];
+  const shortestDelta = (openRotation - closedRotation + 540) % 360 - 180;
+  return closedRotation + shortestDelta;
+}
+function DisclosureArrow({
+  open,
+  openDirection = "down",
+  closedDirection = "right",
+  icon,
+  className = ""
+}) {
+  const direction = open ? openDirection : closedDirection;
+  const rotation = rotationForState(open, openDirection, closedDirection);
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      class: `kui-disclosure-arrow ${className}`.trim(),
+      style: `--_kui-disclosure-arrow-rotation:${rotation}deg`,
+      "data-component": "disclosure-arrow",
+      "data-open": String(open),
+      "data-direction": direction,
+      "aria-hidden": "true",
+      children: icon ?? /* @__PURE__ */ jsx(LucideIcon, { icon: ChevronRight, name: "chevron-right" })
+    }
+  );
+}
+
+export { DisclosureArrow };
+
+//# sourceMappingURL=chunk-56RJXPHG.js.map

package/dist/chunk-56RJXPHG.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/disclosure-arrow.tsx"],"names":[],"mappings":";;;;AAgBA,IAAM,kBAAA,GAA0D;AAAA,EAC9D,KAAA,EAAO,CAAA;AAAA,EACP,IAAA,EAAM,EAAA;AAAA,EACN,IAAA,EAAM,GAAA;AAAA,EACN,EAAA,EAAI;AACN,CAAA;AAEA,SAAS,gBAAA,CACP,IAAA,EACA,aAAA,EACA,eAAA,EACA;AACA,EAAA,MAAM,cAAA,GAAiB,mBAAmB,eAAe,CAAA;AACzD,EAAA,IAAI,CAAC,MAAM,OAAO,cAAA;AAElB,EAAA,MAAM,YAAA,GAAe,mBAAmB,aAAa,CAAA;AACrD,EAAA,MAAM,aAAA,GAAA,CAAiB,YAAA,GAAe,cAAA,GAAiB,GAAA,IAAO,GAAA,GAAM,GAAA;AACpE,EAAA,OAAO,cAAA,GAAiB,aAAA;AAC1B;AAEO,SAAS,eAAA,CAAgB;AAAA,EAC9B,IAAA;AAAA,EACA,aAAA,GAAgB,MAAA;AAAA,EAChB,eAAA,GAAkB,OAAA;AAAA,EAClB,IAAA;AAAA,EACA,SAAA,GAAY;AACd,CAAA,EAAyB;AACvB,EAAA,MAAM,SAAA,GAAY,OAAO,aAAA,GAAgB,eAAA;AACzC,EAAA,MAAM,QAAA,GAAW,gBAAA,CAAiB,IAAA,EAAM,aAAA,EAAe,eAAe,CAAA;AACtE,EAAA,uBAAO,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACN,KAAA,EAAO,CAAA,qBAAA,EAAwB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAChD,KAAA,EAAO,oCAAoC,QAAQ,CAAA,GAAA,CAAA;AAAA,MACnD,gBAAA,EAAe,kBAAA;AAAA,MACf,WAAA,EAAW,OAAO,IAAI,CAAA;AAAA,MACtB,gBAAA,EAAgB,SAAA;AAAA,MAChB,aAAA,EAAY,MAAA;AAAA,MACZ,kCAAQ,GAAA,CAAC,UAAA,EAAA,EAAW,IAAA,EAAM,YAAA,EAAc,MAAK,eAAA,EAAgB;AAAA;AAAA,GAAG;AACpE","file":"chunk-56RJXPHG.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\nimport { ChevronRight } from 'lucide';\n\nimport { LucideIcon } from './lucide-icon.js';\n\nexport type DisclosureDirection = 'up' | 'down' | 'left' | 'right';\n\nexport interface DisclosureArrowProps {\n  open: boolean;\n  openDirection?: DisclosureDirection;\n  closedDirection?: DisclosureDirection;\n  /** Replacement icons should use right as their unrotated orientation. */\n  icon?: SafeHtml;\n  className?: string;\n}\n\nconst directionRotations: Record<DisclosureDirection, number> = {\n  right: 0,\n  down: 90,\n  left: 180,\n  up: 270,\n};\n\nfunction rotationForState(\n  open: boolean,\n  openDirection: DisclosureDirection,\n  closedDirection: DisclosureDirection,\n) {\n  const closedRotation = directionRotations[closedDirection];\n  if (!open) return closedRotation;\n\n  const openRotation = directionRotations[openDirection];\n  const shortestDelta = (openRotation - closedRotation + 540) % 360 - 180;\n  return closedRotation + shortestDelta;\n}\n\nexport function DisclosureArrow({\n  open,\n  openDirection = 'down',\n  closedDirection = 'right',\n  icon,\n  className = '',\n}: DisclosureArrowProps) {\n  const direction = open ? openDirection : closedDirection;\n  const rotation = rotationForState(open, openDirection, closedDirection);\n  return <span\n    class={`kui-disclosure-arrow ${className}`.trim()}\n    style={`--_kui-disclosure-arrow-rotation:${rotation}deg`}\n    data-component=\"disclosure-arrow\"\n    data-open={String(open)}\n    data-direction={direction}\n    aria-hidden=\"true\"\n  >{icon ?? <LucideIcon icon={ChevronRight} name=\"chevron-right\" />}</span>;\n}\n"]}

package/dist/chunk-7BR3DO2A.js

@@ -0,0 +1,31 @@
+// src/extension-attributes.ts
+var DATA_ATTRIBUTE_NAME = /^data-[a-z0-9_.:-]+$/;
+var POPOVER_TARGET_ACTIONS = /* @__PURE__ */ new Set(["toggle", "show", "hide"]);
+var ARIA_HASPOPUP_VALUES = /* @__PURE__ */ new Set(["dialog", "menu", "listbox", "tree", "grid", "true"]);
+function filterDataAttributes(attributes, protectedNames) {
+  const filtered = {};
+  for (const [name, value] of Object.entries(attributes)) {
+    const normalizedName = name.toLowerCase();
+    if (typeof value === "string" && DATA_ATTRIBUTE_NAME.test(normalizedName) && !protectedNames.has(normalizedName)) {
+      filtered[normalizedName] = value;
+    }
+  }
+  return filtered;
+}
+function filterControlAttributes(attributes, protectedDataNames) {
+  const source = attributes;
+  const filtered = filterDataAttributes(attributes, protectedDataNames);
+  if (typeof source.popoverTarget === "string") filtered.popoverTarget = source.popoverTarget;
+  if (POPOVER_TARGET_ACTIONS.has(source.popoverTargetAction)) {
+    filtered.popoverTargetAction = source.popoverTargetAction;
+  }
+  if (typeof source["aria-controls"] === "string") filtered["aria-controls"] = source["aria-controls"];
+  if (ARIA_HASPOPUP_VALUES.has(source["aria-haspopup"])) {
+    filtered["aria-haspopup"] = source["aria-haspopup"];
+  }
+  return filtered;
+}
+
+export { filterControlAttributes, filterDataAttributes };
+
+//# sourceMappingURL=chunk-7BR3DO2A.js.map

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

@@ -0,0 +1 @@
+{"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"]}