@kerfjs/ui 5.0.0-beta.51 → 5.0.0-beta.53

package/dist/{chunk-DVZCMMB3.js → chunk-X5QSICJ3.js}

@@ -1,7 +1,6 @@
-import { Skeleton } from './chunk-ULCDZTWL.js';
-import { em } from './chunk-MO56ZZLG.js';
 import { jsx } from 'kerfjs/jsx-runtime';
 
+// src/segmented-control.tsx
 function SegmentedControl({
   id,
   label,
@@ -33,7 +32,7 @@ function SegmentedControl({
       "aria-busy": placeholder ? "true" : void 0,
       slot,
       children: choices.map((choice) => {
-        const selected = choice.value === value;
+        const selected = !placeholder && choice.value === value;
         return /* @__PURE__ */ jsx(
           "button",
           {
@@ -47,7 +46,8 @@ function SegmentedControl({
             title: placeholder ? void 0 : choice.title,
             disabled: choice.disabled || placeholder,
             tabindex: placeholder ? "-1" : "0",
-            children: placeholder ? /* @__PURE__ */ jsx(Skeleton, { width: em(4) }) : choice.content ?? /* @__PURE__ */ jsx("span", { children: choice.label })
+            "data-kui-disabled": choice.disabled ? "true" : void 0,
+            children: choice.content ?? /* @__PURE__ */ jsx("span", { children: choice.label })
           }
         );
       })
@@ -57,4 +57,4 @@ function SegmentedControl({
 
 export { SegmentedControl };
 
-//# sourceMappingURL=chunk-DVZCMMB3.js.map
+//# sourceMappingURL=chunk-X5QSICJ3.js.map

package/dist/chunk-X5QSICJ3.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/segmented-control.tsx"],"names":[],"mappings":";;;AAgCO,SAAS,gBAAA,CAAuC;AAAA,EACrD,EAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA;AAAA,EACA,MAAA,GAAS,gBAAA;AAAA,EACT,UAAA,GAAa,QAAA;AAAA,EACb,KAAA,GAAQ,SAAA;AAAA,EACR,IAAA,GAAO,SAAA;AAAA,EACP,MAAA,GAAS,SAAA;AAAA,EACT,SAAA,GAAY,EAAA;AAAA,EACZ,WAAA,GAAc,KAAA;AAAA,EACd;AACF,CAAA,EAAiC;AAC/B,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,sBAAA,EAAyB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MACjD,gBAAA,EAAe,mBAAA;AAAA,MACf,2BAAA,EAA2B,EAAA;AAAA,MAC3B,YAAA,EAAY,KAAA;AAAA,MACZ,iBAAA,EAAiB,UAAA;AAAA,MACjB,YAAA,EAAY,KAAA;AAAA,MACZ,WAAA,EAAW,IAAA;AAAA,MACX,aAAA,EAAa,MAAA;AAAA,MACb,kBAAA,EAAkB,cAAc,MAAA,GAAS,MAAA;AAAA,MACzC,IAAA,EAAK,OAAA;AAAA,MACL,YAAA,EAAY,KAAA;AAAA,MACZ,WAAA,EAAW,cAAc,MAAA,GAAS,MAAA;AAAA,MAClC,IAAA;AAAA,MAEC,QAAA,EAAA,OAAA,CAAQ,GAAA,CAAI,CAAC,MAAA,KAAW;AAGvB,QAAA,MAAM,QAAA,GAAW,CAAC,WAAA,IAAe,MAAA,CAAO,KAAA,KAAU,KAAA;AAClD,QAAA,uBACE,GAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAK,QAAA;AAAA,YACL,KAAA,EAAM,6BAAA;AAAA,YACN,aAAA,EAAa,cAAc,MAAA,GAAY,MAAA;AAAA,YACvC,sBAAoB,MAAA,CAAO,KAAA;AAAA,YAC3B,eAAA,EAAe,OAAO,QAAQ,CAAA;AAAA,YAC9B,cAAY,MAAA,CAAO,KAAA;AAAA,YACnB,cAAA,EAAc,OAAO,QAAQ,CAAA;AAAA,YAC7B,KAAA,EAAO,WAAA,GAAc,MAAA,GAAY,MAAA,CAAO,KAAA;AAAA,YACxC,QAAA,EAAU,OAAO,QAAA,IAAY,WAAA;AAAA,YAC7B,QAAA,EAAU,cAAc,IAAA,GAAO,GAAA;AAAA,YAC/B,mBAAA,EAAmB,MAAA,CAAO,QAAA,GAAW,MAAA,GAAS,MAAA;AAAA,YAE7C,QAAA,EAAA,MAAA,CAAO,OAAA,oBAAW,GAAA,CAAC,MAAA,EAAA,EAAM,iBAAO,KAAA,EAAM;AAAA;AAAA,SACzC;AAAA,MAEJ,CAAC;AAAA;AAAA,GACH;AAEJ","file":"chunk-X5QSICJ3.js","sourcesContent":["import type { KerfUiContent } from './semantic-content.js';\n\nexport type SegmentedControlAppearance = 'filled' | 'outlined' | 'toolbar';\nexport type SegmentedControlShape = 'rounded' | 'pill';\nexport type SegmentedControlSize = 'small' | 'default';\nexport type SegmentedControlLayout = 'content' | 'equal';\n\nexport interface SegmentedControlChoice<Value extends string = string> {\n  value: Value;\n  label: string;\n  content?: KerfUiContent;\n  title?: string;\n  disabled?: boolean;\n}\n\nexport interface SegmentedControlProps<Value extends string = string> {\n  id: string;\n  label: string;\n  value: NoInfer<Value>;\n  choices: readonly SegmentedControlChoice<Value>[];\n  action?: string;\n  appearance?: SegmentedControlAppearance;\n  shape?: SegmentedControlShape;\n  size?: SegmentedControlSize;\n  layout?: SegmentedControlLayout;\n  className?: string;\n  /** Render as a loading placeholder: every choice keeps its live label or icon, none is selected, and every segment is disabled. */\n  placeholder?: boolean;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\nexport function SegmentedControl<Value extends string>({\n  id,\n  label,\n  value,\n  choices,\n  action = 'select-segment',\n  appearance = 'filled',\n  shape = 'rounded',\n  size = 'default',\n  layout = 'content',\n  className = '',\n  placeholder = false,\n  slot,\n}: SegmentedControlProps<Value>) {\n  return (\n    <div\n      class={`kui-segmented-control ${className}`.trim()}\n      data-component=\"segmented-control\"\n      data-segmented-control-id={id}\n      data-value={value}\n      data-appearance={appearance}\n      data-shape={shape}\n      data-size={size}\n      data-layout={layout}\n      data-placeholder={placeholder ? 'true' : undefined}\n      role=\"group\"\n      aria-label={label}\n      aria-busy={placeholder ? 'true' : undefined}\n      slot={slot}\n    >\n      {choices.map((choice) => {\n        // The choices are known chrome; only the selection is unknown while\n        // loading, so a placeholder shows every choice and selects none.\n        const selected = !placeholder && choice.value === value;\n        return (\n          <button\n            type=\"button\"\n            class=\"kui-segmented-control__item\"\n            data-action={placeholder ? undefined : action}\n            data-segment-value={choice.value}\n            data-selected={String(selected)}\n            aria-label={choice.label}\n            aria-pressed={String(selected)}\n            title={placeholder ? undefined : choice.title}\n            disabled={choice.disabled || placeholder}\n            tabindex={placeholder ? '-1' : '0'}\n            data-kui-disabled={choice.disabled ? 'true' : undefined}\n          >\n            {choice.content ?? <span>{choice.label}</span>}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n"]}

package/dist/{chunk-JMGKM7RK.js → chunk-ZMBU522F.js}

@@ -1,4 +1,4 @@
-import { space } from './chunk-MO56ZZLG.js';
+import { space } from './chunk-WZ2GLEY4.js';
 import { jsx } from 'kerfjs/jsx-runtime';
 
 var spaceNames = [
@@ -41,4 +41,4 @@ function Spacer({
 
 export { Spacer };
 
-//# sourceMappingURL=chunk-JMGKM7RK.js.map
+//# sourceMappingURL=chunk-ZMBU522F.js.map

package/dist/{chunk-JMGKM7RK.js.map → chunk-ZMBU522F.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/spacer.tsx"],"names":[],"mappings":";;;AAEA,IAAM,UAAA,GAAqC;AAAA,EACzC,MAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA;AAAA,EACA,GAAA;AAAA,EACA,GAAA;AAAA,EACA,GAAA;AAAA,EACA;AACF,CAAA;AAcA,SAAS,UAAU,KAAA,EAAwD;AACzE,EAAA,OAAO,WAAW,QAAA,CAAS,KAAoB,CAAA,GAC3C,KAAA,CAAM,KAAoB,CAAA,GACzB,KAAA;AACP;AAGO,SAAS,MAAA,CAAO;AAAA,EACrB,IAAA,GAAO,KAAA;AAAA,EACP,KAAA;AAAA,EACA,MAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ;AACF,CAAA,EAAgB;AACd,EAAA,MAAM,UAAA,GAAa,UAAU,KAAK,CAAA;AAClC,EAAA,MAAM,WAAA,GAAc,UAAU,MAAM,CAAA;AACpC,EAAA,MAAM,KAAA,GAAQ;AAAA,IACZ,UAAA,GAAa,CAAA,MAAA,EAAS,UAAU,CAAA,CAAA,GAAK,EAAA;AAAA,IACrC,WAAA,GAAc,CAAA,OAAA,EAAU,WAAW,CAAA,CAAA,GAAK;AAAA,GAC1C,CACG,MAAA,CAAO,OAAO,CAAA,CACd,KAAK,GAAG,CAAA;AAEX,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,WAAA,EAAc,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MACtC,gBAAA,EAAe,QAAA;AAAA,MACf,WAAA,EAAW,OAAO,IAAI,CAAA;AAAA,MACtB,aAAA,EAAY,MAAA;AAAA,MACZ,OAAO,KAAA,IAAS,MAAA;AAAA,MAChB;AAAA;AAAA,GACD;AAEL","file":"chunk-JMGKM7RK.js","sourcesContent":["import { type CssLength, space, type UiSpaceName } from './css-values.js';\n\nconst spaceNames: readonly UiSpaceName[] = [\n  'none',\n  '2xs',\n  'xs',\n  's',\n  'm',\n  'l',\n  'xl',\n];\n\nexport interface SpacerProps {\n  /** Grow and shrink to fill the available space along a parent's flex axis. */\n  flex?: boolean;\n  /** A named UI spacing token or typed physical width. */\n  width?: UiSpaceName | CssLength;\n  /** A named UI spacing token or typed physical height. */\n  height?: UiSpaceName | CssLength;\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\nfunction dimension(value?: UiSpaceName | CssLength): CssLength | undefined {\n  return spaceNames.includes(value as UiSpaceName)\n    ? space(value as UiSpaceName)\n    : (value as CssLength | undefined);\n}\n\n/** A decorative fixed-size or flexible gap for Row, List, and other flex layouts. */\nexport function Spacer({\n  flex = false,\n  width,\n  height,\n  className = '',\n  slot,\n}: SpacerProps) {\n  const widthValue = dimension(width);\n  const heightValue = dimension(height);\n  const style = [\n    widthValue ? `width:${widthValue}` : '',\n    heightValue ? `height:${heightValue}` : '',\n  ]\n    .filter(Boolean)\n    .join(';');\n\n  return (\n    <div\n      class={`kui-spacer ${className}`.trim()}\n      data-component=\"spacer\"\n      data-flex={String(flex)}\n      aria-hidden=\"true\"\n      style={style || undefined}\n      slot={slot}\n    ></div>\n  );\n}\n\nexport type { CssLength, UiSpaceName } from './css-values.js';\n"]}
+{"version":3,"sources":["../src/spacer.tsx"],"names":[],"mappings":";;;AAEA,IAAM,UAAA,GAAqC;AAAA,EACzC,MAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA;AAAA,EACA,GAAA;AAAA,EACA,GAAA;AAAA,EACA,GAAA;AAAA,EACA;AACF,CAAA;AAcA,SAAS,UAAU,KAAA,EAAwD;AACzE,EAAA,OAAO,WAAW,QAAA,CAAS,KAAoB,CAAA,GAC3C,KAAA,CAAM,KAAoB,CAAA,GACzB,KAAA;AACP;AAGO,SAAS,MAAA,CAAO;AAAA,EACrB,IAAA,GAAO,KAAA;AAAA,EACP,KAAA;AAAA,EACA,MAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ;AACF,CAAA,EAAgB;AACd,EAAA,MAAM,UAAA,GAAa,UAAU,KAAK,CAAA;AAClC,EAAA,MAAM,WAAA,GAAc,UAAU,MAAM,CAAA;AACpC,EAAA,MAAM,KAAA,GAAQ;AAAA,IACZ,UAAA,GAAa,CAAA,MAAA,EAAS,UAAU,CAAA,CAAA,GAAK,EAAA;AAAA,IACrC,WAAA,GAAc,CAAA,OAAA,EAAU,WAAW,CAAA,CAAA,GAAK;AAAA,GAC1C,CACG,MAAA,CAAO,OAAO,CAAA,CACd,KAAK,GAAG,CAAA;AAEX,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,WAAA,EAAc,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MACtC,gBAAA,EAAe,QAAA;AAAA,MACf,WAAA,EAAW,OAAO,IAAI,CAAA;AAAA,MACtB,aAAA,EAAY,MAAA;AAAA,MACZ,OAAO,KAAA,IAAS,MAAA;AAAA,MAChB;AAAA;AAAA,GACD;AAEL","file":"chunk-ZMBU522F.js","sourcesContent":["import { type CssLength, space, type UiSpaceName } from './css-values.js';\n\nconst spaceNames: readonly UiSpaceName[] = [\n  'none',\n  '2xs',\n  'xs',\n  's',\n  'm',\n  'l',\n  'xl',\n];\n\nexport interface SpacerProps {\n  /** Grow and shrink to fill the available space along a parent's flex axis. */\n  flex?: boolean;\n  /** A named UI spacing token or typed physical width. */\n  width?: UiSpaceName | CssLength;\n  /** A named UI spacing token or typed physical height. */\n  height?: UiSpaceName | CssLength;\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\nfunction dimension(value?: UiSpaceName | CssLength): CssLength | undefined {\n  return spaceNames.includes(value as UiSpaceName)\n    ? space(value as UiSpaceName)\n    : (value as CssLength | undefined);\n}\n\n/** A decorative fixed-size or flexible gap for Row, List, and other flex layouts. */\nexport function Spacer({\n  flex = false,\n  width,\n  height,\n  className = '',\n  slot,\n}: SpacerProps) {\n  const widthValue = dimension(width);\n  const heightValue = dimension(height);\n  const style = [\n    widthValue ? `width:${widthValue}` : '',\n    heightValue ? `height:${heightValue}` : '',\n  ]\n    .filter(Boolean)\n    .join(';');\n\n  return (\n    <div\n      class={`kui-spacer ${className}`.trim()}\n      data-component=\"spacer\"\n      data-flex={String(flex)}\n      aria-hidden=\"true\"\n      style={style || undefined}\n      slot={slot}\n    ></div>\n  );\n}\n\nexport type { CssLength, UiSpaceName } from './css-values.js';\n"]}

package/dist/css-values.d.ts

@@ -53,7 +53,7 @@ type CssFlexBasis = CssLength | 'auto' | 'content' | 'min-content' | 'max-conten
 type CssSizeKeyword = 'auto' | 'min-content' | 'max-content' | 'fit-content';
 /** A complete width/height value accepted by dimension-valued UI props. */
 type CssSize = CssLength | CssSizeKeyword;
-declare const uiColorNames: readonly ["accent", "accent-text", "border", "border-quiet", "brand-border-loud", "brand-border-normal", "brand-border-quiet", "brand-fill-loud", "brand-fill-normal", "brand-fill-quiet", "brand-on-fill", "brand-on-loud", "brand-on-normal", "brand-on-quiet", "danger", "danger-border-loud", "danger-border-normal", "danger-border-quiet", "danger-fill-loud", "danger-fill-normal", "danger-fill-quiet", "danger-on-loud", "danger-on-normal", "danger-on-quiet", "danger-text", "neutral-border-loud", "neutral-border-normal", "neutral-border-quiet", "neutral-fill-loud", "neutral-fill-normal", "neutral-fill-quiet", "neutral-on-loud", "neutral-on-normal", "neutral-on-quiet", "pop", "pop-border-loud", "pop-border-normal", "pop-border-quiet", "pop-fill-loud", "pop-fill-normal", "pop-fill-quiet", "pop-on-fill", "pop-on-loud", "pop-on-normal", "pop-on-quiet", "pop-text", "success", "success-border-loud", "success-border-normal", "success-border-quiet", "success-fill-loud", "success-fill-normal", "success-fill-quiet", "success-on-fill", "success-on-loud", "success-on-normal", "success-on-quiet", "success-text", "surface", "surface-lowered", "surface-raised", "text", "text-link", "text-quiet", "warning", "warning-border-loud", "warning-border-normal", "warning-border-quiet", "warning-fill-loud", "warning-fill-normal", "warning-fill-quiet", "warning-on-fill", "warning-on-loud", "warning-on-normal", "warning-on-quiet", "warning-text"];
+declare const uiColorNames: readonly ["accent", "accent-text", "border", "border-quiet", "brand-border-loud", "brand-border-normal", "brand-border-quiet", "brand-fill-loud", "brand-fill-normal", "brand-fill-quiet", "brand-on-fill", "brand-on-loud", "brand-on-normal", "brand-on-quiet", "danger", "danger-border-loud", "danger-border-normal", "danger-border-quiet", "danger-fill-loud", "danger-fill-normal", "danger-fill-quiet", "danger-on-fill", "danger-on-loud", "danger-on-normal", "danger-on-quiet", "danger-text", "neutral-border-loud", "neutral-border-normal", "neutral-border-quiet", "neutral-fill-loud", "neutral-fill-normal", "neutral-fill-quiet", "neutral-on-loud", "neutral-on-normal", "neutral-on-quiet", "pop", "pop-border-loud", "pop-border-normal", "pop-border-quiet", "pop-fill-loud", "pop-fill-normal", "pop-fill-quiet", "pop-on-fill", "pop-on-loud", "pop-on-normal", "pop-on-quiet", "pop-text", "success", "success-border-loud", "success-border-normal", "success-border-quiet", "success-fill-loud", "success-fill-normal", "success-fill-quiet", "success-on-fill", "success-on-loud", "success-on-normal", "success-on-quiet", "success-text", "surface", "surface-lowered", "surface-raised", "text", "text-link", "text-quiet", "warning", "warning-border-loud", "warning-border-normal", "warning-border-quiet", "warning-fill-loud", "warning-fill-normal", "warning-fill-quiet", "warning-on-fill", "warning-on-loud", "warning-on-normal", "warning-on-quiet", "warning-text"];
 /** Names of the public `--kui-color-*` semantic tokens. */
 type UiColorName = (typeof uiColorNames)[number];
 /**
@@ -69,6 +69,8 @@ type UiSpaceName = 'none' | '2xs' | 'xs' | 's' | 'm' | 'l' | 'xl';
 declare function px(value: number): CssLength;
 /** Create a complete root-font-relative length. */
 declare function rem(value: number): CssLength;
+/** Converts a pixel value into rem units by dividing by 16. */
+declare function remify(value: number): CssLength;
 /** Create a complete current-font-relative length. */
 declare function em(value: number): CssLength;
 /** Create a complete percentage length. */
@@ -108,4 +110,4 @@ declare function colorVar(name: `--${string}`, fallback?: CssColor): CssColor;
  */
 declare function foregroundColorVar(name: `--${string}`, fallback?: CssForegroundColor): 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, 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, foregroundColorVar, lengthVar, pct, plus, px, rem, remify, space, uiColor };

package/dist/css-values.js

@@ -1,3 +1,3 @@
-export { calc, colorVar, em, flex, foregroundColorVar, lengthVar, pct, plus, px, rem, space, uiColor } from './chunk-MO56ZZLG.js';
+export { calc, colorVar, em, flex, foregroundColorVar, lengthVar, pct, plus, px, rem, remify, space, uiColor } from './chunk-WZ2GLEY4.js';
 
 //# sourceMappingURL=css-values.js.map

package/dist/grid.js

@@ -1,4 +1,4 @@
-export { Grid } from './chunk-AEPXGCNF.js';
+export { Grid } from './chunk-C2FAYFDE.js';
 
 
 

package/dist/index.js

@@ -1,38 +1,38 @@
 export { wireTokenSearchFields } from './chunk-CMUIXJZM.js';
-export { ValueTable, ValueTableRow } from './chunk-UPZ6EEJN.js';
+export { ValueTable, ValueTableRow } from './chunk-44IG7PFV.js';
 export { wireResizableRegions } from './chunk-EKYZCRCX.js';
 export { reorderTabs, wireTabBars } from './chunk-UKKSMZYT.js';
 export { DialogSurface, PopupSurface } from './chunk-NN6GYOA2.js';
 export { TabBar } from './chunk-N3GKMPDW.js';
 export { TokenSearchField, placeTokenSearchCaret, readTokenSearchField } from './chunk-HJKRCKDR.js';
-export { SegmentedControl } from './chunk-DVZCMMB3.js';
-export { Select } from './chunk-UBH743HV.js';
-export { Spacer } from './chunk-JMGKM7RK.js';
-export { StateBanner } from './chunk-JM53SMVF.js';
+export { SegmentedControl } from './chunk-X5QSICJ3.js';
+export { Select } from './chunk-T22EM4ET.js';
+export { Spacer } from './chunk-ZMBU522F.js';
+export { StateBanner } from './chunk-BJJKFVWW.js';
 export { SunkenPanel } from './chunk-6ZXOQEAN.js';
 export { ResizableRegion, clampRegionSize, resizeRegionFromPointer } from './chunk-VOCPXGQN.js';
-export { Row } from './chunk-NZXWU4R5.js';
+export { Row } from './chunk-5I22LMCV.js';
 export { EmptyState } from './chunk-E36EVCKG.js';
 export { FloatingToolbar } from './chunk-NDUGJ4TU.js';
-export { Grid } from './chunk-AEPXGCNF.js';
-export { ListActionRow } from './chunk-D547PH4L.js';
+export { Grid } from './chunk-C2FAYFDE.js';
+export { ListActionRow } from './chunk-RNZAKSME.js';
 export { ListInsetControl } from './chunk-D7GWXIAS.js';
 export { ListInsetText } from './chunk-ZK5EGVFP.js';
-export { AppTab } from './chunk-5FZZMIMD.js';
+export { AppTab } from './chunk-CCMKJWLX.js';
 export { ToolbarActionLink, ToolbarControlGroup } from './chunk-ZIYOJFZD.js';
 export { Toolbar } from './chunk-MTM43SJO.js';
-export { ListItem } from './chunk-NMGTHYW3.js';
-export { List } from './chunk-S4QRSBFI.js';
-export { ToolbarText } from './chunk-O3RCCSQJ.js';
+export { ListItem } from './chunk-GUIHMIT2.js';
+export { List } from './chunk-3NBL3OUQ.js';
+export { ToolbarText } from './chunk-TZ5IHWB2.js';
 export { Pane } from './chunk-7GUQYHKA.js';
 
 export { LoadingSpinner } from './chunk-ZLWQZUGF.js';
-export { ListHeader } from './chunk-KX7DP2GO.js';
+export { ListHeader } from './chunk-KPNTVB7A.js';
 export { Text } from './chunk-7IUSV4XG.js';
-export { Skeleton } from './chunk-ULCDZTWL.js';
+export { Skeleton } from './chunk-ATHXW6RP.js';
 
 export { Badge } from './chunk-XD7DWYXG.js';
-export { calc, colorVar, em, flex, foregroundColorVar, lengthVar, pct, plus, px, rem, space, uiColor } from './chunk-MO56ZZLG.js';
+export { calc, colorVar, em, flex, foregroundColorVar, lengthVar, pct, plus, px, rem, space, uiColor } from './chunk-WZ2GLEY4.js';
 export { DisclosureArrow } from './chunk-HMQ2ZDGG.js';
 export { LucideIcon } from './chunk-4R777DUZ.js';
 

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

@@ -18,6 +18,7 @@ type ListActionRowTrailingAttributes = Readonly<Record<`data-${string}`, string
     'data-component'?: never;
     'data-action'?: never;
     'data-item-id'?: never;
+    'data-kui-disabled'?: never;
     popoverTarget?: string;
     popoverTargetAction?: 'toggle' | 'show' | 'hide';
     'aria-controls'?: string;
@@ -43,7 +44,7 @@ interface ListActionRowProps {
     state?: string;
     disabled?: boolean;
     tabIndex?: number;
-    /** Render as an unanimated loading skeleton, disabling both actions. */
+    /** Render as an unanimated loading skeleton, disabling both actions: label, description, icon, and status text become skeletons; the `busy` indicator stays live. */
     placeholder?: boolean;
     trailingAction: string;
     trailingActionLabel: string;

package/dist/list-action-row.js

@@ -1,4 +1,4 @@
-export { ListActionRow } from './chunk-D547PH4L.js';
+export { ListActionRow } from './chunk-RNZAKSME.js';
 
 
 

package/dist/list-header.d.ts

@@ -14,6 +14,7 @@ type ListHeaderRootAttributes = Readonly<Record<`data-${string}`, string | undef
 }>;
 type ListHeaderTriggerAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
     'data-action'?: never;
+    'data-kui-disabled'?: never;
     popoverTarget?: string;
     popoverTargetAction?: 'toggle' | 'show' | 'hide';
     'aria-controls'?: string;

package/dist/list-header.js

@@ -1,4 +1,4 @@
-export { ListHeader } from './chunk-KX7DP2GO.js';
+export { ListHeader } from './chunk-KPNTVB7A.js';
 
 
 

package/dist/list-item.d.ts

@@ -12,16 +12,18 @@ type ListItemRootAttributes = Readonly<Record<`data-${string}`, string | undefin
     'data-divider'?: never;
     'data-busy'?: never;
     'data-state'?: never;
+    'data-kui-disabled'?: never;
 }>;
 interface ListItemProps {
     label: string | SafeHtml;
     /** App-owned supporting text rendered in the component's stable label stack. */
     description?: string | SafeHtml;
     icon?: SafeHtml;
+    /** Dormant author content at the row's end; a placeholder renders it as a skeleton. */
     trailing?: KerfUiContent;
-    /** Dormant status metadata rendered before trailing content. */
+    /** Dormant status metadata rendered before trailing content; a placeholder renders it as a skeleton. */
     status?: string | SafeHtml;
-    /** Show a progress indicator and expose the row as busy without replacing its content. */
+    /** Show a progress indicator and expose the row as busy without replacing its content; a placeholder keeps the indicator. */
     busy?: boolean;
     density?: 'standard' | 'compact';
     divider?: 'none' | 'before' | 'after' | 'both';
@@ -36,7 +38,7 @@ interface ListItemProps {
     state?: string;
     disabled?: boolean;
     tabIndex?: number;
-    /** Render the row as an unanimated loading skeleton, disabling its action. */
+    /** Render the row as an unanimated loading skeleton, disabling its action: label, description, icon, status, and trailing content become skeletons; the `busy` indicator stays live. */
     placeholder?: boolean;
     rootAttributes?: ListItemRootAttributes;
     /** Native named-slot assignment when composed inside a web component. */

package/dist/list-item.js

@@ -1,4 +1,4 @@
-export { ListItem } from './chunk-NMGTHYW3.js';
+export { ListItem } from './chunk-GUIHMIT2.js';
 
 
 

package/dist/list.js

@@ -1,4 +1,4 @@
-export { List } from './chunk-S4QRSBFI.js';
+export { List } from './chunk-3NBL3OUQ.js';
 
 
 

package/dist/nav-stack.js

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

package/dist/row.js

@@ -1,4 +1,4 @@
-export { Row } from './chunk-NZXWU4R5.js';
+export { Row } from './chunk-5I22LMCV.js';
 
 
 

package/dist/segmented-control.d.ts

@@ -23,7 +23,7 @@ interface SegmentedControlProps<Value extends string = string> {
     size?: SegmentedControlSize;
     layout?: SegmentedControlLayout;
     className?: string;
-    /** Render as an unanimated loading skeleton, disabling every segment. */
+    /** Render as a loading placeholder: every choice keeps its live label or icon, none is selected, and every segment is disabled. */
     placeholder?: boolean;
     /** Native named-slot assignment when composed inside a web component. */
     slot?: string;

package/dist/segmented-control.js

@@ -1,5 +1,3 @@
-export { SegmentedControl } from './chunk-DVZCMMB3.js';
-
-
+export { SegmentedControl } from './chunk-X5QSICJ3.js';
 
 //# sourceMappingURL=segmented-control.js.map

package/dist/select.js

@@ -1,4 +1,4 @@
-export { Select } from './chunk-UBH743HV.js';
+export { Select } from './chunk-T22EM4ET.js';
 
 
 

package/dist/skeleton.d.ts

@@ -10,6 +10,10 @@ interface SkeletonProps {
     radius?: CssLength;
     /** Render this many stacked lines (the last one shorter), for multi-line text. */
     lines?: number;
+    /** Lay the block out as `display: block` instead of the default
+     *  `inline-block`, so it takes no text line of its own: no baseline gap
+     *  below it, and it centers like an icon in a slot. Defaults to `false`. */
+    block?: boolean;
     /** Accessible label. Omit to keep the block decorative (`aria-hidden`). */
     label?: string;
     className?: string;
@@ -22,6 +26,6 @@ interface SkeletonProps {
  * `placeholder` prop. Decorative by default (`aria-hidden`); pass `label` to
  * announce it. Sizes to its slot unless `width`/`height` are given.
  */
-declare function Skeleton({ width, height, radius, lines, label, className, slot, }: SkeletonProps): kerfjs.SafeHtml;
+declare function Skeleton({ width, height, radius, lines, block, label, className, slot, }: SkeletonProps): kerfjs.SafeHtml;
 
 export { Skeleton, type SkeletonProps };

package/dist/skeleton.js

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

package/dist/spacer.js

@@ -1,4 +1,4 @@
-export { Spacer } from './chunk-JMGKM7RK.js';
+export { Spacer } from './chunk-ZMBU522F.js';
 
 
 //# sourceMappingURL=spacer.js.map

package/dist/split-view.js

@@ -1,4 +1,4 @@
-import { NavStack } from './chunk-5PMGQDG7.js';
+import { NavStack } from './chunk-DQA5FMOX.js';
 import { ResizableRegion } from './chunk-VOCPXGQN.js';
 
 

package/dist/state-banner.d.ts

@@ -13,7 +13,7 @@ interface StateBannerProps {
     tone?: StateBannerTone;
     urgency?: StateBannerUrgency;
     className?: string;
-    /** Render the title, badge, and detail as unanimated loading skeletons, keeping the icon and tone. */
+    /** 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. */
     placeholder?: boolean;
     /** Native named-slot assignment when composed inside a web component. */
     slot?: string;

package/dist/state-banner.js

@@ -1,4 +1,4 @@
-export { StateBanner } from './chunk-JM53SMVF.js';
+export { StateBanner } from './chunk-BJJKFVWW.js';
 
 
 

package/dist/styles/app-tab.css

@@ -148,6 +148,15 @@
 .kui-app-tab__close:hover {
   color: var(--kui-color-text);
 }
+/* A dormant tab keeps its close button's space, so it matches the live tab's
+   geometry, but never shows a control it has disabled. */
+.kui-app-tab:is([data-placeholder="true"], [data-pending="true"])
+  .kui-app-tab__close {
+  visibility: hidden;
+}
+.kui-app-tab[data-pending="true"] .kui-app-tab__name {
+  color: var(--kui-color-text-quiet);
+}
 .kui-app-tab__close-icon {
   display: grid;
   width: 0.6375rem;

package/dist/styles/badge.css

@@ -27,7 +27,7 @@
   --_kui-badge-fill-quiet: var(--kui-color-brand-fill-quiet);
   --_kui-badge-fill-solid: var(--kui-color-brand-on-fill);
   --_kui-badge-border: var(--kui-color-brand-border-normal);
-  --_kui-badge-on-quiet: var(--kui-color-brand-on-quiet);
+  --_kui-badge-on-quiet: var(--kui-color-brand-on-fill);
   --_kui-badge-on-solid: var(--kui-color-surface);
 }
 
@@ -35,7 +35,7 @@
   --_kui-badge-fill-quiet: var(--kui-color-pop-fill-quiet);
   --_kui-badge-fill-solid: var(--kui-color-pop-on-fill);
   --_kui-badge-border: var(--kui-color-pop-border-normal);
-  --_kui-badge-on-quiet: var(--kui-color-pop-on-quiet);
+  --_kui-badge-on-quiet: var(--kui-color-pop-on-fill);
   --_kui-badge-on-solid: var(--kui-color-surface);
 }
 
@@ -43,7 +43,7 @@
   --_kui-badge-fill-quiet: var(--kui-color-success-fill-quiet);
   --_kui-badge-fill-solid: var(--kui-color-success-on-fill);
   --_kui-badge-border: var(--kui-color-success-border-normal);
-  --_kui-badge-on-quiet: var(--kui-color-success-on-quiet);
+  --_kui-badge-on-quiet: var(--kui-color-success-on-fill);
   --_kui-badge-on-solid: var(--kui-color-surface);
 }
 
@@ -51,19 +51,30 @@
   --_kui-badge-fill-quiet: var(--kui-color-warning-fill-quiet);
   --_kui-badge-fill-solid: var(--kui-color-warning-on-fill);
   --_kui-badge-border: var(--kui-color-warning-border-normal);
-  --_kui-badge-on-quiet: var(--kui-color-warning-on-quiet);
+  --_kui-badge-on-quiet: var(--kui-color-warning-on-fill);
   --_kui-badge-on-solid: var(--kui-color-surface);
 }
 
 .kui-badge[data-tone="danger"] {
   --_kui-badge-fill-quiet: var(--kui-color-danger-fill-quiet);
-  --_kui-badge-fill-solid: var(--kui-color-danger-on-quiet);
+  --_kui-badge-fill-solid: var(--kui-color-danger-on-fill);
   --_kui-badge-border: var(--kui-color-danger-border-normal);
-  --_kui-badge-on-quiet: var(--kui-color-danger-on-quiet);
+  --_kui-badge-on-quiet: var(--kui-color-danger-on-fill);
   --_kui-badge-on-solid: var(--kui-color-surface);
 }
 
 .kui-badge[data-appearance="solid"] {
+  /* A placeholder's skeleton inside a solid badge: the generic text-color tint
+     is nearly invisible on the saturated fill, so derive it from the badge's
+     own foreground instead, which contrasts with the fill in every tone and
+     color scheme. Quiet and outline badges sit on a pale fill and keep the
+     generic tint. */
+  --_kui-skeleton-fill: color-mix(
+    in srgb,
+    var(--_kui-badge-on-solid) 45%,
+    transparent
+  );
+
   color: var(--_kui-badge-on-solid);
   background: var(--_kui-badge-fill-solid);
 }

package/dist/styles/collapsible-panel.css

@@ -232,7 +232,7 @@
 .kui-collapsible-panel[data-presentation="overlay"] {
   position: fixed;
   z-index: var(--kui-collapsible-panel-overlay-z, 40);
-  box-shadow: var(--kui-shadow-l, 0 8px 32px rgb(0 0 0 / 24%));
+  box-shadow: var(--kui-shadow-l);
 }
 
 [data-collapsible-overlay="true"] .kui-collapsible-panel--left,