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

package/fesm2022/slotted-angular-attachment.mjs

@@ -0,0 +1,595 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, input, HostAttributeToken, computed, ElementRef, DestroyRef, Directive, booleanAttribute, output, signal, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { injectLocale, injectMessages } from '@slotted/angular/i18n';
+import { createRemovalFocus } from '@slotted/core/focus';
+import { attachmentMessages } from '@slotted/core/i18n';
+import { fileKind, splitName, formatBytes } from '@slotted/core/upload';
+import { SlGlyph, SlIcon } from '@slotted/angular/icon';
+import { SlProgressBar } from '@slotted/angular/progress-indicator';
+
+const FALLBACK = {
+    layout: 'list',
+    orientation: 'horizontal',
+    size: 'md',
+};
+const ATTACHMENT_DEFAULTS = new InjectionToken('slotted attachment defaults', { providedIn: 'root', factory: () => FALLBACK });
+/**
+ * An application decides once how large its attachments are and how a set of
+ * them is arranged. A group or an attachment that states either still wins.
+ * Their words and the locale that writes their sizes come from the language
+ * in force (`provideSlotted`).
+ */
+function provideAttachmentDefaults(defaults) {
+    return {
+        provide: ATTACHMENT_DEFAULTS,
+        useFactory: () => ({
+            layout: defaults.layout ?? FALLBACK.layout,
+            orientation: defaults.orientation ?? FALLBACK.orientation,
+            size: defaults.size ?? FALLBACK.size,
+        }),
+    };
+}
+function injectAttachmentDefaults() {
+    return inject(ATTACHMENT_DEFAULTS);
+}
+/**
+ * The mark knocked out of each kind's tile — `upload`'s map, restated because
+ * that one is private to `upload`. The contract test reads both contracts'
+ * `kinds` and refuses a drift.
+ */
+const ATTACHMENT_KIND_GLYPH = {
+    archive: 'file-archive',
+    audio: 'file-audio',
+    document: 'file-type',
+    image: 'file-image',
+    other: 'file',
+    pdf: 'file-text',
+    presentation: 'presentation',
+    spreadsheet: 'file-spreadsheet',
+    video: 'file-video',
+};
+/**
+ * The controls `removal-focus` counts. An attachment in a set holds the same
+ * controls as its neighbours, so the position focus had among them is the
+ * position of the same control on the attachment that took its place. A
+ * remove control of an attachment that is not removable is hidden, and is not
+ * counted.
+ */
+const ATTACHMENT_CONTROL_SELECTOR = '[data-part="trigger"], [data-part="action"], [data-part="remove"]:not([hidden])';
+
+let nextId = 0;
+/**
+ * A set of attachments on the `ul` the page wrote: a column, a wrapping grid
+ * or one line that scrolls. It hands its size and orientation to every
+ * attachment that does not state its own.
+ *
+ * It keeps the keyboard where it was when an attachment leaves: focus goes to
+ * the control that took the removed one's place, then to the last one, then
+ * to the list itself — which is why the list takes `tabindex="-1"`.
+ * `removal-focus` observes the DOM, so it is right however the consumer
+ * removed the file.
+ */
+class SlAttachmentGroup {
+    /** A column, a wrapping grid, or one line that scrolls. Falls back to the token. */
+    layout = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
+    /** Handed to every attachment that does not state its own. */
+    size = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Handed to every attachment that does not state its own. */
+    orientation = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    defaults = injectAttachmentDefaults();
+    /** A `tabindex` the page wrote is kept; otherwise the list takes focus only by script. */
+    tabindex = inject(new HostAttributeToken('tabindex'), { optional: true }) ?? '-1';
+    resolvedLayout = computed(() => this.layout() ?? this.defaults.layout, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedLayout" }] : /* istanbul ignore next */ []));
+    resolvedSize = computed(() => this.size() ?? this.defaults.size, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedSize" }] : /* istanbul ignore next */ []));
+    resolvedOrientation = computed(() => this.orientation() ?? this.defaults.orientation, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedOrientation" }] : /* istanbul ignore next */ []));
+    constructor() {
+        const host = inject(ElementRef).nativeElement;
+        const removal = createRemovalFocus(host, { itemSelector: ATTACHMENT_CONTROL_SELECTOR });
+        inject(DestroyRef).onDestroy(() => removal.destroy());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAttachmentGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.7", type: SlAttachmentGroup, isStandalone: true, selector: "[slAttachmentGroup]", inputs: { layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-ui": "attachment", "data-part": "group" }, properties: { "attr.data-layout": "resolvedLayout()", "attr.data-size": "resolvedSize()", "attr.data-orientation": "resolvedOrientation()", "attr.tabindex": "tabindex" } }, exportAs: ["slAttachmentGroup"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAttachmentGroup, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slAttachmentGroup]',
+                    standalone: true,
+                    exportAs: 'slAttachmentGroup',
+                    host: {
+                        'data-ui': 'attachment',
+                        'data-part': 'group',
+                        '[attr.data-layout]': 'resolvedLayout()',
+                        '[attr.data-size]': 'resolvedSize()',
+                        '[attr.data-orientation]': 'resolvedOrientation()',
+                        '[attr.tabindex]': 'tabindex',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }] } });
+/**
+ * One file that already belongs to something — a message, a record, a tray —
+ * on the `li` (inside `slAttachmentGroup`) or `div` (alone) the page wrote.
+ * The parts inside read the file from here: the tile its kind, the trigger its
+ * name, the detail its size.
+ *
+ * **Removal is a request.** `removable` draws `slAttachmentRemove` and makes
+ * `Backspace` and `Delete` answer anywhere inside the attachment; `(remove)`
+ * carries the reason and the file, and the list stays the page's. A held key
+ * does not repeat the request.
+ *
+ * **The refusal runs first.** A click inside the trigger, or on a family
+ * action written on an `a`, is refused here in the capture phase while the
+ * attachment is loading or disabled: a directive's host listener and a
+ * `(click)` the page wrote on the same element run in registration order, and
+ * the page's was registered first — the ordering `list-item` found.
+ */
+class SlAttachment {
+    /** The file: its name, and its media type and size when they are known. */
+    file = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "file" }] : /* istanbul ignore next */ []));
+    /** The room the attachment gets. Falls back to the group, then the token, then `md`. */
+    size = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** A row, or a card stood on end. Falls back to the group, then the token. */
+    orientation = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    /** The file failed; painted from `data-invalid`, never `aria-invalid` on a list item. */
+    invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Still on its way: `aria-busy`, the trigger refused, remove still operable. */
+    loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Cannot be reached: the trigger, every action and remove are refused. */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Draws `slAttachmentRemove` and lets `Backspace` and `Delete` ask for removal. */
+    removable = input(false, { ...(ngDevMode ? { debugName: "removable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Words laid over the catalog of the language in force, key by key: the
+     * remove control's name (`remove`, with the file's `{name}`) and the tile's
+     * word for a file without an extension.
+     */
+    messages = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []));
+    /** Asks to be taken out of the list. Not emitted while disabled, nor for a repeated key. */
+    remove = output();
+    defaults = injectAttachmentDefaults();
+    group = inject(SlAttachmentGroup, { optional: true });
+    id = `sl-attachment-${nextId++}`;
+    ids = { detail: `${this.id}-detail`, message: `${this.id}-message` };
+    /** The language in force, which writes the size the detail line shows. */
+    locale = injectLocale();
+    /** The family's words in the language in force, with this attachment's `messages` laid over them. */
+    t = injectMessages(attachmentMessages, this.messages);
+    resolvedSize = computed(() => this.size() ?? this.group?.size() ?? this.defaults.size, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedSize" }] : /* istanbul ignore next */ []));
+    resolvedOrientation = computed(() => this.orientation() ?? this.group?.orientation() ?? this.defaults.orientation, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedOrientation" }] : /* istanbul ignore next */ []));
+    kind = computed(() => {
+        const file = this.file();
+        return fileKind({ name: file.name, type: file.type ?? '' });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kind" }] : /* istanbul ignore next */ []));
+    split = computed(() => splitName(this.file().name), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "split" }] : /* istanbul ignore next */ []));
+    blocked = computed(() => this.disabled() || this.loading(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "blocked" }] : /* istanbul ignore next */ []));
+    /**
+     * The ids of the describing parts on the page, so the trigger names only
+     * what exists — and the id each part actually carries, which is the page's
+     * own when it wrote one.
+     */
+    described = signal({
+        detail: null,
+        message: null,
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "described" }] : /* istanbul ignore next */ []));
+    constructor() {
+        const host = inject(ElementRef).nativeElement;
+        const refuse = (event) => {
+            const target = event.target;
+            const trigger = target?.closest('[data-part="trigger"]') != null;
+            const link = target?.closest('a[data-part="action"]') != null;
+            if (!(trigger && this.blocked()) && !(link && this.disabled()))
+                return;
+            event.preventDefault();
+            event.stopImmediatePropagation();
+        };
+        host.addEventListener('click', refuse, { capture: true });
+        inject(DestroyRef).onDestroy(() => host.removeEventListener('click', refuse, { capture: true }));
+    }
+    describe(part, id) {
+        this.described.update((current) => current[part] === id ? current : { ...current, [part]: id });
+    }
+    request(reason, source) {
+        if (!this.removable() || this.disabled())
+            return;
+        this.remove.emit({ reason, file: this.file(), source });
+    }
+    handleKeydown(event) {
+        if (event.defaultPrevented || event.repeat)
+            return;
+        if (event.key !== 'Backspace' && event.key !== 'Delete')
+            return;
+        if (!this.removable() || this.disabled())
+            return;
+        /* A field the page put inside an attachment keeps its own editing keys. */
+        const target = event.target;
+        if (target.isContentEditable || target.closest('input, textarea, select') !== null)
+            return;
+        event.preventDefault();
+        this.request('keyboard', event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAttachment, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: SlAttachment, isStandalone: true, selector: "[slAttachment]", inputs: { file: { classPropertyName: "file", publicName: "file", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", 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 }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { remove: "remove" }, host: { attributes: { "data-ui": "attachment", "data-part": "root" }, listeners: { "keydown": "handleKeydown($event)" }, properties: { "attr.data-kind": "kind()", "attr.data-size": "resolvedSize()", "attr.data-orientation": "resolvedOrientation()", "attr.data-invalid": "invalid() ? '' : null", "attr.data-loading": "loading() ? '' : null", "attr.data-disabled": "disabled() ? '' : null", "attr.aria-busy": "loading() ? 'true' : null" } }, exportAs: ["slAttachment"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: ["@layer slotted.components{[data-ui=attachment][data-part=root],[data-ui=attachment][data-part=group]{--_font-size: var(--slotted-control-font-size-md, 13px);--_glyph-size: var(--slotted-control-icon-size-md, 16px);--_gap: var(--slotted-control-gap-md, 8px);--_inset: var(--slotted-attachment-padding-md, var(--slotted-space-4, .5rem));--_line-height: var(--slotted-line-height-md, 1.5);--_title-leading: round(up, calc(var(--_font-size) * var(--_line-height)), 1px);--_detail-size: var(--slotted-font-size-xs, .75rem);--_detail-leading: round(up, calc(var(--_detail-size) * var(--_line-height)), 1px);--_line-gap: var(--slotted-attachment-line-gap, var(--slotted-space-1, .125rem));--_preview-size: var( --slotted-attachment-preview-size, calc(var(--_title-leading) + var(--_line-gap) + var(--_detail-leading)) );--_preview-radius: var(--slotted-attachment-preview-radius, var(--slotted-radius-sm, 4px));--_card-size: var(--slotted-attachment-card-size, calc(3 * var(--_preview-size)));--_border-width: var(--slotted-attachment-border-width, var(--slotted-border-width-thin, 1px));--_action-glyph-size: max(var(--slotted-attachment-icon-size-min, 14px), var(--_glyph-size));--_action-size: var( --slotted-attachment-action-size, max( var(--slotted-target-min, 24px), calc(var(--_action-glyph-size) + 2 * var(--slotted-space-2, .25rem)) ) )}[data-ui=attachment][data-size=sm]:is([data-part=root],[data-part=group]){--_font-size: var(--slotted-control-font-size-sm, 12px);--_glyph-size: var(--slotted-control-icon-size-sm, 14px);--_gap: var(--slotted-control-gap-sm, 6px);--_inset: var(--slotted-attachment-padding-sm, var(--slotted-space-3, .375rem))}[data-ui=attachment][data-size=lg]:is([data-part=root],[data-part=group]){--_font-size: var(--slotted-control-font-size-lg, 14px);--_glyph-size: var(--slotted-control-icon-size-lg, 18px);--_gap: var(--slotted-control-gap-lg, 8px);--_inset: var(--slotted-attachment-padding-lg, var(--slotted-space-5, .75rem))}[data-ui=attachment][data-part=root]{--_surface: var(--slotted-attachment-background, var(--slotted-surface));--_edge: var(--slotted-attachment-border-color, var(--slotted-border-subtle));--_ink: var(--slotted-text);--_message-color: var(--slotted-text-muted);--_fill-hover: color-mix( in oklab, var(--_ink) var(--slotted-attachment-state-layer-hover, 4%), var(--_surface) );--_fill-active: color-mix( in oklab, var(--_ink) var(--slotted-attachment-state-layer-active, 8%), var(--_surface) );--_fill: var(--_surface);--_radius: var(--slotted-attachment-radius, var(--slotted-radius-lg, 8px));align-items:center;background-color:var(--_fill);border:var(--_border-width) solid var(--_edge);border-radius:var(--_radius);box-sizing:border-box;color:var(--_ink);column-gap:var(--_gap);display:grid;font-family:var(--slotted-attachment-font-family, var(--slotted-control-font-family));font-size:var(--_font-size);grid-template-areas:\"preview body actions\" \". message message\";grid-template-columns:auto minmax(0,1fr) auto;line-height:var(--_title-leading);list-style:none;margin:0;min-inline-size:0;overflow:clip;padding:var(--_inset);position:relative;text-align:start;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),opacity var(--slotted-duration-medium) var(--slotted-easing-enter),translate var(--slotted-duration-medium) var(--slotted-easing-enter)}[data-ui=attachment][data-part=root]:not(:has(>[data-part=actions])){grid-template-areas:\"preview body\" \". message\";grid-template-columns:auto minmax(0,1fr)}[data-ui=attachment][data-part=root]:not(:has(>[data-part=preview])){grid-template-areas:\"body actions\" \"message message\";grid-template-columns:minmax(0,1fr) auto}[data-ui=attachment][data-part=root]:not(:has(>[data-part=preview])):not(:has(>[data-part=actions])){grid-template-areas:\"body\" \"message\";grid-template-columns:minmax(0,1fr)}@starting-style{[data-ui=attachment][data-part=root]{opacity:0;translate:0 calc(-1 * var(--slotted-space-2, .25rem))}}[data-ui=attachment] [data-part=preview]{--_kind-tile: var(--slotted-upload-kind-other);align-items:center;background-color:var(--_kind-tile);block-size:var(--_preview-size);border-radius:var(--_preview-radius);box-sizing:border-box;color:var(--slotted-upload-kind-foreground);display:inline-flex;flex-direction:column;grid-area:preview;inline-size:var(--_preview-size);justify-content:center;overflow:hidden}[data-ui=attachment] [data-part=preview]>img{block-size:100%;display:block;inline-size:100%;object-fit:cover}[data-ui=attachment] [data-part=preview]>[data-ui=icon]{--slotted-icon-size: round(calc(var(--_preview-size) / 2), 1px)}[data-ui=attachment] [data-part=preview][data-kind=pdf]{--_kind-tile: var(--slotted-upload-kind-pdf)}[data-ui=attachment] [data-part=preview][data-kind=document]{--_kind-tile: var(--slotted-upload-kind-document)}[data-ui=attachment] [data-part=preview][data-kind=spreadsheet]{--_kind-tile: var(--slotted-upload-kind-spreadsheet)}[data-ui=attachment] [data-part=preview][data-kind=presentation]{--_kind-tile: var(--slotted-upload-kind-presentation)}[data-ui=attachment] [data-part=preview][data-kind=image]{--_kind-tile: var(--slotted-upload-kind-image)}[data-ui=attachment] [data-part=preview][data-kind=video]{--_kind-tile: var(--slotted-upload-kind-video)}[data-ui=attachment] [data-part=preview][data-kind=audio]{--_kind-tile: var(--slotted-upload-kind-audio)}[data-ui=attachment] [data-part=preview][data-kind=archive]{--_kind-tile: var(--slotted-upload-kind-archive)}[data-ui=attachment] [data-part=body]{display:flex;flex-direction:column;gap:var(--_line-gap);grid-area:body;min-inline-size:0}[data-ui=attachment] [data-part=trigger]{appearance:none;background:none;border:0;color:inherit;cursor:pointer;display:flex;font:inherit;line-height:inherit;margin:0;min-inline-size:0;padding:0;text-align:start;text-decoration:none;transition:translate var(--slotted-duration-instant) var(--slotted-control-transition-easing)}[data-ui=attachment] [data-part=trigger]:after{content:\"\";inset:0;position:absolute}[data-ui=attachment] [data-part=trigger]:not(:disabled):not([aria-disabled=true]):hover{text-decoration-line:underline;text-underline-offset:.2em}[data-ui=attachment] [data-part=trigger]:not(:disabled):not([aria-disabled=true]):active{text-decoration-line:underline;text-underline-offset:.2em;translate:0 var(--slotted-border-width-thin, 1px)}[data-ui=attachment] [data-part=trigger]:is(:disabled,[aria-disabled=true]){cursor:default}[data-ui=attachment] [data-part=trigger]:focus-visible{outline:none}[data-ui=attachment][data-part=root]:has(>[data-part=body]>[data-part=trigger]: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=attachment][data-part=root]:not([data-disabled]):not([data-loading]):has(>[data-part=body]>[data-part=trigger]:hover){--_fill: var(--_fill-hover)}[data-ui=attachment][data-part=root]:not([data-disabled]):not([data-loading]):has(>[data-part=body]>[data-part=trigger]:active){--_fill: var(--_fill-active)}[data-ui=attachment] [data-part=filename]{display:flex;font-weight:var(--slotted-attachment-name-font-weight, var(--slotted-font-weight-medium, 500));line-height:var(--_title-leading);min-inline-size:0;unicode-bidi:isolate}[data-ui=attachment] [data-part=body]>[data-part=filename],[data-ui=attachment] [data-part=body]>[data-part=trigger]{align-self:start;max-inline-size:100%}[data-ui=attachment] [data-part=name]{flex:0 1 auto;min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}[data-ui=attachment] [data-part=extension]{flex:none;white-space:nowrap}[data-ui=attachment] [data-part=detail]{color:var(--slotted-text-muted);font-size:var(--_detail-size);font-variant-numeric:tabular-nums;line-height:var(--_detail-leading);margin:0;min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}[data-ui=attachment] [data-part=message]{color:var(--_message-color);font-size:var(--_detail-size);grid-area:message;line-height:var(--_detail-leading);margin:0;margin-block-start:var(--_line-gap);min-inline-size:0;overflow-wrap:anywhere}[data-ui=attachment] [data-part=progress]{display:block;inset-block-end:round(down,calc((var(--_inset) - var(--slotted-space-1, .125rem)) / 2),1px);inset-inline-end:var(--_inset);inset-inline-start:calc(var(--_inset) + var(--_preview-size) + var(--_gap));position:absolute;transition:opacity var(--slotted-duration-medium) var(--slotted-easing-enter)}[data-ui=attachment][data-part=root]:not(:has(>[data-part=preview]))>[data-part=progress],[data-ui=attachment][data-orientation=vertical]>[data-part=progress]{inset-inline-start:var(--_inset)}@starting-style{[data-ui=attachment] [data-part=progress]{opacity:0}}[data-ui=attachment] [data-part=actions]{align-items:center;display:inline-flex;gap:var(--slotted-space-1, .125rem);grid-area:actions;justify-content:flex-end;position:relative;z-index:1}[data-ui=attachment] [data-part=action],[data-ui=attachment] [data-part=remove]{--_state-hover: color-mix( in oklab, currentcolor var(--slotted-attachment-action-state-layer-hover, 8%), transparent );--_state-active: color-mix( in oklab, currentcolor var(--slotted-attachment-action-state-layer-active, 14%), transparent );align-items:center;appearance:none;background-color:transparent;block-size:var(--_action-size);border:0;border-radius:var(--slotted-attachment-action-radius, var(--slotted-control-radius, 4px));box-sizing:border-box;color:inherit;cursor:pointer;display:inline-flex;flex:none;font:inherit;inline-size:var(--_action-size);justify-content:center;margin:0;padding:0;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=attachment] [data-part=action]>[data-ui=icon],[data-ui=attachment] [data-part=remove]>[data-ui=icon]{--slotted-icon-size: var(--_action-glyph-size)}[data-ui=attachment] [data-part=action]:not(:disabled):not([aria-disabled=true]):hover,[data-ui=attachment] [data-part=remove]:not(:disabled):not([aria-disabled=true]):hover{background-color:var(--_state-hover)}[data-ui=attachment] [data-part=action]:not(:disabled):not([aria-disabled=true]):active,[data-ui=attachment] [data-part=remove]:not(:disabled):not([aria-disabled=true]):active{background-color:var(--_state-active)}[data-ui=attachment] [data-part=action]:is(:disabled,[aria-disabled=true]),[data-ui=attachment] [data-part=remove]:is(:disabled,[aria-disabled=true]){color:var(--slotted-disabled-foreground);cursor:default}[data-ui=attachment] [data-part=action]:focus-visible,[data-ui=attachment] [data-part=remove]: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))}@media(pointer:coarse){[data-ui=attachment] :is([data-part=action],[data-part=remove]){position:relative}[data-ui=attachment] :is([data-part=action],[data-part=remove]):after{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-comfortable, 44px)) / 2));position:absolute}}[data-ui=attachment][data-part=root][data-invalid]{--_surface: var(--slotted-tone-danger-surface);--_edge: var(--slotted-tone-danger-border);--_message-color: var(--slotted-tone-danger-text);--_invalid-edge-width: var(--slotted-control-invalid-edge-width, var(--_border-width));box-shadow:inset 0 0 0 var(--_invalid-edge-width) var(--_edge)}[data-ui=attachment][data-part=root][data-disabled]{--_ink: var(--slotted-disabled-foreground)}[data-ui=attachment][data-part=root][data-disabled] [data-part=detail]{color:var(--slotted-disabled-foreground)}[data-ui=attachment][data-part=root][data-disabled] [data-part=preview]{--_kind-tile: var(--slotted-disabled-background);color:var(--slotted-disabled-foreground)}[data-ui=attachment][data-part=root][data-disabled] [data-part=preview]>img{filter:grayscale(1)}[data-ui=attachment][data-part=root][data-orientation=vertical]{align-items:stretch;grid-template-areas:\"preview\" \"body\" \"message\";grid-template-columns:minmax(0,1fr);inline-size:var(--_card-size)}[data-ui=attachment][data-orientation=vertical]>[data-part=preview]{--_preview-radius: var(--slotted-attachment-card-preview-radius, var(--slotted-radius-md, 6px));block-size:calc(var(--_card-size) - 2 * var(--_inset) - 2 * var(--_border-width));inline-size:100%}[data-ui=attachment][data-orientation=vertical]>[data-part=preview]>[data-ui=icon]{--slotted-icon-size: calc(2 * var(--_glyph-size))}[data-ui=attachment][data-orientation=vertical]>[data-part=preview]:not(:has(img)):after{content:attr(data-extension);font-size:var(--_detail-size);font-weight:var(--slotted-font-weight-semibold, 600);letter-spacing:.06em;line-height:var(--_detail-leading);margin-block-start:var(--slotted-space-2, .25rem)}[data-ui=attachment][data-orientation=vertical]>[data-part=body]{margin-block-start:var(--_gap)}[data-ui=attachment][data-orientation=vertical]>[data-part=actions]{background-color:color-mix(in oklab,var(--slotted-surface) var(--slotted-attachment-card-actions-opacity, 96%),transparent);border-radius:var(--slotted-attachment-action-radius, var(--slotted-control-radius, 4px));box-shadow:var(--slotted-shadow-xs);color:var(--slotted-text);grid-area:auto;inset-block-start:calc(var(--_inset) + var(--slotted-space-2, .25rem));inset-inline-end:calc(var(--_inset) + var(--slotted-space-2, .25rem));padding:var(--slotted-space-1, .125rem);position:absolute}@media(hover:hover)and (pointer:fine){[data-ui=attachment][data-orientation=vertical]:not([data-disabled])>[data-part=actions]{opacity:0;transition:opacity var(--slotted-duration-short) var(--slotted-easing-exit)}[data-ui=attachment][data-orientation=vertical]:not([data-disabled]):is(:hover,:focus-within)>[data-part=actions]{opacity:1;transition:opacity var(--slotted-duration-short) var(--slotted-easing-enter)}}[data-ui=attachment][data-part=group]{box-sizing:border-box;display:flex;flex-direction:column;gap:var(--slotted-attachment-group-gap, var(--slotted-space-4, .5rem));list-style:none;margin:0;min-inline-size:0;padding:0}[data-ui=attachment][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=attachment][data-part=group]:empty{display:none}[data-ui=attachment][data-part=group][data-layout=grid]{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--slotted-attachment-grid-min, 16rem)),1fr))}[data-ui=attachment][data-part=group][data-layout=grid][data-orientation=vertical]{grid-template-columns:repeat(auto-fill,var(--_card-size))}[data-ui=attachment][data-part=group][data-layout=strip]{--_ring-reach: calc( var(--slotted-focus-ring-width, 2px) + var(--slotted-focus-ring-offset, 2px) );flex-direction:row;margin:calc(-1 * var(--_ring-reach));overflow-x:auto;overscroll-behavior-inline:contain;padding:var(--_ring-reach);scroll-padding-inline:var(--_ring-reach);scroll-snap-type:inline proximity;scrollbar-color:var(--slotted-border-strong) transparent;scrollbar-width:thin}[data-ui=attachment][data-part=group][data-layout=strip]>[data-part=root]{flex:none;scroll-snap-align:start}[data-ui=attachment][data-part=group][data-layout=strip]>[data-part=root][data-orientation=horizontal]{inline-size:var(--slotted-attachment-strip-item-size, 15rem)}@media(forced-colors:active){[data-ui=attachment][data-part=root][data-invalid]{--_edge: CanvasText}[data-ui=attachment][data-part=root][data-invalid]{outline:var(--_invalid-edge-width) solid CanvasText;outline-offset:calc(-1 * (var(--_border-width) + var(--_invalid-edge-width)))}[data-ui=attachment][data-part=root][data-invalid]:has(>[data-part=body]>[data-part=trigger]: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=attachment][data-part=root]:not([data-disabled]):not([data-loading]):has(>[data-part=body]>[data-part=trigger]:is(:hover,:active)){border-color:Highlight}[data-ui=attachment] [data-part=preview]{border:var(--_border-width) solid ButtonBorder}[data-ui=attachment] :is([data-part=action],[data-part=remove]):not(:disabled):not([aria-disabled=true]):is(:hover,:active){background-color:Highlight;color:HighlightText}}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAttachment, decorators: [{
+            type: Component,
+            args: [{ selector: '[slAttachment]', standalone: true, exportAs: 'slAttachment', template: '<ng-content></ng-content>', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        'data-ui': 'attachment',
+                        'data-part': 'root',
+                        '[attr.data-kind]': 'kind()',
+                        '[attr.data-size]': 'resolvedSize()',
+                        '[attr.data-orientation]': 'resolvedOrientation()',
+                        '[attr.data-invalid]': "invalid() ? '' : null",
+                        '[attr.data-loading]': "loading() ? '' : null",
+                        '[attr.data-disabled]': "disabled() ? '' : null",
+                        '[attr.aria-busy]': "loading() ? 'true' : null",
+                        '(keydown)': 'handleKeydown($event)',
+                    }, styles: ["@layer slotted.components{[data-ui=attachment][data-part=root],[data-ui=attachment][data-part=group]{--_font-size: var(--slotted-control-font-size-md, 13px);--_glyph-size: var(--slotted-control-icon-size-md, 16px);--_gap: var(--slotted-control-gap-md, 8px);--_inset: var(--slotted-attachment-padding-md, var(--slotted-space-4, .5rem));--_line-height: var(--slotted-line-height-md, 1.5);--_title-leading: round(up, calc(var(--_font-size) * var(--_line-height)), 1px);--_detail-size: var(--slotted-font-size-xs, .75rem);--_detail-leading: round(up, calc(var(--_detail-size) * var(--_line-height)), 1px);--_line-gap: var(--slotted-attachment-line-gap, var(--slotted-space-1, .125rem));--_preview-size: var( --slotted-attachment-preview-size, calc(var(--_title-leading) + var(--_line-gap) + var(--_detail-leading)) );--_preview-radius: var(--slotted-attachment-preview-radius, var(--slotted-radius-sm, 4px));--_card-size: var(--slotted-attachment-card-size, calc(3 * var(--_preview-size)));--_border-width: var(--slotted-attachment-border-width, var(--slotted-border-width-thin, 1px));--_action-glyph-size: max(var(--slotted-attachment-icon-size-min, 14px), var(--_glyph-size));--_action-size: var( --slotted-attachment-action-size, max( var(--slotted-target-min, 24px), calc(var(--_action-glyph-size) + 2 * var(--slotted-space-2, .25rem)) ) )}[data-ui=attachment][data-size=sm]:is([data-part=root],[data-part=group]){--_font-size: var(--slotted-control-font-size-sm, 12px);--_glyph-size: var(--slotted-control-icon-size-sm, 14px);--_gap: var(--slotted-control-gap-sm, 6px);--_inset: var(--slotted-attachment-padding-sm, var(--slotted-space-3, .375rem))}[data-ui=attachment][data-size=lg]:is([data-part=root],[data-part=group]){--_font-size: var(--slotted-control-font-size-lg, 14px);--_glyph-size: var(--slotted-control-icon-size-lg, 18px);--_gap: var(--slotted-control-gap-lg, 8px);--_inset: var(--slotted-attachment-padding-lg, var(--slotted-space-5, .75rem))}[data-ui=attachment][data-part=root]{--_surface: var(--slotted-attachment-background, var(--slotted-surface));--_edge: var(--slotted-attachment-border-color, var(--slotted-border-subtle));--_ink: var(--slotted-text);--_message-color: var(--slotted-text-muted);--_fill-hover: color-mix( in oklab, var(--_ink) var(--slotted-attachment-state-layer-hover, 4%), var(--_surface) );--_fill-active: color-mix( in oklab, var(--_ink) var(--slotted-attachment-state-layer-active, 8%), var(--_surface) );--_fill: var(--_surface);--_radius: var(--slotted-attachment-radius, var(--slotted-radius-lg, 8px));align-items:center;background-color:var(--_fill);border:var(--_border-width) solid var(--_edge);border-radius:var(--_radius);box-sizing:border-box;color:var(--_ink);column-gap:var(--_gap);display:grid;font-family:var(--slotted-attachment-font-family, var(--slotted-control-font-family));font-size:var(--_font-size);grid-template-areas:\"preview body actions\" \". message message\";grid-template-columns:auto minmax(0,1fr) auto;line-height:var(--_title-leading);list-style:none;margin:0;min-inline-size:0;overflow:clip;padding:var(--_inset);position:relative;text-align:start;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),opacity var(--slotted-duration-medium) var(--slotted-easing-enter),translate var(--slotted-duration-medium) var(--slotted-easing-enter)}[data-ui=attachment][data-part=root]:not(:has(>[data-part=actions])){grid-template-areas:\"preview body\" \". message\";grid-template-columns:auto minmax(0,1fr)}[data-ui=attachment][data-part=root]:not(:has(>[data-part=preview])){grid-template-areas:\"body actions\" \"message message\";grid-template-columns:minmax(0,1fr) auto}[data-ui=attachment][data-part=root]:not(:has(>[data-part=preview])):not(:has(>[data-part=actions])){grid-template-areas:\"body\" \"message\";grid-template-columns:minmax(0,1fr)}@starting-style{[data-ui=attachment][data-part=root]{opacity:0;translate:0 calc(-1 * var(--slotted-space-2, .25rem))}}[data-ui=attachment] [data-part=preview]{--_kind-tile: var(--slotted-upload-kind-other);align-items:center;background-color:var(--_kind-tile);block-size:var(--_preview-size);border-radius:var(--_preview-radius);box-sizing:border-box;color:var(--slotted-upload-kind-foreground);display:inline-flex;flex-direction:column;grid-area:preview;inline-size:var(--_preview-size);justify-content:center;overflow:hidden}[data-ui=attachment] [data-part=preview]>img{block-size:100%;display:block;inline-size:100%;object-fit:cover}[data-ui=attachment] [data-part=preview]>[data-ui=icon]{--slotted-icon-size: round(calc(var(--_preview-size) / 2), 1px)}[data-ui=attachment] [data-part=preview][data-kind=pdf]{--_kind-tile: var(--slotted-upload-kind-pdf)}[data-ui=attachment] [data-part=preview][data-kind=document]{--_kind-tile: var(--slotted-upload-kind-document)}[data-ui=attachment] [data-part=preview][data-kind=spreadsheet]{--_kind-tile: var(--slotted-upload-kind-spreadsheet)}[data-ui=attachment] [data-part=preview][data-kind=presentation]{--_kind-tile: var(--slotted-upload-kind-presentation)}[data-ui=attachment] [data-part=preview][data-kind=image]{--_kind-tile: var(--slotted-upload-kind-image)}[data-ui=attachment] [data-part=preview][data-kind=video]{--_kind-tile: var(--slotted-upload-kind-video)}[data-ui=attachment] [data-part=preview][data-kind=audio]{--_kind-tile: var(--slotted-upload-kind-audio)}[data-ui=attachment] [data-part=preview][data-kind=archive]{--_kind-tile: var(--slotted-upload-kind-archive)}[data-ui=attachment] [data-part=body]{display:flex;flex-direction:column;gap:var(--_line-gap);grid-area:body;min-inline-size:0}[data-ui=attachment] [data-part=trigger]{appearance:none;background:none;border:0;color:inherit;cursor:pointer;display:flex;font:inherit;line-height:inherit;margin:0;min-inline-size:0;padding:0;text-align:start;text-decoration:none;transition:translate var(--slotted-duration-instant) var(--slotted-control-transition-easing)}[data-ui=attachment] [data-part=trigger]:after{content:\"\";inset:0;position:absolute}[data-ui=attachment] [data-part=trigger]:not(:disabled):not([aria-disabled=true]):hover{text-decoration-line:underline;text-underline-offset:.2em}[data-ui=attachment] [data-part=trigger]:not(:disabled):not([aria-disabled=true]):active{text-decoration-line:underline;text-underline-offset:.2em;translate:0 var(--slotted-border-width-thin, 1px)}[data-ui=attachment] [data-part=trigger]:is(:disabled,[aria-disabled=true]){cursor:default}[data-ui=attachment] [data-part=trigger]:focus-visible{outline:none}[data-ui=attachment][data-part=root]:has(>[data-part=body]>[data-part=trigger]: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=attachment][data-part=root]:not([data-disabled]):not([data-loading]):has(>[data-part=body]>[data-part=trigger]:hover){--_fill: var(--_fill-hover)}[data-ui=attachment][data-part=root]:not([data-disabled]):not([data-loading]):has(>[data-part=body]>[data-part=trigger]:active){--_fill: var(--_fill-active)}[data-ui=attachment] [data-part=filename]{display:flex;font-weight:var(--slotted-attachment-name-font-weight, var(--slotted-font-weight-medium, 500));line-height:var(--_title-leading);min-inline-size:0;unicode-bidi:isolate}[data-ui=attachment] [data-part=body]>[data-part=filename],[data-ui=attachment] [data-part=body]>[data-part=trigger]{align-self:start;max-inline-size:100%}[data-ui=attachment] [data-part=name]{flex:0 1 auto;min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}[data-ui=attachment] [data-part=extension]{flex:none;white-space:nowrap}[data-ui=attachment] [data-part=detail]{color:var(--slotted-text-muted);font-size:var(--_detail-size);font-variant-numeric:tabular-nums;line-height:var(--_detail-leading);margin:0;min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}[data-ui=attachment] [data-part=message]{color:var(--_message-color);font-size:var(--_detail-size);grid-area:message;line-height:var(--_detail-leading);margin:0;margin-block-start:var(--_line-gap);min-inline-size:0;overflow-wrap:anywhere}[data-ui=attachment] [data-part=progress]{display:block;inset-block-end:round(down,calc((var(--_inset) - var(--slotted-space-1, .125rem)) / 2),1px);inset-inline-end:var(--_inset);inset-inline-start:calc(var(--_inset) + var(--_preview-size) + var(--_gap));position:absolute;transition:opacity var(--slotted-duration-medium) var(--slotted-easing-enter)}[data-ui=attachment][data-part=root]:not(:has(>[data-part=preview]))>[data-part=progress],[data-ui=attachment][data-orientation=vertical]>[data-part=progress]{inset-inline-start:var(--_inset)}@starting-style{[data-ui=attachment] [data-part=progress]{opacity:0}}[data-ui=attachment] [data-part=actions]{align-items:center;display:inline-flex;gap:var(--slotted-space-1, .125rem);grid-area:actions;justify-content:flex-end;position:relative;z-index:1}[data-ui=attachment] [data-part=action],[data-ui=attachment] [data-part=remove]{--_state-hover: color-mix( in oklab, currentcolor var(--slotted-attachment-action-state-layer-hover, 8%), transparent );--_state-active: color-mix( in oklab, currentcolor var(--slotted-attachment-action-state-layer-active, 14%), transparent );align-items:center;appearance:none;background-color:transparent;block-size:var(--_action-size);border:0;border-radius:var(--slotted-attachment-action-radius, var(--slotted-control-radius, 4px));box-sizing:border-box;color:inherit;cursor:pointer;display:inline-flex;flex:none;font:inherit;inline-size:var(--_action-size);justify-content:center;margin:0;padding:0;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=attachment] [data-part=action]>[data-ui=icon],[data-ui=attachment] [data-part=remove]>[data-ui=icon]{--slotted-icon-size: var(--_action-glyph-size)}[data-ui=attachment] [data-part=action]:not(:disabled):not([aria-disabled=true]):hover,[data-ui=attachment] [data-part=remove]:not(:disabled):not([aria-disabled=true]):hover{background-color:var(--_state-hover)}[data-ui=attachment] [data-part=action]:not(:disabled):not([aria-disabled=true]):active,[data-ui=attachment] [data-part=remove]:not(:disabled):not([aria-disabled=true]):active{background-color:var(--_state-active)}[data-ui=attachment] [data-part=action]:is(:disabled,[aria-disabled=true]),[data-ui=attachment] [data-part=remove]:is(:disabled,[aria-disabled=true]){color:var(--slotted-disabled-foreground);cursor:default}[data-ui=attachment] [data-part=action]:focus-visible,[data-ui=attachment] [data-part=remove]: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))}@media(pointer:coarse){[data-ui=attachment] :is([data-part=action],[data-part=remove]){position:relative}[data-ui=attachment] :is([data-part=action],[data-part=remove]):after{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-comfortable, 44px)) / 2));position:absolute}}[data-ui=attachment][data-part=root][data-invalid]{--_surface: var(--slotted-tone-danger-surface);--_edge: var(--slotted-tone-danger-border);--_message-color: var(--slotted-tone-danger-text);--_invalid-edge-width: var(--slotted-control-invalid-edge-width, var(--_border-width));box-shadow:inset 0 0 0 var(--_invalid-edge-width) var(--_edge)}[data-ui=attachment][data-part=root][data-disabled]{--_ink: var(--slotted-disabled-foreground)}[data-ui=attachment][data-part=root][data-disabled] [data-part=detail]{color:var(--slotted-disabled-foreground)}[data-ui=attachment][data-part=root][data-disabled] [data-part=preview]{--_kind-tile: var(--slotted-disabled-background);color:var(--slotted-disabled-foreground)}[data-ui=attachment][data-part=root][data-disabled] [data-part=preview]>img{filter:grayscale(1)}[data-ui=attachment][data-part=root][data-orientation=vertical]{align-items:stretch;grid-template-areas:\"preview\" \"body\" \"message\";grid-template-columns:minmax(0,1fr);inline-size:var(--_card-size)}[data-ui=attachment][data-orientation=vertical]>[data-part=preview]{--_preview-radius: var(--slotted-attachment-card-preview-radius, var(--slotted-radius-md, 6px));block-size:calc(var(--_card-size) - 2 * var(--_inset) - 2 * var(--_border-width));inline-size:100%}[data-ui=attachment][data-orientation=vertical]>[data-part=preview]>[data-ui=icon]{--slotted-icon-size: calc(2 * var(--_glyph-size))}[data-ui=attachment][data-orientation=vertical]>[data-part=preview]:not(:has(img)):after{content:attr(data-extension);font-size:var(--_detail-size);font-weight:var(--slotted-font-weight-semibold, 600);letter-spacing:.06em;line-height:var(--_detail-leading);margin-block-start:var(--slotted-space-2, .25rem)}[data-ui=attachment][data-orientation=vertical]>[data-part=body]{margin-block-start:var(--_gap)}[data-ui=attachment][data-orientation=vertical]>[data-part=actions]{background-color:color-mix(in oklab,var(--slotted-surface) var(--slotted-attachment-card-actions-opacity, 96%),transparent);border-radius:var(--slotted-attachment-action-radius, var(--slotted-control-radius, 4px));box-shadow:var(--slotted-shadow-xs);color:var(--slotted-text);grid-area:auto;inset-block-start:calc(var(--_inset) + var(--slotted-space-2, .25rem));inset-inline-end:calc(var(--_inset) + var(--slotted-space-2, .25rem));padding:var(--slotted-space-1, .125rem);position:absolute}@media(hover:hover)and (pointer:fine){[data-ui=attachment][data-orientation=vertical]:not([data-disabled])>[data-part=actions]{opacity:0;transition:opacity var(--slotted-duration-short) var(--slotted-easing-exit)}[data-ui=attachment][data-orientation=vertical]:not([data-disabled]):is(:hover,:focus-within)>[data-part=actions]{opacity:1;transition:opacity var(--slotted-duration-short) var(--slotted-easing-enter)}}[data-ui=attachment][data-part=group]{box-sizing:border-box;display:flex;flex-direction:column;gap:var(--slotted-attachment-group-gap, var(--slotted-space-4, .5rem));list-style:none;margin:0;min-inline-size:0;padding:0}[data-ui=attachment][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=attachment][data-part=group]:empty{display:none}[data-ui=attachment][data-part=group][data-layout=grid]{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--slotted-attachment-grid-min, 16rem)),1fr))}[data-ui=attachment][data-part=group][data-layout=grid][data-orientation=vertical]{grid-template-columns:repeat(auto-fill,var(--_card-size))}[data-ui=attachment][data-part=group][data-layout=strip]{--_ring-reach: calc( var(--slotted-focus-ring-width, 2px) + var(--slotted-focus-ring-offset, 2px) );flex-direction:row;margin:calc(-1 * var(--_ring-reach));overflow-x:auto;overscroll-behavior-inline:contain;padding:var(--_ring-reach);scroll-padding-inline:var(--_ring-reach);scroll-snap-type:inline proximity;scrollbar-color:var(--slotted-border-strong) transparent;scrollbar-width:thin}[data-ui=attachment][data-part=group][data-layout=strip]>[data-part=root]{flex:none;scroll-snap-align:start}[data-ui=attachment][data-part=group][data-layout=strip]>[data-part=root][data-orientation=horizontal]{inline-size:var(--slotted-attachment-strip-item-size, 15rem)}@media(forced-colors:active){[data-ui=attachment][data-part=root][data-invalid]{--_edge: CanvasText}[data-ui=attachment][data-part=root][data-invalid]{outline:var(--_invalid-edge-width) solid CanvasText;outline-offset:calc(-1 * (var(--_border-width) + var(--_invalid-edge-width)))}[data-ui=attachment][data-part=root][data-invalid]:has(>[data-part=body]>[data-part=trigger]: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=attachment][data-part=root]:not([data-disabled]):not([data-loading]):has(>[data-part=body]>[data-part=trigger]:is(:hover,:active)){border-color:Highlight}[data-ui=attachment] [data-part=preview]{border:var(--_border-width) solid ButtonBorder}[data-ui=attachment] :is([data-part=action],[data-part=remove]):not(:disabled):not([aria-disabled=true]):is(:hover,:active){background-color:Highlight;color:HighlightText}}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { file: [{ type: i0.Input, args: [{ isSignal: true, alias: "file", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], removable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }], messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }], remove: [{ type: i0.Output, args: ["remove"] }] } });
+
+function attachment() {
+    const owner = inject(SlAttachment, { optional: true });
+    if (owner === null)
+        throw new Error('An attachment part is rendered outside slAttachment.');
+    return owner;
+}
+/**
+ * Registers a describing part with its attachment for as long as it exists,
+ * under the id it carries: the page's own when it wrote one.
+ */
+function describes(part) {
+    const owner = attachment();
+    const id = inject(new HostAttributeToken('id'), { optional: true }) ?? owner.ids[part];
+    owner.describe(part, id);
+    inject(DestroyRef).onDestroy(() => owner.describe(part, null));
+    return { owner, id };
+}
+/**
+ * The kind's tile with the kind's mark knocked out of it, or the thumbnail the
+ * page gives. A thumbnail that fails to load returns to the tile: the failure
+ * is this part's own state, not a state of the file. Hidden from assistive
+ * technology, because the name already says what the file is.
+ */
+class SlAttachmentPreview {
+    /** A thumbnail. Absent, or failing to load, the kind's tile is drawn instead. */
+    src = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []));
+    owner = attachment();
+    failed = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "failed" }] : /* istanbul ignore next */ []));
+    picture = computed(() => {
+        const src = this.src();
+        return src !== undefined && src !== this.failed();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "picture" }] : /* istanbul ignore next */ []));
+    glyph = computed(() => ATTACHMENT_KIND_GLYPH[this.owner.kind()], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "glyph" }] : /* istanbul ignore next */ []));
+    extension = computed(() => {
+        const extension = this.owner.split().extension;
+        return extension === '' ? this.owner.t('noExtension') : extension.slice(1).toUpperCase();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "extension" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAttachmentPreview, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlAttachmentPreview, isStandalone: true, selector: "[slAttachmentPreview]", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-hidden": "true", "data-part": "preview" }, properties: { "attr.data-kind": "owner.kind()", "attr.data-extension": "extension()" } }, exportAs: ["slAttachmentPreview"], ngImport: i0, template: `@if (picture()) {
+      <img alt="" [src]="src()" (error)="failed.set(src())" />
+    } @else {
+      <span slIcon><svg slGlyph [name]="glyph()"></svg></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: SlAttachmentPreview, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[slAttachmentPreview]',
+                    standalone: true,
+                    exportAs: 'slAttachmentPreview',
+                    imports: [SlGlyph, SlIcon],
+                    template: `@if (picture()) {
+      <img alt="" [src]="src()" (error)="failed.set(src())" />
+    } @else {
+      <span slIcon><svg slGlyph [name]="glyph()"></svg></span>
+    }`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        'aria-hidden': 'true',
+                        'data-part': 'preview',
+                        '[attr.data-kind]': 'owner.kind()',
+                        '[attr.data-extension]': 'extension()',
+                    },
+                }]
+        }], propDecorators: { src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }] } });
+/** The text column, and the one box in the attachment that may shrink. */
+class SlAttachmentBody {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAttachmentBody, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlAttachmentBody, isStandalone: true, selector: "[slAttachmentBody]", host: { attributes: { "data-part": "body" } }, exportAs: ["slAttachmentBody"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAttachmentBody, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slAttachmentBody]',
+                    standalone: true,
+                    exportAs: 'slAttachmentBody',
+                    host: { 'data-part': 'body' },
+                }]
+        }] });
+/**
+ * The file name as two runs — the stem, which shrinks to an ellipsis, and the
+ * extension, which does not — in the name's own direction. Content the page
+ * projects replaces the two runs.
+ */
+class SlAttachmentFilename {
+    owner = attachment();
+    dir = inject(new HostAttributeToken('dir'), { optional: true }) ?? 'auto';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAttachmentFilename, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlAttachmentFilename, isStandalone: true, selector: "[slAttachmentFilename]", host: { attributes: { "data-part": "filename" }, properties: { "attr.dir": "dir" } }, exportAs: ["slAttachmentFilename"], ngImport: i0, template: `<ng-content
+    ><span data-part="name">{{ owner.split().stem }}</span>
+    @if (owner.split().extension) {
+      <span data-part="extension">{{ owner.split().extension }}</span>
+    }
+  </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: SlAttachmentFilename, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[slAttachmentFilename]',
+                    standalone: true,
+                    exportAs: 'slAttachmentFilename',
+                    template: `<ng-content
+    ><span data-part="name">{{ owner.split().stem }}</span>
+    @if (owner.split().extension) {
+      <span data-part="extension">{{ owner.split().extension }}</span>
+    }
+  </ng-content>`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        'data-part': 'filename',
+                        '[attr.dir]': 'dir',
+                    },
+                }]
+        }] });
+/**
+ * The file's target: `<a slAttachmentTrigger [href]>` for a file with an
+ * address, so `href`, `download` and a modified click stay the platform's;
+ * `<button slAttachmentTrigger>` for a viewer the page opens. Named by the
+ * file, described by the detail and the message, and stretched over the whole
+ * attachment. A `button` takes the native `disabled` while the file is loading
+ * or unavailable; an `a` takes `aria-disabled` and keeps its destination, and
+ * `slAttachment` refuses the activation.
+ */
+class SlAttachmentTrigger {
+    owner = attachment();
+    isButton = inject(ElementRef).nativeElement.tagName === 'BUTTON';
+    title = inject(new HostAttributeToken('title'), { optional: true });
+    type = inject(new HostAttributeToken('type'), { optional: true });
+    /** A description the page wrote comes first; the family's ids are joined to it. */
+    written = inject(new HostAttributeToken('aria-describedby'), {
+        optional: true,
+    });
+    describedBy = computed(() => {
+        const described = this.owner.described();
+        const ids = [
+            ...(this.written === null ? [] : [this.written]),
+            ...(described.detail === null ? [] : [described.detail]),
+            ...(described.message === null ? [] : [described.message]),
+        ];
+        return ids.length === 0 ? null : ids.join(' ');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAttachmentTrigger, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: SlAttachmentTrigger, isStandalone: true, selector: "a[slAttachmentTrigger], button[slAttachmentTrigger]", host: { attributes: { "data-part": "trigger" }, properties: { "attr.title": "title ?? owner.file().name", "attr.aria-describedby": "describedBy()", "attr.disabled": "isButton && owner.blocked() ? '' : null", "attr.aria-disabled": "!isButton && owner.blocked() ? 'true' : null", "attr.type": "isButton ? (type ?? 'button') : null" } }, exportAs: ["slAttachmentTrigger"], ngImport: i0, template: `<ng-content><span slAttachmentFilename></span></ng-content>`, isInline: true, dependencies: [{ kind: "component", type: SlAttachmentFilename, selector: "[slAttachmentFilename]", exportAs: ["slAttachmentFilename"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAttachmentTrigger, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'a[slAttachmentTrigger], button[slAttachmentTrigger]',
+                    standalone: true,
+                    exportAs: 'slAttachmentTrigger',
+                    imports: [SlAttachmentFilename],
+                    template: `<ng-content><span slAttachmentFilename></span></ng-content>`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        'data-part': 'trigger',
+                        '[attr.title]': 'title ?? owner.file().name',
+                        '[attr.aria-describedby]': 'describedBy()',
+                        '[attr.disabled]': "isButton && owner.blocked() ? '' : null",
+                        '[attr.aria-disabled]': "!isButton && owner.blocked() ? 'true' : null",
+                        '[attr.type]': "isButton ? (type ?? 'button') : null",
+                    },
+                }]
+        }] });
+/**
+ * The line under the name. With nothing projected it writes the size with
+ * `formatBytes` in the language in force; anything the page writes replaces it.
+ */
+class SlAttachmentDetail {
+    wiring = describes('detail');
+    owner = this.wiring.owner;
+    bytes = computed(() => {
+        const size = this.owner.file().size;
+        return size === undefined ? '' : formatBytes(size, this.owner.locale());
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "bytes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAttachmentDetail, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: SlAttachmentDetail, isStandalone: true, selector: "[slAttachmentDetail]", host: { attributes: { "data-part": "detail" }, properties: { "attr.id": "wiring.id" } }, exportAs: ["slAttachmentDetail"], ngImport: i0, template: `<ng-content>{{ bytes() }}</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: SlAttachmentDetail, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[slAttachmentDetail]',
+                    standalone: true,
+                    exportAs: 'slAttachmentDetail',
+                    template: `<ng-content>{{ bytes() }}</ng-content>`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        'data-part': 'detail',
+                        '[attr.id]': 'wiring.id',
+                    },
+                }]
+        }] });
+/** Why the file failed, or anything longer than a line the page must say about it. */
+class SlAttachmentMessage {
+    wiring = describes('message');
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAttachmentMessage, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlAttachmentMessage, isStandalone: true, selector: "[slAttachmentMessage]", host: { attributes: { "data-part": "message" }, properties: { "attr.id": "wiring.id" } }, exportAs: ["slAttachmentMessage"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAttachmentMessage, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slAttachmentMessage]',
+                    standalone: true,
+                    exportAs: 'slAttachmentMessage',
+                    host: {
+                        'data-part': 'message',
+                        '[attr.id]': 'wiring.id',
+                    },
+                }]
+        }] });
+/**
+ * The transfer, as the attachment's bottom edge: `slProgressBar`, named by the
+ * file so a reader hears the name and the percentage together. Without a
+ * `value` the bar is indeterminate.
+ */
+class SlAttachmentProgress {
+    /** Per cent, 0 to 100. Absent, the bar is indeterminate. */
+    value = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    owner = attachment();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAttachmentProgress, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: SlAttachmentProgress, isStandalone: true, selector: "[slAttachmentProgress]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-part": "progress" } }, exportAs: ["slAttachmentProgress"], ngImport: i0, template: `<div
+    slProgressBar
+    hideLabel
+    size="sm"
+    [label]="owner.file().name"
+    [tone]="owner.invalid() ? 'danger' : 'accent'"
+    [value]="value() ?? null"
+  ></div>`, isInline: true, dependencies: [{ kind: "component", type: SlProgressBar, selector: "[slProgressBar]", inputs: ["value", "min", "max", "buffer", "showValue", "valueText", "format", "locale", "wave", "placement"], exportAs: ["slProgressBar"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAttachmentProgress, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[slAttachmentProgress]',
+                    standalone: true,
+                    exportAs: 'slAttachmentProgress',
+                    imports: [SlProgressBar],
+                    template: `<div
+    slProgressBar
+    hideLabel
+    size="sm"
+    [label]="owner.file().name"
+    [tone]="owner.invalid() ? 'danger' : 'accent'"
+    [value]="value() ?? null"
+  ></div>`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: { 'data-part': 'progress' },
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }] } });
+/**
+ * The controls the application offers on the file, beside the trigger and
+ * above its stretched target: interactive content may not nest inside `a` or
+ * `button`.
+ */
+class SlAttachmentActions {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAttachmentActions, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlAttachmentActions, isStandalone: true, selector: "[slAttachmentActions]", host: { attributes: { "data-part": "actions" } }, exportAs: ["slAttachmentActions"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAttachmentActions, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slAttachmentActions]',
+                    standalone: true,
+                    exportAs: 'slAttachmentActions',
+                    host: { 'data-part': 'actions' },
+                }]
+        }] });
+/**
+ * One icon control of the application's own, on the `button` or the `a` the
+ * page wrote — an `a` with `download` is a download. It needs an
+ * `aria-label`. An unavailable attachment disables it: the native `disabled`
+ * on a button, `aria-disabled` on a link, whose activation `slAttachment`
+ * refuses.
+ */
+class SlAttachmentAction {
+    owner = attachment();
+    isButton = inject(ElementRef).nativeElement.tagName === 'BUTTON';
+    type = inject(new HostAttributeToken('type'), { optional: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAttachmentAction, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlAttachmentAction, isStandalone: true, selector: "button[slAttachmentAction], a[slAttachmentAction]", host: { attributes: { "data-part": "action" }, properties: { "attr.disabled": "isButton && owner.disabled() ? '' : null", "attr.aria-disabled": "!isButton && owner.disabled() ? 'true' : null", "attr.type": "isButton ? (type ?? 'button') : null" } }, exportAs: ["slAttachmentAction"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAttachmentAction, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[slAttachmentAction], a[slAttachmentAction]',
+                    standalone: true,
+                    exportAs: 'slAttachmentAction',
+                    host: {
+                        'data-part': 'action',
+                        '[attr.disabled]': "isButton && owner.disabled() ? '' : null",
+                        '[attr.aria-disabled]': "!isButton && owner.disabled() ? 'true' : null",
+                        '[attr.type]': "isButton ? (type ?? 'button') : null",
+                    },
+                }]
+        }] });
+/**
+ * Asks to take the attachment out of its list, on the `button` the page
+ * wrote. Hidden unless the attachment is `removable`, so a read-only thread
+ * shows no control that does nothing. Its name is the word and the file,
+ * `Remove claim-form.pdf`, unless the page wrote its own `aria-label`.
+ */
+class SlAttachmentRemove {
+    owner = attachment();
+    written = inject(new HostAttributeToken('aria-label'), { optional: true });
+    label = computed(() => this.written ?? this.owner.t('remove', { name: this.owner.file().name }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAttachmentRemove, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: SlAttachmentRemove, isStandalone: true, selector: "button[slAttachmentRemove]", host: { attributes: { "data-part": "remove", "type": "button" }, listeners: { "click": "owner.request(\"remove\", $event)" }, properties: { "attr.hidden": "owner.removable() ? null : ''", "attr.aria-label": "label()", "attr.disabled": "owner.disabled() ? '' : null" } }, exportAs: ["slAttachmentRemove"], ngImport: i0, template: `<ng-content
+    ><span slIcon><svg slGlyph name="x"></svg></span
+  ></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: SlAttachmentRemove, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'button[slAttachmentRemove]',
+                    standalone: true,
+                    exportAs: 'slAttachmentRemove',
+                    imports: [SlGlyph, SlIcon],
+                    template: `<ng-content
+    ><span slIcon><svg slGlyph name="x"></svg></span
+  ></ng-content>`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        'data-part': 'remove',
+                        type: 'button',
+                        '[attr.hidden]': "owner.removable() ? null : ''",
+                        '[attr.aria-label]': 'label()',
+                        '[attr.disabled]': "owner.disabled() ? '' : null",
+                        '(click)': 'owner.request("remove", $event)',
+                    },
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ATTACHMENT_CONTROL_SELECTOR, ATTACHMENT_DEFAULTS, ATTACHMENT_KIND_GLYPH, SlAttachment, SlAttachmentAction, SlAttachmentActions, SlAttachmentBody, SlAttachmentDetail, SlAttachmentFilename, SlAttachmentGroup, SlAttachmentMessage, SlAttachmentPreview, SlAttachmentProgress, SlAttachmentRemove, SlAttachmentTrigger, injectAttachmentDefaults, provideAttachmentDefaults };
+//# sourceMappingURL=slotted-angular-attachment.mjs.map