@lostgradient/cinder 0.4.0 → 0.5.0

package/dist/components/multi-select/index.js

@@ -0,0 +1,827 @@
+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);
+}
+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/multi-select/index.ts
+import"@lostgradient/cinder/multi-select/styles";
+
+// src/components/multi-select/multi-select.svelte
+import"svelte/internal/disclose-version";
+import * as $ from "svelte/internal/client";
+import { tick, untrack } from "svelte";
+
+// 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/_internal/field-control.ts
+function describeId(fieldId, hasDescription) {
+  return hasDescription ? `${fieldId}-description` : undefined;
+}
+function errorId(fieldId, hasError) {
+  return hasError ? `${fieldId}-error` : undefined;
+}
+function composeDescribedBy(...ids) {
+  const filtered = ids.flatMap((id) => typeof id === "string" ? id.trim().split(/\s+/).filter(Boolean) : []);
+  const unique = Array.from(new Set(filtered));
+  return unique.length > 0 ? unique.join(" ") : undefined;
+}
+function ariaInvalid(hasError) {
+  return hasError ? "true" : undefined;
+}
+function resolveFieldControl(input) {
+  const resolvedId = input.id ?? input.context?.controlId ?? input.generatedId;
+  const defaultDescriptionId = describeId(resolvedId, input.hasDescription ?? false);
+  const defaultErrorId = errorId(resolvedId, input.hasError ?? false);
+  const ownDescriptionId = defaultDescriptionId && defaultDescriptionId === input.context?.descriptionId && input.localIdNamespace ? `${resolvedId}-${input.localIdNamespace}-description` : defaultDescriptionId;
+  const ownErrorId = defaultErrorId && defaultErrorId === input.context?.errorId && input.localIdNamespace ? `${resolvedId}-${input.localIdNamespace}-error` : defaultErrorId;
+  const descriptionId = ownDescriptionId ?? input.context?.descriptionId;
+  const resolvedErrorId = ownErrorId ?? input.context?.errorId;
+  const explicitInvalid = ariaInvalid(input.hasError ?? false);
+  const consumerInvalid = input.consumerInvalid === true ? "true" : input.consumerInvalid === false ? undefined : input.consumerInvalid ?? undefined;
+  return {
+    id: resolvedId,
+    ownDescriptionId,
+    ownErrorId,
+    descriptionId,
+    errorId: resolvedErrorId,
+    describedBy: composeDescribedBy(descriptionId, ...input.additionalDescribedBy ?? [], resolvedErrorId, input.context?.describedBy, input.consumerDescribedBy),
+    ariaInvalid: explicitInvalid ?? input.context?.invalid ?? consumerInvalid,
+    required: input.required ?? input.context?.required ?? false,
+    disabled: input.disabled ?? input.context?.disabled ?? false
+  };
+}
+
+// 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/components/multi-select/multi-select.svelte
+var root_2 = $.from_html(`<span class="cinder-_required-marker" aria-hidden="true">*</span>`);
+var root_1 = $.from_html(`<label class="cinder-multi-select__label"> <!></label>`);
+var root_3 = $.from_html(`<span class="cinder-multi-select__count" aria-hidden="true"> </span>`);
+var root_4 = $.from_html(`<button type="button" class="cinder-multi-select__clear" aria-label="Clear selected items">×</button>`);
+var root_6 = $.from_html(`<input class="cinder-_input-frame cinder-multi-select__filter" type="text" role="combobox" placeholder="Filter options" aria-autocomplete="list" aria-haspopup="listbox"/>`);
+var root_9 = $.from_html(`<span class="cinder-multi-select__option-description"> </span>`);
+var root_7 = $.from_html(`<li role="option" class="cinder-_option-row cinder-multi-select__option"><span class="cinder-multi-select__checkbox" aria-hidden="true"><!></span> <span class="cinder-multi-select__option-text"><span class="cinder-multi-select__option-label"> </span> <!></span></li>`);
+var root_10 = $.from_html(`<li class="cinder-multi-select__empty" role="option" aria-disabled="true" aria-selected="false"> </li>`);
+var root_5 = $.from_html(`<div class="cinder-_floating-surface cinder-multi-select__panel" data-cinder-open=""><!> <ul role="listbox" class="cinder-multi-select__listbox" aria-multiselectable="true"></ul></div>`);
+var root_11 = $.from_html(`<p class="cinder-multi-select__sr-status" role="status" aria-live="polite"> </p> <span class="cinder-multi-select__sr-status">Filter options</span>`, 1);
+var root_13 = $.from_html(`<input type="hidden"/>`);
+var root_14 = $.from_html(`<p class="cinder-multi-select__description"> </p>`);
+var root_15 = $.from_html(`<p class="cinder-multi-select__warning"> </p>`);
+var root = $.from_html(`<div><!> <div class="cinder-multi-select__control"><button type="button" class="cinder-_input-frame cinder-multi-select__trigger" aria-haspopup="listbox"><span class="cinder-multi-select__summary cinder-_truncate"> </span> <!> <span class="cinder-multi-select__chevron" aria-hidden="true">▾</span></button> <!> <!></div> <!> <input type="text" tabindex="-1" aria-hidden="true" class="cinder-multi-select__validation-proxy"/> <!> <!> <!> <p class="cinder-multi-select__error" aria-live="polite"> </p></div>`);
+function Multi_select($$anchor, $$props) {
+  $.push($$props, true);
+  let selectedIds = $.prop($$props, "selectedIds", 31, () => $.proxy([])), placeholder = $.prop($$props, "placeholder", 3, "Select options"), readonly = $.prop($$props, "readonly", 3, false), filterable = $.prop($$props, "filterable", 3, false), selectionFeedback = $.prop($$props, "selectionFeedback", 3, "fixed"), direction = $.prop($$props, "direction", 3, "down");
+  const context = getFormFieldContext();
+  const warningId = $.derived(() => $$props.warning ? `${$$props.id}-warning` : undefined);
+  const field = $.derived(() => resolveFieldControl({
+    id: $$props.id,
+    generatedId: $$props.id,
+    context,
+    hasDescription: !!$$props.description,
+    hasError: !!$$props.error,
+    localIdNamespace: "multi-select",
+    consumerDescribedBy: $$props["aria-describedby"],
+    additionalDescribedBy: [$.get(warningId)],
+    required: $$props.required,
+    disabled: $$props.disabled
+  }));
+  const stableLocalErrorId = $.derived(() => context?.errorId === `${$.get(field).id}-error` ? `${$.get(field).id}-multi-select-error` : `${$.get(field).id}-error`);
+  const listboxId = $.derived(() => `${$$props.id}-listbox`);
+  const filterId = $.derived(() => `${$$props.id}-filter`);
+  const filterLabelHintId = $.derived(() => `${$$props.id}-filter-label-hint`);
+  const labelId = $.derived(() => $$props.label ? `${$$props.id}-label` : undefined);
+  const listboxLabelledBy = $.derived(() => $.get(labelId) ?? context?.labelId);
+  const itemIdSet = $.derived(() => new Set($$props.items.map((item) => item.id)));
+  const uniqueSelectedIds = $.derived(() => {
+    const seen = new Set;
+    const next2 = [];
+    for (const selectedId of selectedIds()) {
+      if (!$.get(itemIdSet).has(selectedId) || seen.has(selectedId))
+        continue;
+      seen.add(selectedId);
+      next2.push(selectedId);
+    }
+    return next2;
+  });
+  const selectedSet = $.derived(() => new Set($.get(uniqueSelectedIds)));
+  const selectedCount = $.derived(() => $.get(uniqueSelectedIds).length);
+  let open = $.state(false);
+  let query = $.state("");
+  let activeIndex = $.state(-1);
+  let reorderAfterReopen = $.state(false);
+  let openedAtLeastOnce = $.state(false);
+  let triggerElement = $.state(null);
+  let controlElement = $.state(null);
+  let panelElement = $.state(null);
+  let filterElement = $.state(null);
+  let listboxElement = $.state(null);
+  let validityProxyElement = $.state(null);
+  let nativeError = $.state("");
+  let resetSyncTimeout;
+  const triggerAriaInvalid = $.derived(() => $.get(field).ariaInvalid ?? ($.get(nativeError) ? true : undefined));
+  const triggerDescribedBy = $.derived(() => {
+    const ids = new Set(($.get(field).describedBy ?? "").split(/\s+/).filter(Boolean));
+    if ($.get(nativeError))
+      ids.add($.get(field).ownErrorId ?? $.get(stableLocalErrorId));
+    const value = Array.from(ids).join(" ");
+    return value === "" ? undefined : value;
+  });
+  const filterAriaLabelledBy = $.derived(() => {
+    if (!$.get(listboxLabelledBy))
+      return $.get(filterLabelHintId);
+    return `${$.get(listboxLabelledBy)} ${$.get(filterLabelHintId)}`;
+  });
+  const triggerSummary = $.derived(() => $.get(selectedCount) > 0 ? `${$.get(selectedCount)} selected` : placeholder());
+  const emptyListMessage = $.derived(() => filterable() ? "No matching options" : "No options");
+  const initialSelectedIds = untrack(() => [...selectedIds()]);
+  const defaultFilter = (item, nextQuery) => {
+    if (!nextQuery)
+      return true;
+    const q = nextQuery.toLowerCase();
+    return item.label.toLowerCase().includes(q) || (item.description?.toLowerCase().includes(q) ?? false);
+  };
+  const filteredItems = $.derived(() => {
+    if (!filterable())
+      return $$props.items;
+    const fn = $$props.filterItem ?? defaultFilter;
+    return $$props.items.filter((item) => fn(item, $.get(query)));
+  });
+  const visibleItems = $.derived(() => {
+    const shouldPromoteSelected = selectionFeedback() === "top" || selectionFeedback() === "top-after-reopen" && $.get(reorderAfterReopen);
+    if (!shouldPromoteSelected)
+      return $.get(filteredItems);
+    const selected = [];
+    const unselected = [];
+    for (const item of $.get(filteredItems)) {
+      if ($.get(selectedSet).has(item.id))
+        selected.push(item);
+      else
+        unselected.push(item);
+    }
+    return [...selected, ...unselected];
+  });
+  const activeOptionId = $.derived(() => $.get(activeIndex) >= 0 && $.get(activeIndex) < $.get(visibleItems).length ? `${$$props.id}-option-${$.get(activeIndex)}` : undefined);
+  function firstEnabledIndex(list) {
+    return list.findIndex((item) => !item.disabled);
+  }
+  function getLastEnabledIndex(list) {
+    for (let index = list.length - 1;index >= 0; index -= 1) {
+      if (!list[index]?.disabled)
+        return index;
+    }
+    return -1;
+  }
+  function openMenu(preferLast = false) {
+    if ($.get(field).disabled)
+      return;
+    $.set(open, true);
+    $.set(query, "");
+    $.set(reorderAfterReopen, selectionFeedback() === "top-after-reopen" && $.get(openedAtLeastOnce), true);
+    $.set(openedAtLeastOnce, true);
+    const nextIndex = preferLast ? getLastEnabledIndex($.get(visibleItems)) : firstEnabledIndex($.get(visibleItems));
+    $.set(activeIndex, nextIndex, true);
+    tick().then(() => {
+      if (filterable())
+        $.get(filterElement)?.focus();
+      else
+        $.get(listboxElement)?.focus();
+    });
+  }
+  function closeMenu(restoreFocus = true) {
+    $.set(open, false);
+    $.set(activeIndex, -1);
+    $.set(query, "");
+    if (restoreFocus)
+      $.get(triggerElement)?.focus();
+  }
+  function setSelectedIds(next2) {
+    selectedIds([...next2]);
+  }
+  function toggleItem(item) {
+    if ($.get(field).disabled || readonly() || item.disabled)
+      return;
+    const nextSelectedIds = $.get(selectedSet).has(item.id) ? $.get(uniqueSelectedIds).filter((candidate) => candidate !== item.id) : [...$.get(uniqueSelectedIds), item.id];
+    setSelectedIds(nextSelectedIds);
+    if (!$.get(open))
+      return;
+    queueMicrotask(() => {
+      const nextIndex = $.get(visibleItems).findIndex((candidate) => candidate.id === item.id);
+      if (nextIndex >= 0)
+        $.set(activeIndex, nextIndex, true);
+    });
+  }
+  function clearSelection(event2) {
+    event2?.stopPropagation();
+    if ($.get(field).disabled || readonly() || selectedIds().length === 0)
+      return;
+    setSelectedIds([]);
+    $.get(triggerElement)?.focus();
+  }
+  function moveActive(delta) {
+    if ($.get(visibleItems).length === 0) {
+      $.set(activeIndex, -1);
+      return;
+    }
+    const start = $.get(activeIndex) < 0 ? delta === 1 ? -1 : 0 : $.get(activeIndex);
+    for (let offset = 1;offset <= $.get(visibleItems).length; offset += 1) {
+      const index = (start + delta * offset + $.get(visibleItems).length) % $.get(visibleItems).length;
+      if (!$.get(visibleItems)[index]?.disabled) {
+        $.set(activeIndex, index);
+        return;
+      }
+    }
+  }
+  function handleListNavigationKeydown(event2) {
+    if (event2.key === "ArrowDown") {
+      event2.preventDefault();
+      moveActive(1);
+      return;
+    }
+    if (event2.key === "ArrowUp") {
+      event2.preventDefault();
+      moveActive(-1);
+      return;
+    }
+    if (event2.key === "Home") {
+      event2.preventDefault();
+      $.set(activeIndex, firstEnabledIndex($.get(visibleItems)), true);
+      return;
+    }
+    if (event2.key === "End") {
+      event2.preventDefault();
+      $.set(activeIndex, getLastEnabledIndex($.get(visibleItems)), true);
+      return;
+    }
+    if (event2.key === "Escape") {
+      event2.preventDefault();
+      closeMenu();
+      return;
+    }
+    if (event2.key === " " || event2.key === "Enter") {
+      event2.preventDefault();
+      const item = $.get(visibleItems)[$.get(activeIndex)];
+      if (!item)
+        return;
+      toggleItem(item);
+    }
+  }
+  function handleTriggerKeydown(event2) {
+    if ($.get(field).disabled)
+      return;
+    if ((event2.key === "Enter" || event2.key === " ") && !$.get(open)) {
+      event2.preventDefault();
+      openMenu();
+      return;
+    }
+    if (event2.key === "ArrowDown") {
+      event2.preventDefault();
+      if (!$.get(open))
+        openMenu();
+      else
+        moveActive(1);
+      return;
+    }
+    if (event2.key === "ArrowUp") {
+      event2.preventDefault();
+      if (!$.get(open))
+        openMenu(true);
+      else
+        moveActive(-1);
+      return;
+    }
+    if ((event2.key === "Backspace" || event2.key === "Delete") && selectedIds().length > 0) {
+      clearSelection(event2);
+    }
+  }
+  function handleFilterInput(event2) {
+    $.set(query, event2.currentTarget.value, true);
+    $.set(activeIndex, firstEnabledIndex($.get(visibleItems)), true);
+  }
+  function handleFilterKeydown(event2) {
+    if (event2.isComposing)
+      return;
+    if (event2.key === " ")
+      return;
+    if (event2.key === "Home" || event2.key === "End")
+      return;
+    handleListNavigationKeydown(event2);
+  }
+  function resetToInitialValue(event2) {
+    if (resetSyncTimeout !== undefined)
+      clearTimeout(resetSyncTimeout);
+    resetSyncTimeout = setTimeout(() => {
+      resetSyncTimeout = undefined;
+      if (event2.defaultPrevented)
+        return;
+      setSelectedIds(initialSelectedIds);
+      $.set(open, false);
+      $.set(activeIndex, -1);
+      $.set(query, "");
+    }, 0);
+  }
+  function handleProxyInvalid(event2) {
+    event2.preventDefault();
+    $.set(nativeError, $.get(validityProxyElement)?.validationMessage || ($.get(validityProxyElement)?.validity.valueMissing ? "Please select at least one option." : ""), true);
+    $.get(triggerElement)?.focus();
+  }
+  $.user_effect(() => {
+    const proxy2 = $.get(validityProxyElement);
+    if (!proxy2)
+      return;
+    proxy2.setCustomValidity($.get(field).required && $.get(uniqueSelectedIds).length === 0 ? "Please select at least one option." : "");
+    if (proxy2.validationMessage === "")
+      $.set(nativeError, "");
+  });
+  $.user_effect(() => {
+    const proxy2 = $.get(validityProxyElement);
+    if (proxy2 === null)
+      return;
+    const form = proxy2.form;
+    form?.addEventListener("reset", resetToInitialValue);
+    return () => {
+      form?.removeEventListener("reset", resetToInitialValue);
+      if (resetSyncTimeout !== undefined) {
+        clearTimeout(resetSyncTimeout);
+        resetSyncTimeout = undefined;
+      }
+    };
+  });
+  $.user_effect(() => {
+    if (!$.get(open))
+      return;
+    if ($.get(activeIndex) < 0 || $.get(activeIndex) >= $.get(visibleItems).length || $.get(visibleItems)[$.get(activeIndex)]?.disabled) {
+      $.set(activeIndex, firstEnabledIndex($.get(visibleItems)), true);
+    }
+  });
+  $.user_effect(() => {
+    if (!$.get(open))
+      return;
+    const handlePointerDown = (event2) => {
+      const target = event2.target;
+      if (target && $.get(controlElement)?.contains(target))
+        return;
+      if (target && $.get(panelElement)?.contains(target))
+        return;
+      closeMenu(false);
+    };
+    const handleFocusIn = (event2) => {
+      const target = event2.target;
+      if (target && $.get(controlElement)?.contains(target))
+        return;
+      if (target && $.get(panelElement)?.contains(target))
+        return;
+      closeMenu(false);
+    };
+    const releaseEscape = pushEscapeHandler((event2) => {
+      if (event2?.key === "Escape") {
+        event2?.preventDefault();
+        closeMenu();
+      }
+    });
+    document.addEventListener("mousedown", handlePointerDown, true);
+    document.addEventListener("focusin", handleFocusIn, true);
+    return () => {
+      releaseEscape();
+      document.removeEventListener("mousedown", handlePointerDown, true);
+      document.removeEventListener("focusin", handleFocusIn, true);
+    };
+  });
+  $.user_effect(() => {
+    if (!$.get(open) || $.get(activeIndex) < 0)
+      return;
+    const activeOption = document.getElementById(`${$$props.id}-option-${$.get(activeIndex)}`);
+    activeOption?.scrollIntoView?.({ block: "nearest" });
+  });
+  var div = root();
+  var node = $.child(div);
+  {
+    var consequent_1 = ($$anchor2) => {
+      var label_1 = root_1();
+      var text2 = $.child(label_1);
+      var node_1 = $.sibling(text2);
+      {
+        var consequent = ($$anchor3) => {
+          var span = root_2();
+          $.append($$anchor3, span);
+        };
+        $.if(node_1, ($$render) => {
+          if ($.get(field).required)
+            $$render(consequent);
+        });
+      }
+      $.reset(label_1);
+      $.template_effect(() => {
+        $.set_attribute(label_1, "id", $.get(labelId));
+        $.set_attribute(label_1, "for", $$props.id);
+        $.set_attribute(label_1, "data-disabled", $.get(field).disabled || undefined);
+        $.set_text(text2, `${$$props.label ?? ""} `);
+      });
+      $.append($$anchor2, label_1);
+    };
+    $.if(node, ($$render) => {
+      if ($$props.label)
+        $$render(consequent_1);
+    });
+  }
+  var div_1 = $.sibling(node, 2);
+  var button = $.child(div_1);
+  var span_1 = $.child(button);
+  var text_1 = $.child(span_1, true);
+  $.reset(span_1);
+  var node_2 = $.sibling(span_1, 2);
+  {
+    var consequent_2 = ($$anchor2) => {
+      var span_2 = root_3();
+      var text_2 = $.child(span_2, true);
+      $.reset(span_2);
+      $.template_effect(() => $.set_text(text_2, $.get(selectedCount)));
+      $.append($$anchor2, span_2);
+    };
+    $.if(node_2, ($$render) => {
+      if ($.get(selectedCount) > 0)
+        $$render(consequent_2);
+    });
+  }
+  $.next(2);
+  $.reset(button);
+  $.bind_this(button, ($$value) => $.set(triggerElement, $$value), () => $.get(triggerElement));
+  var node_3 = $.sibling(button, 2);
+  {
+    var consequent_3 = ($$anchor2) => {
+      var button_1 = root_4();
+      $.delegated("click", button_1, clearSelection);
+      $.append($$anchor2, button_1);
+    };
+    $.if(node_3, ($$render) => {
+      if ($.get(selectedCount) > 0 && !$.get(field).disabled && !readonly())
+        $$render(consequent_3);
+    });
+  }
+  var node_4 = $.sibling(node_3, 2);
+  {
+    var consequent_7 = ($$anchor2) => {
+      var div_2 = root_5();
+      var node_5 = $.child(div_2);
+      {
+        var consequent_4 = ($$anchor3) => {
+          var input = root_6();
+          $.remove_input_defaults(input);
+          $.bind_this(input, ($$value) => $.set(filterElement, $$value), () => $.get(filterElement));
+          $.template_effect(() => {
+            $.set_attribute(input, "id", $.get(filterId));
+            $.set_value(input, $.get(query));
+            $.set_attribute(input, "aria-labelledby", $.get(filterAriaLabelledBy));
+            $.set_attribute(input, "aria-expanded", $.get(open));
+            $.set_attribute(input, "aria-readonly", readonly() || undefined);
+            input.readOnly = readonly();
+            $.set_attribute(input, "aria-controls", $.get(listboxId));
+            $.set_attribute(input, "aria-activedescendant", $.get(activeOptionId));
+          });
+          $.delegated("input", input, handleFilterInput);
+          $.delegated("keydown", input, handleFilterKeydown);
+          $.append($$anchor3, input);
+        };
+        $.if(node_5, ($$render) => {
+          if (filterable())
+            $$render(consequent_4);
+        });
+      }
+      var ul = $.sibling(node_5, 2);
+      $.each(ul, 23, () => $.get(visibleItems), (item) => item.id, ($$anchor3, item, index) => {
+        var li = root_7();
+        var span_3 = $.child(li);
+        var node_6 = $.child(span_3);
+        {
+          var consequent_5 = ($$anchor4) => {
+            var text_3 = $.text("✓");
+            $.append($$anchor4, text_3);
+          };
+          var d = $.derived(() => $.get(selectedSet).has($.get(item).id));
+          $.if(node_6, ($$render) => {
+            if ($.get(d))
+              $$render(consequent_5);
+          });
+        }
+        $.reset(span_3);
+        var span_4 = $.sibling(span_3, 2);
+        var span_5 = $.child(span_4);
+        var text_4 = $.child(span_5, true);
+        $.reset(span_5);
+        var node_7 = $.sibling(span_5, 2);
+        {
+          var consequent_6 = ($$anchor4) => {
+            var span_6 = root_9();
+            var text_5 = $.child(span_6, true);
+            $.reset(span_6);
+            $.template_effect(() => $.set_text(text_5, $.get(item).description));
+            $.append($$anchor4, span_6);
+          };
+          $.if(node_7, ($$render) => {
+            if ($.get(item).description)
+              $$render(consequent_6);
+          });
+        }
+        $.reset(span_4);
+        $.reset(li);
+        $.template_effect(($0) => {
+          $.set_attribute(li, "id", `${$$props.id ?? ""}-option-${$.get(index) ?? ""}`);
+          $.set_attribute(li, "aria-selected", $0);
+          $.set_attribute(li, "aria-disabled", $.get(item).disabled || undefined);
+          $.set_attribute(li, "data-cinder-active", $.get(activeIndex) === $.get(index) || undefined);
+          $.set_text(text_4, $.get(item).label);
+        }, [() => $.get(selectedSet).has($.get(item).id)]);
+        $.delegated("mousedown", li, (event2) => {
+          event2.preventDefault();
+          if ($.get(item).disabled)
+            return;
+          $.set(activeIndex, $.get(index), true);
+          toggleItem($.get(item));
+        });
+        $.event("mouseenter", li, () => {
+          if ($.get(item).disabled)
+            return;
+          $.set(activeIndex, $.get(index), true);
+        });
+        $.append($$anchor3, li);
+      }, ($$anchor3) => {
+        var li_1 = root_10();
+        var text_6 = $.child(li_1, true);
+        $.reset(li_1);
+        $.template_effect(() => $.set_text(text_6, $.get(emptyListMessage)));
+        $.append($$anchor3, li_1);
+      });
+      $.reset(ul);
+      $.bind_this(ul, ($$value) => $.set(listboxElement, $$value), () => $.get(listboxElement));
+      $.reset(div_2);
+      $.bind_this(div_2, ($$value) => $.set(panelElement, $$value), () => $.get(panelElement));
+      $.template_effect(() => {
+        $.set_attribute(div_2, "id", `${$$props.id}-popover`);
+        $.set_attribute(div_2, "data-cinder-direction", direction());
+        $.set_attribute(ul, "id", $.get(listboxId));
+        $.set_attribute(ul, "aria-labelledby", $.get(listboxLabelledBy));
+        $.set_attribute(ul, "aria-label", $.get(listboxLabelledBy) ? undefined : "Options");
+        $.set_attribute(ul, "aria-required", $.get(field).required || undefined);
+        $.set_attribute(ul, "aria-readonly", readonly() || undefined);
+        $.set_attribute(ul, "aria-activedescendant", filterable() ? undefined : $.get(activeOptionId));
+        $.set_attribute(ul, "tabindex", filterable() ? -1 : 0);
+      });
+      $.delegated("keydown", ul, handleListNavigationKeydown);
+      $.append($$anchor2, div_2);
+    };
+    $.if(node_4, ($$render) => {
+      if ($.get(open))
+        $$render(consequent_7);
+    });
+  }
+  $.reset(div_1);
+  $.bind_this(div_1, ($$value) => $.set(controlElement, $$value), () => $.get(controlElement));
+  var node_8 = $.sibling(div_1, 2);
+  {
+    var consequent_8 = ($$anchor2) => {
+      var fragment = root_11();
+      var p = $.first_child(fragment);
+      var text_7 = $.child(p, true);
+      $.reset(p);
+      var span_7 = $.sibling(p, 2);
+      $.template_effect(() => {
+        $.set_text(text_7, $.get(open) && $.get(visibleItems).length === 0 ? $.get(emptyListMessage) : "");
+        $.set_attribute(span_7, "id", $.get(filterLabelHintId));
+      });
+      $.append($$anchor2, fragment);
+    };
+    $.if(node_8, ($$render) => {
+      if (filterable())
+        $$render(consequent_8);
+    });
+  }
+  var input_1 = $.sibling(node_8, 2);
+  $.remove_input_defaults(input_1);
+  $.bind_this(input_1, ($$value) => $.set(validityProxyElement, $$value), () => $.get(validityProxyElement));
+  var node_9 = $.sibling(input_1, 2);
+  {
+    var consequent_9 = ($$anchor2) => {
+      var fragment_1 = $.comment();
+      var node_10 = $.first_child(fragment_1);
+      $.each(node_10, 16, () => $.get(uniqueSelectedIds), (selectedId) => selectedId, ($$anchor3, selectedId) => {
+        var input_2 = root_13();
+        $.remove_input_defaults(input_2);
+        $.template_effect(() => {
+          $.set_attribute(input_2, "name", $$props.name);
+          $.set_value(input_2, selectedId);
+          input_2.disabled = $.get(field).disabled;
+        });
+        $.append($$anchor3, input_2);
+      });
+      $.append($$anchor2, fragment_1);
+    };
+    $.if(node_9, ($$render) => {
+      if ($$props.name)
+        $$render(consequent_9);
+    });
+  }
+  var node_11 = $.sibling(node_9, 2);
+  {
+    var consequent_10 = ($$anchor2) => {
+      var p_1 = root_14();
+      var text_8 = $.child(p_1, true);
+      $.reset(p_1);
+      $.template_effect(() => {
+        $.set_attribute(p_1, "id", $.get(field).ownDescriptionId);
+        $.set_text(text_8, $$props.description);
+      });
+      $.append($$anchor2, p_1);
+    };
+    $.if(node_11, ($$render) => {
+      if ($$props.description)
+        $$render(consequent_10);
+    });
+  }
+  var node_12 = $.sibling(node_11, 2);
+  {
+    var consequent_11 = ($$anchor2) => {
+      var p_2 = root_15();
+      var text_9 = $.child(p_2, true);
+      $.reset(p_2);
+      $.template_effect(() => {
+        $.set_attribute(p_2, "id", $.get(warningId));
+        $.set_text(text_9, $$props.warning);
+      });
+      $.append($$anchor2, p_2);
+    };
+    $.if(node_12, ($$render) => {
+      if ($$props.warning)
+        $$render(consequent_11);
+    });
+  }
+  var p_3 = $.sibling(node_12, 2);
+  var text_10 = $.child(p_3, true);
+  $.reset(p_3);
+  $.reset(div);
+  $.template_effect(($0) => {
+    $.set_class(div, 1, $0);
+    $.set_attribute(button, "id", $$props.id);
+    button.disabled = $.get(field).disabled;
+    $.set_attribute(button, "aria-invalid", $.get(triggerAriaInvalid));
+    $.set_attribute(button, "aria-describedby", $.get(triggerDescribedBy));
+    $.set_attribute(button, "aria-expanded", $.get(open));
+    $.set_attribute(button, "aria-controls", $.get(listboxId));
+    $.set_attribute(button, "data-cinder-invalid", $.get(triggerAriaInvalid) ? "true" : undefined);
+    $.set_attribute(button, "data-cinder-open", $.get(open) || undefined);
+    $.set_attribute(button, "data-cinder-has-clear", $.get(selectedCount) > 0 && !$.get(field).disabled && !readonly() || undefined);
+    $.set_attribute(button, "data-cinder-readonly", readonly() || undefined);
+    $.set_text(text_1, $.get(triggerSummary));
+    $.set_value(input_1, $.get(selectedCount) > 0 ? "selected" : "");
+    input_1.required = $.get(field).required;
+    input_1.disabled = $.get(field).disabled;
+    $.set_attribute(p_3, "id", $.get(field).ownErrorId ?? $.get(stableLocalErrorId));
+    $.set_attribute(p_3, "data-cinder-error", !!$$props.error || !!$.get(nativeError) || undefined);
+    $.set_text(text_10, $$props.error ?? $.get(nativeError));
+  }, [
+    () => $.clsx(classNames("cinder-multi-select", $$props.class))
+  ]);
+  $.delegated("click", button, () => $.get(open) ? closeMenu() : openMenu());
+  $.delegated("keydown", button, handleTriggerKeydown);
+  $.event("invalid", input_1, handleProxyInvalid);
+  $.append($$anchor, div);
+  $.pop();
+}
+$.delegate(["click", "keydown", "input", "mousedown"]);
+
+// src/components/multi-select/index.ts
+var multi_select_default = Multi_select;
+export {
+  multi_select_default as default,
+  Multi_select as MultiSelect
+};
+
+//# debugId=3F33B5F16A000F4A64756E2164756E21