@slotted/angular 0.0.0-stage → 0.1.0-beta.0

package/fesm2022/slotted-angular-tag.mjs

@@ -0,0 +1,595 @@
+import { tagMessages } from '@slotted/core/i18n';
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, Injectable, input, booleanAttribute, ElementRef, HostAttributeToken, computed, DestroyRef, afterNextRender, Directive, output, signal, ViewEncapsulation, ChangeDetectionStrategy, Component, Renderer2, effect } from '@angular/core';
+import { injectMessages } from '@slotted/angular/i18n';
+import { createRovingTabindex, createRemovalFocus } from '@slotted/core/focus';
+import { SlGlyph, SlIcon } from '@slotted/angular/icon';
+import { createControllable } from '@slotted/core/state';
+
+const FALLBACK = {
+    shape: 'pill',
+    size: 'md',
+    tone: 'secondary',
+    variant: 'soft',
+};
+const TAG_DEFAULTS = new InjectionToken('slotted tag defaults', {
+    providedIn: 'root',
+    factory: () => FALLBACK,
+});
+/**
+ * An application decides once how its tags are painted and how large they are,
+ * rather than repeating four inputs on every chip in a filter bar. A tag that
+ * states any of them itself still wins: an explicit input is never overridden
+ * by the token. The remove control's word comes from the language in force
+ * (`provideSlotted`).
+ */
+function provideTagDefaults(defaults) {
+    return {
+        provide: TAG_DEFAULTS,
+        useFactory: () => ({
+            shape: defaults.shape ?? FALLBACK.shape,
+            size: defaults.size ?? FALLBACK.size,
+            tone: defaults.tone ?? FALLBACK.tone,
+            variant: defaults.variant ?? FALLBACK.variant,
+        }),
+    };
+}
+/** What a tag renders as here, before it states anything of its own. */
+function injectTagDefaults() {
+    return inject(TAG_DEFAULTS);
+}
+/**
+ * Application-scoped rather than module-scoped, for the reason the field
+ * primitive records: a module-level counter produces colliding sequences when
+ * two applications render in one server process, and the server and the client
+ * sequences must match for hydration.
+ */
+class SlTagIdFactory {
+    count = 0;
+    next() {
+        this.count += 1;
+        return `slotted-tag-${this.count}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTagIdFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTagIdFactory, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTagIdFactory, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * Every control the keyboard moves between, in the order the DOM holds them: a
+ * chip's own control, then its remove control, then the next chip's. Read
+ * literally from the APG Toolbar pattern, which needs no second axis to reach
+ * a control inside an item.
+ */
+const CONTROL_SELECTOR = '[data-part="body"]:is(a, button), [data-part="remove"]';
+/**
+ * The run of tags, and the keyboard that belongs to it.
+ *
+ * It is a toolbar: the APG pattern for "a container for grouping a set of
+ * controls, such as buttons". One tab stop, arrow keys between the controls
+ * inside it, `Home` and `End` at the ends. React Aria and Angular Material
+ * reach for the Grid pattern instead, which buys a second axis at the price of
+ * two wrapper elements per chip and a `gridcell` role over every button; a
+ * single wrapping run does not need the second axis.
+ *
+ * Writing `role="list"` on the element turns the keyboard off and makes every
+ * chip a `listitem`. A list is a structure rather than a widget, its items are
+ * not controls to move between, and a screen reader announces its length.
+ */
+class SlTagGroup {
+    /** Which way the run reads. `vertical` also writes `aria-orientation`. */
+    orientation = input('horizontal', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    /** Whether the arrow keys wrap past the ends of the run. */
+    loop = input(true, { ...(ngDevMode ? { debugName: "loop" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    element = inject((ElementRef)).nativeElement;
+    writtenRole = inject(new HostAttributeToken('role'), { optional: true });
+    role = computed(() => this.writtenRole ?? 'toolbar', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "role" }] : /* istanbul ignore next */ []));
+    roving = computed(() => this.role() === 'toolbar', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "roving" }] : /* istanbul ignore next */ []));
+    ariaOrientation = computed(() => 
+    /* `horizontal` is the toolbar role's own default, so only the other one is
+       written; a list has no orientation to state. */
+    this.roving() && this.orientation() === 'vertical' ? 'vertical' : null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaOrientation" }] : /* istanbul ignore next */ []));
+    /** What a chip inside this run calls itself. A toolbar's items are its controls. */
+    itemRole = computed(() => (this.role() === 'list' ? 'listitem' : undefined), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "itemRole" }] : /* istanbul ignore next */ []));
+    constructor() {
+        const destroyRef = inject(DestroyRef);
+        afterNextRender(() => {
+            if (!this.roving())
+                return;
+            const tabindex = createRovingTabindex(this.element, {
+                itemSelector: CONTROL_SELECTOR,
+                loop: this.loop(),
+                orientation: () => this.orientation(),
+            });
+            /**
+             * Where the keyboard goes when the chip it was on is taken away. The
+             * container is the last resort, which is why it holds `tabindex="-1"`: a
+             * group emptied by its final removal keeps focus rather than returning
+             * it to the top of the page.
+             */
+            const removal = createRemovalFocus(this.element, {
+                itemSelector: CONTROL_SELECTOR,
+            });
+            /**
+             * The tab stop has to survive a chip arriving or leaving, and neither
+             * binding can be told by the other's change detection. The DOM is the
+             * one thing both of them agree on.
+             */
+            const observer = new MutationObserver(() => tabindex.refresh());
+            observer.observe(this.element, { childList: true, subtree: true });
+            destroyRef.onDestroy(() => {
+                observer.disconnect();
+                removal.destroy();
+                tabindex.destroy();
+            });
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTagGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.7", type: SlTagGroup, isStandalone: true, selector: "[slTagGroup]", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, loop: { classPropertyName: "loop", publicName: "loop", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-ui": "tag", "data-part": "group", "tabindex": "-1" }, properties: { "attr.data-orientation": "orientation()", "attr.role": "role()", "attr.aria-orientation": "ariaOrientation()" } }, exportAs: ["slTagGroup"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTagGroup, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slTagGroup]',
+                    standalone: true,
+                    exportAs: 'slTagGroup',
+                    host: {
+                        'data-ui': 'tag',
+                        'data-part': 'group',
+                        tabindex: '-1',
+                        '[attr.data-orientation]': 'orientation()',
+                        '[attr.role]': 'role()',
+                        '[attr.aria-orientation]': 'ariaOrientation()',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], loop: [{ type: i0.Input, args: [{ isSignal: true, alias: "loop", required: false }] }] } });
+
+/**
+ * The chip box: an entity, a filter or a compact value. It is not metadata —
+ * that is `badge`, and the two share this tone and this type scale on purpose.
+ *
+ * **The root is never the interactive element.** A `button` cannot contain a
+ * `button` and an `a` cannot contain either, so a chip that both acts and
+ * removes has to put its two controls side by side. The chip is written on the
+ * consumer's own `span`; what the chip *is* is decided by the element under
+ * `slTagBody`: a `span` does nothing, a `button` runs a command, an `a`
+ * navigates, and `slTagToggle` holds a selection. The element is the member,
+ * which is what keeps `routerLink`, `type` and every native attribute on the
+ * element that owns them.
+ */
+class SlTag {
+    /** Defaults to the provider, then to `secondary`. */
+    tone = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
+    /** Defaults to the provider, then to `soft`. */
+    variant = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** Defaults to the provider, then to `md`. */
+    size = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Defaults to the provider, then to `pill`. */
+    shape = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shape" }] : /* istanbul ignore next */ []));
+    /** Refuses every interaction the tag offers, including its removal. */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Whether the chip can be removed at all. React reads the same fact from
+     * whether a handler was passed; Angular cannot see whether an output was
+     * subscribed, so the opt-in is stated — the asymmetry `button` recorded for
+     * its own toggle.
+     */
+    removable = input(false, { ...(ngDevMode ? { debugName: "removable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Refuses the removal while the rest of the tag stays operable. */
+    removeDisabled = input(false, { ...(ngDevMode ? { debugName: "removeDisabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Words laid over the catalog of the language in force, key by key: `remove`
+     * is the word the remove control announces before the tag's own label, so it
+     * reads "Remove Design" rather than "Remove".
+     */
+    messages = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []));
+    /** One output for one transition, carrying the reason, the event and `cancel()`. */
+    remove = output();
+    defaults = injectTagDefaults();
+    group = inject(SlTagGroup, { optional: true, skipSelf: true });
+    /** An explicit role the consumer wrote is never replaced by an inferred one. */
+    writtenRole = inject(new HostAttributeToken('role'), { optional: true });
+    /**
+     * One identifier for the chip, from which the label's and the hidden word's
+     * are derived. Deriving beats registering: the remove control needs the
+     * label's id before the body has had a chance to announce one.
+     */
+    id = inject(SlTagIdFactory).next();
+    labelId = `${this.id}-label`;
+    removeWordId = `${this.id}-remove`;
+    /** Set by `slTagToggle`, which is the one member that holds a selection. */
+    selectedState = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedState" }] : /* istanbul ignore next */ []));
+    resolvedTone = computed(() => this.tone() ?? this.defaults.tone, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedTone" }] : /* istanbul ignore next */ []));
+    resolvedVariant = computed(() => this.variant() ?? this.defaults.variant, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedVariant" }] : /* istanbul ignore next */ []));
+    resolvedSize = computed(() => this.size() ?? this.defaults.size, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedSize" }] : /* istanbul ignore next */ []));
+    resolvedShape = computed(() => this.shape() ?? this.defaults.shape, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedShape" }] : /* istanbul ignore next */ []));
+    role = computed(() => this.writtenRole ?? this.group?.itemRole() ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "role" }] : /* istanbul ignore next */ []));
+    selected = computed(() => this.selectedState(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+    /** The family's words in the language in force, with this tag's `messages` laid over them. */
+    t = injectMessages(tagMessages, this.messages);
+    removeRefused = computed(() => this.disabled() || this.removeDisabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "removeRefused" }] : /* istanbul ignore next */ []));
+    /** Called by the toggle, which owns the value and only reports it here. */
+    setSelected(selected) {
+        this.selectedState.set(selected);
+    }
+    /**
+     * The request the remove control and the keyboard both make. Nothing is
+     * committed here: the tag does not own whether it exists, and a consumer
+     * that refuses the request leaves the chip and the keyboard where they were.
+     */
+    requestRemoval(reason, source) {
+        if (!this.removable() || this.removeRefused())
+            return;
+        let cancelled = false;
+        this.remove.emit({
+            reason,
+            source,
+            get cancelled() {
+                return cancelled;
+            },
+            cancel() {
+                cancelled = true;
+            },
+        });
+    }
+    /**
+     * `Backspace` and `Delete` on a removable chip, which is the shortcut MUI,
+     * Primer, React Aria and Angular Material all ship. It is bound to the chip
+     * box rather than to either control, so it answers wherever focus is inside
+     * the chip, and a consumer's own handler runs first and can refuse it by
+     * calling `preventDefault`.
+     *
+     * A held key repeats, and a repeat would remove the chip focus has just
+     * landed on. The default is prevented because `Backspace` still navigates
+     * back in some browsers when nothing is being edited.
+     */
+    onKeydown(event) {
+        if (event.repeat || event.defaultPrevented)
+            return;
+        if (event.key !== 'Backspace' && event.key !== 'Delete')
+            return;
+        if (!this.removable() || this.removeRefused())
+            return;
+        event.preventDefault();
+        this.requestRemoval('keyboard', event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTag, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: SlTag, isStandalone: true, selector: "[slTag]", inputs: { tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, removeDisabled: { classPropertyName: "removeDisabled", publicName: "removeDisabled", isSignal: true, isRequired: false, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { remove: "remove" }, host: { attributes: { "data-ui": "tag", "data-part": "root" }, listeners: { "keydown": "onKeydown($event)" }, properties: { "attr.data-tone": "resolvedTone()", "attr.data-variant": "resolvedVariant()", "attr.data-size": "resolvedSize()", "attr.data-shape": "resolvedShape()", "attr.data-disabled": "disabled() ? '' : null", "attr.data-selected": "selected() ? '' : null", "attr.role": "role()" } }, exportAs: ["slTag"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: ["@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"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTag, decorators: [{
+            type: Component,
+            args: [{ selector: '[slTag]', standalone: true, exportAs: 'slTag', template: '<ng-content></ng-content>', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        'data-ui': 'tag',
+                        'data-part': 'root',
+                        '[attr.data-tone]': 'resolvedTone()',
+                        '[attr.data-variant]': 'resolvedVariant()',
+                        '[attr.data-size]': 'resolvedSize()',
+                        '[attr.data-shape]': 'resolvedShape()',
+                        '[attr.data-disabled]': "disabled() ? '' : null",
+                        '[attr.data-selected]': "selected() ? '' : null",
+                        '[attr.role]': 'role()',
+                        '(keydown)': 'onKeydown($event)',
+                    }, styles: ["@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"] }]
+        }], propDecorators: { tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], removable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }], removeDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeDisabled", required: false }] }], messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }], remove: [{ type: i0.Output, args: ["remove"] }] } });
+
+/**
+ * The template every content box shares. The words get a box of their own — it
+ * is what `text-box` needs to trim the line to the cap and the baseline, what
+ * `text-overflow` needs to clip a long value, and what `aria-labelledby` on
+ * the remove control points at so it announces the value rather than the word
+ * "Remove" on its own.
+ *
+ * Every space between these tags is load-bearing: Angular collapses a newline
+ * between two nodes into a space, and a space beside the label box would put a
+ * word gap inside the chip that the family's own `gap` is already drawing.
+ */
+const TAG_BODY_TEMPLATE = '<ng-content select="[slTagStart]"></ng-content>' +
+    '<span data-part="label" [id]="tag.labelId"><ng-content></ng-content></span>' +
+    '<ng-content select="[slTagEnd]"></ng-content>';
+/**
+ * The content box, and the primary target when there is one. It is written on
+ * the element the chip *is*: a `span` that does nothing, a `button` that runs
+ * a command, an `a` that navigates. The element is the member, which is what
+ * keeps `routerLink`, `type`, `download` and every native listener on the
+ * element that owns them.
+ *
+ * `disabled` belongs to the chip rather than to this element, because a chip
+ * is unavailable as a whole. What that means depends on the element, and the
+ * platform only offers one of the two forms per element.
+ */
+class SlTagBody {
+    tag = inject(SlTag);
+    element = inject((ElementRef)).nativeElement;
+    renderer = inject(Renderer2);
+    isButton = this.element.tagName === 'BUTTON';
+    isAnchor = this.element.tagName === 'A';
+    nativelyDisabled = computed(() => this.isButton && this.tag.disabled() ? '' : null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "nativelyDisabled" }] : /* istanbul ignore next */ []));
+    ariaDisabled = computed(() => this.isAnchor && this.tag.disabled() ? 'true' : null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaDisabled" }] : /* istanbul ignore next */ []));
+    /** An anchor without a destination is no longer a link, so it says it is one. */
+    anchorRole = computed(() => this.isAnchor && this.tag.disabled() ? 'link' : null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "anchorRole" }] : /* istanbul ignore next */ []));
+    /**
+     * A disabled anchor keeps its place in the tab sequence and loses its
+     * destination, which is the line `link` draws for the same case: an anchor
+     * without an `href` would drop out of the tab sequence and take its own
+     * explanation with it. The attribute is withheld rather than overwritten, so
+     * it is given back the moment the chip becomes available again.
+     */
+    withheldHref = null;
+    constructor() {
+        if (this.isAnchor) {
+            effect(() => {
+                if (this.tag.disabled()) {
+                    this.withheldHref ??= this.element.getAttribute('href');
+                    this.renderer.removeAttribute(this.element, 'href');
+                    this.renderer.setAttribute(this.element, 'tabindex', '0');
+                    return;
+                }
+                if (this.withheldHref !== null) {
+                    this.renderer.setAttribute(this.element, 'href', this.withheldHref);
+                    this.withheldHref = null;
+                }
+            });
+        }
+        /**
+         * The capture phase, because a control that is unavailable must refuse the
+         * activation before any listener the consumer attached to it can run. A
+         * natively disabled button needs none of this; an anchor and a `span` with
+         * a listener on it do.
+         */
+        if (!this.isButton) {
+            const destroyRef = inject(DestroyRef);
+            const refuse = (event) => {
+                if (!this.tag.disabled())
+                    return;
+                event.preventDefault();
+                event.stopPropagation();
+                event.stopImmediatePropagation();
+            };
+            for (const type of ['click', 'auxclick', 'keydown']) {
+                this.element.addEventListener(type, refuse, { capture: true });
+                destroyRef.onDestroy(() => this.element.removeEventListener(type, refuse, { capture: true }));
+            }
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTagBody, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: SlTagBody, isStandalone: true, selector: "[slTagBody]", host: { attributes: { "data-part": "body" }, properties: { "attr.disabled": "nativelyDisabled()", "attr.aria-disabled": "ariaDisabled()", "attr.role": "anchorRole()" } }, exportAs: ["slTagBody"], ngImport: i0, template: "<ng-content select=\"[slTagStart]\"></ng-content><span data-part=\"label\" [id]=\"tag.labelId\"><ng-content></ng-content></span><ng-content select=\"[slTagEnd]\"></ng-content>", isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTagBody, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[slTagBody]',
+                    standalone: true,
+                    exportAs: 'slTagBody',
+                    template: TAG_BODY_TEMPLATE,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        'data-part': 'body',
+                        '[attr.disabled]': 'nativelyDisabled()',
+                        '[attr.aria-disabled]': 'ariaDisabled()',
+                        '[attr.role]': 'anchorRole()',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * A glyph or an avatar before the words. The artwork is the consumer's, and
+ * the part gives it a box that is sized and centred; the directive is written
+ * on the element the page already has, so nothing is wrapped.
+ */
+class SlTagStart {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTagStart, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlTagStart, isStandalone: true, selector: "[slTagStart]", host: { attributes: { "data-part": "start" } }, exportAs: ["slTagStart"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTagStart, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slTagStart]',
+                    standalone: true,
+                    exportAs: 'slTagStart',
+                    host: { 'data-part': 'start' },
+                }]
+        }] });
+/** A glyph after the words. */
+class SlTagEnd {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTagEnd, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlTagEnd, isStandalone: true, selector: "[slTagEnd]", host: { attributes: { "data-part": "end" } }, exportAs: ["slTagEnd"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTagEnd, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slTagEnd]',
+                    standalone: true,
+                    exportAs: 'slTagEnd',
+                    host: { 'data-part': 'end' },
+                }]
+        }] });
+
+/**
+ * The control at the end of the chip, on the consumer's own button so its
+ * listeners and its attributes stay theirs. The glyph is the family's `x`,
+ * drawn as the `Glyph` element unless the consumer wrote content of their own:
+ * a character is never an icon.
+ *
+ * Its name is composed rather than repeated. The hidden word and the tag's own
+ * label are joined by `aria-labelledby`, so it announces "Remove Design"
+ * without the consumer writing the value a second time — the string four of
+ * the surveyed implementations make the consumer keep in step with the value
+ * by hand. Text referenced by `aria-labelledby` counts even when the element
+ * holding it is hidden, which is what lets the word cost no space.
+ */
+class SlTagRemove {
+    tag = inject(SlTag);
+    labelledBy = computed(() => `${this.tag.removeWordId} ${this.tag.labelId}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelledBy" }] : /* istanbul ignore next */ []));
+    onClick(event) {
+        /* The X is its own target. A handler the consumer put on the chip is about
+           the chip, and a removal is not a press of it. */
+        event.stopPropagation();
+        this.tag.requestRemoval('remove', event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTagRemove, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: SlTagRemove, isStandalone: true, selector: "button[slTagRemove]", host: { attributes: { "data-part": "remove", "type": "button" }, listeners: { "click": "onClick($event)" }, properties: { "attr.aria-labelledby": "labelledBy()", "attr.disabled": "tag.removeRefused() ? '' : null" } }, exportAs: ["slTagRemove"], ngImport: i0, template: `<ng-content
+      ><span slIcon><svg slGlyph name="x"></svg></span></ng-content
+    ><span hidden [id]="tag.removeWordId">{{ tag.t('remove') }}</span>`, isInline: true, 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: SlTagRemove, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'button[slTagRemove]',
+                    standalone: true,
+                    exportAs: 'slTagRemove',
+                    imports: [SlGlyph, SlIcon],
+                    template: `<ng-content
+      ><span slIcon><svg slGlyph name="x"></svg></span></ng-content
+    ><span hidden [id]="tag.removeWordId">{{ tag.t('remove') }}</span>`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        'data-part': 'remove',
+                        type: 'button',
+                        '[attr.aria-labelledby]': 'labelledBy()',
+                        '[attr.disabled]': "tag.removeRefused() ? '' : null",
+                        '(click)': 'onClick($event)',
+                    },
+                }]
+        }] });
+
+/**
+ * A native button fires the same `click` for a pointer, for Space and for
+ * Enter, which is why the family uses one — and why the reason a selection
+ * moved has to be recovered from the event. A click synthesised by the
+ * keyboard reports no detail; a real one reports the click count.
+ */
+function activationReason(event) {
+    return event instanceof MouseEvent && event.detail === 0 ? 'keyboard' : 'pointer';
+}
+/**
+ * The controlled and uncontrolled pair, decided by whether the consumer passed
+ * a value. `@slotted/core/state` owns that decision so the two bindings cannot
+ * disagree about who holds the value; the signal below is only where an
+ * uncontrolled chip keeps its own.
+ */
+class SelectionState {
+    source;
+    own = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "own" }] : /* istanbul ignore next */ []));
+    constructor(source) {
+        this.source = source;
+    }
+    value = () => this.source.selected() ?? this.own() ?? this.source.defaultSelected();
+    request(event) {
+        const next = !this.value();
+        const state = createControllable({
+            controlled: this.source.selected(),
+            initial: this.value(),
+            onRequest: (request) => this.source.emit(request),
+        });
+        if (state.request(next, activationReason(event), event))
+            this.own.set(next);
+    }
+}
+/**
+ * A chip that holds a selection: a filter that is on, a facet that is chosen.
+ * Carbon calls it a selectable tag, Ant a checkable tag, Fluent a selected
+ * tag — and none of them ships the uncontrolled half, so a filter bar cannot
+ * be written without a piece of application state for every chip in it.
+ *
+ * It announces `aria-pressed` rather than `aria-selected`, which is a
+ * deliberate departure with a cost: `aria-selected` is only valid inside a
+ * `listbox`, a `grid` or a `tree`, and an `option` may not contain the remove
+ * control this family puts beside the label. The family keeps `selected` as
+ * its own word and writes `data-selected` for styling.
+ *
+ * The label never changes with the state — the APG's rule for a toggle — so
+ * "Aberto" stays "Aberto" and the state is announced beside it.
+ */
+class SlTagToggle {
+    /** Present means controlled, for the life of the component. */
+    selected = input(undefined, { ...(ngDevMode ? { debugName: "selected" } : /* istanbul ignore next */ {}), transform: (value) => (value === undefined ? undefined : booleanAttribute(value)) });
+    defaultSelected = input(false, { ...(ngDevMode ? { debugName: "defaultSelected" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * One output for one transition, carrying the value, the value it replaces,
+     * the reason, the originating event and `cancel()`. There is no
+     * `[(selected)]` because a two-way binding has one slot and cannot carry any
+     * of those, and a second output for the same transition would be the same
+     * failure stated twice.
+     */
+    selectedChange = output();
+    tag = inject(SlTag);
+    state = new SelectionState({
+        selected: this.selected,
+        defaultSelected: this.defaultSelected,
+        emit: (request) => this.selectedChange.emit(request),
+    });
+    isSelected = computed(() => this.state.value(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isSelected" }] : /* istanbul ignore next */ []));
+    constructor() {
+        /* The chip box paints the selection; the control owns it. */
+        effect(() => this.tag.setSelected(this.isSelected()));
+    }
+    onClick(event) {
+        if (this.tag.disabled())
+            return;
+        /* A consumer that calls preventDefault has refused the activation, and a
+           refused activation moves nothing. */
+        if (event.defaultPrevented)
+            return;
+        this.state.request(event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTagToggle, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: SlTagToggle, isStandalone: true, selector: "button[slTagToggle]", inputs: { selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, defaultSelected: { classPropertyName: "defaultSelected", publicName: "defaultSelected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedChange: "selectedChange" }, host: { attributes: { "data-part": "body", "type": "button" }, listeners: { "click": "onClick($event)" }, properties: { "attr.aria-pressed": "isSelected()", "attr.disabled": "tag.disabled() ? '' : null" } }, exportAs: ["slTagToggle"], ngImport: i0, template: "<span aria-hidden=\"true\" data-part=\"indicator\"\n      ><span slIcon><svg slGlyph name=\"check\"></svg></span></span\n    ><ng-content select=\"[slTagStart]\"></ng-content><span data-part=\"label\" [id]=\"tag.labelId\"><ng-content></ng-content></span><ng-content select=\"[slTagEnd]\"></ng-content>", isInline: true, 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: SlTagToggle, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'button[slTagToggle]',
+                    standalone: true,
+                    exportAs: 'slTagToggle',
+                    imports: [SlGlyph, SlIcon],
+                    /* The selection mark's check, which the sheet uncovers when the chip is on. */
+                    template: `<span aria-hidden="true" data-part="indicator"
+      ><span slIcon><svg slGlyph name="check"></svg></span></span
+    >${TAG_BODY_TEMPLATE}`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        'data-part': 'body',
+                        type: 'button',
+                        '[attr.aria-pressed]': 'isSelected()',
+                        '[attr.disabled]': "tag.disabled() ? '' : null",
+                        '(click)': 'onClick($event)',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], defaultSelected: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultSelected", required: false }] }], selectedChange: [{ type: i0.Output, args: ["selectedChange"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SlTag, SlTagBody, SlTagEnd, SlTagGroup, SlTagRemove, SlTagStart, SlTagToggle, TAG_DEFAULTS, injectTagDefaults, provideTagDefaults };
+//# sourceMappingURL=slotted-angular-tag.mjs.map