@lostgradient/cinder 0.2.0 → 0.4.0

package/dist/components/tooltip/tooltip.css

@@ -23,8 +23,17 @@
     padding: var(--cinder-space-1-5) var(--cinder-space-2-5);
 
     border-radius: var(--cinder-radius-md);
-    background: var(--cinder-text);
-    color: var(--cinder-surface);
+    /* Dark-overlay in both themes.
+     * Light: --cinder-surface-inverse → --cinder-text (dark ink bg);
+     *        --cinder-text-inverse → --cinder-surface (near-white text).
+     * Dark:  --cinder-surface-inverse → --cinder-surface-raised (elevated dark
+     *        surface); --cinder-text-inverse → --cinder-text (near-white, ~8.3:1).
+     *        --cinder-border-inverse adds 1px strong border so tooltip separates
+     *        from the dark stage. Both arms render a dark overlay with legible
+     *        light text — no theme inversion occurs. */
+    background: var(--cinder-surface-inverse);
+    color: var(--cinder-text-inverse);
+    border: 1px solid var(--cinder-border-inverse);
     font-size: var(--cinder-text-xs);
     line-height: var(--cinder-leading-snug);
     white-space: nowrap;

package/dist/components/tooltip/tooltip.schema.js

@@ -1,34 +1,4 @@
-var __create = Object.create;
-var __getProtoOf = Object.getPrototypeOf;
 var __defProp = Object.defineProperty;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-function __accessProp(key) {
-  return this[key];
-}
-var __toESMCache_node;
-var __toESMCache_esm;
-var __toESM = (mod, isNodeMode, target) => {
-  var canCache = mod != null && typeof mod === "object";
-  if (canCache) {
-    var cache = isNodeMode ? __toESMCache_node ??= new WeakMap : __toESMCache_esm ??= new WeakMap;
-    var cached = cache.get(mod);
-    if (cached)
-      return cached;
-  }
-  target = mod != null ? __create(__getProtoOf(mod)) : {};
-  const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
-  for (let key of __getOwnPropNames(mod))
-    if (!__hasOwnProp.call(to, key))
-      __defProp(to, key, {
-        get: __accessProp.bind(mod, key),
-        enumerable: true
-      });
-  if (canCache)
-    cache.set(mod, to);
-  return to;
-};
-var __commonJS = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports);
 var __returnValue = (v) => v;
 function __exportSetter(name, newValue) {
   this[name] = __returnValue.bind(null, newValue);
@@ -57,17 +27,20 @@ var schema = {
   type: "object",
   properties: {
     text: {
-      type: "string"
+      type: "string",
+      description: "Text content rendered inside the tooltip."
     },
     placement: {
-      enum: ["top", "right", "bottom", "left"]
+      enum: ["top", "right", "bottom", "left"],
+      description: "Preferred side of the trigger on which the tooltip appears. Default `top`."
     },
     describe: {
       type: "boolean",
       description: "Whether to wire tooltip text to the trigger via aria-describedby."
     },
     class: {
-      type: "string"
+      type: "string",
+      description: "Additional class names merged with the component's root class."
     }
   },
   additionalProperties: false,
@@ -76,7 +49,9 @@ var schema = {
     unsupportedProps: [
       {
         name: "children",
-        reason: "function-or-snippet"
+        reason: "function-or-snippet",
+        required: true,
+        description: "The trigger element that the tooltip is anchored to."
       }
     ]
   }
@@ -86,4 +61,4 @@ export {
   tooltip_schema_default as default
 };
 
-//# debugId=A8DAADBA291FA72F64756E2164756E21
+//# debugId=F7EDD632F04D658E64756E2164756E21

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

@@ -1,10 +1,14 @@
 import type { Snippet } from 'svelte';
 export type TooltipPlacement = 'top' | 'right' | 'bottom' | 'left';
 export type TooltipProps = {
+    /** Text content rendered inside the tooltip. */
     text: string;
+    /** Preferred side of the trigger on which the tooltip appears. Default `top`. */
     placement?: TooltipPlacement;
     /** Whether to wire tooltip text to the trigger via aria-describedby. */
     describe?: boolean;
+    /** Additional class names merged with the component's root class. */
     class?: string;
+    /** The trigger element that the tooltip is anchored to. */
     children: Snippet;
 };

package/dist/components/tooltip/tooltip.variables.js

@@ -1,34 +1,4 @@
-var __create = Object.create;
-var __getProtoOf = Object.getPrototypeOf;
 var __defProp = Object.defineProperty;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-function __accessProp(key) {
-  return this[key];
-}
-var __toESMCache_node;
-var __toESMCache_esm;
-var __toESM = (mod, isNodeMode, target) => {
-  var canCache = mod != null && typeof mod === "object";
-  if (canCache) {
-    var cache = isNodeMode ? __toESMCache_node ??= new WeakMap : __toESMCache_esm ??= new WeakMap;
-    var cached = cache.get(mod);
-    if (cached)
-      return cached;
-  }
-  target = mod != null ? __create(__getProtoOf(mod)) : {};
-  const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
-  for (let key of __getOwnPropNames(mod))
-    if (!__hasOwnProp.call(to, key))
-      __defProp(to, key, {
-        get: __accessProp.bind(mod, key),
-        enumerable: true
-      });
-  if (canCache)
-    cache.set(mod, to);
-  return to;
-};
-var __commonJS = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports);
 var __returnValue = (v) => v;
 function __exportSetter(name, newValue) {
   this[name] = __returnValue.bind(null, newValue);
@@ -58,4 +28,4 @@ export {
   tooltip_variables_default as default
 };
 
-//# debugId=566C58A90508EC7D64756E2164756E21
+//# debugId=9114322733DE481964756E2164756E21

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

@@ -0,0 +1,5 @@
+import './transfer-list.css';
+import TransferList from './transfer-list.svelte';
+export default TransferList;
+export type { TransferListItem, TransferListProps, TransferListSchemaProps, } from './transfer-list.types.ts';
+export { TransferList };

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

@@ -0,0 +1,481 @@
+var __defProp = Object.defineProperty;
+var __returnValue = (v) => v;
+function __exportSetter(name, newValue) {
+  this[name] = __returnValue.bind(null, newValue);
+}
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, {
+      get: all[name],
+      enumerable: true,
+      configurable: true,
+      set: __exportSetter.bind(all, name)
+    });
+};
+var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined")
+    return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+// src/components/transfer-list/index.ts
+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
+function classNames(...parts) {
+  return parts.filter((part) => typeof part === "string" && part.length > 0).join(" ");
+}
+
+// src/utilities/use-announcer.svelte.ts
+import * as $ from "svelte/internal/client";
+function useAnnouncer(options) {
+  const { clearDelay = 1000, debounceMs = 0 } = options ?? {};
+  let message = $.state("");
+  let debounceTimeout = null;
+  let setMessageTimeout = null;
+  let autoClearTimeout = null;
+  function setMessage(text) {
+    if (setMessageTimeout) {
+      globalThis.clearTimeout(setMessageTimeout);
+      setMessageTimeout = null;
+    }
+    if (autoClearTimeout) {
+      globalThis.clearTimeout(autoClearTimeout);
+      autoClearTimeout = null;
+    }
+    $.set(message, "");
+    setMessageTimeout = globalThis.setTimeout(() => {
+      setMessageTimeout = null;
+      $.set(message, text, true);
+      autoClearTimeout = globalThis.setTimeout(() => {
+        $.set(message, "");
+        autoClearTimeout = null;
+      }, clearDelay);
+    }, 0);
+  }
+  function announce(text) {
+    if (debounceMs > 0) {
+      if (debounceTimeout) {
+        globalThis.clearTimeout(debounceTimeout);
+      }
+      debounceTimeout = globalThis.setTimeout(() => {
+        debounceTimeout = null;
+        setMessage(text);
+      }, debounceMs);
+    } else {
+      setMessage(text);
+    }
+  }
+  function clear() {
+    if (debounceTimeout) {
+      globalThis.clearTimeout(debounceTimeout);
+      debounceTimeout = null;
+    }
+    if (setMessageTimeout) {
+      globalThis.clearTimeout(setMessageTimeout);
+      setMessageTimeout = null;
+    }
+    if (autoClearTimeout) {
+      globalThis.clearTimeout(autoClearTimeout);
+      autoClearTimeout = null;
+    }
+    $.set(message, "");
+  }
+  $.user_effect(() => {
+    return () => {
+      if (debounceTimeout) {
+        globalThis.clearTimeout(debounceTimeout);
+        debounceTimeout = null;
+      }
+      if (setMessageTimeout) {
+        globalThis.clearTimeout(setMessageTimeout);
+        setMessageTimeout = null;
+      }
+      if (autoClearTimeout) {
+        globalThis.clearTimeout(autoClearTimeout);
+        autoClearTimeout = null;
+      }
+    };
+  });
+  function destroy() {
+    clear();
+  }
+  return {
+    get message() {
+      return $.get(message);
+    },
+    announce,
+    clear,
+    destroy
+  };
+}
+
+// src/components/transfer-list/transfer-list.svelte
+var root_1 = $2.from_html(`<li class="cinder-transfer-list__option" role="option"> </li>`);
+var root_2 = $2.from_html(`<li class="cinder-transfer-list__empty" role="presentation">No available items</li>`);
+var root_3 = $2.from_html(`<li class="cinder-transfer-list__option" role="option"> </li>`);
+var root_4 = $2.from_html(`<li class="cinder-transfer-list__empty" role="presentation">No selected items</li>`);
+var root = $2.from_html(`<div><div class="cinder-transfer-list__layout"><section class="cinder-transfer-list__panel"><h3 class="cinder-transfer-list__label"> </h3> <ul class="cinder-transfer-list__list" role="listbox" aria-multiselectable="true" tabindex="0"></ul></section> <div class="cinder-transfer-list__controls" role="group" aria-label="Transfer controls"><button type="button" class="cinder-transfer-list__control">Add</button> <button type="button" class="cinder-transfer-list__control">Add all</button> <button type="button" class="cinder-transfer-list__control">Remove</button> <button type="button" class="cinder-transfer-list__control">Remove all</button></div> <section class="cinder-transfer-list__panel"><h3 class="cinder-transfer-list__label"> </h3> <ul class="cinder-transfer-list__list" role="listbox" aria-multiselectable="true" tabindex="0"></ul></section></div> <div role="alert" aria-atomic="true" class="cinder-sr-only"> </div></div>`);
+function Transfer_list($$anchor, $$props) {
+  const baseId = $2.props_id();
+  $2.push($$props, true);
+  let value = $2.prop($$props, "value", 31, () => $2.proxy([])), leftLabel = $2.prop($$props, "leftLabel", 3, "Available"), rightLabel = $2.prop($$props, "rightLabel", 3, "Selected"), rest = $2.rest_props($$props, [
+    "$$slots",
+    "$$events",
+    "$$legacy",
+    "items",
+    "value",
+    "leftLabel",
+    "rightLabel",
+    "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;
+    return $$props.items.filter((item) => {
+      if (seenIds.has(item.id))
+        return false;
+      seenIds.add(item.id);
+      return true;
+    });
+  });
+  const itemById = $2.derived(() => new Map($2.get(uniqueItems).map((item) => [item.id, item])));
+  const knownValue = $2.derived(() => {
+    const seenIds = new SvelteSet;
+    return value().filter((id) => {
+      if (!$2.get(itemById).has(id) || seenIds.has(id))
+        return false;
+      seenIds.add(id);
+      return true;
+    });
+  });
+  const rightIdSet = $2.derived(() => new Set($2.get(knownValue)));
+  const leftItems = $2.derived(() => $2.get(uniqueItems).filter((item) => !$2.get(rightIdSet).has(item.id)));
+  const rightItems = $2.derived(() => $2.get(knownValue).flatMap((id) => {
+    const item = $2.get(itemById).get(id);
+    return item ? [item] : [];
+  }));
+  const leftItemIdSet = $2.derived(() => new Set($2.get(leftItems).map((item) => item.id)));
+  const rightItemIdSet = $2.derived(() => new Set($2.get(rightItems).map((item) => item.id)));
+  const leftSelectedSet = $2.derived(() => new Set($2.get(leftSelectedIds)));
+  const rightSelectedSet = $2.derived(() => new Set($2.get(rightSelectedIds)));
+  function canMoveItem(side, item) {
+    return side === "right" || !item.disabled;
+  }
+  const movableLeftSelectedIds = $2.derived(() => $2.get(leftSelectedIds).filter((id) => {
+    const item = $2.get(itemById).get(id);
+    return item !== undefined && canMoveItem("left", item) && !$2.get(rightIdSet).has(id);
+  }));
+  const movableRightSelectedIds = $2.derived(() => $2.get(rightSelectedIds).filter((id) => {
+    const item = $2.get(itemById).get(id);
+    return item !== undefined && canMoveItem("right", item) && $2.get(rightIdSet).has(id);
+  }));
+  const movableLeftItemIds = $2.derived(() => $2.get(leftItems).filter((item) => canMoveItem("left", item)).map((item) => item.id));
+  const movableRightItemIds = $2.derived(() => $2.get(rightItems).map((item) => item.id));
+  function optionId(side, index) {
+    return `${baseId}-${side}-option-${index}`;
+  }
+  function getEnabledItems(side, sideItems) {
+    return sideItems.filter((item) => canMoveItem(side, item));
+  }
+  function resolveActiveId(side, sideItems, currentId) {
+    const enabled = getEnabledItems(side, sideItems);
+    if (enabled.length === 0)
+      return null;
+    if (currentId && enabled.some((item) => item.id === currentId))
+      return currentId;
+    return enabled[0]?.id ?? null;
+  }
+  const resolvedLeftActiveId = $2.derived(() => resolveActiveId("left", $2.get(leftItems), $2.get(leftActiveId)));
+  const resolvedRightActiveId = $2.derived(() => resolveActiveId("right", $2.get(rightItems), $2.get(rightActiveId)));
+  $2.user_effect(() => {
+    const nextLeftSelectedIds = $2.get(leftSelectedIds).filter((id) => $2.get(leftItemIdSet).has(id));
+    const nextRightSelectedIds = $2.get(rightSelectedIds).filter((id) => $2.get(rightItemIdSet).has(id));
+    if (nextLeftSelectedIds.length !== $2.get(leftSelectedIds).length) {
+      $2.set(leftSelectedIds, nextLeftSelectedIds, true);
+    }
+    if (nextRightSelectedIds.length !== $2.get(rightSelectedIds).length) {
+      $2.set(rightSelectedIds, nextRightSelectedIds, true);
+    }
+  });
+  const leftActiveOptionId = $2.derived(() => {
+    if (!$2.get(resolvedLeftActiveId))
+      return;
+    const index = $2.get(leftItems).findIndex((item) => item.id === $2.get(resolvedLeftActiveId));
+    return index === -1 ? undefined : optionId("left", index);
+  });
+  const rightActiveOptionId = $2.derived(() => {
+    if (!$2.get(resolvedRightActiveId))
+      return;
+    const index = $2.get(rightItems).findIndex((item) => item.id === $2.get(resolvedRightActiveId));
+    return index === -1 ? undefined : optionId("right", index);
+  });
+  function commitValue(nextValue, announcement) {
+    const dedupedKnownValue = [...new Set(nextValue)].filter((id) => $2.get(itemById).has(id));
+    value(dedupedKnownValue);
+    $$props.onchange?.(dedupedKnownValue);
+    announcer.announce(announcement);
+  }
+  function pluralize(count) {
+    return count === 1 ? "item" : "items";
+  }
+  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");
+  }
+  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");
+  }
+  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");
+  }
+  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);
+    if (!item || !canMoveItem(side, item))
+      return;
+    if (side === "left") {
+      $2.set(leftSelectedIds, $2.get(leftSelectedSet).has(id) ? $2.get(leftSelectedIds).filter((selectedId) => selectedId !== id) : [...$2.get(leftSelectedIds), id], true);
+      return;
+    }
+    $2.set(rightSelectedIds, $2.get(rightSelectedSet).has(id) ? $2.get(rightSelectedIds).filter((selectedId) => selectedId !== id) : [...$2.get(rightSelectedIds), id], true);
+  }
+  function setActiveId(side, id) {
+    if (side === "left")
+      $2.set(leftActiveId, id, true);
+    else
+      $2.set(rightActiveId, id, true);
+  }
+  function handleOptionClick(side, item) {
+    if (!canMoveItem(side, item))
+      return;
+    setActiveId(side, item.id);
+    toggleId(side, item.id);
+  }
+  function handleListClick(event2, side) {
+    const target = event2.target instanceof Element ? event2.target : null;
+    const currentTarget = event2.currentTarget instanceof HTMLElement ? event2.currentTarget : null;
+    if (!target || !currentTarget)
+      return;
+    const optionElement = target.closest("[data-cinder-transfer-list-item-id]");
+    if (!optionElement || !currentTarget.contains(optionElement))
+      return;
+    const id = optionElement.getAttribute("data-cinder-transfer-list-item-id");
+    if (!id)
+      return;
+    const item = $2.get(itemById).get(id);
+    if (!item)
+      return;
+    currentTarget.focus();
+    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);
+    const enabledItems = getEnabledItems(side, sideItems);
+    if (enabledItems.length === 0 || !activeId)
+      return;
+    const activeIndex = enabledItems.findIndex((item) => item.id === activeId);
+    if (activeIndex === -1)
+      return;
+    if (event2.key === "ArrowDown" || event2.key === "ArrowUp") {
+      event2.preventDefault();
+      const direction = event2.key === "ArrowDown" ? 1 : -1;
+      const nextIndex = (activeIndex + direction + enabledItems.length) % enabledItems.length;
+      setActiveId(side, enabledItems[nextIndex]?.id ?? null);
+      return;
+    }
+    if (event2.key === "Home" || event2.key === "End") {
+      event2.preventDefault();
+      setActiveId(side, event2.key === "Home" ? enabledItems[0]?.id ?? null : enabledItems[enabledItems.length - 1]?.id ?? null);
+      return;
+    }
+    if (event2.key === " ") {
+      event2.preventDefault();
+      toggleId(side, activeId);
+      return;
+    }
+    if (event2.key === "Enter") {
+      event2.preventDefault();
+      if (side === "left")
+        moveSelectedRight();
+      else
+        moveSelectedLeft();
+    }
+  }
+  var div = root();
+  $2.attribute_effect(div, ($0) => ({ ...rest, class: $0 }), [() => classNames("cinder-transfer-list", $$props.class)]);
+  var div_1 = $2.child(div);
+  var section = $2.child(div_1);
+  var h3 = $2.child(section);
+  var text = $2.child(h3, true);
+  $2.reset(h3);
+  var ul = $2.sibling(h3, 2);
+  $2.each(ul, 23, () => $2.get(leftItems), (item) => item.id, ($$anchor2, item, index) => {
+    var li = root_1();
+    var text_1 = $2.child(li, true);
+    $2.reset(li);
+    $2.template_effect(($0, $1) => {
+      $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(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);
+    }, [
+      () => optionId("left", $2.get(index)),
+      () => $2.get(leftSelectedSet).has($2.get(item).id) ? "true" : "false"
+    ]);
+    $2.append($$anchor2, li);
+  }, ($$anchor2) => {
+    var li_1 = root_2();
+    $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);
+  var button_1 = $2.sibling(button, 2);
+  var button_2 = $2.sibling(button_1, 2);
+  var button_3 = $2.sibling(button_2, 2);
+  $2.reset(div_2);
+  var section_1 = $2.sibling(div_2, 2);
+  var h3_1 = $2.child(section_1);
+  var text_2 = $2.child(h3_1, true);
+  $2.reset(h3_1);
+  var ul_1 = $2.sibling(h3_1, 2);
+  $2.each(ul_1, 23, () => $2.get(rightItems), (item) => item.id, ($$anchor2, item, index) => {
+    var li_2 = root_3();
+    var text_3 = $2.child(li_2, true);
+    $2.reset(li_2);
+    $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(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);
+    }, [
+      () => optionId("right", $2.get(index)),
+      () => $2.get(rightSelectedSet).has($2.get(item).id) ? "true" : "false"
+    ]);
+    $2.append($$anchor2, li_2);
+  }, ($$anchor2) => {
+    var li_3 = root_4();
+    $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);
+  var text_4 = $2.child(div_3, true);
+  $2.reset(div_3);
+  $2.reset(div);
+  $2.template_effect(() => {
+    $2.set_attribute(section, "aria-labelledby", `${baseId}-left-label`);
+    $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(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()}`);
+    button_1.disabled = $2.get(movableLeftItemIds).length === 0;
+    $2.set_attribute(button_2, "aria-label", `Move selected items to ${leftLabel()}`);
+    button_2.disabled = $2.get(movableRightSelectedIds).length === 0;
+    $2.set_attribute(button_3, "aria-label", `Move all items to ${leftLabel()}`);
+    button_3.disabled = $2.get(movableRightItemIds).length === 0;
+    $2.set_attribute(section_1, "aria-labelledby", `${baseId}-right-label`);
+    $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(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);
+  $2.delegated("click", button_1, moveAllRight);
+  $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);
+  $2.pop();
+}
+$2.delegate(["click", "keydown"]);
+
+// src/components/transfer-list/index.ts
+var transfer_list_default = Transfer_list;
+export {
+  transfer_list_default as default,
+  Transfer_list as TransferList
+};
+
+//# debugId=A4BBFF45EF9B1C9664756E2164756E21