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

package/dist/index.js

@@ -1,32 +1,33 @@
 export { reorderTabs, wireTabBars } from './chunk-UKKSMZYT.js';
-export { wireTokenSearchFields } from './chunk-JFGXQBIP.js';
-export { ValueTable, ValueTableRow } from './chunk-KWWR5VMS.js';
-export { wireResizableRegions } from './chunk-YMKH5XTF.js';
-export { StateBanner } from './chunk-W5L2JSBY.js';
-export { SunkenPanel } from './chunk-TB6DY7H5.js';
-export { DialogSurface, PopupSurface } from './chunk-OBLTAKSX.js';
-export { TabBar } from './chunk-X2U3QJCJ.js';
-export { TokenSearchField, placeTokenSearchCaret, readTokenSearchField } from './chunk-7KEUJIIC.js';
-export { ToolbarText } from './chunk-R7ZWUN64.js';
-export { ResizableRegion, clampRegionSize, resizeRegionFromPointer } from './chunk-HP2B2L26.js';
-export { SegmentedControl } from './chunk-IJBSZ4NX.js';
-export { Select } from './chunk-2NMQW7FX.js';
-export { ListActionRow } from './chunk-VCE4MPVE.js';
-export { ListInsetControl } from './chunk-QO55FN2Y.js';
-export { ListInsetText } from './chunk-FEY65TBV.js';
-export { AppTab } from './chunk-OT6RPYAP.js';
-export { Toolbar } from './chunk-SYDMYBPG.js';
-export { ToolbarControlGroup } from './chunk-WNWD54GR.js';
-export { Pane } from './chunk-JRKSK2HX.js';
-export { ListHeader } from './chunk-GWEAPEZI.js';
-export { ListItem } from './chunk-4EF2CMYS.js';
-export { List } from './chunk-J5BFYY7Q.js';
+export { wireTokenSearchFields } from './chunk-VDUJZF5G.js';
+export { ValueTable, ValueTableRow } from './chunk-V6HCTCVD.js';
+export { wireResizableRegions } from './chunk-WN52USHV.js';
+export { StateBanner } from './chunk-UDHHKZWO.js';
+export { SunkenPanel } from './chunk-SOK5EUF7.js';
+export { DialogSurface, PopupSurface } from './chunk-WSXUPSID.js';
+export { TabBar } from './chunk-ZPWZIVI6.js';
+export { TokenSearchField, placeTokenSearchCaret, readTokenSearchField } from './chunk-TIGSG6BX.js';
+export { ToolbarText } from './chunk-V6GQKOX2.js';
+export { ResizableRegion, clampRegionSize, resizeRegionFromPointer } from './chunk-CAB6NQ2T.js';
+export { SegmentedControl } from './chunk-E34TE2ZI.js';
+export { Select } from './chunk-CK6P5AUK.js';
+export { FloatingToolbar } from './chunk-DYBPI5O2.js';
+export { ListActionRow } from './chunk-DAO2VFTT.js';
+export { ListInsetControl } from './chunk-MFR2IIFG.js';
+export { ListInsetText } from './chunk-KFUUFNTS.js';
+export { AppTab } from './chunk-OMSRSL3B.js';
+export { ToolbarControlGroup } from './chunk-B6JYRX3P.js';
+export { Toolbar } from './chunk-VXFGMDA7.js';
+export { Pane } from './chunk-I4V3UDSA.js';
+export { ListHeader } from './chunk-OC275HHS.js';
+export { ListItem } from './chunk-I45QO2IZ.js';
+export { List } from './chunk-RL6COPKF.js';
 
-export { Skeleton } from './chunk-RKVQEH4J.js';
+export { Skeleton } from './chunk-T7DOWS6T.js';
+export { calc, colorVar, em, flex, lengthVar, pct, plus, px, rem, space, uiColor } from './chunk-OL4TC3U2.js';
 export { DisclosureArrow } from './chunk-Y6LYKFXY.js';
 export { LucideIcon } from './chunk-W2FK7ZNY.js';
-export { EmptyState } from './chunk-PX3YSS5C.js';
+export { EmptyState } from './chunk-6NDBE2OK.js';
 export { LoadingSpinner } from './chunk-6WTETUZ6.js';
-export { FloatingToolbar } from './chunk-LPOMRC4C.js';
 
 //# sourceMappingURL=index.js.map

package/dist/list-action-row.d.ts

@@ -53,10 +53,9 @@ interface ListActionRowProps {
     trailingActionTitle?: string;
     trailingActionVisibility?: 'always' | 'interaction';
     className?: string;
-    style?: string;
     rootAttributes?: ListActionRowRootAttributes;
     trailingActionAttributes?: ListActionRowTrailingAttributes;
 }
-declare function ListActionRow({ label, description, status, busy, density, divider, icon, action, itemId, selected, pressed, accessibleLabel, title, multiline, state, disabled, tabIndex, placeholder, trailingAction, trailingActionLabel, trailingActionIcon, trailingActionDisabled, trailingActionTitle, trailingActionVisibility, className, style, rootAttributes, trailingActionAttributes, }: ListActionRowProps): SafeHtml;
+declare function ListActionRow({ label, description, status, busy, density, divider, icon, action, itemId, selected, pressed, accessibleLabel, title, multiline, state, disabled, tabIndex, placeholder, trailingAction, trailingActionLabel, trailingActionIcon, trailingActionDisabled, trailingActionTitle, trailingActionVisibility, className, rootAttributes, trailingActionAttributes, }: ListActionRowProps): SafeHtml;
 
 export { ListActionRow, type ListActionRowProps };

package/dist/list-action-row.js

@@ -1,4 +1,5 @@
-export { ListActionRow } from './chunk-VCE4MPVE.js';
+export { ListActionRow } from './chunk-DAO2VFTT.js';
+
 
 
 

package/dist/list-header.d.ts

@@ -21,7 +21,7 @@ interface ListHeaderBaseProps {
     label: string;
     density?: 'standard' | 'compact';
     divider?: 'none' | 'before' | 'after' | 'both';
-    indicatorTone?: 'neutral' | 'accent' | 'danger';
+    indicatorTone?: 'neutral' | 'accent' | 'pop' | 'danger';
     /** Render as an unanimated loading skeleton: keep the label and action affordance, disable interaction. */
     placeholder?: boolean;
     rootAttributes?: ListHeaderRootAttributes;

package/dist/list-header.js

@@ -1,4 +1,5 @@
-export { ListHeader } from './chunk-GWEAPEZI.js';
+export { ListHeader } from './chunk-OC275HHS.js';
+
 
 
 

package/dist/list-inset-control.d.ts

@@ -1,8 +1,9 @@
-import { SafeHtml } from 'kerfjs';
+import * as kerfjs from 'kerfjs';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
 
 interface ListInsetControlProps {
     /** Control(s) that own their own border and padding (e.g. an input, a `wa-*`). */
-    children: SafeHtml | SafeHtml[];
+    children: KerfUiContent;
     className?: string;
 }
 /**
@@ -11,6 +12,6 @@ interface ListInsetControlProps {
  * Use it for controls that carry their own border and padding but no outer margin
  * — the wrapper adds only the alignment margin and layout, not a second inset.
  */
-declare function ListInsetControl({ children, className, }: ListInsetControlProps): SafeHtml;
+declare function ListInsetControl({ children, className, }: ListInsetControlProps): kerfjs.SafeHtml;
 
 export { ListInsetControl, type ListInsetControlProps };

package/dist/list-inset-control.js

@@ -1,3 +1,3 @@
-export { ListInsetControl } from './chunk-QO55FN2Y.js';
+export { ListInsetControl } from './chunk-MFR2IIFG.js';
 
 //# sourceMappingURL=list-inset-control.js.map

package/dist/list-inset-text.d.ts

@@ -1,8 +1,9 @@
-import { SafeHtml } from 'kerfjs';
+import * as kerfjs from 'kerfjs';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
 
 interface ListInsetTextProps {
     /** Text (or inline content) that carries no margin, border, or padding of its own. */
-    children: SafeHtml | SafeHtml[] | string;
+    children: KerfUiContent | string;
     /**
      * Keep only the horizontal geometry (inline margin, left/right border, and
      * left/right padding) and drop the vertical margin, border, and padding. Use it
@@ -20,6 +21,6 @@ interface ListInsetTextProps {
  * Pass `horizontalOnly` to keep the horizontal inset but drop the vertical box
  * space for tight text layout.
  */
-declare function ListInsetText({ children, horizontalOnly, className, }: ListInsetTextProps): SafeHtml;
+declare function ListInsetText({ children, horizontalOnly, className, }: ListInsetTextProps): kerfjs.SafeHtml;
 
 export { ListInsetText, type ListInsetTextProps };

package/dist/list-inset-text.js

@@ -1,3 +1,3 @@
-export { ListInsetText } from './chunk-FEY65TBV.js';
+export { ListInsetText } from './chunk-KFUUFNTS.js';
 
 //# sourceMappingURL=list-inset-text.js.map

package/dist/list-item.d.ts

@@ -1,10 +1,12 @@
 import { SafeHtml } from 'kerfjs';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
 
 type ListItemRootAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
     'data-component'?: never;
     'data-action'?: never;
     'data-item-id'?: never;
     'data-has-icon'?: never;
+    'data-has-description'?: never;
     'data-multiline'?: never;
     'data-density'?: never;
     'data-divider'?: never;
@@ -16,7 +18,7 @@ interface ListItemProps {
     /** App-owned supporting text rendered in the component's stable label stack. */
     description?: string | SafeHtml;
     icon?: SafeHtml;
-    trailing?: SafeHtml;
+    trailing?: KerfUiContent;
     /** Dormant status metadata rendered before trailing content. */
     status?: string | SafeHtml;
     /** Show a progress indicator and expose the row as busy without replacing its content. */
@@ -27,7 +29,6 @@ interface ListItemProps {
     action: string;
     itemId?: string;
     className?: string;
-    style?: string;
     pressed?: boolean;
     accessibleLabel?: string;
     title?: string;
@@ -39,6 +40,6 @@ interface ListItemProps {
     placeholder?: boolean;
     rootAttributes?: ListItemRootAttributes;
 }
-declare function ListItem({ label, description, icon, trailing, status, busy, density, divider, selected, action, itemId, className, style, pressed, accessibleLabel, title, multiline, state, disabled, tabIndex, placeholder, rootAttributes, }: ListItemProps): SafeHtml;
+declare function ListItem({ label, description, icon, trailing, status, busy, density, divider, selected, action, itemId, className, pressed, accessibleLabel, title, multiline, state, disabled, tabIndex, placeholder, rootAttributes, }: ListItemProps): SafeHtml;
 
 export { ListItem, type ListItemProps };

package/dist/list-item.js

@@ -1,4 +1,5 @@
-export { ListItem } from './chunk-4EF2CMYS.js';
+export { ListItem } from './chunk-I45QO2IZ.js';
+
 
 
 

package/dist/list.d.ts

@@ -1,12 +1,14 @@
-import { SafeHtml } from 'kerfjs';
+import * as kerfjs from 'kerfjs';
+import { UiSpaceName, CssLength, CssFlexKeyword, CssFlex } from './css-values.js';
 import { D as DividerSides } from './divider-sides-267FA7sY.js';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
 
 interface ListProps {
-    children?: SafeHtml | readonly SafeHtml[];
-    /** Use the standard item gap, or supply browser CSS such as `var(--kui-space-2xs)` or `0.25rem`. Defaults to no gap. */
-    gap?: boolean | string;
-    /** Allow this list to grow/shrink, or supply a CSS flex shorthand. */
-    flex?: boolean | string;
+    children?: KerfUiContent;
+    /** 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. */
+    flex?: boolean | CssFlexKeyword | CssFlex;
     /** Own vertical scrolling and overscroll containment. */
     scrollable?: boolean;
     /** Physical divider edges in canonical top/right/bottom/left order. */
@@ -14,6 +16,6 @@ interface ListProps {
     className?: string;
 }
 /** A stretch-aligned vertical stack with optional gap, flex, scroll, and dividers. */
-declare function List({ children, gap, flex, scrollable, dividerSides, className, }: ListProps): SafeHtml;
+declare function List({ children, gap, flex, scrollable, dividerSides, className, }: ListProps): kerfjs.SafeHtml;
 
-export { DividerSides, List, type ListProps };
+export { CssFlex, CssFlexKeyword, CssLength, DividerSides, List, type ListProps, UiSpaceName };

package/dist/list.js

@@ -1,3 +1,4 @@
-export { List } from './chunk-J5BFYY7Q.js';
+export { List } from './chunk-RL6COPKF.js';
+
 
 //# sourceMappingURL=list.js.map

package/dist/nav-stack.d.ts

@@ -1,4 +1,5 @@
-import { SafeHtml } from 'kerfjs';
+import * as kerfjs from 'kerfjs';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
 
 /**
  * One entry in a {@link NavStack}. The app owns the stack as an array (usually a
@@ -7,11 +8,13 @@ import { SafeHtml } from 'kerfjs';
 interface NavStackView {
     /** Stable identity for keyed reconcile and transition direction. */
     key: string;
-    content: SafeHtml;
+    content: KerfUiContent;
     /** Title shown in the top toolbar for this view. */
     title?: string;
     /** Trailing actions for this view's top toolbar. */
-    toolbar?: SafeHtml;
+    toolbar?: KerfUiContent;
+    /** Bottom toolbar for this view. Cross-fades with the top chrome on navigation. */
+    bottomToolbar?: KerfUiContent;
 }
 interface NavStackProps {
     id: string;
@@ -23,8 +26,8 @@ interface NavStackProps {
     backLabel?: string;
     /** Hide the top toolbar entirely (rare — a fully custom-chrome view). */
     hideToolbar?: boolean;
-    /** Optional persistent bottom toolbar. */
-    bottomToolbar?: SafeHtml;
+    /** Optional persistent bottom toolbar used when the active view does not provide one. */
+    bottomToolbar?: KerfUiContent;
     className?: string;
 }
 /**
@@ -33,6 +36,6 @@ interface NavStackProps {
  * cross-fades the chrome across a change. A single-pane layout is a `NavStack`
  * with one entry. See `docs/23-app-layouts.md` §3.1.
  */
-declare function NavStack({ id, label, views, backLabel, hideToolbar, bottomToolbar, className, }: NavStackProps): SafeHtml;
+declare function NavStack({ id, label, views, backLabel, hideToolbar, bottomToolbar, className, }: NavStackProps): kerfjs.SafeHtml;
 
 export { NavStack, type NavStackProps, type NavStackView };

package/dist/nav-stack.js

@@ -1,4 +1,5 @@
-export { NavStack } from './chunk-B3A3IVO5.js';
+export { NavStack } from './chunk-AQFWBG23.js';
+
 
 
 

package/dist/pane.d.ts

@@ -1,4 +1,5 @@
-import { SafeHtml } from 'kerfjs';
+import * as kerfjs from 'kerfjs';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
 
 /** Logical sides that can show a {@link Pane} separator. */
 type PaneSeparatorSide = 'block-start' | 'block-end' | 'inline-start' | 'inline-end';
@@ -15,11 +16,11 @@ type PaneRootAttributes = Readonly<Record<`data-${string}`, string | undefined>
 }>;
 interface PaneProps {
     /** Optional fixed chrome above the scrolling content, arranged vertically. */
-    header?: SafeHtml | readonly SafeHtml[];
+    header?: KerfUiContent;
     /** The pane's primary vertical, scrolling content stack. */
-    children?: SafeHtml | readonly SafeHtml[];
+    children?: KerfUiContent;
     /** Optional fixed chrome below the scrolling content. */
-    footer?: SafeHtml | readonly SafeHtml[];
+    footer?: KerfUiContent;
     /** Root semantics. Defaults to `div`. */
     element?: PaneElement;
     /** Scrolling content semantics. Defaults to `div`. */
@@ -44,6 +45,6 @@ interface PaneProps {
  * each logical edge, so the same component works as a sidebar, main area,
  * inspector, or dialog column.
  */
-declare function Pane({ header, children, footer, element, contentElement, separators, id, label, contentLabel, className, headerClassName, contentClassName, footerClassName, rootAttributes, }: PaneProps): SafeHtml;
+declare function Pane({ header, children, footer, element, contentElement, separators, id, label, contentLabel, className, headerClassName, contentClassName, footerClassName, rootAttributes, }: PaneProps): kerfjs.SafeHtml;
 
 export { Pane, type PaneContentElement, type PaneElement, type PaneProps, type PaneSeparatorSide };

package/dist/pane.js

@@ -1,4 +1,4 @@
-export { Pane } from './chunk-JRKSK2HX.js';
+export { Pane } from './chunk-I4V3UDSA.js';
 
 
 //# sourceMappingURL=pane.js.map

package/dist/resizable-region.d.ts

@@ -1,4 +1,5 @@
 import { SafeHtml } from 'kerfjs';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
 
 type ResizableRegionAxis = 'horizontal' | 'vertical';
 type ResizableRegionEdge = 'start' | 'end';
@@ -31,7 +32,7 @@ interface ResizableRegionProps {
     restorePosition?: ResizableRegionRestorePosition;
     /** Decorative dormant content for the separator handle. Must not contain interactive descendants. */
     handleIcon?: SafeHtml;
-    children: SafeHtml | SafeHtml[];
+    children: KerfUiContent;
 }
 declare const clampRegionSize: (size: number, min: number, max: number) => number;
 declare const resizeRegionFromPointer: (startSize: number, delta: number, edge: ResizableRegionEdge) => number;

package/dist/resizable-region.js

@@ -1,3 +1,3 @@
-export { ResizableRegion, clampRegionSize, resizeRegionFromPointer } from './chunk-HP2B2L26.js';
+export { ResizableRegion, clampRegionSize, resizeRegionFromPointer } from './chunk-CAB6NQ2T.js';
 
 //# sourceMappingURL=resizable-region.js.map

package/dist/segmented-control.d.ts

@@ -1,4 +1,5 @@
-import { SafeHtml } from 'kerfjs';
+import * as kerfjs from 'kerfjs';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
 
 type SegmentedControlAppearance = 'filled' | 'outlined' | 'toolbar';
 type SegmentedControlShape = 'rounded' | 'pill';
@@ -7,7 +8,7 @@ type SegmentedControlLayout = 'content' | 'equal';
 interface SegmentedControlChoice<Value extends string = string> {
     value: Value;
     label: string;
-    content?: SafeHtml;
+    content?: KerfUiContent;
     title?: string;
     disabled?: boolean;
 }
@@ -25,6 +26,6 @@ interface SegmentedControlProps<Value extends string = string> {
     /** Render as an unanimated loading skeleton, disabling every segment. */
     placeholder?: boolean;
 }
-declare function SegmentedControl<Value extends string>({ id, label, value, choices, action, appearance, shape, size, layout, className, placeholder, }: SegmentedControlProps<Value>): SafeHtml;
+declare function SegmentedControl<Value extends string>({ id, label, value, choices, action, appearance, shape, size, layout, className, placeholder, }: SegmentedControlProps<Value>): kerfjs.SafeHtml;
 
 export { SegmentedControl, type SegmentedControlAppearance, type SegmentedControlChoice, type SegmentedControlLayout, type SegmentedControlProps, type SegmentedControlShape, type SegmentedControlSize };

package/dist/segmented-control.js

@@ -1,4 +1,5 @@
-export { SegmentedControl } from './chunk-IJBSZ4NX.js';
+export { SegmentedControl } from './chunk-E34TE2ZI.js';
+
 
 
 //# sourceMappingURL=segmented-control.js.map

package/dist/select.d.ts

@@ -1,4 +1,5 @@
 import { SafeHtml } from 'kerfjs';
+import { CssColor } from './css-values.js';
 import { LucideNode } from './lucide-icon.js';
 import 'lucide';
 
@@ -7,7 +8,8 @@ interface SelectChoice<Value extends string = string> {
     label: string;
     icon?: LucideNode;
     iconName?: string;
-    color?: string;
+    /** Typed semantic or application-owned color for the optional icon. */
+    color?: CssColor;
     group?: string;
     separatorBefore?: boolean;
 }

package/dist/select.js

@@ -1,4 +1,5 @@
-export { Select } from './chunk-2NMQW7FX.js';
+export { Select } from './chunk-CK6P5AUK.js';
+
 
 
 

package/dist/semantic-content-BbzjvSu9.d.ts

@@ -0,0 +1,14 @@
+import { SafeHtml } from 'kerfjs';
+
+/**
+ * Renderable content for semantic Kerf UI component positions.
+ *
+ * Unlike core JSX children, UI content intentionally excludes raw strings,
+ * numbers, and signals: semantic component zones should contain trusted
+ * `SafeHtml` components. Boolean and nullish values render nothing, and nested
+ * readonly arrays let conditionals and mapped component collections compose
+ * directly without an otherwise-unnecessary Fragment.
+ */
+type KerfUiContent = SafeHtml | boolean | null | undefined | readonly KerfUiContent[];
+
+export type { KerfUiContent as K };

package/dist/skeleton.d.ts

@@ -1,12 +1,13 @@
 import * as kerfjs from 'kerfjs';
+import { CssSize, CssLength } from './css-values.js';
 
 interface SkeletonProps {
-    /** Width as any browser CSS length (e.g. `7.5rem`, `60%`). Defaults to filling its slot. */
-    width?: string;
-    /** Height as any CSS length. Defaults to a single text line. */
-    height?: string;
-    /** Corner radius override (a CSS length). Defaults to the small radius token. */
-    radius?: string;
+    /** Typed width or intrinsic sizing keyword. Defaults to filling its slot. */
+    width?: CssSize;
+    /** Typed height or intrinsic sizing keyword. Defaults to a single text line. */
+    height?: CssSize;
+    /** Typed corner-radius override. Defaults to the small radius token. */
+    radius?: CssLength;
     /** Render this many stacked lines (the last one shorter), for multi-line text. */
     lines?: number;
     /** Accessible label. Omit to keep the block decorative (`aria-hidden`). */

package/dist/skeleton.js

@@ -1,3 +1,4 @@
-export { Skeleton } from './chunk-RKVQEH4J.js';
+export { Skeleton } from './chunk-T7DOWS6T.js';
+
 
 //# sourceMappingURL=skeleton.js.map

package/dist/split-view.d.ts

@@ -1,4 +1,5 @@
-import { SafeHtml } from 'kerfjs';
+import * as kerfjs from 'kerfjs';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
 
 interface SplitViewResizable {
     size: number;
@@ -9,9 +10,9 @@ interface SplitViewProps {
     id: string;
     label: string;
     /** The list (primary) pane. */
-    list: SafeHtml;
+    list: KerfUiContent;
     /** The detail (secondary) pane. */
-    detail: SafeHtml;
+    detail: KerfUiContent;
     /**
      * Compact ("one pane at a time") classes — a handset or portrait tablet.
      * Derive from `deviceClass().value.compact`. When true the split collapses to
@@ -37,6 +38,6 @@ interface SplitViewProps {
  * resizable wiring with `wireResizableRegions` and the compact back with
  * `wireNavStack`.
  */
-declare function SplitView({ id, label, list, detail, compact, detailActive, listTitle, detailTitle, backLabel, resizable, className, }: SplitViewProps): SafeHtml;
+declare function SplitView({ id, label, list, detail, compact, detailActive, listTitle, detailTitle, backLabel, resizable, className, }: SplitViewProps): kerfjs.SafeHtml;
 
 export { SplitView, type SplitViewProps, type SplitViewResizable };

package/dist/split-view.js

@@ -1,6 +1,7 @@
-import { NavStack } from './chunk-B3A3IVO5.js';
+import { NavStack } from './chunk-AQFWBG23.js';
+
+import { ResizableRegion } from './chunk-CAB6NQ2T.js';
 
-import { ResizableRegion } from './chunk-HP2B2L26.js';
 
 import { jsx, jsxs } from 'kerfjs/jsx-runtime';
 

package/dist/split-view.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/split-view.tsx"],"names":[],"mappings":";;;;;;AA4CO,SAAS,SAAA,CAAU;AAAA,EACxB,EAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA,GAAU,KAAA;AAAA,EACV,YAAA,GAAe,KAAA;AAAA,EACf,SAAA,GAAY,EAAA;AAAA,EACZ,WAAA,GAAc,EAAA;AAAA,EACd,SAAA,GAAY,MAAA;AAAA,EACZ,SAAA;AAAA,EACA,SAAA,GAAY;AACd,CAAA,EAAmB;AACjB,EAAA,IAAI,OAAA,EAAS;AACX,IAAA,MAAM,QAAQ,YAAA,GACV;AAAA,MACE,EAAE,GAAA,EAAK,MAAA,EAAQ,KAAA,EAAO,SAAA,EAAW,SAAS,IAAA,EAAK;AAAA,MAC/C,EAAE,GAAA,EAAK,QAAA,EAAU,KAAA,EAAO,WAAA,EAAa,SAAS,MAAA;AAAO,KACvD,GACA,CAAC,EAAE,GAAA,EAAK,QAAQ,KAAA,EAAO,SAAA,EAAW,OAAA,EAAS,IAAA,EAAM,CAAA;AACrD,IAAA,uBACE,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,KAAA,EAAO,CAAA,uCAAA,EAA0C,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,QAClE,EAAA;AAAA,QACA,gBAAA,EAAe,YAAA;AAAA,QACf,iBAAA,EAAgB,SAAA;AAAA,QAEhB,QAAA,kBAAA,GAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,EAAA,EAAI,GAAG,EAAE,CAAA,MAAA,CAAA;AAAA,YACT,KAAA;AAAA,YACA,KAAA;AAAA,YACA;AAAA;AAAA;AACF;AAAA,KACF;AAAA,EAEJ;AACA,EAAA,MAAM,WAAW,SAAA,mBACf,GAAA;AAAA,IAAC,eAAA;AAAA,IAAA;AAAA,MACC,EAAA,EAAI,GAAG,EAAE,CAAA,KAAA,CAAA;AAAA,MACT,OAAO,SAAA,IAAa,MAAA;AAAA,MACpB,MAAM,SAAA,CAAU,IAAA;AAAA,MAChB,KAAK,SAAA,CAAU,GAAA;AAAA,MACf,KAAK,SAAA,CAAU,GAAA;AAAA,MAEf,8BAAC,KAAA,EAAA,EAAI,KAAA,EAAM,+BAAA,EAAgC,iBAAA,EAAe,MACvD,QAAA,EAAA,IAAA,EACH;AAAA;AAAA,sBAGF,GAAA,CAAC,KAAA,EAAA,EAAI,OAAM,+BAAA,EAAgC,iBAAA,EAAe,MACvD,QAAA,EAAA,IAAA,EACH,CAAA;AAEF,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,eAAA,EAAkB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAC1C,EAAA;AAAA,MACA,gBAAA,EAAe,YAAA;AAAA,MACf,iBAAA,EAAgB,OAAA;AAAA,MAChB,YAAA,EAAY,KAAA;AAAA,MAEX,QAAA,EAAA;AAAA,QAAA,QAAA;AAAA,wBACD,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,KAAA,EAAM,iCAAA;AAAA,YACN,mBAAA,EAAiB,IAAA;AAAA,YACjB,cAAY,WAAA,IAAe,MAAA;AAAA,YAE1B,QAAA,EAAA;AAAA;AAAA;AACH;AAAA;AAAA,GACF;AAEJ","file":"split-view.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport { NavStack } from './nav-stack.js';\nimport { ResizableRegion } from './resizable-region.js';\n\nexport interface SplitViewResizable {\n  size: number;\n  min: number;\n  max: number;\n}\n\nexport interface SplitViewProps {\n  id: string;\n  label: string;\n  /** The list (primary) pane. */\n  list: SafeHtml;\n  /** The detail (secondary) pane. */\n  detail: SafeHtml;\n  /**\n   * Compact (\"one pane at a time\") classes — a handset or portrait tablet.\n   * Derive from `deviceClass().value.compact`. When true the split collapses to\n   * a `NavStack`: the list is the root and the detail is pushed over it.\n   */\n  compact?: boolean;\n  /** In compact mode, whether the detail is currently pushed over the list. */\n  detailActive?: boolean;\n  /** Title/label for the list (compact NavStack root + region label). */\n  listTitle?: string;\n  /** Title/label for the detail (compact NavStack pushed view + region label). */\n  detailTitle?: string;\n  /** Back label for the compact NavStack (default \"Back\"). */\n  backLabel?: string;\n  /** A resizable separator on roomy classes (min/max px). Omit for a fixed split. */\n  resizable?: SplitViewResizable;\n  className?: string;\n}\n\n/**\n * A list-detail split. On roomy classes it shows both panes side\n * by side with an optional resizable separator; on compact classes it collapses\n * to a `NavStack` (list → detail). See `docs/23-app-layouts.md` §3.2. Compose the\n * resizable wiring with `wireResizableRegions` and the compact back with\n * `wireNavStack`.\n */\nexport function SplitView({\n  id,\n  label,\n  list,\n  detail,\n  compact = false,\n  detailActive = false,\n  listTitle = '',\n  detailTitle = '',\n  backLabel = 'Back',\n  resizable,\n  className = '',\n}: SplitViewProps) {\n  if (compact) {\n    const views = detailActive\n      ? [\n          { key: 'list', title: listTitle, content: list },\n          { key: 'detail', title: detailTitle, content: detail },\n        ]\n      : [{ key: 'list', title: listTitle, content: list }];\n    return (\n      <div\n        class={`kui-split-view kui-split-view--compact ${className}`.trim()}\n        id={id}\n        data-component=\"split-view\"\n        data-split-mode=\"compact\"\n      >\n        <NavStack\n          id={`${id}-stack`}\n          label={label}\n          views={views}\n          backLabel={backLabel}\n        />\n      </div>\n    );\n  }\n  const listPane = resizable ? (\n    <ResizableRegion\n      id={`${id}-list`}\n      label={listTitle || 'List'}\n      size={resizable.size}\n      min={resizable.min}\n      max={resizable.max}\n    >\n      <div class=\"kui-split-view__list kui-pane\" data-split-list>\n        {list}\n      </div>\n    </ResizableRegion>\n  ) : (\n    <div class=\"kui-split-view__list kui-pane\" data-split-list>\n      {list}\n    </div>\n  );\n  return (\n    <div\n      class={`kui-split-view ${className}`.trim()}\n      id={id}\n      data-component=\"split-view\"\n      data-split-mode=\"split\"\n      aria-label={label}\n    >\n      {listPane}\n      <div\n        class=\"kui-split-view__detail kui-pane\"\n        data-split-detail\n        aria-label={detailTitle || undefined}\n      >\n        {detail}\n      </div>\n    </div>\n  );\n}\n"]}
+{"version":3,"sources":["../src/split-view.tsx"],"names":[],"mappings":";;;;;;;AA2CO,SAAS,SAAA,CAAU;AAAA,EACxB,EAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA,GAAU,KAAA;AAAA,EACV,YAAA,GAAe,KAAA;AAAA,EACf,SAAA,GAAY,EAAA;AAAA,EACZ,WAAA,GAAc,EAAA;AAAA,EACd,SAAA,GAAY,MAAA;AAAA,EACZ,SAAA;AAAA,EACA,SAAA,GAAY;AACd,CAAA,EAAmB;AACjB,EAAA,IAAI,OAAA,EAAS;AACX,IAAA,MAAM,QAAQ,YAAA,GACV;AAAA,MACE,EAAE,GAAA,EAAK,MAAA,EAAQ,KAAA,EAAO,SAAA,EAAW,SAAS,IAAA,EAAK;AAAA,MAC/C,EAAE,GAAA,EAAK,QAAA,EAAU,KAAA,EAAO,WAAA,EAAa,SAAS,MAAA;AAAO,KACvD,GACA,CAAC,EAAE,GAAA,EAAK,QAAQ,KAAA,EAAO,SAAA,EAAW,OAAA,EAAS,IAAA,EAAM,CAAA;AACrD,IAAA,uBACE,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,KAAA,EAAO,CAAA,uCAAA,EAA0C,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,QAClE,EAAA;AAAA,QACA,gBAAA,EAAe,YAAA;AAAA,QACf,iBAAA,EAAgB,SAAA;AAAA,QAEhB,QAAA,kBAAA,GAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,EAAA,EAAI,GAAG,EAAE,CAAA,MAAA,CAAA;AAAA,YACT,KAAA;AAAA,YACA,KAAA;AAAA,YACA;AAAA;AAAA;AACF;AAAA,KACF;AAAA,EAEJ;AACA,EAAA,MAAM,WAAW,SAAA,mBACf,GAAA;AAAA,IAAC,eAAA;AAAA,IAAA;AAAA,MACC,EAAA,EAAI,GAAG,EAAE,CAAA,KAAA,CAAA;AAAA,MACT,OAAO,SAAA,IAAa,MAAA;AAAA,MACpB,MAAM,SAAA,CAAU,IAAA;AAAA,MAChB,KAAK,SAAA,CAAU,GAAA;AAAA,MACf,KAAK,SAAA,CAAU,GAAA;AAAA,MAEf,8BAAC,KAAA,EAAA,EAAI,KAAA,EAAM,+BAAA,EAAgC,iBAAA,EAAe,MACvD,QAAA,EAAA,IAAA,EACH;AAAA;AAAA,sBAGF,GAAA,CAAC,KAAA,EAAA,EAAI,OAAM,+BAAA,EAAgC,iBAAA,EAAe,MACvD,QAAA,EAAA,IAAA,EACH,CAAA;AAEF,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,eAAA,EAAkB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAC1C,EAAA;AAAA,MACA,gBAAA,EAAe,YAAA;AAAA,MACf,iBAAA,EAAgB,OAAA;AAAA,MAChB,YAAA,EAAY,KAAA;AAAA,MAEX,QAAA,EAAA;AAAA,QAAA,QAAA;AAAA,wBACD,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,KAAA,EAAM,iCAAA;AAAA,YACN,mBAAA,EAAiB,IAAA;AAAA,YACjB,cAAY,WAAA,IAAe,MAAA;AAAA,YAE1B,QAAA,EAAA;AAAA;AAAA;AACH;AAAA;AAAA,GACF;AAEJ","file":"split-view.js","sourcesContent":["import { NavStack } from './nav-stack.js';\nimport { ResizableRegion } from './resizable-region.js';\nimport type { KerfUiContent } from './semantic-content.js';\n\nexport interface SplitViewResizable {\n  size: number;\n  min: number;\n  max: number;\n}\n\nexport interface SplitViewProps {\n  id: string;\n  label: string;\n  /** The list (primary) pane. */\n  list: KerfUiContent;\n  /** The detail (secondary) pane. */\n  detail: KerfUiContent;\n  /**\n   * Compact (\"one pane at a time\") classes — a handset or portrait tablet.\n   * Derive from `deviceClass().value.compact`. When true the split collapses to\n   * a `NavStack`: the list is the root and the detail is pushed over it.\n   */\n  compact?: boolean;\n  /** In compact mode, whether the detail is currently pushed over the list. */\n  detailActive?: boolean;\n  /** Title/label for the list (compact NavStack root + region label). */\n  listTitle?: string;\n  /** Title/label for the detail (compact NavStack pushed view + region label). */\n  detailTitle?: string;\n  /** Back label for the compact NavStack (default \"Back\"). */\n  backLabel?: string;\n  /** A resizable separator on roomy classes (min/max px). Omit for a fixed split. */\n  resizable?: SplitViewResizable;\n  className?: string;\n}\n\n/**\n * A list-detail split. On roomy classes it shows both panes side\n * by side with an optional resizable separator; on compact classes it collapses\n * to a `NavStack` (list → detail). See `docs/23-app-layouts.md` §3.2. Compose the\n * resizable wiring with `wireResizableRegions` and the compact back with\n * `wireNavStack`.\n */\nexport function SplitView({\n  id,\n  label,\n  list,\n  detail,\n  compact = false,\n  detailActive = false,\n  listTitle = '',\n  detailTitle = '',\n  backLabel = 'Back',\n  resizable,\n  className = '',\n}: SplitViewProps) {\n  if (compact) {\n    const views = detailActive\n      ? [\n          { key: 'list', title: listTitle, content: list },\n          { key: 'detail', title: detailTitle, content: detail },\n        ]\n      : [{ key: 'list', title: listTitle, content: list }];\n    return (\n      <div\n        class={`kui-split-view kui-split-view--compact ${className}`.trim()}\n        id={id}\n        data-component=\"split-view\"\n        data-split-mode=\"compact\"\n      >\n        <NavStack\n          id={`${id}-stack`}\n          label={label}\n          views={views}\n          backLabel={backLabel}\n        />\n      </div>\n    );\n  }\n  const listPane = resizable ? (\n    <ResizableRegion\n      id={`${id}-list`}\n      label={listTitle || 'List'}\n      size={resizable.size}\n      min={resizable.min}\n      max={resizable.max}\n    >\n      <div class=\"kui-split-view__list kui-pane\" data-split-list>\n        {list}\n      </div>\n    </ResizableRegion>\n  ) : (\n    <div class=\"kui-split-view__list kui-pane\" data-split-list>\n      {list}\n    </div>\n  );\n  return (\n    <div\n      class={`kui-split-view ${className}`.trim()}\n      id={id}\n      data-component=\"split-view\"\n      data-split-mode=\"split\"\n      aria-label={label}\n    >\n      {listPane}\n      <div\n        class=\"kui-split-view__detail kui-pane\"\n        data-split-detail\n        aria-label={detailTitle || undefined}\n      >\n        {detail}\n      </div>\n    </div>\n  );\n}\n"]}

package/dist/state-banner.d.ts

@@ -1,6 +1,7 @@
 import { SafeHtml } from 'kerfjs';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
 
-type StateBannerTone = 'neutral' | 'info' | 'success' | 'warning' | 'danger';
+type StateBannerTone = 'neutral' | 'info' | 'pop' | 'success' | 'warning' | 'danger';
 type StateBannerUrgency = 'status' | 'alert';
 interface StateBannerProps {
     title: string;
@@ -8,7 +9,7 @@ interface StateBannerProps {
     /** Optional compact status or count shown beside the title. */
     badge?: string;
     icon?: SafeHtml;
-    action?: SafeHtml;
+    action?: KerfUiContent;
     tone?: StateBannerTone;
     urgency?: StateBannerUrgency;
     className?: string;

package/dist/state-banner.js

@@ -1,4 +1,5 @@
-export { StateBanner } from './chunk-W5L2JSBY.js';
+export { StateBanner } from './chunk-UDHHKZWO.js';
+
 
 
 //# sourceMappingURL=state-banner.js.map

package/dist/styles/catalog.css

@@ -460,6 +460,7 @@
 /* The related trigger carries a text label ("Component") beside the glyph, so let
    it grow to its content instead of the single-group's fixed 48px icon-button
    width (from toolbar-control-group.css). */
+.kui-catalog__related-group[data-single="true"] > .kui-catalog__related-menu,
 .kui-catalog__related-group[data-single="true"]
   > .kui-catalog__related-menu
   > wa-button,
@@ -469,6 +470,12 @@
   width: auto;
 }
 
+/* The menu owns a standard inner inset so long relationship names never touch
+   the popup border. */
+.kui-catalog__related-menu::part(menu) {
+  padding: var(--kui-wa-surface-inset, 0.5rem);
+}
+
 /* Keep the glyph beside the text label (the toolbar group paints the slotted svg
    `display: block`, which would otherwise drop the label onto a second line). */
 .kui-catalog__related-trigger {
@@ -484,7 +491,7 @@
 /* Group heading inside the related-entries popup menu (e.g. "Uses" / "Used by"). */
 .kui-catalog__related-heading {
   display: block;
-  padding: 0.25rem 0.75rem 0;
+  padding: 0.25rem var(--kui-wa-control-inset, 0.5rem) 0;
   color: var(--kui-color-text-quiet);
   font-size: var(--kui-font-xs);
   font-weight: 600;

package/dist/styles/collapsible-panel.css

@@ -23,6 +23,7 @@
 }
 
 .kui-collapsible-panel--bottom {
+  position: relative;
   width: 100%;
   height: var(--kui-collapsible-panel-height, 13.75rem);
   min-height: 0;
@@ -55,8 +56,8 @@
   height: 0;
 }
 
-/* The fixed-size sliding content: it keeps a definite size so the transform
-   reads as a slide, not a squeeze. */
+/* The fixed-size sliding content keeps a definite size so the transform reads
+   as a slide, not a squeeze. */
 .kui-collapsible-panel__content {
   height: 100%;
   transition: transform 200ms ease;
@@ -68,6 +69,9 @@
 }
 
 .kui-collapsible-panel--bottom .kui-collapsible-panel__content {
+  position: absolute;
+  inset-inline: 0;
+  inset-block-end: 0;
   width: 100%;
   height: var(--kui-collapsible-panel-height, 13.75rem);
 }