@kerfjs/ui 5.0.0-beta.105 → 5.0.0-beta.107

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

@@ -75,6 +75,18 @@
   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));
@@ -197,6 +209,23 @@
   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;

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

@@ -1,20 +1,32 @@
 /* One loud semantic fill split into a primary half and a narrow options
    trigger, with a hairline divider in the foreground color. Both halves are
-   native buttons on the shared fill; each brightens on its own hover. */
+   native buttons on the shared fill; each brightens on its own hover. The
+   outer corners take the shared control radius, or full round ends as a
+   pill; the divider seam between the halves stays square. */
 .kui-split-button {
   --_kui-split-button-fill: var(--kui-color-brand-fill-loud);
   --_kui-split-button-on: var(--kui-color-brand-on-loud);
+  --_kui-split-button-radius: var(
+    --kui-layout-rounded-radius,
+    calc(1px + 0.6875rem)
+  );
   display: inline-grid;
   min-width: 0;
   min-height: 2.75rem;
-  overflow: hidden;
-  border-radius: var(--kui-layout-rounded-radius, calc(1px + 0.6875rem));
+  border-radius: var(--_kui-split-button-radius);
   color: var(--_kui-split-button-on);
   background: var(--_kui-split-button-fill);
   grid-template-columns: minmax(0, auto) 2.5rem;
   font-weight: var(--kui-font-weight-semibold);
 }
 
+.kui-split-button[data-shape="pill"] {
+  --_kui-split-button-radius: var(
+    --kui-layout-pill-radius,
+    calc(1px + 1.3125rem)
+  );
+}
+
 .kui-split-button[data-tone="neutral"] {
   --_kui-split-button-fill: var(--kui-color-neutral-fill-loud);
   --_kui-split-button-on: var(--kui-color-neutral-on-loud);
@@ -50,6 +62,7 @@
   padding-inline: var(--kui-space-s);
   border: 0;
   border-radius: 0;
+  appearance: none;
   color: inherit;
   background: transparent;
   cursor: pointer;
@@ -69,11 +82,44 @@
   background: color-mix(in srgb, currentColor 12%, transparent);
 }
 
-/* The group clips outer outlines at its rounded corners, so the ring sits
-   inside each half. */
+/* Each half rounds its outer corners with the group, so its hover fill and
+   focus ring follow the rounded or pill end. The group does not clip, so
+   these radii are what keep a half's fill inside the group's corners. */
+.kui-split-button > .kui-split-button__primary {
+  border-start-start-radius: var(--_kui-split-button-radius);
+  border-end-start-radius: var(--_kui-split-button-radius);
+}
+
+.kui-split-button > .kui-split-button__options {
+  border-start-end-radius: var(--_kui-split-button-radius);
+  border-end-end-radius: var(--_kui-split-button-radius);
+}
+
+/* The ring sits outside the focused half, offset like Button's, so it is
+   drawn against the surrounding surface rather than the loud fill, whose
+   brand color can match the ring's own (an inset ring vanished there). The
+   segment along the divider overlaps the neighboring half, painted above it. */
+.kui-split-button > button:focus {
+  outline: none;
+}
+
 .kui-split-button > button:focus-visible {
   outline: var(--kui-focus-ring);
+  outline-offset: 1px;
+}
+
+/* focusRingInset: inside an ancestor that clips overflow, each half's ring
+   moves inside its box. The loud fill can share the ring's hue (brand), so a
+   surface-colored line runs inside the ring: the ring then meets the surface
+   on both edges, as the outside ring does, on every tone. The line runs 3px
+   past the ring, wide enough to stay solid at a fractional position. It
+   paints the surface context, as Button's does (foundation.css). */
+.kui-split-button[data-focus-ring-inset="true"] > button:focus-visible {
   outline-offset: -3px;
+  box-shadow:
+    inset 0 0 0 6px var(--kui-color-surface-current-tint, transparent),
+    inset 0 0 0 6px var(--kui-color-surface-current-region, transparent),
+    inset 0 0 0 6px var(--kui-color-surface-current, var(--kui-color-surface));
 }
 
 .kui-split-button > button:disabled {

package/dist/styles/components/collections/framed-list/framed-list.css

@@ -11,10 +11,14 @@
   border: 1px solid var(--kui-framed-list-border);
   border-radius: var(--kui-layout-rounded-radius, calc(1px + 0.6875rem));
   background: var(--kui-color-surface-lowered);
+  --kui-color-surface-current-tint: var(--kui-color-surface-lowered);
   list-style: none;
 }
 
 .kui-framed-list[data-surface="base"] {
+  --kui-color-surface-current: var(--kui-color-surface);
+  --kui-color-surface-current-region: transparent;
+  --kui-color-surface-current-tint: transparent;
   background: var(--kui-color-surface);
 }
 

package/dist/styles/components/collections/list/list.css

@@ -273,10 +273,16 @@
 
 /* `surface`: a solid background behind the stack and its insets. */
 .kui-list[data-surface="base"] {
+  --kui-color-surface-current: var(--kui-color-surface);
+  --kui-color-surface-current-region: transparent;
+  --kui-color-surface-current-tint: transparent;
   background: var(--kui-color-surface);
 }
 
 .kui-list[data-surface="raised"] {
+  --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);
 }
 

package/dist/styles/components/collections/list-header/list-header.css

@@ -29,6 +29,13 @@
   padding-block: var(--kui-list-header-title-padding-block, 0.25rem);
 }
 
+/* Wrapped label lines keep the compact header's 4px block inset off the
+   header edges; a one-line label still centers in the unchanged minimum
+   height. */
+.kui-list-header[data-wrap="true"] .kui-list-header__title {
+  padding-block: var(--kui-list-header-title-padding-block, 0.25rem);
+}
+
 .kui-list-header[data-divider="before"],
 .kui-list-header[data-divider="both"] {
   border-block-start: 1px solid

package/dist/styles/components/feedback/anchored-surface/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/components/forms/checkbox/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/components/forms/checkbox-group/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;
+}