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

package/dist/index.js

@@ -1,38 +1,38 @@
 export { wireTokenSearchFields } from './chunk-CMUIXJZM.js';
-export { ValueTable, ValueTableRow } from './chunk-2S7OWAEV.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-M6GLI6A6.js';
-export { Select } from './chunk-ABAXNUXU.js';
-export { Spacer } from './chunk-4XE2CDYB.js';
-export { StateBanner } from './chunk-JGFZ42ZF.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-DNCOFEUL.js';
+export { Row } from './chunk-5I22LMCV.js';
 export { EmptyState } from './chunk-E36EVCKG.js';
 export { FloatingToolbar } from './chunk-NDUGJ4TU.js';
-export { Grid } from './chunk-T7C2VZUB.js';
-export { ListActionRow } from './chunk-OSCL5TKR.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-IR53BQUJ.js';
+export { AppTab } from './chunk-CCMKJWLX.js';
 export { ToolbarActionLink, ToolbarControlGroup } from './chunk-ZIYOJFZD.js';
 export { Toolbar } from './chunk-MTM43SJO.js';
-export { ListItem } from './chunk-LIOXPQ7N.js';
-export { List } from './chunk-7XJO4D6A.js';
-export { ToolbarText } from './chunk-YZV2PTY4.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-3S7OUHUN.js';
+export { ListHeader } from './chunk-KPNTVB7A.js';
 export { Text } from './chunk-7IUSV4XG.js';
-export { Skeleton } from './chunk-KAQUUTZR.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-2CE22Q2K.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-OSCL5TKR.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-3S7OUHUN.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-LIOXPQ7N.js';
+export { ListItem } from './chunk-GUIHMIT2.js';
 
 
 

package/dist/list.js

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

package/dist/nav-stack.js

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

package/dist/row.js

@@ -1,4 +1,4 @@
-export { Row } from './chunk-DNCOFEUL.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-M6GLI6A6.js';
-
-
+export { SegmentedControl } from './chunk-X5QSICJ3.js';
 
 //# sourceMappingURL=segmented-control.js.map

package/dist/select.js

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

package/dist/skeleton.js

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

package/dist/spacer.js

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

package/dist/split-view.js

@@ -1,4 +1,4 @@
-import { NavStack } from './chunk-SV22UIW4.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-JGFZ42ZF.js';
+export { StateBanner } from './chunk-BJJKFVWW.js';
 
 
 

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,

package/dist/styles/foundation.css

@@ -80,13 +80,21 @@
   --kui-radius-pill: var(--wa-border-radius-pill, 999px);
   --kui-disclosure-icon-scale: 0.5;
   /* macOS Tahoe light semantics used by Hot Sheet 2, with a compatible dark extension. */
+  /* Every --kui-color-* token (and the focus-ring color) that reads a --wa-*
+     token falls back to the value src/webawesome.css assigns to that token,
+     including its light-dark() pair, so a page without the Web Awesome theme
+     resolves the same palette in both color schemes. A single light color
+     here would render, e.g., dark red danger text on a dark surface, and a
+     fallback that points at a different token (surface-raised at the surface,
+     text-link at the brand fill) silently diverges from the theme.
+     tests/browser/tone-contrast.spec.ts pins the parity for every token. */
   --kui-color-surface: var(
     --wa-color-surface-default,
     light-dark(#fff, #1c1c1e)
   );
   --kui-color-surface-raised: var(
     --wa-color-surface-raised,
-    var(--kui-color-surface)
+    light-dark(#fff, #2c2c2e)
   );
   --kui-color-surface-lowered: var(
     --wa-color-surface-lowered,
@@ -99,7 +107,7 @@
   );
   --kui-color-text-link: var(
     --wa-color-text-link,
-    var(--kui-color-brand-fill-loud)
+    var(--kui-color-brand-on-quiet)
   );
 
   --kui-color-neutral-fill-quiet: var(
@@ -116,7 +124,7 @@
   );
   --kui-color-neutral-border-quiet: var(
     --wa-color-neutral-border-quiet,
-    var(--kui-color-neutral-fill-normal)
+    light-dark(#e5e5ea, #38383a)
   );
   --kui-color-neutral-border-normal: var(
     --wa-color-neutral-border-normal,
@@ -141,7 +149,7 @@
 
   --kui-color-brand-fill-loud: var(
     --wa-color-brand-fill-loud,
-    light-dark(#0088ff, #64d2ff)
+    light-dark(#0075db, #64d2ff)
   );
   --kui-color-brand-fill-quiet: var(
     --wa-color-brand-fill-quiet,
@@ -179,21 +187,30 @@
     --wa-color-brand-border-loud,
     var(--kui-color-brand-fill-loud)
   );
+  /* The light brand/success/warning on-quiet values are Kerf-owned (mirrored
+     in src/webawesome.css): each is the Hot Sheet 2 hue darkened just enough to
+     clear WCAG AA (>=4.5:1) on the lowered page background (#f2f2f7), not only
+     on the white surface. The prior #1e6ef4 / #008932 / #a16a00 reached ~4.1:1
+     there. Brand #0c62f3 is 4.64:1, success #007f2e 4.62:1, warning #966200
+     4.65:1 on the page (5.2:1 on white). */
   --kui-color-brand-on-quiet: var(
     --wa-color-brand-on-quiet,
-    light-dark(#1e6ef4, #8acbff)
+    light-dark(#0c62f3, #8acbff)
   );
   --kui-color-brand-on-normal: var(
     --wa-color-brand-on-normal,
     var(--kui-color-brand-on-quiet)
   );
-  --kui-color-brand-on-loud: var(--wa-color-brand-on-loud, #fff);
+  --kui-color-brand-on-loud: var(
+    --wa-color-brand-on-loud,
+    light-dark(#fff, #111113)
+  );
   /* Brand accent text placed directly ON a brand fill (quiet or normal), such as
      the info StateBanner and Select's current option. Darker than brand-on-quiet
-     so it clears WCAG AA (>=4.5:1): brand-on-quiet (#1e6ef4) resolves to only
-     3.77:1 over brand-fill-normal (#d6ecff) and 4.15:1 over brand-fill-quiet
-     (#ebf6ff), while #1a5dcf (same hue) clears ~4.9:1 and ~5.2:1 there. The dark
-     value matches brand-on-quiet, which already passes over the dark fills. */
+     so it clears WCAG AA (>=4.5:1): brand-on-quiet (#0c62f3) resolves to only
+     4.26:1 over brand-fill-normal (#d6ecff), while #1a5dcf (same hue) clears
+     ~4.9:1 there and ~5.5:1 over brand-fill-quiet (#ebf6ff). The dark value
+     matches brand-on-quiet, which already passes over the dark fills. */
   --kui-color-brand-on-fill: light-dark(#1a5dcf, #8acbff);
 
   /* Pop is attractive emphasis without status meaning: use it for featured,
@@ -266,12 +283,19 @@
       var(--kui-color-neutral-on-normal)
     )
   );
-  --kui-color-success-on-quiet: var(--wa-color-success-on-quiet, #008932);
-  --kui-color-success-on-normal: var(--wa-color-success-on-normal, #006d28);
-  --kui-color-success-on-loud: var(--wa-color-success-on-loud, #fff);
+  --kui-color-success-on-quiet: var(
+    --wa-color-success-on-quiet,
+    light-dark(#007f2e, #63e685)
+  );
+  --kui-color-success-on-normal: var(
+    --wa-color-success-on-normal,
+    light-dark(#006d28, #8cea9f)
+  );
+  --kui-color-success-on-loud: var(--wa-color-success-on-loud, #1d1d1f);
   /* Success text placed ON a success fill (e.g. the success StateBanner). Darker
-     than success-on-quiet so it clears WCAG AA (>=4.5:1) over success-fill-quiet
-     (#e3f7e8), where #008932 reached only 4.05:1. Dark matches success-on-quiet. */
+     than success-on-quiet for margin over success-fill-quiet (#e3f7e8): the
+     original on-quiet #008932 reached only 4.05:1 there and today's #007f2e sits
+     at 4.60:1, while #00792c clears ~5:1. Dark matches success-on-quiet. */
   --kui-color-success-on-fill: light-dark(#00792c, #63e685);
 
   --kui-color-warning-fill-loud: var(--wa-color-warning-fill-loud, #ffcc00);
@@ -315,15 +339,25 @@
       var(--kui-color-neutral-on-normal)
     )
   );
-  --kui-color-warning-on-quiet: var(--wa-color-warning-on-quiet, #a16a00);
-  --kui-color-warning-on-normal: var(--wa-color-warning-on-normal, #5f3f00);
+  --kui-color-warning-on-quiet: var(
+    --wa-color-warning-on-quiet,
+    light-dark(#966200, #ffd84a)
+  );
+  --kui-color-warning-on-normal: var(
+    --wa-color-warning-on-normal,
+    light-dark(#5f3f00, #ffe27a)
+  );
   --kui-color-warning-on-loud: var(--wa-color-warning-on-loud, #1d1d1f);
   /* Warning text placed ON a warning fill (e.g. the warning StateBanner). Darker
-     than warning-on-quiet so it clears WCAG AA (>=4.5:1) over warning-fill-quiet
-     (#fffae8), where #a16a00 reached only 4.39:1. Dark matches warning-on-quiet. */
+     than warning-on-quiet for margin over warning-fill-quiet (#fffae8): the
+     original on-quiet #a16a00 reached only 4.39:1 there (today's #966200 is
+     4.97:1), while #8f5e00 clears ~5.3:1. Dark matches warning-on-quiet. */
   --kui-color-warning-on-fill: light-dark(#8f5e00, #ffd84a);
 
-  --kui-color-danger-fill-loud: var(--wa-color-danger-fill-loud, #ff383c);
+  --kui-color-danger-fill-loud: var(
+    --wa-color-danger-fill-loud,
+    light-dark(#eb0005, #ff383c)
+  );
   --kui-color-danger-fill-quiet: var(
     --wa-color-danger-fill-quiet,
     color-mix(
@@ -364,9 +398,26 @@
       var(--kui-color-neutral-on-normal)
     )
   );
-  --kui-color-danger-on-quiet: var(--wa-color-danger-on-quiet, #c20b20);
-  --kui-color-danger-on-normal: var(--wa-color-danger-on-normal, #8e0717);
-  --kui-color-danger-on-loud: var(--wa-color-danger-on-loud, #fff);
+  --kui-color-danger-on-quiet: var(
+    --wa-color-danger-on-quiet,
+    light-dark(#c20b20, #ff696c)
+  );
+  --kui-color-danger-on-normal: var(
+    --wa-color-danger-on-normal,
+    light-dark(#8e0717, #ff8a8c)
+  );
+  --kui-color-danger-on-loud: var(
+    --wa-color-danger-on-loud,
+    light-dark(#fff, #111113)
+  );
+  /* Danger text placed ON a danger fill (e.g. the danger StateBanner) and the
+     danger Badge's solid fill. The light value matches danger-on-quiet, which
+     already clears WCAG AA (5.7:1) over danger-fill-quiet. The dark value is
+     lighter than danger-on-quiet (#ff696c), which reached only 5.7:1 over the
+     dark fill-quiet (4.0:1 as dimmed banner detail) and left the solid badge's
+     dark text and placeholder skeleton the weakest of any tone on a mid-red
+     fill; #ffa0a2 matches the other tones' pale dark on-fill values. */
+  --kui-color-danger-on-fill: light-dark(#c20b20, #ffa0a2);
 
   /* Compatibility aliases retained for existing @kerfjs/ui consumers. */
   --kui-color-border: var(
@@ -386,12 +437,17 @@
   --kui-color-danger-text: var(--kui-color-danger-on-quiet);
   --kui-focus-ring: var(
     --wa-focus-ring,
-    3px solid var(--wa-color-focus, var(--kui-color-brand-fill-loud))
+    3px solid var(--wa-color-focus, light-dark(#007aff, #64d2ff))
+  );
+  /* Elevation mirrors webawesome.css's scheme-aware shadows: dark raises the
+     alpha so a raised surface still separates from a near-black page. */
+  --kui-shadow-s: var(
+    --wa-shadow-s,
+    0 1px 3px light-dark(rgb(0 0 0 / 0.14), rgb(0 0 0 / 0.5))
   );
-  --kui-shadow-s: var(--wa-shadow-s, 0 1px 3px rgb(0 0 0 / 0.14));
   --kui-shadow-l: var(
     --wa-shadow-l,
-    0 0.75rem 2rem rgb(0 0 0 / 0.09)
+    0 0.75rem 2rem light-dark(rgb(0 0 0 / 0.09), rgb(0 0 0 / 0.32))
   );
 }
 

package/dist/styles/list-action-row.css

@@ -45,7 +45,9 @@
   border-end-end-radius: 0;
 }
 
-.kui-list-action-row:has(.kui-list-action-row__primary:hover) {
+.kui-list-action-row:not([data-placeholder="true"]):has(
+    .kui-list-action-row__primary:hover
+  ) {
   --kui-list-action-row-border: var(--kui-list-action-row-hover-border);
   --kui-list-action-row-background: var(--kui-list-action-row-hover-background);
 }
@@ -92,12 +94,27 @@
   outline: none;
 }
 
-.kui-list-action-row__primary:disabled,
-.kui-list-action-row__trailing-action:disabled {
-  cursor: not-allowed;
+/* A placeholder is disabled to stay inert, but it is loading, not unavailable:
+   it keeps the live row's tone (see the placeholder rule in skeleton.css). The
+   disabled tone follows the author's disabled props (the data-kui-disabled
+   marker), so a disabled button's placeholder is dimmed like the loaded one;
+   only the `not-allowed` cursor is reserved for the live row. */
+.kui-list-action-row
+  :is(
+    .kui-list-action-row__primary,
+    .kui-list-action-row__trailing-action
+  )[data-kui-disabled="true"] {
   opacity: 0.58;
 }
 
+.kui-list-action-row:not([data-placeholder="true"])
+  :is(
+    .kui-list-action-row__primary:disabled,
+    .kui-list-action-row__trailing-action:disabled
+  ) {
+  cursor: not-allowed;
+}
+
 .kui-list-action-row__icon {
   position: absolute;
   inset-block-start: 50%;
@@ -144,6 +161,9 @@
 
 .kui-list-action-row__status {
   display: inline-flex;
+  /* A full line even when it holds only a placeholder skeleton, which is
+     shorter than the text line it stands in for. */
+  min-block-size: 1lh;
   align-items: center;
   gap: 0.25rem;
 }
@@ -180,10 +200,11 @@
   opacity: 0;
 }
 
-.kui-list-action-row[data-trailing-visibility="interaction"]:is(
-    :hover,
-    :focus-within
-  )
+/* A placeholder is inert, so hovering it reveals nothing: the trailing action
+   keeps the live resting state (hidden until interaction). */
+.kui-list-action-row[data-trailing-visibility="interaction"]:not(
+    [data-placeholder="true"]
+  ):is(:hover, :focus-within)
   .kui-list-action-row__trailing-action {
   opacity: 1;
 }

package/dist/styles/list-header.css

@@ -187,8 +187,13 @@
   flex: none;
 }
 
-.kui-list-header__action:hover,
-.kui-list-header__toggle:hover {
+/* A placeholder is disabled to stay inert, but it is loading, not unavailable:
+   it keeps the live tone and gives no hover feedback (see the placeholder rule
+   in skeleton.css). A disabled control gives none either. */
+.kui-list-header:not([data-placeholder="true"])
+  .kui-list-header__action:hover:not(:disabled),
+.kui-list-header:not([data-placeholder="true"])
+  .kui-list-header__toggle:hover:not(:disabled) {
   border-color: var(--kui-color-neutral-border-normal);
   background: var(--kui-list-header-hover-background);
 }
@@ -199,14 +204,21 @@
   outline-offset: 1px;
 }
 
-.kui-list-header__action:disabled {
-  cursor: not-allowed;
+/* The disabled tone follows the author's `actionDisabled` (the
+   data-kui-disabled marker), so a disabled action or toggle's placeholder is
+   dimmed like the loaded one; only the `not-allowed` cursor is reserved for
+   the live header. The tone is the component's own, never Web Awesome's
+   native `button:disabled`, so it holds without webawesome.css. */
+.kui-list-header__action[data-kui-disabled="true"],
+.kui-list-header__toggle[data-kui-disabled="true"] {
   opacity: 0.48;
 }
 
-.kui-list-header__action:disabled:hover {
-  border-color: transparent;
-  background: transparent;
+.kui-list-header:not([data-placeholder="true"])
+  .kui-list-header__action:disabled,
+.kui-list-header:not([data-placeholder="true"])
+  .kui-list-header__toggle:disabled {
+  cursor: not-allowed;
 }
 
 .kui-list-header__action > svg,

package/dist/styles/list-item.css

@@ -78,17 +78,25 @@
   grid-column: 2;
 }
 
-.kui-list-item:hover {
+.kui-list-item:hover:not([data-placeholder="true"]) {
   border-color: var(--kui-list-item-hover-border);
   background: var(--kui-list-item-hover-background);
 }
 
-.kui-list-item:disabled {
+/* A placeholder is disabled to stay inert, but it is loading, not unavailable:
+   it keeps the live row's tone (see the placeholder rule in skeleton.css). The
+   disabled tone follows the author's `disabled` prop (the data-kui-disabled
+   marker), so a disabled row's placeholder is dimmed like the loaded row; only
+   the `not-allowed` cursor is reserved for the live row. */
+.kui-list-item[data-kui-disabled="true"] {
   color: var(--kui-color-neutral-on-quiet);
-  cursor: not-allowed;
   opacity: 0.58;
 }
 
+.kui-list-item:disabled:not([data-placeholder="true"]) {
+  cursor: not-allowed;
+}
+
 .kui-list-item[aria-current="page"],
 .kui-list-item[aria-pressed="true"] {
   border-color: var(--kui-list-item-selected-border);

package/dist/styles/resizable-region.css

@@ -152,7 +152,7 @@
   z-index: var(--kui-resizable-region-overlay-z, 41);
   max-width: var(--kui-resizable-region-overlay-max-width, 85vw);
   max-height: var(--kui-resizable-region-overlay-max-height, 85vh);
-  box-shadow: var(--kui-shadow-l, 0 8px 32px rgb(0 0 0 / 24%));
+  box-shadow: var(--kui-shadow-l);
 }
 .kui-resizable-region[data-presentation="overlay"][data-axis="horizontal"] {
   inset-block: 0;