@editora/ui-core 0.1.8 → 0.1.10

package/dist/multi-select.esm.js

@@ -0,0 +1,914 @@
+import { E as K } from "./ElementBase-909688f3.mjs";
+import { n as U } from "./collection-a1aac0c6.mjs";
+import "./listbox-308789a0.mjs";
+import "./collection.esm.js";
+let W = 0;
+const H = `
+  :host {
+    --ui-multi-select-border-color: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 82%, transparent);
+    --ui-multi-select-border: var(--base-multi-select-border, 1px solid var(--ui-multi-select-border-color));
+    --ui-multi-select-radius: var(--base-multi-select-radius, var(--ui-radius, 4px));
+    --ui-multi-select-bg: var(--base-multi-select-bg, var(--color-panel-solid, var(--ui-color-surface, #ffffff)));
+    --ui-multi-select-text: var(--ui-color-text, var(--ui-text, #0f172a));
+    --ui-multi-select-muted: var(--ui-color-muted, var(--ui-muted, #64748b));
+    --ui-multi-select-focus: var(--ui-color-focus-ring, #2563eb);
+    --ui-multi-select-danger: var(--ui-color-danger, #dc2626);
+    --ui-multi-select-accent: var(--ui-color-primary, #2563eb);
+    --ui-multi-select-chip-bg: color-mix(in srgb, var(--ui-color-primary, #2563eb) 10%, transparent);
+    --ui-multi-select-chip-text: color-mix(in srgb, var(--ui-color-primary, #2563eb) 82%, #0f172a 18%);
+    --ui-multi-select-panel-bg: var(--base-multi-select-panel-bg, color-mix(in srgb, var(--ui-multi-select-bg) 98%, transparent));
+    --ui-multi-select-panel-border: var(--base-multi-select-panel-border, 1px solid color-mix(in srgb, var(--ui-multi-select-border-color) 84%, transparent));
+    --ui-multi-select-panel-shadow: var(--base-multi-select-panel-shadow, var(--shadow-4, 0 20px 34px rgba(2, 6, 23, 0.16)));
+    --ui-multi-select-height: var(--base-multi-select-height-md, 44px);
+    --ui-multi-select-padding-x: var(--base-multi-select-padding-x, 10px);
+    --ui-multi-select-padding-y: var(--base-multi-select-padding-y, 8px);
+    --ui-multi-select-chip-radius: var(--base-multi-select-chip-radius, 999px);
+    --ui-multi-select-chip-gap: var(--base-multi-select-chip-gap, 6px);
+    --ui-multi-select-chip-padding-x: var(--base-multi-select-chip-padding-x, 10px);
+    --ui-multi-select-chip-padding-y: var(--base-multi-select-chip-padding-y, 6px);
+    --ui-multi-select-option-radius: var(--base-multi-select-option-radius, 10px);
+    --ui-multi-select-option-gap: var(--base-multi-select-option-gap, 10px);
+    --ui-multi-select-option-padding-x: var(--base-multi-select-option-padding-x, 10px);
+    --ui-multi-select-option-padding-y: var(--base-multi-select-option-padding-y, 10px);
+    --ui-multi-select-option-border-color: color-mix(in srgb, var(--ui-multi-select-border-color) 84%, transparent);
+    --ui-multi-select-option-stroke: inset 0 0 0 1px transparent;
+    display: block;
+    inline-size: 100%;
+    min-inline-size: 0;
+    color: var(--ui-multi-select-text);
+    font-family: var(--ui-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
+    font-size: var(--ui-default-font-size, 14px);
+    line-height: var(--ui-default-line-height, 20px);
+    letter-spacing: var(--ui-default-letter-spacing, 0em);
+    color-scheme: light dark;
+  }
+
+  .root { display: grid; gap: 8px; }
+  .meta { display: grid; gap: 4px; }
+  .label {
+    margin: 0;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    color: var(--ui-multi-select-muted);
+    font: 600 13px/1.35 var(--ui-font-family, "Inter", sans-serif);
+  }
+  .required { color: var(--ui-multi-select-danger); font-size: 12px; line-height: 1; }
+  .description, .error {
+    margin: 0;
+    font-size: 12px;
+    line-height: 1.4;
+    letter-spacing: 0.01em;
+  }
+  .description { color: var(--ui-multi-select-muted); }
+  .error { color: var(--ui-multi-select-danger); }
+
+  .shell {
+    position: relative;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    align-items: center;
+    gap: 8px;
+    min-block-size: var(--ui-multi-select-height);
+    padding: var(--ui-multi-select-padding-y) var(--ui-multi-select-padding-x);
+    border: var(--ui-multi-select-border);
+    border-radius: var(--ui-multi-select-radius);
+    background: var(--ui-multi-select-bg);
+    box-shadow: var(--base-multi-select-shadow, none);
+    box-sizing: border-box;
+    transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
+  }
+
+  .value-area {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 8px;
+    min-inline-size: 0;
+  }
+
+  .chips {
+    display: inline-flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 6px;
+    min-inline-size: 0;
+  }
+
+  .controls {
+    display: inline-flex;
+    align-items: center;
+    align-self: center;
+    gap: 4px;
+    min-block-size: 28px;
+  }
+
+  .shell[data-open="true"],
+  .shell:focus-within {
+    border-color: color-mix(in srgb, var(--ui-multi-select-focus) 58%, var(--ui-multi-select-border-color));
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-multi-select-focus) 22%, transparent);
+  }
+
+  .shell[data-readonly="true"] {
+    background: color-mix(in srgb, var(--ui-multi-select-bg) 92%, transparent);
+  }
+
+  .shell[data-invalid="true"] {
+    border-color: color-mix(in srgb, var(--ui-multi-select-danger) 62%, transparent);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-multi-select-danger) 18%, transparent);
+  }
+
+  .chip {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--ui-multi-select-chip-gap);
+    padding: var(--ui-multi-select-chip-padding-y) calc(var(--ui-multi-select-chip-padding-x) - 2px) var(--ui-multi-select-chip-padding-y) var(--ui-multi-select-chip-padding-x);
+    border-radius: var(--ui-multi-select-chip-radius);
+    background: var(--ui-multi-select-chip-bg);
+    color: var(--ui-multi-select-chip-text);
+    font: 600 12px/1.2 var(--ui-font-family, "Inter", sans-serif);
+  }
+
+  .chip-remove {
+    border: none;
+    border-radius: 999px;
+    inline-size: 18px;
+    block-size: 18px;
+    display: inline-grid;
+    place-items: center;
+    padding: 0;
+    background: color-mix(in srgb, currentColor 8%, transparent);
+    color: inherit;
+    cursor: pointer;
+    font: 700 11px/1 "Inter", sans-serif;
+  }
+
+  .chip-remove:hover {
+    background: color-mix(in srgb, currentColor 14%, transparent);
+  }
+
+  .input {
+    flex: 1 1 96px;
+    min-inline-size: 72px;
+    border: none;
+    background: transparent;
+    color: inherit;
+    outline: none;
+    font: 500 14px/1.4 var(--ui-font-family, "Inter", sans-serif);
+    padding: 4px 2px;
+    margin: 0;
+  }
+
+  .input::placeholder {
+    color: color-mix(in srgb, var(--ui-multi-select-text) 42%, transparent);
+  }
+
+  .toggle {
+    border: none;
+    background: transparent;
+    color: color-mix(in srgb, var(--ui-multi-select-text) 64%, transparent);
+    inline-size: 28px;
+    block-size: 28px;
+    border-radius: 8px;
+    display: inline-grid;
+    place-items: center;
+    cursor: pointer;
+    padding: 0;
+    line-height: 0;
+    transition: background-color 140ms ease, color 140ms ease, transform 140ms ease;
+  }
+
+  .toggle svg {
+    inline-size: 14px;
+    block-size: 14px;
+    display: block;
+  }
+
+  .toggle:hover {
+    background: color-mix(in srgb, var(--ui-multi-select-text) 8%, transparent);
+    color: var(--ui-multi-select-text);
+  }
+
+  .clear {
+    border: none;
+    background: transparent;
+    color: color-mix(in srgb, var(--ui-multi-select-text) 64%, transparent);
+    inline-size: 28px;
+    block-size: 28px;
+    border-radius: 8px;
+    display: inline-grid;
+    place-items: center;
+    cursor: pointer;
+    transition: background-color 140ms ease, color 140ms ease;
+  }
+
+  .clear:hover {
+    background: color-mix(in srgb, var(--ui-multi-select-text) 8%, transparent);
+    color: var(--ui-multi-select-text);
+  }
+
+  .clear[hidden] {
+    display: none;
+  }
+
+  .toggle[data-open="true"] {
+    transform: rotate(180deg);
+  }
+
+  .panel {
+    position: absolute;
+    inset-inline: 0;
+    top: calc(100% + 8px);
+    z-index: 20;
+    max-block-size: min(320px, 45vh);
+    overflow: auto;
+    border: var(--ui-multi-select-panel-border);
+    border-radius: var(--base-multi-select-panel-radius, calc(var(--ui-multi-select-radius) + 2px));
+    background: var(--ui-multi-select-panel-bg);
+    box-shadow: var(--ui-multi-select-panel-shadow);
+    padding: 6px;
+    box-sizing: border-box;
+  }
+
+  .panel[hidden] { display: none; }
+
+  .option {
+    position: relative;
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    gap: var(--ui-multi-select-option-gap);
+    align-items: center;
+    width: 100%;
+    border: none;
+    background: transparent;
+    border-radius: var(--ui-multi-select-option-radius);
+    padding: var(--ui-multi-select-option-padding-y) var(--ui-multi-select-option-padding-x);
+    text-align: left;
+    color: inherit;
+    cursor: pointer;
+    box-shadow: var(--ui-multi-select-option-stroke);
+    transition: background-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
+  }
+
+  .option:hover {
+    background: color-mix(in srgb, var(--ui-multi-select-focus) 9%, transparent);
+    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ui-multi-select-focus) 22%, transparent);
+    z-index: 1;
+  }
+
+  .option[data-selected="true"] {
+    background: color-mix(in srgb, var(--ui-multi-select-focus) 14%, transparent);
+    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ui-multi-select-focus) 34%, transparent);
+    z-index: 1;
+  }
+
+  .option[data-indicator="none"] {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .option[data-indicator="check"] .check {
+    border: none;
+    background: transparent;
+  }
+
+  .option[data-active="true"] {
+    outline: 2px solid color-mix(in srgb, var(--ui-multi-select-focus) 24%, transparent);
+    outline-offset: -2px;
+  }
+
+  .option[disabled] {
+    opacity: 0.55;
+    cursor: not-allowed;
+  }
+
+  .option-label {
+    display: block;
+    min-inline-size: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 13px;
+    font-weight: 600;
+  }
+
+  .option-description {
+    display: block;
+    min-inline-size: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: var(--ui-multi-select-muted);
+    font-size: 11px;
+    line-height: 1.35;
+    margin-top: 2px;
+  }
+
+  .check {
+    inline-size: 16px;
+    block-size: 16px;
+    border-radius: 5px;
+    border: 1px solid color-mix(in srgb, var(--ui-multi-select-border-color) 86%, transparent);
+    display: inline-grid;
+    place-items: center;
+    font-size: 11px;
+    line-height: 1;
+  }
+
+  .status {
+    padding: 12px 10px;
+    color: var(--ui-multi-select-muted);
+    font-size: 12px;
+  }
+
+  .group {
+    padding: 8px 10px 6px;
+    color: var(--ui-multi-select-muted);
+    font: 700 10px/1.3 "Inter", "IBM Plex Sans", sans-serif;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+  }
+
+  .label[hidden], .description[hidden], .error[hidden], .meta[hidden] {
+    display: none;
+  }
+
+  :host([disabled]) .shell {
+    opacity: 0.68;
+  }
+
+  :host([disabled]) .toggle,
+  :host([disabled]) .clear,
+  :host([readonly]) .toggle,
+  :host([readonly]) .clear,
+  :host([disabled]) .chip-remove,
+  :host([readonly]) .chip-remove {
+    pointer-events: none;
+  }
+
+  :host([readonly]) .chip-remove {
+    opacity: 0.6;
+  }
+
+  :host([size="sm"]) {
+    --ui-multi-select-height: var(--base-multi-select-height-sm, 38px);
+  }
+
+  :host([size="sm"]),
+  :host([size="1"]) {
+    --ui-multi-select-height: var(--base-multi-select-height-sm, 38px);
+    --ui-multi-select-padding-x: 8px;
+    --ui-multi-select-padding-y: 6px;
+    --ui-multi-select-option-padding-x: 8px;
+    --ui-multi-select-option-padding-y: 8px;
+  }
+
+  :host([size="sm"]) .input,
+  :host([size="sm"]) .option-label,
+  :host([size="1"]) .input,
+  :host([size="1"]) .option-label {
+    font-size: 12px;
+  }
+
+  :host([size="lg"]),
+  :host([size="3"]) {
+    --ui-multi-select-height: var(--base-multi-select-height-lg, 48px);
+    --ui-multi-select-padding-x: 12px;
+    --ui-multi-select-padding-y: 10px;
+    --ui-multi-select-option-padding-x: 12px;
+    --ui-multi-select-option-padding-y: 12px;
+  }
+
+  :host([size="lg"]) .input,
+  :host([size="lg"]) .option-label,
+  :host([size="3"]) .input,
+  :host([size="3"]) .option-label {
+    font-size: 15px;
+  }
+
+  :host([density="compact"]) .root {
+    gap: 6px;
+  }
+
+  :host([density="compact"]) .shell {
+    gap: 6px;
+  }
+
+  :host([density="compact"]) .value-area {
+    gap: 6px;
+  }
+
+  :host([density="compact"]) .chips {
+    gap: 4px;
+  }
+
+  :host([density="compact"]) .option {
+    padding: 8px;
+  }
+
+  :host([density="comfortable"]) .root {
+    gap: 10px;
+  }
+
+  :host([density="comfortable"]) .shell {
+    gap: 10px;
+    padding: 10px 12px;
+  }
+
+  :host([density="comfortable"]) .value-area {
+    gap: 10px;
+  }
+
+  :host([density="comfortable"]) .chips {
+    gap: 8px;
+  }
+
+  :host([density="comfortable"]) .option {
+    padding: 12px;
+  }
+
+  :host([option-border]) {
+    --ui-multi-select-option-stroke: inset 0 0 0 1px var(--ui-multi-select-option-border-color);
+  }
+
+  :host([option-border]) .option + .option {
+    margin-top: -1px;
+  }
+
+  :host([variant="surface"]) {
+    --ui-multi-select-bg: var(--ui-color-surface-alt, #f8fafc);
+  }
+
+  :host([variant="soft"]) {
+    --ui-multi-select-bg: color-mix(in srgb, var(--ui-multi-select-accent) 8%, #ffffff);
+    --ui-multi-select-border-color: color-mix(in srgb, var(--ui-multi-select-accent) 26%, var(--ui-color-border, #cbd5e1));
+  }
+
+  :host([variant="outline"]) {
+    --ui-multi-select-bg: var(--base-multi-select-bg, var(--color-panel-solid, #ffffff));
+    --base-multi-select-shadow: none;
+  }
+
+  :host([variant="solid"]),
+  :host([variant="filled"]) {
+    --ui-multi-select-bg: color-mix(in srgb, var(--ui-multi-select-accent) 9%, #ffffff);
+    --ui-multi-select-border-color: color-mix(in srgb, var(--ui-multi-select-accent) 24%, transparent);
+  }
+
+  :host([variant="contrast"]) {
+    --ui-multi-select-bg: #0f172a;
+    --ui-multi-select-panel-bg: #0f172a;
+    --ui-multi-select-text: #e2e8f0;
+    --ui-multi-select-muted: #93a4bd;
+    --ui-multi-select-border-color: #334155;
+    --ui-multi-select-focus: #93c5fd;
+    --ui-multi-select-chip-bg: color-mix(in srgb, #93c5fd 18%, transparent);
+    --ui-multi-select-chip-text: #e2e8f0;
+  }
+
+  :host([variant="flat"]),
+  :host([variant="minimal"]) {
+    --ui-multi-select-bg: transparent;
+    --ui-multi-select-border: 0;
+    --base-multi-select-shadow: none;
+  }
+
+  :host([variant="minimal"]) .shell {
+    border-left: none;
+    border-right: none;
+    border-top: none;
+    border-radius: 0;
+    padding-inline: 0;
+  }
+
+  :host([elevation="none"]) {
+    --base-multi-select-shadow: none;
+    --ui-multi-select-panel-shadow: none;
+  }
+
+  :host([elevation="low"]) {
+    --base-multi-select-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 16px rgba(15, 23, 42, 0.06);
+    --ui-multi-select-panel-shadow: 0 18px 34px rgba(15, 23, 42, 0.12), 0 4px 10px rgba(15, 23, 42, 0.08);
+  }
+
+  :host([elevation="high"]) {
+    --base-multi-select-shadow: 0 10px 24px rgba(15, 23, 42, 0.08), 0 24px 48px rgba(15, 23, 42, 0.1);
+    --ui-multi-select-panel-shadow: 0 24px 56px rgba(15, 23, 42, 0.2), 0 8px 18px rgba(15, 23, 42, 0.12);
+  }
+
+  :host([tone="neutral"]) {
+    --ui-multi-select-accent: color-mix(in srgb, var(--ui-color-muted, #64748b) 62%, var(--ui-color-text, #0f172a));
+    --ui-multi-select-focus: color-mix(in srgb, var(--ui-color-muted, #64748b) 62%, var(--ui-color-text, #0f172a));
+    --ui-multi-select-chip-bg: color-mix(in srgb, var(--ui-color-muted, #64748b) 12%, transparent);
+    --ui-multi-select-chip-text: var(--ui-multi-select-text);
+  }
+
+  :host([tone="info"]) {
+    --ui-multi-select-accent: var(--ui-color-primary, #2563eb);
+    --ui-multi-select-focus: var(--ui-color-primary, #2563eb);
+  }
+
+  :host([tone="success"]) {
+    --ui-multi-select-accent: var(--ui-color-success, #16a34a);
+    --ui-multi-select-focus: var(--ui-color-success, #16a34a);
+    --ui-multi-select-chip-bg: color-mix(in srgb, var(--ui-color-success, #16a34a) 12%, transparent);
+    --ui-multi-select-chip-text: color-mix(in srgb, var(--ui-color-success, #16a34a) 82%, #0f172a 18%);
+  }
+
+  :host([tone="warning"]) {
+    --ui-multi-select-accent: var(--ui-color-warning, #d97706);
+    --ui-multi-select-focus: var(--ui-color-warning, #d97706);
+    --ui-multi-select-chip-bg: color-mix(in srgb, var(--ui-color-warning, #d97706) 12%, transparent);
+    --ui-multi-select-chip-text: color-mix(in srgb, var(--ui-color-warning, #d97706) 82%, #0f172a 18%);
+  }
+
+  :host([tone="danger"]) {
+    --ui-multi-select-accent: var(--ui-color-danger, #dc2626);
+    --ui-multi-select-focus: var(--ui-color-danger, #dc2626);
+    --ui-multi-select-chip-bg: color-mix(in srgb, var(--ui-color-danger, #dc2626) 12%, transparent);
+    --ui-multi-select-chip-text: color-mix(in srgb, var(--ui-color-danger, #dc2626) 82%, #0f172a 18%);
+  }
+`;
+function O(l) {
+  if (!l)
+    return [];
+  try {
+    const e = JSON.parse(l);
+    if (!Array.isArray(e))
+      return [];
+    const t = [], i = (r, o) => {
+      const n = String(r.value ?? "").trim();
+      n && t.push({
+        value: n,
+        label: String(r.label ?? n),
+        description: r.description ? String(r.description) : void 0,
+        disabled: !!r.disabled,
+        group: o
+      });
+    };
+    return e.forEach((r) => {
+      if (!r || typeof r != "object")
+        return;
+      const o = r;
+      if (Array.isArray(o.options)) {
+        const n = String(o.label ?? "").trim();
+        o.options.forEach((a) => {
+          !a || typeof a != "object" || i(a, n || void 0);
+        });
+        return;
+      }
+      i(o);
+    }), t;
+  } catch {
+    return [];
+  }
+}
+function E(l) {
+  if (!l)
+    return [];
+  const e = l.trim();
+  if (!e)
+    return [];
+  if (e.startsWith("["))
+    try {
+      const t = JSON.parse(e);
+      if (Array.isArray(t))
+        return t.map((i) => String(i)).filter(Boolean);
+    } catch {
+    }
+  return e.split(",").map((t) => t.trim()).filter(Boolean);
+}
+function D(l) {
+  return !l || l === "default" ? null : l === "none" || l === "square" ? "0px" : l === "sm" ? "8px" : l === "md" || l === "soft" ? "12px" : l === "lg" ? "16px" : l === "full" ? "999px" : /^\d+(\.\d+)?$/.test(l) ? `${l}px` : /^\d+(\.\d+)?(px|rem|em|%)$/.test(l) ? l : null;
+}
+function M(l) {
+  return l === "sm" || l === "1" ? "sm" : l === "lg" || l === "3" ? "lg" : "md";
+}
+class j extends K {
+  constructor() {
+    super(), this._options = [], this._selected = [], this._query = "", this._inputEl = null, this._shellEl = null, this._panelEl = null, this._formUnregister = null, this._outsidePointerDown = null, this._activeValue = null, this._uid = `ui-multi-select-${++W}`, this._isSyncingUi = !1, this._needsSyncUi = !1, this._onInput = this._onInput.bind(this), this._onKeyDown = this._onKeyDown.bind(this), this._onToggle = this._onToggle.bind(this), this._onFocusIn = this._onFocusIn.bind(this), this._onFocusOut = this._onFocusOut.bind(this);
+  }
+  static get observedAttributes() {
+    return [
+      "options",
+      "value",
+      "placeholder",
+      "label",
+      "description",
+      "data-error",
+      "name",
+      "required",
+      "disabled",
+      "readonly",
+      "loading",
+      "loading-text",
+      "clearable",
+      "open",
+      "max-selections",
+      "render-limit",
+      "selection-indicator",
+      "option-border",
+      "variant",
+      "tone",
+      "density",
+      "shape",
+      "size",
+      "radius",
+      "option-radius",
+      "elevation"
+    ];
+  }
+  get value() {
+    return [...this._selected];
+  }
+  set value(e) {
+    const t = Array.isArray(e) ? e.map((i) => String(i)).filter(Boolean) : E(String(e ?? ""));
+    this._setSelected(t, "api");
+  }
+  get open() {
+    return this.hasAttribute("open");
+  }
+  set open(e) {
+    e ? this.setAttribute("open", "") : this.removeAttribute("open");
+  }
+  connectedCallback() {
+    super.connectedCallback(), this._registerWithForm();
+  }
+  disconnectedCallback() {
+    this._detachOutsideListener(), this._formUnregister && (this._formUnregister(), this._formUnregister = null), super.disconnectedCallback();
+  }
+  attributeChangedCallback(e, t, i) {
+    if (t !== i && (e === "options" && (this._options = O(i)), e === "value" && (this._selected = E(i)), e === "name" && this.isConnected && this._registerWithForm(), !!this._shellEl)) {
+      if (e === "variant" || e === "tone" || e === "density" || e === "shape" || e === "size" || e === "radius" || e === "option-radius" || e === "elevation") {
+        this._syncVisualState(), e === "size" && this._syncUi();
+        return;
+      }
+      this._syncUi();
+    }
+  }
+  shouldRenderOnAttributeChange() {
+    return !1;
+  }
+  render() {
+    var e, t, i, r, o, n;
+    this.setContent(`
+      <style>${H}</style>
+      <div class="root">
+        <div class="meta" hidden>
+          <div class="label" hidden><span class="label-text"></span><span class="required" hidden>*</span></div>
+          <div class="description" hidden></div>
+        </div>
+        <div class="shell" part="shell" data-open="false" data-invalid="false">
+          <div class="value-area" part="value-area">
+            <div class="chips" part="chips"></div>
+            <input class="input" part="input" type="text" role="combobox" aria-autocomplete="list" aria-haspopup="listbox" aria-expanded="false" aria-controls="${this._uid}-panel" />
+          </div>
+          <div class="controls" part="controls">
+            <button class="clear" part="clear" type="button" aria-label="Clear selection" hidden>×</button>
+            <button class="toggle" part="toggle" type="button" aria-label="Toggle options">
+              <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
+                <path d="M4.25 6.5 8 10.25 11.75 6.5" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" />
+              </svg>
+            </button>
+          </div>
+          <ui-listbox class="panel" id="${this._uid}-panel" part="panel" role="listbox" aria-multiselectable="true" item-selector=".option" item-role="option" active-attribute="data-active" hidden></ui-listbox>
+        </div>
+        <div class="error" part="error" hidden></div>
+      </div>
+    `), this._options = O(this.getAttribute("options")), this._selected = E(this.getAttribute("value")), this._shellEl = this.root.querySelector(".shell"), this._inputEl = this.root.querySelector(".input"), this._panelEl = this.root.querySelector(".panel"), (e = this._inputEl) == null || e.addEventListener("input", this._onInput), (t = this._inputEl) == null || t.addEventListener("keydown", this._onKeyDown), (i = this.root.querySelector(".toggle")) == null || i.addEventListener("click", this._onToggle), (r = this.root.querySelector(".clear")) == null || r.addEventListener("click", () => this._clearSelection("clear-button")), (o = this._shellEl) == null || o.addEventListener("focusin", this._onFocusIn), (n = this._shellEl) == null || n.addEventListener("focusout", this._onFocusOut), this._syncVisualState(), this._syncUi();
+  }
+  _syncVisualState() {
+    const e = D(this.getAttribute("radius") || this.getAttribute("shape"));
+    e ? this.style.setProperty("--ui-multi-select-radius", e) : this.style.removeProperty("--ui-multi-select-radius");
+    const t = D(this.getAttribute("option-radius"));
+    t ? this.style.setProperty("--ui-multi-select-option-radius", t) : this.style.removeProperty("--ui-multi-select-option-radius");
+    const i = M(this.getAttribute("size"));
+    this.setAttribute("data-size", i);
+  }
+  _selectionIndicator() {
+    const e = (this.getAttribute("selection-indicator") || "checkbox").trim().toLowerCase();
+    return e === "none" || e === "check" ? e : "checkbox";
+  }
+  _isInteractionLocked() {
+    return this.hasAttribute("disabled") || this.hasAttribute("readonly");
+  }
+  _attachOutsideListener() {
+    this._outsidePointerDown || typeof document > "u" || (this._outsidePointerDown = (e) => {
+      const t = e.composedPath();
+      t.includes(this) || t.includes(this.root) || this._panelEl && t.includes(this._panelEl) || this._inputEl && t.includes(this._inputEl) || (this.open = !1, this._syncUi());
+    }, document.addEventListener("pointerdown", this._outsidePointerDown));
+  }
+  _detachOutsideListener() {
+    !this._outsidePointerDown || typeof document > "u" || (document.removeEventListener("pointerdown", this._outsidePointerDown), this._outsidePointerDown = null);
+  }
+  _filteredOptions() {
+    const e = U(this._query);
+    return e ? this._options.filter((t) => U(t.label).includes(e) || U(t.value).includes(e)) : this._options;
+  }
+  _renderLimit() {
+    const e = Number(this.getAttribute("render-limit"));
+    return Number.isFinite(e) && e > 0 ? e : 200;
+  }
+  _findOptionNode(e) {
+    return !e || !this._panelEl ? null : Array.from(this._panelEl.querySelectorAll(".option")).find((t) => t.getAttribute("data-value") === e);
+  }
+  _selectedOptionRecords() {
+    return this._selected.map((e) => this._options.find((t) => t.value === e)).filter(Boolean);
+  }
+  _emitChange(e, t) {
+    this.dispatchEvent(
+      new CustomEvent("change", {
+        detail: {
+          value: [...this._selected],
+          previousValue: t,
+          selectedItems: this._selectedOptionRecords(),
+          source: e
+        },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  _setSelected(e, t) {
+    const i = Number(this.getAttribute("max-selections")), r = [];
+    e.forEach((a) => {
+      if (!a)
+        return;
+      const p = r.indexOf(a);
+      p >= 0 && r.splice(p, 1), r.push(a);
+    });
+    const o = Number.isFinite(i) && i > 0 ? r.slice(-i) : r, n = [...this._selected];
+    if (n.length === o.length && n.every((a, p) => a === o[p])) {
+      this._syncUi();
+      return;
+    }
+    this._selected = o, this._selected.length ? this.setAttribute("value", JSON.stringify(this._selected)) : this.removeAttribute("value"), this._syncUi(), this._emitChange(t, n);
+  }
+  _toggleValue(e, t) {
+    if (this._isInteractionLocked() || this.hasAttribute("loading"))
+      return;
+    const r = this._selected.includes(e) ? this._selected.filter((o) => o !== e) : [...this._selected, e];
+    this._activeValue = e, this._setSelected(r, t);
+  }
+  _removeChip(e) {
+    this._isInteractionLocked() || (this._activeValue === e && (this._activeValue = null), this._toggleValue(e, "remove-chip"));
+  }
+  _clearSelection(e) {
+    var t, i;
+    if (!(this._isInteractionLocked() || !this._selected.length)) {
+      this._activeValue = null, this._setSelected([], e), this._query = "", this._inputEl && (this._inputEl.value = "");
+      try {
+        (t = this._inputEl) == null || t.focus({ preventScroll: !0 });
+      } catch {
+        (i = this._inputEl) == null || i.focus();
+      }
+    }
+  }
+  _registerWithForm() {
+    var e;
+    this._formUnregister && (this._formUnregister(), this._formUnregister = null);
+    try {
+      const i = this.getRootNode().host, o = ((e = i == null ? void 0 : i.closest) == null ? void 0 : e.call(i, "ui-form")) || null || this.closest("ui-form"), n = this.getAttribute("name");
+      o && typeof o.registerField == "function" && n && (this._formUnregister = o.registerField(n, {
+        name: n,
+        getValue: () => [...this._selected],
+        setValue: (a) => {
+          Array.isArray(a) ? this._setSelected(a.map((p) => String(p)), "form") : this._setSelected(E(String(a ?? "")), "form");
+        },
+        validate: async () => this.hasAttribute("required") && this._selected.length === 0 ? { valid: !1, message: "At least one option is required" } : { valid: !0 },
+        setError: (a) => {
+          a ? this.setAttribute("data-error", a) : this.removeAttribute("data-error"), this._syncUi();
+        }
+      }));
+    } catch {
+    }
+  }
+  _onInput(e) {
+    var t;
+    this._isInteractionLocked() || (this._query = ((t = e.target) == null ? void 0 : t.value) || "", this.open || (this.open = !0), this._syncUi());
+  }
+  _onKeyDown(e) {
+    var t, i, r, o, n, a, p, f;
+    if (!this._isInteractionLocked()) {
+      if (e.key === "ArrowDown") {
+        e.preventDefault(), this.open || (this.open = !0), this._syncUi(), (t = this._panelEl) != null && t.getActiveItem() ? this._panelEl.move(1, { focus: !1, owner: this._inputEl, scroll: !1 }) : (i = this._panelEl) == null || i.focusBoundary("first", { focus: !1, owner: this._inputEl, scroll: !1 });
+        return;
+      }
+      if (e.key === "ArrowUp") {
+        e.preventDefault(), this.open || (this.open = !0), this._syncUi(), (r = this._panelEl) != null && r.getActiveItem() ? this._panelEl.move(-1, { focus: !1, owner: this._inputEl, scroll: !1 }) : (o = this._panelEl) == null || o.focusBoundary("last", { focus: !1, owner: this._inputEl, scroll: !1 });
+        return;
+      }
+      if (e.key === "Home") {
+        e.preventDefault(), this.open || (this.open = !0), this._syncUi(), (n = this._panelEl) == null || n.focusBoundary("first", { focus: !1, owner: this._inputEl, scroll: !1 });
+        return;
+      }
+      if (e.key === "End") {
+        e.preventDefault(), this.open || (this.open = !0), this._syncUi(), (a = this._panelEl) == null || a.focusBoundary("last", { focus: !1, owner: this._inputEl, scroll: !1 });
+        return;
+      }
+      if (e.key === "Enter") {
+        const v = (p = this._panelEl) == null ? void 0 : p.getActiveItem();
+        if (v) {
+          e.preventDefault();
+          const g = v.getAttribute("data-value");
+          g && (this._activeValue = g, this._toggleValue(g, "keyboard"), this._query = "", this._inputEl && (this._inputEl.value = ""), (f = this._inputEl) == null || f.focus());
+        }
+        return;
+      }
+      if (e.key === "Escape") {
+        e.preventDefault(), this._query ? (this._query = "", this._inputEl && (this._inputEl.value = "")) : this.open = !1, this._syncUi();
+        return;
+      }
+      if (e.key === "Tab") {
+        this.open = !1, this._syncUi();
+        return;
+      }
+      e.key === "Backspace" && !this._query && this._selected.length && this._removeChip(this._selected[this._selected.length - 1]);
+    }
+  }
+  _onToggle() {
+    var e;
+    this._isInteractionLocked() || (this.open = !this.open, this._syncUi(), this.open && ((e = this._inputEl) == null || e.focus()));
+  }
+  _onFocusIn() {
+    this._isInteractionLocked() || (this.open = !0), this._syncUi();
+  }
+  _onFocusOut(e) {
+    var t;
+    (t = this._shellEl) != null && t.contains(e.relatedTarget) || (this.open = !1, this._syncUi());
+  }
+  _syncUi() {
+    var e;
+    if (this._isSyncingUi) {
+      this._needsSyncUi = !0;
+      return;
+    }
+    if (!(!this._shellEl || !this._inputEl || !this._panelEl)) {
+      this._isSyncingUi = !0;
+      try {
+        const t = (this.getAttribute("label") || "").trim(), i = (this.getAttribute("description") || "").trim(), r = (this.getAttribute("data-error") || "").trim(), o = this.root.querySelector(".meta"), n = this.root.querySelector(".label"), a = this.root.querySelector(".label-text"), p = this.root.querySelector(".required"), f = this.root.querySelector(".description"), v = this.root.querySelector(".chips"), g = this.root.querySelector(".toggle"), C = this.root.querySelector(".clear"), q = this.root.querySelector(".error"), I = this._selectionIndicator(), L = this.hasAttribute("loading"), F = (this.getAttribute("loading-text") || "Loading options...").trim(), _ = this.hasAttribute("disabled"), x = this.hasAttribute("readonly"), V = this.hasAttribute("clearable");
+        o.hidden = !t && !i, n.hidden = !t, a.textContent = t, p.hidden = !this.hasAttribute("required"), f.hidden = !i, f.textContent = i, q.hidden = !r, q.textContent = r, this._shellEl.setAttribute("data-open", this.open ? "true" : "false"), this._shellEl.setAttribute("data-invalid", r ? "true" : "false"), this._shellEl.setAttribute("data-readonly", x ? "true" : "false"), g.setAttribute("data-open", this.open ? "true" : "false"), g.disabled = _ || x, C.hidden = !V || this._selected.length === 0, C.disabled = _ || x, this._inputEl.setAttribute("aria-expanded", this.open ? "true" : "false"), this._inputEl.setAttribute("aria-busy", L ? "true" : "false"), this._inputEl.placeholder = this._selected.length ? "" : this.getAttribute("placeholder") || "Select options", this._inputEl.disabled = _, this._inputEl.readOnly = x, this._inputEl.value !== this._query && (this._inputEl.value = this._query), this.open ? this._attachOutsideListener() : this._detachOutsideListener(), v.replaceChildren(...this._selectedOptionRecords().map((s) => {
+          const b = document.createElement("span");
+          b.className = "chip", b.textContent = s.label;
+          const d = document.createElement("button");
+          return d.type = "button", d.className = "chip-remove", d.setAttribute("data-value", s.value), d.setAttribute("aria-label", `Remove ${s.label}`), d.textContent = "×", d.disabled = this.hasAttribute("disabled"), d.addEventListener("pointerdown", (c) => {
+            c.preventDefault();
+          }), d.addEventListener("click", (c) => {
+            var m;
+            c.preventDefault(), c.stopPropagation(), this._removeChip(s.value), (m = this._inputEl) == null || m.focus();
+          }), b.append(d), b;
+        }));
+        const A = this._filteredOptions(), B = this._renderLimit(), k = A.slice(0, B), P = A.length > k.length;
+        if (this._panelEl.hidden = !this.open, L) {
+          const s = document.createElement("div");
+          s.className = "status", s.textContent = F, this._panelEl.replaceChildren(s), this._inputEl.removeAttribute("aria-activedescendant");
+          return;
+        }
+        if (!A.length) {
+          const s = document.createElement("div");
+          s.className = "status", s.textContent = "No matching options", this._panelEl.replaceChildren(s), this._inputEl.removeAttribute("aria-activedescendant");
+          return;
+        }
+        const $ = new Set(this._selected), T = (e = this._panelEl.getActiveItem()) == null ? void 0 : e.getAttribute("data-value"), y = [];
+        let w = null;
+        if (k.forEach((s, b) => {
+          if (s.group && s.group !== w) {
+            const u = document.createElement("div");
+            u.className = "group", u.setAttribute("role", "presentation"), u.textContent = s.group, y.push(u), w = s.group;
+          } else
+            s.group || (w = null);
+          const d = $.has(s.value), c = document.createElement("button");
+          c.className = "option", c.type = "button", c.id = `${this._uid}-option-${b}`, c.setAttribute("role", "option"), c.setAttribute("data-value", s.value), c.setAttribute("data-selected", String(d)), c.setAttribute("data-indicator", I), c.setAttribute("aria-selected", d ? "true" : "false"), (s.disabled || _ || x) && (c.disabled = !0), c.addEventListener("pointerdown", (u) => {
+            u.preventDefault();
+          }), c.addEventListener("click", (u) => {
+            var N;
+            u.preventDefault(), !s.disabled && (this._activeValue = s.value, this._toggleValue(s.value, "option"), this._query = "", this._inputEl && (this._inputEl.value = ""), (N = this._inputEl) == null || N.focus());
+          });
+          const m = document.createElement("div");
+          m.className = "option-text";
+          const S = document.createElement("span");
+          if (S.className = "option-label", S.textContent = s.label, m.append(S), s.description) {
+            const u = document.createElement("span");
+            u.className = "option-description", u.textContent = s.description, m.append(u);
+          }
+          if (I !== "none") {
+            const u = document.createElement("span");
+            u.className = "check", u.textContent = d ? "✓" : "", c.append(u);
+          }
+          c.append(m), y.push(c);
+        }), P) {
+          const s = document.createElement("div");
+          s.className = "status", s.textContent = `Showing first ${k.length} results. Keep typing to narrow the list.`, y.push(s);
+        }
+        this._panelEl.replaceChildren(...y);
+        const R = T || this._activeValue || this._selected[this._selected.length - 1] || null, z = this._findOptionNode(R), h = z && !z.hasAttribute("disabled") ? this._panelEl.setActiveItem(z, { focus: !1, owner: this._inputEl, scroll: !1 }) : (this._panelEl.clearActive(), null);
+        this._activeValue = (h == null ? void 0 : h.getAttribute("data-value")) || null, h != null && h.id ? this._inputEl.setAttribute("aria-activedescendant", h.id) : this._inputEl.removeAttribute("aria-activedescendant");
+      } finally {
+        this._isSyncingUi = !1, this._needsSyncUi && (this._needsSyncUi = !1, this._syncUi());
+      }
+    }
+  }
+}
+typeof customElements < "u" && !customElements.get("ui-multi-select") && customElements.define("ui-multi-select", j);
+export {
+  j as UIMultiSelect
+};