@kerfjs/ui 5.0.0-beta.64 → 5.0.0-beta.65

package/ai/component-catalog.json

@@ -2731,7 +2731,8 @@
         "Choose a finite gap shorthand such as xs or m, or compose a typed length with @kerfjs/ui/css-values when the spacing scale is insufficient.",
         "Use a finite flex keyword or the flex() builder when List participates in flexible layout.",
         "Apply the standard text or control inset to selected physical sides without an application wrapper.",
-        "Align children horizontally or distribute them vertically with the same physical alignment vocabulary as Row."
+        "Align children horizontally or distribute them vertically with the same physical alignment vocabulary as Row.",
+        "Use selectionMode=\"multiple\" and ariaLabel to group selectable rich ContentItem rows in a multi-select grid."
       ],
       "avoidWhen": [
         "Do not use List as semantic list markup; use ul/ol when list semantics are required and apply layout deliberately.",
@@ -2742,7 +2743,8 @@
       "appOwns": [
         "child semantics and content",
         "the bounded height needed for scrolling",
-        "typed gap, flex, alignment, and divider choices"
+        "typed gap, flex, alignment, and divider choices",
+        "the accessible label and selection state of a multi-select grid"
       ],
       "variants": [
         "no gap",
@@ -2757,10 +2759,11 @@
         "top/right/bottom/left text and control inset combinations",
         "fill: the layout root fills a definite-height parent",
         "rootAttributes: safe data-* metadata on the root",
-        "scroll dividers when named as wireScrollDividers targets chrome"
+        "scroll dividers when named as wireScrollDividers targets chrome",
+        "multi-select grid for rich ContentItem rows"
       ],
       "accessibility": [
-        "List adds layout only and no list role; children retain responsibility for their native or ARIA semantics.",
+        "List adds layout only and no list role by default; selectionMode=\"multiple\" makes it an aria-multiselectable grid with a required ariaLabel for selectable ContentItem rows.",
         "Give a scrollable List a bounded block size and keep keyboard focus visible as its contents scroll."
       ],
       "geometry": {
@@ -3312,7 +3315,8 @@
       "useWhen": [
         "An ordinary surface-like child of a Pane or .kui-content stack needs the shared content-item geometry so its content edge lands at the standard 17px inset.",
         "A content item marks a real distinction and must read as visibly bounded: pass frame=\"framed\" (the border is always reserved, so geometry does not change).",
-        "A content item should follow a pill control's 22px radius: pass shape=\"pill\"."
+        "A content item should follow a pill control's 22px radius: pass shape=\"pill\".",
+        "A selectable rich card needs nested controls: use selectionMode=\"multiple\" inside a labeled List multi-select grid."
       ],
       "avoidWhen": [
         "Do not wrap a component that already owns content-item geometry (ListItem, ListHeader, StateBanner, Toolbar, ValueTable) or pad around a ContentItem; either double-insets.",
@@ -3342,19 +3346,22 @@
         "whether the item marks a real distinction that warrants a visible frame",
         "corner shape",
         "region semantics and accessible name",
-        "whether the item is a programmatic focus target"
+        "whether the item is a programmatic focus target",
+        "the selection set and Shift/Cmd extension for multi-select rich cards"
       ],
       "variants": [
         "unframed rounded item",
         "framed rounded item",
         "pill item",
         "framed pill item",
-        "named focus-target region"
+        "named focus-target region",
+        "multi-select rich grid row"
       ],
       "accessibility": [
         "An ordinary item adds no role or name; pass ariaLabel only when the item is a distinct named region (it then renders role=\"region\").",
         "focusTarget makes the item a programmatic focus target (tabindex=\"-1\", never a tab stop), such as a NavStack view's data-nav-focus target.",
-        "The frame is decorative and never the only signal of state."
+        "The frame is decorative and never the only signal of state.",
+        "selectionMode=\"multiple\" renders a focusable row with aria-selected and a gridcell for nested controls; place it in a labeled List selectionMode=\"multiple\" grid. wireContentItems moves focus among rows with Up/Down and Home/End while nested controls retain those keys. Guard the app's delegated card action with isContentItemActivation so a nested control does not select the row."
       ],
       "geometry": {
         "margin": "self",
@@ -3837,7 +3844,8 @@
       },
       "useWhen": [
         "Combine DOM-owned free text with ordered editable/removable filter tokens in one searchbox.",
-        "Enable collapsible mode when an empty, unfocused search should reduce to one iconic action, standalone or inside a toolbar group."
+        "Enable collapsible mode when an empty, unfocused search should reduce to one iconic action, standalone or inside a toolbar group.",
+        "Use presentation=\"form-field\" for a structured search query beside Web Awesome form controls, with a visible label, optional hint, and required marker."
       ],
       "avoidWhen": [
         "Do not use for ordinary text input or separately labeled filter controls."
@@ -3852,19 +3860,22 @@
         "the grammar and evaluation callback when using the optional managed model, or parsing, suggestions, tokens, and query execution in manual mode",
         "results",
         "the revision that rebuilds the DOM-owned editor for a programmatic text replacement",
-        "optional override of the collapsible expand/collapse/focus, which wireTokenSearchFields manages by default (adopt an app expanded signal, opt out per behavior, or drive it via the returned handle)"
+        "optional override of the collapsible expand/collapse/focus, which wireTokenSearchFields manages by default (adopt an app expanded signal, opt out per behavior, or drive it via the returned handle)",
+        "validation of a required form-field value"
       ],
       "variants": [
         "tokens",
         "free text",
         "disabled",
-        "collapsible standalone or toolbar composition"
+        "collapsible standalone or toolbar composition",
+        "visible form-field label, hint, and required marker"
       ],
       "accessibility": [
         "Announce result changes when useful and keep tokens atomic during editing.",
         "Keep leading and trailing controls aligned to the first text line while content wraps. Managed Clear restores replacement focus before the next input task, preserving immediate typing and later focus handoffs without a frame delay.",
         "Wire Enter to submit without inserting a contenteditable line break and preserve focus plus the text-relative caret across controlled keyboard chip deletion before the next keystroke. Select All deletion preserves managed open state and replacement focus; persist both edited query and tokens. Visual wrapping remains available.",
-        "In collapsible mode, wireTokenSearchFields manages this by default: activating the trigger reveals the searchbox and moves focus into it, Escape on an empty field collapses and returns focus to the trigger, and focus leaving an empty field collapses it; each behavior is individually opt-out."
+        "In collapsible mode, wireTokenSearchFields manages this by default: activating the trigger reveals the searchbox and moves focus into it, Escape on an empty field collapses and returns focus to the trigger, and focus leaving an empty field collapses it; each behavior is individually opt-out.",
+        "The form-field presentation associates its visible label and optional hint with the searchbox, exposes aria-required when required, and lets wireTokenSearchFields focus the editor from a label click. The app validates required input."
       ],
       "geometry": {
         "margin": "none",

package/ai/component-composition.json

@@ -2258,6 +2258,11 @@
           "id": "typed gap, flex, alignment, and divider choices",
           "owner": "application",
           "required": false
+        },
+        {
+          "id": "the accessible label and selection state of a multi-select grid",
+          "owner": "application",
+          "required": false
         }
       ],
       "wiring": {
@@ -2293,7 +2298,7 @@
       },
       "accessibility": {
         "obligations": [
-          "List adds layout only and no list role; children retain responsibility for their native or ARIA semantics.",
+          "List adds layout only and no list role by default; selectionMode=\"multiple\" makes it an aria-multiselectable grid with a required ariaLabel for selectable ContentItem rows.",
           "Give a scrollable List a bounded block size and keep keyboard focus visible as its contents scroll."
         ]
       },
@@ -2746,6 +2751,11 @@
           "id": "whether the item is a programmatic focus target",
           "owner": "application",
           "required": false
+        },
+        {
+          "id": "the selection set and Shift/Cmd extension for multi-select rich cards",
+          "owner": "application",
+          "required": false
         }
       ],
       "wiring": {
@@ -2770,7 +2780,8 @@
         "obligations": [
           "An ordinary item adds no role or name; pass ariaLabel only when the item is a distinct named region (it then renders role=\"region\").",
           "focusTarget makes the item a programmatic focus target (tabindex=\"-1\", never a tab stop), such as a NavStack view's data-nav-focus target.",
-          "The frame is decorative and never the only signal of state."
+          "The frame is decorative and never the only signal of state.",
+          "selectionMode=\"multiple\" renders a focusable row with aria-selected and a gridcell for nested controls; place it in a labeled List selectionMode=\"multiple\" grid. wireContentItems moves focus among rows with Up/Down and Home/End while nested controls retain those keys. Guard the app's delegated card action with isContentItemActivation so a nested control does not select the row."
         ]
       },
       "cssValueProps": [],
@@ -3243,7 +3254,8 @@
           "Announce result changes when useful and keep tokens atomic during editing.",
           "Keep leading and trailing controls aligned to the first text line while content wraps. Managed Clear restores replacement focus before the next input task, preserving immediate typing and later focus handoffs without a frame delay.",
           "Wire Enter to submit without inserting a contenteditable line break and preserve focus plus the text-relative caret across controlled keyboard chip deletion before the next keystroke. Select All deletion preserves managed open state and replacement focus; persist both edited query and tokens. Visual wrapping remains available.",
-          "In collapsible mode, wireTokenSearchFields manages this by default: activating the trigger reveals the searchbox and moves focus into it, Escape on an empty field collapses and returns focus to the trigger, and focus leaving an empty field collapses it; each behavior is individually opt-out."
+          "In collapsible mode, wireTokenSearchFields manages this by default: activating the trigger reveals the searchbox and moves focus into it, Escape on an empty field collapses and returns focus to the trigger, and focus leaving an empty field collapses it; each behavior is individually opt-out.",
+          "The form-field presentation associates its visible label and optional hint with the searchbox, exposes aria-required when required, and lets wireTokenSearchFields focus the editor from a label click. The app validates required input."
         ]
       },
       "cssValueProps": [],

package/ai/components/content-item.md

@@ -13,6 +13,7 @@ Render one self-contained .kui-content child that owns its 8px inline margin, re
 - An ordinary surface-like child of a Pane or .kui-content stack needs the shared content-item geometry so its content edge lands at the standard 17px inset.
 - A content item marks a real distinction and must read as visibly bounded: pass frame="framed" (the border is always reserved, so geometry does not change).
 - A content item should follow a pill control's 22px radius: pass shape="pill".
+- A selectable rich card needs nested controls: use selectionMode="multiple" inside a labeled List multi-select grid.
 
 **Not when:**
 
@@ -44,6 +45,7 @@ Exact prop names and types: [`@kerfjs/ui/content-item`](../public-api-signatures
 - pill item
 - framed pill item
 - named focus-target region
+- multi-select rich grid row
 
 ## Composition
 
@@ -53,7 +55,7 @@ Exact prop names and types: [`@kerfjs/ui/content-item`](../public-api-signatures
 
 ## State and wiring
 
-**The app owns:** the item content; whether the item marks a real distinction that warrants a visible frame; corner shape; region semantics and accessible name; whether the item is a programmatic focus target.
+**The app owns:** the item content; whether the item marks a real distinction that warrants a visible frame; corner shape; region semantics and accessible name; whether the item is a programmatic focus target; the selection set and Shift/Cmd extension for multi-select rich cards.
 
 No wiring helper.
 
@@ -68,6 +70,7 @@ Margin: self · border: self · padding: self (layout role: structure). `self` m
 - An ordinary item adds no role or name; pass ariaLabel only when the item is a distinct named region (it then renders role="region").
 - focusTarget makes the item a programmatic focus target (tabindex="-1", never a tab stop), such as a NavStack view's data-nav-focus target.
 - The frame is decorative and never the only signal of state.
+- selectionMode="multiple" renders a focusable row with aria-selected and a gridcell for nested controls; place it in a labeled List selectionMode="multiple" grid. wireContentItems moves focus among rows with Up/Down and Home/End while nested controls retain those keys. Guard the app's delegated card action with isContentItemActivation so a nested control does not select the row.
 
 ## Styling boundary
 

package/ai/components/list.md

@@ -16,6 +16,7 @@ Standardize vertical component layout, optional physical-side text/control inset
 - Use a finite flex keyword or the flex() builder when List participates in flexible layout.
 - Apply the standard text or control inset to selected physical sides without an application wrapper.
 - Align children horizontally or distribute them vertically with the same physical alignment vocabulary as Row.
+- Use selectionMode="multiple" and ariaLabel to group selectable rich ContentItem rows in a multi-select grid.
 
 **Not when:**
 
@@ -49,6 +50,7 @@ Exact prop names and types: [`@kerfjs/ui/list`](../public-api-signatures-v1.md#k
 - fill: the layout root fills a definite-height parent
 - rootAttributes: safe data-\* metadata on the root
 - scroll dividers when named as wireScrollDividers targets chrome
+- multi-select grid for rich ContentItem rows
 
 **CSS-value props** (typed builders from `@kerfjs/ui/css-values`; raw CSS strings are rejected):
 
@@ -64,7 +66,7 @@ Exact prop names and types: [`@kerfjs/ui/list`](../public-api-signatures-v1.md#k
 
 ## State and wiring
 
-**The app owns:** child semantics and content; the bounded height needed for scrolling; typed gap, flex, alignment, and divider choices.
+**The app owns:** child semantics and content; the bounded height needed for scrolling; typed gap, flex, alignment, and divider choices; the accessible label and selection state of a multi-select grid.
 
 **Wiring:** `wireScrollDividers` is optional.
 
@@ -81,7 +83,7 @@ Margin: none · border: conditional · padding: conditional (layout role: naviga
 
 ## Accessibility
 
-- List adds layout only and no list role; children retain responsibility for their native or ARIA semantics.
+- List adds layout only and no list role by default; selectionMode="multiple" makes it an aria-multiselectable grid with a required ariaLabel for selectable ContentItem rows.
 - Give a scrollable List a bounded block size and keep keyboard focus visible as its contents scroll.
 
 ## Styling boundary

package/ai/components/token-search-field.md

@@ -10,6 +10,7 @@ Token-controlled, optionally collapsible search editor with ordered, editable, r
 
 - Combine DOM-owned free text with ordered editable/removable filter tokens in one searchbox.
 - Enable collapsible mode when an empty, unfocused search should reduce to one iconic action, standalone or inside a toolbar group.
+- Use presentation="form-field" for a structured search query beside Web Awesome form controls, with a visible label, optional hint, and required marker.
 
 **Not when:**
 
@@ -40,6 +41,7 @@ Exact prop names and types: [`@kerfjs/ui/token-search-field`](../public-api-sign
 - free text
 - disabled
 - collapsible standalone or toolbar composition
+- visible form-field label, hint, and required marker
 
 ## Composition
 
@@ -79,6 +81,7 @@ Margin: none · border: self · padding: self (layout role: controls). `self` me
 - Keep leading and trailing controls aligned to the first text line while content wraps. Managed Clear restores replacement focus before the next input task, preserving immediate typing and later focus handoffs without a frame delay.
 - Wire Enter to submit without inserting a contenteditable line break and preserve focus plus the text-relative caret across controlled keyboard chip deletion before the next keystroke. Select All deletion preserves managed open state and replacement focus; persist both edited query and tokens. Visual wrapping remains available.
 - In collapsible mode, wireTokenSearchFields manages this by default: activating the trigger reveals the searchbox and moves focus into it, Escape on an empty field collapses and returns focus to the trigger, and focus leaving an empty field collapses it; each behavior is individually opt-out.
+- The form-field presentation associates its visible label and optional hint with the searchbox, exposes aria-required when required, and lets wireTokenSearchFields focus the editor from a label click. The app validates required input.
 
 ## Styling boundary
 

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

@@ -1,6 +1,6 @@
 # Public API signatures for the UI authoring corpus
 
-Generated from emitted declarations for `@kerfjs/ui@5.0.0-beta.64` and `kerfjs@5.0.0-beta.64`. This bounded reference covers only APIs used by the seven-task corpus. It is interface evidence, not an implementation or runtime guarantee.
+Generated from emitted declarations for `@kerfjs/ui@5.0.0-beta.65` and `kerfjs@5.0.0-beta.65`. This bounded reference covers only APIs used by the seven-task corpus. It is interface evidence, not an implementation or runtime guarantee.
 
 ## `@kerfjs/ui/css-values`
 
@@ -629,6 +629,10 @@ type ListRootAttributes = Readonly<Record<`data-${string}`, string | undefined>
 }>;
 interface ListProps {
     children?: KerfUiContent;
+    /** Make this list a labeled multi-select grid for `ContentItem selectionMode="multiple"` rows. */
+    selectionMode?: 'multiple';
+    /** Accessible name for the multi-select grid. */
+    ariaLabel?: string;
     /** Use the standard item gap, a named UI spacing token, or a typed CSS length. Defaults to no gap. */
     gap?: boolean | UiSpaceName | CssLength;
     /** Allow this list to grow/shrink, use a keyword, or supply a typed CSS flex shorthand. */
@@ -665,7 +669,7 @@ interface ListProps {
  */
 type ListConfig = Pick<ListProps, 'gap' | 'hAlign' | 'vAlign' | 'dividerSides' | 'textInsets' | 'controlInsets'>;
 /** A stretch-aligned vertical stack with optional gap, flex, fill, scroll, and dividers. */
-declare function List({ children, gap, flex, fill, hAlign, vAlign, scrollable, dividerSides, textInsets, controlInsets, className, rootAttributes, slot, }: ListProps): kerfjs.SafeHtml;
+declare function List({ children, selectionMode, ariaLabel, gap, flex, fill, hAlign, vAlign, scrollable, dividerSides, textInsets, controlInsets, className, rootAttributes, slot, }: ListProps): kerfjs.SafeHtml;
 
 export { CssFlex, CssFlexKeyword, CssLength, HorizontalAlignment, List, type ListConfig, type ListProps, ListVerticalAlignment, Sides, UiSpaceName };
 ```
@@ -878,8 +882,8 @@ import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
 type ContentItemFrame = 'none' | 'framed';
 /** Corner shape: the 12px rounded rectangle or the 22px pill. */
 type ContentItemShape = 'rounded' | 'pill';
-/** `single` uses option selection; `toggle` uses a pressed button. */
-type ContentItemSelectionMode = 'none' | 'single' | 'toggle';
+/** `single` uses an option; `multiple` uses a grid row; `toggle` uses a pressed button. */
+type ContentItemSelectionMode = 'none' | 'single' | 'multiple' | 'toggle';
 type ContentItemRootAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
     'data-component'?: never;
 }>;
@@ -2910,14 +2914,14 @@ export { SunkenPanel, type SunkenPanelProps, type SunkenPanelShape };
 ```ts
 import 'kerfjs';
 import './semantic-content-BbzjvSu9.js';
-export { T as TokenSearchEditorAttributes, a as TokenSearchField, b as TokenSearchFieldProps, c as TokenSearchFieldValue, j as TokenSearchToken, k as TokenSearchTrailingAction, p as placeTokenSearchCaret, r as readTokenSearchField } from './token-search-field-Xk8jiw8Y.js';
+export { T as TokenSearchEditorAttributes, a as TokenSearchField, b as TokenSearchFieldProps, c as TokenSearchFieldValue, j as TokenSearchToken, k as TokenSearchTrailingAction, p as placeTokenSearchCaret, r as readTokenSearchField } from './token-search-field-CVGwDn2y.js';
 ```
 
 ## `@kerfjs/ui/wire-token-search-fields`
 
 ```ts
 import { Signal } from 'kerfjs';
-import { d as TokenSearchModel } from './token-search-field-Xk8jiw8Y.js';
+import { d as TokenSearchModel } from './token-search-field-CVGwDn2y.js';
 import './semantic-content-BbzjvSu9.js';
 
 interface TokenSearchSubmit {
@@ -3451,6 +3455,6 @@ export { CssLength, Spacer, type SpacerProps, UiSpaceName };
 
 ```ts
 import 'kerfjs';
-export { d as TokenSearchModel, e as TokenSearchModelOptions, f as TokenSearchResolvedToken, g as TokenSearchRule, h as TokenSearchState, i as TokenSearchSuggestion, l as createTokenSearchModel } from './token-search-field-Xk8jiw8Y.js';
+export { d as TokenSearchModel, e as TokenSearchModelOptions, f as TokenSearchResolvedToken, g as TokenSearchRule, h as TokenSearchState, i as TokenSearchSuggestion, l as createTokenSearchModel } from './token-search-field-CVGwDn2y.js';
 import './semantic-content-BbzjvSu9.js';
 ```

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

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

package/dist/catalog.js

@@ -1,4 +1,4 @@
-import { Workbench } from './chunk-KFYANKJI.js';
+import { Workbench } from './chunk-PWQAVNON.js';
 
 import { PopupMenu } from './chunk-J3KGJ6P6.js';
 
@@ -15,7 +15,7 @@ import { ToolbarText } from './chunk-V3DX3K65.js';
 
 
 
-import { List } from './chunk-NAPE7WUS.js';
+import { List } from './chunk-W2AC6Q2A.js';
 
 import { ToolbarControlGroup, ToolbarActionLink } from './chunk-NXWE5S57.js';
 import { Toolbar } from './chunk-RGS4WX2M.js';

package/dist/{chunk-NSVLUDUW.js → chunk-5SYE4CCT.js}

@@ -43,6 +43,8 @@ function TokenSearchField({
   trailing,
   trailingAction,
   presentation = "standalone",
+  hint,
+  required = false,
   editAction = "edit-search-token",
   removeAction = "remove-search-token",
   clearAction = "clear-token-search",
@@ -61,7 +63,7 @@ function TokenSearchField({
   const tokenKey = tokens.map((token) => token.value).join("|");
   const key = model ? `${id}@${String(revision ?? "")}:${model.editorRevision.value}:${tokenKey}` : revision === void 0 ? `${id}:${tokenKey}` : `${id}@${String(revision)}:${tokenKey}`;
   const resolvedExpanded = !collapsible || expanded || query.length > 0 || tokens.length > 0;
-  return /* @__PURE__ */ jsx(
+  const control = /* @__PURE__ */ jsx(
     "div",
     {
       class: `kui-token-search ${className}`.trim(),
@@ -98,7 +100,10 @@ function TokenSearchField({
             "data-token-count": tokens.length,
             "data-placeholder": tokens.length ? tokenPlaceholder : placeholder,
             role: "searchbox",
-            "aria-label": label,
+            "aria-label": presentation === "form-field" ? void 0 : label,
+            "aria-labelledby": presentation === "form-field" ? `${id}-label` : void 0,
+            "aria-describedby": presentation === "form-field" && hint ? `${id}-hint` : void 0,
+            "aria-required": required ? "true" : void 0,
             "aria-disabled": disabled ? "true" : void 0,
             contenteditable: disabled ? "false" : "true",
             spellcheck: "false",
@@ -193,6 +198,23 @@ function TokenSearchField({
       ] })
     }
   );
+  if (presentation !== "form-field") return control;
+  return /* @__PURE__ */ jsxs("div", { class: "kui-token-search__field", "data-token-search-form-field": id, children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        class: "kui-token-search__field-label",
+        id: `${id}-label`,
+        "data-token-search-form-label": id,
+        children: [
+          label,
+          required && /* @__PURE__ */ jsx("span", { class: "kui-token-search__field-required", "aria-hidden": "true", children: "*" })
+        ]
+      }
+    ),
+    control,
+    hint && /* @__PURE__ */ jsx("div", { class: "kui-token-search__field-hint", id: `${id}-hint`, children: hint })
+  ] });
 }
 function readTokenSearchField(editor, knownTokens = []) {
   let query = "";
@@ -259,4 +281,4 @@ function placeTokenSearchCaret(editor, offset) {
 
 export { TokenSearchField, placeTokenSearchCaret, readTokenSearchField };
 
-//# sourceMappingURL=chunk-NSVLUDUW.js.map
+//# sourceMappingURL=chunk-5SYE4CCT.js.map

package/dist/chunk-5SYE4CCT.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/token-search-field.tsx"],"names":[],"mappings":"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","file":"chunk-5SYE4CCT.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\nimport { Search, X } from 'lucide';\n\nimport { LucideIcon } from './lucide-icon.js';\nimport type { KerfUiContent } from './semantic-content.js';\nimport type { TokenSearchModel } from './token-search-model.js';\n\nexport interface TokenSearchToken {\n  value: string;\n  label: string;\n  offset?: number;\n  accessibleLabel?: string;\n}\n\nexport interface TokenSearchTrailingAction {\n  icon: SafeHtml;\n  label: string;\n  action: string;\n  id?: string;\n}\n\nexport type TokenSearchEditorAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-component'?: never;\n    'data-key'?: never;\n    'data-morph-skip'?: never;\n    'data-token-search-editor'?: never;\n    'data-token-count'?: never;\n    'data-placeholder'?: never;\n  }\n>;\n\ninterface TokenSearchFieldBaseProps {\n  id: string;\n  label: string;\n  query?: string;\n  tokens?: readonly TokenSearchToken[];\n  /** Opt-in grammar, suggestion, and evaluation state. Overrides `query` and `tokens`. */\n  model?: TokenSearchModel;\n  /**\n   * Editor identity for a programmatic text replacement. The editor's text is\n   * DOM-owned between token changes, so a new `query` with the same tokens\n   * does not re-render it (that would reset the caret on every keystroke).\n   * Change `revision` when the app replaces the text itself — reseeding a\n   * persistent dialog's field on reopen, applying a saved search — and the\n   * editor is rebuilt from `query` and `tokens`.\n   */\n  revision?: string | number;\n  placeholder?: string;\n  tokenPlaceholder?: string;\n  disabled?: boolean;\n  autofocus?: boolean;\n  /** Let an expanded collapsible field consume the available inline width. */\n  fill?: boolean;\n  leading?: KerfUiContent;\n  editAction?: string;\n  removeAction?: string;\n  clearAction?: string;\n  clearLabel?: string;\n  /** Icon for the clear button. Default: the Lucide `x` glyph token chips also use. */\n  clearIcon?: SafeHtml;\n  className?: string;\n  editorAttributes?: TokenSearchEditorAttributes;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\ntype TokenSearchTrailingProps =\n  | { trailing?: KerfUiContent; trailingAction?: never }\n  | { trailing?: never; trailingAction: TokenSearchTrailingAction };\n\ntype TokenSearchPresentationProps =\n  | {\n      /** Standalone field chrome or the inset visual layer of a configured toolbar group. */\n      presentation?: 'standalone' | 'toolbar-group';\n      hint?: never;\n      required?: never;\n    }\n  | {\n      /** Visible form label and optional hint around the full-width standalone control. */\n      presentation: 'form-field';\n      hint?: string;\n      /** Marks the editor required; the app validates its value. */\n      required?: boolean;\n    };\n\ntype TokenSearchCollapsibleProps =\n  | {\n      /** Allow an empty field to render as one iconic action. */\n      collapsible: true;\n      /** Keep an empty collapsible field open while the application owns focus. */\n      expanded?: boolean;\n      expandAction?: string;\n      expandLabel?: string;\n    }\n  | {\n      collapsible?: false;\n      expanded?: never;\n      expandAction?: never;\n      expandLabel?: never;\n    };\n\nexport type TokenSearchFieldProps = TokenSearchFieldBaseProps &\n  TokenSearchCollapsibleProps &\n  TokenSearchTrailingProps &\n  TokenSearchPresentationProps;\n\nexport interface TokenSearchFieldValue {\n  query: string;\n  tokens: TokenSearchToken[];\n}\n\ntype TokenSearchPart =\n  { kind: 'text'; value: string } | { kind: 'token'; token: TokenSearchToken };\n\nfunction orderedParts(\n  query: string,\n  tokens: readonly TokenSearchToken[],\n): TokenSearchPart[] {\n  const ordered = tokens\n    .map((token, index) => ({\n      token,\n      index,\n      offset: Math.max(0, Math.min(query.length, token.offset ?? query.length)),\n    }))\n    .sort(\n      (left, right) => left.offset - right.offset || left.index - right.index,\n    );\n  const parts: TokenSearchPart[] = [];\n  let cursor = 0;\n  for (const { token, offset } of ordered) {\n    parts.push({ kind: 'text', value: query.slice(cursor, offset) });\n    parts.push({ kind: 'token', token: { ...token, offset } });\n    cursor = offset;\n  }\n  parts.push({ kind: 'text', value: query.slice(cursor) });\n  return parts;\n}\n\nfunction CloseIcon() {\n  return <LucideIcon icon={X} name=\"x\" />;\n}\n\nexport function TokenSearchField({\n  id,\n  label,\n  query = '',\n  tokens = [],\n  model,\n  revision,\n  placeholder = 'Search',\n  tokenPlaceholder = 'Add search…',\n  disabled = false,\n  autofocus = false,\n  fill = false,\n  collapsible = false,\n  expanded = false,\n  expandAction = 'expand-token-search',\n  expandLabel,\n  leading,\n  trailing,\n  trailingAction,\n  presentation = 'standalone',\n  hint,\n  required = false,\n  editAction = 'edit-search-token',\n  removeAction = 'remove-search-token',\n  clearAction = 'clear-token-search',\n  clearLabel = 'Clear search',\n  clearIcon,\n  className = '',\n  editorAttributes = {},\n  slot,\n}: TokenSearchFieldProps) {\n  if (model) {\n    query = model.state.value.query;\n    tokens = model.state.value.tokens;\n  }\n  const suggestions = model?.suggestions.value ?? [];\n  const parts = orderedParts(query, tokens);\n  const tokenKey = tokens.map((token) => token.value).join('|');\n  const key = model\n    ? `${id}@${String(revision ?? '')}:${model.editorRevision.value}:${tokenKey}`\n    : revision === undefined\n      ? `${id}:${tokenKey}`\n      : `${id}@${String(revision)}:${tokenKey}`;\n  const resolvedExpanded =\n    !collapsible || expanded || query.length > 0 || tokens.length > 0;\n  const control = (\n    <div\n      class={`kui-token-search ${className}`.trim()}\n      data-component=\"token-search-field\"\n      data-token-search-id={id}\n      data-disabled={String(disabled)}\n      data-collapsible={String(collapsible)}\n      data-expanded={String(resolvedExpanded)}\n      data-fill={String(fill)}\n      data-has-trailing={String(Boolean(trailing || trailingAction))}\n      data-presentation={presentation}\n      slot={slot}\n    >\n      {!resolvedExpanded ? (\n        <button\n          type=\"button\"\n          class=\"kui-token-search__expand\"\n          data-action={expandAction}\n          aria-label={expandLabel ?? label}\n          title={expandLabel ?? label}\n          disabled={disabled}\n        >\n          <LucideIcon icon={Search} name=\"search\" />\n        </button>\n      ) : (\n        <>\n          <span class=\"kui-token-search__leading\" aria-hidden=\"true\">\n            {leading ?? <LucideIcon icon={Search} name=\"search\" />}\n          </span>\n          <div\n            {...editorAttributes}\n            class=\"kui-token-search__editor\"\n            data-key={key}\n            data-morph-skip\n            data-token-search-editor={id}\n            data-token-count={tokens.length}\n            data-placeholder={tokens.length ? tokenPlaceholder : placeholder}\n            role=\"searchbox\"\n            aria-label={presentation === 'form-field' ? undefined : label}\n            aria-labelledby={\n              presentation === 'form-field' ? `${id}-label` : undefined\n            }\n            aria-describedby={\n              presentation === 'form-field' && hint ? `${id}-hint` : undefined\n            }\n            aria-required={required ? 'true' : undefined}\n            aria-disabled={disabled ? 'true' : undefined}\n            contenteditable={disabled ? 'false' : 'true'}\n            spellcheck=\"false\"\n            autofocus={autofocus}\n          >\n            {parts.map((part) =>\n              part.kind === 'text' ? (\n                <span\n                  data-token-search-text\n                  data-empty={String(part.value.length === 0)}\n                >\n                  {part.value || (tokens.length ? '\\u200b' : '')}\n                </span>\n              ) : (\n                <span\n                  class=\"kui-token-search__token\"\n                  contenteditable=\"false\"\n                  data-component=\"token-search-token\"\n                  data-token-value={part.token.value}\n                >\n                  <button\n                    type=\"button\"\n                    class=\"kui-token-search__token-edit\"\n                    data-action={editAction}\n                    data-token-value={part.token.value}\n                    aria-label={`Edit ${part.token.accessibleLabel ?? part.token.label}`}\n                    disabled={disabled}\n                  >\n                    {part.token.label}\n                  </button>\n                  <button\n                    type=\"button\"\n                    class=\"kui-token-search__token-remove\"\n                    data-action={removeAction}\n                    data-token-value={part.token.value}\n                    aria-label={`Remove ${part.token.accessibleLabel ?? part.token.label}`}\n                    disabled={disabled}\n                  >\n                    <CloseIcon />\n                  </button>\n                </span>\n              ),\n            )}\n          </div>\n          {(query || tokens.length > 0) && (\n            <button\n              type=\"button\"\n              class=\"kui-token-search__clear\"\n              data-action={clearAction}\n              aria-label={clearLabel}\n              title={clearLabel}\n              disabled={disabled}\n            >\n              {clearIcon ?? <CloseIcon />}\n            </button>\n          )}\n          {trailingAction ? (\n            <button\n              type=\"button\"\n              class=\"kui-token-search__trailing-action\"\n              id={trailingAction.id}\n              data-action={trailingAction.action}\n              aria-label={trailingAction.label}\n              title={trailingAction.label}\n              disabled={disabled}\n            >\n              {trailingAction.icon}\n            </button>\n          ) : trailing ? (\n            <span class=\"kui-token-search__trailing\">{trailing}</span>\n          ) : null}\n          {!disabled && suggestions.length > 0 && (\n            <div\n              class=\"kui-token-search__suggestions\"\n              data-token-search-keep-open\n            >\n              {suggestions.map((suggestion) => (\n                <button\n                  type=\"button\"\n                  class=\"kui-token-search__suggestion\"\n                  data-token-search-suggestion={suggestion.value}\n                >\n                  {suggestion.label}\n                </button>\n              ))}\n            </div>\n          )}\n        </>\n      )}\n    </div>\n  );\n  if (presentation !== 'form-field') return control;\n  return (\n    <div class=\"kui-token-search__field\" data-token-search-form-field={id}>\n      <div\n        class=\"kui-token-search__field-label\"\n        id={`${id}-label`}\n        data-token-search-form-label={id}\n      >\n        {label}\n        {required && (\n          <span class=\"kui-token-search__field-required\" aria-hidden=\"true\">\n            *\n          </span>\n        )}\n      </div>\n      {control}\n      {hint && (\n        <div class=\"kui-token-search__field-hint\" id={`${id}-hint`}>\n          {hint}\n        </div>\n      )}\n    </div>\n  );\n}\n\n/** Read editable text and ordered token offsets from a rendered TokenSearchField editor. */\nexport function readTokenSearchField(\n  editor: HTMLElement,\n  knownTokens: readonly TokenSearchToken[] = [],\n): TokenSearchFieldValue {\n  let query = '';\n  const tokens: TokenSearchToken[] = [];\n  const visit = (node: Node): void => {\n    if (node.nodeType === Node.TEXT_NODE) {\n      query += (node.textContent ?? '')\n        .replaceAll('\\u00a0', ' ')\n        .replaceAll('\\u200b', '');\n      return;\n    }\n    if (!(node instanceof HTMLElement)) return;\n    if (node.matches('[data-component=\"token-search-token\"]')) {\n      const value = node.dataset.tokenValue;\n      const known = knownTokens.find((token) => token.value === value);\n      if (known) tokens.push({ ...known, offset: query.length });\n      else if (value)\n        tokens.push({ value, label: value, offset: query.length });\n      return;\n    }\n    if (node.tagName === 'BR') {\n      query += ' ';\n      return;\n    }\n    for (const child of node.childNodes) visit(child);\n  };\n  for (const child of editor.childNodes) visit(child);\n  return { query, tokens };\n}\n\n/** Focus an editor and place its caret at a text offset, skipping atomic token chips. */\nexport function placeTokenSearchCaret(\n  editor: HTMLElement,\n  offset?: number,\n): void {\n  editor.focus({ preventScroll: true });\n  const selection = globalThis.getSelection();\n  if (!selection) return;\n  const range = document.createRange();\n  if (offset === undefined) {\n    range.selectNodeContents(editor);\n    range.collapse(false);\n  } else {\n    let remaining = Math.max(0, offset);\n    let found = false;\n    const walker = document.createTreeWalker(editor, NodeFilter.SHOW_TEXT, {\n      acceptNode: (node) =>\n        node.parentElement?.closest('[data-component=\"token-search-token\"]')\n          ? NodeFilter.FILTER_REJECT\n          : NodeFilter.FILTER_ACCEPT,\n    });\n    for (let node = walker.nextNode(); node; node = walker.nextNode()) {\n      const source = node.textContent ?? '';\n      const length = source.replaceAll('\\u200b', '').length;\n      if (remaining <= length) {\n        range.setStart(\n          node,\n          source === '\\u200b' ? 0 : Math.min(remaining, source.length),\n        );\n        range.collapse(true);\n        found = true;\n        break;\n      }\n      remaining -= length;\n    }\n    if (!found) {\n      range.selectNodeContents(editor);\n      range.collapse(false);\n    }\n  }\n  selection.removeAllRanges();\n  selection.addRange(range);\n}\n"]}

package/dist/{chunk-IA4D5XNT.js → chunk-FJSZYEBM.js}

@@ -1,5 +1,5 @@
 import { Pane } from './chunk-3BYFWTP3.js';
-import { List } from './chunk-NAPE7WUS.js';
+import { List } from './chunk-W2AC6Q2A.js';
 import { isRelocatableGroup, ToolbarControlGroup } from './chunk-NXWE5S57.js';
 import { Toolbar } from './chunk-RGS4WX2M.js';
 import { LucideIcon } from './chunk-MOSIE4Z2.js';
@@ -143,4 +143,4 @@ function relocatedPanelGroups(toolbar, side, collapsed, attributes) {
 
 export { collapsiblePanelToggleIcon, composedPanelBody, relocatedPanelGroups };
 
-//# sourceMappingURL=chunk-IA4D5XNT.js.map
+//# sourceMappingURL=chunk-FJSZYEBM.js.map

package/dist/{chunk-IA4D5XNT.js.map → chunk-FJSZYEBM.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/panel-toolbar.tsx"],"names":[],"mappings":";;;;;;;;AA4BO,SAAS,0BAAA,CACd,MACA,SAAA,EACkE;AAClE,EAAA,IAAI,IAAA,KAAS,MAAA;AACX,IAAA,OAAO,SAAA,GACH,EAAE,IAAA,EAAM,aAAA,EAAe,IAAA,EAAM,iBAAA,EAAkB,GAC/C,EAAE,IAAA,EAAM,cAAA,EAAgB,IAAA,EAAM,kBAAA,EAAmB;AACvD,EAAA,IAAI,IAAA,KAAS,OAAA;AACX,IAAA,OAAO,SAAA,GACH,EAAE,IAAA,EAAM,cAAA,EAAgB,IAAA,EAAM,kBAAA,EAAmB,GACjD,EAAE,IAAA,EAAM,eAAA,EAAiB,IAAA,EAAM,mBAAA,EAAoB;AACzD,EAAA,OAAO,SAAA,GACH,EAAE,IAAA,EAAM,eAAA,EAAiB,IAAA,EAAM,mBAAA,EAAoB,GACnD,EAAE,IAAA,EAAM,gBAAA,EAAkB,IAAA,EAAM,oBAAA,EAAqB;AAC3D;AA2DA,SAAS,eAAA,CAAgB,SAAwB,MAAA,EAAqB;AACpE,EAAA,uBACE,GAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,cAAc,MAAA,EAAQ,YAAA;AAAA,MACtB,KAAK,MAAA,EAAQ,GAAA;AAAA,MACb,QAAQ,MAAA,EAAQ,MAAA;AAAA,MAChB,QAAQ,MAAA,EAAQ,MAAA;AAAA,MAChB,YAAY,MAAA,EAAQ,UAAA;AAAA,MACpB,eAAe,MAAA,EAAQ,aAAA;AAAA,MAEtB,QAAA,EAAA;AAAA;AAAA,GACH;AAEJ;AAMO,SAAS,gBAAA,CACd,IAAA,EACA,MAAA,EACA,SAAA,EACA,UAAA,EACU;AACV,EAAA,MAAM,KAAA,GAAQ,0BAAA,CAA2B,IAAA,EAAM,SAAS,CAAA;AACxD,EAAA,uBACE,GAAA,CAAC,uBAAoB,KAAA,EAAO,MAAA,CAAO,MAAM,UAAA,EAAW,YAAA,EAAa,QAAM,IAAA,EACrE,QAAA,kBAAA,GAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAK,QAAA;AAAA,MACJ,GAAG,UAAA;AAAA,MACJ,eAAa,MAAA,CAAO,MAAA;AAAA,MACpB,eAAA,EAAe,MAAA,CAAO,CAAC,SAAS,CAAA;AAAA,MAChC,YAAA,EACE,SAAA,GACK,MAAA,CAAO,SAAA,IAAa,CAAA,KAAA,EAAQ,MAAA,CAAO,IAAI,CAAA,CAAA,GACvC,MAAA,CAAO,SAAA,IAAa,CAAA,KAAA,EAAQ,MAAA,CAAO,IAAI,CAAA,CAAA;AAAA,MAG9C,8BAAC,UAAA,EAAA,EAAW,IAAA,EAAM,MAAM,IAAA,EAAM,IAAA,EAAM,MAAM,IAAA,EAAM;AAAA;AAAA,GAClD,EACF,CAAA;AAEJ;AAKO,SAAS,oBAAA,CACd,OAAA,EACA,IAAA,EACA,SAAA,EACA,UAAA,EACU;AACV,EAAA,uBACE,GAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,OAAO,OAAA,CAAQ,KAAA;AAAA,MACf,cAAc,OAAA,CAAQ,YAAA;AAAA,MACtB,aAAa,OAAA,CAAQ,WAAA;AAAA,MACrB,YAAY,OAAA,CAAQ,UAAA;AAAA,MACpB,cAAc,OAAA,CAAQ,YAAA;AAAA,MACtB,eAAe,OAAA,CAAQ,aAAA;AAAA,MACvB,QAAQ,OAAA,CAAQ,MAAA;AAAA,MAChB,yBACE,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,QAAA,OAAA,CAAQ,KAAA;AAAA,QACR,OAAA,CAAQ;AAAA,OAAA,EACX,CAAA;AAAA,MAEF,0BACE,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,QAAA,OAAA,CAAQ,QAAA;AAAA,QACR,OAAA,CAAQ,SACL,gBAAA,CAAiB,IAAA,EAAM,QAAQ,MAAA,EAAQ,SAAA,EAAW,UAAU,CAAA,GAC5D;AAAA,OAAA,EACN;AAAA;AAAA,GAEJ;AAEJ;AAOO,SAAS,iBAAA,CAAkB;AAAA,EAChC,OAAA;AAAA,EACA,IAAA;AAAA,EACA,SAAA;AAAA,EACA,UAAA;AAAA,EACA,IAAA;AAAA,EACA,MAAA;AAAA,EACA,UAAA;AAAA,EACA,eAAA,GAAkB,OAAA;AAAA,EAClB,MAAA;AAAA,EACA,UAAA;AAAA,EACA,aAAA;AAAA,EACA,eAAA,GAAkB,OAAA;AAAA,EAClB;AACF,CAAA,EAca;AACX,EAAA,MAAM,8BACJ,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,IAAA,oBAAA,CAAqB,OAAA,EAAS,IAAA,EAAM,SAAA,EAAW,UAAU,CAAA;AAAA,IACzD,MAAA,GAAS,eAAA,CAAgB,MAAA,EAAQ,UAAU,CAAA,GAAI;AAAA,GAAA,EAClD,CAAA;AAEF,EAAA,MAAM,WAAA,GACJ,MAAA,IAAU,aAAA,mBACR,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,IAAA,MAAA,GAAS,eAAA,CAAgB,MAAA,EAAQ,UAAU,CAAA,GAAI,IAAA;AAAA,IAC/C,aAAA,mBACC,GAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACC,QAAA,EAAS,QAAA;AAAA,QACT,OAAO,aAAA,CAAc,KAAA;AAAA,QACrB,cAAc,aAAA,CAAc,YAAA;AAAA,QAC5B,aAAa,aAAA,CAAc,WAAA;AAAA,QAC3B,YAAY,aAAA,CAAc,UAAA;AAAA,QAC1B,cAAc,aAAA,CAAc,YAAA;AAAA,QAC5B,eAAe,aAAA,CAAc,aAAA;AAAA,QAC7B,SAAS,aAAA,CAAc,OAAA;AAAA,QACvB,QAAQ,aAAA,CAAc,MAAA;AAAA,QACtB,UAAU,aAAA,CAAc;AAAA;AAAA,KAC1B,GACE;AAAA,GAAA,EACN,CAAA,GACE,MAAA;AACN,EAAA,MAAM,eAAe,eAAA,KAAoB,QAAA;AACzC,EAAA,MAAM,eAAe,eAAA,KAAoB,QAAA;AACzC,EAAA,uBACE,IAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,MAAA,EAAQ,eAAe,MAAA,GAAY,WAAA;AAAA,MACnC,MAAA,EAAQ,eAAe,MAAA,GAAY,WAAA;AAAA,MACnC,eAAA,EACE,eAAA,KAAoB,MAAA,IAAU,eAAA,KAAoB,SAC9C,MAAA,GACA,OAAA;AAAA,MAEN,gBAAgB,IAAA,EAAM,cAAA;AAAA,MACtB,cAAc,IAAA,EAAM,YAAA;AAAA,MACpB,YAAY,IAAA,EAAM,UAAA;AAAA,MAClB,eAAe,IAAA,EAAM,aAAA;AAAA,MACrB,gBAAgB,IAAA,EAAM,cAAA;AAAA,MACtB,YAAY,IAAA,EAAM,UAAA;AAAA,MAEjB,QAAA,EAAA;AAAA,QAAA,YAAA,GAAe,WAAA,GAAc,IAAA;AAAA,QAC7B,OAAA;AAAA,QACA,eAAe,WAAA,GAAc;AAAA;AAAA;AAAA,GAChC;AAEJ;AAMO,SAAS,oBAAA,CACd,OAAA,EACA,IAAA,EACA,SAAA,EACA,UAAA,EACiB;AACjB,EAAA,IAAI,CAAC,SAAA,IAAa,CAAC,OAAA,SAAgB,EAAC;AACpC,EAAA,MAAM,SAA0B,EAAC;AACjC,EAAA,MAAM,OAAA,GAAU,CAAC,OAAA,KAAiC;AAChD,IAAA,IAAI,KAAA,CAAM,OAAA,CAAQ,OAAO,CAAA,EAAG;AAC1B,MAAA,KAAA,MAAW,IAAA,IAAQ,OAAA,EAAS,OAAA,CAAQ,IAAI,CAAA;AAAA,IAC1C,CAAA,MAAA,IAAW,kBAAA,CAAmB,OAAO,CAAA,EAAG;AACtC,MAAA,MAAA,CAAO,KAAK,OAAO,CAAA;AAAA,IACrB;AAAA,EACF,CAAA;AACA,EAAA,OAAA,CAAQ,QAAQ,OAAO,CAAA;AACvB,EAAA,OAAA,CAAQ,QAAQ,MAAM,CAAA;AACtB,EAAA,OAAA,CAAQ,QAAQ,QAAQ,CAAA;AACxB,EAAA,OAAO;AAAA,IACL,GAAG,MAAA;AAAA,IACH,OAAA,CAAQ,SACJ,gBAAA,CAAiB,IAAA,EAAM,QAAQ,MAAA,EAAQ,IAAA,EAAM,UAAU,CAAA,GACvD;AAAA,GACN,CAAE,OAAO,CAAC,KAAA,KAAU,UAAU,MAAA,IAAa,KAAA,KAAU,IAAA,IAAQ,KAAA,KAAU,KAAK,CAAA;AAC9E","file":"chunk-IA4D5XNT.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\nimport {\n  PanelBottomClose,\n  PanelBottomOpen,\n  PanelLeftClose,\n  PanelLeftOpen,\n  PanelRightClose,\n  PanelRightOpen,\n} from 'lucide';\n\nimport { List, type ListConfig } from './list.js';\nimport { LucideIcon } from './lucide-icon.js';\nimport { Pane, type PaneConfig } from './pane.js';\nimport { isRelocatableGroup } from './panel-toolbar-group.js';\nimport type { KerfUiContent } from './semantic-content.js';\nimport { Toolbar, type ToolbarConfig } from './toolbar.js';\nimport { ToolbarControlGroup } from './toolbar-control-group.js';\n\n/** Which edge a collapsible panel docks to. */\nexport type PanelSide = 'left' | 'right' | 'bottom';\n\n/**\n * The standard collapse/expand icon for a panel `side` and `collapsed` state,\n * so every app's sidebars and drawers use one recognizable convention:\n * `PanelLeft*` for a left rail, `PanelRight*` for a right rail, `PanelBottom*`\n * for a bottom drawer — the `Close` glyph while open, the `Open` glyph while\n * collapsed. Exposed so an app can render its own toggle affordance.\n */\nexport function collapsiblePanelToggleIcon(\n  side: PanelSide,\n  collapsed: boolean,\n): { icon: Parameters<typeof LucideIcon>[0]['icon']; name: string } {\n  if (side === 'left')\n    return collapsed\n      ? { icon: PanelLeftOpen, name: 'panel-left-open' }\n      : { icon: PanelLeftClose, name: 'panel-left-close' };\n  if (side === 'right')\n    return collapsed\n      ? { icon: PanelRightOpen, name: 'panel-right-open' }\n      : { icon: PanelRightClose, name: 'panel-right-close' };\n  return collapsed\n    ? { icon: PanelBottomOpen, name: 'panel-bottom-open' }\n    : { icon: PanelBottomClose, name: 'panel-bottom-close' };\n}\n\n/**\n * The standard collapse toggle a panel toolbar renders. The app handles the\n * button's `data-action` and flips its own `collapsed` flag.\n */\nexport interface PanelToggle {\n  /** The `data-action` the toggle button carries. */\n  action: string;\n  /** The panel's short name, for the accessible \"Show …\" / \"Hide …\" label. */\n  name: string;\n  /** Accessible label while the panel is collapsed. Defaults to `Show {name}`. */\n  showLabel?: string;\n  /** Accessible label while the panel is open. Defaults to `Hide {name}`. */\n  hideLabel?: string;\n}\n\n/**\n * A collapsible panel's top toolbar, composed so its groups follow the\n * panel's open state.\n *\n * - `title` precedes the `leading` zone. Groups may appear in any of the\n *   `leading`, `center`, and `trailing` zones while the panel is open.\n * - Groups marked `relocateOnCollapse` move to the work area's toolbar while\n *   the panel is collapsed, preserving their order across the three zones.\n * - `toggle` is always the last group: in the panel's toolbar while it is\n *   open, and right after the relocated groups in the work area's toolbar\n *   while it is collapsed.\n *\n * Relocated content renders in both places while the panel is collapsed (the\n * panel's copy is inert), so give it no `id`s. Pass groups directly or in\n * arrays so their render-time annotation remains available to the panel.\n *\n * The toolbar's configuration (`dividerSides`, `centerAlign`, `responsive`,\n * `responsiveAt`, `safeAreaEdges`) forwards to its `Toolbar`. It draws no\n * divider of its own: the panel's `Pane` draws the line under it while the\n * content is scrolled (its `chromeDividers`, wired by `wireScrollDividers`).\n */\nexport interface PanelToolbar extends ToolbarConfig {\n  /** Accessible name of the panel's toolbar. */\n  label: string;\n  title?: KerfUiContent;\n  leading?: KerfUiContent;\n  center?: KerfUiContent;\n  trailing?: KerfUiContent;\n  toggle?: PanelToggle;\n}\n\n/** A panel's fixed bottom toolbar, below its optional footer content. */\nexport interface PanelBottomToolbar extends ToolbarConfig {\n  label: string;\n  leading?: KerfUiContent;\n  center?: KerfUiContent;\n  trailing?: KerfUiContent;\n}\n\n/** Whether panel chrome stays fixed, scrolls, or follows Pane's auto rule. */\nexport type PanelChromePlacement = 'fixed' | 'scroll' | 'auto';\n\nfunction panelChromeList(content: KerfUiContent, config?: ListConfig) {\n  return (\n    <List\n      dividerSides={config?.dividerSides}\n      gap={config?.gap}\n      hAlign={config?.hAlign}\n      vAlign={config?.vAlign}\n      textInsets={config?.textInsets}\n      controlInsets={config?.controlInsets}\n    >\n      {content}\n    </List>\n  );\n}\n\n/** Owner-specific attributes a toggle button carries (its wiring hooks). */\nexport type PanelToggleAttributes = Readonly<Record<string, string>>;\n\n/** The standard toggle, alone in a borderless group. */\nexport function panelToggleGroup(\n  side: PanelSide,\n  toggle: PanelToggle,\n  collapsed: boolean,\n  attributes: PanelToggleAttributes,\n): SafeHtml {\n  const glyph = collapsiblePanelToggleIcon(side, collapsed);\n  return (\n    <ToolbarControlGroup label={toggle.name} appearance=\"borderless\" single>\n      <button\n        type=\"button\"\n        {...attributes}\n        data-action={toggle.action}\n        aria-expanded={String(!collapsed)}\n        aria-label={\n          collapsed\n            ? (toggle.showLabel ?? `Show ${toggle.name}`)\n            : (toggle.hideLabel ?? `Hide ${toggle.name}`)\n        }\n      >\n        <LucideIcon icon={glyph.icon} name={glyph.name} />\n      </button>\n    </ToolbarControlGroup>\n  );\n}\n\n/**\n * The panel's own toolbar: content keeps its chosen zones and the toggle trails.\n */\nexport function composedPanelToolbar(\n  toolbar: PanelToolbar,\n  side: PanelSide,\n  collapsed: boolean,\n  attributes: PanelToggleAttributes,\n): SafeHtml {\n  return (\n    <Toolbar\n      label={toolbar.label}\n      dividerSides={toolbar.dividerSides}\n      centerAlign={toolbar.centerAlign}\n      responsive={toolbar.responsive}\n      responsiveAt={toolbar.responsiveAt}\n      safeAreaEdges={toolbar.safeAreaEdges}\n      center={toolbar.center}\n      leading={\n        <>\n          {toolbar.title}\n          {toolbar.leading}\n        </>\n      }\n      trailing={\n        <>\n          {toolbar.trailing}\n          {toolbar.toggle\n            ? panelToggleGroup(side, toolbar.toggle, collapsed, attributes)\n            : null}\n        </>\n      }\n    />\n  );\n}\n\n/**\n * A toolbar panel's body: its content in a `Pane` under its composed toolbar,\n * with its optional `footer` below. The panel's `pane` configuration forwards\n * to that `Pane`; an omitted or `undefined` field keeps the `Pane` default.\n */\nexport function composedPanelBody({\n  toolbar,\n  side,\n  collapsed,\n  attributes,\n  pane,\n  header,\n  headerList,\n  headerPlacement = 'fixed',\n  footer,\n  footerList,\n  bottomToolbar,\n  footerPlacement = 'fixed',\n  content,\n}: {\n  toolbar: PanelToolbar;\n  side: PanelSide;\n  collapsed: boolean;\n  attributes: PanelToggleAttributes;\n  pane: PaneConfig | undefined;\n  header?: KerfUiContent;\n  headerList?: ListConfig;\n  headerPlacement?: PanelChromePlacement;\n  footer?: KerfUiContent;\n  footerList?: ListConfig;\n  bottomToolbar?: PanelBottomToolbar;\n  footerPlacement?: PanelChromePlacement;\n  content: KerfUiContent;\n}): SafeHtml {\n  const panelHeader = (\n    <>\n      {composedPanelToolbar(toolbar, side, collapsed, attributes)}\n      {header ? panelChromeList(header, headerList) : null}\n    </>\n  );\n  const panelFooter =\n    footer || bottomToolbar ? (\n      <>\n        {footer ? panelChromeList(footer, footerList) : null}\n        {bottomToolbar ? (\n          <Toolbar\n            position=\"footer\"\n            label={bottomToolbar.label}\n            dividerSides={bottomToolbar.dividerSides}\n            centerAlign={bottomToolbar.centerAlign}\n            responsive={bottomToolbar.responsive}\n            responsiveAt={bottomToolbar.responsiveAt}\n            safeAreaEdges={bottomToolbar.safeAreaEdges}\n            leading={bottomToolbar.leading}\n            center={bottomToolbar.center}\n            trailing={bottomToolbar.trailing}\n          />\n        ) : null}\n      </>\n    ) : undefined;\n  const scrollHeader = headerPlacement === 'scroll';\n  const scrollFooter = footerPlacement === 'scroll';\n  return (\n    <Pane\n      header={scrollHeader ? undefined : panelHeader}\n      footer={scrollFooter ? undefined : panelFooter}\n      chromePlacement={\n        headerPlacement === 'auto' || footerPlacement === 'auto'\n          ? 'auto'\n          : 'fixed'\n      }\n      contentElement={pane?.contentElement}\n      contentLabel={pane?.contentLabel}\n      separators={pane?.separators}\n      safeAreaEdges={pane?.safeAreaEdges}\n      chromeDividers={pane?.chromeDividers}\n      appearance={pane?.appearance}\n    >\n      {scrollHeader ? panelHeader : null}\n      {content}\n      {scrollFooter ? panelFooter : null}\n    </Pane>\n  );\n}\n\n/**\n * The groups a collapsed panel hands to the work area, in zone order, then its\n * toggle. Empty while the panel is open or has no toolbar.\n */\nexport function relocatedPanelGroups(\n  toolbar: PanelToolbar | undefined,\n  side: PanelSide,\n  collapsed: boolean,\n  attributes: PanelToggleAttributes,\n): KerfUiContent[] {\n  if (!collapsed || !toolbar) return [];\n  const groups: KerfUiContent[] = [];\n  const collect = (content: KerfUiContent): void => {\n    if (Array.isArray(content)) {\n      for (const item of content) collect(item);\n    } else if (isRelocatableGroup(content)) {\n      groups.push(content);\n    }\n  };\n  collect(toolbar.leading);\n  collect(toolbar.center);\n  collect(toolbar.trailing);\n  return [\n    ...groups,\n    toolbar.toggle\n      ? panelToggleGroup(side, toolbar.toggle, true, attributes)\n      : null,\n  ].filter((group) => group !== undefined && group !== null && group !== false);\n}\n"]}
+{"version":3,"sources":["../src/panel-toolbar.tsx"],"names":[],"mappings":"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","file":"chunk-FJSZYEBM.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\nimport {\n  PanelBottomClose,\n  PanelBottomOpen,\n  PanelLeftClose,\n  PanelLeftOpen,\n  PanelRightClose,\n  PanelRightOpen,\n} from 'lucide';\n\nimport { List, type ListConfig } from './list.js';\nimport { LucideIcon } from './lucide-icon.js';\nimport { Pane, type PaneConfig } from './pane.js';\nimport { isRelocatableGroup } from './panel-toolbar-group.js';\nimport type { KerfUiContent } from './semantic-content.js';\nimport { Toolbar, type ToolbarConfig } from './toolbar.js';\nimport { ToolbarControlGroup } from './toolbar-control-group.js';\n\n/** Which edge a collapsible panel docks to. */\nexport type PanelSide = 'left' | 'right' | 'bottom';\n\n/**\n * The standard collapse/expand icon for a panel `side` and `collapsed` state,\n * so every app's sidebars and drawers use one recognizable convention:\n * `PanelLeft*` for a left rail, `PanelRight*` for a right rail, `PanelBottom*`\n * for a bottom drawer — the `Close` glyph while open, the `Open` glyph while\n * collapsed. Exposed so an app can render its own toggle affordance.\n */\nexport function collapsiblePanelToggleIcon(\n  side: PanelSide,\n  collapsed: boolean,\n): { icon: Parameters<typeof LucideIcon>[0]['icon']; name: string } {\n  if (side === 'left')\n    return collapsed\n      ? { icon: PanelLeftOpen, name: 'panel-left-open' }\n      : { icon: PanelLeftClose, name: 'panel-left-close' };\n  if (side === 'right')\n    return collapsed\n      ? { icon: PanelRightOpen, name: 'panel-right-open' }\n      : { icon: PanelRightClose, name: 'panel-right-close' };\n  return collapsed\n    ? { icon: PanelBottomOpen, name: 'panel-bottom-open' }\n    : { icon: PanelBottomClose, name: 'panel-bottom-close' };\n}\n\n/**\n * The standard collapse toggle a panel toolbar renders. The app handles the\n * button's `data-action` and flips its own `collapsed` flag.\n */\nexport interface PanelToggle {\n  /** The `data-action` the toggle button carries. */\n  action: string;\n  /** The panel's short name, for the accessible \"Show …\" / \"Hide …\" label. */\n  name: string;\n  /** Accessible label while the panel is collapsed. Defaults to `Show {name}`. */\n  showLabel?: string;\n  /** Accessible label while the panel is open. Defaults to `Hide {name}`. */\n  hideLabel?: string;\n}\n\n/**\n * A collapsible panel's top toolbar, composed so its groups follow the\n * panel's open state.\n *\n * - `title` precedes the `leading` zone. Groups may appear in any of the\n *   `leading`, `center`, and `trailing` zones while the panel is open.\n * - Groups marked `relocateOnCollapse` move to the work area's toolbar while\n *   the panel is collapsed, preserving their order across the three zones.\n * - `toggle` is always the last group: in the panel's toolbar while it is\n *   open, and right after the relocated groups in the work area's toolbar\n *   while it is collapsed.\n *\n * Relocated content renders in both places while the panel is collapsed (the\n * panel's copy is inert), so give it no `id`s. Pass groups directly or in\n * arrays so their render-time annotation remains available to the panel.\n *\n * The toolbar's configuration (`dividerSides`, `centerAlign`, `responsive`,\n * `responsiveAt`, `safeAreaEdges`) forwards to its `Toolbar`. It draws no\n * divider of its own: the panel's `Pane` draws the line under it while the\n * content is scrolled (its `chromeDividers`, wired by `wireScrollDividers`).\n */\nexport interface PanelToolbar extends ToolbarConfig {\n  /** Accessible name of the panel's toolbar. */\n  label: string;\n  title?: KerfUiContent;\n  leading?: KerfUiContent;\n  center?: KerfUiContent;\n  trailing?: KerfUiContent;\n  toggle?: PanelToggle;\n}\n\n/** A panel's fixed bottom toolbar, below its optional footer content. */\nexport interface PanelBottomToolbar extends ToolbarConfig {\n  label: string;\n  leading?: KerfUiContent;\n  center?: KerfUiContent;\n  trailing?: KerfUiContent;\n}\n\n/** Whether panel chrome stays fixed, scrolls, or follows Pane's auto rule. */\nexport type PanelChromePlacement = 'fixed' | 'scroll' | 'auto';\n\nfunction panelChromeList(content: KerfUiContent, config?: ListConfig) {\n  return (\n    <List\n      dividerSides={config?.dividerSides}\n      gap={config?.gap}\n      hAlign={config?.hAlign}\n      vAlign={config?.vAlign}\n      textInsets={config?.textInsets}\n      controlInsets={config?.controlInsets}\n    >\n      {content}\n    </List>\n  );\n}\n\n/** Owner-specific attributes a toggle button carries (its wiring hooks). */\nexport type PanelToggleAttributes = Readonly<Record<string, string>>;\n\n/** The standard toggle, alone in a borderless group. */\nexport function panelToggleGroup(\n  side: PanelSide,\n  toggle: PanelToggle,\n  collapsed: boolean,\n  attributes: PanelToggleAttributes,\n): SafeHtml {\n  const glyph = collapsiblePanelToggleIcon(side, collapsed);\n  return (\n    <ToolbarControlGroup label={toggle.name} appearance=\"borderless\" single>\n      <button\n        type=\"button\"\n        {...attributes}\n        data-action={toggle.action}\n        aria-expanded={String(!collapsed)}\n        aria-label={\n          collapsed\n            ? (toggle.showLabel ?? `Show ${toggle.name}`)\n            : (toggle.hideLabel ?? `Hide ${toggle.name}`)\n        }\n      >\n        <LucideIcon icon={glyph.icon} name={glyph.name} />\n      </button>\n    </ToolbarControlGroup>\n  );\n}\n\n/**\n * The panel's own toolbar: content keeps its chosen zones and the toggle trails.\n */\nexport function composedPanelToolbar(\n  toolbar: PanelToolbar,\n  side: PanelSide,\n  collapsed: boolean,\n  attributes: PanelToggleAttributes,\n): SafeHtml {\n  return (\n    <Toolbar\n      label={toolbar.label}\n      dividerSides={toolbar.dividerSides}\n      centerAlign={toolbar.centerAlign}\n      responsive={toolbar.responsive}\n      responsiveAt={toolbar.responsiveAt}\n      safeAreaEdges={toolbar.safeAreaEdges}\n      center={toolbar.center}\n      leading={\n        <>\n          {toolbar.title}\n          {toolbar.leading}\n        </>\n      }\n      trailing={\n        <>\n          {toolbar.trailing}\n          {toolbar.toggle\n            ? panelToggleGroup(side, toolbar.toggle, collapsed, attributes)\n            : null}\n        </>\n      }\n    />\n  );\n}\n\n/**\n * A toolbar panel's body: its content in a `Pane` under its composed toolbar,\n * with its optional `footer` below. The panel's `pane` configuration forwards\n * to that `Pane`; an omitted or `undefined` field keeps the `Pane` default.\n */\nexport function composedPanelBody({\n  toolbar,\n  side,\n  collapsed,\n  attributes,\n  pane,\n  header,\n  headerList,\n  headerPlacement = 'fixed',\n  footer,\n  footerList,\n  bottomToolbar,\n  footerPlacement = 'fixed',\n  content,\n}: {\n  toolbar: PanelToolbar;\n  side: PanelSide;\n  collapsed: boolean;\n  attributes: PanelToggleAttributes;\n  pane: PaneConfig | undefined;\n  header?: KerfUiContent;\n  headerList?: ListConfig;\n  headerPlacement?: PanelChromePlacement;\n  footer?: KerfUiContent;\n  footerList?: ListConfig;\n  bottomToolbar?: PanelBottomToolbar;\n  footerPlacement?: PanelChromePlacement;\n  content: KerfUiContent;\n}): SafeHtml {\n  const panelHeader = (\n    <>\n      {composedPanelToolbar(toolbar, side, collapsed, attributes)}\n      {header ? panelChromeList(header, headerList) : null}\n    </>\n  );\n  const panelFooter =\n    footer || bottomToolbar ? (\n      <>\n        {footer ? panelChromeList(footer, footerList) : null}\n        {bottomToolbar ? (\n          <Toolbar\n            position=\"footer\"\n            label={bottomToolbar.label}\n            dividerSides={bottomToolbar.dividerSides}\n            centerAlign={bottomToolbar.centerAlign}\n            responsive={bottomToolbar.responsive}\n            responsiveAt={bottomToolbar.responsiveAt}\n            safeAreaEdges={bottomToolbar.safeAreaEdges}\n            leading={bottomToolbar.leading}\n            center={bottomToolbar.center}\n            trailing={bottomToolbar.trailing}\n          />\n        ) : null}\n      </>\n    ) : undefined;\n  const scrollHeader = headerPlacement === 'scroll';\n  const scrollFooter = footerPlacement === 'scroll';\n  return (\n    <Pane\n      header={scrollHeader ? undefined : panelHeader}\n      footer={scrollFooter ? undefined : panelFooter}\n      chromePlacement={\n        headerPlacement === 'auto' || footerPlacement === 'auto'\n          ? 'auto'\n          : 'fixed'\n      }\n      contentElement={pane?.contentElement}\n      contentLabel={pane?.contentLabel}\n      separators={pane?.separators}\n      safeAreaEdges={pane?.safeAreaEdges}\n      chromeDividers={pane?.chromeDividers}\n      appearance={pane?.appearance}\n    >\n      {scrollHeader ? panelHeader : null}\n      {content}\n      {scrollFooter ? panelFooter : null}\n    </Pane>\n  );\n}\n\n/**\n * The groups a collapsed panel hands to the work area, in zone order, then its\n * toggle. Empty while the panel is open or has no toolbar.\n */\nexport function relocatedPanelGroups(\n  toolbar: PanelToolbar | undefined,\n  side: PanelSide,\n  collapsed: boolean,\n  attributes: PanelToggleAttributes,\n): KerfUiContent[] {\n  if (!collapsed || !toolbar) return [];\n  const groups: KerfUiContent[] = [];\n  const collect = (content: KerfUiContent): void => {\n    if (Array.isArray(content)) {\n      for (const item of content) collect(item);\n    } else if (isRelocatableGroup(content)) {\n      groups.push(content);\n    }\n  };\n  collect(toolbar.leading);\n  collect(toolbar.center);\n  collect(toolbar.trailing);\n  return [\n    ...groups,\n    toolbar.toggle\n      ? panelToggleGroup(side, toolbar.toggle, true, attributes)\n      : null,\n  ].filter((group) => group !== undefined && group !== null && group !== false);\n}\n"]}

package/dist/{chunk-SH6F3CCG.js → chunk-NCSWXG7G.js}

@@ -63,18 +63,18 @@ function ContentItem({
       class: cls,
       title,
       "data-component": "content-item",
-      role: interactive ? selectionMode === "single" ? "option" : "button" : ariaLabel ? "region" : void 0,
+      role: interactive ? selectionMode === "single" ? "option" : selectionMode === "multiple" ? "row" : "button" : ariaLabel ? "region" : void 0,
       "aria-label": ariaLabel,
-      "aria-selected": interactive && selectionMode === "single" ? String(selected) : void 0,
+      "aria-selected": interactive && (selectionMode === "single" || selectionMode === "multiple") ? String(selected) : void 0,
       "aria-pressed": interactive && selectionMode === "toggle" ? String(selected) : void 0,
       "aria-disabled": interactive && disabled ? "true" : void 0,
       tabindex: interactive ? disabled ? "-1" : "0" : focusTarget ? "-1" : void 0,
       slot,
-      children
+      children: interactive && selectionMode === "multiple" ? /* @__PURE__ */ jsx("div", { role: "gridcell", children }) : children
     }
   );
 }
 
 export { ContentItem };
 
-//# sourceMappingURL=chunk-SH6F3CCG.js.map
+//# sourceMappingURL=chunk-NCSWXG7G.js.map

package/dist/{chunk-SH6F3CCG.js.map → chunk-NCSWXG7G.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/content-item.tsx"],"names":[],"mappings":";;;AAWA,IAAM,8BAAA,mBAAiC,IAAI,GAAA,CAAI,CAAC,gBAAgB,CAAC,CAAA;AACjE,IAAM,8BAAA,uBAAqC,GAAA,CAAI;AAAA,EAC7C,gBAAA;AAAA,EACA,aAAA;AAAA,EACA,cAAA;AAAA,EACA,kBAAA;AAAA,EACA,eAAA;AAAA,EACA,eAAA;AAAA,EACA,qBAAA;AAAA,EACA;AACF,CAAC,CAAA;AAmFM,SAAS,WAAA,CAAY;AAAA,EAC1B,QAAA;AAAA,EACA,KAAA,GAAQ,MAAA;AAAA,EACR,KAAA,GAAQ,KAAA;AAAA,EACR,KAAA,GAAQ,SAAA;AAAA,EACR,KAAA;AAAA,EACA,SAAA;AAAA,EACA,WAAA,GAAc,KAAA;AAAA,EACd,WAAA,GAAc,KAAA;AAAA,EACd,MAAA;AAAA,EACA,MAAA;AAAA,EACA,aAAA,GAAgB,MAAA;AAAA,EAChB,QAAA,GAAW,KAAA;AAAA,EACX,QAAA,GAAW,KAAA;AAAA,EACX,SAAA,GAAY,EAAA;AAAA,EACZ,iBAAiB,EAAC;AAAA,EAClB;AACF,CAAA,EAAqB;AACnB,EAAA,MAAM,kBAAA,GAAqB,oBAAA;AAAA,IACzB,cAAA;AAAA,IACA,cACI,8BAAA,GACA;AAAA,GACN;AACA,EAAA,IAAI,WAAA,IAAe,CAAC,MAAA,EAAQ;AAC1B,IAAA,MAAM,IAAI,MAAM,4CAA4C,CAAA;AAAA,EAC9D;AACA,EAAA,IAAI,WAAA,IAAe,QAAA,IAAY,aAAA,KAAkB,MAAA,EAAQ;AACvD,IAAA,MAAM,IAAI,MAAM,+CAA+C,CAAA;AAAA,EACjE;AACA,EAAA,MAAM,GAAA,GAAM;AAAA,IACV,kBAAA;AAAA,IACA,KAAA,KAAU,SAAS,wBAAA,GAA2B,EAAA;AAAA,IAC9C,KAAA,KAAU,WAAW,0BAAA,GAA6B,EAAA;AAAA,IAClD,QAAQ,yBAAA,GAA4B,EAAA;AAAA,IACpC;AAAA,GACF,CACG,MAAA,CAAO,OAAO,CAAA,CACd,KAAK,GAAG,CAAA;AACX,EAAA,MAAM,wBAAwB,WAAA,GAC1B;AAAA,IACE,kBAAA,EAAoB,MAAA;AAAA,IACpB,aAAA,EAAe,WAAW,MAAA,GAAY,MAAA;AAAA,IACtC,cAAA,EAAgB,MAAA;AAAA,IAChB,qBAAA,EAAuB,aAAA;AAAA,IACvB,eAAA,EACE,aAAA,KAAkB,MAAA,GAAS,MAAA,GAAY,OAAO,QAAQ,CAAA;AAAA,IACxD,eAAA,EAAiB,WAAW,MAAA,GAAS;AAAA,MAEvC,EAAC;AACL,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,kBAAA;AAAA,MACH,GAAG,qBAAA;AAAA,MACJ,KAAA,EAAO,GAAA;AAAA,MACP,KAAA;AAAA,MACA,gBAAA,EAAe,cAAA;AAAA,MACf,MACE,WAAA,GACI,aAAA,KAAkB,WAChB,QAAA,GACA,QAAA,GACF,YACE,QAAA,GACA,MAAA;AAAA,MAER,YAAA,EAAY,SAAA;AAAA,MACZ,iBACE,WAAA,IAAe,aAAA,KAAkB,QAAA,GAAW,MAAA,CAAO,QAAQ,CAAA,GAAI,MAAA;AAAA,MAEjE,gBACE,WAAA,IAAe,aAAA,KAAkB,QAAA,GAAW,MAAA,CAAO,QAAQ,CAAA,GAAI,MAAA;AAAA,MAEjE,eAAA,EAAe,WAAA,IAAe,QAAA,GAAW,MAAA,GAAS,MAAA;AAAA,MAClD,UACE,WAAA,GAAe,QAAA,GAAW,IAAA,GAAO,GAAA,GAAO,cAAc,IAAA,GAAO,MAAA;AAAA,MAE/D,IAAA;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ","file":"chunk-SH6F3CCG.js","sourcesContent":["import { filterDataAttributes } from './extension-attributes.js';\nimport type { KerfUiContent } from './semantic-content.js';\n\n/** Whether the item's always-reserved 1px border is transparent or visible. */\nexport type ContentItemFrame = 'none' | 'framed';\n\n/** Corner shape: the 12px rounded rectangle or the 22px pill. */\nexport type ContentItemShape = 'rounded' | 'pill';\n/** `single` uses option selection; `toggle` uses a pressed button. */\nexport type ContentItemSelectionMode = 'none' | 'single' | 'toggle';\n\nconst contentItemProtectedAttributes = new Set(['data-component']);\nconst interactiveProtectedAttributes = new Set([\n  'data-component',\n  'data-action',\n  'data-item-id',\n  'data-interactive',\n  'data-selected',\n  'data-disabled',\n  'data-selection-mode',\n  'data-kui-pressed',\n]);\n\ntype ContentItemRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-component'?: never;\n  }\n>;\n\ntype ContentItemInteractiveRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-component'?: never;\n    'data-action'?: never;\n    'data-item-id'?: never;\n    'data-interactive'?: never;\n    'data-selected'?: never;\n    'data-disabled'?: never;\n    'data-selection-mode'?: never;\n    'data-kui-pressed'?: never;\n  }\n>;\n\ninterface ContentItemBaseProps {\n  /** Item content; a plain string is allowed for bare copy. */\n  children?: KerfUiContent | string;\n  /**\n   * `framed` paints the standard neutral border in the 1px the item always\n   * reserves, so framing never changes geometry. Frame only an item that\n   * marks a real distinction. Defaults to `none` (transparent border).\n   */\n  frame?: ContentItemFrame;\n  /** Remove block padding and block borders while retaining inline geometry. */\n  flush?: boolean;\n  /** Corner shape. Defaults to `rounded`. */\n  shape?: ContentItemShape;\n  /** Native hover tooltip. */\n  title?: string;\n  /**\n   * Names the item as a distinct region (`role=\"region\"`). Omit it for an\n   * ordinary item, which stays a non-landmark grouping.\n   */\n  ariaLabel?: string;\n  /**\n   * Makes the item a programmatic focus target (`tabindex=\"-1\"`, never a tab\n   * stop), for example the preferred initial focus of a NavStack view when\n   * combined with `data-nav-focus` in `rootAttributes`.\n   */\n  focusTarget?: boolean;\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\nexport type ContentItemProps = ContentItemBaseProps &\n  (\n    | {\n        interactive?: false;\n        action?: never;\n        itemId?: never;\n        selectionMode?: never;\n        selected?: never;\n        disabled?: never;\n        /** Existing static `data-*` metadata remains available. */\n        rootAttributes?: ContentItemRootAttributes;\n      }\n    | {\n        /** Enable a keyboard reachable card; wire `wireContentItems` once on its containing root. */\n        interactive: true;\n        /** Delegated action dispatched by pointer, Enter, or Space. */\n        action: string;\n        itemId?: string;\n        selectionMode?: ContentItemSelectionMode;\n        selected?: boolean;\n        disabled?: boolean;\n        /** Safe app metadata; interaction attributes are component-owned. */\n        rootAttributes?: ContentItemInteractiveRootAttributes;\n      }\n  );\n\n/**\n * One self-contained `.kui-content` child: an 8px inline margin, a real 1px\n * border (transparent unless `framed`), 8px padding, and a rounded or pill\n * radius. It owns that whole geometry, so wrappers must not add more.\n */\nexport function ContentItem({\n  children,\n  frame = 'none',\n  flush = false,\n  shape = 'rounded',\n  title,\n  ariaLabel,\n  focusTarget = false,\n  interactive = false,\n  action,\n  itemId,\n  selectionMode = 'none',\n  selected = false,\n  disabled = false,\n  className = '',\n  rootAttributes = {},\n  slot,\n}: ContentItemProps) {\n  const safeRootAttributes = filterDataAttributes(\n    rootAttributes,\n    interactive\n      ? interactiveProtectedAttributes\n      : contentItemProtectedAttributes,\n  );\n  if (interactive && !action) {\n    throw new Error('Interactive ContentItem requires an action');\n  }\n  if (interactive && selected && selectionMode === 'none') {\n    throw new Error('Selected ContentItem requires a selectionMode');\n  }\n  const cls = [\n    'kui-content-item',\n    shape === 'pill' ? 'kui-content-item--pill' : '',\n    frame === 'framed' ? 'kui-content-item--framed' : '',\n    flush ? 'kui-content-item--flush' : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n  const interactiveAttributes = interactive\n    ? {\n        'data-interactive': 'true',\n        'data-action': disabled ? undefined : action,\n        'data-item-id': itemId,\n        'data-selection-mode': selectionMode,\n        'data-selected':\n          selectionMode === 'none' ? undefined : String(selected),\n        'data-disabled': disabled ? 'true' : undefined,\n      }\n    : {};\n  return (\n    <div\n      {...safeRootAttributes}\n      {...interactiveAttributes}\n      class={cls}\n      title={title}\n      data-component=\"content-item\"\n      role={\n        interactive\n          ? selectionMode === 'single'\n            ? 'option'\n            : 'button'\n          : ariaLabel\n            ? 'region'\n            : undefined\n      }\n      aria-label={ariaLabel}\n      aria-selected={\n        interactive && selectionMode === 'single' ? String(selected) : undefined\n      }\n      aria-pressed={\n        interactive && selectionMode === 'toggle' ? String(selected) : undefined\n      }\n      aria-disabled={interactive && disabled ? 'true' : undefined}\n      tabindex={\n        interactive ? (disabled ? '-1' : '0') : focusTarget ? '-1' : undefined\n      }\n      slot={slot}\n    >\n      {children}\n    </div>\n  );\n}\n"]}
+{"version":3,"sources":["../src/content-item.tsx"],"names":[],"mappings":"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","file":"chunk-NCSWXG7G.js","sourcesContent":["import { filterDataAttributes } from './extension-attributes.js';\nimport type { KerfUiContent } from './semantic-content.js';\n\n/** Whether the item's always-reserved 1px border is transparent or visible. */\nexport type ContentItemFrame = 'none' | 'framed';\n\n/** Corner shape: the 12px rounded rectangle or the 22px pill. */\nexport type ContentItemShape = 'rounded' | 'pill';\n/** `single` uses an option; `multiple` uses a grid row; `toggle` uses a pressed button. */\nexport type ContentItemSelectionMode =\n  'none' | 'single' | 'multiple' | 'toggle';\n\nconst contentItemProtectedAttributes = new Set(['data-component']);\nconst interactiveProtectedAttributes = new Set([\n  'data-component',\n  'data-action',\n  'data-item-id',\n  'data-interactive',\n  'data-selected',\n  'data-disabled',\n  'data-selection-mode',\n  'data-kui-pressed',\n]);\n\ntype ContentItemRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-component'?: never;\n  }\n>;\n\ntype ContentItemInteractiveRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-component'?: never;\n    'data-action'?: never;\n    'data-item-id'?: never;\n    'data-interactive'?: never;\n    'data-selected'?: never;\n    'data-disabled'?: never;\n    'data-selection-mode'?: never;\n    'data-kui-pressed'?: never;\n  }\n>;\n\ninterface ContentItemBaseProps {\n  /** Item content; a plain string is allowed for bare copy. */\n  children?: KerfUiContent | string;\n  /**\n   * `framed` paints the standard neutral border in the 1px the item always\n   * reserves, so framing never changes geometry. Frame only an item that\n   * marks a real distinction. Defaults to `none` (transparent border).\n   */\n  frame?: ContentItemFrame;\n  /** Remove block padding and block borders while retaining inline geometry. */\n  flush?: boolean;\n  /** Corner shape. Defaults to `rounded`. */\n  shape?: ContentItemShape;\n  /** Native hover tooltip. */\n  title?: string;\n  /**\n   * Names the item as a distinct region (`role=\"region\"`). Omit it for an\n   * ordinary item, which stays a non-landmark grouping.\n   */\n  ariaLabel?: string;\n  /**\n   * Makes the item a programmatic focus target (`tabindex=\"-1\"`, never a tab\n   * stop), for example the preferred initial focus of a NavStack view when\n   * combined with `data-nav-focus` in `rootAttributes`.\n   */\n  focusTarget?: boolean;\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\nexport type ContentItemProps = ContentItemBaseProps &\n  (\n    | {\n        interactive?: false;\n        action?: never;\n        itemId?: never;\n        selectionMode?: never;\n        selected?: never;\n        disabled?: never;\n        /** Existing static `data-*` metadata remains available. */\n        rootAttributes?: ContentItemRootAttributes;\n      }\n    | {\n        /** Enable a keyboard reachable card; wire `wireContentItems` once on its containing root. */\n        interactive: true;\n        /** Delegated action dispatched by pointer, Enter, or Space. */\n        action: string;\n        itemId?: string;\n        selectionMode?: ContentItemSelectionMode;\n        selected?: boolean;\n        disabled?: boolean;\n        /** Safe app metadata; interaction attributes are component-owned. */\n        rootAttributes?: ContentItemInteractiveRootAttributes;\n      }\n  );\n\n/**\n * One self-contained `.kui-content` child: an 8px inline margin, a real 1px\n * border (transparent unless `framed`), 8px padding, and a rounded or pill\n * radius. It owns that whole geometry, so wrappers must not add more.\n */\nexport function ContentItem({\n  children,\n  frame = 'none',\n  flush = false,\n  shape = 'rounded',\n  title,\n  ariaLabel,\n  focusTarget = false,\n  interactive = false,\n  action,\n  itemId,\n  selectionMode = 'none',\n  selected = false,\n  disabled = false,\n  className = '',\n  rootAttributes = {},\n  slot,\n}: ContentItemProps) {\n  const safeRootAttributes = filterDataAttributes(\n    rootAttributes,\n    interactive\n      ? interactiveProtectedAttributes\n      : contentItemProtectedAttributes,\n  );\n  if (interactive && !action) {\n    throw new Error('Interactive ContentItem requires an action');\n  }\n  if (interactive && selected && selectionMode === 'none') {\n    throw new Error('Selected ContentItem requires a selectionMode');\n  }\n  const cls = [\n    'kui-content-item',\n    shape === 'pill' ? 'kui-content-item--pill' : '',\n    frame === 'framed' ? 'kui-content-item--framed' : '',\n    flush ? 'kui-content-item--flush' : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n  const interactiveAttributes = interactive\n    ? {\n        'data-interactive': 'true',\n        'data-action': disabled ? undefined : action,\n        'data-item-id': itemId,\n        'data-selection-mode': selectionMode,\n        'data-selected':\n          selectionMode === 'none' ? undefined : String(selected),\n        'data-disabled': disabled ? 'true' : undefined,\n      }\n    : {};\n  return (\n    <div\n      {...safeRootAttributes}\n      {...interactiveAttributes}\n      class={cls}\n      title={title}\n      data-component=\"content-item\"\n      role={\n        interactive\n          ? selectionMode === 'single'\n            ? 'option'\n            : selectionMode === 'multiple'\n              ? 'row'\n              : 'button'\n          : ariaLabel\n            ? 'region'\n            : undefined\n      }\n      aria-label={ariaLabel}\n      aria-selected={\n        interactive &&\n        (selectionMode === 'single' || selectionMode === 'multiple')\n          ? String(selected)\n          : undefined\n      }\n      aria-pressed={\n        interactive && selectionMode === 'toggle' ? String(selected) : undefined\n      }\n      aria-disabled={interactive && disabled ? 'true' : undefined}\n      tabindex={\n        interactive ? (disabled ? '-1' : '0') : focusTarget ? '-1' : undefined\n      }\n      slot={slot}\n    >\n      {interactive && selectionMode === 'multiple' ? (\n        <div role=\"gridcell\">{children}</div>\n      ) : (\n        children\n      )}\n    </div>\n  );\n}\n"]}