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

package/dist/styles/components/forms/color-picker/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/forms/radio-group/radio-group.css

@@ -1,6 +1,9 @@
-/* RadioGroup: the group label, the choices on the text column (each a drawn
-   circle beside its label, the native radio invisibly over the circle), and
-   hint and error text below. */
+/* RadioGroup: the group label, the choices (each a drawn circle beside its
+   label, the native radio invisibly over the circle), and hint and error text
+   below. Each circle sits on the group's inline-start edge, where a
+   Checkbox draws its box, so stacked checkboxes and radios share one control
+   column, and stacked choices sit 8px apart: the same 28px pitch as Checkboxes
+   in a List gap="xs". */
 .kui-radio-group {
   --_kui-radio-group-size: 1.25rem;
   --_kui-radio-group-gap: 0.5rem;
@@ -36,8 +39,7 @@
 .kui-radio-group__choices {
   display: flex;
   flex-direction: column;
-  gap: 0.75rem;
-  padding-inline: var(--kui-layout-item-padding, 0.5rem);
+  gap: var(--kui-space-xs);
 }
 .kui-radio-group[data-orientation="horizontal"] .kui-radio-group__choices {
   flex-direction: row;

package/dist/styles/components/forms/select/select.css

@@ -67,8 +67,12 @@
   outline-color: transparent;
 }
 /* Focus shows on the control (pointer or keyboard), but not while its
-   listbox is open: the listbox shows where focus is then. */
-.kui-select:not([open]):focus-within > .kui-select__trigger {
+   listbox is open: the listbox shows where focus is then. A Select whose
+   enclosing group owns the ring (`focusRingOwner="group"`) never paints its
+   own here: the exclusion lives in this selector, not in a later override,
+   because the focus state outranks any plain owner rule. */
+.kui-select:not([data-focus-ring-owner="group"]):not([open]):focus-within
+  > .kui-select__trigger {
   outline: var(--kui-focus-ring);
   outline-offset: 1px;
 }

package/dist/styles/components/forms/switch/switch.css

@@ -1,5 +1,6 @@
-/* Switch: a track and thumb beside its label, with a hint on the label's
-   column. The native input sits invisibly over the track. */
+/* Switch: a track and thumb beside its label, with a hint directly under
+   the label on its column, as a Checkbox hint sits. The native input sits
+   invisibly over the track. */
 .kui-switch {
   --_kui-switch-height: 1.25rem;
   --_kui-switch-gap: 0.5rem;
@@ -99,7 +100,6 @@
 }
 .kui-switch__hint {
   display: block;
-  margin-block-start: 0.4375rem;
   padding-inline-start: calc(
     var(--_kui-switch-height) * 1.75 + var(--_kui-switch-gap)
   );

package/dist/styles/components/layout/pane/pane.css

@@ -45,10 +45,12 @@
    root scroll in its short mode, while its content remains transparent. */
 .kui-pane[data-appearance="sunken"] > .kui-pane__content {
   background: var(--kui-sunken-panel-background, var(--kui-sunken-surface));
+  --kui-color-surface-current-region: var(--kui-color-surface-lowered);
 }
 
 .kui-pane[data-appearance="sunken"][data-chrome-placement="auto"] {
   background: var(--kui-sunken-panel-background, var(--kui-sunken-surface));
+  --kui-color-surface-current-region: var(--kui-color-surface-lowered);
 }
 
 .kui-pane[data-appearance="sunken"][data-chrome-placement="auto"]
@@ -56,8 +58,15 @@
   background: transparent;
 }
 
+/* The surface context follows the paint: the auto chrome is opaque again. */
 .kui-pane[data-appearance="sunken"][data-chrome-placement="auto"]
   > :is(.kui-pane__header, .kui-pane__footer) {
+  --kui-color-surface-current: var(
+    --kui-pane-chrome-background,
+    var(--kui-color-surface)
+  );
+  --kui-color-surface-current-region: transparent;
+  --kui-color-surface-current-tint: transparent;
   background: var(--kui-pane-chrome-background, var(--kui-color-surface));
 }
 

package/dist/styles/components/layout/workbench/workbench.css

@@ -136,6 +136,7 @@
 .kui-workbench__main[data-appearance="sunken"],
 :is(.kui-workbench__rail, .kui-workbench__drawer)[data-appearance="sunken"] {
   background: var(--kui-sunken-panel-background, var(--kui-sunken-surface));
+  --kui-color-surface-current-region: var(--kui-color-surface-lowered);
 }
 
 :is(
@@ -143,6 +144,8 @@
     .kui-workbench__drawer
   )[data-appearance="sunken"][data-resizable="true"][data-content-overflow="auto"] {
   background: transparent;
+  /* Only the content paints; the root keeps the inherited context. */
+  --kui-color-surface-current-region: inherit;
 }
 
 :is(
@@ -151,6 +154,7 @@
   )[data-appearance="sunken"][data-resizable="true"][data-content-overflow="auto"]
   > .kui-workbench__panel-content {
   background: var(--kui-sunken-panel-background, var(--kui-sunken-surface));
+  --kui-color-surface-current-region: var(--kui-color-surface-lowered);
 }
 
 .kui-workbench__main[data-drawer-inline-expanded="true"] {

package/dist/styles/components/navigation/nav-stack/nav-stack.css

@@ -291,6 +291,63 @@
   }
 }
 
+/* An overlay bar cross-fades its contents, never its material. Fading the
+   bar itself would fade its backdrop filter with it (WebKit drops the blur
+   outright), so mid push or pop the sliding views would show through the
+   chrome. Instead the live bar keeps its material at full opacity while its
+   contents fade in, and the copy cross-fading out above it carries no
+   material of its own (nor a clear bar's scroll edge), only the old
+   contents and divider. */
+.kui-nav-stack[data-chrome-presentation="overlay"] > .kui-nav-stack__chrome,
+.kui-nav-stack[data-bottom-toolbar-presentation="overlay"]
+  > .kui-nav-stack__bottom {
+  opacity: 1;
+  transition: none;
+}
+
+.kui-nav-stack[data-chrome-presentation="overlay"]
+  > .kui-nav-stack__chrome:not(.kui-nav-stack__chrome-copy)
+  > *,
+.kui-nav-stack[data-bottom-toolbar-presentation="overlay"]
+  > .kui-nav-stack__bottom:not(.kui-nav-stack__chrome-copy)
+  > * {
+  transition: opacity var(--kui-nav-stack-transition-duration, 200ms) ease;
+}
+
+.kui-nav-stack[data-chrome-presentation="overlay"]
+  > .kui-nav-stack__chrome--entering:not(.kui-nav-stack__chrome-copy)
+  > *,
+.kui-nav-stack[data-bottom-toolbar-presentation="overlay"]
+  > .kui-nav-stack__chrome--entering:not(.kui-nav-stack__chrome-copy)
+  > * {
+  transition: none;
+  opacity: 0;
+}
+
+.kui-nav-stack[data-chrome-presentation="overlay"]
+  > .kui-nav-stack__chrome.kui-nav-stack__chrome-copy,
+.kui-nav-stack[data-bottom-toolbar-presentation="overlay"]
+  > .kui-nav-stack__bottom.kui-nav-stack__chrome-copy {
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
+  background: transparent;
+  transition: opacity var(--kui-nav-stack-transition-duration, 200ms) ease;
+}
+
+.kui-nav-stack[data-chrome-presentation="overlay"]
+  > .kui-nav-stack__chrome.kui-nav-stack__chrome-copy--exiting,
+.kui-nav-stack[data-bottom-toolbar-presentation="overlay"]
+  > .kui-nav-stack__bottom.kui-nav-stack__chrome-copy--exiting {
+  opacity: 0;
+}
+
+.kui-nav-stack[data-chrome-material="clear"][data-scroll-edge]
+  > .kui-nav-stack__chrome.kui-nav-stack__chrome-copy::before,
+.kui-nav-stack[data-bottom-toolbar-material="clear"][data-scroll-edge]
+  > .kui-nav-stack__bottom.kui-nav-stack__chrome-copy::before {
+  content: none;
+}
+
 /* `clear` chrome and bottom toolbar: overlay bars (the same measuring,
    placement, and edge insets as above) that are fully transparent, for
    chrome over imagery. With `scrollEdge="material"` a pseudo-element
@@ -521,7 +578,13 @@
   .kui-nav-stack__view,
   .kui-nav-stack__chrome,
   .kui-nav-stack__bottom,
-  .kui-nav-stack__chrome-copy {
+  .kui-nav-stack__chrome-copy,
+  .kui-nav-stack[data-chrome-presentation="overlay"]
+    > .kui-nav-stack__chrome
+    > *,
+  .kui-nav-stack[data-bottom-toolbar-presentation="overlay"]
+    > .kui-nav-stack__bottom
+    > * {
     transition: none;
   }
 }

package/dist/styles/components/navigation/tab-navigator/tab-navigator.css

@@ -53,6 +53,7 @@
 
 .kui-tab-scaffold__scene[data-appearance="sunken"] {
   background: var(--kui-sunken-panel-background, var(--kui-sunken-surface));
+  --kui-color-surface-current-region: var(--kui-color-surface-lowered);
 }
 
 /* `background`: the navigator's color paints the root and a docked bar (the

package/dist/styles/components/surfaces/content-item/content-item.css

@@ -126,6 +126,36 @@
   --kui-content-item-foreground: var(--kui-color-brand-on-fill);
 }
 
+/* The surface context follows the fill an item paints: a quiet appearance,
+   a hover, press, or selection. A transparent item keeps its parent's
+   context; a brand-loud fill shares the focus ring's hue, so a control on it
+   keeps the surface line. A surface appearance is opaque, so it resets. */
+.kui-content-item:is(
+  [data-appearance]:not(
+    [data-appearance="transparent"],
+    [data-appearance="brand-loud"]
+  ),
+  [data-interactive="true"]:hover:not([data-disabled="true"]),
+  [data-interactive="true"]:is(
+    [data-kui-pressed="true"],
+    [data-selected="true"]
+  )
+) {
+  --kui-color-surface-current-tint: var(--kui-content-item-background);
+}
+
+.kui-content-item[data-appearance="surface"]:not(
+    [data-interactive="true"]:is(
+      :hover,
+      [data-kui-pressed="true"],
+      [data-selected="true"]
+    )
+  ) {
+  --kui-color-surface-current: var(--kui-color-surface);
+  --kui-color-surface-current-region: transparent;
+  --kui-color-surface-current-tint: transparent;
+}
+
 .kui-content-item:is(:focus-visible, [data-outlined="true"]) {
   outline: var(--kui-focus-ring);
   outline-offset: 1px;

package/dist/styles/components/surfaces/disclosure/disclosure.css

@@ -24,6 +24,7 @@
 .kui-disclosure[data-appearance="sunken"] {
   --_kui-disclosure-border: var(--kui-color-neutral-border-normal);
   --_kui-disclosure-background: var(--kui-sunken-surface);
+  --kui-color-surface-current-tint: var(--kui-color-surface-lowered);
 }
 
 .kui-disclosure__summary {
@@ -90,6 +91,43 @@
     0;
 }
 
+/* Embedded: inside owner chrome, such as a ContentItem, that already draws
+   the margin, border, and padding. The root adds none of its own, so the
+   arrow sits on the owner's content inset (icons align to icons), and the
+   summary is a compact inline row. The content expects no inset of its own
+   (a flush Text, inline copy) and starts on the title's text column, one
+   item gap below the summary. A hover fill would touch the arrow and text at
+   the owner's content edge, so the embedded summary keeps only its pointer
+   cursor and draws its focus ring just outside the row. */
+.kui-disclosure[data-appearance="embedded"] {
+  margin: 0;
+  border: 0;
+  border-radius: 0;
+}
+
+.kui-disclosure[data-appearance="embedded"] > .kui-disclosure__summary {
+  min-height: 1.5rem;
+  padding: 0;
+  border-radius: var(--kui-radius-s, 0.1875rem);
+}
+
+.kui-disclosure[data-appearance="embedded"] > .kui-disclosure__summary:hover {
+  background: none;
+}
+
+.kui-disclosure[data-appearance="embedded"]
+  > .kui-disclosure__summary:focus-visible {
+  outline-offset: 0.125rem;
+}
+
+.kui-disclosure[data-appearance="embedded"] > .kui-disclosure__content {
+  padding-block: var(--kui-layout-item-gap, 0.5rem) 0;
+  padding-inline: calc(
+      var(--kui-disclosure-arrow-size, 1.125rem) + var(--kui-space-xs)
+    )
+    0;
+}
+
 @media (forced-colors: active) {
   .kui-disclosure[data-appearance="framed"],
   .kui-disclosure[data-appearance="sunken"] {

package/dist/styles/components/surfaces/sunken-panel/sunken-panel.css

@@ -13,6 +13,9 @@
   );
   color: var(--kui-sunken-panel-foreground, var(--kui-color-text));
   background: var(--kui-sunken-panel-background, var(--kui-sunken-surface));
+  /* The surface-context tint: an inset focus ring's line matches the lowered
+     color its controls sit on (foundation.css). */
+  --kui-color-surface-current-tint: var(--kui-color-surface-lowered);
   flex-direction: column;
   gap: var(--kui-sunken-panel-gap, 0.5rem);
 }

package/dist/styles/components/surfaces/surface-scaffold/surface-scaffold.css

@@ -29,6 +29,9 @@
   color: var(--kui-color-text, inherit);
   border: none;
   border-radius: var(--_kui-dialog-surface-radius);
+  --kui-color-surface-current: var(--kui-color-surface-raised);
+  --kui-color-surface-current-region: transparent;
+  --kui-color-surface-current-tint: transparent;
   background-color: var(--kui-color-surface-raised);
   box-shadow: var(--kui-shadow-l);
   /* Sizes apply at once: a theme's transition on bare dialog elements would
@@ -637,6 +640,9 @@ h2.kui-dialog-surface__title {
     var(--kui-layout-pill-radius, calc(1px + 1.3125rem)) +
       var(--kui-wa-surface-inset, 0.5rem)
   );
+  --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);
 }

package/dist/styles/components/typography/text/text.css

@@ -175,6 +175,16 @@ span.kui-text {
   white-space: nowrap;
 }
 
+/* A wrapping header keeps the whole label: it breaks onto further lines
+   instead of ellipsizing, and `anywhere` lets a single long word break too, so
+   the label's minimum width never pushes the header past its column. */
+.kui-list-header[data-wrap="true"] .kui-list-header__title > .kui-text {
+  overflow: visible;
+  overflow-wrap: anywhere;
+  text-overflow: clip;
+  white-space: normal;
+}
+
 .kui-list-header[data-size="xs"] .kui-list-header__title > .kui-text {
   font-size: var(--kui-font-2xs);
   text-transform: capitalize;

package/dist/styles/content-item.css

@@ -126,6 +126,36 @@
   --kui-content-item-foreground: var(--kui-color-brand-on-fill);
 }
 
+/* The surface context follows the fill an item paints: a quiet appearance,
+   a hover, press, or selection. A transparent item keeps its parent's
+   context; a brand-loud fill shares the focus ring's hue, so a control on it
+   keeps the surface line. A surface appearance is opaque, so it resets. */
+.kui-content-item:is(
+  [data-appearance]:not(
+    [data-appearance="transparent"],
+    [data-appearance="brand-loud"]
+  ),
+  [data-interactive="true"]:hover:not([data-disabled="true"]),
+  [data-interactive="true"]:is(
+    [data-kui-pressed="true"],
+    [data-selected="true"]
+  )
+) {
+  --kui-color-surface-current-tint: var(--kui-content-item-background);
+}
+
+.kui-content-item[data-appearance="surface"]:not(
+    [data-interactive="true"]:is(
+      :hover,
+      [data-kui-pressed="true"],
+      [data-selected="true"]
+    )
+  ) {
+  --kui-color-surface-current: var(--kui-color-surface);
+  --kui-color-surface-current-region: transparent;
+  --kui-color-surface-current-tint: transparent;
+}
+
 .kui-content-item:is(:focus-visible, [data-outlined="true"]) {
   outline: var(--kui-focus-ring);
   outline-offset: 1px;

package/dist/styles/disclosure.css

@@ -24,6 +24,7 @@
 .kui-disclosure[data-appearance="sunken"] {
   --_kui-disclosure-border: var(--kui-color-neutral-border-normal);
   --_kui-disclosure-background: var(--kui-sunken-surface);
+  --kui-color-surface-current-tint: var(--kui-color-surface-lowered);
 }
 
 .kui-disclosure__summary {
@@ -90,6 +91,43 @@
     0;
 }
 
+/* Embedded: inside owner chrome, such as a ContentItem, that already draws
+   the margin, border, and padding. The root adds none of its own, so the
+   arrow sits on the owner's content inset (icons align to icons), and the
+   summary is a compact inline row. The content expects no inset of its own
+   (a flush Text, inline copy) and starts on the title's text column, one
+   item gap below the summary. A hover fill would touch the arrow and text at
+   the owner's content edge, so the embedded summary keeps only its pointer
+   cursor and draws its focus ring just outside the row. */
+.kui-disclosure[data-appearance="embedded"] {
+  margin: 0;
+  border: 0;
+  border-radius: 0;
+}
+
+.kui-disclosure[data-appearance="embedded"] > .kui-disclosure__summary {
+  min-height: 1.5rem;
+  padding: 0;
+  border-radius: var(--kui-radius-s, 0.1875rem);
+}
+
+.kui-disclosure[data-appearance="embedded"] > .kui-disclosure__summary:hover {
+  background: none;
+}
+
+.kui-disclosure[data-appearance="embedded"]
+  > .kui-disclosure__summary:focus-visible {
+  outline-offset: 0.125rem;
+}
+
+.kui-disclosure[data-appearance="embedded"] > .kui-disclosure__content {
+  padding-block: var(--kui-layout-item-gap, 0.5rem) 0;
+  padding-inline: calc(
+      var(--kui-disclosure-arrow-size, 1.125rem) + var(--kui-space-xs)
+    )
+    0;
+}
+
 @media (forced-colors: active) {
   .kui-disclosure[data-appearance="framed"],
   .kui-disclosure[data-appearance="sunken"] {

package/dist/styles/foundation.css

@@ -178,6 +178,23 @@
   --kui-sunken-surface:
     var(--kui-sunken-texture) 0 0 / 100px 100px repeat,
     var(--kui-color-surface-lowered);
+  /* The surface context: what a region paints behind its children, for a
+     control that must match it (an inset focus ring's inner line). Left
+     undeclared here, so a reader falls back to the base surface:
+       --kui-color-surface-current: the opaque surface beneath (default
+         --kui-color-surface); an opaque surface (a raised dialog or popup, a
+         base or raised List) sets it and clears the tint.
+       --kui-color-surface-current-region: a layout region's translucent
+         fill over it (a sunken Pane, Workbench area, or TabNavigator scene;
+         default transparent).
+       --kui-color-surface-current-tint: a content surface's translucent
+         fill over that (a SunkenPanel, a sunken Disclosure, a lowered
+         FramedList, a quiet ContentItem; default transparent).
+     A reader layers the tint over the region over the color, so a content
+     surface inside a sunken region (the common nesting) composes exactly;
+     custom properties cannot fold an inherited value into a new one, so a
+     third translucent level keeps only the innermost content tint. A surface sets both on its own
+     painted element, never on a child; a scoped tint resets them below. */
   /* Translucent chrome material: a bar laid over scrolling content (a Pane's
      overlay header) lets the content show through, blurred, beneath it.
      80% of the surface keeps --kui-color-text at AA over any content
@@ -573,6 +590,10 @@
 [data-kui-tint] {
   color: var(--kui-color-text);
   --kui-chrome-material-filter: blur(20px);
+  /* The scope re-derives its surface, so an outer surface context ends here. */
+  --kui-color-surface-current: initial;
+  --kui-color-surface-current-region: initial;
+  --kui-color-surface-current-tint: initial;
 }
 
 @supports (color: oklch(from red l c h)) {