@slotted/angular 0.1.0-beta.8 → 0.1.0-beta.9

package/fesm2022/slotted-angular-tags-input.mjs

@@ -1,10 +1,11 @@
 import { writeToClipboard } from '@slotted/core/clipboard';
-import { createFilter } from '@slotted/core/collection';
+import { createFilter, revealWithin } from '@slotted/core/collection';
 import { createArrowNavigation, createRemovalFocus } from '@slotted/core/focus';
 import { tagsInputMessages } from '@slotted/core/i18n';
 import { getLiveAnnouncer } from '@slotted/core/live-announcer';
 import { createWidthGate } from '@slotted/core/measure';
 import { createCollapse } from '@slotted/core/overflow';
+import { createPositioner } from '@slotted/core/positioner';
 import { createControllable } from '@slotted/core/state';
 import { constraintVerdict, admitValues, joinValues, splitValues } from '@slotted/core/tags';
 import * as i0 from '@angular/core';
@@ -93,6 +94,12 @@ function longDuration(element) {
  *
  * **What is refused is reported, not dropped.** `valueRefuse` carries the
  * values that did not get in and the cause.
+ *
+ * **Suggestions make the input a combobox.** With `suggestions` the input
+ * takes the APG combobox's list autocomplete without automatic selection: the
+ * listbox under the frame holds what the typed text matches, nothing is
+ * highlighted until an arrow key moves, and the text the reader typed still
+ * commits as it does without them.
  */
 class SlTagsInput {
     static flag = (given) => given === undefined ? undefined : booleanAttribute(given);
@@ -140,6 +147,17 @@ class SlTagsInput {
     /** Runs before a value is judged. Trim by default. */
     normalize = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "normalize" }] : /* istanbul ignore next */ []));
+    /**
+     * Values the reader may choose instead of typing them whole. Present, the
+     * input is a combobox: a listbox under the field holds the suggestions the
+     * typed text matches by the locale's collator, minus the values already
+     * chosen; ArrowDown and ArrowUp move through it and Enter adds the
+     * highlighted one. A chosen suggestion is normalized, judged, deduplicated
+     * and capped like typed text, and typed text still commits as it does
+     * without suggestions.
+     */
+    suggestions = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "suggestions" }] : /* istanbul ignore next */ []));
     /** How a paste is split. The default splits on the delimiters and on line breaks. */
     split = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "split" }] : /* istanbul ignore next */ []));
@@ -190,10 +208,13 @@ class SlTagsInput {
     ...(ngDevMode ? [{ debugName: "rowRef" }] : /* istanbul ignore next */ []));
     countRef = viewChild('count', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "countRef" }] : /* istanbul ignore next */ []));
+    listRef = viewChild('suggestionList', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "listRef" }] : /* istanbul ignore next */ []));
     field = inject(SlField, { optional: true });
     identifier = Math.random().toString(36).slice(2, 8);
     ownId = `sl-tags-input-${this.identifier}`;
     hintId = `${this.ownId}-hint`;
+    listboxId = `${this.ownId}-suggestions`;
     hiddenCount = signal(1, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hiddenCount" }] : /* istanbul ignore next */ []));
     narrow = signal(false, /* @ts-ignore */
@@ -207,11 +228,19 @@ class SlTagsInput {
     ...(ngDevMode ? [{ debugName: "editingIndex" }] : /* istanbul ignore next */ []));
     editingText = signal('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "editingText" }] : /* istanbul ignore next */ []));
+    /** Whether the reader asked for the suggestions, by typing or by an arrow key. */
+    suggesting = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "suggesting" }] : /* istanbul ignore next */ []));
+    /** The highlighted suggestion's index, or -1 while none is. */
+    highlight = signal(-1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "highlight" }] : /* istanbul ignore next */ []));
     ring = null;
     removal = null;
     collapse = null;
     gate = null;
     currentTimer = null;
+    placement = null;
+    placedOn = null;
     reverting = false;
     disabledByForm = signal(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "disabledByForm" }] : /* istanbul ignore next */ []));
@@ -269,6 +298,24 @@ class SlTagsInput {
     ...(ngDevMode ? [{ debugName: "full" }] : /* istanbul ignore next */ []));
     collator = computed(() => createFilter({ locale: this.locale() ?? this.inForceLocale() }), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "collator" }] : /* istanbul ignore next */ []));
+    /** What the typed text matches, by the locale's collator, minus what is already chosen. */
+    matches = computed(() => {
+        const suggestions = this.suggestions();
+        if (suggestions === undefined)
+            return [];
+        const { contains, equals } = this.collator();
+        const query = this.inputValue().trim();
+        const held = this.value();
+        return suggestions.filter((entry) => contains(entry, query) && !held.some((chosen) => equals(chosen, entry)));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "matches" }] : /* istanbul ignore next */ []));
+    popup = computed(() => this.suggestions() !== undefined &&
+        this.suggesting() &&
+        !this.frozen() &&
+        this.matches().length > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "popup" }] : /* istanbul ignore next */ []));
+    active = computed(() => this.popup() && this.highlight() < this.matches().length ? this.highlight() : -1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
     /**
      * A detached input carrying the visible one's constraints, rebuilt when they
      * change, so the platform's judgement reads the attributes the template is
@@ -359,6 +406,37 @@ class SlTagsInput {
                 : failure.message || this.t('invalid');
             untracked(() => this.controlRef().nativeElement.setCustomValidity(message));
         });
+        /* Under the frame and as wide as it, flipped above when there is no room. */
+        afterRenderEffect(() => {
+            const list = this.listRef()?.nativeElement ?? null;
+            untracked(() => {
+                if (list === this.placedOn)
+                    return;
+                this.placement?.destroy();
+                this.placement = null;
+                this.placedOn = list;
+                if (list === null)
+                    return;
+                this.placement = createPositioner(this.host.nativeElement, list, {
+                    side: 'bottom',
+                    align: 'start',
+                    sideOffset: 4,
+                    matchWidth: true,
+                    strategy: 'fixed',
+                });
+                void this.placement.update();
+            });
+        });
+        /* The highlighted suggestion is kept in sight inside a list that scrolls. */
+        afterRenderEffect(() => {
+            const active = this.active();
+            const list = this.listRef()?.nativeElement;
+            if (active < 0 || list === undefined)
+                return;
+            const option = list.querySelector(`[id="${this.optionId(active)}"]`);
+            if (option !== null)
+                revealWithin(option, list);
+        });
         /* A Reactive Form is told when what the family judges has changed. */
         effect(() => {
             this.verdicts();
@@ -371,6 +449,7 @@ class SlTagsInput {
             this.removal?.destroy();
             this.collapse?.destroy();
             this.gate?.destroy();
+            this.placement?.destroy();
             if (this.currentTimer !== null)
                 clearTimeout(this.currentTimer);
         });
@@ -401,6 +480,9 @@ class SlTagsInput {
     chipFrozen(value) {
         return this.frozen() || this.isLocked(value);
     }
+    optionId(index) {
+        return `${this.listboxId}-${index}`;
+    }
     messageId(index) {
         return `${this.ownId}-message-${index}`;
     }
@@ -585,6 +667,7 @@ class SlTagsInput {
     }
     /** The typed text, committed as one or several values. */
     commitText(source) {
+        this.closeSuggestions();
         const text = this.inputValue();
         if (text.trim() === '')
             return false;
@@ -593,7 +676,20 @@ class SlTagsInput {
         return true;
     }
     onInput(event) {
-        this.setInputValue(event.target.value, 'keyboard', event);
+        const text = event.target.value;
+        this.suggesting.set(text.trim() !== '');
+        this.highlight.set(-1);
+        this.setInputValue(text, 'keyboard', event);
+    }
+    closeSuggestions() {
+        this.suggesting.set(false);
+        this.highlight.set(-1);
+    }
+    /** A suggestion, through the same door as typed text. */
+    choose(entry, source) {
+        this.admit([entry], source);
+        this.setInputValue('', 'submit', source);
+        this.closeSuggestions();
     }
     onEditInput(event) {
         this.editingText.set(event.target.value);
@@ -715,15 +811,51 @@ class SlTagsInput {
             return;
         }
         switch (event.key) {
-            case 'Enter':
+            case 'ArrowDown':
+            case 'ArrowUp': {
+                if (this.suggestions() === undefined || this.frozen())
+                    return;
+                event.preventDefault();
+                const down = event.key === 'ArrowDown';
+                const count = this.matches().length;
+                const active = this.active();
+                if (!this.popup()) {
+                    this.suggesting.set(true);
+                    this.highlight.set(down ? 0 : count - 1);
+                    return;
+                }
+                /* The APG's list autocomplete: past either end, round to the other. */
+                if (active < 0)
+                    this.highlight.set(down ? 0 : count - 1);
+                else
+                    this.highlight.set((active + (down ? 1 : count - 1)) % count);
+                return;
+            }
+            case 'Tab':
+                this.closeSuggestions();
+                return;
+            case 'Enter': {
                 /* With text, commits and never submits; with none, the platform's
                    implicit submission is left alone. */
                 if (this.frozen())
                     return;
+                const active = this.active();
+                if (active >= 0) {
+                    event.preventDefault();
+                    this.choose(this.matches()[active], event);
+                    return;
+                }
                 if (this.commitText(event))
                     event.preventDefault();
                 return;
+            }
             case 'Escape':
+                /* An open list closes first, and the text stays. */
+                if (this.popup()) {
+                    event.preventDefault();
+                    this.closeSuggestions();
+                    return;
+                }
                 if (this.inputValue() === '')
                     return;
                 event.preventDefault();
@@ -772,6 +904,7 @@ class SlTagsInput {
     }
     onBlur(event) {
         this.onTouched();
+        this.closeSuggestions();
         const next = event.relatedTarget;
         if (next instanceof Node && this.host.nativeElement.contains(next))
             return;
@@ -866,18 +999,20 @@ class SlTagsInput {
         return null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTagsInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlTagsInput, isStandalone: true, selector: "sl-tags-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, inputValue: { classPropertyName: "inputValue", publicName: "inputValue", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, list: { classPropertyName: "list", publicName: "list", isSignal: true, isRequired: false, transformFunction: null }, pattern: { classPropertyName: "pattern", publicName: "pattern", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, inputMode: { classPropertyName: "inputMode", publicName: "inputMode", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, validateValue: { classPropertyName: "validateValue", publicName: "validateValue", isSignal: true, isRequired: false, transformFunction: null }, normalize: { classPropertyName: "normalize", publicName: "normalize", isSignal: true, isRequired: false, transformFunction: null }, split: { classPropertyName: "split", publicName: "split", isSignal: true, isRequired: false, transformFunction: null }, formatLabel: { classPropertyName: "formatLabel", publicName: "formatLabel", isSignal: true, isRequired: false, transformFunction: null }, lockedValues: { classPropertyName: "lockedValues", publicName: "lockedValues", isSignal: true, isRequired: false, transformFunction: null }, delimiters: { classPropertyName: "delimiters", publicName: "delimiters", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, overflow: { classPropertyName: "overflow", publicName: "overflow", isSignal: true, isRequired: false, transformFunction: null }, invalidValues: { classPropertyName: "invalidValues", publicName: "invalidValues", isSignal: true, isRequired: false, transformFunction: null }, pendingOnBlur: { classPropertyName: "pendingOnBlur", publicName: "pendingOnBlur", isSignal: true, isRequired: false, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null }, addOnPaste: { classPropertyName: "addOnPaste", publicName: "addOnPaste", isSignal: true, isRequired: false, transformFunction: null }, allowDuplicates: { classPropertyName: "allowDuplicates", publicName: "allowDuplicates", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, reorderable: { classPropertyName: "reorderable", publicName: "reorderable", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", valueChangeRequest: "valueChangeRequest", inputValue: "inputValueChange", inputValueChangeRequest: "inputValueChangeRequest", valueRefuse: "valueRefuse", valueCopy: "valueCopy" }, host: { attributes: { "data-ui": "tags-input", "data-part": "root" }, listeners: { "focusin": "onFocusIn()", "focusout": "onFocusOut($event)" }, properties: { "attr.data-size": "resolvedSize()", "attr.data-variant": "resolvedVariant()", "attr.data-overflow": "resolvedOverflow()", "attr.data-full-width": "resolvedFullWidth() ? '' : null", "attr.data-disabled": "resolvedDisabled() ? '' : null", "attr.data-readonly": "resolvedReadOnly() ? '' : null", "attr.data-invalid": "isInvalid() ? '' : null", "attr.data-required": "resolvedRequired() ? '' : null", "attr.data-complete": "full() ? '' : null", "attr.data-narrow": "narrow() ? '' : null", "attr.data-expanded": "resolvedOverflow() === 'collapse' && expanded() ? '' : null" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlTagsInput, isStandalone: true, selector: "sl-tags-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, inputValue: { classPropertyName: "inputValue", publicName: "inputValue", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, list: { classPropertyName: "list", publicName: "list", isSignal: true, isRequired: false, transformFunction: null }, pattern: { classPropertyName: "pattern", publicName: "pattern", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, inputMode: { classPropertyName: "inputMode", publicName: "inputMode", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, validateValue: { classPropertyName: "validateValue", publicName: "validateValue", isSignal: true, isRequired: false, transformFunction: null }, normalize: { classPropertyName: "normalize", publicName: "normalize", isSignal: true, isRequired: false, transformFunction: null }, suggestions: { classPropertyName: "suggestions", publicName: "suggestions", isSignal: true, isRequired: false, transformFunction: null }, split: { classPropertyName: "split", publicName: "split", isSignal: true, isRequired: false, transformFunction: null }, formatLabel: { classPropertyName: "formatLabel", publicName: "formatLabel", isSignal: true, isRequired: false, transformFunction: null }, lockedValues: { classPropertyName: "lockedValues", publicName: "lockedValues", isSignal: true, isRequired: false, transformFunction: null }, delimiters: { classPropertyName: "delimiters", publicName: "delimiters", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, overflow: { classPropertyName: "overflow", publicName: "overflow", isSignal: true, isRequired: false, transformFunction: null }, invalidValues: { classPropertyName: "invalidValues", publicName: "invalidValues", isSignal: true, isRequired: false, transformFunction: null }, pendingOnBlur: { classPropertyName: "pendingOnBlur", publicName: "pendingOnBlur", isSignal: true, isRequired: false, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null }, addOnPaste: { classPropertyName: "addOnPaste", publicName: "addOnPaste", isSignal: true, isRequired: false, transformFunction: null }, allowDuplicates: { classPropertyName: "allowDuplicates", publicName: "allowDuplicates", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, reorderable: { classPropertyName: "reorderable", publicName: "reorderable", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", valueChangeRequest: "valueChangeRequest", inputValue: "inputValueChange", inputValueChangeRequest: "inputValueChangeRequest", valueRefuse: "valueRefuse", valueCopy: "valueCopy" }, host: { attributes: { "data-ui": "tags-input", "data-ui-tags-input": "", "data-part": "root", "data-part-root": "" }, listeners: { "focusin": "onFocusIn()", "focusout": "onFocusOut($event)" }, properties: { "attr.data-size": "resolvedSize()", "attr.data-variant": "resolvedVariant()", "attr.data-overflow": "resolvedOverflow()", "attr.data-full-width": "resolvedFullWidth() ? '' : null", "attr.data-disabled": "resolvedDisabled() ? '' : null", "attr.data-readonly": "resolvedReadOnly() ? '' : null", "attr.data-invalid": "isInvalid() ? '' : null", "attr.data-required": "resolvedRequired() ? '' : null", "attr.data-complete": "full() ? '' : null", "attr.data-narrow": "narrow() ? '' : null", "attr.data-expanded": "resolvedOverflow() === 'collapse' && expanded() ? '' : null" } }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SlTagsInput), multi: true },
             { provide: NG_VALIDATORS, useExisting: forwardRef(() => SlTagsInput), multi: true },
-        ], viewQueries: [{ propertyName: "controlRef", first: true, predicate: ["control"], descendants: true, isSignal: true }, { propertyName: "rowRef", first: true, predicate: ["row"], descendants: true, isSignal: true }, { propertyName: "countRef", first: true, predicate: ["count"], descendants: true, isSignal: true }], exportAs: ["slTagsInput"], ngImport: i0, template: `
+        ], viewQueries: [{ propertyName: "controlRef", first: true, predicate: ["control"], descendants: true, isSignal: true }, { propertyName: "rowRef", first: true, predicate: ["row"], descendants: true, isSignal: true }, { propertyName: "countRef", first: true, predicate: ["count"], descendants: true, isSignal: true }, { propertyName: "listRef", first: true, predicate: ["suggestionList"], descendants: true, isSignal: true }], exportAs: ["slTagsInput"], ngImport: i0, template: `
     <div
       data-part="control"
+      data-part-control=""
       role="grid"
       [attr.aria-label]="gridLabel()"
       [attr.aria-labelledby]="gridLabelledBy()"
     >
       <div
         data-part="chips"
+        data-part-chips=""
         role="row"
         #row
         [attr.aria-label]="countText()"
@@ -889,12 +1024,14 @@ class SlTagsInput {
               role="gridcell"
               tabindex="-1"
               data-ui="tag"
+              data-ui-tag=""
               data-part="root"
+              data-part-root=""
               data-size="sm"
               data-variant="soft"
               [attr.data-value]="chip"
             >
-              <span data-part="body">
+              <span data-part="body" data-part-body="">
                 <input
                   type="text"
                   [attr.aria-label]="labelFor(chip)"
@@ -911,7 +1048,9 @@ class SlTagsInput {
               role="gridcell"
               tabindex="-1"
               data-ui="tag"
+              data-ui-tag=""
               data-part="root"
+              data-part-root=""
               data-size="sm"
               data-variant="soft"
               [attr.data-value]="chip"
@@ -926,22 +1065,25 @@ class SlTagsInput {
               (keydown)="onChipKeyDown(chip, index, $event)"
               (dblclick)="onChipDoubleClick(chip, index)"
             >
-              <span data-part="body">
+              <span data-part="body" data-part-body="">
                 @if (messageFor(index); as message) {
-                  <span data-part="start"
+                  <span data-part="start" data-part-start=""
                     ><span slIcon><svg slGlyph name="circle-alert"></svg></span
                   ></span>
                 }
-                <span data-part="label">{{ labelFor(chip) }}</span>
+                <span data-part="label" data-part-label="">{{ labelFor(chip) }}</span>
               </span>
               @if (messageFor(index); as message) {
-                <span data-part="message" [id]="messageId(index)">{{ message }}</span>
+                <span data-part="message" data-part-message="" [id]="messageId(index)">{{
+                  message
+                }}</span>
               }
               @if (!chipFrozen(chip)) {
                 <button
                   type="button"
                   tabindex="-1"
                   data-part="remove"
+                  data-part-remove=""
                   [attr.aria-label]="removeLabelFor(chip)"
                   (click)="onRemoveClick(index, $event)"
                 >
@@ -959,20 +1101,23 @@ class SlTagsInput {
             tabindex="-1"
             data-count
             data-ui="tag"
+            data-ui-tag=""
             data-part="root"
+            data-part-root=""
             data-size="sm"
             data-variant="outline"
             (click)="focus()"
           >
-            <span data-part="body">
-              <span data-part="label">+{{ hiddenCount() }}</span>
+            <span data-part="body" data-part-body="">
+              <span data-part="label" data-part-label="">+{{ hiddenCount() }}</span>
             </span>
           </span>
         }
-        <span data-part="field" role="gridcell">
+        <span data-part="field" data-part-field="" role="gridcell">
           <input
             #control
             data-part="input"
+            data-part-input=""
             [type]="type()"
             [id]="controlId()"
             [value]="inputValue()"
@@ -990,6 +1135,11 @@ class SlTagsInput {
             [attr.aria-label]="ariaLabel() ?? null"
             [attr.aria-describedby]="describedBy()"
             [attr.aria-invalid]="isInvalid() ? true : null"
+            [attr.role]="suggestions() === undefined ? null : 'combobox'"
+            [attr.aria-autocomplete]="suggestions() === undefined ? null : 'list'"
+            [attr.aria-expanded]="suggestions() === undefined ? null : popup()"
+            [attr.aria-controls]="popup() ? listboxId : null"
+            [attr.aria-activedescendant]="active() < 0 ? null : optionId(active())"
             (input)="onInput($event)"
             (keydown)="onKeyDown($event)"
             (paste)="onPaste($event)"
@@ -1000,19 +1150,47 @@ class SlTagsInput {
     </div>
 
     @if (counterText(); as counter) {
-      <span data-part="counter" aria-hidden="true">{{ counter }}</span>
+      <span data-part="counter" data-part-counter="" aria-hidden="true">{{ counter }}</span>
     }
     @if (showClear()) {
       <button
         type="button"
         data-part="clear"
+        data-part-clear=""
         [attr.aria-label]="t('clear')"
         (click)="onClear($event)"
       >
         <span slIcon><svg slGlyph name="x"></svg></span>
       </button>
     }
-    <span data-part="hint" [id]="hintId">{{ hintText() }}</span>
+    <span data-part="hint" data-part-hint="" [id]="hintId">{{ hintText() }}</span>
+    @if (popup()) {
+      <div
+        #suggestionList
+        data-part="suggestions"
+        data-part-suggestions=""
+        role="listbox"
+        [id]="listboxId"
+        [attr.aria-label]="t('suggestions')"
+      >
+        @for (entry of matches(); track $index) {
+          <!-- Focus stays in the input: the option is chosen, not focused. -->
+          <div
+            data-part="suggestion"
+            data-part-suggestion=""
+            role="option"
+            [id]="optionId($index)"
+            [attr.aria-selected]="$index === active()"
+            [attr.data-highlighted]="$index === active() ? '' : null"
+            (pointerdown)="$event.preventDefault()"
+            (pointermove)="highlight.set($index)"
+            (click)="choose(entry, $event)"
+          >
+            {{ labelFor(entry) }}
+          </div>
+        }
+      </div>
+    }
 
     <!--
       One hidden input per value, all under the same name: that is how a plain
@@ -1023,7 +1201,7 @@ class SlTagsInput {
         <input type="hidden" [name]="submissionName" [attr.form]="form() ?? null" [value]="held" />
       }
     }
-  `, isInline: true, styles: ["@layer slotted.components{[data-ui=tags-input][data-part=root]{--_font-size: var(--slotted-control-font-size-md, 13px);--_height: var(--slotted-control-height-md, 34px);--_padding-inline: var(--slotted-control-padding-inline-md, 13px);--_gap: var(--slotted-control-gap-md, 8px);--_icon-floor: var(--slotted-tags-input-icon-size-min, 14px);--_icon-size: max(var(--_icon-floor), var(--slotted-control-icon-size-md, 16px));--_action-size: var( --slotted-tags-input-action-size, min(calc(var(--_icon-size) + 2 * var(--slotted-space-2, .25rem)), var(--_inner-size)) );--_row-air: var(--slotted-space-1, .125rem);--_inner-size: var(--slotted-control-inner-size-md, 24px);--_row-size: var(--_inner-size);--_row-gap: var(--slotted-space-2, .25rem);align-items:center;background-color:var(--slotted-tags-input-background, var(--slotted-control-surface, Field));border:var(--slotted-control-border-width, 1px) solid var(--slotted-tags-input-border-color, var(--slotted-control-border-color, ButtonBorder));border-radius:var(--slotted-tags-input-radius, var(--slotted-control-radius, 4px));box-shadow:var(--slotted-tags-input-shadow, var(--slotted-control-shadow, none));box-sizing:border-box;color:var(--slotted-tags-input-color, var(--slotted-text, CanvasText));display:flex;font-family:var(--slotted-control-font-family, system-ui, sans-serif);font-size:var(--_font-size);gap:var(--slotted-space-1, .125rem);inline-size:100%;min-block-size:var(--_height);min-inline-size:0;padding-inline-start:var(--_padding-inline);padding-inline-end:max(0px,calc(var(--_padding-inline) - (var(--_action-size) - var(--_icon-size)) / 2));position:relative;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),border-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),box-shadow var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=tags-input][data-part=root]:not([data-full-width]){inline-size:auto}[data-ui=tags-input]>[data-part=control]{display:flex;flex:1 1 auto;min-inline-size:0;align-self:stretch}[data-ui=tags-input]>[data-part=control]+*{margin-inline-start:var(--_row-gap)}[data-ui=tags-input] [data-part=chips]{align-content:safe center;align-items:center;box-sizing:border-box;column-gap:var(--_row-gap);display:flex;flex:1 1 auto;flex-wrap:wrap;min-inline-size:0;padding-block:var(--_row-air);padding-inline:var(--_row-air);margin-inline:calc(-1 * var(--_row-air));row-gap:var(--_row-gap);max-block-size:calc(3 * var(--_row-size) + 2 * var(--_row-gap) + 2 * var(--_row-air));overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}[data-ui=tags-input] [data-part=chips]::-webkit-scrollbar{display:none}[data-ui=tags-input][data-overflow=collapse]:not([data-expanded]) [data-part=chips]{flex-wrap:nowrap;max-block-size:none;overflow:hidden}[data-ui=tags-input][data-overflow=collapse][data-expanded] [data-part=chips]>[data-count]{display:none}[data-ui=tags-input] [data-part=chips] input:not([data-part=input]){background-color:transparent;border:0;color:inherit;font:inherit;min-inline-size:0;outline:none;padding:0}[data-ui=tags-input] [data-part=chips]>:not([data-part=field]){flex:0 0 auto;max-inline-size:100%;min-block-size:var(--_row-size);min-inline-size:0}[data-ui=tags-input] [data-part=chips]{--slotted-control-inner-size: var(--_inner-size)}[data-ui=tags-input] [data-part=field]{align-items:center;display:flex;flex:1 1 var(--slotted-tags-input-field-basis, 4rem);min-block-size:var(--_row-size);min-inline-size:var(--slotted-tags-input-field-min, 2.5rem)}[data-ui=tags-input] [data-part=input]{background-color:transparent;border:0;color:inherit;flex:1 1 auto;font:inherit;outline:none;padding:0;min-inline-size:0;text-overflow:ellipsis}[data-ui=tags-input] [data-part=input]::placeholder{color:var(--slotted-tags-input-placeholder-color, var(--slotted-text-muted, GrayText));text-overflow:ellipsis}[data-ui=tags-input] [data-part=input]:autofill{box-shadow:inset 0 0 0 100px var(--slotted-tags-input-autofill-background, var(--slotted-tone-accent-surface));-webkit-text-fill-color:var(--slotted-tags-input-color, var(--slotted-text, CanvasText))}[data-ui=tags-input] [data-part=chips]>:not([data-part=field]):focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(-1 * var(--slotted-focus-ring-width, 2px))}[data-ui=tags-input] [data-part=chips]>[data-current]{--slotted-tag-border-color: var( --slotted-tags-input-current-border-color, var(--slotted-tone-accent-border) )}[data-ui=tags-input] [data-part=chips]>[data-count]{cursor:pointer;flex:none}[data-ui=tags-input]>[data-part=counter]{align-self:center;color:var(--slotted-tags-input-counter-color, var(--slotted-text-muted, GrayText));flex:none;font-size:var(--slotted-font-size-xs, .75rem);font-variant-numeric:tabular-nums;line-height:var(--slotted-line-height-sm, 1.45);padding-inline:var(--slotted-space-1, .125rem);unicode-bidi:plaintext;white-space:nowrap}[data-ui=tags-input][data-complete]>[data-part=counter]{color:var(--slotted-tags-input-counter-complete-color, var(--slotted-tone-accent-text));font-weight:var(--slotted-font-weight-medium, 500)}[data-ui=tags-input][data-narrow] [data-part=chips]>:not([data-part=field]){display:none}[data-ui=tags-input] :is([data-part=message],[data-part=hint]){block-size:1px;border:0;clip-path:inset(50%);inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap}[data-ui=tags-input]>[data-part=clear]{align-items:center;align-self:center;appearance:none;background-color:transparent;block-size:var(--_action-size);border:0;border-radius:var(--slotted-tags-input-radius, var(--slotted-control-radius, 4px));color:var(--slotted-tags-input-action-color, var(--slotted-text-muted, GrayText));cursor:pointer;display:inline-flex;flex:0 0 auto;inline-size:var(--_action-size);justify-content:center;padding:0;position:relative;touch-action:manipulation;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);-webkit-tap-highlight-color:transparent}[data-ui=tags-input]>[data-part=clear]:after{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-min, 24px)) / 2));position:absolute}@media(pointer:coarse){[data-ui=tags-input]>[data-part=clear]:after{inset:min(0px,calc((100% - var(--slotted-target-comfortable, 44px)) / 2));inset-inline-start:0}}[data-ui=tags-input]>[data-part=clear]{--slotted-icon-size: var(--_icon-size)}[data-ui=tags-input][data-part=root][data-size=sm]{--_font-size: var(--slotted-control-font-size-sm, 12px);--_height: var(--slotted-control-height-sm, 30px);--_inner-size: var(--slotted-control-inner-size-sm, 22px);--_padding-inline: var(--slotted-control-padding-inline-sm, 10px);--_gap: var(--slotted-control-gap-sm, 6px);--_icon-size: max(var(--_icon-floor), var(--slotted-control-icon-size-sm, 14px))}[data-ui=tags-input][data-part=root][data-size=md]{--_font-size: var(--slotted-control-font-size-md, 13px);--_height: var(--slotted-control-height-md, 34px);--_padding-inline: var(--slotted-control-padding-inline-md, 13px);--_gap: var(--slotted-control-gap-md, 8px);--_icon-size: max(var(--_icon-floor), var(--slotted-control-icon-size-md, 16px));--_inner-size: var(--slotted-control-inner-size-md, 24px)}[data-ui=tags-input][data-part=root][data-size=lg]{--_font-size: var(--slotted-control-font-size-lg, 14px);--_height: var(--slotted-control-height-lg, 38px);--_inner-size: var(--slotted-control-inner-size-lg, 28px);--_padding-inline: var(--slotted-control-padding-inline-lg, 16px);--_gap: var(--slotted-control-gap-lg, 8px);--_icon-size: max(var(--_icon-floor), var(--slotted-control-icon-size-lg, 18px))}[data-ui=tags-input][data-part=root][data-variant=subtle]{background-color:var( --slotted-tags-input-subtle-background, var(--slotted-surface-sunken, Canvas) );border-color:var( --slotted-tags-input-subtle-border-color, var(--slotted-border-subtle, ButtonBorder) )}[data-ui=tags-input][data-part=root][data-variant=plain]{background-color:transparent;border-color:transparent;border-radius:var(--slotted-radius-none, 0px);box-shadow:none}@media(forced-colors:active){[data-ui=tags-input][data-part=root][data-variant=plain]{border-color:ButtonBorder}}[data-ui=tags-input][data-part=root]:hover:not([data-disabled]):not([data-readonly]):not([data-invalid]){border-color:var(--slotted-tags-input-hover-border-color, var(--slotted-tone-accent-border))}[data-ui=tags-input][data-part=root][data-variant=subtle]:hover:not([data-disabled]):not([data-readonly]):not([data-invalid]){background-color:var( --slotted-tags-input-subtle-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=tags-input][data-part=root][data-variant=plain]:hover:not([data-disabled]):not([data-readonly]):not([data-invalid]){background-color:var( --slotted-tags-input-plain-hover-background, var(--slotted-tone-secondary-subtle-hover) );border-color:transparent}[data-ui=tags-input][data-part=root]:has([data-part=input]:focus-visible),[data-ui=tags-input][data-part=root]:has([data-part=chips]>:not([data-part=field]):focus-visible){box-shadow:var(--slotted-control-shadow-focus-geometry, 0 1px 4px -1px) var(--slotted-focus-ring-color, Highlight);outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=tags-input][data-part=root][data-variant=plain]:has([data-part=input]:focus-visible),[data-ui=tags-input][data-part=root][data-variant=plain]:has([data-part=chips]>:not([data-part=field]):focus-visible){box-shadow:none;outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}[data-ui=tags-input][data-part=root]:has([data-part=chips]>:not([data-part=field]):focus-visible){outline:none}[data-ui=tags-input][data-part=root][data-invalid]{--slotted-focus-ring-color: var( --slotted-tags-input-invalid-focus-ring-color, var(--slotted-focus-ring-color-invalid, Highlight) );--_invalid-edge-width: var( --slotted-tags-input-invalid-edge-width, var(--slotted-control-invalid-edge-width, 1px) );--_invalid-edge-color: var( --slotted-tags-input-invalid-border-color, var(--slotted-tone-danger-border) );--_invalid-edge: inset 0 0 0 var(--_invalid-edge-width) var(--_invalid-edge-color);border-color:var(--slotted-tags-input-invalid-border-color, var(--slotted-tone-danger-border));box-shadow:var(--_invalid-edge)}[data-ui=tags-input][data-part=root][data-invalid]:has([data-part=input]:focus-visible),[data-ui=tags-input][data-part=root][data-invalid]:has([data-part=chips]>:not([data-part=field]):focus-visible){box-shadow:var(--_invalid-edge),var(--slotted-control-shadow-focus-geometry, 0 1px 4px -1px) var(--slotted-focus-ring-color, Highlight)}[data-ui=tags-input][data-part=root][data-variant=plain][data-invalid]:has([data-part=input]:focus-visible),[data-ui=tags-input][data-part=root][data-variant=plain][data-invalid]:has([data-part=chips]>:not([data-part=field]):focus-visible){box-shadow:inset 0 0 0 calc(var(--slotted-focus-ring-offset, 2px) - var(--slotted-control-border-width, 1px) + var(--_invalid-edge-width)) var(--_invalid-edge-color)}@media(forced-colors:active){[data-ui=tags-input][data-part=root][data-invalid]{outline:var(--_invalid-edge-width) solid CanvasText;outline-offset:calc(-1 * (var(--slotted-control-border-width, 1px) + var(--_invalid-edge-width)))}[data-ui=tags-input][data-part=root][data-invalid]:has([data-part=input]:focus-visible){outline:calc(var(--slotted-focus-ring-width, 2px) + var(--_invalid-edge-width)) double var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=tags-input][data-part=root][data-variant=plain][data-invalid]:has([data-part=input]:focus-visible){outline:calc(var(--slotted-focus-ring-width, 2px) + var(--_invalid-edge-width)) double var(--slotted-focus-ring-color, Highlight);outline-offset:calc(-1 * (var(--slotted-focus-ring-width, 2px) + var(--_invalid-edge-width)))}[data-ui=tags-input][data-part=root][data-invalid]:has([data-part=chips]>:not([data-part=field]):focus-visible),[data-ui=tags-input][data-part=root][data-variant=plain][data-invalid]:has([data-part=chips]>:not([data-part=field]):focus-visible){outline:var(--_invalid-edge-width) solid CanvasText;outline-offset:calc(-1 * (var(--slotted-control-border-width, 1px) + var(--_invalid-edge-width)))}}[data-ui=tags-input][data-part=root][data-readonly]{background-color:var( --slotted-tags-input-readonly-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=tags-input][data-part=root][data-disabled],[data-ui=tags-input][data-part=root]:has([data-part=input]:disabled){background-color:var( --slotted-tags-input-disabled-background, var(--slotted-disabled-background) );border-color:var(--slotted-tags-input-disabled-border-color, var(--slotted-disabled-border));box-shadow:none;color:var(--slotted-tags-input-disabled-color, var(--slotted-disabled-foreground));cursor:not-allowed}[data-ui=tags-input]>[data-part=clear]:hover:not(:disabled):not([data-disabled]){background-color:var( --slotted-tags-input-action-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=tags-input]>[data-part=clear]:active:not(:disabled):not([data-disabled]){background-color:var( --slotted-tags-input-action-active-background, var(--slotted-tone-secondary-subtle-active) )}[data-ui=tags-input]>[data-part=clear]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}}\n", "@layer slotted.components{[data-ui=tag][data-part=root]{--_solid: var(--slotted-tone-secondary-solid-hover);--_solid-hover: var(--slotted-tone-secondary-solid-active);--_solid-active: var(--slotted-tone-secondary-solid-active);--_on-solid: var(--slotted-tone-secondary-on-solid);--_surface: var(--slotted-tone-secondary-surface);--_subtle-hover: var(--slotted-tone-secondary-subtle-hover);--_subtle-active: var(--slotted-tone-secondary-subtle-active);--_border: var(--slotted-tag-border-color, var(--slotted-tone-secondary-border));--_text: var(--slotted-tone-secondary-text);--_edge: var(--_solid);--_font-size: var(--slotted-control-font-size-md, 13px);--_icon-size: var(--slotted-control-icon-size-sm, 14px);--_inner-size: var(--slotted-control-inner-size-sm, 22px);--_inset-block: var(--slotted-tag-inset-block, var(--slotted-space-2, .25rem));--_inset-inline: var(--slotted-space-4, .5rem);--_gap: var(--slotted-space-2, .25rem);--_line-height: var(--slotted-line-height-xs, 1.4);--_edge-width: var(--slotted-tag-border-width, var(--slotted-border-width-thin, 1px));--_radius: var(--slotted-radius-full, 9999px);--_inner-radius: max(0px, calc(var(--_radius) - var(--_edge-width)));--_own-size: calc( var(--_font-size) * var(--_line-height) + 2 * var(--_inset-block) + 2 * var(--_edge-width) );--_block-size: var(--slotted-control-inner-size, var(--_own-size));--_line: min( calc(var(--_font-size) * var(--_line-height)), calc(var(--_block-size) - 2 * var(--_edge-width)) );--_inset: max(0px, calc((var(--_block-size) - var(--_line) - 2 * var(--_edge-width)) / 2));align-items:stretch;border:var(--_edge-width) solid transparent;border-radius:var(--_radius);box-sizing:border-box;display:inline-flex;font-family:var(--slotted-tag-font-family, var(--slotted-control-font-family, sans-serif));font-size:var(--_font-size);font-weight:var(--slotted-tag-font-weight, var(--slotted-font-weight-medium, 500));line-height:var(--_line);max-inline-size:100%;min-block-size:var(--_block-size);vertical-align:middle;white-space:nowrap}[data-ui=tag][data-part=root][hidden]{display:none}[data-ui=tag][data-part=root][data-tone=secondary]{--_edge: var(--_border)}[data-ui=tag][data-part=root][data-tone=accent]{--_solid: var(--slotted-tone-accent-solid);--_solid-hover: var(--slotted-tone-accent-solid-hover);--_solid-active: var(--slotted-tone-accent-solid-active);--_on-solid: var(--slotted-tone-accent-on-solid);--_surface: var(--slotted-tone-accent-surface);--_subtle-hover: var(--slotted-tone-accent-subtle-hover);--_subtle-active: var(--slotted-tone-accent-subtle-active);--_border: var(--slotted-tag-border-color, var(--slotted-tone-accent-border));--_text: var(--slotted-tone-accent-text)}[data-ui=tag][data-part=root][data-tone=success]{--_solid: var(--slotted-tone-success-solid);--_solid-hover: var(--slotted-tone-success-solid-hover);--_solid-active: var(--slotted-tone-success-solid-active);--_on-solid: var(--slotted-tone-success-on-solid);--_surface: var(--slotted-tone-success-surface);--_subtle-hover: var(--slotted-tone-success-subtle-hover);--_subtle-active: var(--slotted-tone-success-subtle-active);--_border: var(--slotted-tag-border-color, var(--slotted-tone-success-border));--_text: var(--slotted-tone-success-text)}[data-ui=tag][data-part=root][data-tone=warning]{--_solid: var(--slotted-tone-warning-solid);--_solid-hover: var(--slotted-tone-warning-solid-hover);--_solid-active: var(--slotted-tone-warning-solid-active);--_on-solid: var(--slotted-tone-warning-on-solid);--_surface: var(--slotted-tone-warning-surface);--_subtle-hover: var(--slotted-tone-warning-subtle-hover);--_subtle-active: var(--slotted-tone-warning-subtle-active);--_border: var(--slotted-tag-border-color, var(--slotted-tone-warning-border));--_text: var(--slotted-tone-warning-text)}[data-ui=tag][data-part=root][data-tone=danger]{--_solid: var(--slotted-tone-danger-solid);--_solid-hover: var(--slotted-tone-danger-solid-hover);--_solid-active: var(--slotted-tone-danger-solid-active);--_on-solid: var(--slotted-tone-danger-on-solid);--_surface: var(--slotted-tone-danger-surface);--_subtle-hover: var(--slotted-tone-danger-subtle-hover);--_subtle-active: var(--slotted-tone-danger-subtle-active);--_border: var(--slotted-tag-border-color, var(--slotted-tone-danger-border));--_text: var(--slotted-tone-danger-text)}[data-ui=tag][data-part=root][data-variant=solid]{background-color:var(--_solid, ButtonFace);border-color:var(--_edge, ButtonFace);color:var(--_on-solid, ButtonText)}[data-ui=tag][data-part=root][data-variant=soft]{background-color:var(--_surface, ButtonFace);border-color:var(--_border, ButtonBorder);color:var(--_text, ButtonText)}[data-ui=tag][data-part=root][data-variant=outline]{background-color:transparent;border-color:var(--_border, ButtonBorder);color:var(--_text, ButtonText)}[data-ui=tag][data-part=root][data-size=sm]{--_font-size: var(--slotted-control-font-size-sm, 12px);--_inset-block: var(--slotted-tag-inset-block, var(--slotted-space-1, .125rem));--_inset-inline: var(--slotted-space-3, .375rem)}[data-ui=tag][data-part=root][data-size=lg]{--_font-size: var(--slotted-control-font-size-lg, 14px);--_icon-size: var(--slotted-control-icon-size-md, 16px);--_inner-size: var(--slotted-control-inner-size-md, 24px);--_inset-block: var(--slotted-tag-inset-block, var(--slotted-space-3, .375rem));--_inset-inline: var(--slotted-space-5, .75rem);--_gap: var(--slotted-space-3, .375rem)}[data-ui=tag][data-part=root][data-shape=square]{--_radius: var(--slotted-radius-sm, 4px)}[data-ui=tag] [data-part=body]{align-items:center;background-color:transparent;border:0;border-end-start-radius:var(--_inner-radius);border-start-start-radius:var(--_inner-radius);box-sizing:border-box;color:inherit;display:inline-flex;font:inherit;gap:var(--_gap);letter-spacing:inherit;min-inline-size:0;padding-block:var(--_inset);padding-inline:var(--_inset-inline);text-align:start;text-decoration:none;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=tag] [data-part=body]:last-child{border-end-end-radius:var(--_inner-radius);border-start-end-radius:var(--_inner-radius)}[data-ui=tag] [data-part=body]:has(+[data-part=remove]){padding-inline-end:var(--_gap)}[data-ui=tag] [data-part=body]:is(a,button){cursor:pointer}[data-ui=tag] [data-part=label]{min-inline-size:0;overflow:hidden;text-overflow:ellipsis;unicode-bidi:plaintext}@supports (text-box: trim-both cap alphabetic){[data-ui=tag] [data-part=label]{margin-block:-.3em;padding-block:.3em;text-box:trim-both cap alphabetic}}[data-ui=tag] [data-part=start],[data-ui=tag] [data-part=end]{--slotted-icon-size: var(--_icon-size);align-items:center;block-size:var(--_icon-size);box-sizing:border-box;display:inline-flex;flex:none;font-size:var(--_icon-size);inline-size:var(--_icon-size);justify-content:center;line-height:1}[data-ui=tag] [data-part=start]>*,[data-ui=tag] [data-part=end]>*{block-size:100%;display:block;inline-size:100%}[data-ui=tag] [data-part=indicator]{--slotted-icon-size: var(--_icon-size);align-items:center;block-size:var(--_icon-size);display:inline-flex;flex:none;inline-size:0;justify-content:center;margin-inline-end:calc(-1 * var(--_gap));opacity:0;overflow:hidden;transition:inline-size var(--slotted-duration-short) var(--slotted-easing-standard),margin-inline-end var(--slotted-duration-short) var(--slotted-easing-standard),opacity var(--slotted-duration-short) var(--slotted-easing-standard)}[data-ui=tag][data-part=root][data-selected] [data-part=indicator]{inline-size:var(--_icon-size);margin-inline-end:0;opacity:1}[data-ui=tag] [data-part=remove]{--slotted-icon-size: var(--_icon-size);align-items:center;appearance:none;background-color:transparent;border:0;border-end-end-radius:var(--_inner-radius);border-start-end-radius:var(--_inner-radius);box-sizing:border-box;color:inherit;cursor:pointer;display:inline-flex;flex:none;inline-size:max(var(--slotted-target-min, 24px),min(calc(var(--_icon-size) + 2 * var(--slotted-space-2, .25rem)),var(--_inner-size)));justify-content:center;padding:0;position:relative;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=tag] [data-part=remove]:after{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-min, 24px)) / 2));position:absolute}@media(pointer:coarse){[data-ui=tag] [data-part=remove]{inline-size:max(var(--slotted-target-min, 24px),min(calc(var(--_icon-size) + 2 * var(--slotted-space-2, .25rem)),var(--_inner-size)),calc(var(--_block-size) - 2 * var(--_edge-width)))}[data-ui=tag] [data-part=remove]:after{inset:min(0px,calc((100% - var(--slotted-target-comfortable, 44px)) / 2))}}[data-ui=tag] [data-part=remove]:first-child{border-end-start-radius:var(--_inner-radius);border-start-start-radius:var(--_inner-radius)}[data-ui=tag][data-part=root][data-selected]:not([data-disabled]){background-color:var(--_solid, ButtonFace);border-color:var(--_edge, ButtonBorder);color:var(--_on-solid, ButtonText)}[data-ui=tag][data-part=root]{--_state-hover: color-mix( in oklab, currentColor var(--slotted-tag-state-layer-hover, 8%), transparent );--_state-active: color-mix( in oklab, currentColor var(--slotted-tag-state-layer-active, 14%), transparent )}[data-ui=tag][data-part=root][data-variant=soft]:not([data-disabled]):not([data-selected]) :is([data-part=body]:is(a,button),[data-part=remove]):hover:not(:disabled){background-color:var(--_state-hover)}[data-ui=tag][data-part=root][data-variant=soft]:not([data-disabled]):not([data-selected]) :is([data-part=body]:is(a,button),[data-part=remove]):active:not(:disabled){background-color:var(--_state-active)}[data-ui=tag][data-part=root][data-variant=outline]:not([data-disabled]):not([data-selected]) :is([data-part=body]:is(a,button),[data-part=remove]):hover:not(:disabled){background-color:var(--_subtle-hover, ButtonFace)}[data-ui=tag][data-part=root][data-variant=outline]:not([data-disabled]):not([data-selected]) :is([data-part=body]:is(a,button),[data-part=remove]):active:not(:disabled){background-color:var(--_subtle-active, ButtonFace)}[data-ui=tag][data-part=root][data-variant=solid]:not([data-disabled]) :is([data-part=body]:is(a,button),[data-part=remove]):hover:not(:disabled),[data-ui=tag][data-part=root][data-selected]:not([data-disabled]) :is([data-part=body]:is(a,button),[data-part=remove]):hover:not(:disabled){background-color:var(--_solid-hover, Highlight)}[data-ui=tag][data-part=root][data-variant=solid]:not([data-disabled]) :is([data-part=body]:is(a,button),[data-part=remove]):active:not(:disabled),[data-ui=tag][data-part=root][data-selected]:not([data-disabled]) :is([data-part=body]:is(a,button),[data-part=remove]):active:not(:disabled){background-color:var(--_solid-active, Highlight)}[data-ui=tag] [data-part=body]:focus-visible,[data-ui=tag] [data-part=remove]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(-2 * var(--slotted-focus-ring-width, 2px))}[data-ui=tag][data-part=group]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=tag][data-part=root][data-disabled]{color:var(--slotted-disabled-foreground, GrayText)}[data-ui=tag][data-part=root][data-variant=solid][data-disabled],[data-ui=tag][data-part=root][data-variant=soft][data-disabled],[data-ui=tag][data-part=root][data-selected][data-disabled]{background-color:var(--slotted-disabled-background, Canvas);border-color:var(--slotted-disabled-border, GrayText)}[data-ui=tag][data-part=root][data-variant=outline][data-disabled]{background-color:transparent;border-color:var(--slotted-disabled-border, GrayText)}[data-ui=tag][data-part=root][data-disabled] :is([data-part=body],[data-part=remove]),[data-ui=tag] [data-part=body]:disabled,[data-ui=tag] [data-part=remove]:disabled{background-color:transparent;cursor:not-allowed}[data-ui=tag] [data-part=remove]:disabled{color:var(--slotted-disabled-foreground, GrayText)}[data-ui=tag][data-part=group]{align-items:center;display:flex;flex-wrap:wrap;gap:var(--slotted-tag-group-gap, var(--slotted-space-2, .25rem))}[data-ui=tag][data-part=group][data-orientation=vertical]{align-items:start;flex-direction:column;flex-wrap:nowrap;inline-size:fit-content}[data-ui=tag][data-part=group]:empty{display:none}@media(forced-colors:active){[data-ui=tag][data-part=root]{border-color:currentColor}[data-ui=tag][data-part=root][data-selected]:not([data-disabled]){background-color:Highlight;color:HighlightText;forced-color-adjust:none}[data-ui=tag][data-part=root][data-disabled]{border-color:GrayText;color:GrayText}}}\n"], dependencies: [{ kind: "component", type: SlGlyph, selector: "svg[slGlyph]", inputs: ["name", "solid"] }, { kind: "component", type: SlIcon, selector: "[slIcon]", inputs: ["directional", "label", "size", "tone"], exportAs: ["slIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: ["@layer slotted.components{[data-ui-tags-input][data-part-root]{--_font-size: var(--slotted-control-font-size-md, 13px);--_height: var(--slotted-control-height-md, 34px);--_padding-inline: var(--slotted-control-padding-inline-md, 13px);--_gap: var(--slotted-control-gap-md, 8px);--_icon-floor: var(--slotted-tags-input-icon-size-min, 14px);--_icon-size: max(var(--_icon-floor), var(--slotted-control-icon-size-md, 16px));--_action-size: var( --slotted-tags-input-action-size, min(calc(var(--_icon-size) + 2 * var(--slotted-space-2, .25rem)), var(--_inner-size)) );--_row-air: var(--slotted-space-1, .125rem);--_inner-size: var(--slotted-control-inner-size-md, 24px);--_row-size: var(--_inner-size);--_row-gap: var(--slotted-space-2, .25rem);align-items:center;background-color:var(--slotted-tags-input-background, var(--slotted-control-surface, Field));border:var(--slotted-control-border-width, 1px) solid var(--slotted-tags-input-border-color, var(--slotted-control-border-color, ButtonBorder));border-radius:var(--slotted-tags-input-radius, var(--slotted-control-radius, 4px));box-shadow:var(--slotted-tags-input-shadow, var(--slotted-control-shadow, none));box-sizing:border-box;color:var(--slotted-tags-input-color, var(--slotted-text, CanvasText));display:flex;font-family:var(--slotted-control-font-family, system-ui, sans-serif);font-size:var(--_font-size);gap:var(--slotted-space-1, .125rem);inline-size:100%;min-block-size:var(--_height);min-inline-size:0;padding-inline-start:var(--_padding-inline);padding-inline-end:max(0px,calc(var(--_padding-inline) - (var(--_action-size) - var(--_icon-size)) / 2));position:relative;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),border-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),box-shadow var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui-tags-input][data-part-root]:not([data-full-width]){inline-size:auto}[data-ui-tags-input]>[data-part-control]{display:flex;flex:1 1 auto;min-inline-size:0;align-self:stretch}[data-ui-tags-input]>[data-part-control]+*{margin-inline-start:var(--_row-gap)}[data-ui-tags-input] [data-part-chips]{align-content:safe center;align-items:center;box-sizing:border-box;column-gap:var(--_row-gap);display:flex;flex:1 1 auto;flex-wrap:wrap;min-inline-size:0;padding-block:var(--_row-air);padding-inline:var(--_row-air);margin-inline:calc(-1 * var(--_row-air));row-gap:var(--_row-gap);max-block-size:calc(3 * var(--_row-size) + 2 * var(--_row-gap) + 2 * var(--_row-air));overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}[data-ui-tags-input] [data-part-chips]::-webkit-scrollbar{display:none}[data-ui-tags-input][data-overflow=collapse]:not([data-expanded]) [data-part-chips]{flex-wrap:nowrap;max-block-size:none;overflow:hidden}[data-ui-tags-input][data-overflow=collapse][data-expanded] [data-part-chips]>[data-count]{display:none}[data-ui-tags-input] [data-part-chips] input:not([data-part-input]){background-color:transparent;border:0;color:inherit;font:inherit;min-inline-size:0;outline:none;padding:0}[data-ui-tags-input] [data-part-chips]>:not([data-part-field]){flex:0 0 auto;max-inline-size:100%;min-block-size:var(--_row-size);min-inline-size:0}[data-ui-tags-input] [data-part-chips]{--slotted-control-inner-size: var(--_inner-size)}[data-ui-tags-input] [data-part-field]{align-items:center;display:flex;flex:1 1 var(--slotted-tags-input-field-basis, 4rem);min-block-size:var(--_row-size);min-inline-size:var(--slotted-tags-input-field-min, 2.5rem)}[data-ui-tags-input] [data-part-input]{background-color:transparent;border:0;color:inherit;flex:1 1 auto;font:inherit;outline:none;padding:0;min-inline-size:0;text-overflow:ellipsis}[data-ui-tags-input] [data-part-input]::placeholder{color:var(--slotted-tags-input-placeholder-color, var(--slotted-text-muted, GrayText));text-overflow:ellipsis}[data-ui-tags-input] [data-part-input]:autofill{box-shadow:inset 0 0 0 100px var(--slotted-tags-input-autofill-background, var(--slotted-tone-accent-surface));-webkit-text-fill-color:var(--slotted-tags-input-color, var(--slotted-text, CanvasText))}[data-ui-tags-input] [data-part-chips]>:not([data-part-field]):focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(-1 * var(--slotted-focus-ring-width, 2px))}[data-ui-tags-input] [data-part-chips]>[data-current]{--slotted-tag-border-color: var( --slotted-tags-input-current-border-color, var(--slotted-tone-accent-border) )}[data-ui-tags-input] [data-part-chips]>[data-count]{cursor:pointer;flex:none}[data-ui-tags-input]>[data-part-counter]{align-self:center;color:var(--slotted-tags-input-counter-color, var(--slotted-text-muted, GrayText));flex:none;font-size:var(--slotted-font-size-xs, .75rem);font-variant-numeric:tabular-nums;line-height:var(--slotted-line-height-sm, 1.45);padding-inline:var(--slotted-space-1, .125rem);unicode-bidi:plaintext;white-space:nowrap}[data-ui-tags-input][data-complete]>[data-part-counter]{color:var(--slotted-tags-input-counter-complete-color, var(--slotted-tone-accent-text));font-weight:var(--slotted-font-weight-medium, 500)}[data-ui-tags-input][data-narrow] [data-part-chips]>:not([data-part-field]){display:none}[data-ui-tags-input] :is([data-part-message],[data-part-hint]){block-size:1px;border:0;clip-path:inset(50%);inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap}[data-ui-tags-input]>[data-part-clear]{align-items:center;align-self:center;appearance:none;background-color:transparent;block-size:var(--_action-size);border:0;border-radius:var(--slotted-tags-input-radius, var(--slotted-control-radius, 4px));color:var(--slotted-tags-input-action-color, var(--slotted-text-muted, GrayText));cursor:pointer;display:inline-flex;flex:0 0 auto;inline-size:var(--_action-size);justify-content:center;padding:0;position:relative;touch-action:manipulation;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);-webkit-tap-highlight-color:transparent}[data-ui-tags-input]>[data-part-clear]:after{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-min, 24px)) / 2));position:absolute}@media(pointer:coarse){[data-ui-tags-input]>[data-part-clear]:after{inset:min(0px,calc((100% - var(--slotted-target-comfortable, 44px)) / 2));inset-inline-start:0}}[data-ui-tags-input]>[data-part-clear]{--slotted-icon-size: var(--_icon-size)}[data-ui-tags-input][data-part-root][data-size=sm]{--_font-size: var(--slotted-control-font-size-sm, 12px);--_height: var(--slotted-control-height-sm, 30px);--_inner-size: var(--slotted-control-inner-size-sm, 22px);--_padding-inline: var(--slotted-control-padding-inline-sm, 10px);--_gap: var(--slotted-control-gap-sm, 6px);--_icon-size: max(var(--_icon-floor), var(--slotted-control-icon-size-sm, 14px))}[data-ui-tags-input][data-part-root][data-size=md]{--_font-size: var(--slotted-control-font-size-md, 13px);--_height: var(--slotted-control-height-md, 34px);--_padding-inline: var(--slotted-control-padding-inline-md, 13px);--_gap: var(--slotted-control-gap-md, 8px);--_icon-size: max(var(--_icon-floor), var(--slotted-control-icon-size-md, 16px));--_inner-size: var(--slotted-control-inner-size-md, 24px)}[data-ui-tags-input][data-part-root][data-size=lg]{--_font-size: var(--slotted-control-font-size-lg, 14px);--_height: var(--slotted-control-height-lg, 38px);--_inner-size: var(--slotted-control-inner-size-lg, 28px);--_padding-inline: var(--slotted-control-padding-inline-lg, 16px);--_gap: var(--slotted-control-gap-lg, 8px);--_icon-size: max(var(--_icon-floor), var(--slotted-control-icon-size-lg, 18px))}[data-ui-tags-input][data-part-root][data-variant=subtle]{background-color:var( --slotted-tags-input-subtle-background, var(--slotted-surface-sunken, Canvas) );border-color:var( --slotted-tags-input-subtle-border-color, var(--slotted-border-subtle, ButtonBorder) )}[data-ui-tags-input][data-part-root][data-variant=plain]{background-color:transparent;border-color:transparent;border-radius:var(--slotted-radius-none, 0px);box-shadow:none}@media(forced-colors:active){[data-ui-tags-input][data-part-root][data-variant=plain]{border-color:ButtonBorder}}[data-ui-tags-input][data-part-root]:hover:not([data-disabled]):not([data-readonly]):not([data-invalid]){border-color:var(--slotted-tags-input-hover-border-color, var(--slotted-tone-accent-border))}[data-ui-tags-input][data-part-root][data-variant=subtle]:hover:not([data-disabled]):not([data-readonly]):not([data-invalid]){background-color:var( --slotted-tags-input-subtle-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui-tags-input][data-part-root][data-variant=plain]:hover:not([data-disabled]):not([data-readonly]):not([data-invalid]){background-color:var( --slotted-tags-input-plain-hover-background, var(--slotted-tone-secondary-subtle-hover) );border-color:transparent}[data-ui-tags-input][data-part-root]:has([data-part-input]:focus-visible),[data-ui-tags-input][data-part-root]:has([data-part-chips]>:not([data-part-field]):focus-visible){box-shadow:var(--slotted-control-shadow-focus-geometry, 0 1px 4px -1px) var(--slotted-focus-ring-color, Highlight);outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui-tags-input][data-part-root][data-variant=plain]:has([data-part-input]:focus-visible),[data-ui-tags-input][data-part-root][data-variant=plain]:has([data-part-chips]>:not([data-part-field]):focus-visible){box-shadow:none;outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}[data-ui-tags-input][data-part-root]:has([data-part-chips]>:not([data-part-field]):focus-visible){outline:none}[data-ui-tags-input][data-part-root][data-invalid]{--slotted-focus-ring-color: var( --slotted-tags-input-invalid-focus-ring-color, var(--slotted-focus-ring-color-invalid, Highlight) );--_invalid-edge-width: var( --slotted-tags-input-invalid-edge-width, var(--slotted-control-invalid-edge-width, 1px) );--_invalid-edge-color: var( --slotted-tags-input-invalid-border-color, var(--slotted-tone-danger-border) );--_invalid-edge: inset 0 0 0 var(--_invalid-edge-width) var(--_invalid-edge-color);border-color:var(--slotted-tags-input-invalid-border-color, var(--slotted-tone-danger-border));box-shadow:var(--_invalid-edge)}[data-ui-tags-input][data-part-root][data-invalid]:has([data-part-input]:focus-visible),[data-ui-tags-input][data-part-root][data-invalid]:has([data-part-chips]>:not([data-part-field]):focus-visible){box-shadow:var(--_invalid-edge),var(--slotted-control-shadow-focus-geometry, 0 1px 4px -1px) var(--slotted-focus-ring-color, Highlight)}[data-ui-tags-input][data-part-root][data-variant=plain][data-invalid]:has([data-part-input]:focus-visible),[data-ui-tags-input][data-part-root][data-variant=plain][data-invalid]:has([data-part-chips]>:not([data-part-field]):focus-visible){box-shadow:inset 0 0 0 calc(var(--slotted-focus-ring-offset, 2px) - var(--slotted-control-border-width, 1px) + var(--_invalid-edge-width)) var(--_invalid-edge-color)}@media(forced-colors:active){[data-ui-tags-input][data-part-root][data-invalid]{outline:var(--_invalid-edge-width) solid CanvasText;outline-offset:calc(-1 * (var(--slotted-control-border-width, 1px) + var(--_invalid-edge-width)))}[data-ui-tags-input][data-part-root][data-invalid]:has([data-part-input]:focus-visible){outline:calc(var(--slotted-focus-ring-width, 2px) + var(--_invalid-edge-width)) double var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui-tags-input][data-part-root][data-variant=plain][data-invalid]:has([data-part-input]:focus-visible){outline:calc(var(--slotted-focus-ring-width, 2px) + var(--_invalid-edge-width)) double var(--slotted-focus-ring-color, Highlight);outline-offset:calc(-1 * (var(--slotted-focus-ring-width, 2px) + var(--_invalid-edge-width)))}[data-ui-tags-input][data-part-root][data-invalid]:has([data-part-chips]>:not([data-part-field]):focus-visible),[data-ui-tags-input][data-part-root][data-variant=plain][data-invalid]:has([data-part-chips]>:not([data-part-field]):focus-visible){outline:var(--_invalid-edge-width) solid CanvasText;outline-offset:calc(-1 * (var(--slotted-control-border-width, 1px) + var(--_invalid-edge-width)))}}[data-ui-tags-input][data-part-root][data-readonly]{background-color:var( --slotted-tags-input-readonly-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui-tags-input][data-part-root][data-disabled],[data-ui-tags-input][data-part-root]:has([data-part-input]:disabled){background-color:var( --slotted-tags-input-disabled-background, var(--slotted-disabled-background) );border-color:var(--slotted-tags-input-disabled-border-color, var(--slotted-disabled-border));box-shadow:none;color:var(--slotted-tags-input-disabled-color, var(--slotted-disabled-foreground));cursor:not-allowed}[data-ui-tags-input]>[data-part-clear]:hover:not(:disabled):not([data-disabled]){background-color:var( --slotted-tags-input-action-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui-tags-input]>[data-part-clear]:active:not(:disabled):not([data-disabled]){background-color:var( --slotted-tags-input-action-active-background, var(--slotted-tone-secondary-subtle-active) )}[data-ui-tags-input]>[data-part-clear]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}[data-ui-tags-input]>[data-part-suggestions]{background-color:var(--slotted-surface-raised, Canvas);border:var(--slotted-border-width-thin, 1px) solid var(--slotted-border-subtle, GrayText);border-radius:var(--slotted-radius-lg, 8px);box-shadow:var(--slotted-shadow-md);box-sizing:border-box;color:var(--slotted-text, CanvasText);font-size:var(--_font-size);inline-size:var(--slotted-positioner-anchor-width, 100%);max-block-size:calc(10 * var(--_height) + 2 * var(--slotted-space-2, .25rem));overflow-y:auto;overscroll-behavior:contain;padding:var(--slotted-space-2, .25rem);position:fixed;z-index:calc(var(--slotted-z-index-popover, 1100) + var(--slotted-layer-depth, 0))}[data-ui-tags-input]>[data-part-suggestions]>[data-part-suggestion]{align-items:center;border-radius:var(--slotted-control-radius, 4px);cursor:default;display:flex;min-block-size:var(--_height);overflow-wrap:anywhere;padding-inline:var(--_padding-inline)}[data-ui-tags-input]>[data-part-suggestions]>[data-highlighted]{background-color:var(--slotted-tone-secondary-subtle-active)}@media(forced-colors:active){[data-ui-tags-input]>[data-part-suggestions]>[data-highlighted]{background-color:Highlight;color:HighlightText}}}\n", "@layer slotted.components{[data-ui-tag][data-part-root]{--_solid: var(--slotted-tone-secondary-solid-hover);--_solid-hover: var(--slotted-tone-secondary-solid-active);--_solid-active: var(--slotted-tone-secondary-solid-active);--_on-solid: var(--slotted-tone-secondary-on-solid);--_surface: var(--slotted-tone-secondary-surface);--_subtle-hover: var(--slotted-tone-secondary-subtle-hover);--_subtle-active: var(--slotted-tone-secondary-subtle-active);--_border: var(--slotted-tag-border-color, var(--slotted-tone-secondary-border));--_text: var(--slotted-tone-secondary-text);--_edge: var(--_solid);--_font-size: var(--slotted-control-font-size-md, 13px);--_icon-size: var(--slotted-control-icon-size-sm, 14px);--_inner-size: var(--slotted-control-inner-size-sm, 22px);--_inset-block: var(--slotted-tag-inset-block, var(--slotted-space-2, .25rem));--_inset-inline: var(--slotted-space-4, .5rem);--_gap: var(--slotted-space-2, .25rem);--_line-height: var(--slotted-line-height-xs, 1.4);--_edge-width: var(--slotted-tag-border-width, var(--slotted-border-width-thin, 1px));--_radius: var(--slotted-radius-full, 9999px);--_inner-radius: max(0px, calc(var(--_radius) - var(--_edge-width)));--_own-size: calc( var(--_font-size) * var(--_line-height) + 2 * var(--_inset-block) + 2 * var(--_edge-width) );--_block-size: var(--slotted-control-inner-size, var(--_own-size));--_line: min( calc(var(--_font-size) * var(--_line-height)), calc(var(--_block-size) - 2 * var(--_edge-width)) );--_inset: max(0px, calc((var(--_block-size) - var(--_line) - 2 * var(--_edge-width)) / 2));align-items:stretch;border:var(--_edge-width) solid transparent;border-radius:var(--_radius);box-sizing:border-box;display:inline-flex;font-family:var(--slotted-tag-font-family, var(--slotted-control-font-family, sans-serif));font-size:var(--_font-size);font-weight:var(--slotted-tag-font-weight, var(--slotted-font-weight-medium, 500));line-height:var(--_line);max-inline-size:100%;min-block-size:var(--_block-size);vertical-align:middle;white-space:nowrap}[data-ui-tag][data-part-root][hidden]{display:none}[data-ui-tag][data-part-root][data-tone=secondary]{--_edge: var(--_border)}[data-ui-tag][data-part-root][data-tone=accent]{--_solid: var(--slotted-tone-accent-solid);--_solid-hover: var(--slotted-tone-accent-solid-hover);--_solid-active: var(--slotted-tone-accent-solid-active);--_on-solid: var(--slotted-tone-accent-on-solid);--_surface: var(--slotted-tone-accent-surface);--_subtle-hover: var(--slotted-tone-accent-subtle-hover);--_subtle-active: var(--slotted-tone-accent-subtle-active);--_border: var(--slotted-tag-border-color, var(--slotted-tone-accent-border));--_text: var(--slotted-tone-accent-text)}[data-ui-tag][data-part-root][data-tone=success]{--_solid: var(--slotted-tone-success-solid);--_solid-hover: var(--slotted-tone-success-solid-hover);--_solid-active: var(--slotted-tone-success-solid-active);--_on-solid: var(--slotted-tone-success-on-solid);--_surface: var(--slotted-tone-success-surface);--_subtle-hover: var(--slotted-tone-success-subtle-hover);--_subtle-active: var(--slotted-tone-success-subtle-active);--_border: var(--slotted-tag-border-color, var(--slotted-tone-success-border));--_text: var(--slotted-tone-success-text)}[data-ui-tag][data-part-root][data-tone=warning]{--_solid: var(--slotted-tone-warning-solid);--_solid-hover: var(--slotted-tone-warning-solid-hover);--_solid-active: var(--slotted-tone-warning-solid-active);--_on-solid: var(--slotted-tone-warning-on-solid);--_surface: var(--slotted-tone-warning-surface);--_subtle-hover: var(--slotted-tone-warning-subtle-hover);--_subtle-active: var(--slotted-tone-warning-subtle-active);--_border: var(--slotted-tag-border-color, var(--slotted-tone-warning-border));--_text: var(--slotted-tone-warning-text)}[data-ui-tag][data-part-root][data-tone=danger]{--_solid: var(--slotted-tone-danger-solid);--_solid-hover: var(--slotted-tone-danger-solid-hover);--_solid-active: var(--slotted-tone-danger-solid-active);--_on-solid: var(--slotted-tone-danger-on-solid);--_surface: var(--slotted-tone-danger-surface);--_subtle-hover: var(--slotted-tone-danger-subtle-hover);--_subtle-active: var(--slotted-tone-danger-subtle-active);--_border: var(--slotted-tag-border-color, var(--slotted-tone-danger-border));--_text: var(--slotted-tone-danger-text)}[data-ui-tag][data-part-root][data-variant=solid]{background-color:var(--_solid, ButtonFace);border-color:var(--_edge, ButtonFace);color:var(--_on-solid, ButtonText)}[data-ui-tag][data-part-root][data-variant=soft]{background-color:var(--_surface, ButtonFace);border-color:var(--_border, ButtonBorder);color:var(--_text, ButtonText)}[data-ui-tag][data-part-root][data-variant=outline]{background-color:transparent;border-color:var(--_border, ButtonBorder);color:var(--_text, ButtonText)}[data-ui-tag][data-part-root][data-size=sm]{--_font-size: var(--slotted-control-font-size-sm, 12px);--_inset-block: var(--slotted-tag-inset-block, var(--slotted-space-1, .125rem));--_inset-inline: var(--slotted-space-3, .375rem)}[data-ui-tag][data-part-root][data-size=lg]{--_font-size: var(--slotted-control-font-size-lg, 14px);--_icon-size: var(--slotted-control-icon-size-md, 16px);--_inner-size: var(--slotted-control-inner-size-md, 24px);--_inset-block: var(--slotted-tag-inset-block, var(--slotted-space-3, .375rem));--_inset-inline: var(--slotted-space-5, .75rem);--_gap: var(--slotted-space-3, .375rem)}[data-ui-tag][data-part-root][data-shape=square]{--_radius: var(--slotted-radius-sm, 4px)}[data-ui-tag] [data-part-body]{align-items:center;background-color:transparent;border:0;border-end-start-radius:var(--_inner-radius);border-start-start-radius:var(--_inner-radius);box-sizing:border-box;color:inherit;display:inline-flex;font:inherit;gap:var(--_gap);letter-spacing:inherit;min-inline-size:0;padding-block:var(--_inset);padding-inline:var(--_inset-inline);text-align:start;text-decoration:none;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui-tag] [data-part-body]:last-child{border-end-end-radius:var(--_inner-radius);border-start-end-radius:var(--_inner-radius)}[data-ui-tag] [data-part-body]:has(+[data-part-remove]){padding-inline-end:var(--_gap)}[data-ui-tag] [data-part-body]:is(a,button){cursor:pointer}[data-ui-tag] [data-part-label]{min-inline-size:0;overflow:hidden;text-overflow:ellipsis;unicode-bidi:plaintext}@supports (text-box: trim-both cap alphabetic){[data-ui-tag] [data-part-label]{margin-block:-.3em;padding-block:.3em;text-box:trim-both cap alphabetic}}[data-ui-tag] [data-part-start],[data-ui-tag] [data-part-end]{--slotted-icon-size: var(--_icon-size);align-items:center;block-size:var(--_icon-size);box-sizing:border-box;display:inline-flex;flex:none;font-size:var(--_icon-size);inline-size:var(--_icon-size);justify-content:center;line-height:1}[data-ui-tag] [data-part-start]>*,[data-ui-tag] [data-part-end]>*{block-size:100%;display:block;inline-size:100%}[data-ui-tag] [data-part-indicator]{--slotted-icon-size: var(--_icon-size);align-items:center;block-size:var(--_icon-size);display:inline-flex;flex:none;inline-size:0;justify-content:center;margin-inline-end:calc(-1 * var(--_gap));opacity:0;overflow:hidden;transition:inline-size var(--slotted-duration-short) var(--slotted-easing-standard),margin-inline-end var(--slotted-duration-short) var(--slotted-easing-standard),opacity var(--slotted-duration-short) var(--slotted-easing-standard)}[data-ui-tag][data-part-root][data-selected] [data-part-indicator]{inline-size:var(--_icon-size);margin-inline-end:0;opacity:1}[data-ui-tag] [data-part-remove]{--slotted-icon-size: var(--_icon-size);align-items:center;appearance:none;background-color:transparent;border:0;border-end-end-radius:var(--_inner-radius);border-start-end-radius:var(--_inner-radius);box-sizing:border-box;color:inherit;cursor:pointer;display:inline-flex;flex:none;inline-size:max(var(--slotted-target-min, 24px),min(calc(var(--_icon-size) + 2 * var(--slotted-space-2, .25rem)),var(--_inner-size)));justify-content:center;padding:0;position:relative;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui-tag] [data-part-remove]:after{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-min, 24px)) / 2));position:absolute}@media(pointer:coarse){[data-ui-tag] [data-part-remove]{inline-size:max(var(--slotted-target-min, 24px),min(calc(var(--_icon-size) + 2 * var(--slotted-space-2, .25rem)),var(--_inner-size)),calc(var(--_block-size) - 2 * var(--_edge-width)))}[data-ui-tag] [data-part-remove]:after{inset:min(0px,calc((100% - var(--slotted-target-comfortable, 44px)) / 2))}}[data-ui-tag] [data-part-remove]:first-child{border-end-start-radius:var(--_inner-radius);border-start-start-radius:var(--_inner-radius)}[data-ui-tag][data-part-root][data-selected]:not([data-disabled]){background-color:var(--_solid, ButtonFace);border-color:var(--_edge, ButtonBorder);color:var(--_on-solid, ButtonText)}[data-ui-tag][data-part-root]{--_state-hover: color-mix( in oklab, currentColor var(--slotted-tag-state-layer-hover, 8%), transparent );--_state-active: color-mix( in oklab, currentColor var(--slotted-tag-state-layer-active, 14%), transparent )}[data-ui-tag][data-part-root][data-variant=soft]:not([data-disabled]):not([data-selected]) :is([data-part-body]:is(a,button),[data-part-remove]):hover:not(:disabled){background-color:var(--_state-hover)}[data-ui-tag][data-part-root][data-variant=soft]:not([data-disabled]):not([data-selected]) :is([data-part-body]:is(a,button),[data-part-remove]):active:not(:disabled){background-color:var(--_state-active)}[data-ui-tag][data-part-root][data-variant=outline]:not([data-disabled]):not([data-selected]) :is([data-part-body]:is(a,button),[data-part-remove]):hover:not(:disabled){background-color:var(--_subtle-hover, ButtonFace)}[data-ui-tag][data-part-root][data-variant=outline]:not([data-disabled]):not([data-selected]) :is([data-part-body]:is(a,button),[data-part-remove]):active:not(:disabled){background-color:var(--_subtle-active, ButtonFace)}[data-ui-tag][data-part-root][data-variant=solid]:not([data-disabled]) :is([data-part-body]:is(a,button),[data-part-remove]):hover:not(:disabled),[data-ui-tag][data-part-root][data-selected]:not([data-disabled]) :is([data-part-body]:is(a,button),[data-part-remove]):hover:not(:disabled){background-color:var(--_solid-hover, Highlight)}[data-ui-tag][data-part-root][data-variant=solid]:not([data-disabled]) :is([data-part-body]:is(a,button),[data-part-remove]):active:not(:disabled),[data-ui-tag][data-part-root][data-selected]:not([data-disabled]) :is([data-part-body]:is(a,button),[data-part-remove]):active:not(:disabled){background-color:var(--_solid-active, Highlight)}[data-ui-tag] [data-part-body]:focus-visible,[data-ui-tag] [data-part-remove]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(-2 * var(--slotted-focus-ring-width, 2px))}[data-ui-tag][data-part-group]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui-tag][data-part-root][data-disabled]{color:var(--slotted-disabled-foreground, GrayText)}[data-ui-tag][data-part-root][data-variant=solid][data-disabled],[data-ui-tag][data-part-root][data-variant=soft][data-disabled],[data-ui-tag][data-part-root][data-selected][data-disabled]{background-color:var(--slotted-disabled-background, Canvas);border-color:var(--slotted-disabled-border, GrayText)}[data-ui-tag][data-part-root][data-variant=outline][data-disabled]{background-color:transparent;border-color:var(--slotted-disabled-border, GrayText)}[data-ui-tag][data-part-root][data-disabled] :is([data-part-body],[data-part-remove]),[data-ui-tag] [data-part-body]:disabled,[data-ui-tag] [data-part-remove]:disabled{background-color:transparent;cursor:not-allowed}[data-ui-tag] [data-part-remove]:disabled{color:var(--slotted-disabled-foreground, GrayText)}[data-ui-tag][data-part-group]{align-items:center;display:flex;flex-wrap:wrap;gap:var(--slotted-tag-group-gap, var(--slotted-space-2, .25rem))}[data-ui-tag][data-part-group][data-orientation=vertical]{align-items:start;flex-direction:column;flex-wrap:nowrap;inline-size:fit-content}[data-ui-tag][data-part-group]:empty{display:none}@media(forced-colors:active){[data-ui-tag][data-part-root]{border-color:currentColor}[data-ui-tag][data-part-root][data-selected]:not([data-disabled]){background-color:Highlight;color:HighlightText;forced-color-adjust:none}[data-ui-tag][data-part-root][data-disabled]{border-color:GrayText;color:GrayText}}}\n"], dependencies: [{ kind: "component", type: SlGlyph, selector: "svg[slGlyph]", inputs: ["name", "solid"] }, { kind: "component", type: SlIcon, selector: "[slIcon]", inputs: ["directional", "label", "size", "tone"], exportAs: ["slIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTagsInput, decorators: [{
             type: Component,
@@ -1032,7 +1210,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                         { provide: NG_VALIDATORS, useExisting: forwardRef(() => SlTagsInput), multi: true },
                     ], host: {
                         'data-ui': 'tags-input',
+                        'data-ui-tags-input': '',
                         'data-part': 'root',
+                        'data-part-root': '',
                         '[attr.data-size]': 'resolvedSize()',
                         '[attr.data-variant]': 'resolvedVariant()',
                         '[attr.data-overflow]': 'resolvedOverflow()',
@@ -1049,12 +1229,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                     }, template: `
     <div
       data-part="control"
+      data-part-control=""
       role="grid"
       [attr.aria-label]="gridLabel()"
       [attr.aria-labelledby]="gridLabelledBy()"
     >
       <div
         data-part="chips"
+        data-part-chips=""
         role="row"
         #row
         [attr.aria-label]="countText()"
@@ -1066,12 +1248,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
               role="gridcell"
               tabindex="-1"
               data-ui="tag"
+              data-ui-tag=""
               data-part="root"
+              data-part-root=""
               data-size="sm"
               data-variant="soft"
               [attr.data-value]="chip"
             >
-              <span data-part="body">
+              <span data-part="body" data-part-body="">
                 <input
                   type="text"
                   [attr.aria-label]="labelFor(chip)"
@@ -1088,7 +1272,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
               role="gridcell"
               tabindex="-1"
               data-ui="tag"
+              data-ui-tag=""
               data-part="root"
+              data-part-root=""
               data-size="sm"
               data-variant="soft"
               [attr.data-value]="chip"
@@ -1103,22 +1289,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
               (keydown)="onChipKeyDown(chip, index, $event)"
               (dblclick)="onChipDoubleClick(chip, index)"
             >
-              <span data-part="body">
+              <span data-part="body" data-part-body="">
                 @if (messageFor(index); as message) {
-                  <span data-part="start"
+                  <span data-part="start" data-part-start=""
                     ><span slIcon><svg slGlyph name="circle-alert"></svg></span
                   ></span>
                 }
-                <span data-part="label">{{ labelFor(chip) }}</span>
+                <span data-part="label" data-part-label="">{{ labelFor(chip) }}</span>
               </span>
               @if (messageFor(index); as message) {
-                <span data-part="message" [id]="messageId(index)">{{ message }}</span>
+                <span data-part="message" data-part-message="" [id]="messageId(index)">{{
+                  message
+                }}</span>
               }
               @if (!chipFrozen(chip)) {
                 <button
                   type="button"
                   tabindex="-1"
                   data-part="remove"
+                  data-part-remove=""
                   [attr.aria-label]="removeLabelFor(chip)"
                   (click)="onRemoveClick(index, $event)"
                 >
@@ -1136,20 +1325,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
             tabindex="-1"
             data-count
             data-ui="tag"
+            data-ui-tag=""
             data-part="root"
+            data-part-root=""
             data-size="sm"
             data-variant="outline"
             (click)="focus()"
           >
-            <span data-part="body">
-              <span data-part="label">+{{ hiddenCount() }}</span>
+            <span data-part="body" data-part-body="">
+              <span data-part="label" data-part-label="">+{{ hiddenCount() }}</span>
             </span>
           </span>
         }
-        <span data-part="field" role="gridcell">
+        <span data-part="field" data-part-field="" role="gridcell">
           <input
             #control
             data-part="input"
+            data-part-input=""
             [type]="type()"
             [id]="controlId()"
             [value]="inputValue()"
@@ -1167,6 +1359,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
             [attr.aria-label]="ariaLabel() ?? null"
             [attr.aria-describedby]="describedBy()"
             [attr.aria-invalid]="isInvalid() ? true : null"
+            [attr.role]="suggestions() === undefined ? null : 'combobox'"
+            [attr.aria-autocomplete]="suggestions() === undefined ? null : 'list'"
+            [attr.aria-expanded]="suggestions() === undefined ? null : popup()"
+            [attr.aria-controls]="popup() ? listboxId : null"
+            [attr.aria-activedescendant]="active() < 0 ? null : optionId(active())"
             (input)="onInput($event)"
             (keydown)="onKeyDown($event)"
             (paste)="onPaste($event)"
@@ -1177,19 +1374,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
     </div>
 
     @if (counterText(); as counter) {
-      <span data-part="counter" aria-hidden="true">{{ counter }}</span>
+      <span data-part="counter" data-part-counter="" aria-hidden="true">{{ counter }}</span>
     }
     @if (showClear()) {
       <button
         type="button"
         data-part="clear"
+        data-part-clear=""
         [attr.aria-label]="t('clear')"
         (click)="onClear($event)"
       >
         <span slIcon><svg slGlyph name="x"></svg></span>
       </button>
     }
-    <span data-part="hint" [id]="hintId">{{ hintText() }}</span>
+    <span data-part="hint" data-part-hint="" [id]="hintId">{{ hintText() }}</span>
+    @if (popup()) {
+      <div
+        #suggestionList
+        data-part="suggestions"
+        data-part-suggestions=""
+        role="listbox"
+        [id]="listboxId"
+        [attr.aria-label]="t('suggestions')"
+      >
+        @for (entry of matches(); track $index) {
+          <!-- Focus stays in the input: the option is chosen, not focused. -->
+          <div
+            data-part="suggestion"
+            data-part-suggestion=""
+            role="option"
+            [id]="optionId($index)"
+            [attr.aria-selected]="$index === active()"
+            [attr.data-highlighted]="$index === active() ? '' : null"
+            (pointerdown)="$event.preventDefault()"
+            (pointermove)="highlight.set($index)"
+            (click)="choose(entry, $event)"
+          >
+            {{ labelFor(entry) }}
+          </div>
+        }
+      </div>
+    }
 
     <!--
       One hidden input per value, all under the same name: that is how a plain
@@ -1200,8 +1425,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
         <input type="hidden" [name]="submissionName" [attr.form]="form() ?? null" [value]="held" />
       }
     }
-  `, styles: ["@layer slotted.components{[data-ui=tags-input][data-part=root]{--_font-size: var(--slotted-control-font-size-md, 13px);--_height: var(--slotted-control-height-md, 34px);--_padding-inline: var(--slotted-control-padding-inline-md, 13px);--_gap: var(--slotted-control-gap-md, 8px);--_icon-floor: var(--slotted-tags-input-icon-size-min, 14px);--_icon-size: max(var(--_icon-floor), var(--slotted-control-icon-size-md, 16px));--_action-size: var( --slotted-tags-input-action-size, min(calc(var(--_icon-size) + 2 * var(--slotted-space-2, .25rem)), var(--_inner-size)) );--_row-air: var(--slotted-space-1, .125rem);--_inner-size: var(--slotted-control-inner-size-md, 24px);--_row-size: var(--_inner-size);--_row-gap: var(--slotted-space-2, .25rem);align-items:center;background-color:var(--slotted-tags-input-background, var(--slotted-control-surface, Field));border:var(--slotted-control-border-width, 1px) solid var(--slotted-tags-input-border-color, var(--slotted-control-border-color, ButtonBorder));border-radius:var(--slotted-tags-input-radius, var(--slotted-control-radius, 4px));box-shadow:var(--slotted-tags-input-shadow, var(--slotted-control-shadow, none));box-sizing:border-box;color:var(--slotted-tags-input-color, var(--slotted-text, CanvasText));display:flex;font-family:var(--slotted-control-font-family, system-ui, sans-serif);font-size:var(--_font-size);gap:var(--slotted-space-1, .125rem);inline-size:100%;min-block-size:var(--_height);min-inline-size:0;padding-inline-start:var(--_padding-inline);padding-inline-end:max(0px,calc(var(--_padding-inline) - (var(--_action-size) - var(--_icon-size)) / 2));position:relative;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),border-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),box-shadow var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=tags-input][data-part=root]:not([data-full-width]){inline-size:auto}[data-ui=tags-input]>[data-part=control]{display:flex;flex:1 1 auto;min-inline-size:0;align-self:stretch}[data-ui=tags-input]>[data-part=control]+*{margin-inline-start:var(--_row-gap)}[data-ui=tags-input] [data-part=chips]{align-content:safe center;align-items:center;box-sizing:border-box;column-gap:var(--_row-gap);display:flex;flex:1 1 auto;flex-wrap:wrap;min-inline-size:0;padding-block:var(--_row-air);padding-inline:var(--_row-air);margin-inline:calc(-1 * var(--_row-air));row-gap:var(--_row-gap);max-block-size:calc(3 * var(--_row-size) + 2 * var(--_row-gap) + 2 * var(--_row-air));overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}[data-ui=tags-input] [data-part=chips]::-webkit-scrollbar{display:none}[data-ui=tags-input][data-overflow=collapse]:not([data-expanded]) [data-part=chips]{flex-wrap:nowrap;max-block-size:none;overflow:hidden}[data-ui=tags-input][data-overflow=collapse][data-expanded] [data-part=chips]>[data-count]{display:none}[data-ui=tags-input] [data-part=chips] input:not([data-part=input]){background-color:transparent;border:0;color:inherit;font:inherit;min-inline-size:0;outline:none;padding:0}[data-ui=tags-input] [data-part=chips]>:not([data-part=field]){flex:0 0 auto;max-inline-size:100%;min-block-size:var(--_row-size);min-inline-size:0}[data-ui=tags-input] [data-part=chips]{--slotted-control-inner-size: var(--_inner-size)}[data-ui=tags-input] [data-part=field]{align-items:center;display:flex;flex:1 1 var(--slotted-tags-input-field-basis, 4rem);min-block-size:var(--_row-size);min-inline-size:var(--slotted-tags-input-field-min, 2.5rem)}[data-ui=tags-input] [data-part=input]{background-color:transparent;border:0;color:inherit;flex:1 1 auto;font:inherit;outline:none;padding:0;min-inline-size:0;text-overflow:ellipsis}[data-ui=tags-input] [data-part=input]::placeholder{color:var(--slotted-tags-input-placeholder-color, var(--slotted-text-muted, GrayText));text-overflow:ellipsis}[data-ui=tags-input] [data-part=input]:autofill{box-shadow:inset 0 0 0 100px var(--slotted-tags-input-autofill-background, var(--slotted-tone-accent-surface));-webkit-text-fill-color:var(--slotted-tags-input-color, var(--slotted-text, CanvasText))}[data-ui=tags-input] [data-part=chips]>:not([data-part=field]):focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(-1 * var(--slotted-focus-ring-width, 2px))}[data-ui=tags-input] [data-part=chips]>[data-current]{--slotted-tag-border-color: var( --slotted-tags-input-current-border-color, var(--slotted-tone-accent-border) )}[data-ui=tags-input] [data-part=chips]>[data-count]{cursor:pointer;flex:none}[data-ui=tags-input]>[data-part=counter]{align-self:center;color:var(--slotted-tags-input-counter-color, var(--slotted-text-muted, GrayText));flex:none;font-size:var(--slotted-font-size-xs, .75rem);font-variant-numeric:tabular-nums;line-height:var(--slotted-line-height-sm, 1.45);padding-inline:var(--slotted-space-1, .125rem);unicode-bidi:plaintext;white-space:nowrap}[data-ui=tags-input][data-complete]>[data-part=counter]{color:var(--slotted-tags-input-counter-complete-color, var(--slotted-tone-accent-text));font-weight:var(--slotted-font-weight-medium, 500)}[data-ui=tags-input][data-narrow] [data-part=chips]>:not([data-part=field]){display:none}[data-ui=tags-input] :is([data-part=message],[data-part=hint]){block-size:1px;border:0;clip-path:inset(50%);inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap}[data-ui=tags-input]>[data-part=clear]{align-items:center;align-self:center;appearance:none;background-color:transparent;block-size:var(--_action-size);border:0;border-radius:var(--slotted-tags-input-radius, var(--slotted-control-radius, 4px));color:var(--slotted-tags-input-action-color, var(--slotted-text-muted, GrayText));cursor:pointer;display:inline-flex;flex:0 0 auto;inline-size:var(--_action-size);justify-content:center;padding:0;position:relative;touch-action:manipulation;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);-webkit-tap-highlight-color:transparent}[data-ui=tags-input]>[data-part=clear]:after{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-min, 24px)) / 2));position:absolute}@media(pointer:coarse){[data-ui=tags-input]>[data-part=clear]:after{inset:min(0px,calc((100% - var(--slotted-target-comfortable, 44px)) / 2));inset-inline-start:0}}[data-ui=tags-input]>[data-part=clear]{--slotted-icon-size: var(--_icon-size)}[data-ui=tags-input][data-part=root][data-size=sm]{--_font-size: var(--slotted-control-font-size-sm, 12px);--_height: var(--slotted-control-height-sm, 30px);--_inner-size: var(--slotted-control-inner-size-sm, 22px);--_padding-inline: var(--slotted-control-padding-inline-sm, 10px);--_gap: var(--slotted-control-gap-sm, 6px);--_icon-size: max(var(--_icon-floor), var(--slotted-control-icon-size-sm, 14px))}[data-ui=tags-input][data-part=root][data-size=md]{--_font-size: var(--slotted-control-font-size-md, 13px);--_height: var(--slotted-control-height-md, 34px);--_padding-inline: var(--slotted-control-padding-inline-md, 13px);--_gap: var(--slotted-control-gap-md, 8px);--_icon-size: max(var(--_icon-floor), var(--slotted-control-icon-size-md, 16px));--_inner-size: var(--slotted-control-inner-size-md, 24px)}[data-ui=tags-input][data-part=root][data-size=lg]{--_font-size: var(--slotted-control-font-size-lg, 14px);--_height: var(--slotted-control-height-lg, 38px);--_inner-size: var(--slotted-control-inner-size-lg, 28px);--_padding-inline: var(--slotted-control-padding-inline-lg, 16px);--_gap: var(--slotted-control-gap-lg, 8px);--_icon-size: max(var(--_icon-floor), var(--slotted-control-icon-size-lg, 18px))}[data-ui=tags-input][data-part=root][data-variant=subtle]{background-color:var( --slotted-tags-input-subtle-background, var(--slotted-surface-sunken, Canvas) );border-color:var( --slotted-tags-input-subtle-border-color, var(--slotted-border-subtle, ButtonBorder) )}[data-ui=tags-input][data-part=root][data-variant=plain]{background-color:transparent;border-color:transparent;border-radius:var(--slotted-radius-none, 0px);box-shadow:none}@media(forced-colors:active){[data-ui=tags-input][data-part=root][data-variant=plain]{border-color:ButtonBorder}}[data-ui=tags-input][data-part=root]:hover:not([data-disabled]):not([data-readonly]):not([data-invalid]){border-color:var(--slotted-tags-input-hover-border-color, var(--slotted-tone-accent-border))}[data-ui=tags-input][data-part=root][data-variant=subtle]:hover:not([data-disabled]):not([data-readonly]):not([data-invalid]){background-color:var( --slotted-tags-input-subtle-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=tags-input][data-part=root][data-variant=plain]:hover:not([data-disabled]):not([data-readonly]):not([data-invalid]){background-color:var( --slotted-tags-input-plain-hover-background, var(--slotted-tone-secondary-subtle-hover) );border-color:transparent}[data-ui=tags-input][data-part=root]:has([data-part=input]:focus-visible),[data-ui=tags-input][data-part=root]:has([data-part=chips]>:not([data-part=field]):focus-visible){box-shadow:var(--slotted-control-shadow-focus-geometry, 0 1px 4px -1px) var(--slotted-focus-ring-color, Highlight);outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=tags-input][data-part=root][data-variant=plain]:has([data-part=input]:focus-visible),[data-ui=tags-input][data-part=root][data-variant=plain]:has([data-part=chips]>:not([data-part=field]):focus-visible){box-shadow:none;outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}[data-ui=tags-input][data-part=root]:has([data-part=chips]>:not([data-part=field]):focus-visible){outline:none}[data-ui=tags-input][data-part=root][data-invalid]{--slotted-focus-ring-color: var( --slotted-tags-input-invalid-focus-ring-color, var(--slotted-focus-ring-color-invalid, Highlight) );--_invalid-edge-width: var( --slotted-tags-input-invalid-edge-width, var(--slotted-control-invalid-edge-width, 1px) );--_invalid-edge-color: var( --slotted-tags-input-invalid-border-color, var(--slotted-tone-danger-border) );--_invalid-edge: inset 0 0 0 var(--_invalid-edge-width) var(--_invalid-edge-color);border-color:var(--slotted-tags-input-invalid-border-color, var(--slotted-tone-danger-border));box-shadow:var(--_invalid-edge)}[data-ui=tags-input][data-part=root][data-invalid]:has([data-part=input]:focus-visible),[data-ui=tags-input][data-part=root][data-invalid]:has([data-part=chips]>:not([data-part=field]):focus-visible){box-shadow:var(--_invalid-edge),var(--slotted-control-shadow-focus-geometry, 0 1px 4px -1px) var(--slotted-focus-ring-color, Highlight)}[data-ui=tags-input][data-part=root][data-variant=plain][data-invalid]:has([data-part=input]:focus-visible),[data-ui=tags-input][data-part=root][data-variant=plain][data-invalid]:has([data-part=chips]>:not([data-part=field]):focus-visible){box-shadow:inset 0 0 0 calc(var(--slotted-focus-ring-offset, 2px) - var(--slotted-control-border-width, 1px) + var(--_invalid-edge-width)) var(--_invalid-edge-color)}@media(forced-colors:active){[data-ui=tags-input][data-part=root][data-invalid]{outline:var(--_invalid-edge-width) solid CanvasText;outline-offset:calc(-1 * (var(--slotted-control-border-width, 1px) + var(--_invalid-edge-width)))}[data-ui=tags-input][data-part=root][data-invalid]:has([data-part=input]:focus-visible){outline:calc(var(--slotted-focus-ring-width, 2px) + var(--_invalid-edge-width)) double var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=tags-input][data-part=root][data-variant=plain][data-invalid]:has([data-part=input]:focus-visible){outline:calc(var(--slotted-focus-ring-width, 2px) + var(--_invalid-edge-width)) double var(--slotted-focus-ring-color, Highlight);outline-offset:calc(-1 * (var(--slotted-focus-ring-width, 2px) + var(--_invalid-edge-width)))}[data-ui=tags-input][data-part=root][data-invalid]:has([data-part=chips]>:not([data-part=field]):focus-visible),[data-ui=tags-input][data-part=root][data-variant=plain][data-invalid]:has([data-part=chips]>:not([data-part=field]):focus-visible){outline:var(--_invalid-edge-width) solid CanvasText;outline-offset:calc(-1 * (var(--slotted-control-border-width, 1px) + var(--_invalid-edge-width)))}}[data-ui=tags-input][data-part=root][data-readonly]{background-color:var( --slotted-tags-input-readonly-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=tags-input][data-part=root][data-disabled],[data-ui=tags-input][data-part=root]:has([data-part=input]:disabled){background-color:var( --slotted-tags-input-disabled-background, var(--slotted-disabled-background) );border-color:var(--slotted-tags-input-disabled-border-color, var(--slotted-disabled-border));box-shadow:none;color:var(--slotted-tags-input-disabled-color, var(--slotted-disabled-foreground));cursor:not-allowed}[data-ui=tags-input]>[data-part=clear]:hover:not(:disabled):not([data-disabled]){background-color:var( --slotted-tags-input-action-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=tags-input]>[data-part=clear]:active:not(:disabled):not([data-disabled]){background-color:var( --slotted-tags-input-action-active-background, var(--slotted-tone-secondary-subtle-active) )}[data-ui=tags-input]>[data-part=clear]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}}\n", "@layer slotted.components{[data-ui=tag][data-part=root]{--_solid: var(--slotted-tone-secondary-solid-hover);--_solid-hover: var(--slotted-tone-secondary-solid-active);--_solid-active: var(--slotted-tone-secondary-solid-active);--_on-solid: var(--slotted-tone-secondary-on-solid);--_surface: var(--slotted-tone-secondary-surface);--_subtle-hover: var(--slotted-tone-secondary-subtle-hover);--_subtle-active: var(--slotted-tone-secondary-subtle-active);--_border: var(--slotted-tag-border-color, var(--slotted-tone-secondary-border));--_text: var(--slotted-tone-secondary-text);--_edge: var(--_solid);--_font-size: var(--slotted-control-font-size-md, 13px);--_icon-size: var(--slotted-control-icon-size-sm, 14px);--_inner-size: var(--slotted-control-inner-size-sm, 22px);--_inset-block: var(--slotted-tag-inset-block, var(--slotted-space-2, .25rem));--_inset-inline: var(--slotted-space-4, .5rem);--_gap: var(--slotted-space-2, .25rem);--_line-height: var(--slotted-line-height-xs, 1.4);--_edge-width: var(--slotted-tag-border-width, var(--slotted-border-width-thin, 1px));--_radius: var(--slotted-radius-full, 9999px);--_inner-radius: max(0px, calc(var(--_radius) - var(--_edge-width)));--_own-size: calc( var(--_font-size) * var(--_line-height) + 2 * var(--_inset-block) + 2 * var(--_edge-width) );--_block-size: var(--slotted-control-inner-size, var(--_own-size));--_line: min( calc(var(--_font-size) * var(--_line-height)), calc(var(--_block-size) - 2 * var(--_edge-width)) );--_inset: max(0px, calc((var(--_block-size) - var(--_line) - 2 * var(--_edge-width)) / 2));align-items:stretch;border:var(--_edge-width) solid transparent;border-radius:var(--_radius);box-sizing:border-box;display:inline-flex;font-family:var(--slotted-tag-font-family, var(--slotted-control-font-family, sans-serif));font-size:var(--_font-size);font-weight:var(--slotted-tag-font-weight, var(--slotted-font-weight-medium, 500));line-height:var(--_line);max-inline-size:100%;min-block-size:var(--_block-size);vertical-align:middle;white-space:nowrap}[data-ui=tag][data-part=root][hidden]{display:none}[data-ui=tag][data-part=root][data-tone=secondary]{--_edge: var(--_border)}[data-ui=tag][data-part=root][data-tone=accent]{--_solid: var(--slotted-tone-accent-solid);--_solid-hover: var(--slotted-tone-accent-solid-hover);--_solid-active: var(--slotted-tone-accent-solid-active);--_on-solid: var(--slotted-tone-accent-on-solid);--_surface: var(--slotted-tone-accent-surface);--_subtle-hover: var(--slotted-tone-accent-subtle-hover);--_subtle-active: var(--slotted-tone-accent-subtle-active);--_border: var(--slotted-tag-border-color, var(--slotted-tone-accent-border));--_text: var(--slotted-tone-accent-text)}[data-ui=tag][data-part=root][data-tone=success]{--_solid: var(--slotted-tone-success-solid);--_solid-hover: var(--slotted-tone-success-solid-hover);--_solid-active: var(--slotted-tone-success-solid-active);--_on-solid: var(--slotted-tone-success-on-solid);--_surface: var(--slotted-tone-success-surface);--_subtle-hover: var(--slotted-tone-success-subtle-hover);--_subtle-active: var(--slotted-tone-success-subtle-active);--_border: var(--slotted-tag-border-color, var(--slotted-tone-success-border));--_text: var(--slotted-tone-success-text)}[data-ui=tag][data-part=root][data-tone=warning]{--_solid: var(--slotted-tone-warning-solid);--_solid-hover: var(--slotted-tone-warning-solid-hover);--_solid-active: var(--slotted-tone-warning-solid-active);--_on-solid: var(--slotted-tone-warning-on-solid);--_surface: var(--slotted-tone-warning-surface);--_subtle-hover: var(--slotted-tone-warning-subtle-hover);--_subtle-active: var(--slotted-tone-warning-subtle-active);--_border: var(--slotted-tag-border-color, var(--slotted-tone-warning-border));--_text: var(--slotted-tone-warning-text)}[data-ui=tag][data-part=root][data-tone=danger]{--_solid: var(--slotted-tone-danger-solid);--_solid-hover: var(--slotted-tone-danger-solid-hover);--_solid-active: var(--slotted-tone-danger-solid-active);--_on-solid: var(--slotted-tone-danger-on-solid);--_surface: var(--slotted-tone-danger-surface);--_subtle-hover: var(--slotted-tone-danger-subtle-hover);--_subtle-active: var(--slotted-tone-danger-subtle-active);--_border: var(--slotted-tag-border-color, var(--slotted-tone-danger-border));--_text: var(--slotted-tone-danger-text)}[data-ui=tag][data-part=root][data-variant=solid]{background-color:var(--_solid, ButtonFace);border-color:var(--_edge, ButtonFace);color:var(--_on-solid, ButtonText)}[data-ui=tag][data-part=root][data-variant=soft]{background-color:var(--_surface, ButtonFace);border-color:var(--_border, ButtonBorder);color:var(--_text, ButtonText)}[data-ui=tag][data-part=root][data-variant=outline]{background-color:transparent;border-color:var(--_border, ButtonBorder);color:var(--_text, ButtonText)}[data-ui=tag][data-part=root][data-size=sm]{--_font-size: var(--slotted-control-font-size-sm, 12px);--_inset-block: var(--slotted-tag-inset-block, var(--slotted-space-1, .125rem));--_inset-inline: var(--slotted-space-3, .375rem)}[data-ui=tag][data-part=root][data-size=lg]{--_font-size: var(--slotted-control-font-size-lg, 14px);--_icon-size: var(--slotted-control-icon-size-md, 16px);--_inner-size: var(--slotted-control-inner-size-md, 24px);--_inset-block: var(--slotted-tag-inset-block, var(--slotted-space-3, .375rem));--_inset-inline: var(--slotted-space-5, .75rem);--_gap: var(--slotted-space-3, .375rem)}[data-ui=tag][data-part=root][data-shape=square]{--_radius: var(--slotted-radius-sm, 4px)}[data-ui=tag] [data-part=body]{align-items:center;background-color:transparent;border:0;border-end-start-radius:var(--_inner-radius);border-start-start-radius:var(--_inner-radius);box-sizing:border-box;color:inherit;display:inline-flex;font:inherit;gap:var(--_gap);letter-spacing:inherit;min-inline-size:0;padding-block:var(--_inset);padding-inline:var(--_inset-inline);text-align:start;text-decoration:none;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=tag] [data-part=body]:last-child{border-end-end-radius:var(--_inner-radius);border-start-end-radius:var(--_inner-radius)}[data-ui=tag] [data-part=body]:has(+[data-part=remove]){padding-inline-end:var(--_gap)}[data-ui=tag] [data-part=body]:is(a,button){cursor:pointer}[data-ui=tag] [data-part=label]{min-inline-size:0;overflow:hidden;text-overflow:ellipsis;unicode-bidi:plaintext}@supports (text-box: trim-both cap alphabetic){[data-ui=tag] [data-part=label]{margin-block:-.3em;padding-block:.3em;text-box:trim-both cap alphabetic}}[data-ui=tag] [data-part=start],[data-ui=tag] [data-part=end]{--slotted-icon-size: var(--_icon-size);align-items:center;block-size:var(--_icon-size);box-sizing:border-box;display:inline-flex;flex:none;font-size:var(--_icon-size);inline-size:var(--_icon-size);justify-content:center;line-height:1}[data-ui=tag] [data-part=start]>*,[data-ui=tag] [data-part=end]>*{block-size:100%;display:block;inline-size:100%}[data-ui=tag] [data-part=indicator]{--slotted-icon-size: var(--_icon-size);align-items:center;block-size:var(--_icon-size);display:inline-flex;flex:none;inline-size:0;justify-content:center;margin-inline-end:calc(-1 * var(--_gap));opacity:0;overflow:hidden;transition:inline-size var(--slotted-duration-short) var(--slotted-easing-standard),margin-inline-end var(--slotted-duration-short) var(--slotted-easing-standard),opacity var(--slotted-duration-short) var(--slotted-easing-standard)}[data-ui=tag][data-part=root][data-selected] [data-part=indicator]{inline-size:var(--_icon-size);margin-inline-end:0;opacity:1}[data-ui=tag] [data-part=remove]{--slotted-icon-size: var(--_icon-size);align-items:center;appearance:none;background-color:transparent;border:0;border-end-end-radius:var(--_inner-radius);border-start-end-radius:var(--_inner-radius);box-sizing:border-box;color:inherit;cursor:pointer;display:inline-flex;flex:none;inline-size:max(var(--slotted-target-min, 24px),min(calc(var(--_icon-size) + 2 * var(--slotted-space-2, .25rem)),var(--_inner-size)));justify-content:center;padding:0;position:relative;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=tag] [data-part=remove]:after{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-min, 24px)) / 2));position:absolute}@media(pointer:coarse){[data-ui=tag] [data-part=remove]{inline-size:max(var(--slotted-target-min, 24px),min(calc(var(--_icon-size) + 2 * var(--slotted-space-2, .25rem)),var(--_inner-size)),calc(var(--_block-size) - 2 * var(--_edge-width)))}[data-ui=tag] [data-part=remove]:after{inset:min(0px,calc((100% - var(--slotted-target-comfortable, 44px)) / 2))}}[data-ui=tag] [data-part=remove]:first-child{border-end-start-radius:var(--_inner-radius);border-start-start-radius:var(--_inner-radius)}[data-ui=tag][data-part=root][data-selected]:not([data-disabled]){background-color:var(--_solid, ButtonFace);border-color:var(--_edge, ButtonBorder);color:var(--_on-solid, ButtonText)}[data-ui=tag][data-part=root]{--_state-hover: color-mix( in oklab, currentColor var(--slotted-tag-state-layer-hover, 8%), transparent );--_state-active: color-mix( in oklab, currentColor var(--slotted-tag-state-layer-active, 14%), transparent )}[data-ui=tag][data-part=root][data-variant=soft]:not([data-disabled]):not([data-selected]) :is([data-part=body]:is(a,button),[data-part=remove]):hover:not(:disabled){background-color:var(--_state-hover)}[data-ui=tag][data-part=root][data-variant=soft]:not([data-disabled]):not([data-selected]) :is([data-part=body]:is(a,button),[data-part=remove]):active:not(:disabled){background-color:var(--_state-active)}[data-ui=tag][data-part=root][data-variant=outline]:not([data-disabled]):not([data-selected]) :is([data-part=body]:is(a,button),[data-part=remove]):hover:not(:disabled){background-color:var(--_subtle-hover, ButtonFace)}[data-ui=tag][data-part=root][data-variant=outline]:not([data-disabled]):not([data-selected]) :is([data-part=body]:is(a,button),[data-part=remove]):active:not(:disabled){background-color:var(--_subtle-active, ButtonFace)}[data-ui=tag][data-part=root][data-variant=solid]:not([data-disabled]) :is([data-part=body]:is(a,button),[data-part=remove]):hover:not(:disabled),[data-ui=tag][data-part=root][data-selected]:not([data-disabled]) :is([data-part=body]:is(a,button),[data-part=remove]):hover:not(:disabled){background-color:var(--_solid-hover, Highlight)}[data-ui=tag][data-part=root][data-variant=solid]:not([data-disabled]) :is([data-part=body]:is(a,button),[data-part=remove]):active:not(:disabled),[data-ui=tag][data-part=root][data-selected]:not([data-disabled]) :is([data-part=body]:is(a,button),[data-part=remove]):active:not(:disabled){background-color:var(--_solid-active, Highlight)}[data-ui=tag] [data-part=body]:focus-visible,[data-ui=tag] [data-part=remove]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(-2 * var(--slotted-focus-ring-width, 2px))}[data-ui=tag][data-part=group]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=tag][data-part=root][data-disabled]{color:var(--slotted-disabled-foreground, GrayText)}[data-ui=tag][data-part=root][data-variant=solid][data-disabled],[data-ui=tag][data-part=root][data-variant=soft][data-disabled],[data-ui=tag][data-part=root][data-selected][data-disabled]{background-color:var(--slotted-disabled-background, Canvas);border-color:var(--slotted-disabled-border, GrayText)}[data-ui=tag][data-part=root][data-variant=outline][data-disabled]{background-color:transparent;border-color:var(--slotted-disabled-border, GrayText)}[data-ui=tag][data-part=root][data-disabled] :is([data-part=body],[data-part=remove]),[data-ui=tag] [data-part=body]:disabled,[data-ui=tag] [data-part=remove]:disabled{background-color:transparent;cursor:not-allowed}[data-ui=tag] [data-part=remove]:disabled{color:var(--slotted-disabled-foreground, GrayText)}[data-ui=tag][data-part=group]{align-items:center;display:flex;flex-wrap:wrap;gap:var(--slotted-tag-group-gap, var(--slotted-space-2, .25rem))}[data-ui=tag][data-part=group][data-orientation=vertical]{align-items:start;flex-direction:column;flex-wrap:nowrap;inline-size:fit-content}[data-ui=tag][data-part=group]:empty{display:none}@media(forced-colors:active){[data-ui=tag][data-part=root]{border-color:currentColor}[data-ui=tag][data-part=root][data-selected]:not([data-disabled]){background-color:Highlight;color:HighlightText;forced-color-adjust:none}[data-ui=tag][data-part=root][data-disabled]{border-color:GrayText;color:GrayText}}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], valueChangeRequest: [{ type: i0.Output, args: ["valueChangeRequest"] }], defaultValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValue", required: false }] }], inputValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputValue", required: false }] }, { type: i0.Output, args: ["inputValueChange"] }], inputValueChangeRequest: [{ type: i0.Output, args: ["inputValueChangeRequest"] }], valueRefuse: [{ type: i0.Output, args: ["valueRefuse"] }], valueCopy: [{ type: i0.Output, args: ["valueCopy"] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], list: [{ type: i0.Input, args: [{ isSignal: true, alias: "list", required: false }] }], pattern: [{ type: i0.Input, args: [{ isSignal: true, alias: "pattern", required: false }] }], minLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLength", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], inputMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputMode", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], validateValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "validateValue", required: false }] }], normalize: [{ type: i0.Input, args: [{ isSignal: true, alias: "normalize", required: false }] }], split: [{ type: i0.Input, args: [{ isSignal: true, alias: "split", required: false }] }], formatLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatLabel", required: false }] }], lockedValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "lockedValues", required: false }] }], delimiters: [{ type: i0.Input, args: [{ isSignal: true, alias: "delimiters", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], overflow: [{ type: i0.Input, args: [{ isSignal: true, alias: "overflow", required: false }] }], invalidValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalidValues", required: false }] }], pendingOnBlur: [{ type: i0.Input, args: [{ isSignal: true, alias: "pendingOnBlur", required: false }] }], messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }], addOnPaste: [{ type: i0.Input, args: [{ isSignal: true, alias: "addOnPaste", required: false }] }], allowDuplicates: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowDuplicates", required: false }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], reorderable: [{ type: i0.Input, args: [{ isSignal: true, alias: "reorderable", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], controlRef: [{ type: i0.ViewChild, args: ['control', { isSignal: true }] }], rowRef: [{ type: i0.ViewChild, args: ['row', { isSignal: true }] }], countRef: [{ type: i0.ViewChild, args: ['count', { isSignal: true }] }] } });
+  `, styles: ["@layer slotted.components{[data-ui-tags-input][data-part-root]{--_font-size: var(--slotted-control-font-size-md, 13px);--_height: var(--slotted-control-height-md, 34px);--_padding-inline: var(--slotted-control-padding-inline-md, 13px);--_gap: var(--slotted-control-gap-md, 8px);--_icon-floor: var(--slotted-tags-input-icon-size-min, 14px);--_icon-size: max(var(--_icon-floor), var(--slotted-control-icon-size-md, 16px));--_action-size: var( --slotted-tags-input-action-size, min(calc(var(--_icon-size) + 2 * var(--slotted-space-2, .25rem)), var(--_inner-size)) );--_row-air: var(--slotted-space-1, .125rem);--_inner-size: var(--slotted-control-inner-size-md, 24px);--_row-size: var(--_inner-size);--_row-gap: var(--slotted-space-2, .25rem);align-items:center;background-color:var(--slotted-tags-input-background, var(--slotted-control-surface, Field));border:var(--slotted-control-border-width, 1px) solid var(--slotted-tags-input-border-color, var(--slotted-control-border-color, ButtonBorder));border-radius:var(--slotted-tags-input-radius, var(--slotted-control-radius, 4px));box-shadow:var(--slotted-tags-input-shadow, var(--slotted-control-shadow, none));box-sizing:border-box;color:var(--slotted-tags-input-color, var(--slotted-text, CanvasText));display:flex;font-family:var(--slotted-control-font-family, system-ui, sans-serif);font-size:var(--_font-size);gap:var(--slotted-space-1, .125rem);inline-size:100%;min-block-size:var(--_height);min-inline-size:0;padding-inline-start:var(--_padding-inline);padding-inline-end:max(0px,calc(var(--_padding-inline) - (var(--_action-size) - var(--_icon-size)) / 2));position:relative;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),border-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),box-shadow var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui-tags-input][data-part-root]:not([data-full-width]){inline-size:auto}[data-ui-tags-input]>[data-part-control]{display:flex;flex:1 1 auto;min-inline-size:0;align-self:stretch}[data-ui-tags-input]>[data-part-control]+*{margin-inline-start:var(--_row-gap)}[data-ui-tags-input] [data-part-chips]{align-content:safe center;align-items:center;box-sizing:border-box;column-gap:var(--_row-gap);display:flex;flex:1 1 auto;flex-wrap:wrap;min-inline-size:0;padding-block:var(--_row-air);padding-inline:var(--_row-air);margin-inline:calc(-1 * var(--_row-air));row-gap:var(--_row-gap);max-block-size:calc(3 * var(--_row-size) + 2 * var(--_row-gap) + 2 * var(--_row-air));overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}[data-ui-tags-input] [data-part-chips]::-webkit-scrollbar{display:none}[data-ui-tags-input][data-overflow=collapse]:not([data-expanded]) [data-part-chips]{flex-wrap:nowrap;max-block-size:none;overflow:hidden}[data-ui-tags-input][data-overflow=collapse][data-expanded] [data-part-chips]>[data-count]{display:none}[data-ui-tags-input] [data-part-chips] input:not([data-part-input]){background-color:transparent;border:0;color:inherit;font:inherit;min-inline-size:0;outline:none;padding:0}[data-ui-tags-input] [data-part-chips]>:not([data-part-field]){flex:0 0 auto;max-inline-size:100%;min-block-size:var(--_row-size);min-inline-size:0}[data-ui-tags-input] [data-part-chips]{--slotted-control-inner-size: var(--_inner-size)}[data-ui-tags-input] [data-part-field]{align-items:center;display:flex;flex:1 1 var(--slotted-tags-input-field-basis, 4rem);min-block-size:var(--_row-size);min-inline-size:var(--slotted-tags-input-field-min, 2.5rem)}[data-ui-tags-input] [data-part-input]{background-color:transparent;border:0;color:inherit;flex:1 1 auto;font:inherit;outline:none;padding:0;min-inline-size:0;text-overflow:ellipsis}[data-ui-tags-input] [data-part-input]::placeholder{color:var(--slotted-tags-input-placeholder-color, var(--slotted-text-muted, GrayText));text-overflow:ellipsis}[data-ui-tags-input] [data-part-input]:autofill{box-shadow:inset 0 0 0 100px var(--slotted-tags-input-autofill-background, var(--slotted-tone-accent-surface));-webkit-text-fill-color:var(--slotted-tags-input-color, var(--slotted-text, CanvasText))}[data-ui-tags-input] [data-part-chips]>:not([data-part-field]):focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(-1 * var(--slotted-focus-ring-width, 2px))}[data-ui-tags-input] [data-part-chips]>[data-current]{--slotted-tag-border-color: var( --slotted-tags-input-current-border-color, var(--slotted-tone-accent-border) )}[data-ui-tags-input] [data-part-chips]>[data-count]{cursor:pointer;flex:none}[data-ui-tags-input]>[data-part-counter]{align-self:center;color:var(--slotted-tags-input-counter-color, var(--slotted-text-muted, GrayText));flex:none;font-size:var(--slotted-font-size-xs, .75rem);font-variant-numeric:tabular-nums;line-height:var(--slotted-line-height-sm, 1.45);padding-inline:var(--slotted-space-1, .125rem);unicode-bidi:plaintext;white-space:nowrap}[data-ui-tags-input][data-complete]>[data-part-counter]{color:var(--slotted-tags-input-counter-complete-color, var(--slotted-tone-accent-text));font-weight:var(--slotted-font-weight-medium, 500)}[data-ui-tags-input][data-narrow] [data-part-chips]>:not([data-part-field]){display:none}[data-ui-tags-input] :is([data-part-message],[data-part-hint]){block-size:1px;border:0;clip-path:inset(50%);inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap}[data-ui-tags-input]>[data-part-clear]{align-items:center;align-self:center;appearance:none;background-color:transparent;block-size:var(--_action-size);border:0;border-radius:var(--slotted-tags-input-radius, var(--slotted-control-radius, 4px));color:var(--slotted-tags-input-action-color, var(--slotted-text-muted, GrayText));cursor:pointer;display:inline-flex;flex:0 0 auto;inline-size:var(--_action-size);justify-content:center;padding:0;position:relative;touch-action:manipulation;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);-webkit-tap-highlight-color:transparent}[data-ui-tags-input]>[data-part-clear]:after{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-min, 24px)) / 2));position:absolute}@media(pointer:coarse){[data-ui-tags-input]>[data-part-clear]:after{inset:min(0px,calc((100% - var(--slotted-target-comfortable, 44px)) / 2));inset-inline-start:0}}[data-ui-tags-input]>[data-part-clear]{--slotted-icon-size: var(--_icon-size)}[data-ui-tags-input][data-part-root][data-size=sm]{--_font-size: var(--slotted-control-font-size-sm, 12px);--_height: var(--slotted-control-height-sm, 30px);--_inner-size: var(--slotted-control-inner-size-sm, 22px);--_padding-inline: var(--slotted-control-padding-inline-sm, 10px);--_gap: var(--slotted-control-gap-sm, 6px);--_icon-size: max(var(--_icon-floor), var(--slotted-control-icon-size-sm, 14px))}[data-ui-tags-input][data-part-root][data-size=md]{--_font-size: var(--slotted-control-font-size-md, 13px);--_height: var(--slotted-control-height-md, 34px);--_padding-inline: var(--slotted-control-padding-inline-md, 13px);--_gap: var(--slotted-control-gap-md, 8px);--_icon-size: max(var(--_icon-floor), var(--slotted-control-icon-size-md, 16px));--_inner-size: var(--slotted-control-inner-size-md, 24px)}[data-ui-tags-input][data-part-root][data-size=lg]{--_font-size: var(--slotted-control-font-size-lg, 14px);--_height: var(--slotted-control-height-lg, 38px);--_inner-size: var(--slotted-control-inner-size-lg, 28px);--_padding-inline: var(--slotted-control-padding-inline-lg, 16px);--_gap: var(--slotted-control-gap-lg, 8px);--_icon-size: max(var(--_icon-floor), var(--slotted-control-icon-size-lg, 18px))}[data-ui-tags-input][data-part-root][data-variant=subtle]{background-color:var( --slotted-tags-input-subtle-background, var(--slotted-surface-sunken, Canvas) );border-color:var( --slotted-tags-input-subtle-border-color, var(--slotted-border-subtle, ButtonBorder) )}[data-ui-tags-input][data-part-root][data-variant=plain]{background-color:transparent;border-color:transparent;border-radius:var(--slotted-radius-none, 0px);box-shadow:none}@media(forced-colors:active){[data-ui-tags-input][data-part-root][data-variant=plain]{border-color:ButtonBorder}}[data-ui-tags-input][data-part-root]:hover:not([data-disabled]):not([data-readonly]):not([data-invalid]){border-color:var(--slotted-tags-input-hover-border-color, var(--slotted-tone-accent-border))}[data-ui-tags-input][data-part-root][data-variant=subtle]:hover:not([data-disabled]):not([data-readonly]):not([data-invalid]){background-color:var( --slotted-tags-input-subtle-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui-tags-input][data-part-root][data-variant=plain]:hover:not([data-disabled]):not([data-readonly]):not([data-invalid]){background-color:var( --slotted-tags-input-plain-hover-background, var(--slotted-tone-secondary-subtle-hover) );border-color:transparent}[data-ui-tags-input][data-part-root]:has([data-part-input]:focus-visible),[data-ui-tags-input][data-part-root]:has([data-part-chips]>:not([data-part-field]):focus-visible){box-shadow:var(--slotted-control-shadow-focus-geometry, 0 1px 4px -1px) var(--slotted-focus-ring-color, Highlight);outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui-tags-input][data-part-root][data-variant=plain]:has([data-part-input]:focus-visible),[data-ui-tags-input][data-part-root][data-variant=plain]:has([data-part-chips]>:not([data-part-field]):focus-visible){box-shadow:none;outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}[data-ui-tags-input][data-part-root]:has([data-part-chips]>:not([data-part-field]):focus-visible){outline:none}[data-ui-tags-input][data-part-root][data-invalid]{--slotted-focus-ring-color: var( --slotted-tags-input-invalid-focus-ring-color, var(--slotted-focus-ring-color-invalid, Highlight) );--_invalid-edge-width: var( --slotted-tags-input-invalid-edge-width, var(--slotted-control-invalid-edge-width, 1px) );--_invalid-edge-color: var( --slotted-tags-input-invalid-border-color, var(--slotted-tone-danger-border) );--_invalid-edge: inset 0 0 0 var(--_invalid-edge-width) var(--_invalid-edge-color);border-color:var(--slotted-tags-input-invalid-border-color, var(--slotted-tone-danger-border));box-shadow:var(--_invalid-edge)}[data-ui-tags-input][data-part-root][data-invalid]:has([data-part-input]:focus-visible),[data-ui-tags-input][data-part-root][data-invalid]:has([data-part-chips]>:not([data-part-field]):focus-visible){box-shadow:var(--_invalid-edge),var(--slotted-control-shadow-focus-geometry, 0 1px 4px -1px) var(--slotted-focus-ring-color, Highlight)}[data-ui-tags-input][data-part-root][data-variant=plain][data-invalid]:has([data-part-input]:focus-visible),[data-ui-tags-input][data-part-root][data-variant=plain][data-invalid]:has([data-part-chips]>:not([data-part-field]):focus-visible){box-shadow:inset 0 0 0 calc(var(--slotted-focus-ring-offset, 2px) - var(--slotted-control-border-width, 1px) + var(--_invalid-edge-width)) var(--_invalid-edge-color)}@media(forced-colors:active){[data-ui-tags-input][data-part-root][data-invalid]{outline:var(--_invalid-edge-width) solid CanvasText;outline-offset:calc(-1 * (var(--slotted-control-border-width, 1px) + var(--_invalid-edge-width)))}[data-ui-tags-input][data-part-root][data-invalid]:has([data-part-input]:focus-visible){outline:calc(var(--slotted-focus-ring-width, 2px) + var(--_invalid-edge-width)) double var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui-tags-input][data-part-root][data-variant=plain][data-invalid]:has([data-part-input]:focus-visible){outline:calc(var(--slotted-focus-ring-width, 2px) + var(--_invalid-edge-width)) double var(--slotted-focus-ring-color, Highlight);outline-offset:calc(-1 * (var(--slotted-focus-ring-width, 2px) + var(--_invalid-edge-width)))}[data-ui-tags-input][data-part-root][data-invalid]:has([data-part-chips]>:not([data-part-field]):focus-visible),[data-ui-tags-input][data-part-root][data-variant=plain][data-invalid]:has([data-part-chips]>:not([data-part-field]):focus-visible){outline:var(--_invalid-edge-width) solid CanvasText;outline-offset:calc(-1 * (var(--slotted-control-border-width, 1px) + var(--_invalid-edge-width)))}}[data-ui-tags-input][data-part-root][data-readonly]{background-color:var( --slotted-tags-input-readonly-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui-tags-input][data-part-root][data-disabled],[data-ui-tags-input][data-part-root]:has([data-part-input]:disabled){background-color:var( --slotted-tags-input-disabled-background, var(--slotted-disabled-background) );border-color:var(--slotted-tags-input-disabled-border-color, var(--slotted-disabled-border));box-shadow:none;color:var(--slotted-tags-input-disabled-color, var(--slotted-disabled-foreground));cursor:not-allowed}[data-ui-tags-input]>[data-part-clear]:hover:not(:disabled):not([data-disabled]){background-color:var( --slotted-tags-input-action-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui-tags-input]>[data-part-clear]:active:not(:disabled):not([data-disabled]){background-color:var( --slotted-tags-input-action-active-background, var(--slotted-tone-secondary-subtle-active) )}[data-ui-tags-input]>[data-part-clear]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}[data-ui-tags-input]>[data-part-suggestions]{background-color:var(--slotted-surface-raised, Canvas);border:var(--slotted-border-width-thin, 1px) solid var(--slotted-border-subtle, GrayText);border-radius:var(--slotted-radius-lg, 8px);box-shadow:var(--slotted-shadow-md);box-sizing:border-box;color:var(--slotted-text, CanvasText);font-size:var(--_font-size);inline-size:var(--slotted-positioner-anchor-width, 100%);max-block-size:calc(10 * var(--_height) + 2 * var(--slotted-space-2, .25rem));overflow-y:auto;overscroll-behavior:contain;padding:var(--slotted-space-2, .25rem);position:fixed;z-index:calc(var(--slotted-z-index-popover, 1100) + var(--slotted-layer-depth, 0))}[data-ui-tags-input]>[data-part-suggestions]>[data-part-suggestion]{align-items:center;border-radius:var(--slotted-control-radius, 4px);cursor:default;display:flex;min-block-size:var(--_height);overflow-wrap:anywhere;padding-inline:var(--_padding-inline)}[data-ui-tags-input]>[data-part-suggestions]>[data-highlighted]{background-color:var(--slotted-tone-secondary-subtle-active)}@media(forced-colors:active){[data-ui-tags-input]>[data-part-suggestions]>[data-highlighted]{background-color:Highlight;color:HighlightText}}}\n", "@layer slotted.components{[data-ui-tag][data-part-root]{--_solid: var(--slotted-tone-secondary-solid-hover);--_solid-hover: var(--slotted-tone-secondary-solid-active);--_solid-active: var(--slotted-tone-secondary-solid-active);--_on-solid: var(--slotted-tone-secondary-on-solid);--_surface: var(--slotted-tone-secondary-surface);--_subtle-hover: var(--slotted-tone-secondary-subtle-hover);--_subtle-active: var(--slotted-tone-secondary-subtle-active);--_border: var(--slotted-tag-border-color, var(--slotted-tone-secondary-border));--_text: var(--slotted-tone-secondary-text);--_edge: var(--_solid);--_font-size: var(--slotted-control-font-size-md, 13px);--_icon-size: var(--slotted-control-icon-size-sm, 14px);--_inner-size: var(--slotted-control-inner-size-sm, 22px);--_inset-block: var(--slotted-tag-inset-block, var(--slotted-space-2, .25rem));--_inset-inline: var(--slotted-space-4, .5rem);--_gap: var(--slotted-space-2, .25rem);--_line-height: var(--slotted-line-height-xs, 1.4);--_edge-width: var(--slotted-tag-border-width, var(--slotted-border-width-thin, 1px));--_radius: var(--slotted-radius-full, 9999px);--_inner-radius: max(0px, calc(var(--_radius) - var(--_edge-width)));--_own-size: calc( var(--_font-size) * var(--_line-height) + 2 * var(--_inset-block) + 2 * var(--_edge-width) );--_block-size: var(--slotted-control-inner-size, var(--_own-size));--_line: min( calc(var(--_font-size) * var(--_line-height)), calc(var(--_block-size) - 2 * var(--_edge-width)) );--_inset: max(0px, calc((var(--_block-size) - var(--_line) - 2 * var(--_edge-width)) / 2));align-items:stretch;border:var(--_edge-width) solid transparent;border-radius:var(--_radius);box-sizing:border-box;display:inline-flex;font-family:var(--slotted-tag-font-family, var(--slotted-control-font-family, sans-serif));font-size:var(--_font-size);font-weight:var(--slotted-tag-font-weight, var(--slotted-font-weight-medium, 500));line-height:var(--_line);max-inline-size:100%;min-block-size:var(--_block-size);vertical-align:middle;white-space:nowrap}[data-ui-tag][data-part-root][hidden]{display:none}[data-ui-tag][data-part-root][data-tone=secondary]{--_edge: var(--_border)}[data-ui-tag][data-part-root][data-tone=accent]{--_solid: var(--slotted-tone-accent-solid);--_solid-hover: var(--slotted-tone-accent-solid-hover);--_solid-active: var(--slotted-tone-accent-solid-active);--_on-solid: var(--slotted-tone-accent-on-solid);--_surface: var(--slotted-tone-accent-surface);--_subtle-hover: var(--slotted-tone-accent-subtle-hover);--_subtle-active: var(--slotted-tone-accent-subtle-active);--_border: var(--slotted-tag-border-color, var(--slotted-tone-accent-border));--_text: var(--slotted-tone-accent-text)}[data-ui-tag][data-part-root][data-tone=success]{--_solid: var(--slotted-tone-success-solid);--_solid-hover: var(--slotted-tone-success-solid-hover);--_solid-active: var(--slotted-tone-success-solid-active);--_on-solid: var(--slotted-tone-success-on-solid);--_surface: var(--slotted-tone-success-surface);--_subtle-hover: var(--slotted-tone-success-subtle-hover);--_subtle-active: var(--slotted-tone-success-subtle-active);--_border: var(--slotted-tag-border-color, var(--slotted-tone-success-border));--_text: var(--slotted-tone-success-text)}[data-ui-tag][data-part-root][data-tone=warning]{--_solid: var(--slotted-tone-warning-solid);--_solid-hover: var(--slotted-tone-warning-solid-hover);--_solid-active: var(--slotted-tone-warning-solid-active);--_on-solid: var(--slotted-tone-warning-on-solid);--_surface: var(--slotted-tone-warning-surface);--_subtle-hover: var(--slotted-tone-warning-subtle-hover);--_subtle-active: var(--slotted-tone-warning-subtle-active);--_border: var(--slotted-tag-border-color, var(--slotted-tone-warning-border));--_text: var(--slotted-tone-warning-text)}[data-ui-tag][data-part-root][data-tone=danger]{--_solid: var(--slotted-tone-danger-solid);--_solid-hover: var(--slotted-tone-danger-solid-hover);--_solid-active: var(--slotted-tone-danger-solid-active);--_on-solid: var(--slotted-tone-danger-on-solid);--_surface: var(--slotted-tone-danger-surface);--_subtle-hover: var(--slotted-tone-danger-subtle-hover);--_subtle-active: var(--slotted-tone-danger-subtle-active);--_border: var(--slotted-tag-border-color, var(--slotted-tone-danger-border));--_text: var(--slotted-tone-danger-text)}[data-ui-tag][data-part-root][data-variant=solid]{background-color:var(--_solid, ButtonFace);border-color:var(--_edge, ButtonFace);color:var(--_on-solid, ButtonText)}[data-ui-tag][data-part-root][data-variant=soft]{background-color:var(--_surface, ButtonFace);border-color:var(--_border, ButtonBorder);color:var(--_text, ButtonText)}[data-ui-tag][data-part-root][data-variant=outline]{background-color:transparent;border-color:var(--_border, ButtonBorder);color:var(--_text, ButtonText)}[data-ui-tag][data-part-root][data-size=sm]{--_font-size: var(--slotted-control-font-size-sm, 12px);--_inset-block: var(--slotted-tag-inset-block, var(--slotted-space-1, .125rem));--_inset-inline: var(--slotted-space-3, .375rem)}[data-ui-tag][data-part-root][data-size=lg]{--_font-size: var(--slotted-control-font-size-lg, 14px);--_icon-size: var(--slotted-control-icon-size-md, 16px);--_inner-size: var(--slotted-control-inner-size-md, 24px);--_inset-block: var(--slotted-tag-inset-block, var(--slotted-space-3, .375rem));--_inset-inline: var(--slotted-space-5, .75rem);--_gap: var(--slotted-space-3, .375rem)}[data-ui-tag][data-part-root][data-shape=square]{--_radius: var(--slotted-radius-sm, 4px)}[data-ui-tag] [data-part-body]{align-items:center;background-color:transparent;border:0;border-end-start-radius:var(--_inner-radius);border-start-start-radius:var(--_inner-radius);box-sizing:border-box;color:inherit;display:inline-flex;font:inherit;gap:var(--_gap);letter-spacing:inherit;min-inline-size:0;padding-block:var(--_inset);padding-inline:var(--_inset-inline);text-align:start;text-decoration:none;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui-tag] [data-part-body]:last-child{border-end-end-radius:var(--_inner-radius);border-start-end-radius:var(--_inner-radius)}[data-ui-tag] [data-part-body]:has(+[data-part-remove]){padding-inline-end:var(--_gap)}[data-ui-tag] [data-part-body]:is(a,button){cursor:pointer}[data-ui-tag] [data-part-label]{min-inline-size:0;overflow:hidden;text-overflow:ellipsis;unicode-bidi:plaintext}@supports (text-box: trim-both cap alphabetic){[data-ui-tag] [data-part-label]{margin-block:-.3em;padding-block:.3em;text-box:trim-both cap alphabetic}}[data-ui-tag] [data-part-start],[data-ui-tag] [data-part-end]{--slotted-icon-size: var(--_icon-size);align-items:center;block-size:var(--_icon-size);box-sizing:border-box;display:inline-flex;flex:none;font-size:var(--_icon-size);inline-size:var(--_icon-size);justify-content:center;line-height:1}[data-ui-tag] [data-part-start]>*,[data-ui-tag] [data-part-end]>*{block-size:100%;display:block;inline-size:100%}[data-ui-tag] [data-part-indicator]{--slotted-icon-size: var(--_icon-size);align-items:center;block-size:var(--_icon-size);display:inline-flex;flex:none;inline-size:0;justify-content:center;margin-inline-end:calc(-1 * var(--_gap));opacity:0;overflow:hidden;transition:inline-size var(--slotted-duration-short) var(--slotted-easing-standard),margin-inline-end var(--slotted-duration-short) var(--slotted-easing-standard),opacity var(--slotted-duration-short) var(--slotted-easing-standard)}[data-ui-tag][data-part-root][data-selected] [data-part-indicator]{inline-size:var(--_icon-size);margin-inline-end:0;opacity:1}[data-ui-tag] [data-part-remove]{--slotted-icon-size: var(--_icon-size);align-items:center;appearance:none;background-color:transparent;border:0;border-end-end-radius:var(--_inner-radius);border-start-end-radius:var(--_inner-radius);box-sizing:border-box;color:inherit;cursor:pointer;display:inline-flex;flex:none;inline-size:max(var(--slotted-target-min, 24px),min(calc(var(--_icon-size) + 2 * var(--slotted-space-2, .25rem)),var(--_inner-size)));justify-content:center;padding:0;position:relative;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui-tag] [data-part-remove]:after{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-min, 24px)) / 2));position:absolute}@media(pointer:coarse){[data-ui-tag] [data-part-remove]{inline-size:max(var(--slotted-target-min, 24px),min(calc(var(--_icon-size) + 2 * var(--slotted-space-2, .25rem)),var(--_inner-size)),calc(var(--_block-size) - 2 * var(--_edge-width)))}[data-ui-tag] [data-part-remove]:after{inset:min(0px,calc((100% - var(--slotted-target-comfortable, 44px)) / 2))}}[data-ui-tag] [data-part-remove]:first-child{border-end-start-radius:var(--_inner-radius);border-start-start-radius:var(--_inner-radius)}[data-ui-tag][data-part-root][data-selected]:not([data-disabled]){background-color:var(--_solid, ButtonFace);border-color:var(--_edge, ButtonBorder);color:var(--_on-solid, ButtonText)}[data-ui-tag][data-part-root]{--_state-hover: color-mix( in oklab, currentColor var(--slotted-tag-state-layer-hover, 8%), transparent );--_state-active: color-mix( in oklab, currentColor var(--slotted-tag-state-layer-active, 14%), transparent )}[data-ui-tag][data-part-root][data-variant=soft]:not([data-disabled]):not([data-selected]) :is([data-part-body]:is(a,button),[data-part-remove]):hover:not(:disabled){background-color:var(--_state-hover)}[data-ui-tag][data-part-root][data-variant=soft]:not([data-disabled]):not([data-selected]) :is([data-part-body]:is(a,button),[data-part-remove]):active:not(:disabled){background-color:var(--_state-active)}[data-ui-tag][data-part-root][data-variant=outline]:not([data-disabled]):not([data-selected]) :is([data-part-body]:is(a,button),[data-part-remove]):hover:not(:disabled){background-color:var(--_subtle-hover, ButtonFace)}[data-ui-tag][data-part-root][data-variant=outline]:not([data-disabled]):not([data-selected]) :is([data-part-body]:is(a,button),[data-part-remove]):active:not(:disabled){background-color:var(--_subtle-active, ButtonFace)}[data-ui-tag][data-part-root][data-variant=solid]:not([data-disabled]) :is([data-part-body]:is(a,button),[data-part-remove]):hover:not(:disabled),[data-ui-tag][data-part-root][data-selected]:not([data-disabled]) :is([data-part-body]:is(a,button),[data-part-remove]):hover:not(:disabled){background-color:var(--_solid-hover, Highlight)}[data-ui-tag][data-part-root][data-variant=solid]:not([data-disabled]) :is([data-part-body]:is(a,button),[data-part-remove]):active:not(:disabled),[data-ui-tag][data-part-root][data-selected]:not([data-disabled]) :is([data-part-body]:is(a,button),[data-part-remove]):active:not(:disabled){background-color:var(--_solid-active, Highlight)}[data-ui-tag] [data-part-body]:focus-visible,[data-ui-tag] [data-part-remove]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(-2 * var(--slotted-focus-ring-width, 2px))}[data-ui-tag][data-part-group]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui-tag][data-part-root][data-disabled]{color:var(--slotted-disabled-foreground, GrayText)}[data-ui-tag][data-part-root][data-variant=solid][data-disabled],[data-ui-tag][data-part-root][data-variant=soft][data-disabled],[data-ui-tag][data-part-root][data-selected][data-disabled]{background-color:var(--slotted-disabled-background, Canvas);border-color:var(--slotted-disabled-border, GrayText)}[data-ui-tag][data-part-root][data-variant=outline][data-disabled]{background-color:transparent;border-color:var(--slotted-disabled-border, GrayText)}[data-ui-tag][data-part-root][data-disabled] :is([data-part-body],[data-part-remove]),[data-ui-tag] [data-part-body]:disabled,[data-ui-tag] [data-part-remove]:disabled{background-color:transparent;cursor:not-allowed}[data-ui-tag] [data-part-remove]:disabled{color:var(--slotted-disabled-foreground, GrayText)}[data-ui-tag][data-part-group]{align-items:center;display:flex;flex-wrap:wrap;gap:var(--slotted-tag-group-gap, var(--slotted-space-2, .25rem))}[data-ui-tag][data-part-group][data-orientation=vertical]{align-items:start;flex-direction:column;flex-wrap:nowrap;inline-size:fit-content}[data-ui-tag][data-part-group]:empty{display:none}@media(forced-colors:active){[data-ui-tag][data-part-root]{border-color:currentColor}[data-ui-tag][data-part-root][data-selected]:not([data-disabled]){background-color:Highlight;color:HighlightText;forced-color-adjust:none}[data-ui-tag][data-part-root][data-disabled]{border-color:GrayText;color:GrayText}}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], valueChangeRequest: [{ type: i0.Output, args: ["valueChangeRequest"] }], defaultValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValue", required: false }] }], inputValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputValue", required: false }] }, { type: i0.Output, args: ["inputValueChange"] }], inputValueChangeRequest: [{ type: i0.Output, args: ["inputValueChangeRequest"] }], valueRefuse: [{ type: i0.Output, args: ["valueRefuse"] }], valueCopy: [{ type: i0.Output, args: ["valueCopy"] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], list: [{ type: i0.Input, args: [{ isSignal: true, alias: "list", required: false }] }], pattern: [{ type: i0.Input, args: [{ isSignal: true, alias: "pattern", required: false }] }], minLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLength", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], inputMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputMode", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], validateValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "validateValue", required: false }] }], normalize: [{ type: i0.Input, args: [{ isSignal: true, alias: "normalize", required: false }] }], suggestions: [{ type: i0.Input, args: [{ isSignal: true, alias: "suggestions", required: false }] }], split: [{ type: i0.Input, args: [{ isSignal: true, alias: "split", required: false }] }], formatLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatLabel", required: false }] }], lockedValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "lockedValues", required: false }] }], delimiters: [{ type: i0.Input, args: [{ isSignal: true, alias: "delimiters", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], overflow: [{ type: i0.Input, args: [{ isSignal: true, alias: "overflow", required: false }] }], invalidValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalidValues", required: false }] }], pendingOnBlur: [{ type: i0.Input, args: [{ isSignal: true, alias: "pendingOnBlur", required: false }] }], messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }], addOnPaste: [{ type: i0.Input, args: [{ isSignal: true, alias: "addOnPaste", required: false }] }], allowDuplicates: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowDuplicates", required: false }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], reorderable: [{ type: i0.Input, args: [{ isSignal: true, alias: "reorderable", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], controlRef: [{ type: i0.ViewChild, args: ['control', { isSignal: true }] }], rowRef: [{ type: i0.ViewChild, args: ['row', { isSignal: true }] }], countRef: [{ type: i0.ViewChild, args: ['count', { isSignal: true }] }], listRef: [{ type: i0.ViewChild, args: ['suggestionList', { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.