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

package/dist/{chunk-ACUKTVS3.js → chunk-XWNXGFX3.js}

@@ -1,5 +1,5 @@
-import { COLOR_PICKER_SWATCH_ACTION, COLOR_PICKER_CHANNELS, colorPickerChannels, colorPickerStyle, colorPickerAreaText } from './chunk-EKBMUXFV.js';
-import { hsvForValue, hslToRgb, rgbToHsv, formatHex, hsvToRgb } from './chunk-TNJLNLVE.js';
+import { COLOR_PICKER_SWATCH_ACTION, COLOR_PICKER_CHANNELS, colorPickerStyle, colorPickerAreaText, colorPickerSlider, hsvFromChannels, colorChannelValues } from './chunk-3Z7N2NAZ.js';
+import { hsvForValue, formatHex, hsvToRgb } from './chunk-TNJLNLVE.js';
 
 // src/components/forms/color-picker/wiring/wire-color-pickers.ts
 var clamp = (value, min, max) => Math.min(max, Math.max(min, value));
@@ -21,9 +21,12 @@ function wireColorPickers(root, { onInput, onChange } = {}) {
     }
     return state;
   };
+  const channelValuesOf = (state) => state.memo?.mode === state.mode && state.memo.hsv === state.hsv ? state.memo.values : colorChannelValues(state.mode, state.hsv);
   const hexOf = (picker, hsv) => formatHex(hsvToRgb(alphaOn(picker) ? hsv : { ...hsv, a: 1 }));
   const paint = (picker, skipField) => {
-    const { hsv, mode } = stateOf(picker);
+    const state = stateOf(picker);
+    const { hsv, mode } = state;
+    const exact = channelValuesOf(state);
     const surface = picker.querySelector(
       ".kui-color-picker__surface"
     );
@@ -31,10 +34,22 @@ function wireColorPickers(root, { onInput, onChange } = {}) {
     const area = surface.querySelector(".kui-color-picker__area");
     area?.setAttribute("aria-valuenow", String(Math.round(hsv.s * 100)));
     area?.setAttribute("aria-valuetext", colorPickerAreaText(hsv));
-    const hue = surface.querySelector(
-      ".kui-color-picker__hue"
-    );
-    if (hue && hue !== skipField) hue.value = String(Math.round(hsv.h));
+    for (const input of surface.querySelectorAll(
+      ".kui-color-picker__slider"
+    )) {
+      const slider2 = colorPickerSlider(
+        mode,
+        Number(input.dataset.slider),
+        exact
+      );
+      input.hidden = slider2 === void 0;
+      if (slider2 === void 0) continue;
+      input.max = String(slider2.max);
+      if (input !== skipField) input.value = slider2.value;
+      input.setAttribute("aria-label", slider2.label);
+      input.setAttribute("aria-valuetext", slider2.valueText);
+      input.setAttribute("style", slider2.style);
+    }
     const opacity = `${Math.round(hsv.a * 100)}%`;
     const slider = surface.querySelector(
       ".kui-color-picker__opacity"
@@ -44,7 +59,7 @@ function wireColorPickers(root, { onInput, onChange } = {}) {
       slider.setAttribute("aria-valuetext", opacity);
     }
     const channels = COLOR_PICKER_CHANNELS[mode];
-    const values = colorPickerChannels(mode, hsv);
+    const values = exact.map(Math.round);
     surface.querySelector(".kui-color-picker__channels")?.setAttribute("data-count", String(channels.length));
     for (const field of surface.querySelectorAll(
       ".kui-color-picker__channel"
@@ -98,7 +113,22 @@ function wireColorPickers(root, { onInput, onChange } = {}) {
   };
   const update = (picker, next, committed, skipField) => {
     const state = stateOf(picker);
+    const held = state.memo?.hsv === state.hsv ? state.memo : void 0;
     state.hsv = { ...state.hsv, ...next };
+    if (held && Object.keys(next).join() === "a") held.hsv = state.hsv;
+    paint(picker, skipField);
+    report(picker, committed);
+  };
+  const setChannel = (picker, index, value, committed, skipField) => {
+    const state = stateOf(picker);
+    const values = [...channelValuesOf(state)];
+    values[index] = clamp(
+      value,
+      0,
+      COLOR_PICKER_CHANNELS[state.mode][index].max
+    );
+    state.hsv = hsvFromChannels(state.mode, values, state.hsv);
+    state.memo = { mode: state.mode, hsv: state.hsv, values };
     paint(picker, skipField);
     report(picker, committed);
   };
@@ -175,9 +205,9 @@ function wireColorPickers(root, { onInput, onChange } = {}) {
     const state = stateOf(picker);
     if (field.classList.contains("kui-color-picker__hex")) {
       const raw = field.value.trim().replace(/^#/, "");
-      const next2 = /^[\da-f]{3,8}$/i.test(raw) ? hsvForValue(`#${raw}`, state.hsv) : void 0;
-      if (next2 && [3, 4, 6, 8].includes(raw.length)) {
-        update(picker, alphaOn(picker) ? next2 : { ...next2, a: 1 }, true);
+      const next = /^[\da-f]{3,8}$/i.test(raw) ? hsvForValue(`#${raw}`, state.hsv) : void 0;
+      if (next && [3, 4, 6, 8].includes(raw.length)) {
+        update(picker, alphaOn(picker) ? next : { ...next, a: 1 }, true);
         return;
       }
       paint(picker);
@@ -198,33 +228,7 @@ function wireColorPickers(root, { onInput, onChange } = {}) {
       paint(picker);
       return;
     }
-    const values = colorPickerChannels(state.mode, state.hsv);
-    values[index] = clamp(number, 0, channel.max);
-    const { a } = state.hsv;
-    let next;
-    switch (state.mode) {
-      case "rgb":
-        next = rgbToHsv({ r: values[0], g: values[1], b: values[2], a });
-        if (next.s === 0) next.h = state.hsv.h;
-        break;
-      case "hsl": {
-        const rgba = hslToRgb({
-          h: values[0],
-          s: values[1] / 100,
-          l: values[2] / 100,
-          a
-        });
-        next = { ...rgbToHsv(rgba), h: values[0] };
-        break;
-      }
-      case "hsb":
-        next = { h: values[0], s: values[1] / 100, v: values[2] / 100, a };
-        break;
-      case "gray":
-        next = { h: state.hsv.h, s: 0, v: values[0] / 100, a };
-        break;
-    }
-    update(picker, next, true);
+    setChannel(picker, index, number, true);
   };
   const onFieldKey = (event) => {
     const field = event.target;
@@ -252,9 +256,15 @@ function wireColorPickers(root, { onInput, onChange } = {}) {
     if (!(input instanceof HTMLInputElement)) return;
     const picker = pickerOf(input);
     if (!picker) return;
-    if (input.classList.contains("kui-color-picker__hue")) {
+    if (input.classList.contains("kui-color-picker__slider")) {
       event.stopPropagation();
-      update(picker, { h: Number(input.value) }, false, input);
+      setChannel(
+        picker,
+        Number(input.dataset.slider),
+        Number(input.value),
+        false,
+        input
+      );
     } else if (input.classList.contains("kui-color-picker__opacity")) {
       event.stopPropagation();
       update(picker, { a: Number(input.value) / 100 }, false, input);
@@ -264,7 +274,7 @@ function wireColorPickers(root, { onInput, onChange } = {}) {
     const target = event.target;
     const picker = pickerOf(target);
     if (!picker) return;
-    if (target instanceof HTMLInputElement && target.matches(".kui-color-picker__hue, .kui-color-picker__opacity")) {
+    if (target instanceof HTMLInputElement && target.matches(".kui-color-picker__slider, .kui-color-picker__opacity")) {
       event.stopPropagation();
       report(picker, true);
       return;
@@ -368,4 +378,4 @@ function wireColorPickers(root, { onInput, onChange } = {}) {
 
 export { wireColorPickers };
 
-//# sourceMappingURL=chunk-ACUKTVS3.js.map
+//# sourceMappingURL=chunk-XWNXGFX3.js.map

package/dist/chunk-XWNXGFX3.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/forms/color-picker/wiring/wire-color-pickers.ts"],"names":["slider","number"],"mappings":"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","file":"chunk-XWNXGFX3.js","sourcesContent":["import {\n  COLOR_PICKER_CHANNELS,\n  COLOR_PICKER_SWATCH_ACTION,\n  colorPickerAreaText,\n  type ColorPickerMode,\n  colorPickerSlider,\n  colorPickerStyle,\n} from '../color-picker.js';\nimport {\n  colorChannelValues,\n  hsvFromChannels,\n} from '../model/color-channels.js';\nimport {\n  formatHex,\n  type Hsva,\n  hsvForValue,\n  hsvToRgb,\n} from '../model/color-model.js';\n\n/** Reported to {@link WireColorPickersOptions.onInput} and `onChange`. */\nexport interface ColorPickerChange {\n  id: string;\n  /** `#rrggbb`, or `#rrggbbaa` below full opacity. */\n  value: string;\n  mode: ColorPickerMode;\n  element: HTMLElement;\n}\n\nexport interface WireColorPickersOptions {\n  /** Every live change: a drag, an arrow key, a field edit. */\n  onInput?: (change: ColorPickerChange) => void;\n  /** A committed change: a drag or key run ending, a field or swatch commit, a mode switch. */\n  onChange?: (change: ColorPickerChange) => void;\n}\n\n/** The live color each wired picker shows, keyed by its root element. */\ninterface PickerState {\n  hsv: Hsva;\n  mode: ColorPickerMode;\n  /** The hex last reported or adopted, to tell an app re-render from an echo. */\n  value: string;\n  /**\n   * The exact channel values a slider or field last set in `mode`, while\n   * `hsv` is still the color they produced, so a channel the HSV state cannot\n   * carry (HSL saturation at black or white) survives the next edit.\n   */\n  memo?: { mode: ColorPickerMode; hsv: Hsva; values: number[] };\n}\n\nconst clamp = (value: number, min: number, max: number) =>\n  Math.min(max, Math.max(min, value));\n\nconst isMode = (value: string | undefined): value is ColorPickerMode =>\n  value === 'rgb' || value === 'hsl' || value === 'hsb' || value === 'gray';\n\n/**\n * Make every ColorPicker under `root` interactive. The area takes pointer\n * drags and the arrow keys (Shift for steps of 10%); the model's channel\n * sliders and the opacity slider are native ranges, each changing only its\n * own channel; channel, hex, and opacity fields commit on Enter or blur; the\n * model menu switches the channel sliders and fields; the screen sampler\n * opens the EyeDropper where the browser has it; preset and sample swatches\n * apply their color. Each change updates the picker at once, dispatches a\n * bubbling `kui-color-input` (or `kui-color-change` when committed) event\n * with `{ value, mode }`, and calls `onInput` / `onChange`. When the app\n * re-renders a picker with a different `value`, the picker adopts it.\n * Returns a disposer.\n */\nexport function wireColorPickers(\n  root: HTMLElement,\n  { onInput, onChange }: WireColorPickersOptions = {},\n): () => void {\n  const states = new WeakMap<HTMLElement, PickerState>();\n\n  const pickerOf = (element: Element | null) =>\n    element?.closest<HTMLElement>('[data-component=\"color-picker\"]') ?? null;\n\n  const alphaOn = (picker: HTMLElement) => picker.hasAttribute('data-alpha');\n\n  const stateOf = (picker: HTMLElement): PickerState => {\n    let state = states.get(picker);\n    if (!state) {\n      // The render always writes a formatted hex and a model.\n      const value = picker.dataset.value!;\n      state = {\n        hsv: hsvForValue(value)!,\n        mode: picker.dataset.mode as ColorPickerMode,\n        value,\n      };\n      states.set(picker, state);\n    }\n    return state;\n  };\n\n  /** The exact channel values the picker's model shows. */\n  const channelValuesOf = (state: PickerState) =>\n    state.memo?.mode === state.mode && state.memo.hsv === state.hsv\n      ? state.memo.values\n      : colorChannelValues(state.mode, state.hsv);\n\n  const hexOf = (picker: HTMLElement, hsv: Hsva) =>\n    formatHex(hsvToRgb(alphaOn(picker) ? hsv : { ...hsv, a: 1 }));\n\n  /** Repaint the wiring-owned surface from the state. */\n  const paint = (picker: HTMLElement, skipField?: Element) => {\n    const state = stateOf(picker);\n    const { hsv, mode } = state;\n    const exact = channelValuesOf(state);\n    const surface = picker.querySelector<HTMLElement>(\n      '.kui-color-picker__surface',\n    )!;\n    surface.setAttribute('style', colorPickerStyle(hsv));\n    const area = surface.querySelector<HTMLElement>('.kui-color-picker__area');\n    area?.setAttribute('aria-valuenow', String(Math.round(hsv.s * 100)));\n    area?.setAttribute('aria-valuetext', colorPickerAreaText(hsv));\n    for (const input of surface.querySelectorAll<HTMLInputElement>(\n      '.kui-color-picker__slider',\n    )) {\n      const slider = colorPickerSlider(\n        mode,\n        Number(input.dataset.slider),\n        exact,\n      );\n      input.hidden = slider === undefined;\n      if (slider === undefined) continue;\n      input.max = String(slider.max);\n      if (input !== skipField) input.value = slider.value;\n      input.setAttribute('aria-label', slider.label);\n      input.setAttribute('aria-valuetext', slider.valueText);\n      input.setAttribute('style', slider.style);\n    }\n    const opacity = `${Math.round(hsv.a * 100)}%`;\n    const slider = surface.querySelector<HTMLInputElement>(\n      '.kui-color-picker__opacity',\n    );\n    if (slider && slider !== skipField) {\n      slider.value = String(Math.round(hsv.a * 100));\n      slider.setAttribute('aria-valuetext', opacity);\n    }\n    const channels = COLOR_PICKER_CHANNELS[mode];\n    const values = exact.map(Math.round);\n    surface\n      .querySelector('.kui-color-picker__channels')\n      ?.setAttribute('data-count', String(channels.length));\n    for (const field of surface.querySelectorAll<HTMLInputElement>(\n      '.kui-color-picker__channel',\n    )) {\n      const index = Number(field.dataset.channel);\n      const channel = channels[index];\n      const label = field.closest('label')!;\n      label.hidden = channel === undefined;\n      label.querySelector('.kui-color-picker__field-label')!.textContent =\n        channel === undefined ? '' : channel.short;\n      if (channel) field.setAttribute('aria-label', channel.name);\n      if (field !== skipField)\n        field.value = channel ? String(values[index]) : '';\n      field.dataset.shown = field.value;\n    }\n    const hex = hexOf(picker, hsv);\n    const hexField = surface.querySelector<HTMLInputElement>(\n      '.kui-color-picker__hex',\n    )!;\n    if (hexField !== skipField) hexField.value = hex.slice(1).toUpperCase();\n    hexField.dataset.shown = hexField.value;\n    const opacityField = surface.querySelector<HTMLInputElement>(\n      '.kui-color-picker__opacity-field',\n    );\n    if (opacityField && opacityField !== skipField)\n      opacityField.value = opacity;\n    if (opacityField) opacityField.dataset.shown = opacityField.value;\n    const hidden = surface.querySelector<HTMLInputElement>(\n      'input[type=\"hidden\"]',\n    );\n    if (hidden) hidden.value = hex;\n    surface.querySelector<HTMLSelectElement>('.kui-color-picker__mode')!.value =\n      mode;\n  };\n\n  const report = (picker: HTMLElement, committed: boolean) => {\n    const state = stateOf(picker);\n    const value = hexOf(picker, state.hsv);\n    state.value = value;\n    const change: ColorPickerChange = {\n      id: picker.dataset.colorPickerId!,\n      value,\n      mode: state.mode,\n      element: picker,\n    };\n    picker.dispatchEvent(\n      new CustomEvent(committed ? 'kui-color-change' : 'kui-color-input', {\n        bubbles: true,\n        detail: { value, mode: state.mode },\n      }),\n    );\n    if (committed) onChange?.(change);\n    else onInput?.(change);\n  };\n\n  const update = (\n    picker: HTMLElement,\n    next: Partial<Hsva>,\n    committed: boolean,\n    skipField?: Element,\n  ) => {\n    const state = stateOf(picker);\n    const held = state.memo?.hsv === state.hsv ? state.memo : undefined;\n    state.hsv = { ...state.hsv, ...next };\n    // An opacity change leaves the model's exact channels as they were.\n    if (held && Object.keys(next).join() === 'a') held.hsv = state.hsv;\n    paint(picker, skipField);\n    report(picker, committed);\n  };\n\n  /** Set one channel of the picker's model, holding every other one. */\n  const setChannel = (\n    picker: HTMLElement,\n    index: number,\n    value: number,\n    committed: boolean,\n    skipField?: Element,\n  ) => {\n    const state = stateOf(picker);\n    const values = [...channelValuesOf(state)];\n    values[index] = clamp(\n      value,\n      0,\n      COLOR_PICKER_CHANNELS[state.mode][index]!.max,\n    );\n    state.hsv = hsvFromChannels(state.mode, values, state.hsv);\n    state.memo = { mode: state.mode, hsv: state.hsv, values };\n    paint(picker, skipField);\n    report(picker, committed);\n  };\n\n  const disabled = (picker: HTMLElement) =>\n    picker.hasAttribute('data-disabled');\n\n  // The area: pointer drags.\n  let dragging: { picker: HTMLElement; area: HTMLElement } | undefined;\n  const fromPointer = (event: PointerEvent, area: HTMLElement) => {\n    const box = area.getBoundingClientRect();\n    return {\n      s: clamp((event.clientX - box.left) / box.width, 0, 1),\n      v: clamp(1 - (event.clientY - box.top) / box.height, 0, 1),\n    };\n  };\n  const onPointerDown = (event: PointerEvent) => {\n    const area = (event.target as Element).closest<HTMLElement>(\n      '.kui-color-picker__area',\n    );\n    const picker = pickerOf(area);\n    if (!area || !picker || disabled(picker) || event.button !== 0) return;\n    event.preventDefault();\n    area.focus();\n    area.setPointerCapture?.(event.pointerId);\n    dragging = { picker, area };\n    update(picker, fromPointer(event, area), false);\n  };\n  const onPointerMove = (event: PointerEvent) => {\n    if (!dragging) return;\n    update(dragging.picker, fromPointer(event, dragging.area), false);\n  };\n  const onPointerUp = () => {\n    if (!dragging) return;\n    const { picker } = dragging;\n    dragging = undefined;\n    report(picker, true);\n  };\n\n  // The area: the arrow keys, Home / End, and Page Up / Down.\n  const onKeyDown = (event: KeyboardEvent) => {\n    const area = (event.target as Element).closest<HTMLElement>(\n      '.kui-color-picker__area',\n    );\n    const picker = pickerOf(area);\n    if (!area || !picker || disabled(picker)) {\n      onFieldKey(event);\n      return;\n    }\n    const step = event.shiftKey ? 0.1 : 0.01;\n    const { s, v } = stateOf(picker).hsv;\n    const rtl = globalThis.getComputedStyle(area).direction === 'rtl';\n    const moves: Record<string, Partial<Hsva>> = {\n      ArrowRight: { s: clamp(s + (rtl ? -step : step), 0, 1) },\n      ArrowLeft: { s: clamp(s - (rtl ? -step : step), 0, 1) },\n      ArrowUp: { v: clamp(v + step, 0, 1) },\n      ArrowDown: { v: clamp(v - step, 0, 1) },\n      PageUp: { v: clamp(v + 0.1, 0, 1) },\n      PageDown: { v: clamp(v - 0.1, 0, 1) },\n      Home: { s: 0 },\n      End: { s: 1 },\n    };\n    const move = moves[event.key];\n    if (!move) return;\n    event.preventDefault();\n    update(picker, move, false);\n  };\n  const onKeyUp = (event: KeyboardEvent) => {\n    const picker = pickerOf(\n      (event.target as Element).closest('.kui-color-picker__area'),\n    );\n    if (\n      picker &&\n      /^(Arrow|Page|Home$|End$)/.test(event.key) &&\n      !disabled(picker)\n    )\n      report(picker, true);\n  };\n\n  // Fields: Enter commits; Escape restores the shown value.\n  const commitField = (field: HTMLInputElement) => {\n    const picker = pickerOf(field);\n    if (!picker) return;\n    // Leaving a field the person did not edit commits nothing.\n    if (field.value === (field.dataset.shown ?? field.getAttribute('value')))\n      return;\n    const state = stateOf(picker);\n    if (field.classList.contains('kui-color-picker__hex')) {\n      const raw = field.value.trim().replace(/^#/, '');\n      const next = /^[\\da-f]{3,8}$/i.test(raw)\n        ? hsvForValue(`#${raw}`, state.hsv)\n        : undefined;\n      if (next && [3, 4, 6, 8].includes(raw.length)) {\n        update(picker, alphaOn(picker) ? next : { ...next, a: 1 }, true);\n        return;\n      }\n      paint(picker);\n      return;\n    }\n    if (field.classList.contains('kui-color-picker__opacity-field')) {\n      const number = Number.parseFloat(field.value);\n      if (Number.isFinite(number))\n        update(picker, { a: clamp(number, 0, 100) / 100 }, true);\n      else paint(picker);\n      return;\n    }\n    const index = Number(field.dataset.channel);\n    const channels = COLOR_PICKER_CHANNELS[state.mode];\n    const channel = channels[index];\n    const number = Number.parseFloat(field.value);\n    if (!channel || !Number.isFinite(number)) {\n      paint(picker);\n      return;\n    }\n    setChannel(picker, index, number, true);\n  };\n  const onFieldKey = (event: KeyboardEvent) => {\n    const field = event.target;\n    if (\n      !(field instanceof HTMLInputElement) ||\n      !field.matches(\n        '.kui-color-picker__channel, .kui-color-picker__hex, .kui-color-picker__opacity-field',\n      )\n    )\n      return;\n    if (event.key === 'Enter') {\n      event.preventDefault();\n      commitField(field);\n    } else if (event.key === 'Escape') {\n      const picker = pickerOf(field);\n      if (picker) paint(picker);\n    }\n  };\n  const onFocusOut = (event: FocusEvent) => {\n    const field = event.target;\n    if (\n      field instanceof HTMLInputElement &&\n      field.matches(\n        '.kui-color-picker__channel, .kui-color-picker__hex, .kui-color-picker__opacity-field',\n      )\n    )\n      commitField(field);\n  };\n\n  // Sliders, the model menu, and swatches.\n  const onInputEvent = (event: Event) => {\n    const input = event.target;\n    if (!(input instanceof HTMLInputElement)) return;\n    const picker = pickerOf(input);\n    if (!picker) return;\n    if (input.classList.contains('kui-color-picker__slider')) {\n      event.stopPropagation();\n      setChannel(\n        picker,\n        Number(input.dataset.slider),\n        Number(input.value),\n        false,\n        input,\n      );\n    } else if (input.classList.contains('kui-color-picker__opacity')) {\n      event.stopPropagation();\n      update(picker, { a: Number(input.value) / 100 }, false, input);\n    }\n  };\n  const onChangeEvent = (event: Event) => {\n    const target = event.target;\n    const picker = pickerOf(target as Element);\n    if (!picker) return;\n    if (\n      target instanceof HTMLInputElement &&\n      target.matches('.kui-color-picker__slider, .kui-color-picker__opacity')\n    ) {\n      event.stopPropagation();\n      report(picker, true);\n      return;\n    }\n    if (\n      target instanceof HTMLSelectElement &&\n      target.classList.contains('kui-color-picker__mode') &&\n      isMode(target.value)\n    ) {\n      event.stopPropagation();\n      stateOf(picker).mode = target.value;\n      paint(picker);\n      report(picker, true);\n      return;\n    }\n    if (\n      target instanceof HTMLInputElement &&\n      target.dataset.action === COLOR_PICKER_SWATCH_ACTION\n    ) {\n      event.stopPropagation();\n      const state = stateOf(picker);\n      const next = hsvForValue(target.value, state.hsv);\n      if (next) update(picker, next, true);\n    }\n  };\n\n  // The screen sampler, where the browser has it.\n  type EyeDropperConstructor = new () => {\n    open(): Promise<{ sRGBHex: string }>;\n  };\n  const EyeDropperApi = (\n    globalThis as typeof globalThis & { EyeDropper?: EyeDropperConstructor }\n  ).EyeDropper;\n  const revealSamplers = () => {\n    if (!EyeDropperApi) return;\n    for (const button of root.querySelectorAll<HTMLButtonElement>(\n      '.kui-color-picker__eyedropper[hidden]',\n    ))\n      button.hidden = false;\n  };\n  const onClick = (event: MouseEvent) => {\n    const button = (event.target as Element).closest<HTMLButtonElement>(\n      '.kui-color-picker__eyedropper',\n    );\n    const picker = pickerOf(button);\n    if (!button || !picker || !EyeDropperApi || disabled(picker)) return;\n    new EyeDropperApi().open().then(\n      ({ sRGBHex }) => {\n        const state = stateOf(picker);\n        const next = hsvForValue(sRGBHex, state.hsv);\n        if (next) update(picker, { ...next, a: state.hsv.a }, true);\n      },\n      () => {\n        // The person dismissed the sampler; nothing changes.\n      },\n    );\n  };\n\n  // Adopt a new controlled value or mode from an app re-render. Only the\n  // attribute that actually changed is adopted, so a value-only re-render\n  // keeps a model the person switched to.\n  const adopt = (picker: HTMLElement, attribute: string | null) => {\n    const state = stateOf(picker);\n    if (attribute === 'data-mode') {\n      const mode = picker.dataset.mode;\n      if (isMode(mode) && mode !== state.mode) {\n        state.mode = mode;\n        paint(picker);\n      }\n      return;\n    }\n    const value = picker.dataset.value;\n    if (value === undefined || value === state.value) return;\n    const next = hsvForValue(value, state.hsv);\n    if (!next) return;\n    state.hsv = next;\n    state.value = value;\n    paint(picker);\n  };\n  const observer = new MutationObserver((records) => {\n    revealSamplers();\n    for (const record of records) {\n      if (record.type !== 'attributes') continue;\n      const picker = record.target as HTMLElement;\n      if (picker.matches('[data-component=\"color-picker\"]'))\n        adopt(picker, record.attributeName);\n    }\n  });\n  observer.observe(root, {\n    childList: true,\n    subtree: true,\n    attributes: true,\n    attributeFilter: ['data-value', 'data-mode'],\n  });\n  revealSamplers();\n\n  root.addEventListener('pointerdown', onPointerDown);\n  root.addEventListener('pointermove', onPointerMove);\n  root.addEventListener('pointerup', onPointerUp);\n  root.addEventListener('pointercancel', onPointerUp);\n  root.addEventListener('keydown', onKeyDown);\n  root.addEventListener('keyup', onKeyUp);\n  root.addEventListener('focusout', onFocusOut);\n  root.addEventListener('input', onInputEvent);\n  root.addEventListener('change', onChangeEvent);\n  root.addEventListener('click', onClick);\n  return () => {\n    observer.disconnect();\n    root.removeEventListener('pointerdown', onPointerDown);\n    root.removeEventListener('pointermove', onPointerMove);\n    root.removeEventListener('pointerup', onPointerUp);\n    root.removeEventListener('pointercancel', onPointerUp);\n    root.removeEventListener('keydown', onKeyDown);\n    root.removeEventListener('keyup', onKeyUp);\n    root.removeEventListener('focusout', onFocusOut);\n    root.removeEventListener('input', onInputEvent);\n    root.removeEventListener('change', onChangeEvent);\n    root.removeEventListener('click', onClick);\n  };\n}\n"]}

package/dist/{chunk-ZXZAECHZ.js → chunk-Z4DS77U2.js}

@@ -1,10 +1,10 @@
 import { ToolbarText } from './chunk-EKHDLBRP.js';
 import { paneConfigProps } from './chunk-CTQUDCY5.js';
 import { ToolbarControlGroup } from './chunk-2PXZBFEC.js';
+import { Toolbar } from './chunk-CMLPFIC5.js';
 import { Pane } from './chunk-HQZG3OFL.js';
 import { surfaceTintAttributes, joinStyles, scrollEdgeAttributes } from './chunk-SQ5DH66U.js';
 import { List } from './chunk-OY2MXIBB.js';
-import { Toolbar } from './chunk-CMLPFIC5.js';
 import { LucideIcon } from './chunk-HJXVVFBT.js';
 import { ChevronLeft } from 'lucide';
 import { jsx, jsxs, Fragment } from 'kerfjs/jsx-runtime';
@@ -193,4 +193,4 @@ function NavStack({
 
 export { NavStack };
 
-//# sourceMappingURL=chunk-ZXZAECHZ.js.map
+//# sourceMappingURL=chunk-Z4DS77U2.js.map

package/dist/{chunk-ZXZAECHZ.js.map → chunk-Z4DS77U2.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/navigation/nav-stack/nav-stack.tsx"],"names":[],"mappings":"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","file":"chunk-ZXZAECHZ.js","sourcesContent":["import { ChevronLeft } from 'lucide';\n\nimport type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport {\n  type ScrollEdge,\n  scrollEdgeAttributes,\n} from '../../../shared/layout/scroll-edge.js';\nimport type { NavPane } from '../../../shared/panels/nav-pane.js';\nimport type { PanelBottomToolbar } from '../../../shared/panels/panel-toolbar.js';\nimport type { CssColor } from '../../../shared/styles/css-values.js';\nimport {\n  joinStyles,\n  type SurfaceTint,\n  surfaceTintAttributes,\n} from '../../../shared/styles/surface-tint.js';\nimport { Toolbar, type ToolbarConfig } from '../../actions/toolbar/toolbar.js';\nimport { ToolbarControlGroup } from '../../actions/toolbar-control-group/toolbar-control-group.js';\nimport {\n  type HeadingLevel,\n  ToolbarText,\n  type ToolbarTextSize,\n} from '../../actions/toolbar-text/toolbar-text.js';\nimport { List, type ListConfig } from '../../collections/list/list.js';\nimport { paneConfigProps } from '../../layout/pane/internal/pane-config-props.js';\nimport { Pane } from '../../layout/pane/pane.js';\nimport { LucideIcon } from '../../media/lucide-icon/lucide-icon.js';\n\n/**\n * One entry in a {@link NavStack}. The app owns the stack as an array (usually a\n * signal); `NavStack` renders it and `wireNavStack` animates the transitions.\n */\nexport interface NavStackView extends NavPane<\n  NavStackViewToolbar,\n  PanelBottomToolbar\n> {\n  /** Stable identity for keyed reconcile and transition direction. */\n  key: string;\n}\n\n/** Per-view top toolbar. The stack supplies its back control before `leading`. */\nexport interface NavStackViewToolbar extends NavStackToolbarConfig {\n  title?: string;\n  leading?: KerfUiContent;\n  center?: KerfUiContent;\n  trailing?: KerfUiContent;\n}\n\n/** A view's structured bottom toolbar; it cross-fades on navigation. */\nexport type NavStackViewBottomToolbar = PanelBottomToolbar;\n\n/**\n * The top toolbar's configuration. Its `ToolbarConfig` forwards to the real\n * `Toolbar` the stack renders; by default that toolbar draws no divider and\n * claims the top and side safe-area edges the stack still touches.\n */\nexport interface NavStackToolbarConfig extends ToolbarConfig {\n  /** Accessible name of the top toolbar (default: none). */\n  label?: string;\n  /**\n   * Size of the view title's `ToolbarText`. Default `xlarge` at the root,\n   * where the title is the page heading, and `large` once a back control\n   * shares the bar.\n   */\n  titleSize?: ToolbarTextSize;\n  /** Expose the view title as a heading at this level (default: a plain span). */\n  headingLevel?: HeadingLevel;\n}\n\n/**\n * How a {@link NavStack}'s top chrome relates to the active view: `docked`\n * above it, or `overlay` laid over its top edge on the translucent chrome\n * material, so the view's content scrolls visibly beneath it.\n * `clear` lays it over\n * the same edge fully transparent, for chrome over imagery: legibility comes\n * from glass control groups or a scrim, and with `scrollEdge=\"material\"` the\n * chrome material fades in once content scrolls beneath it.\n */\nexport type NavStackChromePresentation = 'docked' | 'overlay' | 'clear';\n\n/**\n * How a {@link NavStack}'s bottom toolbar relates to the active view:\n * `docked` below it, or `overlay` laid over its bottom edge on the\n * translucent chrome material, so the view's content scrolls visibly beneath\n * it.\n * `clear` lays it over\n * the same edge fully transparent, for chrome over imagery: legibility comes\n * from glass control groups or a scrim, and with `scrollEdge=\"material\"` the\n * chrome material fades in once content scrolls beneath\n * it, until the view scrolls to its end.\n */\nexport type NavStackBottomToolbarPresentation = 'docked' | 'overlay' | 'clear';\n\nexport interface NavStackProps {\n  id: string;\n  /** Accessible name for the stack region. */\n  label: string;\n  /** The stack, root first; the last entry is the active top view. */\n  views: NavStackView[];\n  /** Accessible label for the icon-only back control (default \"Back\"). */\n  backLabel?: string;\n  /** The back control's icon (default a chevron-left `LucideIcon`). */\n  backIcon?: KerfUiContent;\n  /**\n   * Visible text beside the back icon, such as the previous view's title\n   * (default: icon only). When set, the text names the control and\n   * `backLabel` is not used.\n   */\n  backText?: string;\n  /** The top toolbar's configuration, forwarded to its `Toolbar`. */\n  toolbarConfig?: NavStackToolbarConfig;\n  /** Persistent last group in every view's top toolbar, supplied by a hosting panel. */\n  panelToggle?: KerfUiContent;\n  /** Hide the top toolbar entirely (rare — a fully custom-chrome view). */\n  hideToolbar?: boolean;\n  /** Optional persistent bottom toolbar used when the active view does not provide one. */\n  bottomToolbar?: NavStackViewBottomToolbar;\n  /**\n   * Stack chrome separator. `auto` (default) draws both available edges\n   * against a sunken active Pane and otherwise follows `chromeDividers`;\n   * `hidden` suppresses the stack-owned edges.\n   */\n  separator?: 'auto' | 'hidden';\n  /**\n   * The line under the top chrome and over the bottom toolbar, where they\n   * meet the active view. `scroll` (default) shows the chrome's line only\n   * while the view's content is scrolled beneath it, and the bottom\n   * toolbar's only while more content lies below — never when the content\n   * fits — once `wireScrollDividers` (`@kerfjs/ui/wire-scroll-dividers`) is\n   * wired above the stack; unwired, neither shows. `always` shows both\n   * without the wiring; `none` neither, even when wired. The line is drawn\n   * inside the chrome, so no state moves the chrome or the content. A\n   * A sunken active Pane still draws the separator unless\n   * `separator=\"hidden\"`. A `toolbarConfig.dividerSides` edge is the Toolbar's\n   * own and is unaffected.\n   */\n  chromeDividers?: 'scroll' | 'always' | 'none';\n  /**\n   * `docked` (default) gives the top chrome its own band above the active\n   * view. `overlay` lays the chrome over the view's top edge on the\n   * translucent chrome material (`--kui-chrome-material`, opaque under\n   * `prefers-reduced-transparency`, `prefers-contrast: more`, forced colors,\n   * or without `backdrop-filter`), so content scrolls visibly beneath it, as\n   * an iOS navigation bar does. `wireNavStack` measures the live chrome and\n   * hands its height (top safe area included) to the viewport as the\n   * block-start `--kui-edge-inset-*` context, so every view clears it with no\n   * prop: a plain view, a sole `Pane`'s content (or header), and a nested\n   * layout all pad and `scroll-padding` by it, so the first item, and anything\n   * focused or scrolled into view, rests clear of the bar. Until then, and\n   * with `hideToolbar`, the chrome stays docked. An untoned `ToolbarText` in\n   * the chrome lifts its title and description to AA over the content passing\n   * beneath it; keep any other quiet copy in the view. With `clear`, the\n   * stack's own back control sits in a glass control group\n   * (`material=\"glass\"`), so it stays legible over imagery.\n   */\n  chromePresentation?: NavStackChromePresentation;\n  /**\n   * `docked` (default) gives the bottom toolbar its own band below the\n   * active view. `overlay` lays it over the view's bottom edge on the\n   * translucent chrome material (opaque under the same preferences as\n   * `chromePresentation`), so content scrolls visibly beneath it, as under\n   * an iOS toolbar. `wireNavStack` measures the live bottom toolbar (never a\n   * cross-fading copy) and hands its height (bottom safe area included) to\n   * the viewport as the block-end `--kui-edge-inset-*` context, so a plain\n   * view, a sole `Pane`'s content (or footer), and a nested layout rest their\n   * last item, and anything focused or scrolled into view, clear of it. Until\n   * then, and while no bottom toolbar is shown, it stays docked. Independent\n   * of `chromePresentation`, which governs only the top chrome. An untoned\n   * `ToolbarText` in the toolbar lifts to AA over the content beneath it.\n   */\n  bottomToolbarPresentation?: NavStackBottomToolbarPresentation;\n  /**\n   * For `clear` chrome or bottom toolbar, `material` fades the chrome\n   * material in while the active view's content lies beneath it (default\n   * `none`).\n   */\n  scrollEdge?: ScrollEdge;\n  /**\n   * The scroll distance, in CSS pixels, over which the scroll edge fades in\n   * (default 60).\n   */\n  scrollEdgeDistance?: number;\n  /**\n   * Paint the stack, its docked chrome and bottom toolbar, and every view in\n   * an app-chosen color (a `@kerfjs/ui/css-values` color builder) instead of\n   * the surface. Overlay chrome keeps the chrome material; one view's own\n   * color goes in its `pane: { background }`. Forced colors paint `Canvas`.\n   */\n  background?: CssColor;\n  /**\n   * A scoped tint (`{ color, scheme }`) for the stack, its chrome, bottom toolbar, and views: its surfaces and every\n   * descendant re-derive their surface and text tokens from the app's color\n   * in the declared scheme, with lightness clamped to keep text at WCAG AA.\n   */\n  tint?: SurfaceTint;\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\nconst DEFAULT_SAFE_AREA_EDGES = [\n  'block-start',\n  'inline-start',\n  'inline-end',\n] as const;\n\nconst DEFAULT_BOTTOM_SAFE_AREA_EDGES = [\n  'block-end',\n  'inline-start',\n  'inline-end',\n] as const;\n\nfunction chromeList(content: KerfUiContent, config?: ListConfig) {\n  return (\n    <List\n      dividerSides={config?.dividerSides}\n      gap={config?.gap}\n      hAlign={config?.hAlign}\n      vAlign={config?.vAlign}\n      textInsets={config?.textInsets}\n      controlInsets={config?.controlInsets}\n    >\n      {content}\n    </List>\n  );\n}\n\n/**\n * A navigation stack (iOS-style push/pop). Renders every entry stacked, the last\n * one active; `@kerfjs/ui/wire-nav-stack`'s `wireNavStack` slides the content and\n * cross-fades the chrome across a change. Its top chrome is a real `Toolbar`: the\n * back control and title lead, the active view's `toolbar` fills the zones,\n * and `toolbarConfig` supplies defaults. A single-pane\n * layout is a `NavStack` with one entry. See `docs/23-app-layouts.md` §3.1.\n */\nexport function NavStack({\n  id,\n  label,\n  views,\n  backLabel = 'Back',\n  backIcon,\n  backText,\n  toolbarConfig = {},\n  panelToggle,\n  hideToolbar = false,\n  bottomToolbar,\n  separator = 'auto',\n  chromeDividers = 'scroll',\n  chromePresentation = 'docked',\n  bottomToolbarPresentation = 'docked',\n  scrollEdge = 'none',\n  scrollEdgeDistance,\n  background,\n  tint,\n  className = '',\n  slot,\n}: NavStackProps) {\n  const tinted = surfaceTintAttributes(tint);\n  const topIndex = views.length - 1;\n  const top = views[topIndex];\n  const topToolbar = top?.toolbar;\n  const bottom = top?.bottomToolbar ?? bottomToolbar;\n  const canPop = views.length > 1;\n  const topDensity = topToolbar?.density ?? toolbarConfig.density;\n  // With a back control, the title centers on the bar (iOS-style) unless the\n  // view owns the center zone; at the root it leads and fills, left-aligned.\n  const centerTitle = canPop && topToolbar?.center === undefined;\n  const title = (\n    <ToolbarText\n      text={topToolbar?.title ?? ''}\n      size={\n        topToolbar?.titleSize ??\n        toolbarConfig.titleSize ??\n        (canPop ? 'large' : 'xlarge')\n      }\n      headingLevel={topToolbar?.headingLevel ?? toolbarConfig.headingLevel}\n      fill={!centerTitle}\n    />\n  );\n  return (\n    <section\n      class={`kui-nav-stack ${tinted.className} ${className}`\n        .replace(/\\s+/g, ' ')\n        .trim()}\n      id={id}\n      data-component=\"nav-stack\"\n      data-nav-stack-id={id}\n      data-depth={String(views.length)}\n      data-separator={separator}\n      data-chrome-dividers={\n        chromeDividers === 'always' || chromeDividers === 'none'\n          ? chromeDividers\n          : undefined\n      }\n      data-chrome-presentation={\n        chromePresentation !== 'docked' && !hideToolbar ? 'overlay' : undefined\n      }\n      data-chrome-material={\n        chromePresentation === 'clear' && !hideToolbar ? 'clear' : undefined\n      }\n      data-bottom-toolbar-presentation={\n        bottomToolbarPresentation !== 'docked' ? 'overlay' : undefined\n      }\n      data-bottom-toolbar-material={\n        bottomToolbarPresentation === 'clear' ? 'clear' : undefined\n      }\n      {...scrollEdgeAttributes(\n        scrollEdge,\n        scrollEdgeDistance,\n        (chromePresentation === 'clear' && !hideToolbar) ||\n          bottomToolbarPresentation === 'clear',\n      )}\n      data-background={background === undefined ? undefined : ''}\n      data-kui-tint={tinted['data-kui-tint']}\n      data-kui-tint-accent={tinted['data-kui-tint-accent']}\n      style={joinStyles(\n        background === undefined\n          ? undefined\n          : `--_kui-nav-stack-background:${background}`,\n        tinted.style,\n      )}\n      aria-label={label}\n      slot={slot}\n    >\n      {!hideToolbar && (\n        <div class=\"kui-nav-stack__chrome\" data-nav-stack-chrome>\n          <Toolbar\n            label={topToolbar?.label ?? toolbarConfig.label}\n            density={topDensity}\n            dividerSides={\n              topToolbar?.dividerSides ?? toolbarConfig.dividerSides\n            }\n            centerAlign={\n              centerTitle\n                ? 'balanced'\n                : (topToolbar?.centerAlign ?? toolbarConfig.centerAlign)\n            }\n            responsive={topToolbar?.responsive ?? toolbarConfig.responsive}\n            responsiveAt={\n              topToolbar?.responsiveAt ?? toolbarConfig.responsiveAt\n            }\n            safeAreaEdges={\n              topToolbar?.safeAreaEdges ??\n              toolbarConfig.safeAreaEdges ??\n              DEFAULT_SAFE_AREA_EDGES\n            }\n            leading={\n              <>\n                {canPop && (\n                  <ToolbarControlGroup\n                    content={backText ? 'mixed' : 'icon'}\n                    size={topDensity === 'compact' ? 'compact' : 'default'}\n                    material={\n                      chromePresentation === 'clear' ? 'glass' : undefined\n                    }\n                    single\n                  >\n                    <button\n                      type=\"button\"\n                      class=\"kui-nav-stack__back\"\n                      data-nav-back\n                      aria-label={backText ? undefined : backLabel}\n                    >\n                      {backIcon ?? (\n                        <LucideIcon\n                          icon={ChevronLeft}\n                          name=\"chevron-left\"\n                          className=\"kui-nav-stack__back-icon\"\n                        />\n                      )}\n                      {backText ? <span>{backText}</span> : null}\n                    </button>\n                  </ToolbarControlGroup>\n                )}\n                {topToolbar?.leading}\n                {centerTitle ? null : title}\n              </>\n            }\n            center={centerTitle ? title : topToolbar?.center}\n            trailing={\n              <>\n                {topToolbar?.trailing}\n                {panelToggle}\n              </>\n            }\n          />\n        </div>\n      )}\n      <div class=\"kui-nav-stack__viewport\" data-nav-stack-viewport>\n        {views.map((view, index) => (\n          <article\n            class=\"kui-nav-stack__view\"\n            data-key={view.key}\n            data-nav-key={view.key}\n            data-nav-active={String(index === topIndex)}\n            aria-hidden={String(index !== topIndex)}\n          >\n            {view.pane ||\n            view.header !== undefined ||\n            view.footer !== undefined ? (\n              <Pane\n                {...paneConfigProps(view.pane)}\n                header={\n                  view.header === undefined ? undefined : (\n                    <div data-nav-stack-header>\n                      {chromeList(view.header, view.headerList)}\n                    </div>\n                  )\n                }\n                footer={\n                  view.footer === undefined ? undefined : (\n                    <div data-nav-stack-footer>\n                      {chromeList(view.footer, view.footerList)}\n                    </div>\n                  )\n                }\n              >\n                {view.content}\n              </Pane>\n            ) : (\n              view.content\n            )}\n          </article>\n        ))}\n      </div>\n      {bottom && (\n        <footer class=\"kui-nav-stack__bottom\" data-nav-stack-bottom>\n          <Toolbar\n            position=\"footer\"\n            label={bottom.label}\n            density={bottom.density}\n            dividerSides={bottom.dividerSides}\n            centerAlign={bottom.centerAlign}\n            responsive={bottom.responsive}\n            responsiveAt={bottom.responsiveAt}\n            safeAreaEdges={\n              bottom.safeAreaEdges ?? DEFAULT_BOTTOM_SAFE_AREA_EDGES\n            }\n            leading={bottom.leading}\n            center={bottom.center}\n            trailing={bottom.trailing}\n          />\n        </footer>\n      )}\n    </section>\n  );\n}\n"]}
+{"version":3,"sources":["../src/components/navigation/nav-stack/nav-stack.tsx"],"names":[],"mappings":"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","file":"chunk-Z4DS77U2.js","sourcesContent":["import { ChevronLeft } from 'lucide';\n\nimport type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport {\n  type ScrollEdge,\n  scrollEdgeAttributes,\n} from '../../../shared/layout/scroll-edge.js';\nimport type { NavPane } from '../../../shared/panels/nav-pane.js';\nimport type { PanelBottomToolbar } from '../../../shared/panels/panel-toolbar.js';\nimport type { CssColor } from '../../../shared/styles/css-values.js';\nimport {\n  joinStyles,\n  type SurfaceTint,\n  surfaceTintAttributes,\n} from '../../../shared/styles/surface-tint.js';\nimport { Toolbar, type ToolbarConfig } from '../../actions/toolbar/toolbar.js';\nimport { ToolbarControlGroup } from '../../actions/toolbar-control-group/toolbar-control-group.js';\nimport {\n  type HeadingLevel,\n  ToolbarText,\n  type ToolbarTextSize,\n} from '../../actions/toolbar-text/toolbar-text.js';\nimport { List, type ListConfig } from '../../collections/list/list.js';\nimport { paneConfigProps } from '../../layout/pane/internal/pane-config-props.js';\nimport { Pane } from '../../layout/pane/pane.js';\nimport { LucideIcon } from '../../media/lucide-icon/lucide-icon.js';\n\n/**\n * One entry in a {@link NavStack}. The app owns the stack as an array (usually a\n * signal); `NavStack` renders it and `wireNavStack` animates the transitions.\n */\nexport interface NavStackView extends NavPane<\n  NavStackViewToolbar,\n  PanelBottomToolbar\n> {\n  /** Stable identity for keyed reconcile and transition direction. */\n  key: string;\n}\n\n/** Per-view top toolbar. The stack supplies its back control before `leading`. */\nexport interface NavStackViewToolbar extends NavStackToolbarConfig {\n  title?: string;\n  leading?: KerfUiContent;\n  center?: KerfUiContent;\n  trailing?: KerfUiContent;\n}\n\n/** A view's structured bottom toolbar; it cross-fades on navigation. */\nexport type NavStackViewBottomToolbar = PanelBottomToolbar;\n\n/**\n * The top toolbar's configuration. Its `ToolbarConfig` forwards to the real\n * `Toolbar` the stack renders; by default that toolbar draws no divider and\n * claims the top and side safe-area edges the stack still touches.\n */\nexport interface NavStackToolbarConfig extends ToolbarConfig {\n  /** Accessible name of the top toolbar (default: none). */\n  label?: string;\n  /**\n   * Size of the view title's `ToolbarText`. Default `xlarge` at the root,\n   * where the title is the page heading, and `large` once a back control\n   * shares the bar.\n   */\n  titleSize?: ToolbarTextSize;\n  /** Expose the view title as a heading at this level (default: a plain span). */\n  headingLevel?: HeadingLevel;\n}\n\n/**\n * How a {@link NavStack}'s top chrome relates to the active view: `docked`\n * above it, or `overlay` laid over its top edge on the translucent chrome\n * material, so the view's content scrolls visibly beneath it.\n * `clear` lays it over\n * the same edge fully transparent, for chrome over imagery: legibility comes\n * from glass control groups or a scrim, and with `scrollEdge=\"material\"` the\n * chrome material fades in once content scrolls beneath it.\n */\nexport type NavStackChromePresentation = 'docked' | 'overlay' | 'clear';\n\n/**\n * How a {@link NavStack}'s bottom toolbar relates to the active view:\n * `docked` below it, or `overlay` laid over its bottom edge on the\n * translucent chrome material, so the view's content scrolls visibly beneath\n * it.\n * `clear` lays it over\n * the same edge fully transparent, for chrome over imagery: legibility comes\n * from glass control groups or a scrim, and with `scrollEdge=\"material\"` the\n * chrome material fades in once content scrolls beneath\n * it, until the view scrolls to its end.\n */\nexport type NavStackBottomToolbarPresentation = 'docked' | 'overlay' | 'clear';\n\nexport interface NavStackProps {\n  id: string;\n  /** Accessible name for the stack region. */\n  label: string;\n  /** The stack, root first; the last entry is the active top view. */\n  views: NavStackView[];\n  /** Accessible label for the icon-only back control (default \"Back\"). */\n  backLabel?: string;\n  /** The back control's icon (default a chevron-left `LucideIcon`). */\n  backIcon?: KerfUiContent;\n  /**\n   * Visible text beside the back icon, such as the previous view's title\n   * (default: icon only). When set, the text names the control and\n   * `backLabel` is not used.\n   */\n  backText?: string;\n  /** The top toolbar's configuration, forwarded to its `Toolbar`. */\n  toolbarConfig?: NavStackToolbarConfig;\n  /** Persistent last group in every view's top toolbar, supplied by a hosting panel. */\n  panelToggle?: KerfUiContent;\n  /** Hide the top toolbar entirely (rare — a fully custom-chrome view). */\n  hideToolbar?: boolean;\n  /** Optional persistent bottom toolbar used when the active view does not provide one. */\n  bottomToolbar?: NavStackViewBottomToolbar;\n  /**\n   * Stack chrome separator. `auto` (default) draws both available edges\n   * against a sunken active Pane and otherwise follows `chromeDividers`;\n   * `hidden` suppresses the stack-owned edges.\n   */\n  separator?: 'auto' | 'hidden';\n  /**\n   * The line under the top chrome and over the bottom toolbar, where they\n   * meet the active view. `scroll` (default) shows the chrome's line only\n   * while the view's content is scrolled beneath it, and the bottom\n   * toolbar's only while more content lies below — never when the content\n   * fits — once `wireScrollDividers` (`@kerfjs/ui/wire-scroll-dividers`) is\n   * wired above the stack; unwired, neither shows. `always` shows both\n   * without the wiring; `none` neither, even when wired. The line is drawn\n   * inside the chrome, so no state moves the chrome or the content. A\n   * A sunken active Pane still draws the separator unless\n   * `separator=\"hidden\"`. A `toolbarConfig.dividerSides` edge is the Toolbar's\n   * own and is unaffected.\n   */\n  chromeDividers?: 'scroll' | 'always' | 'none';\n  /**\n   * `docked` (default) gives the top chrome its own band above the active\n   * view. `overlay` lays the chrome over the view's top edge on the\n   * translucent chrome material (`--kui-chrome-material`, opaque under\n   * `prefers-reduced-transparency`, `prefers-contrast: more`, forced colors,\n   * or without `backdrop-filter`), so content scrolls visibly beneath it, as\n   * an iOS navigation bar does. `wireNavStack` measures the live chrome and\n   * hands its height (top safe area included) to the viewport as the\n   * block-start `--kui-edge-inset-*` context, so every view clears it with no\n   * prop: a plain view, a sole `Pane`'s content (or header), and a nested\n   * layout all pad and `scroll-padding` by it, so the first item, and anything\n   * focused or scrolled into view, rests clear of the bar. Until then, and\n   * with `hideToolbar`, the chrome stays docked. An untoned `ToolbarText` in\n   * the chrome lifts its title and description to AA over the content passing\n   * beneath it; keep any other quiet copy in the view. With `clear`, the\n   * stack's own back control sits in a glass control group\n   * (`material=\"glass\"`), so it stays legible over imagery.\n   */\n  chromePresentation?: NavStackChromePresentation;\n  /**\n   * `docked` (default) gives the bottom toolbar its own band below the\n   * active view. `overlay` lays it over the view's bottom edge on the\n   * translucent chrome material (opaque under the same preferences as\n   * `chromePresentation`), so content scrolls visibly beneath it, as under\n   * an iOS toolbar. `wireNavStack` measures the live bottom toolbar (never a\n   * cross-fading copy) and hands its height (bottom safe area included) to\n   * the viewport as the block-end `--kui-edge-inset-*` context, so a plain\n   * view, a sole `Pane`'s content (or footer), and a nested layout rest their\n   * last item, and anything focused or scrolled into view, clear of it. Until\n   * then, and while no bottom toolbar is shown, it stays docked. Independent\n   * of `chromePresentation`, which governs only the top chrome. An untoned\n   * `ToolbarText` in the toolbar lifts to AA over the content beneath it.\n   */\n  bottomToolbarPresentation?: NavStackBottomToolbarPresentation;\n  /**\n   * For `clear` chrome or bottom toolbar, `material` fades the chrome\n   * material in while the active view's content lies beneath it (default\n   * `none`).\n   */\n  scrollEdge?: ScrollEdge;\n  /**\n   * The scroll distance, in CSS pixels, over which the scroll edge fades in\n   * (default 60).\n   */\n  scrollEdgeDistance?: number;\n  /**\n   * Paint the stack, its docked chrome and bottom toolbar, and every view in\n   * an app-chosen color (a `@kerfjs/ui/css-values` color builder) instead of\n   * the surface. Overlay chrome keeps the chrome material; one view's own\n   * color goes in its `pane: { background }`. Forced colors paint `Canvas`.\n   */\n  background?: CssColor;\n  /**\n   * A scoped tint (`{ color, scheme }`) for the stack, its chrome, bottom toolbar, and views: its surfaces and every\n   * descendant re-derive their surface and text tokens from the app's color\n   * in the declared scheme, with lightness clamped to keep text at WCAG AA.\n   */\n  tint?: SurfaceTint;\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\nconst DEFAULT_SAFE_AREA_EDGES = [\n  'block-start',\n  'inline-start',\n  'inline-end',\n] as const;\n\nconst DEFAULT_BOTTOM_SAFE_AREA_EDGES = [\n  'block-end',\n  'inline-start',\n  'inline-end',\n] as const;\n\nfunction chromeList(content: KerfUiContent, config?: ListConfig) {\n  return (\n    <List\n      dividerSides={config?.dividerSides}\n      gap={config?.gap}\n      hAlign={config?.hAlign}\n      vAlign={config?.vAlign}\n      textInsets={config?.textInsets}\n      controlInsets={config?.controlInsets}\n    >\n      {content}\n    </List>\n  );\n}\n\n/**\n * A navigation stack (iOS-style push/pop). Renders every entry stacked, the last\n * one active; `@kerfjs/ui/wire-nav-stack`'s `wireNavStack` slides the content and\n * cross-fades the chrome across a change. Its top chrome is a real `Toolbar`: the\n * back control and title lead, the active view's `toolbar` fills the zones,\n * and `toolbarConfig` supplies defaults. A single-pane\n * layout is a `NavStack` with one entry. See `docs/23-app-layouts.md` §3.1.\n */\nexport function NavStack({\n  id,\n  label,\n  views,\n  backLabel = 'Back',\n  backIcon,\n  backText,\n  toolbarConfig = {},\n  panelToggle,\n  hideToolbar = false,\n  bottomToolbar,\n  separator = 'auto',\n  chromeDividers = 'scroll',\n  chromePresentation = 'docked',\n  bottomToolbarPresentation = 'docked',\n  scrollEdge = 'none',\n  scrollEdgeDistance,\n  background,\n  tint,\n  className = '',\n  slot,\n}: NavStackProps) {\n  const tinted = surfaceTintAttributes(tint);\n  const topIndex = views.length - 1;\n  const top = views[topIndex];\n  const topToolbar = top?.toolbar;\n  const bottom = top?.bottomToolbar ?? bottomToolbar;\n  const canPop = views.length > 1;\n  const topDensity = topToolbar?.density ?? toolbarConfig.density;\n  // With a back control, the title centers on the bar (iOS-style) unless the\n  // view owns the center zone; at the root it leads and fills, left-aligned.\n  const centerTitle = canPop && topToolbar?.center === undefined;\n  const title = (\n    <ToolbarText\n      text={topToolbar?.title ?? ''}\n      size={\n        topToolbar?.titleSize ??\n        toolbarConfig.titleSize ??\n        (canPop ? 'large' : 'xlarge')\n      }\n      headingLevel={topToolbar?.headingLevel ?? toolbarConfig.headingLevel}\n      fill={!centerTitle}\n    />\n  );\n  return (\n    <section\n      class={`kui-nav-stack ${tinted.className} ${className}`\n        .replace(/\\s+/g, ' ')\n        .trim()}\n      id={id}\n      data-component=\"nav-stack\"\n      data-nav-stack-id={id}\n      data-depth={String(views.length)}\n      data-separator={separator}\n      data-chrome-dividers={\n        chromeDividers === 'always' || chromeDividers === 'none'\n          ? chromeDividers\n          : undefined\n      }\n      data-chrome-presentation={\n        chromePresentation !== 'docked' && !hideToolbar ? 'overlay' : undefined\n      }\n      data-chrome-material={\n        chromePresentation === 'clear' && !hideToolbar ? 'clear' : undefined\n      }\n      data-bottom-toolbar-presentation={\n        bottomToolbarPresentation !== 'docked' ? 'overlay' : undefined\n      }\n      data-bottom-toolbar-material={\n        bottomToolbarPresentation === 'clear' ? 'clear' : undefined\n      }\n      {...scrollEdgeAttributes(\n        scrollEdge,\n        scrollEdgeDistance,\n        (chromePresentation === 'clear' && !hideToolbar) ||\n          bottomToolbarPresentation === 'clear',\n      )}\n      data-background={background === undefined ? undefined : ''}\n      data-kui-tint={tinted['data-kui-tint']}\n      data-kui-tint-accent={tinted['data-kui-tint-accent']}\n      style={joinStyles(\n        background === undefined\n          ? undefined\n          : `--_kui-nav-stack-background:${background}`,\n        tinted.style,\n      )}\n      aria-label={label}\n      slot={slot}\n    >\n      {!hideToolbar && (\n        <div class=\"kui-nav-stack__chrome\" data-nav-stack-chrome>\n          <Toolbar\n            label={topToolbar?.label ?? toolbarConfig.label}\n            density={topDensity}\n            dividerSides={\n              topToolbar?.dividerSides ?? toolbarConfig.dividerSides\n            }\n            centerAlign={\n              centerTitle\n                ? 'balanced'\n                : (topToolbar?.centerAlign ?? toolbarConfig.centerAlign)\n            }\n            responsive={topToolbar?.responsive ?? toolbarConfig.responsive}\n            responsiveAt={\n              topToolbar?.responsiveAt ?? toolbarConfig.responsiveAt\n            }\n            safeAreaEdges={\n              topToolbar?.safeAreaEdges ??\n              toolbarConfig.safeAreaEdges ??\n              DEFAULT_SAFE_AREA_EDGES\n            }\n            leading={\n              <>\n                {canPop && (\n                  <ToolbarControlGroup\n                    content={backText ? 'mixed' : 'icon'}\n                    size={topDensity === 'compact' ? 'compact' : 'default'}\n                    material={\n                      chromePresentation === 'clear' ? 'glass' : undefined\n                    }\n                    single\n                  >\n                    <button\n                      type=\"button\"\n                      class=\"kui-nav-stack__back\"\n                      data-nav-back\n                      aria-label={backText ? undefined : backLabel}\n                    >\n                      {backIcon ?? (\n                        <LucideIcon\n                          icon={ChevronLeft}\n                          name=\"chevron-left\"\n                          className=\"kui-nav-stack__back-icon\"\n                        />\n                      )}\n                      {backText ? <span>{backText}</span> : null}\n                    </button>\n                  </ToolbarControlGroup>\n                )}\n                {topToolbar?.leading}\n                {centerTitle ? null : title}\n              </>\n            }\n            center={centerTitle ? title : topToolbar?.center}\n            trailing={\n              <>\n                {topToolbar?.trailing}\n                {panelToggle}\n              </>\n            }\n          />\n        </div>\n      )}\n      <div class=\"kui-nav-stack__viewport\" data-nav-stack-viewport>\n        {views.map((view, index) => (\n          <article\n            class=\"kui-nav-stack__view\"\n            data-key={view.key}\n            data-nav-key={view.key}\n            data-nav-active={String(index === topIndex)}\n            aria-hidden={String(index !== topIndex)}\n          >\n            {view.pane ||\n            view.header !== undefined ||\n            view.footer !== undefined ? (\n              <Pane\n                {...paneConfigProps(view.pane)}\n                header={\n                  view.header === undefined ? undefined : (\n                    <div data-nav-stack-header>\n                      {chromeList(view.header, view.headerList)}\n                    </div>\n                  )\n                }\n                footer={\n                  view.footer === undefined ? undefined : (\n                    <div data-nav-stack-footer>\n                      {chromeList(view.footer, view.footerList)}\n                    </div>\n                  )\n                }\n              >\n                {view.content}\n              </Pane>\n            ) : (\n              view.content\n            )}\n          </article>\n        ))}\n      </div>\n      {bottom && (\n        <footer class=\"kui-nav-stack__bottom\" data-nav-stack-bottom>\n          <Toolbar\n            position=\"footer\"\n            label={bottom.label}\n            density={bottom.density}\n            dividerSides={bottom.dividerSides}\n            centerAlign={bottom.centerAlign}\n            responsive={bottom.responsive}\n            responsiveAt={bottom.responsiveAt}\n            safeAreaEdges={\n              bottom.safeAreaEdges ?? DEFAULT_BOTTOM_SAFE_AREA_EDGES\n            }\n            leading={bottom.leading}\n            center={bottom.center}\n            trailing={bottom.trailing}\n          />\n        </footer>\n      )}\n    </section>\n  );\n}\n"]}

package/dist/collapsible-panel.js

@@ -1,5 +1,5 @@
-import { collapsiblePanelToggleIcon, composedPanelBody, relocatedPanelGroups, groupSizeFor } from './chunk-FG6U7KQQ.js';
-export { collapsiblePanelToggleIcon } from './chunk-FG6U7KQQ.js';
+import { collapsiblePanelToggleIcon, composedPanelBody, relocatedPanelGroups, groupSizeFor } from './chunk-DNWWF6UN.js';
+export { collapsiblePanelToggleIcon } from './chunk-DNWWF6UN.js';
 
 
 

package/dist/color-picker.d.ts

@@ -60,22 +60,47 @@ interface ColorPickerProps {
     /** Native named-slot assignment when composed inside a web component. */
     slot?: string;
 }
-/** The labels, accessible names, and maximum of each channel field per mode. */
+/**
+ * The labels, accessible names, maximum, and spoken unit of each channel per
+ * mode; the mode's sliders and fields both follow it.
+ */
 declare const COLOR_PICKER_CHANNELS: Record<ColorPickerMode, readonly {
     short: string;
     name: string;
     max: number;
+    unit: '' | '%' | '°';
 }[]>;
 /** The rounded channel values a mode shows for an HSV color. */
 declare function colorPickerChannels(mode: ColorPickerMode, hsv: Hsva): number[];
+/** One channel slider's attributes; see {@link colorPickerSlider}. */
+interface ColorPickerSliderState {
+    max: number;
+    value: string;
+    label: string;
+    valueText: string;
+    style: string;
+}
+/**
+ * The attributes of one channel slider for a mode's exact channel values:
+ * its range, value, accessible name and spoken value, and an inline style
+ * with the track gradient of the colors that channel produces while the
+ * others hold (the full rainbow for the HSL and HSB hue) and the color under
+ * the thumb.
+ * `undefined` for a slot the mode does not use.
+ */
+declare function colorPickerSlider(mode: ColorPickerMode, index: number, values: readonly number[]): ColorPickerSliderState | undefined;
 /** The area's spoken value. */
 declare function colorPickerAreaText(hsv: Hsva): string;
 /** The CSS custom properties that place the thumbs and paint the tracks. */
 declare function colorPickerStyle(hsv: Hsva): string;
 /**
- * A full color picker panel: a saturation and brightness area, a hue slider,
- * an optional opacity slider on a checkerboard, a color-model menu (RGB, HSL,
- * HSB, Grayscale) with its channel fields, a hex field (8 digits below full
+ * A full color picker panel: a saturation and brightness area; a slider for
+ * each channel of the color model (red, green, and blue; hue, saturation, and
+ * lightness or brightness; or one gray level), each track painting the colors
+ * that channel produces while the others hold (the hue track the full
+ * rainbow); an optional opacity slider on
+ * a checkerboard; a color-model menu (RGB, HSL, HSB, Grayscale) with its
+ * channel fields, a hex field (8 digits below full
  * opacity) and an opacity field, an optional screen sampler (EyeDropper), and
  * optional preset and sample swatches. The controlled `value` renders it;
  * wire `wireColorPickers` from `@kerfjs/ui/wire-color-pickers` to make it
@@ -85,4 +110,4 @@ declare function colorPickerStyle(hsv: Hsva): string;
  */
 declare function ColorPicker({ id, label, value, mode, alpha, name, form, eyedropper, presets, samples, addSampleAction, disabled, className, rootAttributes, slot, }: ColorPickerProps): kerfjs.SafeHtml;
 
-export { COLOR_PICKER_CHANNELS, COLOR_PICKER_SWATCH_ACTION, ColorPicker, type ColorPickerMode, type ColorPickerProps, type ColorPickerRootAttributes, type ColorPickerSamples, colorPickerAreaText, colorPickerChannels, colorPickerStyle };
+export { COLOR_PICKER_CHANNELS, COLOR_PICKER_SWATCH_ACTION, ColorPicker, type ColorPickerMode, type ColorPickerProps, type ColorPickerRootAttributes, type ColorPickerSamples, type ColorPickerSliderState, colorPickerAreaText, colorPickerChannels, colorPickerSlider, colorPickerStyle };

package/dist/color-picker.js

@@ -1,4 +1,4 @@
-export { COLOR_PICKER_CHANNELS, COLOR_PICKER_SWATCH_ACTION, ColorPicker, colorPickerAreaText, colorPickerChannels, colorPickerStyle } from './chunk-EKBMUXFV.js';
+export { COLOR_PICKER_CHANNELS, COLOR_PICKER_SWATCH_ACTION, ColorPicker, colorPickerAreaText, colorPickerChannels, colorPickerSlider, colorPickerStyle } from './chunk-3Z7N2NAZ.js';
 
 
 

package/dist/disclosure.d.ts

@@ -3,10 +3,12 @@ import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
 
 /**
  * The Disclosure's surface: `plain` (default) on the surrounding surface,
- * `framed` with the standard neutral border, or `sunken` on the lowered,
- * textured work surface with a border.
+ * `framed` with the standard neutral border, `sunken` on the lowered,
+ * textured work surface with a border, or `embedded` inside owner chrome such
+ * as a `ContentItem`: no margin, border, or padding of its own and a compact
+ * summary row, so the arrow sits on the owner's content inset.
  */
-type DisclosureAppearance = 'plain' | 'framed' | 'sunken';
+type DisclosureAppearance = 'plain' | 'framed' | 'sunken' | 'embedded';
 /**
  * Application `data-*` identity on the `<details>` root, such as `data-key`;
  * the Disclosure's own configuration attributes stay protected.
@@ -31,6 +33,11 @@ interface DisclosureProps {
      * where opening one closes the others (the native `<details name>`).
      */
     name?: string;
+    /**
+     * Surface treatment; defaults to `plain`. Use `embedded` only inside chrome
+     * that already owns the content-item inset, such as a `ContentItem`, and
+     * give it content that draws no inset of its own (`Text flush`).
+     */
     appearance?: DisclosureAppearance;
     /**
      * A `data-action` value on the `<details>` root, for a delegated listener of
@@ -48,7 +55,9 @@ interface DisclosureProps {
  * Content a person shows and hides under a summary row: a native `<details>`
  * with a `<summary>` that carries a `DisclosureArrow` and the title, on the
  * shared content-item geometry (8px inline margin, a 1px border, 8px
- * padding, the rounded radius). Keyboard and screen-reader behavior is the
+ * padding, the rounded radius). `appearance="embedded"` drops that geometry
+ * for a Disclosure inside owner chrome (a `ContentItem`) that already insets
+ * it. Keyboard and screen-reader behavior is the
  * platform's: the summary is a button that Enter and Space toggle, and it
  * reports its expanded state. Disclosures sharing a `name` form an accordion.
  */

package/dist/disclosure.js

@@ -31,7 +31,7 @@ function Disclosure({
       "data-component": "disclosure",
       "data-appearance": appearance,
       "data-action": toggleAction,
-      ...name === void 0 ? {} : { name },
+      name,
       open: open || void 0,
       slot,
       children: [

package/dist/disclosure.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/surfaces/disclosure/disclosure.tsx"],"names":[],"mappings":";;;;;;AAmBA,IAAM,oBAAA,uBAA2B,GAAA,CAAI;AAAA,EACnC,gBAAA;AAAA,EACA,iBAAA;AAAA,EACA;AACF,CAAC,CAAA;AA2CM,SAAS,UAAA,CAAW;AAAA,EACzB,KAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,IAAA,GAAO,KAAA;AAAA,EACP,IAAA;AAAA,EACA,UAAA,GAAa,OAAA;AAAA,EACb,YAAA;AAAA,EACA,EAAA;AAAA,EACA,iBAAiB,EAAC;AAAA,EAClB,SAAA,GAAY,EAAA;AAAA,EACZ;AACF,CAAA,EAAoB;AAClB,EAAA,uBACE,IAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACE,GAAG,oBAAA,CAAqB,cAAA,EAAgB,oBAAoB,CAAA;AAAA,MAC7D,EAAA;AAAA,MACA,KAAA,EAAO,CAAA,eAAA,EAAkB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAC1C,gBAAA,EAAe,YAAA;AAAA,MACf,iBAAA,EAAiB,UAAA;AAAA,MACjB,aAAA,EAAa,YAAA;AAAA,MAGZ,GAAK,IAAA,KAAS,MAAA,GAAY,EAAC,GAAI,EAAE,IAAA,EAAK;AAAA,MACvC,MAAM,IAAA,IAAQ,MAAA;AAAA,MACd,IAAA;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,SAAA,EAAA,EAAQ,OAAM,yBAAA,EACb,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,mBAAgB,IAAA,EAAY,CAAA;AAAA,0BAC7B,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,uBAAA,EAAyB,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,UAC1C,WAAW,MAAA,GAAY,IAAA,uBACrB,MAAA,EAAA,EAAK,KAAA,EAAM,0BAA0B,QAAA,EAAA,MAAA,EAAO;AAAA,SAAA,EAEjD,CAAA;AAAA,wBACA,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,yBAAA,EAA2B,QAAA,EAAS;AAAA;AAAA;AAAA,GACjD;AAEJ","file":"disclosure.js","sourcesContent":["import type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport { filterDataAttributes } from '../../../shared/dom/extension-attributes.js';\nimport { DisclosureArrow } from '../../navigation/disclosure-arrow/disclosure-arrow.js';\n\n/**\n * The Disclosure's surface: `plain` (default) on the surrounding surface,\n * `framed` with the standard neutral border, or `sunken` on the lowered,\n * textured work surface with a border.\n */\nexport type DisclosureAppearance = 'plain' | 'framed' | 'sunken';\n\n/**\n * Application `data-*` identity on the `<details>` root, such as `data-key`;\n * the Disclosure's own configuration attributes stay protected.\n */\nexport type DisclosureRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined>\n>;\n\nconst DISCLOSURE_PROTECTED = new Set([\n  'data-component',\n  'data-appearance',\n  'data-action',\n]);\n\nexport interface DisclosureProps {\n  /** The always-visible summary: a short title for the hidden content. */\n  title: KerfUiContent | string;\n  /** A quiet line after the title in the summary, such as a count. */\n  detail?: KerfUiContent | string;\n  /** The content shown while open. */\n  children: KerfUiContent | string;\n  /**\n   * Render it open. The open state belongs to the native `<details>` once it\n   * is on the page: a person toggles it, a re-render that passes `open` opens\n   * it, and a re-render never closes it (kerf's morph leaves a `<details>`\n   * element's live `open` alone). Close it from code with `element.open = false`.\n   */\n  open?: boolean;\n  /**\n   * An exclusive group: Disclosures sharing a `name` behave as an accordion,\n   * where opening one closes the others (the native `<details name>`).\n   */\n  name?: string;\n  appearance?: DisclosureAppearance;\n  /**\n   * A `data-action` value on the `<details>` root, for a delegated listener of\n   * the native `toggle` event (it does not bubble: listen in the capture phase,\n   * for example with `delegateCapture`). `event.newState` is `open` or `closed`.\n   */\n  toggleAction?: string;\n  id?: string;\n  rootAttributes?: DisclosureRootAttributes;\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/**\n * Content a person shows and hides under a summary row: a native `<details>`\n * with a `<summary>` that carries a `DisclosureArrow` and the title, on the\n * shared content-item geometry (8px inline margin, a 1px border, 8px\n * padding, the rounded radius). Keyboard and screen-reader behavior is the\n * platform's: the summary is a button that Enter and Space toggle, and it\n * reports its expanded state. Disclosures sharing a `name` form an accordion.\n */\nexport function Disclosure({\n  title,\n  detail,\n  children,\n  open = false,\n  name,\n  appearance = 'plain',\n  toggleAction,\n  id,\n  rootAttributes = {},\n  className = '',\n  slot,\n}: DisclosureProps) {\n  return (\n    <details\n      {...filterDataAttributes(rootAttributes, DISCLOSURE_PROTECTED)}\n      id={id}\n      class={`kui-disclosure ${className}`.trim()}\n      data-component=\"disclosure\"\n      data-appearance={appearance}\n      data-action={toggleAction}\n      // kerfjs's HTMLDetailsAttrs lacks the native exclusive-group `name`\n      // until KF-KFH2VT lands, so it rides in a typed attribute spread.\n      {...((name === undefined ? {} : { name }) as Record<string, string>)}\n      open={open || undefined}\n      slot={slot}\n    >\n      <summary class=\"kui-disclosure__summary\">\n        <DisclosureArrow open={open} />\n        <span class=\"kui-disclosure__title\">{title}</span>\n        {detail === undefined ? null : (\n          <span class=\"kui-disclosure__detail\">{detail}</span>\n        )}\n      </summary>\n      <div class=\"kui-disclosure__content\">{children}</div>\n    </details>\n  );\n}\n"]}
+{"version":3,"sources":["../src/components/surfaces/disclosure/disclosure.tsx"],"names":[],"mappings":";;;;;;AAqBA,IAAM,oBAAA,uBAA2B,GAAA,CAAI;AAAA,EACnC,gBAAA;AAAA,EACA,iBAAA;AAAA,EACA;AACF,CAAC,CAAA;AAkDM,SAAS,UAAA,CAAW;AAAA,EACzB,KAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,IAAA,GAAO,KAAA;AAAA,EACP,IAAA;AAAA,EACA,UAAA,GAAa,OAAA;AAAA,EACb,YAAA;AAAA,EACA,EAAA;AAAA,EACA,iBAAiB,EAAC;AAAA,EAClB,SAAA,GAAY,EAAA;AAAA,EACZ;AACF,CAAA,EAAoB;AAClB,EAAA,uBACE,IAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACE,GAAG,oBAAA,CAAqB,cAAA,EAAgB,oBAAoB,CAAA;AAAA,MAC7D,EAAA;AAAA,MACA,KAAA,EAAO,CAAA,eAAA,EAAkB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAC1C,gBAAA,EAAe,YAAA;AAAA,MACf,iBAAA,EAAiB,UAAA;AAAA,MACjB,aAAA,EAAa,YAAA;AAAA,MACb,IAAA;AAAA,MACA,MAAM,IAAA,IAAQ,MAAA;AAAA,MACd,IAAA;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,SAAA,EAAA,EAAQ,OAAM,yBAAA,EACb,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,mBAAgB,IAAA,EAAY,CAAA;AAAA,0BAC7B,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,uBAAA,EAAyB,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,UAC1C,WAAW,MAAA,GAAY,IAAA,uBACrB,MAAA,EAAA,EAAK,KAAA,EAAM,0BAA0B,QAAA,EAAA,MAAA,EAAO;AAAA,SAAA,EAEjD,CAAA;AAAA,wBACA,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,yBAAA,EAA2B,QAAA,EAAS;AAAA;AAAA;AAAA,GACjD;AAEJ","file":"disclosure.js","sourcesContent":["import type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport { filterDataAttributes } from '../../../shared/dom/extension-attributes.js';\nimport { DisclosureArrow } from '../../navigation/disclosure-arrow/disclosure-arrow.js';\n\n/**\n * The Disclosure's surface: `plain` (default) on the surrounding surface,\n * `framed` with the standard neutral border, `sunken` on the lowered,\n * textured work surface with a border, or `embedded` inside owner chrome such\n * as a `ContentItem`: no margin, border, or padding of its own and a compact\n * summary row, so the arrow sits on the owner's content inset.\n */\nexport type DisclosureAppearance = 'plain' | 'framed' | 'sunken' | 'embedded';\n\n/**\n * Application `data-*` identity on the `<details>` root, such as `data-key`;\n * the Disclosure's own configuration attributes stay protected.\n */\nexport type DisclosureRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined>\n>;\n\nconst DISCLOSURE_PROTECTED = new Set([\n  'data-component',\n  'data-appearance',\n  'data-action',\n]);\n\nexport interface DisclosureProps {\n  /** The always-visible summary: a short title for the hidden content. */\n  title: KerfUiContent | string;\n  /** A quiet line after the title in the summary, such as a count. */\n  detail?: KerfUiContent | string;\n  /** The content shown while open. */\n  children: KerfUiContent | string;\n  /**\n   * Render it open. The open state belongs to the native `<details>` once it\n   * is on the page: a person toggles it, a re-render that passes `open` opens\n   * it, and a re-render never closes it (kerf's morph leaves a `<details>`\n   * element's live `open` alone). Close it from code with `element.open = false`.\n   */\n  open?: boolean;\n  /**\n   * An exclusive group: Disclosures sharing a `name` behave as an accordion,\n   * where opening one closes the others (the native `<details name>`).\n   */\n  name?: string;\n  /**\n   * Surface treatment; defaults to `plain`. Use `embedded` only inside chrome\n   * that already owns the content-item inset, such as a `ContentItem`, and\n   * give it content that draws no inset of its own (`Text flush`).\n   */\n  appearance?: DisclosureAppearance;\n  /**\n   * A `data-action` value on the `<details>` root, for a delegated listener of\n   * the native `toggle` event (it does not bubble: listen in the capture phase,\n   * for example with `delegateCapture`). `event.newState` is `open` or `closed`.\n   */\n  toggleAction?: string;\n  id?: string;\n  rootAttributes?: DisclosureRootAttributes;\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/**\n * Content a person shows and hides under a summary row: a native `<details>`\n * with a `<summary>` that carries a `DisclosureArrow` and the title, on the\n * shared content-item geometry (8px inline margin, a 1px border, 8px\n * padding, the rounded radius). `appearance=\"embedded\"` drops that geometry\n * for a Disclosure inside owner chrome (a `ContentItem`) that already insets\n * it. Keyboard and screen-reader behavior is the\n * platform's: the summary is a button that Enter and Space toggle, and it\n * reports its expanded state. Disclosures sharing a `name` form an accordion.\n */\nexport function Disclosure({\n  title,\n  detail,\n  children,\n  open = false,\n  name,\n  appearance = 'plain',\n  toggleAction,\n  id,\n  rootAttributes = {},\n  className = '',\n  slot,\n}: DisclosureProps) {\n  return (\n    <details\n      {...filterDataAttributes(rootAttributes, DISCLOSURE_PROTECTED)}\n      id={id}\n      class={`kui-disclosure ${className}`.trim()}\n      data-component=\"disclosure\"\n      data-appearance={appearance}\n      data-action={toggleAction}\n      name={name}\n      open={open || undefined}\n      slot={slot}\n    >\n      <summary class=\"kui-disclosure__summary\">\n        <DisclosureArrow open={open} />\n        <span class=\"kui-disclosure__title\">{title}</span>\n        {detail === undefined ? null : (\n          <span class=\"kui-disclosure__detail\">{detail}</span>\n        )}\n      </summary>\n      <div class=\"kui-disclosure__content\">{children}</div>\n    </details>\n  );\n}\n"]}

package/dist/help-tags-register.js

@@ -1,4 +1,4 @@
-import { installHelpTags } from './chunk-SQ2Q3OQI.js';
+import { installHelpTags } from './chunk-2LM3PYHA.js';
 
 
 // src/wiring/help-tags-register.ts

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 export { Button, ButtonContent, ButtonEmphasis, ButtonLabel, ButtonOptions, ButtonProps, ButtonRootAttributes, ButtonShape, ButtonSize, ButtonTone, ButtonType } from './button.js';
 export { FloatingToolbar, FloatingToolbarPosition, FloatingToolbarProps } from './floating-toolbar.js';
 export { PopupMenu, PopupMenuAnchor, PopupMenuDivider, PopupMenuElement, PopupMenuEntry, PopupMenuHeading, PopupMenuItem, PopupMenuPlacement, PopupMenuProps, closePopupMenu, openPopupMenu, openPopupMenuAt } from './popup-menu.js';
-export { SplitButton, SplitButtonProps, SplitButtonTone } from './split-button.js';
+export { SplitButton, SplitButtonProps, SplitButtonShape, SplitButtonTone } from './split-button.js';
 export { Toolbar, ToolbarConfig, ToolbarPosition, ToolbarProps } from './toolbar.js';
 export { ToolbarActionLink, ToolbarActionLinkProps, ToolbarControlGroup, ToolbarControlGroupAppearance, ToolbarControlGroupButtonAppearance, ToolbarControlGroupContent, ToolbarControlGroupDensity, ToolbarControlGroupExpandedOverflow, ToolbarControlGroupMaterial, ToolbarControlGroupMenuInset, ToolbarControlGroupOverflow, ToolbarControlGroupProps, ToolbarControlGroupSelectedChrome, ToolbarControlGroupSelectedTone, ToolbarControlGroupShape, ToolbarControlGroupSize, ToolbarControlGroupTileTone, ToolbarControlGroupTone, ToolbarControlGroupVisibility } from './toolbar-control-group.js';
 export { HeadingLevel, ToolbarText, ToolbarTextProps, ToolbarTextSize, ToolbarTextTone } from './toolbar-text.js';
@@ -27,6 +27,7 @@ export { Skeleton, SkeletonProps } from './skeleton.js';
 export { StateBanner, StateBannerProps, StateBannerTone, StateBannerUrgency } from './state-banner.js';
 export { Checkbox, CheckboxProps, CheckboxRootAttributes, CheckboxSize } from './checkbox.js';
 export { wireCheckboxes } from './wire-checkboxes.js';
+export { CheckboxGroup, CheckboxGroupChoice, CheckboxGroupName, CheckboxGroupOptions, CheckboxGroupOrientation, CheckboxGroupProps, CheckboxGroupRootAttributes, CheckboxGroupSize } from './checkbox-group.js';
 export { ChoiceChips, ChoiceChipsChoice, ChoiceChipsProps, ChoiceChipsSelectionMode, ChoiceChipsSize, ChoiceChipsSwatch } from './choice-chips.js';
 export { readChoiceChips, wireChoiceChips } from './wire-choice-chips.js';
 export { Combobox, ComboboxProps, ComboboxSuggestion } from './combobox.js';