@editora/ui-core 0.1.9 → 0.1.12

package/dist/multi-select.cjs.js

@@ -0,0 +1,549 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const K=require("./ElementBase-1b301e7f.js"),U=require("./collection-a2969ad2.js");require("./listbox-ef2f708e.js");require("./collection.cjs.js");let W=0;const j=`
+  :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 N(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 H(l){return l==="sm"||l==="1"?"sm":l==="lg"||l==="3"?"lg":"md"}class F extends K.ElementBase{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=N(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>${j}</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=N(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=H(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.normalizeCollectionText(this._query);return e?this._options.filter(t=>U.normalizeCollectionText(t.label).includes(e)||U.normalizeCollectionText(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"),q=this.root.querySelector(".clear"),C=this.root.querySelector(".error"),I=this._selectionIndicator(),L=this.hasAttribute("loading"),V=(this.getAttribute("loading-text")||"Loading options...").trim(),_=this.hasAttribute("disabled"),x=this.hasAttribute("readonly"),B=this.hasAttribute("clearable");o.hidden=!t&&!i,n.hidden=!t,a.textContent=t,p.hidden=!this.hasAttribute("required"),f.hidden=!i,f.textContent=i,C.hidden=!r,C.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,q.hidden=!B||this._selected.length===0,q.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",u=>{u.preventDefault()}),d.addEventListener("click",u=>{var m;u.preventDefault(),u.stopPropagation(),this._removeChip(s.value),(m=this._inputEl)==null||m.focus()}),b.append(d),b}));const A=this._filteredOptions(),P=this._renderLimit(),k=A.slice(0,P),T=A.length>k.length;if(this._panelEl.hidden=!this.open,L){const s=document.createElement("div");s.className="status",s.textContent=V,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),R=(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 c=document.createElement("div");c.className="group",c.setAttribute("role","presentation"),c.textContent=s.group,y.push(c),w=s.group}else s.group||(w=null);const d=$.has(s.value),u=document.createElement("button");u.className="option",u.type="button",u.id=`${this._uid}-option-${b}`,u.setAttribute("role","option"),u.setAttribute("data-value",s.value),u.setAttribute("data-selected",String(d)),u.setAttribute("data-indicator",I),u.setAttribute("aria-selected",d?"true":"false"),(s.disabled||_||x)&&(u.disabled=!0),u.addEventListener("pointerdown",c=>{c.preventDefault()}),u.addEventListener("click",c=>{var O;c.preventDefault(),!s.disabled&&(this._activeValue=s.value,this._toggleValue(s.value,"option"),this._query="",this._inputEl&&(this._inputEl.value=""),(O=this._inputEl)==null||O.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 c=document.createElement("span");c.className="option-description",c.textContent=s.description,m.append(c)}if(I!=="none"){const c=document.createElement("span");c.className="check",c.textContent=d?"✓":"",u.append(c)}u.append(m),y.push(u)}),T){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 M=R||this._activeValue||this._selected[this._selected.length-1]||null,z=this._findOptionNode(M),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",F);exports.UIMultiSelect=F;