@lostgradient/cinder 0.3.0 → 0.4.1

package/dist/server/index.server-att810se.js

@@ -0,0 +1,362 @@
+import {
+  getFocusableIndex,
+  handleRovingKeydown
+} from "./index.server-0a8m173j.js";
+import {
+  useMutationObserver
+} from "./index.server-p045dgmk.js";
+import {
+  devWarn
+} from "./index.server-nj8mebze.js";
+import {
+  classNames
+} from "./index.server-z7nvkz8v.js";
+
+// src/components/toolbar/toolbar.svelte
+import * as $ from "svelte/internal/server";
+import { untrack } from "svelte";
+import { on } from "svelte/events";
+function Toolbar($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    const focusableSelector = [
+      "button",
+      "a[href]",
+      "input",
+      "select",
+      "textarea",
+      "[tabindex]",
+      "[data-cinder-toolbar-item]"
+    ].join(",");
+    let {
+      class: className,
+      orientation = "horizontal",
+      children,
+      onkeydown: consumerOnKeyDown,
+      onfocusin: consumerOnFocusIn,
+      role: _role,
+      "aria-orientation": _ariaOrientation,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      $$slots,
+      $$events,
+      ...rest
+    } = $$props;
+    let rootElement = null;
+    let toolbarItems = [];
+    let activeItem = null;
+    const originalTabIndexes = new WeakMap;
+    let previousManagedItems = new Set;
+    let lastWarnedNameSource = "";
+    function isHTMLElement(value) {
+      return value instanceof HTMLElement;
+    }
+    function isHiddenInput(element) {
+      return element instanceof HTMLInputElement && element.type === "hidden";
+    }
+    function isEditableTarget(element) {
+      if (element instanceof HTMLTextAreaElement)
+        return true;
+      if (element instanceof HTMLInputElement) {
+        return ![
+          "button",
+          "checkbox",
+          "file",
+          "hidden",
+          "image",
+          "radio",
+          "range",
+          "reset",
+          "submit"
+        ].includes(element.type);
+      }
+      return element.isContentEditable;
+    }
+    function isSpinButtonLike(element) {
+      if (element.getAttribute("role") === "spinbutton")
+        return true;
+      if (!(element instanceof HTMLInputElement))
+        return false;
+      return element.closest(".cinder-number-input") !== null;
+    }
+    function hasCollapsedSelectionAtBoundary(element, direction) {
+      if (!(element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement))
+        return false;
+      if (typeof element.selectionStart !== "number" || typeof element.selectionEnd !== "number")
+        return false;
+      if (element.selectionStart !== element.selectionEnd)
+        return false;
+      const valueLength = element.value.length;
+      return direction === -1 ? element.selectionStart === 0 : element.selectionEnd === valueLength;
+    }
+    function placeCaret(element, placement) {
+      if (!(element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement))
+        return;
+      if (typeof element.setSelectionRange !== "function")
+        return;
+      const position = placement === "end" ? element.value.length : 0;
+      element.setSelectionRange(position, position);
+    }
+    function isCssHidden(element) {
+      const elementStyle = getComputedStyle(element);
+      if (elementStyle.display === "none" || elementStyle.visibility === "hidden")
+        return true;
+      let current = element.parentElement;
+      while (current) {
+        if (getComputedStyle(current).display === "none")
+          return true;
+        current = current.parentElement;
+      }
+      return false;
+    }
+    function isDisabledByFieldset(element) {
+      const disabledFieldset = element.closest("fieldset[disabled]");
+      if (!disabledFieldset)
+        return false;
+      const firstLegend = disabledFieldset.querySelector("legend");
+      return firstLegend ? !firstLegend.contains(element) : true;
+    }
+    function isEligibleToolbarItem(element) {
+      if (!rootElement || element === rootElement)
+        return false;
+      if (!rootElement.contains(element))
+        return false;
+      if (isHiddenInput(element))
+        return false;
+      if (element.hasAttribute("hidden"))
+        return false;
+      if (element.getAttribute("aria-hidden") === "true")
+        return false;
+      if (element.getAttribute("aria-disabled") === "true")
+        return false;
+      if ("disabled" in element && typeof element.disabled === "boolean") {
+        if (element.disabled)
+          return false;
+      }
+      if (element.closest('[hidden],[aria-hidden="true"],[data-cinder-toolbar-exclude]'))
+        return false;
+      if (element.closest("[inert]"))
+        return false;
+      if (isDisabledByFieldset(element))
+        return false;
+      if (isCssHidden(element))
+        return false;
+      const authoredTabIndex = element.getAttribute("tabindex");
+      if (authoredTabIndex === "-1" && !previousManagedItems.has(element) && !element.hasAttribute("data-cinder-toolbar-item")) {
+        return false;
+      }
+      return true;
+    }
+    function getToolbarItems() {
+      if (!rootElement)
+        return [];
+      return Array.from(rootElement.querySelectorAll(focusableSelector)).filter((element) => isEligibleToolbarItem(element));
+    }
+    function getActiveIndex(items, preferredItem) {
+      if (preferredItem) {
+        const preferredIndex = items.indexOf(preferredItem);
+        if (preferredIndex >= 0)
+          return preferredIndex;
+      }
+      return getFocusableIndex(-1, items.length);
+    }
+    function restoreDepartedItems(nextItems) {
+      const nextItemSet = new Set(nextItems);
+      for (const item of previousManagedItems) {
+        if (nextItemSet.has(item))
+          continue;
+        const original = originalTabIndexes.get(item);
+        if (original === null)
+          item.removeAttribute("tabindex");
+        else if (original !== undefined)
+          item.setAttribute("tabindex", original);
+        originalTabIndexes.delete(item);
+      }
+      previousManagedItems = nextItemSet;
+    }
+    function syncToolbarItems(preferredItem = activeItem) {
+      const items = getToolbarItems();
+      restoreDepartedItems(items);
+      if (items.length === 0) {
+        toolbarItems = [];
+        activeItem = null;
+        return;
+      }
+      for (const item of items) {
+        if (!originalTabIndexes.has(item)) {
+          originalTabIndexes.set(item, item.getAttribute("tabindex"));
+        }
+      }
+      const activeIndex = getActiveIndex(items, preferredItem);
+      const resolvedActiveItem = activeIndex >= 0 ? items[activeIndex] ?? null : null;
+      for (const [index, item] of items.entries()) {
+        const nextTabIndex = index === activeIndex ? 0 : -1;
+        if (item.tabIndex !== nextTabIndex) {
+          item.tabIndex = nextTabIndex;
+        }
+      }
+      toolbarItems = items;
+      activeItem = resolvedActiveItem;
+    }
+    function moveFocus(nextIndex, caretPlacement) {
+      const nextItem = toolbarItems[nextIndex];
+      if (!nextItem)
+        return;
+      activeItem = nextItem;
+      syncToolbarItems(nextItem);
+      nextItem.focus();
+      placeCaret(nextItem, caretPlacement);
+    }
+    function getCurrentToolbarIndex(target) {
+      return toolbarItems.indexOf(target);
+    }
+    function handleEditableEscape(target) {
+      if (!isEditableTarget(target))
+        return false;
+      const currentIndex = getCurrentToolbarIndex(target);
+      if (currentIndex < 0)
+        return false;
+      const nextIndex = currentIndex < toolbarItems.length - 1 ? currentIndex + 1 : currentIndex > 0 ? currentIndex - 1 : -1;
+      if (nextIndex < 0)
+        return false;
+      moveFocus(nextIndex, nextIndex > currentIndex ? "start" : "end");
+      return true;
+    }
+    function handleToolbarKeyDown(event) {
+      consumerOnKeyDown?.(event);
+      if (event.defaultPrevented)
+        return;
+      if (!isHTMLElement(event.target))
+        return;
+      const target = event.target.closest(focusableSelector);
+      if (!target || !toolbarItems.includes(target))
+        return;
+      const currentIndex = getCurrentToolbarIndex(target);
+      if (currentIndex < 0)
+        return;
+      const horizontal = orientation !== "vertical";
+      const targetIsEditable = isEditableTarget(target);
+      if (event.key === "Escape" && targetIsEditable) {
+        if (!handleEditableEscape(target))
+          return;
+        event.preventDefault();
+        event.stopPropagation();
+        return;
+      }
+      if ((event.key === "Home" || event.key === "End") && targetIsEditable) {
+        return;
+      }
+      if (horizontal && (event.key === "ArrowLeft" || event.key === "ArrowRight")) {
+        if (targetIsEditable && !hasCollapsedSelectionAtBoundary(target, event.key === "ArrowLeft" ? -1 : 1)) {
+          return;
+        }
+      }
+      if (!horizontal && (event.key === "ArrowUp" || event.key === "ArrowDown")) {
+        if (targetIsEditable || isSpinButtonLike(target))
+          return;
+      }
+      if (horizontal && (event.key === "ArrowUp" || event.key === "ArrowDown")) {
+        return;
+      }
+      if (!horizontal && (event.key === "ArrowLeft" || event.key === "ArrowRight")) {
+        return;
+      }
+      const nextIndex = handleRovingKeydown(event, currentIndex, toolbarItems.length, { horizontal, vertical: !horizontal });
+      if (nextIndex === null || nextIndex === currentIndex)
+        return;
+      event.preventDefault();
+      event.stopPropagation();
+      moveFocus(nextIndex, event.key === "ArrowLeft" || event.key === "ArrowUp" || event.key === "End" ? "end" : "start");
+    }
+    function handleToolbarFocusIn(event) {
+      consumerOnFocusIn?.(event);
+      if (!isHTMLElement(event.target))
+        return;
+      const target = event.target.closest(focusableSelector);
+      if (!target || !isEligibleToolbarItem(target))
+        return;
+      syncToolbarItems(target);
+    }
+    function resolveAccessibleNameSource() {
+      const inlineLabel = ariaLabel?.trim() ?? "";
+      const labelledBy = ariaLabelledBy?.trim() ?? "";
+      return inlineLabel || labelledBy;
+    }
+    function hasResolvedLabelledByText() {
+      if (!rootElement || !ariaLabelledBy)
+        return false;
+      const identifiers = ariaLabelledBy.split(/\s+/).map((value) => value.trim()).filter(Boolean);
+      if (identifiers.length === 0)
+        return false;
+      return identifiers.every((identifier) => {
+        const element = document.getElementById(identifier);
+        return element !== null && (element.textContent?.trim().length ?? 0) > 0;
+      });
+    }
+    function warnAboutAccessibleName() {
+      if (!rootElement)
+        return;
+      const warningKey = `${ariaLabel ?? ""}|${ariaLabelledBy ?? ""}`;
+      if (warningKey === lastWarnedNameSource)
+        return;
+      const inlineLabel = ariaLabel?.trim() ?? "";
+      if (inlineLabel.length > 0)
+        return;
+      if (ariaLabelledBy?.trim() && hasResolvedLabelledByText())
+        return;
+      lastWarnedNameSource = warningKey;
+      devWarn("[cinder/Toolbar] rendered without a resolvable accessible name. Pass a non-empty `aria-label` or `aria-labelledby` that points to non-empty text.");
+    }
+    function toolbarSetup(node) {
+      rootElement = node;
+      syncToolbarItems(untrack(() => activeItem));
+      const cleanupKeyboardListener = on(node, "keydown", handleToolbarKeyDown, { capture: true });
+      const cleanupFocusInListener = on(node, "focusin", handleToolbarFocusIn);
+      const detachMutationObserver = useMutationObserver(() => {
+        syncToolbarItems(activeItem);
+        warnAboutAccessibleName();
+      }, {
+        subtree: true,
+        childList: true,
+        attributes: true,
+        attributeFilter: [
+          "aria-disabled",
+          "aria-hidden",
+          "aria-label",
+          "aria-labelledby",
+          "class",
+          "data-cinder-toolbar-exclude",
+          "data-cinder-toolbar-item",
+          "disabled",
+          "hidden",
+          "inert",
+          "style",
+          "type"
+        ]
+      })(node);
+      warnAboutAccessibleName();
+      return () => {
+        cleanupKeyboardListener();
+        cleanupFocusInListener();
+        detachMutationObserver?.();
+        rootElement = null;
+        restoreDepartedItems([]);
+      };
+    }
+    $$renderer2.push(`<div${$.attributes({
+      ...rest,
+      role: "toolbar",
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      "aria-orientation": orientation === "vertical" ? "vertical" : undefined,
+      class: $.clsx(classNames("cinder-toolbar", className)),
+      "data-cinder-orientation": orientation,
+      "data-cinder-name-source": resolveAccessibleNameSource()
+    })}>`);
+    children($$renderer2);
+    $$renderer2.push(`<!----></div>`);
+  });
+}
+
+export { Toolbar };
+
+//# debugId=A96D67FE8021617F64756E2164756E21

package/dist/server/index.server-awaramqw.js

@@ -0,0 +1,277 @@
+import {
+  useAnnouncer
+} from "./index.server-gbzsb04q.js";
+import {
+  classNames
+} from "./index.server-z7nvkz8v.js";
+
+// src/components/transfer-list/transfer-list.svelte
+import * as $ from "svelte/internal/server";
+import { tick } from "svelte";
+import { SvelteSet } from "svelte/reactivity";
+function Transfer_list($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    const baseId = $.props_id($$renderer2);
+    let {
+      items,
+      value = [],
+      leftLabel = "Available",
+      rightLabel = "Selected",
+      onchange,
+      class: customClassName,
+      $$slots,
+      $$events,
+      ...rest
+    } = $$props;
+    let leftSelectedIds = [];
+    let rightSelectedIds = [];
+    let leftActiveId = null;
+    let rightActiveId = null;
+    let focusedSide = null;
+    let leftListElement = undefined;
+    let rightListElement = undefined;
+    const announcer = useAnnouncer({ clearDelay: 5000 });
+    const uniqueItems = $.derived(() => {
+      const seenIds = new SvelteSet;
+      return items.filter((item) => {
+        if (seenIds.has(item.id))
+          return false;
+        seenIds.add(item.id);
+        return true;
+      });
+    });
+    const itemById = $.derived(() => new Map(uniqueItems().map((item) => [item.id, item])));
+    const knownValue = $.derived(() => {
+      const seenIds = new SvelteSet;
+      return value.filter((id) => {
+        if (!itemById().has(id) || seenIds.has(id))
+          return false;
+        seenIds.add(id);
+        return true;
+      });
+    });
+    const rightIdSet = $.derived(() => new Set(knownValue()));
+    const leftItems = $.derived(() => uniqueItems().filter((item) => !rightIdSet().has(item.id)));
+    const rightItems = $.derived(() => knownValue().flatMap((id) => {
+      const item = itemById().get(id);
+      return item ? [item] : [];
+    }));
+    const leftItemIdSet = $.derived(() => new Set(leftItems().map((item) => item.id)));
+    const rightItemIdSet = $.derived(() => new Set(rightItems().map((item) => item.id)));
+    const leftSelectedSet = $.derived(() => new Set(leftSelectedIds));
+    const rightSelectedSet = $.derived(() => new Set(rightSelectedIds));
+    function canMoveItem(side, item) {
+      return side === "right" || !item.disabled;
+    }
+    const movableLeftSelectedIds = $.derived(() => leftSelectedIds.filter((id) => {
+      const item = itemById().get(id);
+      return item !== undefined && canMoveItem("left", item) && !rightIdSet().has(id);
+    }));
+    const movableRightSelectedIds = $.derived(() => rightSelectedIds.filter((id) => {
+      const item = itemById().get(id);
+      return item !== undefined && canMoveItem("right", item) && rightIdSet().has(id);
+    }));
+    const movableLeftItemIds = $.derived(() => leftItems().filter((item) => canMoveItem("left", item)).map((item) => item.id));
+    const movableRightItemIds = $.derived(() => 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 = $.derived(() => resolveActiveId("left", leftItems(), leftActiveId));
+    const resolvedRightActiveId = $.derived(() => resolveActiveId("right", rightItems(), rightActiveId));
+    const leftActiveOptionId = $.derived(() => {
+      if (!resolvedLeftActiveId())
+        return;
+      const index = leftItems().findIndex((item) => item.id === resolvedLeftActiveId());
+      return index === -1 ? undefined : optionId("left", index);
+    });
+    const rightActiveOptionId = $.derived(() => {
+      if (!resolvedRightActiveId())
+        return;
+      const index = rightItems().findIndex((item) => item.id === resolvedRightActiveId());
+      return index === -1 ? undefined : optionId("right", index);
+    });
+    function commitValue(nextValue, announcement) {
+      const dedupedKnownValue = [...new Set(nextValue)].filter((id) => itemById().has(id));
+      value = dedupedKnownValue;
+      onchange?.(dedupedKnownValue);
+      announcer.announce(announcement);
+    }
+    function pluralize(count) {
+      return count === 1 ? "item" : "items";
+    }
+    function focusList(side) {
+      const listElement = side === "left" ? leftListElement : rightListElement;
+      listElement?.focus();
+      focusedSide = side;
+    }
+    async function moveSelectedRight() {
+      if (movableLeftSelectedIds().length === 0)
+        return;
+      commitValue([...knownValue(), ...movableLeftSelectedIds()], `${movableLeftSelectedIds().length} ${pluralize(movableLeftSelectedIds().length)} moved to ${rightLabel}.`);
+      leftSelectedIds = [];
+      await tick();
+      focusList(leftItems().some((item) => canMoveItem("left", item)) ? "left" : "right");
+    }
+    async function moveAllRight() {
+      if (movableLeftItemIds().length === 0)
+        return;
+      commitValue([...knownValue(), ...movableLeftItemIds()], `${movableLeftItemIds().length} ${pluralize(movableLeftItemIds().length)} moved to ${rightLabel}.`);
+      leftSelectedIds = [];
+      await tick();
+      focusList("right");
+    }
+    async function moveSelectedLeft() {
+      if (movableRightSelectedIds().length === 0)
+        return;
+      const removing = new Set(movableRightSelectedIds());
+      commitValue(knownValue().filter((id) => !removing.has(id)), `${movableRightSelectedIds().length} ${pluralize(movableRightSelectedIds().length)} moved to ${leftLabel}.`);
+      rightSelectedIds = [];
+      await tick();
+      focusList(rightItems().length > 0 ? "right" : "left");
+    }
+    async function moveAllLeft() {
+      if (movableRightItemIds().length === 0)
+        return;
+      const removing = new Set(movableRightItemIds());
+      commitValue(knownValue().filter((id) => !removing.has(id)), `${movableRightItemIds().length} ${pluralize(movableRightItemIds().length)} moved to ${leftLabel}.`);
+      rightSelectedIds = [];
+      await tick();
+      focusList("left");
+    }
+    function toggleId(side, id) {
+      const item = itemById().get(id);
+      if (!item || !canMoveItem(side, item))
+        return;
+      if (side === "left") {
+        leftSelectedIds = leftSelectedSet().has(id) ? leftSelectedIds.filter((selectedId) => selectedId !== id) : [...leftSelectedIds, id];
+        return;
+      }
+      rightSelectedIds = rightSelectedSet().has(id) ? rightSelectedIds.filter((selectedId) => selectedId !== id) : [...rightSelectedIds, id];
+    }
+    function setActiveId(side, id) {
+      if (side === "left")
+        leftActiveId = id;
+      else
+        rightActiveId = id;
+    }
+    function handleOptionClick(side, item) {
+      if (!canMoveItem(side, item))
+        return;
+      setActiveId(side, item.id);
+      toggleId(side, item.id);
+    }
+    function handleListClick(event, side) {
+      const target = event.target instanceof Element ? event.target : null;
+      const currentTarget = event.currentTarget instanceof HTMLElement ? event.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 = itemById().get(id);
+      if (!item)
+        return;
+      currentTarget.focus();
+      handleOptionClick(side, item);
+    }
+    function handleListFocus(side) {
+      focusedSide = side;
+      if (side === "left") {
+        leftActiveId = resolvedLeftActiveId();
+      } else {
+        rightActiveId = resolvedRightActiveId();
+      }
+    }
+    function handleListBlur(event, side) {
+      const nextTarget = event.relatedTarget instanceof Node ? event.relatedTarget : null;
+      const currentTarget = event.currentTarget instanceof HTMLElement ? event.currentTarget : null;
+      if (currentTarget && nextTarget && currentTarget.contains(nextTarget))
+        return;
+      if (focusedSide === side)
+        focusedSide = null;
+    }
+    function handleListKeydown(event, side) {
+      const sideItems = side === "left" ? leftItems() : rightItems();
+      const activeId = side === "left" ? resolvedLeftActiveId() : 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 (event.key === "ArrowDown" || event.key === "ArrowUp") {
+        event.preventDefault();
+        const direction = event.key === "ArrowDown" ? 1 : -1;
+        const nextIndex = (activeIndex + direction + enabledItems.length) % enabledItems.length;
+        setActiveId(side, enabledItems[nextIndex]?.id ?? null);
+        return;
+      }
+      if (event.key === "Home" || event.key === "End") {
+        event.preventDefault();
+        setActiveId(side, event.key === "Home" ? enabledItems[0]?.id ?? null : enabledItems[enabledItems.length - 1]?.id ?? null);
+        return;
+      }
+      if (event.key === " ") {
+        event.preventDefault();
+        toggleId(side, activeId);
+        return;
+      }
+      if (event.key === "Enter") {
+        event.preventDefault();
+        if (side === "left")
+          moveSelectedRight();
+        else
+          moveSelectedLeft();
+      }
+    }
+    $$renderer2.push(`<div${$.attributes({
+      ...rest,
+      class: $.clsx(classNames("cinder-transfer-list", customClassName))
+    })}><div class="cinder-transfer-list__layout"><section class="cinder-transfer-list__panel"${$.attr("aria-labelledby", `${baseId}-left-label`)}><h3${$.attr("id", `${baseId}-left-label`)} class="cinder-transfer-list__label">${$.escape(leftLabel)}</h3> <ul class="cinder-transfer-list__list" role="listbox" aria-multiselectable="true"${$.attr("aria-labelledby", `${baseId}-left-label`)}${$.attr("aria-activedescendant", focusedSide === "left" ? leftActiveOptionId() : undefined)} tabindex="0">`);
+    const each_array = $.ensure_array_like(leftItems());
+    if (each_array.length !== 0) {
+      $$renderer2.push("<!--[-->");
+      for (let index = 0, $$length = each_array.length;index < $$length; index++) {
+        let item = each_array[index];
+        $$renderer2.push(`<li${$.attr("id", optionId("left", index))} class="cinder-transfer-list__option" role="option"${$.attr("aria-selected", leftSelectedSet().has(item.id) ? "true" : "false")}${$.attr("aria-disabled", item.disabled ? "true" : undefined)}${$.attr("data-cinder-active", focusedSide === "left" && resolvedLeftActiveId() === item.id ? "true" : undefined)}${$.attr("data-cinder-transfer-list-item-id", item.id)}>${$.escape(item.label)}</li>`);
+      }
+    } else {
+      $$renderer2.push("<!--[!-->");
+      $$renderer2.push(`<li class="cinder-transfer-list__empty" role="presentation">No available items</li>`);
+    }
+    $$renderer2.push(`<!--]--></ul></section> <div class="cinder-transfer-list__controls" role="group" aria-label="Transfer controls"><button type="button" class="cinder-transfer-list__control"${$.attr("aria-label", `Move selected items to ${rightLabel}`)}${$.attr("disabled", movableLeftSelectedIds().length === 0, true)}>Add</button> <button type="button" class="cinder-transfer-list__control"${$.attr("aria-label", `Move all items to ${rightLabel}`)}${$.attr("disabled", movableLeftItemIds().length === 0, true)}>Add all</button> <button type="button" class="cinder-transfer-list__control"${$.attr("aria-label", `Move selected items to ${leftLabel}`)}${$.attr("disabled", movableRightSelectedIds().length === 0, true)}>Remove</button> <button type="button" class="cinder-transfer-list__control"${$.attr("aria-label", `Move all items to ${leftLabel}`)}${$.attr("disabled", movableRightItemIds().length === 0, true)}>Remove all</button></div> <section class="cinder-transfer-list__panel"${$.attr("aria-labelledby", `${baseId}-right-label`)}><h3${$.attr("id", `${baseId}-right-label`)} class="cinder-transfer-list__label">${$.escape(rightLabel)}</h3> <ul class="cinder-transfer-list__list" role="listbox" aria-multiselectable="true"${$.attr("aria-labelledby", `${baseId}-right-label`)}${$.attr("aria-activedescendant", focusedSide === "right" ? rightActiveOptionId() : undefined)} tabindex="0">`);
+    const each_array_1 = $.ensure_array_like(rightItems());
+    if (each_array_1.length !== 0) {
+      $$renderer2.push("<!--[-->");
+      for (let index = 0, $$length = each_array_1.length;index < $$length; index++) {
+        let item = each_array_1[index];
+        $$renderer2.push(`<li${$.attr("id", optionId("right", index))} class="cinder-transfer-list__option" role="option"${$.attr("aria-selected", rightSelectedSet().has(item.id) ? "true" : "false")}${$.attr("data-cinder-active", focusedSide === "right" && resolvedRightActiveId() === item.id ? "true" : undefined)}${$.attr("data-cinder-transfer-list-item-id", item.id)}>${$.escape(item.label)}</li>`);
+      }
+    } else {
+      $$renderer2.push("<!--[!-->");
+      $$renderer2.push(`<li class="cinder-transfer-list__empty" role="presentation">No selected items</li>`);
+    }
+    $$renderer2.push(`<!--]--></ul></section></div> <div role="alert" aria-atomic="true" class="cinder-sr-only">${$.escape(announcer.message)}</div></div>`);
+    $.bind_props($$props, { value });
+  });
+}
+
+// src/components/transfer-list/index.ts
+var transfer_list_default = Transfer_list;
+export { Transfer_list, transfer_list_default };
+
+//# debugId=2BC63BAAE384005964756E2164756E21

package/dist/server/index.server-axzcx0e9.js

@@ -0,0 +1,9 @@
+import {
+  Dropdown_trigger
+} from "./index.server-77gpgvab.js";
+
+// src/components/dropdown-trigger/index.ts
+var dropdown_trigger_default = Dropdown_trigger;
+export { dropdown_trigger_default };
+
+//# debugId=8C146FBE849836CE64756E2164756E21