@kerfjs/ui 5.0.0-beta.6 → 5.0.0-beta.61

package/dist/styles/resizable-region.css

@@ -1,16 +1,37 @@
 .kui-resizable-region {
-  --kui-resizable-region-separator-color: var(--kui-color-border);
+  --kui-resizable-region-separator-color: var(
+    --kui-color-neutral-border-normal
+  );
   --kui-resizable-region-handle-color: var(--kui-color-neutral-on-quiet);
   --kui-resizable-region-handle-active-color: var(--kui-color-text-link);
+  /* Extra track a horizontal region adds when it reaches an unsafe screen edge,
+     so its surface paints through the unsafe area while its committed size
+     stays the content width. The region sets it itself from the context of a
+     layout that places it at an edge (a SplitView list); it never inherits
+     into a nested region. */
+  --kui-resizable-region-edge-extent: 0px;
   position: relative;
   display: flex;
   min-width: 0;
   min-height: 0;
+  background: var(--kui-resizable-region-background, transparent);
+}
+/* As a split SplitView's list, the region's track grows by the unsafe
+   inline-start inset the SplitView provides, while its committed size stays
+   the content width. A collapsed region stays shut. */
+.kui-split-view[data-split-mode="split"]
+  > .kui-resizable-region:not([data-collapsed="true"]) {
+  --kui-resizable-region-edge-extent: var(--_kui-split-view-safe-inline-start);
 }
 .kui-resizable-region[data-axis="horizontal"] {
-  width: var(--kui-resizable-region-size);
+  width: calc(
+    var(--kui-resizable-region-size) + var(--kui-resizable-region-edge-extent)
+  );
   height: 100%;
-  flex: 0 0 var(--kui-resizable-region-size);
+  flex: 0 0
+    calc(
+      var(--kui-resizable-region-size) + var(--kui-resizable-region-edge-extent)
+    );
 }
 .kui-resizable-region[data-axis="vertical"] {
   width: 100%;
@@ -21,12 +42,367 @@
 .kui-resizable-region[data-collapsed="true"] {
   overflow: visible;
 }
+/* The content spans the whole region, like the separator does. A vertical
+   stack keeps several children at their natural height, while a lone child —
+   typically a Pane or a layout — fills the region, so it owns its scrolling
+   and reaches the region's far edge. */
 .kui-resizable-region__content {
+  display: flex;
+  flex-direction: column;
   width: 100%;
   min-width: 0;
   min-height: 0;
   overflow: hidden;
 }
+.kui-resizable-region[data-axis="vertical"] > .kui-resizable-region__content {
+  flex-grow: 1;
+}
+.kui-resizable-region__content > :only-child {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+.kui-resizable-region[data-content-overflow="auto"]
+  > .kui-resizable-region__content {
+  overflow: auto;
+}
+.kui-resizable-region[data-content-overflow="visible"] {
+  z-index: var(--kui-resizable-region-popup-z, 5);
+  overflow: visible;
+}
+.kui-resizable-region[data-content-overflow="visible"]
+  > .kui-resizable-region__content {
+  overflow: visible;
+}
+.kui-resizable-region[data-separator="hidden"] {
+  --kui-resizable-region-separator-color: transparent;
+}
+.kui-resizable-region[data-collapsed="true"] > .kui-resizable-region__handle,
+.kui-resizable-region:not([data-presentation="inline"])
+  > .kui-resizable-region__handle {
+  display: none;
+}
+
+/* The track always snaps to its new size. Motion is isolated to the fixed-size
+   content so a large sibling workspace incurs one reflow, not one per frame. */
+.kui-resizable-region[data-collapse-motion="slide"]
+  > .kui-resizable-region__content,
+.kui-resizable-region[data-collapse-motion="fade-slide"]
+  > .kui-resizable-region__content {
+  transition:
+    opacity 160ms ease,
+    transform 200ms ease;
+}
+.kui-resizable-region[data-axis="horizontal"][data-collapse-motion]:not(
+    [data-collapse-motion="none"]
+  )
+  > .kui-resizable-region__content {
+  width: calc(
+    var(--kui-resizable-region-expanded-size) +
+      var(--kui-resizable-region-edge-extent)
+  );
+  min-width: calc(
+    var(--kui-resizable-region-expanded-size) +
+      var(--kui-resizable-region-edge-extent)
+  );
+}
+.kui-resizable-region[data-axis="vertical"][data-collapse-motion]:not(
+    [data-collapse-motion="none"]
+  )
+  > .kui-resizable-region__content {
+  height: var(--kui-resizable-region-expanded-size);
+  min-height: var(--kui-resizable-region-expanded-size);
+}
+/* While expanded, the sliding content follows the region's actual track, so a
+   region its parent clamps (a max-width, a narrow container) never shows
+   content past its separator. The fixed expanded size above only matters once
+   the track collapses to zero and the content slides out. */
+.kui-resizable-region[data-axis="horizontal"][data-collapse-motion]:not(
+    [data-collapsed="true"]
+  )
+  > .kui-resizable-region__content {
+  width: 100%;
+  min-width: 0;
+}
+.kui-resizable-region[data-axis="vertical"][data-collapse-motion]:not(
+    [data-collapsed="true"]
+  )
+  > .kui-resizable-region__content {
+  height: auto;
+  min-height: 0;
+  flex: 1 1 0;
+}
+.kui-resizable-region[data-axis="horizontal"][data-edge="end"][data-collapsed="true"]
+  > .kui-resizable-region__content {
+  transform: translateX(-100%);
+}
+.kui-resizable-region[data-axis="horizontal"][data-edge="start"][data-collapsed="true"]
+  > .kui-resizable-region__content {
+  transform: translateX(100%);
+}
+.kui-resizable-region[data-axis="vertical"][data-edge="end"][data-collapsed="true"]
+  > .kui-resizable-region__content {
+  transform: translateY(-100%);
+}
+.kui-resizable-region[data-axis="vertical"][data-edge="start"][data-collapsed="true"]
+  > .kui-resizable-region__content {
+  transform: translateY(100%);
+}
+.kui-resizable-region[data-collapse-motion="fade-slide"][data-collapsed="true"]
+  > .kui-resizable-region__content {
+  opacity: 0;
+}
+.kui-resizable-region[data-resizing="true"] > .kui-resizable-region__content {
+  transition: none;
+}
+
+/* Responsive replacement policies. Overlay regions stay on their logical edge
+   and stop participating in the parent's flex tracks; hidden regions are fully
+   replaced by application-owned compact UI. An overlay floats over the work
+   area, so it paints the surface like an overlay CollapsiblePanel: without it
+   the content beneath (and the restore control stacked below it) shows
+   through the shadowed box. An inline region stays transparent and shows its
+   host's background. */
+.kui-resizable-region[data-presentation="overlay"] {
+  position: absolute;
+  z-index: var(--kui-resizable-region-overlay-z, 41);
+  background: var(--kui-resizable-region-background, var(--kui-color-surface));
+  box-shadow: var(--kui-shadow-l);
+}
+/* Each overlay maximum caps only the resizable axis: a side overlay spans its
+   host's full height and a drawer its full width, like their inline tracks. */
+.kui-resizable-region[data-presentation="overlay"][data-axis="horizontal"] {
+  inset-block: 0;
+  max-width: var(--kui-resizable-region-overlay-max-width, 85vw);
+}
+.kui-resizable-region[data-presentation="overlay"][data-axis="horizontal"][data-edge="end"] {
+  inset-inline-start: 0;
+}
+.kui-resizable-region[data-presentation="overlay"][data-axis="horizontal"][data-edge="start"] {
+  inset-inline-end: 0;
+}
+.kui-resizable-region[data-presentation="overlay"][data-axis="vertical"] {
+  inset-inline: 0;
+  max-height: var(--kui-resizable-region-overlay-max-height, 85vh);
+}
+.kui-resizable-region[data-presentation="overlay"][data-axis="vertical"][data-edge="end"] {
+  inset-block-start: 0;
+}
+.kui-resizable-region[data-presentation="overlay"][data-axis="vertical"][data-edge="start"] {
+  inset-block-end: 0;
+}
+.kui-resizable-region[data-presentation="overlay"][data-collapsed="true"] {
+  pointer-events: none;
+}
+.kui-resizable-region[data-presentation="overlay"][data-axis="horizontal"][data-collapse-motion]:not(
+    [data-collapse-motion="none"]
+  )
+  > .kui-resizable-region__content {
+  width: min(
+    var(--kui-resizable-region-expanded-size),
+    var(--kui-resizable-region-overlay-max-width, 85vw)
+  );
+  min-width: min(
+    var(--kui-resizable-region-expanded-size),
+    var(--kui-resizable-region-overlay-max-width, 85vw)
+  );
+}
+.kui-resizable-region[data-presentation="overlay"][data-axis="vertical"][data-collapse-motion]:not(
+    [data-collapse-motion="none"]
+  )
+  > .kui-resizable-region__content {
+  height: min(
+    var(--kui-resizable-region-expanded-size),
+    var(--kui-resizable-region-overlay-max-height, 85vh)
+  );
+  min-height: min(
+    var(--kui-resizable-region-expanded-size),
+    var(--kui-resizable-region-overlay-max-height, 85vh)
+  );
+}
+.kui-resizable-region[data-presentation="hidden"] {
+  display: none;
+}
+/* An open side overlay (a horizontal region) covers the work area beside it,
+   so that area's floating controls (a FloatingToolbar, a restore corner) are
+   hidden, not merely stacked beneath it: they never paint over the overlay
+   whatever stacking context an app puts them in, and hidden they leave the
+   tab order and the accessibility tree. They come back as the overlay
+   closes. The ResizableRegion's own covered context,
+   `--_kui-resizable-region-covered`, is read by FloatingToolbar and the
+   layouts' restore corners. It is set on the overlay's container and cleared again on the
+   overlay regions in it, so it reaches the overlay's siblings only. It is
+   never set by a universal selector below the :has() container (`:has(…) >
+   :not(…)`): Chromium then restyles every child of every ancestor of a DOM
+   change, which made each change in a long list about 30× slower. */
+:where(
+  :has(
+    > .kui-resizable-region[data-presentation="overlay"][data-axis="horizontal"]:not(
+        [data-collapsed="true"]
+      )
+  )
+) {
+  --_kui-resizable-region-covered: hidden;
+}
+:where(
+    :has(
+      > .kui-resizable-region[data-presentation="overlay"][data-axis="horizontal"]:not(
+          [data-collapsed="true"]
+        )
+    )
+  )
+  > .kui-resizable-region[data-presentation="overlay"] {
+  --_kui-resizable-region-covered: initial;
+}
+
+@container (max-width: 44rem) {
+  .kui-resizable-region[data-responsive-fill-at="narrow"] {
+    width: 100%;
+    flex: 1 1 auto;
+  }
+
+  .kui-resizable-region[data-responsive-fill-at="narrow"]
+    > .kui-resizable-region__handle {
+    display: none;
+  }
+}
+
+@container (max-width: 28rem) {
+  .kui-resizable-region[data-responsive-fill-at="compact"] {
+    width: 100%;
+    flex: 1 1 auto;
+  }
+
+  .kui-resizable-region[data-responsive-fill-at="compact"]
+    > .kui-resizable-region__handle {
+    display: none;
+  }
+}
+
+/* A collapsed region can supply its own affordance. It floats in a corner of
+   the region's own container, never of the viewport, so a region embedded in a
+   page cannot float it over page content outside that container. The
+   container becomes the corner's containing block and isolates its stacking
+   only while a restore control is shown, at zero specificity so an app's own
+   positioning of that container wins. The corner is inset from the
+   container's edges plus the unsafe area of each edge it reaches. The
+   control belongs to the layer beneath open overlays, two below the overlay
+   z-index: an open overlay region covers it as it covers the rest of the
+   work area, the Workbench rule. A collapsed overlay drops its pointer
+   events, so the control is usable again as soon as the overlay closes. */
+:where(:has(> .kui-resizable-region__restore)) {
+  position: relative;
+  isolation: isolate;
+  anchor-scope: --kui-restore-drawer;
+}
+/* An expanded bottom region (a vertical region resized from its top edge)
+   beside the collapsed one — a direct child of that container or of one of
+   its direct children (the app's work-area column) — owns the container's
+   bottom, so the corner floats above the drawer's top edge instead of over
+   it. The region publishes that edge as an anchor only there, beside a
+   CollapsiblePanel or ResizableRegion restore control (matched by their
+   restore attributes); CollapsiblePanel drawers publish the same anchor. A
+   drawer nested deeper, inside the work area's own content, belongs to
+   another layout and publishes nothing. The selector ends on the region, not
+   on a universal `> * > * > *` scope below the container: a universal
+   selector after a :has() container restyles every child of every ancestor
+   of a DOM change in Chromium. Without anchor positioning the corner keeps
+   the container's bottom edge. */
+:where(
+    :has(> [data-panel-restore], > [data-region-restore]),
+    :has(> [data-panel-restore], > [data-region-restore]) > *
+  )
+  > .kui-resizable-region[data-axis="vertical"][data-edge="start"][data-presentation="inline"]:not(
+    [data-collapsed="true"]
+  ) {
+  anchor-name: --kui-restore-drawer;
+}
+.kui-resizable-region__restore {
+  --_kui-resizable-region-restore-inset: var(
+    --kui-resizable-region-restore-inset,
+    1rem
+  );
+  position: absolute;
+  /* Hidden while an open side overlay covers the content (see above). */
+  visibility: var(
+    --_kui-workbench-covered,
+    var(
+      --_kui-collapsible-panel-covered,
+      var(--_kui-resizable-region-covered, inherit)
+    )
+  );
+  z-index: var(
+    --kui-resizable-region-restore-z,
+    calc(var(--kui-resizable-region-overlay-z, 41) - 2)
+  );
+  position-visibility: always;
+  inset-block-end: calc(
+    var(--_kui-resizable-region-restore-inset) +
+      var(
+        --kui-edge-inset-block-end,
+        var(--kui-safe-area-block-end, env(safe-area-inset-bottom, 0px))
+      )
+  );
+  /* Above an expanded drawer's top edge when one is in scope (see above). */
+  inset-block-end: calc(
+    var(--_kui-resizable-region-restore-inset) +
+      anchor(
+        --kui-restore-drawer top,
+        var(
+          --kui-edge-inset-block-end,
+          var(--kui-safe-area-block-end, env(safe-area-inset-bottom, 0px))
+        )
+      )
+  );
+}
+.kui-resizable-region__restore[data-placement="inline"] {
+  position: static;
+}
+.kui-resizable-region__restore[data-position^="top"][data-placement="corner"] {
+  inset-block-end: auto;
+  inset-block-start: calc(
+    var(--_kui-resizable-region-restore-inset) +
+      var(
+        --kui-edge-inset-block-start,
+        var(--kui-safe-area-block-start, env(safe-area-inset-top, 0px))
+      )
+  );
+}
+.kui-resizable-region__restore[data-position="bottom-start"] {
+  inset-inline-start: calc(
+    var(--_kui-resizable-region-restore-inset) +
+      var(
+        --kui-edge-inset-inline-start,
+        var(--kui-safe-area-inline-start, env(safe-area-inset-left, 0px))
+      )
+  );
+}
+.kui-resizable-region__restore[data-position="top-start"] {
+  inset-inline-start: calc(
+    var(--_kui-resizable-region-restore-inset) +
+      var(
+        --kui-edge-inset-inline-start,
+        var(--kui-safe-area-inline-start, env(safe-area-inset-left, 0px))
+      )
+  );
+}
+.kui-resizable-region__restore[data-position="top-end"] {
+  inset-inline-end: calc(
+    var(--_kui-resizable-region-restore-inset) +
+      var(
+        --kui-edge-inset-inline-end,
+        var(--kui-safe-area-inline-end, env(safe-area-inset-right, 0px))
+      )
+  );
+}
+.kui-resizable-region__restore[data-position="bottom-end"] {
+  inset-inline-end: calc(
+    var(--_kui-resizable-region-restore-inset) +
+      var(
+        --kui-edge-inset-inline-end,
+        var(--kui-safe-area-inline-end, env(safe-area-inset-right, 0px))
+      )
+  );
+}
 .kui-resizable-region__handle {
   position: absolute;
   z-index: 3;
@@ -83,14 +459,57 @@
   .kui-resizable-region__handle {
   top: -10px;
 }
+/* wireResizableRegions sets data-handle-inset when a parent clamps the track
+   and the separator has less room past it than the handle's overhang, which
+   puts it at the parent's edge. The handle then sits wholly inside the region
+   and keeps its separator line on the region's edge, so a clipping ancestor
+   never cuts off half of the hit target or its focus ring. The grip stays
+   centered in the handle there: the separator is the clipping edge, so a grip
+   centered on it would be cut in half. Everywhere else the grip is drawn on
+   the separator line. */
+.kui-resizable-region[data-handle-inset][data-axis="horizontal"][data-edge="end"]
+  > .kui-resizable-region__handle {
+  right: 0;
+}
+.kui-resizable-region[data-handle-inset][data-axis="horizontal"][data-edge="end"]
+  > .kui-resizable-region__handle::before {
+  right: 0;
+}
+.kui-resizable-region[data-handle-inset][data-axis="horizontal"][data-edge="start"]
+  > .kui-resizable-region__handle {
+  left: 0;
+}
+.kui-resizable-region[data-handle-inset][data-axis="horizontal"][data-edge="start"]
+  > .kui-resizable-region__handle::before {
+  left: 0;
+}
+.kui-resizable-region[data-handle-inset][data-axis="vertical"][data-edge="end"]
+  > .kui-resizable-region__handle {
+  bottom: 0;
+}
+.kui-resizable-region[data-handle-inset][data-axis="vertical"][data-edge="end"]
+  > .kui-resizable-region__handle::before {
+  bottom: 0;
+}
+.kui-resizable-region[data-handle-inset][data-axis="vertical"][data-edge="start"]
+  > .kui-resizable-region__handle {
+  top: 0;
+}
+.kui-resizable-region[data-handle-inset][data-axis="vertical"][data-edge="start"]
+  > .kui-resizable-region__handle::before {
+  top: 0;
+}
 .kui-resizable-region__handle:hover,
 .kui-resizable-region__handle:focus-visible {
   color: var(--kui-resizable-region-handle-active-color);
 }
+/* The ring stays wholly inside the handle's box (the focus ring is 3px).
+   The handle runs the region's full length, and those ends usually meet a
+   clipping ancestor's edge, which would otherwise shave the ring there. */
 .kui-resizable-region__handle:focus-visible {
   border-radius: var(--kui-radius-s);
   outline: var(--kui-focus-ring);
-  outline-offset: -2px;
+  outline-offset: -3px;
 }
 .kui-resizable-region__handle-icon {
   position: relative;
@@ -109,3 +528,9 @@
 .kui-resizable-region__handle:focus-visible .kui-resizable-region__handle-icon {
   opacity: 1;
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .kui-resizable-region > .kui-resizable-region__content {
+    transition: none;
+  }
+}

package/dist/styles/row.css

@@ -0,0 +1,111 @@
+.kui-row {
+  --kui-row-gap: var(--kui-layout-item-gap, 0.5rem);
+  /* Private per-instance values are reset on every Row so a nested Row never
+     inherits its ancestor's; the inline style overrides them per prop. */
+  --_kui-row-gap: var(--kui-row-gap);
+  --_kui-row-flex: 0 1 auto;
+  --_kui-row-inset-top: 0;
+  --_kui-row-inset-right: 0;
+  --_kui-row-inset-bottom: 0;
+  --_kui-row-inset-left: 0;
+
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+  box-sizing: border-box;
+  padding: var(--_kui-row-inset-top, 0) var(--_kui-row-inset-right, 0)
+    var(--_kui-row-inset-bottom, 0) var(--_kui-row-inset-left, 0);
+  flex: var(--_kui-row-flex, initial);
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: stretch;
+  align-content: space-between;
+  justify-content: flex-start;
+  gap: var(--_kui-row-gap, var(--kui-row-gap));
+}
+
+.kui-row[data-control-insets*="t"] {
+  --_kui-row-inset-top: var(--kui-layout-inline-margin, 0.5rem);
+}
+
+.kui-row[data-control-insets*="r"] {
+  --_kui-row-inset-right: var(--kui-layout-inline-margin, 0.5rem);
+}
+
+.kui-row[data-control-insets*="b"] {
+  --_kui-row-inset-bottom: var(--kui-layout-inline-margin, 0.5rem);
+}
+
+.kui-row[data-control-insets*="l"] {
+  --_kui-row-inset-left: var(--kui-layout-inline-margin, 0.5rem);
+}
+
+.kui-row[data-text-insets*="t"] {
+  --_kui-row-inset-top: calc(
+    var(--kui-layout-inline-margin, 0.5rem) + 1px +
+      var(--kui-layout-item-padding, 0.5rem)
+  );
+}
+
+.kui-row[data-text-insets*="r"] {
+  --_kui-row-inset-right: calc(
+    var(--kui-layout-inline-margin, 0.5rem) + 1px +
+      var(--kui-layout-item-padding, 0.5rem)
+  );
+}
+
+.kui-row[data-text-insets*="b"] {
+  --_kui-row-inset-bottom: calc(
+    var(--kui-layout-inline-margin, 0.5rem) + 1px +
+      var(--kui-layout-item-padding, 0.5rem)
+  );
+}
+
+.kui-row[data-text-insets*="l"] {
+  --_kui-row-inset-left: calc(
+    var(--kui-layout-inline-margin, 0.5rem) + 1px +
+      var(--kui-layout-item-padding, 0.5rem)
+  );
+}
+
+.kui-row[data-wrap="true"] {
+  flex-wrap: wrap;
+}
+
+.kui-row[data-h-align="center"] {
+  justify-content: space-around;
+}
+
+.kui-row[data-h-align="right"] {
+  justify-content: flex-end;
+}
+
+.kui-row[data-h-align="full"] {
+  justify-content: space-between;
+}
+
+.kui-row[data-v-align="top"] {
+  align-items: flex-start;
+  align-content: flex-start;
+}
+
+.kui-row[data-v-align="middle"] {
+  align-items: center;
+  align-content: space-around;
+}
+
+.kui-row[data-v-align="bottom"] {
+  align-items: flex-end;
+  align-content: flex-end;
+}
+
+.kui-row[data-v-align="baseline"] {
+  align-items: baseline;
+  align-content: baseline;
+}
+
+/* `fill`: the layout root of a definite-height parent (an app root or a
+   fixed-height frame) takes its full height. Inside a flex layout use `flex`. */
+.kui-row[data-fill="true"] {
+  height: 100%;
+}

package/dist/styles/segmented-control.css

@@ -1,7 +1,7 @@
 .kui-segmented-control {
   --kui-segmented-background: var(--kui-color-neutral-fill-normal);
   --kui-segmented-border: transparent;
-  --kui-segmented-foreground: var(--kui-color-neutral-on-quiet);
+  --kui-segmented-foreground: var(--kui-color-neutral-on-normal);
   --kui-segmented-hover-background: var(--kui-color-surface);
   --kui-segmented-hover-border: var(--kui-color-neutral-border-normal);
   --kui-segmented-selected-background: var(--kui-color-surface);
@@ -12,9 +12,9 @@
     --kui-layout-rounded-radius,
     calc(1px + 0.6875rem)
   );
-  --kui-segmented-item-radius: var(
-    --kui-layout-rounded-radius,
-    calc(1px + 0.6875rem)
+  --kui-segmented-item-radius: max(
+    0px,
+    calc(var(--kui-segmented-radius) - var(--kui-layout-highlight-inset, 2px))
   );
   display: inline-flex;
   max-width: 100%;
@@ -38,9 +38,17 @@
 .kui-segmented-control[data-appearance="outlined"] {
   --kui-segmented-border: var(--kui-color-neutral-border-normal);
   --kui-segmented-background: var(--kui-color-surface);
+  --kui-segmented-foreground: var(--kui-color-neutral-on-quiet);
 }
 
 .kui-segmented-control[data-appearance="toolbar"] {
+  --kui-segmented-item-radius: var(
+    --kui-control-highlight-radius,
+    max(
+      0px,
+      calc(var(--kui-segmented-radius) - var(--kui-layout-highlight-inset, 2px))
+    )
+  );
   --kui-segmented-background: transparent;
   --kui-segmented-foreground: var(
     --kui-toolbar-control-color,
@@ -82,10 +90,6 @@
     --kui-layout-pill-radius,
     calc(1px + 1.3125rem)
   );
-  --kui-segmented-item-radius: var(
-    --kui-layout-pill-radius,
-    calc(1px + 1.3125rem)
-  );
 }
 
 .kui-segmented-control[data-layout="equal"] {
@@ -145,8 +149,28 @@
   outline-offset: 1px;
 }
 
-.kui-segmented-control__item:disabled {
+/* A placeholder is disabled to stay inert, but it is loading, not unavailable:
+   its choices keep the live tone. SegmentedControl renders no skeleton (its
+   choices are known; only the selection is unknown), so it does not load
+   skeleton.css and neutralizes disabled chrome itself, including Web Awesome's
+   native button:disabled. A choice the author disabled (the data-kui-disabled
+   marker) keeps the live disabled tone; only the `not-allowed` cursor is
+   reserved for the live control. */
+.kui-segmented-control[data-placeholder="true"] .kui-segmented-control__item {
+  cursor: default;
+}
+
+.kui-segmented-control[data-placeholder="true"]
+  .kui-segmented-control__item:not([data-kui-disabled="true"]) {
+  opacity: 1;
+}
+
+.kui-segmented-control__item[data-kui-disabled="true"] {
   opacity: 0.45;
+}
+
+.kui-segmented-control:not([data-placeholder="true"])
+  .kui-segmented-control__item:disabled {
   cursor: not-allowed;
 }