@lostgradient/cinder 0.3.0 → 0.4.1

package/dist/components/time-field/time-field.types.d.ts

@@ -0,0 +1,63 @@
+import type { HTMLAttributes } from 'svelte/elements';
+export type TimeFieldGranularity = 'minute' | 'second';
+export type TimeFieldChange = {
+    /** Canonical 24-hour time string (`HH:mm` or `HH:mm:ss`), or an empty string. */
+    value: string;
+    /** Selected timezone identifier when a timezone select is rendered. */
+    timezone: string | undefined;
+};
+export type TimeFieldProps = Omit<HTMLAttributes<HTMLDivElement>, 'class' | 'children' | 'onchange'> & {
+    /** Stable id used to associate the label, input, description, and error. Required. */
+    id: string;
+    /** Bindable canonical 24-hour time string (`HH:mm` or `HH:mm:ss`). */
+    value?: string;
+    /** Initial canonical time string used when the component is not controlled. */
+    defaultValue?: string;
+    /** Time precision. Defaults to minute precision. */
+    granularity?: TimeFieldGranularity;
+    /** Optional timezone select values, such as `America/Denver` or `UTC`. */
+    timezones?: readonly string[];
+    /** Bindable selected timezone. Defaults to the first timezone when provided. */
+    timezone?: string | undefined;
+    /** Name for the timezone value in native form submission. Defaults to `${name}-timezone`. */
+    timezoneName?: string;
+    /** Visible label text rendered above the input. */
+    label?: string;
+    /** Helper text rendered below the control. */
+    description?: string;
+    /** Validation error message. */
+    error?: string;
+    /** Disable all controls. */
+    disabled?: boolean;
+    /** Prevent editing while keeping the submitted value. */
+    readonly?: boolean;
+    /** Mark the time input as required. */
+    required?: boolean;
+    /** Name for form submission. */
+    name?: string;
+    /** Additional CSS classes applied to the root. */
+    class?: string;
+    /** Called when the user commits a time or timezone change. */
+    onchange?: (detail: TimeFieldChange) => void;
+};
+export interface TimeFieldSchemaProps {
+    id: string;
+    value?: string;
+    defaultValue?: string;
+    granularity?: TimeFieldGranularity;
+    timezones?: readonly string[];
+    timezone?: string | undefined;
+    timezoneName?: string;
+    label?: string;
+    description?: string;
+    error?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    required?: boolean;
+    name?: string;
+    class?: string;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+    'aria-invalid'?: boolean | 'true' | 'false';
+}

package/dist/components/time-field/time-field.variables.d.ts

@@ -0,0 +1,2 @@
+declare const variables: readonly string[];
+export default variables;

package/dist/components/{experimental/connection-indicator/index.js → time-field/time-field.variables.js}

@@ -21,20 +21,11 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
   throw Error('Dynamic require of "' + x + '" is not supported');
 });
 
-// ../../node_modules/esm-env/true.js
-var true_default = true;
-// src/utilities/dev-warn.ts
-function devWarn(message, ...args) {
-  if (!true_default)
-    return;
-  console.warn(message, ...args);
-}
-
-// src/components/experimental/connection-indicator/index.ts
-devWarn("[cinder] '@lostgradient/cinder/experimental/connection-indicator' is deprecated and will be removed in the next major. " + "Import from '@lostgradient/cinder/connection-indicator' instead.");
+// src/components/time-field/time-field.variables.ts
+var variables = [];
+var time_field_variables_default = variables;
 export {
-  default2 as default,
-  ConnectionIndicator
+  time_field_variables_default as default
 };
 
-//# debugId=EFA5F992C0D8FABF64756E2164756E21
+//# debugId=1068D9718E69F79464756E2164756E21

package/dist/components/toggle/index.js

@@ -28,21 +28,53 @@ import"@lostgradient/cinder/toggle/styles";
 import"svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
 
+// src/_internal/form-field-context.ts
+import { createContext } from "svelte";
+
+// src/_internal/optional-context.ts
+function optionalContext(getStrict) {
+  return () => {
+    try {
+      return getStrict();
+    } catch {
+      return;
+    }
+  };
+}
+
+// src/_internal/form-field-context.ts
+var [getFormFieldContextStrict, setFormFieldContextRaw] = createContext();
+function setFormFieldContext(context) {
+  setFormFieldContextRaw(context);
+}
+var getFormFieldContext = optionalContext(getFormFieldContextStrict);
+
 // src/utilities/class-names.ts
 function classNames(...parts) {
   return parts.filter((part) => typeof part === "string" && part.length > 0).join(" ");
 }
 
+// src/utilities/value-change.ts
+function commitValue(proposed, onValueChange, setValue) {
+  const committed = onValueChange?.(proposed) ?? proposed;
+  setValue(committed);
+  return committed;
+}
+
 // src/components/toggle/toggle.svelte
 var root_1 = $.from_html(`<input type="checkbox" hidden=""/>`);
 var root = $.from_html(`<span class="cinder-toggle-field"><button type="button" role="switch"><span aria-hidden="true" class="cinder-toggle__thumb"></span></button> <!> <span class="cinder-toggle-field__label" role="presentation"> </span></span>`);
 function Toggle($$anchor, $$props) {
   $.push($$props, true);
-  let checked = $.prop($$props, "checked", 15, false), disabled = $.prop($$props, "disabled", 3, false), hideLabel = $.prop($$props, "hideLabel", 3, false), value = $.prop($$props, "value", 3, "on");
+  let checked = $.prop($$props, "checked", 15, false), hideLabel = $.prop($$props, "hideLabel", 3, false), value = $.prop($$props, "value", 3, "on");
+  const context = getFormFieldContext();
+  const resolvedDisabled = $.derived(() => $$props.disabled ?? context?.disabled ?? false);
   const labelId = $.derived(() => `${$$props.id}-label`);
   function toggle() {
-    if (!disabled()) {
-      checked(!checked());
+    if (!$.get(resolvedDisabled)) {
+      commitValue(!checked(), $$props.onValueChange, (next) => {
+        checked(next);
+      });
     }
   }
   var span = root();
@@ -56,7 +88,7 @@ function Toggle($$anchor, $$props) {
       $.template_effect(() => {
         $.set_attribute(input, "name", $$props.name);
         $.set_attribute(input, "form", $$props.form);
-        input.disabled = disabled();
+        input.disabled = $.get(resolvedDisabled);
         if (input_value !== (input_value = value())) {
           input.value = (input.__value = value()) ?? "";
         }
@@ -77,12 +109,12 @@ function Toggle($$anchor, $$props) {
     $.set_attribute(button, "id", $$props.id);
     $.set_attribute(button, "aria-checked", checked());
     $.set_attribute(button, "aria-labelledby", $.get(labelId));
-    button.disabled = disabled();
+    button.disabled = $.get(resolvedDisabled);
     $.set_class(button, 1, $0);
     $.set_attribute(button, "data-cinder-checked", checked() ? "" : undefined);
     $.set_attribute(span_1, "id", $.get(labelId));
     $.set_attribute(span_1, "data-hidden", hideLabel() || undefined);
-    $.set_attribute(span_1, "data-disabled", disabled() || undefined);
+    $.set_attribute(span_1, "data-disabled", $.get(resolvedDisabled) || undefined);
     $.set_text(text, $$props.label);
   }, [() => $.clsx(classNames("cinder-toggle", $$props.class))]);
   $.delegated("click", button, toggle);
@@ -99,4 +131,4 @@ export {
   Toggle
 };
 
-//# debugId=B4A15F1316FD255964756E2164756E21
+//# debugId=CE92D9537397EDB064756E2164756E21

package/dist/components/toggle/toggle.schema.js

@@ -64,11 +64,20 @@ var schema = {
     }
   },
   additionalProperties: false,
-  required: ["id", "label"]
+  required: ["id", "label"],
+  metadata: {
+    unsupportedProps: [
+      {
+        name: "onValueChange",
+        reason: "function-or-snippet",
+        description: "Intercept a proposed checked state before the bindable value is written. Return a replacement value to transform it."
+      }
+    ]
+  }
 };
 var toggle_schema_default = schema;
 export {
   toggle_schema_default as default
 };
 
-//# debugId=9FCEBA9937C7550C64756E2164756E21
+//# debugId=DE99FC2EB8725F9764756E2164756E21

package/dist/components/toggle/toggle.types.d.ts

@@ -18,6 +18,8 @@ export type ToggleProps = {
     id: string;
     /** Whether the toggle is currently checked. Bindable — defaults to false. */
     checked?: boolean;
+    /** Intercept a proposed checked state before the bindable value is written. Return a replacement value to transform it. */
+    onValueChange?: (next: boolean) => boolean | void;
     /** Visible label text. Always the accessible name, even when `hideLabel` is set. Required. */
     label: string;
     /** Prevents interaction when true. Sets `disabled` attribute. */

package/dist/components/tooltip/index.js

@@ -1902,7 +1902,8 @@ function copyInheritedPortalAttributes(element, source, inheritAttributes, fallb
   dir: element.getAttribute("dir"),
   theme: element.getAttribute("data-cinder-theme")
 }) {
-  const inheritedDir = inheritAttributes && source ? source.closest("[dir]")?.getAttribute("dir") : null;
+  const preservesExplicitDirection = element.dataset["cinderExplicitDirection"] === "true";
+  const inheritedDir = inheritAttributes && source && !preservesExplicitDirection ? source.closest("[dir]")?.getAttribute("dir") : null;
   const nextDir = inheritedDir ?? fallbackAttributes.dir;
   if (nextDir) {
     element.setAttribute("dir", nextDir);
@@ -2189,6 +2190,66 @@ function createAnchoredOverlay(options) {
   };
 }
 
+// src/_internal/overlay.ts
+var escapeStack = [];
+function pushEscapeHandler(handler) {
+  escapeStack.push(handler);
+  if (escapeStack.length === 1 && typeof window !== "undefined") {
+    window.addEventListener("keydown", onEscapeKeydown, { capture: true });
+  }
+  let released = false;
+  return () => {
+    if (released)
+      return;
+    released = true;
+    const index = escapeStack.lastIndexOf(handler);
+    if (index !== -1)
+      escapeStack.splice(index, 1);
+    if (escapeStack.length === 0 && typeof window !== "undefined") {
+      window.removeEventListener("keydown", onEscapeKeydown, { capture: true });
+    }
+  };
+}
+function onEscapeKeydown(event) {
+  if (event.key !== "Escape")
+    return;
+  const handler = escapeStack.at(-1);
+  if (!handler)
+    return;
+  handler(event);
+}
+var scrollLockCount = 0;
+var originalBodyOverflow = null;
+function lockBodyScroll() {
+  if (typeof document === "undefined")
+    return () => {};
+  if (scrollLockCount === 0) {
+    originalBodyOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+  }
+  scrollLockCount += 1;
+  let released = false;
+  return () => {
+    if (released)
+      return;
+    released = true;
+    scrollLockCount = Math.max(0, scrollLockCount - 1);
+    if (scrollLockCount === 0) {
+      document.body.style.overflow = originalBodyOverflow ?? "";
+      originalBodyOverflow = null;
+    }
+  };
+}
+function captureFocus() {
+  if (typeof document === "undefined")
+    return null;
+  const active = document.activeElement;
+  if (active && active !== document.body && active instanceof HTMLElement) {
+    return active;
+  }
+  return null;
+}
+
 // src/components/tooltip/tooltip.svelte
 var root2 = $4.from_html(`<span role="presentation"><!> <span role="tooltip" class="cinder-tooltip"> </span></span>`);
 function Tooltip($$anchor, $$props) {
@@ -2213,23 +2274,42 @@ function Tooltip($$anchor, $$props) {
   ].join(", ");
   let visible = $4.state(false);
   let showTimer;
-  let hasPendingShow = $4.state(false);
+  let releasePendingEscapeListener;
   let wrapperElement = $4.state(undefined);
   let tooltipElement = $4.state(undefined);
   let anchorElement = $4.state(null);
-  function show() {
+  function releasePendingEscape() {
+    releasePendingEscapeListener?.();
+    releasePendingEscapeListener = undefined;
+  }
+  function clearPendingShow() {
     clearTimeout(showTimer);
-    $4.set(hasPendingShow, true);
+    showTimer = undefined;
+    releasePendingEscape();
+  }
+  function handlePendingEscapeKeydown(event2) {
+    if (event2.key !== "Escape")
+      return;
+    clearPendingShow();
+  }
+  function registerPendingEscape() {
+    releasePendingEscape();
+    document.addEventListener("keydown", handlePendingEscapeKeydown, { capture: true });
+    releasePendingEscapeListener = () => {
+      document.removeEventListener("keydown", handlePendingEscapeKeydown, { capture: true });
+    };
+  }
+  function show() {
+    clearPendingShow();
+    registerPendingEscape();
     showTimer = setTimeout(() => {
       showTimer = undefined;
-      $4.set(hasPendingShow, false);
+      releasePendingEscape();
       $4.set(visible, true);
     }, 100);
   }
   function hide3() {
-    clearTimeout(showTimer);
-    showTimer = undefined;
-    $4.set(hasPendingShow, false);
+    clearPendingShow();
     $4.set(visible, false);
   }
   function handleMouseEnter() {
@@ -2244,10 +2324,9 @@ function Tooltip($$anchor, $$props) {
   function handleFocusOut() {
     hide3();
   }
-  function handleKeydown(event2) {
-    if (event2.key === "Escape") {
-      hide3();
-    }
+  function handleEscape(event2 = undefined) {
+    hide3();
+    event2?.preventDefault();
   }
   function isFocusableCandidate(element) {
     if (element.matches(":disabled"))
@@ -2308,13 +2387,15 @@ function Tooltip($$anchor, $$props) {
   });
   const isTooltipExposed = $4.derived(() => $4.get(visible) && anchoredOverlay.positionReady);
   $4.user_effect(() => {
-    if (!$4.get(visible) && !$4.get(hasPendingShow))
-      return;
-    document.addEventListener("keydown", handleKeydown);
     return () => {
-      document.removeEventListener("keydown", handleKeydown);
+      clearPendingShow();
     };
   });
+  $4.user_effect(() => {
+    if (!$4.get(visible))
+      return;
+    return pushEscapeHandler(handleEscape);
+  });
   var span = root2();
   var node = $4.child(span);
   $4.snippet(node, () => $$props.children);
@@ -2353,4 +2434,4 @@ export {
   Tooltip
 };
 
-//# debugId=0DFB82D4937E7A9564756E2164756E21
+//# debugId=39DD5C48E48BC54364756E2164756E21

package/dist/components/transfer-list/index.js

@@ -27,6 +27,7 @@ import"@lostgradient/cinder/transfer-list/styles";
 // src/components/transfer-list/transfer-list.svelte
 import"svelte/internal/disclose-version";
 import * as $2 from "svelte/internal/client";
+import { tick } from "svelte";
 import { SvelteSet } from "svelte/reactivity";
 
 // src/utilities/class-names.ts
@@ -135,13 +136,16 @@ function Transfer_list($$anchor, $$props) {
     "value",
     "leftLabel",
     "rightLabel",
-    "onChange",
+    "onchange",
     "class"
   ]);
   let leftSelectedIds = $2.state($2.proxy([]));
   let rightSelectedIds = $2.state($2.proxy([]));
   let leftActiveId = $2.state(null);
   let rightActiveId = $2.state(null);
+  let focusedSide = $2.state(null);
+  let leftListElement = $2.state(undefined);
+  let rightListElement = $2.state(undefined);
   const announcer = useAnnouncer({ clearDelay: 5000 });
   const uniqueItems = $2.derived(() => {
     const seenIds = new SvelteSet;
@@ -226,37 +230,50 @@ function Transfer_list($$anchor, $$props) {
   function commitValue(nextValue, announcement) {
     const dedupedKnownValue = [...new Set(nextValue)].filter((id) => $2.get(itemById).has(id));
     value(dedupedKnownValue);
-    $$props.onChange?.(dedupedKnownValue);
+    $$props.onchange?.(dedupedKnownValue);
     announcer.announce(announcement);
   }
   function pluralize(count) {
     return count === 1 ? "item" : "items";
   }
-  function moveSelectedRight() {
+  function focusList(side) {
+    const listElement = side === "left" ? $2.get(leftListElement) : $2.get(rightListElement);
+    listElement?.focus();
+    $2.set(focusedSide, side, true);
+  }
+  async function moveSelectedRight() {
     if ($2.get(movableLeftSelectedIds).length === 0)
       return;
     commitValue([...$2.get(knownValue), ...$2.get(movableLeftSelectedIds)], `${$2.get(movableLeftSelectedIds).length} ${pluralize($2.get(movableLeftSelectedIds).length)} moved to ${rightLabel()}.`);
     $2.set(leftSelectedIds, [], true);
+    await tick();
+    focusList($2.get(leftItems).some((item) => canMoveItem("left", item)) ? "left" : "right");
   }
-  function moveAllRight() {
+  async function moveAllRight() {
     if ($2.get(movableLeftItemIds).length === 0)
       return;
     commitValue([...$2.get(knownValue), ...$2.get(movableLeftItemIds)], `${$2.get(movableLeftItemIds).length} ${pluralize($2.get(movableLeftItemIds).length)} moved to ${rightLabel()}.`);
     $2.set(leftSelectedIds, [], true);
+    await tick();
+    focusList("right");
   }
-  function moveSelectedLeft() {
+  async function moveSelectedLeft() {
     if ($2.get(movableRightSelectedIds).length === 0)
       return;
     const removing = new Set($2.get(movableRightSelectedIds));
     commitValue($2.get(knownValue).filter((id) => !removing.has(id)), `${$2.get(movableRightSelectedIds).length} ${pluralize($2.get(movableRightSelectedIds).length)} moved to ${leftLabel()}.`);
     $2.set(rightSelectedIds, [], true);
+    await tick();
+    focusList($2.get(rightItems).length > 0 ? "right" : "left");
   }
-  function moveAllLeft() {
+  async function moveAllLeft() {
     if ($2.get(movableRightItemIds).length === 0)
       return;
     const removing = new Set($2.get(movableRightItemIds));
     commitValue($2.get(knownValue).filter((id) => !removing.has(id)), `${$2.get(movableRightItemIds).length} ${pluralize($2.get(movableRightItemIds).length)} moved to ${leftLabel()}.`);
     $2.set(rightSelectedIds, [], true);
+    await tick();
+    focusList("left");
   }
   function toggleId(side, id) {
     const item = $2.get(itemById).get(id);
@@ -298,12 +315,21 @@ function Transfer_list($$anchor, $$props) {
     handleOptionClick(side, item);
   }
   function handleListFocus(side) {
+    $2.set(focusedSide, side, true);
     if (side === "left") {
       $2.set(leftActiveId, $2.get(resolvedLeftActiveId), true);
     } else {
       $2.set(rightActiveId, $2.get(resolvedRightActiveId), true);
     }
   }
+  function handleListBlur(event2, side) {
+    const nextTarget = event2.relatedTarget instanceof Node ? event2.relatedTarget : null;
+    const currentTarget = event2.currentTarget instanceof HTMLElement ? event2.currentTarget : null;
+    if (currentTarget && nextTarget && currentTarget.contains(nextTarget))
+      return;
+    if ($2.get(focusedSide) === side)
+      $2.set(focusedSide, null);
+  }
   function handleListKeydown(event2, side) {
     const sideItems = side === "left" ? $2.get(leftItems) : $2.get(rightItems);
     const activeId = side === "left" ? $2.get(resolvedLeftActiveId) : $2.get(resolvedRightActiveId);
@@ -354,7 +380,7 @@ function Transfer_list($$anchor, $$props) {
       $2.set_attribute(li, "id", $0);
       $2.set_attribute(li, "aria-selected", $1);
       $2.set_attribute(li, "aria-disabled", $2.get(item).disabled ? "true" : undefined);
-      $2.set_attribute(li, "data-cinder-active", $2.get(resolvedLeftActiveId) === $2.get(item).id ? "true" : undefined);
+      $2.set_attribute(li, "data-cinder-active", $2.get(focusedSide) === "left" && $2.get(resolvedLeftActiveId) === $2.get(item).id ? "true" : undefined);
       $2.set_attribute(li, "data-cinder-transfer-list-item-id", $2.get(item).id);
       $2.set_text(text_1, $2.get(item).label);
     }, [
@@ -367,6 +393,7 @@ function Transfer_list($$anchor, $$props) {
     $2.append($$anchor2, li_1);
   });
   $2.reset(ul);
+  $2.bind_this(ul, ($$value) => $2.set(leftListElement, $$value), () => $2.get(leftListElement));
   $2.reset(section);
   var div_2 = $2.sibling(section, 2);
   var button = $2.child(div_2);
@@ -386,7 +413,7 @@ function Transfer_list($$anchor, $$props) {
     $2.template_effect(($0, $1) => {
       $2.set_attribute(li_2, "id", $0);
       $2.set_attribute(li_2, "aria-selected", $1);
-      $2.set_attribute(li_2, "data-cinder-active", $2.get(resolvedRightActiveId) === $2.get(item).id ? "true" : undefined);
+      $2.set_attribute(li_2, "data-cinder-active", $2.get(focusedSide) === "right" && $2.get(resolvedRightActiveId) === $2.get(item).id ? "true" : undefined);
       $2.set_attribute(li_2, "data-cinder-transfer-list-item-id", $2.get(item).id);
       $2.set_text(text_3, $2.get(item).label);
     }, [
@@ -399,6 +426,7 @@ function Transfer_list($$anchor, $$props) {
     $2.append($$anchor2, li_3);
   });
   $2.reset(ul_1);
+  $2.bind_this(ul_1, ($$value) => $2.set(rightListElement, $$value), () => $2.get(rightListElement));
   $2.reset(section_1);
   $2.reset(div_1);
   var div_3 = $2.sibling(div_1, 2);
@@ -410,7 +438,7 @@ function Transfer_list($$anchor, $$props) {
     $2.set_attribute(h3, "id", `${baseId}-left-label`);
     $2.set_text(text, leftLabel());
     $2.set_attribute(ul, "aria-labelledby", `${baseId}-left-label`);
-    $2.set_attribute(ul, "aria-activedescendant", $2.get(leftActiveOptionId));
+    $2.set_attribute(ul, "aria-activedescendant", $2.get(focusedSide) === "left" ? $2.get(leftActiveOptionId) : undefined);
     $2.set_attribute(button, "aria-label", `Move selected items to ${rightLabel()}`);
     button.disabled = $2.get(movableLeftSelectedIds).length === 0;
     $2.set_attribute(button_1, "aria-label", `Move all items to ${rightLabel()}`);
@@ -423,10 +451,11 @@ function Transfer_list($$anchor, $$props) {
     $2.set_attribute(h3_1, "id", `${baseId}-right-label`);
     $2.set_text(text_2, rightLabel());
     $2.set_attribute(ul_1, "aria-labelledby", `${baseId}-right-label`);
-    $2.set_attribute(ul_1, "aria-activedescendant", $2.get(rightActiveOptionId));
+    $2.set_attribute(ul_1, "aria-activedescendant", $2.get(focusedSide) === "right" ? $2.get(rightActiveOptionId) : undefined);
     $2.set_text(text_4, announcer.message);
   });
   $2.event("focus", ul, () => handleListFocus("left"));
+  $2.event("blur", ul, (event2) => handleListBlur(event2, "left"));
   $2.delegated("click", ul, (event2) => handleListClick(event2, "left"));
   $2.delegated("keydown", ul, (event2) => handleListKeydown(event2, "left"));
   $2.delegated("click", button, moveSelectedRight);
@@ -434,6 +463,7 @@ function Transfer_list($$anchor, $$props) {
   $2.delegated("click", button_2, moveSelectedLeft);
   $2.delegated("click", button_3, moveAllLeft);
   $2.event("focus", ul_1, () => handleListFocus("right"));
+  $2.event("blur", ul_1, (event2) => handleListBlur(event2, "right"));
   $2.delegated("click", ul_1, (event2) => handleListClick(event2, "right"));
   $2.delegated("keydown", ul_1, (event2) => handleListKeydown(event2, "right"));
   $2.append($$anchor, div);
@@ -448,4 +478,4 @@ export {
   Transfer_list as TransferList
 };
 
-//# debugId=96190F3DD9CA539464756E2164756E21
+//# debugId=A4BBFF45EF9B1C9664756E2164756E21

package/dist/components/transfer-list/transfer-list.css

@@ -42,6 +42,17 @@
     box-shadow: var(--_cinder-focus-ring-shadow);
   }
 
+  @media (forced-colors: active) {
+    .cinder-transfer-list__list:focus-visible {
+      outline: var(--cinder-ring-width) solid ButtonText;
+      /* Negative offset because __list has overflow:auto — a positive offset
+         would be clipped by the scrolling container and the ring can disappear.
+         An inset ring always paints inside the box regardless of overflow. */
+      outline-offset: calc(-1 * var(--cinder-ring-width));
+      box-shadow: none;
+    }
+  }
+
   .cinder-transfer-list__option {
     padding: var(--cinder-space-2) var(--cinder-space-3);
     border-radius: var(--cinder-radius-sm);
@@ -101,6 +112,17 @@
     box-shadow: var(--_cinder-focus-ring-shadow);
   }
 
+  @media (forced-colors: active) {
+    .cinder-transfer-list__control:focus-visible {
+      outline: var(--cinder-ring-width) solid ButtonText;
+      /* 3px separates the outline from ButtonBorder (which renders in forced-colors
+         on all bordered controls and shares the ButtonText color family in HCM);
+         at 2px the ring and border can visually merge. */
+      outline-offset: 3px;
+      box-shadow: none;
+    }
+  }
+
   @container cinder-transfer-list (max-width: 42rem) {
     .cinder-transfer-list__layout {
       grid-template-columns: minmax(0, 1fr);

package/dist/components/transfer-list/transfer-list.schema.js

@@ -76,7 +76,7 @@ var schema = {
   metadata: {
     unsupportedProps: [
       {
-        name: "onChange",
+        name: "onchange",
         reason: "function-or-snippet",
         description: "Called with the next right-side value after a transfer."
       }
@@ -88,4 +88,4 @@ export {
   transfer_list_schema_default as default
 };
 
-//# debugId=0F56517CF19CF6AE64756E2164756E21
+//# debugId=AC244F95908E5D0564756E2164756E21

package/dist/components/transfer-list/transfer-list.types.d.ts

@@ -11,7 +11,7 @@ export type TransferListItem = {
     disabled?: boolean;
 };
 /** Props for the TransferList component. */
-export type TransferListProps = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'class'> & {
+export type TransferListProps = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'class' | 'onchange'> & {
     /** Full item pool. Item IDs must be unique; duplicate IDs after the first are ignored. The component never mutates this array. */
     items: TransferListItem[];
     /** Unique IDs currently assigned to the right-side selected list. Supports `bind:value`. Unknown IDs are ignored and dropped on the next transfer. */
@@ -27,7 +27,7 @@ export type TransferListProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'
      */
     rightLabel?: string;
     /** Called with the next right-side value after a transfer. */
-    onChange?: (value: string[]) => void;
+    onchange?: (value: string[]) => void;
     /** Custom class merged with `.cinder-transfer-list`. */
     class?: string;
 };