@kerfjs/ui 5.0.0-beta.74 → 5.0.0-beta.75

package/ai/component-catalog.json

@@ -155,7 +155,8 @@
       ],
       "appOwns": [
         "icon choice",
-        "meaningful label"
+        "meaningful label",
+        "optional foreground color"
       ],
       "variants": [
         "decorative",
@@ -168,6 +169,11 @@
           "title": "Solid selected glyph",
           "description": "The solid appearance fills a compatible Lucide glyph with currentColor while retaining its stroke and accessible name policy.",
           "code": "<LucideIcon icon={Star} name=\"star\" appearance=\"solid\" />"
+        },
+        {
+          "title": "Semantic icon color",
+          "description": "Set an icon foreground with a semantic color token; omit color to inherit from surrounding text. Use foregroundColor() for a custom CSS color or foregroundColorVar() for an app variable.",
+          "code": "<LucideIcon icon={Bell} name=\"alert\" color={uiColor('warning-on-quiet')} />"
         }
       ],
       "accessibility": [
@@ -2707,6 +2713,17 @@
         "calc",
         "flex"
       ],
+      "publicExportImports": {
+        "px": "@kerfjs/ui/css-values",
+        "rem": "@kerfjs/ui/css-values",
+        "em": "@kerfjs/ui/css-values",
+        "pct": "@kerfjs/ui/css-values",
+        "space": "@kerfjs/ui/css-values",
+        "lengthVar": "@kerfjs/ui/css-values",
+        "plus": "@kerfjs/ui/css-values",
+        "calc": "@kerfjs/ui/css-values",
+        "flex": "@kerfjs/ui/css-values"
+      },
       "cssValueProps": [
         {
           "path": "gap",
@@ -4171,15 +4188,23 @@
         "Select",
         "uiColor",
         "colorVar",
-        "foregroundColorVar"
+        "foregroundColorVar",
+        "foregroundColor"
       ],
+      "publicExportImports": {
+        "uiColor": "@kerfjs/ui/css-values",
+        "colorVar": "@kerfjs/ui/css-values",
+        "foregroundColorVar": "@kerfjs/ui/css-values",
+        "foregroundColor": "@kerfjs/ui/css-values"
+      },
       "cssValueProps": [
         {
           "path": "choices[].color",
           "grammar": "color",
           "helpers": [
             "uiColor",
-            "foregroundColorVar"
+            "foregroundColorVar",
+            "foregroundColor"
           ],
           "shorthands": [],
           "canonicalShorthands": [],
@@ -4187,13 +4212,14 @@
           "rawPolicy": "forbid",
           "examples": [
             "color: uiColor(\"success-on-quiet\")",
-            "color: foregroundColorVar(\"--app-choice-color\")"
+            "color: foregroundColorVar(\"--app-choice-color\")",
+            "color: foregroundColor(\"rebeccapurple\")"
           ]
         }
       ],
       "useWhen": [
         "Choose a controlled value from a moderate or long list, including grouped and icon-bearing choices.",
-        "Color an optional choice icon with a CssForegroundColor: uiColor() with a foreground token such as success-on-quiet, or foregroundColorVar() for an app-owned property. Fill tokens such as success are backgrounds that leave the icon nearly invisible, so they, lengths, raw color strings, and unqualified colorVar() values are rejected."
+        "Color an optional choice icon with a CssForegroundColor: uiColor() with a foreground token such as success-on-quiet, foregroundColorVar() for an app-owned property, or foregroundColor() for a direct custom CSS color. Fill tokens such as success are backgrounds that leave the icon nearly invisible, so they, lengths, raw color strings, and unqualified colorVar() values are rejected."
       ],
       "avoidWhen": [
         "Do not use for commands or a small choice set that should stay visible."

package/ai/component-composition.json

@@ -126,7 +126,12 @@
       "children": { "mode": "any", "concepts": [], "requiredConcepts": [] },
       "state": [
         { "id": "icon choice", "owner": "application", "required": false },
-        { "id": "meaningful label", "owner": "application", "required": false }
+        { "id": "meaningful label", "owner": "application", "required": false },
+        {
+          "id": "optional foreground color",
+          "owner": "application",
+          "required": false
+        }
       ],
       "wiring": {
         "required": false,
@@ -3494,14 +3499,15 @@
         {
           "path": "choices[].color",
           "grammar": "color",
-          "helpers": ["uiColor", "foregroundColorVar"],
+          "helpers": ["uiColor", "foregroundColorVar", "foregroundColor"],
           "shorthands": [],
           "canonicalShorthands": [],
           "exceptionalShorthands": [],
           "rawPolicy": "forbid",
           "examples": [
             "color: uiColor(\"success-on-quiet\")",
-            "color: foregroundColorVar(\"--app-choice-color\")"
+            "color: foregroundColorVar(\"--app-choice-color\")",
+            "color: foregroundColor(\"rebeccapurple\")"
           ]
         }
       ],

package/ai/components/list.md

@@ -26,14 +26,15 @@ Standardize vertical component layout, optional physical-side text/control inset
 
 ## Imports
 
-- JavaScript: `@kerfjs/ui/list` — exports `List`, `px`, `rem`, `em`, `pct`, `space`, `lengthVar`, `plus`, `calc`, `flex`.
+- JavaScript: `@kerfjs/ui/list` — exports `List`.
+- JavaScript: `@kerfjs/ui/css-values` — exports `px`, `rem`, `em`, `pct`, `space`, `lengthVar`, `plus`, `calc`, `flex`.
 - CSS: the browser build of `@kerfjs/ui/list` pulls its CSS automatically; import `@kerfjs/ui/list.css` manually only without the `browser` export condition.
 - Wiring: `wireScrollDividers` from `@kerfjs/ui/wire-scroll-dividers` (optional).
 - Declared side effects: browser-condition-css.
 
 ## Props
 
-Exact prop names and types: [`@kerfjs/ui/list`](../public-api-signatures-v1.md#kerfjsuilist), [`@kerfjs/ui/wire-scroll-dividers`](../public-api-signatures-v1.md#kerfjsuiwire-scroll-dividers) in `public-api-signatures-v1.md`. Do not infer props from examples.
+Exact prop names and types: [`@kerfjs/ui/list`](../public-api-signatures-v1.md#kerfjsuilist), [`@kerfjs/ui/css-values`](../public-api-signatures-v1.md#kerfjsuicss-values), [`@kerfjs/ui/wire-scroll-dividers`](../public-api-signatures-v1.md#kerfjsuiwire-scroll-dividers) in `public-api-signatures-v1.md`. Do not infer props from examples.
 
 **Variants (configure, do not restyle):**
 

package/ai/components/lucide-icon.md

@@ -43,7 +43,7 @@ Exact prop names and types: [`@kerfjs/ui/lucide-icon`](../public-api-signatures-
 
 ## State and wiring
 
-**The app owns:** icon choice; meaningful label.
+**The app owns:** icon choice; meaningful label; optional foreground color.
 
 No wiring helper.
 
@@ -65,6 +65,14 @@ The solid appearance fills a compatible Lucide glyph with currentColor while ret
 <LucideIcon icon={Star} name="star" appearance="solid" />
 ```
 
+### Semantic icon color
+
+Set an icon foreground with a semantic color token; omit color to inherit from surrounding text. Use foregroundColor() for a custom CSS color or foregroundColorVar() for an app variable.
+
+```tsx
+<LucideIcon icon={Bell} name="alert" color={uiColor('warning-on-quiet')} />
+```
+
 ## Styling boundary
 
 The component owns its own styles. Configure it through its props and variants; do not override its internals.

package/ai/components/select.md

@@ -11,7 +11,7 @@ Controlled Web Awesome select with typed single or multiple values, disabled cho
 Choose one or more controlled values, keep unavailable choices visible, and optionally select all enabled choices or clear a multiple selection.
 
 - Choose a controlled value from a moderate or long list, including grouped and icon-bearing choices.
-- Color an optional choice icon with a CssForegroundColor: uiColor() with a foreground token such as success-on-quiet, or foregroundColorVar() for an app-owned property. Fill tokens such as success are backgrounds that leave the icon nearly invisible, so they, lengths, raw color strings, and unqualified colorVar() values are rejected.
+- Color an optional choice icon with a CssForegroundColor: uiColor() with a foreground token such as success-on-quiet, foregroundColorVar() for an app-owned property, or foregroundColor() for a direct custom CSS color. Fill tokens such as success are backgrounds that leave the icon nearly invisible, so they, lengths, raw color strings, and unqualified colorVar() values are rejected.
 
 **Not when:**
 
@@ -25,14 +25,15 @@ Choose one or more controlled values, keep unavailable choices visible, and opti
 
 ## Imports
 
-- JavaScript: `@kerfjs/ui/select` — exports `Select`, `uiColor`, `colorVar`, `foregroundColorVar`.
+- JavaScript: `@kerfjs/ui/select` — exports `Select`.
+- JavaScript: `@kerfjs/ui/css-values` — exports `uiColor`, `colorVar`, `foregroundColorVar`, `foregroundColor`.
 - CSS: the browser build of `@kerfjs/ui/select` pulls its CSS automatically; import `@kerfjs/ui/select.css` manually only without the `browser` export condition.
 - Registration: import `@kerfjs/ui/select/register` once (a side effect).
 - Declared side effects: custom-element-registration.
 
 ## Props
 
-Exact prop names and types: [`@kerfjs/ui/select`](../public-api-signatures-v1.md#kerfjsuiselect) in `public-api-signatures-v1.md`. Do not infer props from examples.
+Exact prop names and types: [`@kerfjs/ui/select`](../public-api-signatures-v1.md#kerfjsuiselect), [`@kerfjs/ui/css-values`](../public-api-signatures-v1.md#kerfjsuicss-values) in `public-api-signatures-v1.md`. Do not infer props from examples.
 
 **Variants (configure, do not restyle):**
 
@@ -58,7 +59,7 @@ Exact prop names and types: [`@kerfjs/ui/select`](../public-api-signatures-v1.md
 
 **CSS-value props** (typed builders from `@kerfjs/ui/css-values`; raw CSS strings are rejected):
 
-- `choices[].color`: color grammar; raw values: forbid; helpers `uiColor`, `foregroundColorVar` — e.g. `color: uiColor("success-on-quiet")`
+- `choices[].color`: color grammar; raw values: forbid; helpers `uiColor`, `foregroundColorVar`, `foregroundColor` — e.g. `color: uiColor("success-on-quiet")`
 
 ## Composition
 

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.74` and `kerfjs@5.0.0-beta.74`. 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.75` and `kerfjs@5.0.0-beta.75`. 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`
 
@@ -110,8 +110,13 @@ declare function colorVar(name: `--${string}`, fallback?: CssColor): CssColor;
  * accepts only {@link CssForegroundColor}, such as `SelectChoice.color`.
  */
 declare function foregroundColorVar(name: `--${string}`, fallback?: CssForegroundColor): CssForegroundColor;
+/**
+ * Use an application-chosen CSS color for foreground content. The browser
+ * resolves the color syntax; this checks only that it is one declaration value.
+ */
+declare function foregroundColor(value: string): CssForegroundColor;
 
-export { type CssColor, type CssFlex, type CssFlexBasis, type CssFlexKeyword, type CssForegroundColor, type CssLength, type CssLengthExpression, type CssSize, type CssSizeKeyword, type CssValue, type UiColor, type UiColorName, type UiForegroundColorName, type UiSpaceName, calc, colorVar, em, flex, foregroundColorVar, lengthVar, pct, plus, px, rem, remify, space, uiColor };
+export { type CssColor, type CssFlex, type CssFlexBasis, type CssFlexKeyword, type CssForegroundColor, type CssLength, type CssLengthExpression, type CssSize, type CssSizeKeyword, type CssValue, type UiColor, type UiColorName, type UiForegroundColorName, type UiSpaceName, calc, colorVar, em, flex, foregroundColor, foregroundColorVar, lengthVar, pct, plus, px, rem, remify, space, uiColor };
 ```
 
 ## `@kerfjs/ui/disclosure-arrow`
@@ -2871,6 +2876,7 @@ export { EmptyState, type EmptyStateProps };
 import * as kerfjs from 'kerfjs';
 import { LucideIconSize } from './lucide-icon.js';
 import 'lucide';
+import './css-values.js';
 
 type LoadingSpinnerSize = LucideIconSize;
 interface LoadingSpinnerProps {
@@ -3262,6 +3268,7 @@ export { Chip, type ChipProps };
 ```ts
 import * as kerfjs from 'kerfjs';
 import { IconNode } from 'lucide';
+import { CssForegroundColor } from './css-values.js';
 
 type LucideNode = IconNode;
 type LucideIconSize = 'xs' | 's' | 'm' | 'l' | 'xl' | number;
@@ -3271,6 +3278,8 @@ interface LucideIconProps {
     /** Outline by default; solid fills compatible glyphs with the current text color. */
     appearance?: 'outline' | 'solid';
     className?: string;
+    /** Foreground color; omit to inherit the surrounding text color. */
+    color?: CssForegroundColor;
     label?: string;
     /** Named icon scale or positive pixel size, converted to rem. Omit for 1em. */
     size?: LucideIconSize;
@@ -3278,7 +3287,7 @@ interface LucideIconProps {
     slot?: string;
 }
 /** Render a Lucide-compatible icon node without copying icon SVG strings. */
-declare function LucideIcon({ icon, name, appearance, className, label, size, slot, }: LucideIconProps): kerfjs.SafeHtml;
+declare function LucideIcon({ icon, name, appearance, className, color, label, size, slot, }: LucideIconProps): kerfjs.SafeHtml;
 
 export { LucideIcon, type LucideIconProps, type LucideIconSize, type LucideNode };
 ```

package/ai/skill.md

@@ -309,6 +309,8 @@ For prominent content text, use `Text size="large"`; use `size="xlarge"` for dis
 
 For removable tags use `Chip`, with `removeAction` for delegated handling and a specific `removeLabel` for the native button. `itemId` identifies the tag; the app owns removal. `size="compact"` and `disabled` replace app styling of raw `wa-tag` internals. Use `Badge` for non-interactive metadata.
 
+For an icon with a specific meaning, set `LucideIcon.color` using `uiColor('warning-on-quiet')` or another foreground token. Use `foregroundColorVar('--app-icon-color')` for an app-owned property or `foregroundColor('#8b5cf6')` for a direct custom CSS color. Omit the prop to inherit text color. Outline stroke and solid fill both follow the chosen color; size, appearance, label, and slot remain separate props. Avoid pale fill tokens as foregrounds.
+
 For `Select`, mark an unavailable choice with `disabled` and optionally `disabledReason`. In a multiple Select, `selectAllLabel` and `clearLabel` opt in to localized footer actions that select enabled choices or clear the selection through normal input/change events; the app still owns the controlled `value`.
 
 For nested action menus, use `PopupMenuItem.submenu` with item, heading, and divider entries; headings and dividers do not enter keyboard navigation. Items support `checked`, `icon`, `details`, `disabledReason`, and `tone`. The app owns choice state. For a right-click menu, use `PopupMenu` with `context: true` and call `openPopupMenuAt` from the app's `contextmenu` handler; the package positions and opens the menu. Call `closePopupMenu` for programmatic dismissal.

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.74` 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.75` declaration boundary. Import `@kerfjs/ui/webawesome` for type effects when authoring direct `wa-*` JSX. The module emits no runtime behavior and does not register custom elements.
 
 ```ts
 import { KerfCustomElement } from 'kerfjs/jsx-runtime';

package/dist/app-tab.js

@@ -1,4 +1,4 @@
-export { AppTab } from './chunk-7KHKLG5C.js';
+export { AppTab } from './chunk-V4GAQ74C.js';
 
 
 

package/dist/catalog.js

@@ -1,14 +1,14 @@
-import { Workbench } from './chunk-33EOFAUN.js';
+import { Workbench } from './chunk-O5GM2JAM.js';
 
 
 import { PopupMenu } from './chunk-4NG4Y2Q6.js';
 
-import { Row } from './chunk-VZOFZPSO.js';
-import { ListHeader } from './chunk-RU2EMR56.js';
+import { Row } from './chunk-SX7FJXPJ.js';
+import { ListHeader } from './chunk-PL26TKNK.js';
 import { Text } from './chunk-YDGNU2OD.js';
 import { ListInsetText } from './chunk-DG6G5EPF.js';
-import { ListItem } from './chunk-6LAQWWEX.js';
-import { ToolbarText } from './chunk-IJNYCPAU.js';
+import { ListItem } from './chunk-HXTAPIHQ.js';
+import { ToolbarText } from './chunk-HKVJ5MW3.js';
 
 
 
@@ -16,11 +16,11 @@ import { ToolbarText } from './chunk-IJNYCPAU.js';
 
 
 
-import { List } from './chunk-W2AC6Q2A.js';
+import { List } from './chunk-4FEVHE7C.js';
 
-import { ToolbarControlGroup, ToolbarActionLink } from './chunk-BGD7EHUE.js';
+import { ToolbarControlGroup, ToolbarActionLink } from './chunk-TOICTHR2.js';
 import { Toolbar } from './chunk-RGS4WX2M.js';
-import { LucideIcon } from './chunk-WTSNV5RG.js';
+import { LucideIcon } from './chunk-DUBUXJA3.js';
 
 import { filterDataAttributes } from './chunk-SRSJO5QE.js';
 

package/dist/{chunk-W2AC6Q2A.js → chunk-4FEVHE7C.js}

@@ -1,6 +1,6 @@
 import { verticalAlignment, horizontalAlignment } from './chunk-AYUHMAI6.js';
 import { filterDataAttributes } from './chunk-SRSJO5QE.js';
-import { space } from './chunk-2G2ZJQYK.js';
+import { space } from './chunk-RFGW735Q.js';
 import { jsx } from 'kerfjs/jsx-runtime';
 
 var listProtectedAttributes = /* @__PURE__ */ new Set([
@@ -80,4 +80,4 @@ function List({
 
 export { List };
 
-//# sourceMappingURL=chunk-W2AC6Q2A.js.map
+//# sourceMappingURL=chunk-4FEVHE7C.js.map

package/dist/{chunk-W2AC6Q2A.js.map → chunk-4FEVHE7C.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/list.tsx"],"names":[],"mappings":"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","file":"chunk-W2AC6Q2A.js","sourcesContent":["import {\n  type CssFlex,\n  type CssFlexKeyword,\n  type CssLength,\n  space,\n  type UiSpaceName,\n} from './css-values.js';\nimport { filterDataAttributes } from './extension-attributes.js';\nimport {\n  type HorizontalAlignment,\n  horizontalAlignment,\n  type ListVerticalAlignment,\n  verticalAlignment,\n} from './flex-alignment.js';\nimport type { KerfUiContent } from './semantic-content.js';\nimport type { Sides } from './sides.js';\n\nconst listProtectedAttributes = new Set([\n  'data-component',\n  'data-gap',\n  'data-flex',\n  'data-fill',\n  'data-h-align',\n  'data-v-align',\n  'data-scrollable',\n  'data-text-insets',\n  'data-control-insets',\n]);\n\ntype ListRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-component'?: never;\n    'data-gap'?: never;\n    'data-flex'?: never;\n    'data-fill'?: never;\n    'data-h-align'?: never;\n    'data-v-align'?: never;\n    'data-scrollable'?: never;\n    'data-text-insets'?: never;\n    'data-control-insets'?: never;\n  }\n>;\n\nconst spaceNames: readonly UiSpaceName[] = [\n  'none',\n  '2xs',\n  'xs',\n  's',\n  'm',\n  'l',\n  'xl',\n];\n\nexport interface ListProps {\n  children?: KerfUiContent;\n  /** Make this list a labeled multi-select grid for `ContentItem selectionMode=\"multiple\"` rows. */\n  selectionMode?: 'multiple';\n  /** Accessible name for the multi-select grid. */\n  ariaLabel?: string;\n  /** Use the standard item gap, a named UI spacing token, or a typed CSS length. Defaults to no gap. */\n  gap?: boolean | UiSpaceName | CssLength;\n  /** Allow this list to grow/shrink, use a keyword, or supply a typed CSS flex shorthand. */\n  flex?: boolean | CssFlexKeyword | CssFlex;\n  /**\n   * Fill the height of a parent with a definite height, such as an app root or\n   * a fixed-height frame, when this list is that parent's layout root. Inside a\n   * flex layout use `flex` instead. Defaults to false.\n   */\n  fill?: boolean;\n  /** Horizontal alignment. Defaults to full to preserve stretch-aligned list children. */\n  hAlign?: HorizontalAlignment;\n  /** Vertical distribution. Defaults to top. */\n  vAlign?: ListVerticalAlignment;\n  /** Own vertical scrolling and overscroll containment. */\n  scrollable?: boolean;\n  /** Physical divider edges in canonical top/right/bottom/left order. */\n  dividerSides?: Sides;\n  /** Physical sides that receive the standard 17px text inset. */\n  textInsets?: Sides;\n  /** Physical sides that receive the standard 8px control inset. Text insets win on overlap. */\n  controlInsets?: Sides;\n  className?: string;\n  /** Safe `data-*` metadata; List-owned structural attributes remain protected. */\n  rootAttributes?: ListRootAttributes;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/**\n * A list's configuration, apart from its content and styling hooks: the props a\n * composite that renders a `List` for the app (the Workbench's `mainHeader` /\n * `mainFooter` chrome) forwards, so the app configures that list instead of\n * styling it. An omitted or `undefined` field keeps the composite's default.\n */\nexport type ListConfig = Pick<\n  ListProps,\n  'gap' | 'hAlign' | 'vAlign' | 'dividerSides' | 'textInsets' | 'controlInsets'\n>;\n\n/** A stretch-aligned vertical stack with optional gap, flex, fill, scroll, and dividers. */\nexport function List({\n  children,\n  selectionMode,\n  ariaLabel,\n  gap = false,\n  flex = false,\n  fill = false,\n  hAlign = 'full',\n  vAlign = 'top',\n  scrollable = false,\n  dividerSides = '',\n  textInsets = '',\n  controlInsets = '',\n  className = '',\n  rootAttributes = {},\n  slot,\n}: ListProps) {\n  if (selectionMode === 'multiple' && !ariaLabel) {\n    throw new Error('Multi-select List requires an ariaLabel');\n  }\n  const safeRootAttributes = filterDataAttributes(\n    rootAttributes,\n    listProtectedAttributes,\n  );\n  const gapValue =\n    gap === true\n      ? 'var(--kui-list-gap)'\n      : spaceNames.includes(gap as UiSpaceName)\n        ? space(gap as UiSpaceName)\n        : gap || undefined;\n  const flexValue = flex === true ? '1 1 auto' : flex || undefined;\n  const style = [\n    gapValue ? `--_kui-list-gap:${gapValue}` : '',\n    flexValue ? `--_kui-list-flex:${flexValue}` : '',\n  ]\n    .filter(Boolean)\n    .join(';');\n\n  return (\n    <div\n      {...safeRootAttributes}\n      class={`kui-list ${className}`.trim()}\n      data-component=\"list\"\n      role={selectionMode === 'multiple' ? 'grid' : undefined}\n      aria-label={selectionMode === 'multiple' ? ariaLabel : undefined}\n      aria-multiselectable={selectionMode === 'multiple' ? 'true' : undefined}\n      data-gap={String(Boolean(gap))}\n      data-flex={String(Boolean(flex))}\n      data-fill={fill ? 'true' : undefined}\n      data-h-align={horizontalAlignment(hAlign)}\n      data-v-align={verticalAlignment(vAlign)}\n      data-scrollable={String(scrollable)}\n      divider-sides={dividerSides || undefined}\n      data-text-insets={textInsets || undefined}\n      data-control-insets={controlInsets || undefined}\n      style={style || undefined}\n      slot={slot}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport type {\n  CssFlex,\n  CssFlexKeyword,\n  CssLength,\n  UiSpaceName,\n} from './css-values.js';\nexport type {\n  HorizontalAlignment,\n  ListVerticalAlignment,\n  VerticalAlignment,\n} from './flex-alignment.js';\nexport type { Sides } from './sides.js';\n"]}
+{"version":3,"sources":["../src/list.tsx"],"names":[],"mappings":"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","file":"chunk-4FEVHE7C.js","sourcesContent":["import {\n  type CssFlex,\n  type CssFlexKeyword,\n  type CssLength,\n  space,\n  type UiSpaceName,\n} from './css-values.js';\nimport { filterDataAttributes } from './extension-attributes.js';\nimport {\n  type HorizontalAlignment,\n  horizontalAlignment,\n  type ListVerticalAlignment,\n  verticalAlignment,\n} from './flex-alignment.js';\nimport type { KerfUiContent } from './semantic-content.js';\nimport type { Sides } from './sides.js';\n\nconst listProtectedAttributes = new Set([\n  'data-component',\n  'data-gap',\n  'data-flex',\n  'data-fill',\n  'data-h-align',\n  'data-v-align',\n  'data-scrollable',\n  'data-text-insets',\n  'data-control-insets',\n]);\n\ntype ListRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-component'?: never;\n    'data-gap'?: never;\n    'data-flex'?: never;\n    'data-fill'?: never;\n    'data-h-align'?: never;\n    'data-v-align'?: never;\n    'data-scrollable'?: never;\n    'data-text-insets'?: never;\n    'data-control-insets'?: never;\n  }\n>;\n\nconst spaceNames: readonly UiSpaceName[] = [\n  'none',\n  '2xs',\n  'xs',\n  's',\n  'm',\n  'l',\n  'xl',\n];\n\nexport interface ListProps {\n  children?: KerfUiContent;\n  /** Make this list a labeled multi-select grid for `ContentItem selectionMode=\"multiple\"` rows. */\n  selectionMode?: 'multiple';\n  /** Accessible name for the multi-select grid. */\n  ariaLabel?: string;\n  /** Use the standard item gap, a named UI spacing token, or a typed CSS length. Defaults to no gap. */\n  gap?: boolean | UiSpaceName | CssLength;\n  /** Allow this list to grow/shrink, use a keyword, or supply a typed CSS flex shorthand. */\n  flex?: boolean | CssFlexKeyword | CssFlex;\n  /**\n   * Fill the height of a parent with a definite height, such as an app root or\n   * a fixed-height frame, when this list is that parent's layout root. Inside a\n   * flex layout use `flex` instead. Defaults to false.\n   */\n  fill?: boolean;\n  /** Horizontal alignment. Defaults to full to preserve stretch-aligned list children. */\n  hAlign?: HorizontalAlignment;\n  /** Vertical distribution. Defaults to top. */\n  vAlign?: ListVerticalAlignment;\n  /** Own vertical scrolling and overscroll containment. */\n  scrollable?: boolean;\n  /** Physical divider edges in canonical top/right/bottom/left order. */\n  dividerSides?: Sides;\n  /** Physical sides that receive the standard 17px text inset. */\n  textInsets?: Sides;\n  /** Physical sides that receive the standard 8px control inset. Text insets win on overlap. */\n  controlInsets?: Sides;\n  className?: string;\n  /** Safe `data-*` metadata; List-owned structural attributes remain protected. */\n  rootAttributes?: ListRootAttributes;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/**\n * A list's configuration, apart from its content and styling hooks: the props a\n * composite that renders a `List` for the app (the Workbench's `mainHeader` /\n * `mainFooter` chrome) forwards, so the app configures that list instead of\n * styling it. An omitted or `undefined` field keeps the composite's default.\n */\nexport type ListConfig = Pick<\n  ListProps,\n  'gap' | 'hAlign' | 'vAlign' | 'dividerSides' | 'textInsets' | 'controlInsets'\n>;\n\n/** A stretch-aligned vertical stack with optional gap, flex, fill, scroll, and dividers. */\nexport function List({\n  children,\n  selectionMode,\n  ariaLabel,\n  gap = false,\n  flex = false,\n  fill = false,\n  hAlign = 'full',\n  vAlign = 'top',\n  scrollable = false,\n  dividerSides = '',\n  textInsets = '',\n  controlInsets = '',\n  className = '',\n  rootAttributes = {},\n  slot,\n}: ListProps) {\n  if (selectionMode === 'multiple' && !ariaLabel) {\n    throw new Error('Multi-select List requires an ariaLabel');\n  }\n  const safeRootAttributes = filterDataAttributes(\n    rootAttributes,\n    listProtectedAttributes,\n  );\n  const gapValue =\n    gap === true\n      ? 'var(--kui-list-gap)'\n      : spaceNames.includes(gap as UiSpaceName)\n        ? space(gap as UiSpaceName)\n        : gap || undefined;\n  const flexValue = flex === true ? '1 1 auto' : flex || undefined;\n  const style = [\n    gapValue ? `--_kui-list-gap:${gapValue}` : '',\n    flexValue ? `--_kui-list-flex:${flexValue}` : '',\n  ]\n    .filter(Boolean)\n    .join(';');\n\n  return (\n    <div\n      {...safeRootAttributes}\n      class={`kui-list ${className}`.trim()}\n      data-component=\"list\"\n      role={selectionMode === 'multiple' ? 'grid' : undefined}\n      aria-label={selectionMode === 'multiple' ? ariaLabel : undefined}\n      aria-multiselectable={selectionMode === 'multiple' ? 'true' : undefined}\n      data-gap={String(Boolean(gap))}\n      data-flex={String(Boolean(flex))}\n      data-fill={fill ? 'true' : undefined}\n      data-h-align={horizontalAlignment(hAlign)}\n      data-v-align={verticalAlignment(vAlign)}\n      data-scrollable={String(scrollable)}\n      divider-sides={dividerSides || undefined}\n      data-text-insets={textInsets || undefined}\n      data-control-insets={controlInsets || undefined}\n      style={style || undefined}\n      slot={slot}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport type {\n  CssFlex,\n  CssFlexKeyword,\n  CssLength,\n  UiSpaceName,\n} from './css-values.js';\nexport type {\n  HorizontalAlignment,\n  ListVerticalAlignment,\n  VerticalAlignment,\n} from './flex-alignment.js';\nexport type { Sides } from './sides.js';\n"]}

package/dist/{chunk-2IGHGE3M.js → chunk-5TTZPGUY.js}

@@ -1,7 +1,7 @@
-import { Skeleton } from './chunk-TT5ROTQK.js';
+import { Skeleton } from './chunk-JGIV6ZDA.js';
 import { Badge } from './chunk-ALGYHYXP.js';
-import { LucideIcon } from './chunk-WTSNV5RG.js';
-import { em } from './chunk-2G2ZJQYK.js';
+import { LucideIcon } from './chunk-DUBUXJA3.js';
+import { em } from './chunk-RFGW735Q.js';
 import { jsxs, jsx, Fragment } from 'kerfjs/jsx-runtime';
 
 function SelectChevron() {
@@ -219,4 +219,4 @@ function Select(props) {
 
 export { Select };
 
-//# sourceMappingURL=chunk-2IGHGE3M.js.map
+//# sourceMappingURL=chunk-5TTZPGUY.js.map

package/dist/{chunk-2IGHGE3M.js.map → chunk-5TTZPGUY.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/select.tsx"],"names":[],"mappings":"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","file":"chunk-2IGHGE3M.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport { Badge } from './badge.js';\nimport { type CssForegroundColor, em } from './css-values.js';\nimport { LucideIcon, type LucideNode } from './lucide-icon.js';\nimport type { KerfUiContent } from './semantic-content.js';\nimport { Skeleton } from './skeleton.js';\n\nexport interface SelectChoice<Value extends string = string> {\n  value: Value;\n  label: string;\n  icon?: LucideNode;\n  iconName?: string;\n  /**\n   * Foreground color for the optional icon: a semantic foreground token such\n   * as `uiColor('success-on-quiet')`, or an application-owned\n   * `foregroundColorVar('--app-icon-color')`. Fill tokens such as\n   * `uiColor('success-fill-quiet')` are pale background tints and do not\n   * type-check.\n   */\n  color?: CssForegroundColor;\n  group?: string;\n  /** Keep an unavailable choice visible but prevent selection. */\n  disabled?: boolean;\n  /** Optional explanation exposed as the disabled option's native tooltip. */\n  disabledReason?: string;\n  /**\n   * Draw a divider between this choice and the previous choice in the same\n   * list. A group boundary is already a separator, so the first choice of a\n   * group (or of the whole menu) never draws a second one.\n   */\n  separatorBefore?: boolean;\n}\n\ntype SelectAccessibleName =\n  { label: string; ariaLabel?: string } | { label?: never; ariaLabel: string };\n\nexport type SelectPresentation =\n  'form' | 'toolbar-borderless' | 'navigation' | 'inline' | 'title';\nexport type SelectSize = 'default' | 'compact';\nexport type SelectSelectedPresentation = 'label' | 'icon-only';\nexport type SelectFocusRingOwner = 'select' | 'group';\nexport type SelectTriggerWidth = 'fit-content' | 'max-content' | 'fill';\n\ninterface SelectBaseProps<Value extends string = string> {\n  name: string;\n  choices: readonly SelectChoice<Value>[];\n  className?: string;\n  /** Empty-value hint text shown in the closed control (the native select placeholder). */\n  placeholderText?: string;\n  /** Supporting text shown below the control and associated with its combobox. */\n  hint?: string;\n  disabled?: boolean;\n  fitMenu?: boolean;\n  /** Render as an unanimated loading skeleton: the label above a static, empty control box. */\n  placeholder?: boolean;\n  /** Form (default), borderless toolbar, intrinsic navigation, inline, or view-title chrome. */\n  presentation?: SelectPresentation;\n  size?: SelectSize;\n  /** Closed trigger width; omit to keep the presentation's default. */\n  triggerWidth?: SelectTriggerWidth;\n  /** Show the disclosure caret (default); omit it for a compact icon-only trigger. */\n  caret?: boolean;\n  /** Let an enclosing ToolbarControlGroup paint the composed focus ring. */\n  focusRingOwner?: SelectFocusRingOwner;\n  /** Keep the trigger's focus ring inside its box when an ancestor clips overflow. */\n  focusRingInset?: boolean;\n  /** Maximum closed-control label width in CSS pixels before ellipsis. */\n  labelMaxWidth?: number;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/** One chosen value (the default). */\nexport interface SelectSingleValueProps<Value extends string = string> {\n  multiple?: false;\n  value: NoInfer<Value>;\n  renderSelected?: (choice: SelectChoice<Value>) => SafeHtml;\n  /** Show only the selected choice icon while retaining the Select's accessible name. */\n  selectedPresentation?: SelectSelectedPresentation;\n  triggerIcon?: never;\n  selectAllLabel?: never;\n  clearLabel?: never;\n}\n\n/**\n * Any number of chosen values. The popup stays open while the person toggles\n * choices and closes on an outside click, Escape, or focus leaving; the closed\n * control summarizes the chosen labels in choice order.\n */\nexport interface SelectMultipleLabelProps<Value extends string = string> {\n  multiple: true;\n  value: readonly NoInfer<Value>[];\n  renderSelected?: never;\n  selectedPresentation?: 'label';\n  triggerIcon?: never;\n  /** Opt in to a footer action that selects every enabled choice. */\n  selectAllLabel?: string;\n  /** Opt in to a footer action that clears the current selection. */\n  clearLabel?: string;\n}\n\n/**\n * A multiple Select drawn as an icon-only toolbar trigger, such as a\n * \"Filter by label\" funnel. No single choice is selected, so the trigger shows\n * a fixed `triggerIcon` naming the menu's purpose; while any choice is chosen\n * a count badge sits beside it, and the combobox's accessible name ends with\n * the chosen labels in choice order.\n */\nexport interface SelectMultipleIconProps<Value extends string = string> {\n  multiple: true;\n  value: readonly NoInfer<Value>[];\n  renderSelected?: never;\n  selectedPresentation: 'icon-only';\n  /**\n   * The trigger's fixed icon, typically a `LucideIcon` naming the menu's\n   * purpose (a funnel for a filter), independent of the selection.\n   */\n  triggerIcon: KerfUiContent;\n  /** Opt in to a footer action that selects every enabled choice. */\n  selectAllLabel?: string;\n  /** Opt in to a footer action that clears the current selection. */\n  clearLabel?: string;\n}\n\nexport type SelectMultipleValueProps<Value extends string = string> =\n  SelectMultipleLabelProps<Value> | SelectMultipleIconProps<Value>;\n\nexport type SelectProps<Value extends string = string> =\n  SelectBaseProps<Value> &\n    SelectAccessibleName &\n    (SelectSingleValueProps<Value> | SelectMultipleValueProps<Value>);\n\n// The closed wa-select's disclosure glyph: Web Awesome's system `chevron-down`,\n// Font Awesome Free 7.0.0 by @fontawesome (https://fontawesome.com), licensed\n// CC BY 4.0 (https://fontawesome.com/license/free). The placeholder draws the\n// same path so the loading box matches the live control without registering\n// Web Awesome.\nfunction SelectChevron() {\n  return (\n    <svg viewBox=\"0 0 448 512\" aria-hidden=\"true\">\n      <path d=\"M201.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 338.7 54.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z\" />\n    </svg>\n  );\n}\n\nexport function Select<Value extends string>(props: SelectProps<Value>) {\n  const {\n    name,\n    label,\n    ariaLabel,\n    choices,\n    className = '',\n    placeholderText,\n    hint,\n    disabled = false,\n    fitMenu = false,\n    placeholder = false,\n    presentation = 'form',\n    size = 'default',\n    triggerWidth,\n    caret = true,\n    focusRingOwner = 'select',\n    focusRingInset = false,\n    labelMaxWidth,\n    slot,\n  } = props;\n  const multiple = props.multiple === true;\n  const values: readonly Value[] = props.multiple ? props.value : [props.value];\n  const renderSelected = props.multiple ? undefined : props.renderSelected;\n  const selectedPresentation: SelectSelectedPresentation =\n    props.selectedPresentation ?? 'label';\n  // A multiple icon-only trigger shows a fixed icon naming the menu's\n  // purpose instead of a selected choice's icon.\n  const iconTrigger =\n    props.multiple && props.selectedPresentation === 'icon-only';\n  const triggerIcon = iconTrigger ? props.triggerIcon : undefined;\n  if (placeholder) {\n    return (\n      <div\n        class={`kui-select kui-select--placeholder ${className}`.trim()}\n        data-component=\"select\"\n        data-placeholder=\"true\"\n        data-presentation={presentation}\n        data-size={size}\n        data-trigger-width={triggerWidth}\n        data-caret={caret ? undefined : 'false'}\n        data-selected-presentation={selectedPresentation}\n        data-focus-ring-owner={focusRingOwner}\n        data-focus-ring-inset={focusRingInset ? 'true' : undefined}\n        aria-busy=\"true\"\n        style={\n          labelMaxWidth === undefined\n            ? undefined\n            : `--kui-select-label-max-width:${labelMaxWidth}px`\n        }\n        slot={slot}\n      >\n        {label && <span class=\"kui-select__placeholder-label\">{label}</span>}\n        <span\n          class=\"kui-select__placeholder-box\"\n          aria-label={ariaLabel}\n          role=\"img\"\n        >\n          <Skeleton width={em(10)} />\n          <span class=\"kui-select__placeholder-chevron\" aria-hidden=\"true\">\n            <SelectChevron />\n          </span>\n        </span>\n        {hint && <span class=\"kui-select__placeholder-hint\">{hint}</span>}\n      </div>\n    );\n  }\n  // A multiple Select summarizes its choices in the display text instead of\n  // leading with one selected icon.\n  const selected = multiple\n    ? undefined\n    : choices.find((choice) => choice.value === values[0] && !choice.disabled);\n  const chosenCount = iconTrigger\n    ? choices.filter(\n        (choice) => !choice.disabled && values.includes(choice.value),\n      ).length\n    : 0;\n  const icon = (choice: SelectChoice<Value>, selectedIcon = false) => (\n    <span\n      data-key={`${name}:${choice.value}:${selectedIcon ? 'selected' : 'option'}`}\n      data-morph-skip\n      slot=\"start\"\n      class={`kui-select__icon${selectedIcon ? ' kui-select__icon--selected' : ''}`}\n      style={choice.color ? `color:${choice.color}` : undefined}\n    >\n      {choice.icon ? (\n        <LucideIcon\n          icon={choice.icon}\n          name={\n            choice.iconName ?? choice.label.toLowerCase().replaceAll(' ', '-')\n          }\n        />\n      ) : null}\n    </span>\n  );\n  const option = (choice: SelectChoice<Value>, index: number) => (\n    <>\n      {/* Web Awesome sets the divider's role and aria-orientation on its\n          host once, so a template that omits them would lose them to the\n          next kerf re-render's morph for good. Render them explicitly, with\n          the orientation it reflects (see the wa-select note below). */}\n      {choice.separatorBefore && index > 0 && (\n        <wa-divider\n          orientation=\"horizontal\"\n          role=\"separator\"\n          aria-orientation=\"horizontal\"\n        />\n      )}\n      <wa-option\n        value={choice.value}\n        selected={multiple && !choice.disabled && values.includes(choice.value)}\n        disabled={choice.disabled}\n        title={choice.disabled ? choice.disabledReason : undefined}\n      >\n        {choice.icon ? icon(choice) : null}\n        {choice.label}\n      </wa-option>\n    </>\n  );\n  const groups = [\n    ...new Set(\n      choices\n        .map((choice) => choice.group)\n        .filter((group): group is string => Boolean(group)),\n    ),\n  ];\n  const ungrouped = choices.filter((choice) => !choice.group);\n  // Web Awesome names its shadow combobox from the label, not the host's\n  // aria-label. Keep ariaLabel-only names available without visible chrome.\n  // A multiple Select's value is its selected options (the value attribute\n  // holds only one string), kept in sync by @kerfjs/ui/select/register.\n  // size/appearance/placement are Web Awesome's defaults, which it reflects\n  // onto the host; rendering them keeps a re-render's morph from stripping\n  // them and forcing a Lit update to put them back.\n  return (\n    <wa-select\n      size=\"m\"\n      appearance=\"outlined\"\n      placement=\"bottom\"\n      class={`kui-select${renderSelected ? ' kui-select--custom-selected' : ''}${fitMenu ? ' kui-select--fit-menu' : ''}${!label ? ' kui-select--label-hidden' : ''} ${className}`.trim()}\n      data-component=\"select\"\n      data-presentation={presentation}\n      data-size={size}\n      data-trigger-width={triggerWidth}\n      data-caret={caret ? undefined : 'false'}\n      data-selected-presentation={selectedPresentation}\n      data-focus-ring-owner={focusRingOwner}\n      data-focus-ring-inset={focusRingInset ? 'true' : undefined}\n      name={name}\n      label={label || ariaLabel}\n      aria-label={ariaLabel}\n      multiple={multiple}\n      value={multiple ? undefined : values[0]}\n      placeholder={placeholderText}\n      hint={hint}\n      disabled={disabled}\n      style={\n        labelMaxWidth === undefined\n          ? undefined\n          : `--kui-select-label-max-width:${labelMaxWidth}px`\n      }\n      slot={slot}\n    >\n      {iconTrigger && (\n        <>\n          {/* The accessible name ends with the chosen labels, which\n              @kerfjs/ui/select/register writes into the summary. */}\n          <span slot=\"label\" data-key={`${name}:trigger-label`}>\n            {label || ariaLabel}\n            <span class=\"kui-select__name-summary\" data-morph-skip />\n          </span>\n          <span\n            data-key={`${name}:trigger-icon`}\n            slot=\"start\"\n            class=\"kui-select__icon kui-select__icon--selected kui-select__trigger-icon\"\n          >\n            {triggerIcon}\n          </span>\n          {chosenCount > 0 && (\n            <Badge slot=\"end\" tone=\"brand\" size=\"compact\" ariaHidden>\n              {chosenCount}\n            </Badge>\n          )}\n        </>\n      )}\n      {selected &&\n        (renderSelected ? (\n          <span\n            data-key={`${name}:${values[0]}:custom-selected`}\n            slot=\"start\"\n            class=\"kui-select__custom-selected\"\n          >\n            <span class=\"kui-select__custom-selected-content\">\n              {renderSelected(selected)}\n            </span>\n          </span>\n        ) : selected.icon ? (\n          icon(selected, true)\n        ) : null)}\n      {ungrouped.map(option)}\n      {groups.map((group, index) => (\n        <div\n          class={`kui-select__group${index > 0 || ungrouped.length > 0 ? ' kui-select__group--separated' : ''}`}\n          role=\"group\"\n          aria-label={group}\n        >\n          <span class=\"kui-select__group-title\">{group}</span>\n          {choices.filter((choice) => choice.group === group).map(option)}\n        </div>\n      ))}\n      {props.multiple && (props.selectAllLabel || props.clearLabel) && (\n        <div\n          class=\"kui-select__actions\"\n          role=\"group\"\n          aria-label={label || ariaLabel}\n        >\n          {props.selectAllLabel && (\n            <button\n              class=\"kui-select__action\"\n              type=\"button\"\n              data-select-action=\"all\"\n            >\n              {props.selectAllLabel}\n            </button>\n          )}\n          {props.clearLabel && (\n            <button\n              class=\"kui-select__action\"\n              type=\"button\"\n              data-select-action=\"clear\"\n            >\n              {props.clearLabel}\n            </button>\n          )}\n        </div>\n      )}\n    </wa-select>\n  );\n}\n"]}
+{"version":3,"sources":["../src/select.tsx"],"names":[],"mappings":"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","file":"chunk-5TTZPGUY.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport { Badge } from './badge.js';\nimport { type CssForegroundColor, em } from './css-values.js';\nimport { LucideIcon, type LucideNode } from './lucide-icon.js';\nimport type { KerfUiContent } from './semantic-content.js';\nimport { Skeleton } from './skeleton.js';\n\nexport interface SelectChoice<Value extends string = string> {\n  value: Value;\n  label: string;\n  icon?: LucideNode;\n  iconName?: string;\n  /**\n   * Foreground color for the optional icon: a semantic foreground token such\n   * as `uiColor('success-on-quiet')`, or an application-owned\n   * `foregroundColorVar('--app-icon-color')`. Fill tokens such as\n   * `uiColor('success-fill-quiet')` are pale background tints and do not\n   * type-check.\n   */\n  color?: CssForegroundColor;\n  group?: string;\n  /** Keep an unavailable choice visible but prevent selection. */\n  disabled?: boolean;\n  /** Optional explanation exposed as the disabled option's native tooltip. */\n  disabledReason?: string;\n  /**\n   * Draw a divider between this choice and the previous choice in the same\n   * list. A group boundary is already a separator, so the first choice of a\n   * group (or of the whole menu) never draws a second one.\n   */\n  separatorBefore?: boolean;\n}\n\ntype SelectAccessibleName =\n  { label: string; ariaLabel?: string } | { label?: never; ariaLabel: string };\n\nexport type SelectPresentation =\n  'form' | 'toolbar-borderless' | 'navigation' | 'inline' | 'title';\nexport type SelectSize = 'default' | 'compact';\nexport type SelectSelectedPresentation = 'label' | 'icon-only';\nexport type SelectFocusRingOwner = 'select' | 'group';\nexport type SelectTriggerWidth = 'fit-content' | 'max-content' | 'fill';\n\ninterface SelectBaseProps<Value extends string = string> {\n  name: string;\n  choices: readonly SelectChoice<Value>[];\n  className?: string;\n  /** Empty-value hint text shown in the closed control (the native select placeholder). */\n  placeholderText?: string;\n  /** Supporting text shown below the control and associated with its combobox. */\n  hint?: string;\n  disabled?: boolean;\n  fitMenu?: boolean;\n  /** Render as an unanimated loading skeleton: the label above a static, empty control box. */\n  placeholder?: boolean;\n  /** Form (default), borderless toolbar, intrinsic navigation, inline, or view-title chrome. */\n  presentation?: SelectPresentation;\n  size?: SelectSize;\n  /** Closed trigger width; omit to keep the presentation's default. */\n  triggerWidth?: SelectTriggerWidth;\n  /** Show the disclosure caret (default); omit it for a compact icon-only trigger. */\n  caret?: boolean;\n  /** Let an enclosing ToolbarControlGroup paint the composed focus ring. */\n  focusRingOwner?: SelectFocusRingOwner;\n  /** Keep the trigger's focus ring inside its box when an ancestor clips overflow. */\n  focusRingInset?: boolean;\n  /** Maximum closed-control label width in CSS pixels before ellipsis. */\n  labelMaxWidth?: number;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/** One chosen value (the default). */\nexport interface SelectSingleValueProps<Value extends string = string> {\n  multiple?: false;\n  value: NoInfer<Value>;\n  renderSelected?: (choice: SelectChoice<Value>) => SafeHtml;\n  /** Show only the selected choice icon while retaining the Select's accessible name. */\n  selectedPresentation?: SelectSelectedPresentation;\n  triggerIcon?: never;\n  selectAllLabel?: never;\n  clearLabel?: never;\n}\n\n/**\n * Any number of chosen values. The popup stays open while the person toggles\n * choices and closes on an outside click, Escape, or focus leaving; the closed\n * control summarizes the chosen labels in choice order.\n */\nexport interface SelectMultipleLabelProps<Value extends string = string> {\n  multiple: true;\n  value: readonly NoInfer<Value>[];\n  renderSelected?: never;\n  selectedPresentation?: 'label';\n  triggerIcon?: never;\n  /** Opt in to a footer action that selects every enabled choice. */\n  selectAllLabel?: string;\n  /** Opt in to a footer action that clears the current selection. */\n  clearLabel?: string;\n}\n\n/**\n * A multiple Select drawn as an icon-only toolbar trigger, such as a\n * \"Filter by label\" funnel. No single choice is selected, so the trigger shows\n * a fixed `triggerIcon` naming the menu's purpose; while any choice is chosen\n * a count badge sits beside it, and the combobox's accessible name ends with\n * the chosen labels in choice order.\n */\nexport interface SelectMultipleIconProps<Value extends string = string> {\n  multiple: true;\n  value: readonly NoInfer<Value>[];\n  renderSelected?: never;\n  selectedPresentation: 'icon-only';\n  /**\n   * The trigger's fixed icon, typically a `LucideIcon` naming the menu's\n   * purpose (a funnel for a filter), independent of the selection.\n   */\n  triggerIcon: KerfUiContent;\n  /** Opt in to a footer action that selects every enabled choice. */\n  selectAllLabel?: string;\n  /** Opt in to a footer action that clears the current selection. */\n  clearLabel?: string;\n}\n\nexport type SelectMultipleValueProps<Value extends string = string> =\n  SelectMultipleLabelProps<Value> | SelectMultipleIconProps<Value>;\n\nexport type SelectProps<Value extends string = string> =\n  SelectBaseProps<Value> &\n    SelectAccessibleName &\n    (SelectSingleValueProps<Value> | SelectMultipleValueProps<Value>);\n\n// The closed wa-select's disclosure glyph: Web Awesome's system `chevron-down`,\n// Font Awesome Free 7.0.0 by @fontawesome (https://fontawesome.com), licensed\n// CC BY 4.0 (https://fontawesome.com/license/free). The placeholder draws the\n// same path so the loading box matches the live control without registering\n// Web Awesome.\nfunction SelectChevron() {\n  return (\n    <svg viewBox=\"0 0 448 512\" aria-hidden=\"true\">\n      <path d=\"M201.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 338.7 54.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z\" />\n    </svg>\n  );\n}\n\nexport function Select<Value extends string>(props: SelectProps<Value>) {\n  const {\n    name,\n    label,\n    ariaLabel,\n    choices,\n    className = '',\n    placeholderText,\n    hint,\n    disabled = false,\n    fitMenu = false,\n    placeholder = false,\n    presentation = 'form',\n    size = 'default',\n    triggerWidth,\n    caret = true,\n    focusRingOwner = 'select',\n    focusRingInset = false,\n    labelMaxWidth,\n    slot,\n  } = props;\n  const multiple = props.multiple === true;\n  const values: readonly Value[] = props.multiple ? props.value : [props.value];\n  const renderSelected = props.multiple ? undefined : props.renderSelected;\n  const selectedPresentation: SelectSelectedPresentation =\n    props.selectedPresentation ?? 'label';\n  // A multiple icon-only trigger shows a fixed icon naming the menu's\n  // purpose instead of a selected choice's icon.\n  const iconTrigger =\n    props.multiple && props.selectedPresentation === 'icon-only';\n  const triggerIcon = iconTrigger ? props.triggerIcon : undefined;\n  if (placeholder) {\n    return (\n      <div\n        class={`kui-select kui-select--placeholder ${className}`.trim()}\n        data-component=\"select\"\n        data-placeholder=\"true\"\n        data-presentation={presentation}\n        data-size={size}\n        data-trigger-width={triggerWidth}\n        data-caret={caret ? undefined : 'false'}\n        data-selected-presentation={selectedPresentation}\n        data-focus-ring-owner={focusRingOwner}\n        data-focus-ring-inset={focusRingInset ? 'true' : undefined}\n        aria-busy=\"true\"\n        style={\n          labelMaxWidth === undefined\n            ? undefined\n            : `--kui-select-label-max-width:${labelMaxWidth}px`\n        }\n        slot={slot}\n      >\n        {label && <span class=\"kui-select__placeholder-label\">{label}</span>}\n        <span\n          class=\"kui-select__placeholder-box\"\n          aria-label={ariaLabel}\n          role=\"img\"\n        >\n          <Skeleton width={em(10)} />\n          <span class=\"kui-select__placeholder-chevron\" aria-hidden=\"true\">\n            <SelectChevron />\n          </span>\n        </span>\n        {hint && <span class=\"kui-select__placeholder-hint\">{hint}</span>}\n      </div>\n    );\n  }\n  // A multiple Select summarizes its choices in the display text instead of\n  // leading with one selected icon.\n  const selected = multiple\n    ? undefined\n    : choices.find((choice) => choice.value === values[0] && !choice.disabled);\n  const chosenCount = iconTrigger\n    ? choices.filter(\n        (choice) => !choice.disabled && values.includes(choice.value),\n      ).length\n    : 0;\n  const icon = (choice: SelectChoice<Value>, selectedIcon = false) => (\n    <span\n      data-key={`${name}:${choice.value}:${selectedIcon ? 'selected' : 'option'}`}\n      data-morph-skip\n      slot=\"start\"\n      class={`kui-select__icon${selectedIcon ? ' kui-select__icon--selected' : ''}`}\n      style={choice.color ? `color:${choice.color}` : undefined}\n    >\n      {choice.icon ? (\n        <LucideIcon\n          icon={choice.icon}\n          name={\n            choice.iconName ?? choice.label.toLowerCase().replaceAll(' ', '-')\n          }\n        />\n      ) : null}\n    </span>\n  );\n  const option = (choice: SelectChoice<Value>, index: number) => (\n    <>\n      {/* Web Awesome sets the divider's role and aria-orientation on its\n          host once, so a template that omits them would lose them to the\n          next kerf re-render's morph for good. Render them explicitly, with\n          the orientation it reflects (see the wa-select note below). */}\n      {choice.separatorBefore && index > 0 && (\n        <wa-divider\n          orientation=\"horizontal\"\n          role=\"separator\"\n          aria-orientation=\"horizontal\"\n        />\n      )}\n      <wa-option\n        value={choice.value}\n        selected={multiple && !choice.disabled && values.includes(choice.value)}\n        disabled={choice.disabled}\n        title={choice.disabled ? choice.disabledReason : undefined}\n      >\n        {choice.icon ? icon(choice) : null}\n        {choice.label}\n      </wa-option>\n    </>\n  );\n  const groups = [\n    ...new Set(\n      choices\n        .map((choice) => choice.group)\n        .filter((group): group is string => Boolean(group)),\n    ),\n  ];\n  const ungrouped = choices.filter((choice) => !choice.group);\n  // Web Awesome names its shadow combobox from the label, not the host's\n  // aria-label. Keep ariaLabel-only names available without visible chrome.\n  // A multiple Select's value is its selected options (the value attribute\n  // holds only one string), kept in sync by @kerfjs/ui/select/register.\n  // size/appearance/placement are Web Awesome's defaults, which it reflects\n  // onto the host; rendering them keeps a re-render's morph from stripping\n  // them and forcing a Lit update to put them back.\n  return (\n    <wa-select\n      size=\"m\"\n      appearance=\"outlined\"\n      placement=\"bottom\"\n      class={`kui-select${renderSelected ? ' kui-select--custom-selected' : ''}${fitMenu ? ' kui-select--fit-menu' : ''}${!label ? ' kui-select--label-hidden' : ''} ${className}`.trim()}\n      data-component=\"select\"\n      data-presentation={presentation}\n      data-size={size}\n      data-trigger-width={triggerWidth}\n      data-caret={caret ? undefined : 'false'}\n      data-selected-presentation={selectedPresentation}\n      data-focus-ring-owner={focusRingOwner}\n      data-focus-ring-inset={focusRingInset ? 'true' : undefined}\n      name={name}\n      label={label || ariaLabel}\n      aria-label={ariaLabel}\n      multiple={multiple}\n      value={multiple ? undefined : values[0]}\n      placeholder={placeholderText}\n      hint={hint}\n      disabled={disabled}\n      style={\n        labelMaxWidth === undefined\n          ? undefined\n          : `--kui-select-label-max-width:${labelMaxWidth}px`\n      }\n      slot={slot}\n    >\n      {iconTrigger && (\n        <>\n          {/* The accessible name ends with the chosen labels, which\n              @kerfjs/ui/select/register writes into the summary. */}\n          <span slot=\"label\" data-key={`${name}:trigger-label`}>\n            {label || ariaLabel}\n            <span class=\"kui-select__name-summary\" data-morph-skip />\n          </span>\n          <span\n            data-key={`${name}:trigger-icon`}\n            slot=\"start\"\n            class=\"kui-select__icon kui-select__icon--selected kui-select__trigger-icon\"\n          >\n            {triggerIcon}\n          </span>\n          {chosenCount > 0 && (\n            <Badge slot=\"end\" tone=\"brand\" size=\"compact\" ariaHidden>\n              {chosenCount}\n            </Badge>\n          )}\n        </>\n      )}\n      {selected &&\n        (renderSelected ? (\n          <span\n            data-key={`${name}:${values[0]}:custom-selected`}\n            slot=\"start\"\n            class=\"kui-select__custom-selected\"\n          >\n            <span class=\"kui-select__custom-selected-content\">\n              {renderSelected(selected)}\n            </span>\n          </span>\n        ) : selected.icon ? (\n          icon(selected, true)\n        ) : null)}\n      {ungrouped.map(option)}\n      {groups.map((group, index) => (\n        <div\n          class={`kui-select__group${index > 0 || ungrouped.length > 0 ? ' kui-select__group--separated' : ''}`}\n          role=\"group\"\n          aria-label={group}\n        >\n          <span class=\"kui-select__group-title\">{group}</span>\n          {choices.filter((choice) => choice.group === group).map(option)}\n        </div>\n      ))}\n      {props.multiple && (props.selectAllLabel || props.clearLabel) && (\n        <div\n          class=\"kui-select__actions\"\n          role=\"group\"\n          aria-label={label || ariaLabel}\n        >\n          {props.selectAllLabel && (\n            <button\n              class=\"kui-select__action\"\n              type=\"button\"\n              data-select-action=\"all\"\n            >\n              {props.selectAllLabel}\n            </button>\n          )}\n          {props.clearLabel && (\n            <button\n              class=\"kui-select__action\"\n              type=\"button\"\n              data-select-action=\"clear\"\n            >\n              {props.clearLabel}\n            </button>\n          )}\n        </div>\n      )}\n    </wa-select>\n  );\n}\n"]}

package/dist/{chunk-RT5WKYX3.js → chunk-5UGLKFBF.js}

@@ -1,6 +1,6 @@
-import { Skeleton } from './chunk-TT5ROTQK.js';
+import { Skeleton } from './chunk-JGIV6ZDA.js';
 import { Badge } from './chunk-ALGYHYXP.js';
-import { em } from './chunk-2G2ZJQYK.js';
+import { em } from './chunk-RFGW735Q.js';
 import { jsxs, jsx } from 'kerfjs/jsx-runtime';
 
 function StateBanner({
@@ -46,4 +46,4 @@ function StateBanner({
 
 export { StateBanner };
 
-//# sourceMappingURL=chunk-RT5WKYX3.js.map
+//# sourceMappingURL=chunk-5UGLKFBF.js.map

package/dist/{chunk-RT5WKYX3.js.map → chunk-5UGLKFBF.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/state-banner.tsx"],"names":[],"mappings":";;;;;AAiCO,SAAS,WAAA,CAAY;AAAA,EAC1B,KAAA;AAAA,EACA,MAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA;AAAA,EACA,MAAA;AAAA,EACA,IAAA,GAAO,MAAA;AAAA,EACP,OAAA,GAAU,QAAA;AAAA,EACV,UAAA,GAAa,QAAA;AAAA,EACb,eAAA,GAAkB,UAAA;AAAA,EAClB,SAAA,GAAY,EAAA;AAAA,EACZ,WAAA,GAAc,KAAA;AAAA,EACd;AACF,CAAA,EAAqB;AACnB,EAAA,MAAM,SAAA,GAAY,IAAA,KAAS,MAAA,GAAS,OAAA,GAAU,IAAA;AAC9C,EAAA,uBACE,IAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,iBAAA,EAAoB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAC5C,gBAAA,EAAe,cAAA;AAAA,MACf,WAAA,EAAW,IAAA;AAAA,MACX,kBAAA,EAAkB,UAAA;AAAA,MAClB,uBAAA,EAAuB,eAAA;AAAA,MACvB,kBAAA,EAAkB,cAAc,MAAA,GAAS,MAAA;AAAA,MACzC,IAAA,EAAM,OAAA;AAAA,MACN,WAAA,EAAW,OAAA,KAAY,OAAA,GAAU,WAAA,GAAc,QAAA;AAAA,MAC/C,WAAA,EAAW,cAAc,MAAA,GAAS,MAAA;AAAA,MAClC,IAAA;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,IAAA,oBAAQ,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,wBAAA,EAA0B,QAAA,EAAA,IAAA,EAAK,CAAA;AAAA,wBACpD,IAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,wBAAA,EACT,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,QAAA,EAAA,EAAQ,wCAAc,GAAA,CAAC,QAAA,EAAA,EAAS,OAAO,EAAA,CAAG,EAAE,CAAA,EAAG,CAAA,GAAK,KAAA,EAAM,CAAA;AAAA,UAC1D,yBACC,GAAA,CAAC,KAAA,EAAA,EAAM,UAAA,EAAW,OAAA,EAAQ,MAAK,SAAA,EAAU,IAAA,EAAM,SAAA,EAC5C,QAAA,EAAA,WAAA,uBAAe,QAAA,EAAA,EAAS,KAAA,EAAO,GAAG,IAAI,CAAA,EAAG,IAAK,KAAA,EACjD,CAAA;AAAA,UAED,0BACC,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,0BAAA,EACV,8BAAC,MAAA,EAAA,EAAM,QAAA,EAAA,WAAA,mBAAc,GAAA,CAAC,QAAA,EAAA,EAAS,OAAO,EAAA,CAAG,EAAE,CAAA,EAAG,CAAA,GAAK,QAAO,CAAA,EAC5D;AAAA,SAAA,EAEJ,CAAA;AAAA,QACC,MAAA,oBAAU,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,4BAA4B,QAAA,EAAA,MAAA,EAAO;AAAA;AAAA;AAAA,GAC3D;AAEJ","file":"chunk-RT5WKYX3.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport { Badge } from './badge.js';\nimport { em } from './css-values.js';\nimport type { KerfUiContent } from './semantic-content.js';\nimport { Skeleton } from './skeleton.js';\n\nexport type StateBannerTone =\n  'neutral' | 'info' | 'pop' | 'success' | 'warning' | 'danger';\nexport type StateBannerUrgency = 'status' | 'alert';\nexport type StateBannerCopyLayout = 'inline' | 'stacked';\nexport type StateBannerActionPlacement = 'trailing' | 'below';\n\nexport interface StateBannerProps {\n  title: string;\n  detail?: string;\n  /** Optional compact status or count shown beside the title. */\n  badge?: string;\n  icon?: SafeHtml;\n  action?: KerfUiContent;\n  tone?: StateBannerTone;\n  urgency?: StateBannerUrgency;\n  /** Keep the detail beside the title, or give it its own line. */\n  copyLayout?: StateBannerCopyLayout;\n  /** Place the action beside the copy or on a separate trailing row. */\n  actionPlacement?: StateBannerActionPlacement;\n  className?: string;\n  /** Render the title, badge, and detail as unanimated loading skeletons, keeping the icon and tone. The detail line appears only when `detail` is set, as in the live banner. */\n  placeholder?: boolean;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\nexport function StateBanner({\n  title,\n  detail,\n  badge,\n  icon,\n  action,\n  tone = 'info',\n  urgency = 'status',\n  copyLayout = 'inline',\n  actionPlacement = 'trailing',\n  className = '',\n  placeholder = false,\n  slot,\n}: StateBannerProps) {\n  const badgeTone = tone === 'info' ? 'brand' : tone;\n  return (\n    <section\n      class={`kui-state-banner ${className}`.trim()}\n      data-component=\"state-banner\"\n      data-tone={tone}\n      data-copy-layout={copyLayout}\n      data-action-placement={actionPlacement}\n      data-placeholder={placeholder ? 'true' : undefined}\n      role={urgency}\n      aria-live={urgency === 'alert' ? 'assertive' : 'polite'}\n      aria-busy={placeholder ? 'true' : undefined}\n      slot={slot}\n    >\n      {icon && <span class=\"kui-state-banner__icon\">{icon}</span>}\n      <div class=\"kui-state-banner__copy\">\n        <strong>{placeholder ? <Skeleton width={em(10)} /> : title}</strong>\n        {badge && (\n          <Badge appearance=\"solid\" size=\"compact\" tone={badgeTone}>\n            {placeholder ? <Skeleton width={em(1.75)} /> : badge}\n          </Badge>\n        )}\n        {detail && (\n          <span class=\"kui-state-banner__detail\">\n            <span>{placeholder ? <Skeleton width={em(16)} /> : detail}</span>\n          </span>\n        )}\n      </div>\n      {action && <div class=\"kui-state-banner__action\">{action}</div>}\n    </section>\n  );\n}\n"]}
+{"version":3,"sources":["../src/state-banner.tsx"],"names":[],"mappings":";;;;;AAiCO,SAAS,WAAA,CAAY;AAAA,EAC1B,KAAA;AAAA,EACA,MAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA;AAAA,EACA,MAAA;AAAA,EACA,IAAA,GAAO,MAAA;AAAA,EACP,OAAA,GAAU,QAAA;AAAA,EACV,UAAA,GAAa,QAAA;AAAA,EACb,eAAA,GAAkB,UAAA;AAAA,EAClB,SAAA,GAAY,EAAA;AAAA,EACZ,WAAA,GAAc,KAAA;AAAA,EACd;AACF,CAAA,EAAqB;AACnB,EAAA,MAAM,SAAA,GAAY,IAAA,KAAS,MAAA,GAAS,OAAA,GAAU,IAAA;AAC9C,EAAA,uBACE,IAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,iBAAA,EAAoB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAC5C,gBAAA,EAAe,cAAA;AAAA,MACf,WAAA,EAAW,IAAA;AAAA,MACX,kBAAA,EAAkB,UAAA;AAAA,MAClB,uBAAA,EAAuB,eAAA;AAAA,MACvB,kBAAA,EAAkB,cAAc,MAAA,GAAS,MAAA;AAAA,MACzC,IAAA,EAAM,OAAA;AAAA,MACN,WAAA,EAAW,OAAA,KAAY,OAAA,GAAU,WAAA,GAAc,QAAA;AAAA,MAC/C,WAAA,EAAW,cAAc,MAAA,GAAS,MAAA;AAAA,MAClC,IAAA;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,IAAA,oBAAQ,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,wBAAA,EAA0B,QAAA,EAAA,IAAA,EAAK,CAAA;AAAA,wBACpD,IAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,wBAAA,EACT,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,QAAA,EAAA,EAAQ,wCAAc,GAAA,CAAC,QAAA,EAAA,EAAS,OAAO,EAAA,CAAG,EAAE,CAAA,EAAG,CAAA,GAAK,KAAA,EAAM,CAAA;AAAA,UAC1D,yBACC,GAAA,CAAC,KAAA,EAAA,EAAM,UAAA,EAAW,OAAA,EAAQ,MAAK,SAAA,EAAU,IAAA,EAAM,SAAA,EAC5C,QAAA,EAAA,WAAA,uBAAe,QAAA,EAAA,EAAS,KAAA,EAAO,GAAG,IAAI,CAAA,EAAG,IAAK,KAAA,EACjD,CAAA;AAAA,UAED,0BACC,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,0BAAA,EACV,8BAAC,MAAA,EAAA,EAAM,QAAA,EAAA,WAAA,mBAAc,GAAA,CAAC,QAAA,EAAA,EAAS,OAAO,EAAA,CAAG,EAAE,CAAA,EAAG,CAAA,GAAK,QAAO,CAAA,EAC5D;AAAA,SAAA,EAEJ,CAAA;AAAA,QACC,MAAA,oBAAU,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,4BAA4B,QAAA,EAAA,MAAA,EAAO;AAAA;AAAA;AAAA,GAC3D;AAEJ","file":"chunk-5UGLKFBF.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport { Badge } from './badge.js';\nimport { em } from './css-values.js';\nimport type { KerfUiContent } from './semantic-content.js';\nimport { Skeleton } from './skeleton.js';\n\nexport type StateBannerTone =\n  'neutral' | 'info' | 'pop' | 'success' | 'warning' | 'danger';\nexport type StateBannerUrgency = 'status' | 'alert';\nexport type StateBannerCopyLayout = 'inline' | 'stacked';\nexport type StateBannerActionPlacement = 'trailing' | 'below';\n\nexport interface StateBannerProps {\n  title: string;\n  detail?: string;\n  /** Optional compact status or count shown beside the title. */\n  badge?: string;\n  icon?: SafeHtml;\n  action?: KerfUiContent;\n  tone?: StateBannerTone;\n  urgency?: StateBannerUrgency;\n  /** Keep the detail beside the title, or give it its own line. */\n  copyLayout?: StateBannerCopyLayout;\n  /** Place the action beside the copy or on a separate trailing row. */\n  actionPlacement?: StateBannerActionPlacement;\n  className?: string;\n  /** Render the title, badge, and detail as unanimated loading skeletons, keeping the icon and tone. The detail line appears only when `detail` is set, as in the live banner. */\n  placeholder?: boolean;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\nexport function StateBanner({\n  title,\n  detail,\n  badge,\n  icon,\n  action,\n  tone = 'info',\n  urgency = 'status',\n  copyLayout = 'inline',\n  actionPlacement = 'trailing',\n  className = '',\n  placeholder = false,\n  slot,\n}: StateBannerProps) {\n  const badgeTone = tone === 'info' ? 'brand' : tone;\n  return (\n    <section\n      class={`kui-state-banner ${className}`.trim()}\n      data-component=\"state-banner\"\n      data-tone={tone}\n      data-copy-layout={copyLayout}\n      data-action-placement={actionPlacement}\n      data-placeholder={placeholder ? 'true' : undefined}\n      role={urgency}\n      aria-live={urgency === 'alert' ? 'assertive' : 'polite'}\n      aria-busy={placeholder ? 'true' : undefined}\n      slot={slot}\n    >\n      {icon && <span class=\"kui-state-banner__icon\">{icon}</span>}\n      <div class=\"kui-state-banner__copy\">\n        <strong>{placeholder ? <Skeleton width={em(10)} /> : title}</strong>\n        {badge && (\n          <Badge appearance=\"solid\" size=\"compact\" tone={badgeTone}>\n            {placeholder ? <Skeleton width={em(1.75)} /> : badge}\n          </Badge>\n        )}\n        {detail && (\n          <span class=\"kui-state-banner__detail\">\n            <span>{placeholder ? <Skeleton width={em(16)} /> : detail}</span>\n          </span>\n        )}\n      </div>\n      {action && <div class=\"kui-state-banner__action\">{action}</div>}\n    </section>\n  );\n}\n"]}

package/dist/{chunk-KFJSNWO4.js → chunk-DA3HS64I.js}

@@ -1,5 +1,5 @@
-import { Skeleton } from './chunk-TT5ROTQK.js';
-import { em } from './chunk-2G2ZJQYK.js';
+import { Skeleton } from './chunk-JGIV6ZDA.js';
+import { em } from './chunk-RFGW735Q.js';
 import { jsxs, jsx } from 'kerfjs/jsx-runtime';
 
 function ValueTableRow({
@@ -49,4 +49,4 @@ function ValueTable({
 
 export { ValueTable, ValueTableRow };
 
-//# sourceMappingURL=chunk-KFJSNWO4.js.map
+//# sourceMappingURL=chunk-DA3HS64I.js.map

package/dist/{chunk-KFJSNWO4.js.map → chunk-DA3HS64I.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/value-table-row.tsx","../src/value-table.tsx"],"names":["jsx"],"mappings":";;;;AAgBO,SAAS,aAAA,CAAc;AAAA,EAC5B,KAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,WAAA,GAAc,KAAA;AAAA,EACd;AACF,CAAA,EAAuB;AACrB,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,qBAAA,EAAwB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAChD,eAAA,EAAe,MAAA,CAAO,OAAA,CAAQ,IAAI,CAAC,CAAA;AAAA,MACnC,kBAAA,EAAkB,cAAc,MAAA,GAAS,MAAA;AAAA,MACzC,IAAA;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,IAAA,EAAA,EACE,QAAA,EAAA;AAAA,UAAA,IAAA,oBAAQ,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,uBAAA,EAAyB,QAAA,EAAA,IAAA,EAAK,CAAA;AAAA,0BACnD,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,wBAAA,EAA0B,QAAA,EAAA,KAAA,EAAM;AAAA,SAAA,EAC9C,CAAA;AAAA,wBACA,GAAA,CAAC,IAAA,EAAA,EAAI,QAAA,EAAA,WAAA,mBAAc,GAAA,CAAC,QAAA,EAAA,EAAS,OAAO,EAAA,CAAG,EAAE,CAAA,EAAG,CAAA,GAAK,KAAA,EAAM;AAAA;AAAA;AAAA,GACzD;AAEJ;ACxBO,SAAS,UAAA,CAAW;AAAA,EACzB,KAAA;AAAA,EACA,OAAA,GAAU,SAAA;AAAA,EACV,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA;AAAA,EACA;AACF,CAAA,EAAoB;AAClB,EAAA,uBACEA,GAAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,gBAAA,EAAmB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAC3C,gBAAA,EAAe,aAAA;AAAA,MACf,cAAA,EAAc,OAAA;AAAA,MACd,YAAA,EAAY,KAAA;AAAA,MACZ,IAAA;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ","file":"chunk-KFJSNWO4.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport { em } from './css-values.js';\nimport { Skeleton } from './skeleton.js';\n\nexport interface ValueTableRowProps {\n  label: string | SafeHtml;\n  value: string | SafeHtml;\n  icon?: SafeHtml;\n  className?: string;\n  /** Render the value as an unanimated loading skeleton, keeping the field label. */\n  placeholder?: boolean;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\nexport function ValueTableRow({\n  label,\n  value,\n  icon,\n  className = '',\n  placeholder = false,\n  slot,\n}: ValueTableRowProps) {\n  return (\n    <div\n      class={`kui-value-table__row ${className}`.trim()}\n      data-has-icon={String(Boolean(icon))}\n      data-placeholder={placeholder ? 'true' : undefined}\n      slot={slot}\n    >\n      <dt>\n        {icon && <span class=\"kui-value-table__icon\">{icon}</span>}\n        <span class=\"kui-value-table__label\">{label}</span>\n      </dt>\n      <dd>{placeholder ? <Skeleton width={em(10)} /> : value}</dd>\n    </div>\n  );\n}\n","import type { KerfUiContent } from './semantic-content.js';\n\nexport { ValueTableRow, type ValueTableRowProps } from './value-table-row.js';\n\nexport interface ValueTableProps {\n  label: string;\n  /** Compact row spacing for metadata-dense surfaces. */\n  density?: 'default' | 'compact';\n  className?: string;\n  children: KerfUiContent;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\nexport function ValueTable({\n  label,\n  density = 'default',\n  className = '',\n  children,\n  slot,\n}: ValueTableProps) {\n  return (\n    <dl\n      class={`kui-value-table ${className}`.trim()}\n      data-component=\"value-table\"\n      data-density={density}\n      aria-label={label}\n      slot={slot}\n    >\n      {children}\n    </dl>\n  );\n}\n"]}
+{"version":3,"sources":["../src/value-table-row.tsx","../src/value-table.tsx"],"names":["jsx"],"mappings":";;;;AAgBO,SAAS,aAAA,CAAc;AAAA,EAC5B,KAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,WAAA,GAAc,KAAA;AAAA,EACd;AACF,CAAA,EAAuB;AACrB,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,qBAAA,EAAwB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAChD,eAAA,EAAe,MAAA,CAAO,OAAA,CAAQ,IAAI,CAAC,CAAA;AAAA,MACnC,kBAAA,EAAkB,cAAc,MAAA,GAAS,MAAA;AAAA,MACzC,IAAA;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,IAAA,EAAA,EACE,QAAA,EAAA;AAAA,UAAA,IAAA,oBAAQ,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,uBAAA,EAAyB,QAAA,EAAA,IAAA,EAAK,CAAA;AAAA,0BACnD,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,wBAAA,EAA0B,QAAA,EAAA,KAAA,EAAM;AAAA,SAAA,EAC9C,CAAA;AAAA,wBACA,GAAA,CAAC,IAAA,EAAA,EAAI,QAAA,EAAA,WAAA,mBAAc,GAAA,CAAC,QAAA,EAAA,EAAS,OAAO,EAAA,CAAG,EAAE,CAAA,EAAG,CAAA,GAAK,KAAA,EAAM;AAAA;AAAA;AAAA,GACzD;AAEJ;ACxBO,SAAS,UAAA,CAAW;AAAA,EACzB,KAAA;AAAA,EACA,OAAA,GAAU,SAAA;AAAA,EACV,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA;AAAA,EACA;AACF,CAAA,EAAoB;AAClB,EAAA,uBACEA,GAAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,gBAAA,EAAmB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAC3C,gBAAA,EAAe,aAAA;AAAA,MACf,cAAA,EAAc,OAAA;AAAA,MACd,YAAA,EAAY,KAAA;AAAA,MACZ,IAAA;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ","file":"chunk-DA3HS64I.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport { em } from './css-values.js';\nimport { Skeleton } from './skeleton.js';\n\nexport interface ValueTableRowProps {\n  label: string | SafeHtml;\n  value: string | SafeHtml;\n  icon?: SafeHtml;\n  className?: string;\n  /** Render the value as an unanimated loading skeleton, keeping the field label. */\n  placeholder?: boolean;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\nexport function ValueTableRow({\n  label,\n  value,\n  icon,\n  className = '',\n  placeholder = false,\n  slot,\n}: ValueTableRowProps) {\n  return (\n    <div\n      class={`kui-value-table__row ${className}`.trim()}\n      data-has-icon={String(Boolean(icon))}\n      data-placeholder={placeholder ? 'true' : undefined}\n      slot={slot}\n    >\n      <dt>\n        {icon && <span class=\"kui-value-table__icon\">{icon}</span>}\n        <span class=\"kui-value-table__label\">{label}</span>\n      </dt>\n      <dd>{placeholder ? <Skeleton width={em(10)} /> : value}</dd>\n    </div>\n  );\n}\n","import type { KerfUiContent } from './semantic-content.js';\n\nexport { ValueTableRow, type ValueTableRowProps } from './value-table-row.js';\n\nexport interface ValueTableProps {\n  label: string;\n  /** Compact row spacing for metadata-dense surfaces. */\n  density?: 'default' | 'compact';\n  className?: string;\n  children: KerfUiContent;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\nexport function ValueTable({\n  label,\n  density = 'default',\n  className = '',\n  children,\n  slot,\n}: ValueTableProps) {\n  return (\n    <dl\n      class={`kui-value-table ${className}`.trim()}\n      data-component=\"value-table\"\n      data-density={density}\n      aria-label={label}\n      slot={slot}\n    >\n      {children}\n    </dl>\n  );\n}\n"]}

package/dist/{chunk-WTSNV5RG.js → chunk-DUBUXJA3.js}

@@ -1,4 +1,4 @@
-import { remify } from './chunk-2G2ZJQYK.js';
+import { remify } from './chunk-RFGW735Q.js';
 import { jsx } from 'kerfjs/jsx-runtime';
 
 var lucideIconSizePixels = {
@@ -13,6 +13,7 @@ function LucideIcon({
   name,
   appearance = "outline",
   className,
+  color,
   label,
   size,
   slot
@@ -41,7 +42,10 @@ function LucideIcon({
       "stroke-width": "2",
       "stroke-linecap": "round",
       "stroke-linejoin": "round",
-      style: pixels === void 0 ? void 0 : `--_kui-lucide-size:${remify(pixels)}`,
+      style: [
+        pixels === void 0 ? void 0 : `--_kui-lucide-size:${remify(pixels)}`,
+        color === void 0 ? void 0 : `color:${color}`
+      ].filter(Boolean).join(";") || void 0,
       children: icon.map(([tag, attrs]) => jsx(tag, attrs))
     }
   );
@@ -49,4 +53,4 @@ function LucideIcon({
 
 export { LucideIcon };
 
-//# sourceMappingURL=chunk-WTSNV5RG.js.map
+//# sourceMappingURL=chunk-DUBUXJA3.js.map