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

package/dist/styles/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/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/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/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/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/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/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/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/styles.css

@@ -44,6 +44,7 @@
 @import "./file-picker.css";
 @import "./text-field.css";
 @import "./checkbox.css";
+@import "./checkbox-group.css";
 @import "./slider.css";
 @import "./radio-group.css";
 @import "./switch.css";

package/dist/styles/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/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/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/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/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/webawesome.css

@@ -583,6 +583,7 @@
     wa-number-input,
     wa-radio-group,
     wa-select,
+    wa-tag-input,
     wa-textarea,
     wa-time-input
   ):not([size="small"]) {
@@ -600,6 +601,7 @@
     wa-number-input,
     wa-radio-group,
     wa-select,
+    wa-tag-input,
     wa-textarea,
     wa-time-input
   )::part(form-control-label),
@@ -617,27 +619,46 @@
     text-transform: uppercase;
   }
 
-  /* Checkbox/radio groups and the color picker have no bordered field shell,
-     so their control regions need the content-item's 8px inline outer inset. */
-  :is(wa-checkbox-group, wa-color-picker, wa-radio-group)::part(
-    form-control-input
-  ) {
+  /* Checkbox and radio groups and the color picker keep their control region
+     flush: each box, circle, or swatch trigger sits on the host's
+     inline-start edge, where a Kerf Checkbox, RadioGroup, or ColorField draws
+     it, while the label and hint stay on the 9px text column. The slider
+     alone insets its complete interactive region by the shared 8px. */
+  wa-slider::part(slider) {
     margin-inline: var(--kui-layout-inline-margin, 0.5rem);
   }
 
-  wa-slider::part(slider) {
-    margin-inline: var(--kui-layout-inline-margin, 0.5rem);
+  /* Stacked radios sit 8px apart (0.25em on each side at the 16px default)
+     instead of Web Awesome's 12px, the 28px pitch Kerf's RadioGroup and a
+     Checkbox List share. The first and last radio keep their flush outer
+     edges, and horizontal and button radios keep their own spacing. */
+  wa-radio[appearance="default"]:not(
+      [data-wa-radio-horizontal],
+      [data-wa-radio-first]
+    ) {
+    margin-block-start: 0.25em;
+  }
+
+  wa-radio[appearance="default"]:not(
+      [data-wa-radio-horizontal],
+      [data-wa-radio-last]
+    ) {
+    margin-block-end: 0.25em;
   }
 
   /* Secondary captions and hints align with the value inside bordered fields:
-     1px border + 8px field padding = a 9px logical inset. */
+     1px border + 8px field padding = a 9px logical inset. Checkbox and radio
+     group hints share that text column with their group label. */
   wa-known-date::part(field-label),
   :is(
+    wa-checkbox-group,
     wa-input,
     wa-known-date,
     wa-number-input,
     wa-otp-input,
+    wa-radio-group,
     wa-select,
+    wa-tag-input,
     wa-textarea,
     wa-time-input
   )::part(hint) {
@@ -646,6 +667,21 @@
         var(--wa-form-control-padding-inline)
     );
   }
+
+  /* An OTP input reserves its segments' focus-ring bleed with padding and an
+     equal negative margin, then caps the padded box at 100% of the host. In a
+     shrink-to-fit host (a start-aligned grid or flex item, an inline layout)
+     the host is only the segments' width minus that bleed, so the cap clips
+     the last cell's inline-end edge inside the scroll container. Cap the box
+     at the host's width plus the bleed instead, which is the space its
+     negative margins actually give it: the segments still scroll inside a
+     host narrower than the code, and never clip one that fits. The contained
+     appearance has no bleed and keeps upstream's cap. */
+  wa-otp-input:not([appearance="contained"])::part(segments) {
+    max-width: calc(
+      100% + 2 * (var(--wa-focus-ring-offset) + var(--wa-focus-ring-width))
+    );
+  }
 }
 
 /* Small Web Awesome fields have 14px hosts by default. Raise only the editable
@@ -653,7 +689,7 @@
    their compact chrome and desktop typography keep their normal sizes. */
 @media (hover: none) and (pointer: coarse) {
   @layer wa-theme-overrides {
-    :is(wa-input, wa-number-input, wa-time-input):is(
+    :is(wa-input, wa-number-input, wa-tag-input, wa-time-input):is(
         [size="xs"],
         [size="s"],
         [size="small"]

package/dist/styles/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/surface-scaffold.d.ts

@@ -82,6 +82,12 @@ type DialogSurfaceProps = DialogSurfaceName & DialogSurfaceOptions;
 interface DialogSurfaceOptions {
     /** The dialog's id, for `openDialog(document.getElementById(id))`. */
     id?: string;
+    /**
+     * Id of the element whose text is the dialog's accessible description,
+     * such as the `heading` ToolbarText's `descriptionId` or app-owned summary
+     * copy in the body; rendered as `aria-describedby` on the `<dialog>`.
+     */
+    describedBy?: string;
     /** The body content. */
     children: KerfUiContent;
     /**
@@ -196,7 +202,7 @@ interface DialogSurfaceOptions {
  * floating header and footer measurement, the bottom sheet's keyboard
  * clearance and grabber, and re-render resilience while open.
  */
-declare function DialogSurface({ id, label, labelledBy, heading, headerActions, footer, withoutHeader, lightDismiss, closeLabel, children, size, presentation, preferredWidth, bodyInset, footerInset, viewportGutter, maxHeight, height, minHeight, resizable, enterMotion, exitMotion, bodyLayout, headerPresentation, footerPresentation, footerOffset, rootAttributes, className, slot, }: DialogSurfaceProps): kerfjs.SafeHtml;
+declare function DialogSurface({ id, label, labelledBy, describedBy, heading, headerActions, footer, withoutHeader, lightDismiss, closeLabel, children, size, presentation, preferredWidth, bodyInset, footerInset, viewportGutter, maxHeight, height, minHeight, resizable, enterMotion, exitMotion, bodyLayout, headerPresentation, footerPresentation, footerOffset, rootAttributes, className, slot, }: DialogSurfaceProps): kerfjs.SafeHtml;
 /** Where a PopoverDialogSurface appears: the top layer, or in flow. */
 type PopoverDialogSurfacePresentation = 'overlay' | 'embedded';
 /** Application `data-*` metadata on the surface root. */

package/dist/surface-scaffold.js

@@ -1,4 +1,4 @@
-export { DialogSurface, PopoverDialogSurface, PopupSurface } from './chunk-TAHR457X.js';
+export { DialogSurface, PopoverDialogSurface, PopupSurface } from './chunk-G4DRH4A5.js';
 export { closeDialog, openDialog } from './chunk-ATGAJVZ6.js';
 
 

package/dist/wire-color-fields.js

@@ -1,5 +1,5 @@
-import { wireColorPickers } from './chunk-ACUKTVS3.js';
-import { ColorPicker } from './chunk-EKBMUXFV.js';
+import { wireColorPickers } from './chunk-XWNXGFX3.js';
+import { ColorPicker } from './chunk-3Z7N2NAZ.js';
 
 
 import { openAnchoredSurface } from './chunk-3WYREXW4.js';

package/dist/wire-color-pickers.d.ts

@@ -19,9 +19,10 @@ interface WireColorPickersOptions {
 }
 /**
  * Make every ColorPicker under `root` interactive. The area takes pointer
- * drags and the arrow keys (Shift for steps of 10%); the hue and opacity
- * sliders are native ranges; channel, hex, and opacity fields commit on Enter
- * or blur; the model menu switches the channel fields; the screen sampler
+ * drags and the arrow keys (Shift for steps of 10%); the model's channel
+ * sliders and the opacity slider are native ranges, each changing only its
+ * own channel; channel, hex, and opacity fields commit on Enter or blur; the
+ * model menu switches the channel sliders and fields; the screen sampler
  * opens the EyeDropper where the browser has it; preset and sample swatches
  * apply their color. Each change updates the picker at once, dispatches a
  * bubbling `kui-color-input` (or `kui-color-change` when committed) event

package/dist/wire-color-pickers.js

@@ -1,4 +1,4 @@
-export { wireColorPickers } from './chunk-ACUKTVS3.js';
+export { wireColorPickers } from './chunk-XWNXGFX3.js';
 
 
 

package/dist/wire-comboboxes.js

@@ -1,4 +1,4 @@
-export { wireComboboxes } from './chunk-GCAK23PU.js';
+export { wireComboboxes } from './chunk-MVKHSAKE.js';
 
 
 //# sourceMappingURL=wire-comboboxes.js.map

package/dist/workbench-dialog.d.ts

@@ -34,8 +34,17 @@ interface WorkbenchDialogProps {
     label: string;
     /** The dialog's primary title: an xl heading in the work area's toolbar. */
     title: string;
-    /** A short supporting line under the title. */
+    /**
+     * A short supporting line under the title. It is the dialog's accessible
+     * description (`aria-describedby` to its `<id>-description`) unless
+     * `describedBy` names other content.
+     */
     description?: string;
+    /**
+     * Id of the element whose text is the dialog's accessible description, in
+     * place of `description`, such as app-owned summary copy in `main`.
+     */
+    describedBy?: string;
     /** Groups after the title in the work area's toolbar. */
     leading?: KerfUiContent;
     /** Header controls before the close control, such as a `ToolbarControlGroup`. */
@@ -92,6 +101,6 @@ interface WorkbenchDialogProps {
  * Escape or a press outside it before the dialog sees the Escape. Built from
  * `DialogSurface` and `Workbench`.
  */
-declare function WorkbenchDialog({ id, label, title, description, leading, actions, main, mainFooter, mainBottomToolbar, leftRail, rightRail, bottomDrawer, compact, closeLabel, lightDismiss, size, preferredWidth, height, maxHeight, viewportGutter, mainMinSize, rootAttributes, className, slot, }: WorkbenchDialogProps): kerfjs.SafeHtml;
+declare function WorkbenchDialog({ id, label, title, description, describedBy, leading, actions, main, mainFooter, mainBottomToolbar, leftRail, rightRail, bottomDrawer, compact, closeLabel, lightDismiss, size, preferredWidth, height, maxHeight, viewportGutter, mainMinSize, rootAttributes, className, slot, }: WorkbenchDialogProps): kerfjs.SafeHtml;
 
 export { WorkbenchDialog, type WorkbenchDialogProps, type WorkbenchDialogRootAttributes };

package/dist/workbench-dialog.js

@@ -1,7 +1,7 @@
-import { DialogSurface } from './chunk-TAHR457X.js';
+import { DialogSurface } from './chunk-G4DRH4A5.js';
 export { closeDialog, openDialog } from './chunk-ATGAJVZ6.js';
 
-import { Workbench } from './chunk-DDSCVEO5.js';
+import { Workbench } from './chunk-NLMEDZRM.js';
 
 
 
@@ -33,6 +33,7 @@ function WorkbenchDialog({
   label,
   title,
   description,
+  describedBy,
   leading,
   actions,
   main,
@@ -59,6 +60,7 @@ function WorkbenchDialog({
     {
       id,
       label,
+      describedBy: describedBy ?? (description === void 0 ? void 0 : `${id}-description`),
       withoutHeader: true,
       lightDismiss,
       closeLabel,
@@ -88,6 +90,7 @@ function WorkbenchDialog({
               {
                 text: title,
                 description,
+                descriptionId: description === void 0 ? void 0 : `${id}-description`,
                 size: "xlarge",
                 id: `${id}-title`,
                 headingLevel: 2