@kerfjs/ui 5.0.0-beta.106 → 5.0.0-beta.108

package/dist/split-view.js

@@ -1,4 +1,4 @@
-export { SplitView } from './chunk-FKKJHGN5.js';
+export { SplitView } from './chunk-P7EJ4CAD.js';
 
 
 

package/dist/styles/anchored-surface.css

@@ -20,6 +20,9 @@
   border: 1px solid var(--kui-color-neutral-border-normal);
   border-radius: var(--kui-anchored-surface-radius, var(--kui-radius-m));
   color: var(--kui-color-text, inherit);
+  --kui-color-surface-current: var(--kui-color-surface-raised);
+  --kui-color-surface-current-region: transparent;
+  --kui-color-surface-current-tint: transparent;
   background: var(--kui-color-surface-raised);
   box-shadow: var(--kui-shadow-l);
   font: inherit;

package/dist/styles/button.css

@@ -47,6 +47,13 @@
   --_kui-button-on-quiet: var(--kui-color-brand-on-quiet);
   --_kui-button-outline: var(--kui-color-brand-border-loud);
 }
+.kui-button[data-tone="success"] {
+  --_kui-button-fill: var(--kui-color-success-fill-loud);
+  --_kui-button-text: var(--kui-color-success-on-loud);
+  --_kui-button-quiet: var(--kui-color-success-fill-quiet);
+  --_kui-button-on-quiet: var(--kui-color-success-on-fill);
+  --_kui-button-outline: var(--kui-color-success-border-loud);
+}
 .kui-button[data-tone="danger"] {
   --_kui-button-fill: var(--kui-color-danger-fill-loud);
   --_kui-button-text: var(--kui-color-danger-on-loud);
@@ -75,14 +82,27 @@
   flex-shrink: 0;
   padding: 0;
 }
+/* fill: the button spans its parent's available inline width, as a filled
+   SplitButton does. The label stays centered and ellipsizes once it no longer
+   fits; an icon-only button that fills spans too. */
+.kui-button[data-fill="true"] {
+  display: flex;
+  width: 100%;
+  min-width: 0;
+}
+.kui-button[data-fill="true"] > .kui-button__label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 /* A pill: fully round ends (a circle when icon-only). */
 .kui-button[data-shape="pill"] {
   border-radius: var(--kui-layout-pill-radius, calc(1px + 1.3125rem));
 }
 /* A pressed neutral toggle takes the brand accent, as a pressed toolbar group
-   control and a selected chip do; brand and danger keep their own tone. */
+   control and a selected chip do; semantic tones keep their own color. */
 .kui-button[aria-pressed="true"]:not(
     [data-tone="brand"],
+    [data-tone="success"],
     [data-tone="danger"]
   ) {
   --_kui-button-fill: var(--kui-color-brand-fill-loud);
@@ -93,7 +113,7 @@
 }
 /* A pressed toggle draws on top of its tone and emphasis. Secondary and plain
    take the tone's quiet fill with a doubled tone outline; primary keeps its
-   loud fill (darkened for brand and danger) with an inset ring. The second pixel of outline marks
+   loud fill (darkened for semantic tones) with an inset ring. The second pixel of outline marks
    the state without relying on hue. */
 .kui-button[aria-pressed="true"]:is(
     [data-emphasis="secondary"],
@@ -121,6 +141,16 @@
     light-dark(#000, #fff) 18%
   );
 }
+.kui-button[data-tone="success"][aria-pressed="true"]:not(
+    [data-emphasis="secondary"],
+    [data-emphasis="plain"]
+  ) {
+  --_kui-button-fill: color-mix(
+    in oklab,
+    var(--kui-color-success-fill-loud),
+    light-dark(#000, #fff) 18%
+  );
+}
 .kui-button[data-tone="danger"][aria-pressed="true"]:not(
     [data-emphasis="secondary"],
     [data-emphasis="plain"]
@@ -197,10 +227,35 @@
   outline: var(--kui-focus-ring);
   outline-offset: 1px;
 }
+/* focusRingInset: inside an ancestor that clips overflow, the ring moves
+   inside the box. On a loud fill the ring can share the fill's hue (brand),
+   so a surface-colored line runs inside it: the ring then meets the surface
+   on both edges, as the outside ring does, whatever the fill. The line is an
+   inset shadow from the padding edge (inside the 1px border) to 3px past the
+   ring, wide enough to stay solid at a fractional position; a pressed
+   toggle's inset ring lies under the focus ring meanwhile. The line paints
+   the surface the button sits on: the surface context's opaque color with
+   its translucent tint (a sunken or quiet fill) layered over it
+   (foundation.css), so it reads as a cut through the fill, not a halo. */
+.kui-button[data-focus-ring-inset="true"]:focus-visible {
+  outline-offset: -3px;
+  box-shadow:
+    inset 0 0 0 5px var(--kui-color-surface-current-tint, transparent),
+    inset 0 0 0 5px var(--kui-color-surface-current-region, transparent),
+    inset 0 0 0 5px var(--kui-color-surface-current, var(--kui-color-surface));
+}
 .kui-button:is(:disabled, [aria-disabled="true"]) {
   cursor: not-allowed;
   opacity: 0.5;
 }
+/* Keep a disabled positive action quiet without fading its label below text
+   contrast. The subdued fill and border mark it unavailable. */
+.kui-button[data-tone="success"]:is(:disabled, [aria-disabled="true"]) {
+  --_kui-button-fill: var(--kui-color-success-fill-quiet);
+  --_kui-button-text: var(--kui-color-success-on-fill);
+  --_kui-button-border: var(--kui-color-success-border-quiet);
+  opacity: 1;
+}
 .kui-button__icon {
   display: inline-flex;
   flex: none;

package/dist/styles/catalog/components/catalog-example.css

@@ -182,32 +182,69 @@
   }
 }
 
-/* Bare specimens use a small inset to align with the surrounding examples. */
-.kui-catalog-example[data-align="glyph"]
-  > :not([data-catalog-example-label]):not([data-catalog-example-note]):not(
-    :popover-open,
-    :modal
-  ) {
+/* An aligned example insets its specimens so their visible edge lines up with
+   the label: 16px for a bare glyph, 8px for a control, and 8px for a text
+   trigger (whose own 8px inset plus 1px border then puts its text on the
+   label's). The inset is a grid column rather than a margin on each specimen:
+   the label and note span the full width while every specimen sits in the
+   inset column, so a percentage width — a full-width field, a fill-width
+   Select, a full-width or control-sized frame — resolves against that column
+   and ends on the example's inline-end edge instead of running past it by the
+   inset. Specimens keep their own width caps, and top-layer popovers and modal
+   dialogs ignore grid placement. */
+.kui-catalog-example:is(
+  [data-align="glyph"],
+  [data-align="inline-control"],
+  [data-align="text-trigger"]
+) {
+  display: grid;
+  grid-template-columns: var(--kui-catalog-example-align) minmax(0, 1fr);
+  align-content: start;
+  align-items: start;
+  justify-items: start;
+  column-gap: 0;
+}
+
+.kui-catalog-example[data-align="glyph"] {
   --kui-catalog-example-align: 1rem;
-  margin-inline-start: var(--kui-catalog-example-align);
 }
 
-.kui-catalog-example[data-align="inline-control"]
-  > :not([data-catalog-example-label]):not([data-catalog-example-note]):not(
-    :popover-open,
-    :modal
-  ) {
+.kui-catalog-example:is(
+  [data-align="inline-control"],
+  [data-align="text-trigger"]
+) {
   --kui-catalog-example-align: 0.5rem;
-  margin-inline-start: var(--kui-catalog-example-align);
 }
 
-/* A trigger's text lines up with the example label's: the trigger's own
-   inset (8px plus its 1px border) follows this 8px offset. */
-.kui-catalog-example[data-align="text-trigger"]
+.kui-catalog-example:is(
+    [data-align="glyph"],
+    [data-align="inline-control"],
+    [data-align="text-trigger"]
+  )
+  > * {
+  grid-column: 2;
+}
+
+/* The column is the whole inset: a specimen's own start margin (a ListItem's
+   8px list inset) does not stack on it. Top-layer surfaces keep their
+   centering margins. */
+.kui-catalog-example:is(
+    [data-align="glyph"],
+    [data-align="inline-control"],
+    [data-align="text-trigger"]
+  )
   > :not([data-catalog-example-label]):not([data-catalog-example-note]):not(
     :popover-open,
     :modal
   ) {
-  --kui-catalog-example-align: 0.5rem;
-  margin-inline-start: var(--kui-catalog-example-align);
+  margin-inline-start: 0;
+}
+
+.kui-catalog-example:is(
+    [data-align="glyph"],
+    [data-align="inline-control"],
+    [data-align="text-trigger"]
+  )
+  > :is([data-catalog-example-label], [data-catalog-example-note]) {
+  grid-column: 1 / -1;
 }

package/dist/styles/checkbox-group.css

@@ -0,0 +1,63 @@
+/* CheckboxGroup: the group label, the choices (each a Kerf Checkbox, which
+   draws its own box, label, and hint), and hint and error text below. It is
+   laid out exactly like a RadioGroup: each box sits on the group's
+   inline-start edge and stacked choices sit 8px apart, the 28px pitch
+   checkboxes and radios share. */
+.kui-checkbox-group {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+  border: none;
+  font-size: var(--kui-font-m, 1rem);
+  font-weight: 400;
+  line-height: 1.2;
+}
+.kui-checkbox-group[data-size="compact"] {
+  font-size: var(--kui-font-s, 0.875rem);
+}
+/* The label matches every Kerf form control's label (RadioGroup's too). */
+.kui-checkbox-group__label {
+  display: block;
+  float: none;
+  margin-block-end: 0.375rem;
+  padding: 0;
+  padding-inline: calc(1px + var(--kui-layout-item-padding, 0.5rem));
+  color: var(--kui-color-neutral-on-quiet);
+  font-size: var(--kui-font-xs);
+  font-weight: 650;
+  letter-spacing: 0.04em;
+  line-height: 1.2;
+  text-transform: uppercase;
+}
+.kui-checkbox-group__choices {
+  display: flex;
+  flex-direction: column;
+  gap: var(--kui-space-xs);
+}
+.kui-checkbox-group[data-orientation="horizontal"]
+  .kui-checkbox-group__choices {
+  flex-direction: row;
+  flex-wrap: wrap;
+  column-gap: 1.5rem;
+}
+.kui-checkbox-group__hint,
+.kui-checkbox-group__error {
+  display: block;
+  margin-block-start: 0.4375rem;
+  padding-inline: calc(1px + var(--kui-layout-item-padding, 0.5rem));
+  color: var(--kui-color-text-quiet);
+  font-size: var(--kui-font-s, 0.875rem);
+  line-height: 1.6;
+}
+.kui-checkbox-group[data-size="compact"]
+  :is(.kui-checkbox-group__hint, .kui-checkbox-group__error) {
+  font-size: var(--kui-font-xs, 0.75rem);
+}
+.kui-checkbox-group__error {
+  color: var(--kui-color-danger-on-quiet);
+}
+.kui-checkbox-group__hint + .kui-checkbox-group__error {
+  margin-block-start: 0;
+}

package/dist/styles/checkbox.css

@@ -1,6 +1,7 @@
-/* Checkbox: a drawn box beside its label, with hint and error text on the
-   label's column. The native input sits invisibly over the box, so pointer,
-   keyboard, touch exploration, and forms all reach the real control. */
+/* Checkbox: a drawn box beside its label, with hint and error text directly
+   under the label on its column, as a grouped choice hint sits. The native
+   input sits invisibly over the box, so pointer, keyboard, touch
+   exploration, and forms all reach the real control. */
 .kui-checkbox {
   --_kui-checkbox-box: 1.25rem;
   --_kui-checkbox-gap: 0.5rem;
@@ -91,7 +92,6 @@
 .kui-checkbox__hint,
 .kui-checkbox__error {
   display: block;
-  margin-block-start: 0.4375rem;
   padding-inline-start: calc(
     var(--_kui-checkbox-box) + var(--_kui-checkbox-gap)
   );
@@ -106,8 +106,9 @@
 .kui-checkbox__error {
   color: var(--kui-color-danger-on-quiet);
 }
-.kui-checkbox__hint + .kui-checkbox__error {
-  margin-block-start: 0;
+/* Inside a CheckboxGroup an invalid group marks every box. */
+.kui-checkbox-group[data-invalid] .kui-checkbox__box {
+  border-color: var(--kui-color-danger-border-loud);
 }
 @media (forced-colors: active) {
   .kui-checkbox__box {

package/dist/styles/color-picker.css

@@ -1,8 +1,10 @@
-/* ColorPicker: a saturation and brightness area, hue and opacity sliders, a
-   color-model menu with its tools, channel fields, a hex and opacity row,
-   then preset and sample swatches. The surface's custom properties
-   (--_kui-color-picker-h/s/v/a and the opaque color) place the thumbs and
-   paint the tracks; the wiring updates them while a person drags. */
+/* ColorPicker: a saturation and brightness area, a slider per channel of the
+   color model plus an opacity slider, a color-model menu with its tools,
+   channel fields, a hex and opacity row, then preset and sample swatches.
+   The surface's custom properties (--_kui-color-picker-h/s/v/a and the
+   opaque color) place the area thumb and paint the opacity slider; each
+   channel slider carries its own track gradient and thumb color inline. The
+   wiring updates both while a person drags. */
 .kui-color-picker {
   display: grid;
   width: 100%;
@@ -18,7 +20,18 @@
   font-size: var(--kui-font-m, 1rem);
 }
 
+/* The area and every slider track carry an inner edge halfway to the text
+   color, so an area or track as dark (or as light) as the surface behind it
+   keeps a visible boundary in either scheme. Every thumb draws a two-tone
+   ring, white inside a dark outline, so it keeps a 3:1 boundary over light
+   and dark colors alike. */
 .kui-color-picker__surface {
+  --_kui-color-picker-track-edge: color-mix(
+    in srgb,
+    var(--kui-color-text) 50%,
+    transparent
+  );
+  --_kui-color-picker-thumb-outline: rgb(0 0 0 / 0.6);
   --_kui-color-picker-checker: repeating-conic-gradient(
       var(--kui-color-neutral-fill-normal) 0% 25%,
       var(--kui-color-surface) 0% 50%
@@ -38,6 +51,7 @@
   background:
     linear-gradient(to top, #000, transparent),
     linear-gradient(to right, #fff, hsl(var(--_kui-color-picker-h) 100% 50%));
+  box-shadow: inset 0 0 0 1px var(--_kui-color-picker-track-edge);
   cursor: crosshair;
   touch-action: none;
 }
@@ -58,17 +72,28 @@
   border-radius: 50%;
   background: var(--_kui-color-picker-color);
   box-shadow:
-    0 0 0 1px rgb(0 0 0 / 0.3),
+    0 0 0 1px var(--_kui-color-picker-thumb-outline),
     var(--kui-shadow-s);
   pointer-events: none;
   translate: -50% -50%;
 }
 
-/* The hue and opacity sliders: native ranges drawn as 12px tracks with a
-   round thumb that shows the color at that point. */
-.kui-color-picker__hue,
+/* The channel and opacity sliders, one group: native ranges drawn as 12px
+   tracks with a round thumb that shows the color at that point. A channel
+   slider's inline style carries its track (the colors its channel produces
+   while the others hold, or the full rainbow for hue) and its thumb color.
+   Every track runs in the writing direction, as the native range does, and
+   carries the surface's inner edge. */
+.kui-color-picker__sliders {
+  display: grid;
+  min-width: 0;
+  gap: var(--kui-space-xs, 0.5rem);
+}
+
+.kui-color-picker__slider,
 .kui-color-picker__opacity {
   --_kui-color-picker-thumb: 1.25rem;
+  --_kui-color-picker-track-direction: to right;
 
   display: block;
   width: 100%;
@@ -81,23 +106,22 @@
   appearance: none;
 }
 
-.kui-color-picker__hue {
-  --_kui-color-picker-track: linear-gradient(
-    to right,
-    #f00,
-    #ff0,
-    #0f0,
-    #0ff,
-    #00f,
-    #f0f,
-    #f00
-  );
-  --_kui-color-picker-thumb-color: hsl(var(--_kui-color-picker-h) 100% 50%);
+.kui-color-picker__slider[hidden] {
+  display: none;
+}
+
+.kui-color-picker__slider:dir(rtl),
+.kui-color-picker__opacity:dir(rtl) {
+  --_kui-color-picker-track-direction: to left;
 }
 
 .kui-color-picker__opacity {
   --_kui-color-picker-track:
-    linear-gradient(to right, transparent, var(--_kui-color-picker-color)),
+    linear-gradient(
+      var(--_kui-color-picker-track-direction),
+      transparent,
+      var(--_kui-color-picker-color)
+    ),
     var(--_kui-color-picker-checker);
   --_kui-color-picker-thumb-color: color-mix(
     in srgb,
@@ -106,23 +130,23 @@
   );
 }
 
-.kui-color-picker__hue::-webkit-slider-runnable-track,
+.kui-color-picker__slider::-webkit-slider-runnable-track,
 .kui-color-picker__opacity::-webkit-slider-runnable-track {
   height: 0.75rem;
   border-radius: var(--kui-radius-pill);
   background: var(--_kui-color-picker-track);
-  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.1);
+  box-shadow: inset 0 0 0 1px var(--_kui-color-picker-track-edge);
 }
 
-.kui-color-picker__hue::-moz-range-track,
+.kui-color-picker__slider::-moz-range-track,
 .kui-color-picker__opacity::-moz-range-track {
   height: 0.75rem;
   border-radius: var(--kui-radius-pill);
   background: var(--_kui-color-picker-track);
-  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.1);
+  box-shadow: inset 0 0 0 1px var(--_kui-color-picker-track-edge);
 }
 
-.kui-color-picker__hue::-webkit-slider-thumb,
+.kui-color-picker__slider::-webkit-slider-thumb,
 .kui-color-picker__opacity::-webkit-slider-thumb {
   width: var(--_kui-color-picker-thumb);
   height: var(--_kui-color-picker-thumb);
@@ -132,12 +156,12 @@
   border-radius: 50%;
   background: var(--_kui-color-picker-thumb-color);
   box-shadow:
-    0 0 0 1px rgb(0 0 0 / 0.2),
+    0 0 0 1px var(--_kui-color-picker-thumb-outline),
     var(--kui-shadow-s);
   appearance: none;
 }
 
-.kui-color-picker__hue::-moz-range-thumb,
+.kui-color-picker__slider::-moz-range-thumb,
 .kui-color-picker__opacity::-moz-range-thumb {
   width: var(--_kui-color-picker-thumb);
   height: var(--_kui-color-picker-thumb);
@@ -146,22 +170,22 @@
   border-radius: 50%;
   background: var(--_kui-color-picker-thumb-color);
   box-shadow:
-    0 0 0 1px rgb(0 0 0 / 0.2),
+    0 0 0 1px var(--_kui-color-picker-thumb-outline),
     var(--kui-shadow-s);
 }
 
-.kui-color-picker__hue:focus-visible,
+.kui-color-picker__slider:focus-visible,
 .kui-color-picker__opacity:focus-visible {
   outline: none;
 }
 
-.kui-color-picker__hue:focus-visible::-webkit-slider-thumb,
+.kui-color-picker__slider:focus-visible::-webkit-slider-thumb,
 .kui-color-picker__opacity:focus-visible::-webkit-slider-thumb {
   outline: var(--kui-focus-ring);
   outline-offset: 1px;
 }
 
-.kui-color-picker__hue:focus-visible::-moz-range-thumb,
+.kui-color-picker__slider:focus-visible::-moz-range-thumb,
 .kui-color-picker__opacity:focus-visible::-moz-range-thumb {
   outline: var(--kui-focus-ring);
   outline-offset: 1px;
@@ -317,10 +341,21 @@
   cursor: not-allowed;
 }
 
+/* Increased contrast draws the area and track edge in the full text color. */
+@media (prefers-contrast: more) {
+  .kui-color-picker__surface {
+    --_kui-color-picker-track-edge: var(--kui-color-text);
+  }
+}
+
 @media (forced-colors: active) {
+  .kui-color-picker__surface {
+    --_kui-color-picker-track-edge: CanvasText;
+  }
+
   .kui-color-picker__area,
   .kui-color-picker__area-thumb,
-  .kui-color-picker__hue,
+  .kui-color-picker__slider,
   .kui-color-picker__opacity {
     forced-color-adjust: none;
   }

package/dist/styles/components/actions/button/button.css

@@ -47,6 +47,13 @@
   --_kui-button-on-quiet: var(--kui-color-brand-on-quiet);
   --_kui-button-outline: var(--kui-color-brand-border-loud);
 }
+.kui-button[data-tone="success"] {
+  --_kui-button-fill: var(--kui-color-success-fill-loud);
+  --_kui-button-text: var(--kui-color-success-on-loud);
+  --_kui-button-quiet: var(--kui-color-success-fill-quiet);
+  --_kui-button-on-quiet: var(--kui-color-success-on-fill);
+  --_kui-button-outline: var(--kui-color-success-border-loud);
+}
 .kui-button[data-tone="danger"] {
   --_kui-button-fill: var(--kui-color-danger-fill-loud);
   --_kui-button-text: var(--kui-color-danger-on-loud);
@@ -75,14 +82,27 @@
   flex-shrink: 0;
   padding: 0;
 }
+/* fill: the button spans its parent's available inline width, as a filled
+   SplitButton does. The label stays centered and ellipsizes once it no longer
+   fits; an icon-only button that fills spans too. */
+.kui-button[data-fill="true"] {
+  display: flex;
+  width: 100%;
+  min-width: 0;
+}
+.kui-button[data-fill="true"] > .kui-button__label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 /* A pill: fully round ends (a circle when icon-only). */
 .kui-button[data-shape="pill"] {
   border-radius: var(--kui-layout-pill-radius, calc(1px + 1.3125rem));
 }
 /* A pressed neutral toggle takes the brand accent, as a pressed toolbar group
-   control and a selected chip do; brand and danger keep their own tone. */
+   control and a selected chip do; semantic tones keep their own color. */
 .kui-button[aria-pressed="true"]:not(
     [data-tone="brand"],
+    [data-tone="success"],
     [data-tone="danger"]
   ) {
   --_kui-button-fill: var(--kui-color-brand-fill-loud);
@@ -93,7 +113,7 @@
 }
 /* A pressed toggle draws on top of its tone and emphasis. Secondary and plain
    take the tone's quiet fill with a doubled tone outline; primary keeps its
-   loud fill (darkened for brand and danger) with an inset ring. The second pixel of outline marks
+   loud fill (darkened for semantic tones) with an inset ring. The second pixel of outline marks
    the state without relying on hue. */
 .kui-button[aria-pressed="true"]:is(
     [data-emphasis="secondary"],
@@ -121,6 +141,16 @@
     light-dark(#000, #fff) 18%
   );
 }
+.kui-button[data-tone="success"][aria-pressed="true"]:not(
+    [data-emphasis="secondary"],
+    [data-emphasis="plain"]
+  ) {
+  --_kui-button-fill: color-mix(
+    in oklab,
+    var(--kui-color-success-fill-loud),
+    light-dark(#000, #fff) 18%
+  );
+}
 .kui-button[data-tone="danger"][aria-pressed="true"]:not(
     [data-emphasis="secondary"],
     [data-emphasis="plain"]
@@ -197,10 +227,35 @@
   outline: var(--kui-focus-ring);
   outline-offset: 1px;
 }
+/* focusRingInset: inside an ancestor that clips overflow, the ring moves
+   inside the box. On a loud fill the ring can share the fill's hue (brand),
+   so a surface-colored line runs inside it: the ring then meets the surface
+   on both edges, as the outside ring does, whatever the fill. The line is an
+   inset shadow from the padding edge (inside the 1px border) to 3px past the
+   ring, wide enough to stay solid at a fractional position; a pressed
+   toggle's inset ring lies under the focus ring meanwhile. The line paints
+   the surface the button sits on: the surface context's opaque color with
+   its translucent tint (a sunken or quiet fill) layered over it
+   (foundation.css), so it reads as a cut through the fill, not a halo. */
+.kui-button[data-focus-ring-inset="true"]:focus-visible {
+  outline-offset: -3px;
+  box-shadow:
+    inset 0 0 0 5px var(--kui-color-surface-current-tint, transparent),
+    inset 0 0 0 5px var(--kui-color-surface-current-region, transparent),
+    inset 0 0 0 5px var(--kui-color-surface-current, var(--kui-color-surface));
+}
 .kui-button:is(:disabled, [aria-disabled="true"]) {
   cursor: not-allowed;
   opacity: 0.5;
 }
+/* Keep a disabled positive action quiet without fading its label below text
+   contrast. The subdued fill and border mark it unavailable. */
+.kui-button[data-tone="success"]:is(:disabled, [aria-disabled="true"]) {
+  --_kui-button-fill: var(--kui-color-success-fill-quiet);
+  --_kui-button-text: var(--kui-color-success-on-fill);
+  --_kui-button-border: var(--kui-color-success-border-quiet);
+  opacity: 1;
+}
 .kui-button__icon {
   display: inline-flex;
   flex: none;