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

package/fesm2022/slotted-angular-description-list.mjs

@@ -0,0 +1,545 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, Injectable, input, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, Directive, HostAttributeToken, numberAttribute, booleanAttribute, output, signal, viewChild, DestroyRef, Injector, afterNextRender, effect } from '@angular/core';
+import { injectMessages } from '@slotted/angular/i18n';
+import { SlGlyph, SlIcon } from '@slotted/angular/icon';
+import { descriptionListMessages } from '@slotted/core/i18n';
+import { getLiveAnnouncer } from '@slotted/core/live-announcer';
+import { createControllable } from '@slotted/core/state';
+import { writeToClipboard } from '@slotted/core/clipboard';
+
+const DESCRIPTION_LIST_DEFAULT_LAYOUT = 'row';
+const DESCRIPTION_LIST_DEFAULT_COLUMNS = 1;
+const DESCRIPTION_LIST_DEFAULT_VARIANT = 'plain';
+/**
+ * The mark a row shows where it has no value: an em dash, which is what a table
+ * has used for a missing value since tables were set in lead. It is a character
+ * and therefore content, which is why it is written in the template and not
+ * generated by the stylesheet, and never a hyphen — that is a word joiner, half
+ * the width, sitting at a different height (DL2).
+ */
+const DESCRIPTION_LIST_EMPTY_VALUE_MARK = '\u2014';
+/** How long the copy control says it succeeded before returning to rest. */
+const COPIED_FOR = 1500;
+const DESCRIPTION_LIST_DEFAULTS_TOKEN = new InjectionToken('slotted description list defaults', { providedIn: 'root', factory: () => ({}) });
+/**
+ * An application decides once how its details panels are arranged. A list
+ * that states any of it itself still wins: an explicit input is never
+ * overridden by the token. Its words come from the language in force
+ * (`provideSlotted`).
+ */
+function provideDescriptionListDefaults(defaults) {
+    return { provide: DESCRIPTION_LIST_DEFAULTS_TOKEN, useValue: defaults };
+}
+function injectDescriptionListDefaults() {
+    return inject(DESCRIPTION_LIST_DEFAULTS_TOKEN);
+}
+/**
+ * A span is stated in columns and the list may have fewer, so a pair asking for
+ * three columns of a two-column list takes two. Grid would otherwise invent the
+ * tracks it was asked for and the list would quietly grow a column nobody
+ * declared. Shared with the React binding through the tests that assert the
+ * same table, and deliberately not through `@slotted/core`: it is three lines,
+ * and a core module exists for arithmetic two bindings would otherwise get
+ * *differently* wrong.
+ */
+function spanWithin(span, columns) {
+    if (span === undefined)
+        return undefined;
+    const clamped = Math.min(Math.max(Math.trunc(span), 1), columns);
+    return clamped > 1 ? clamped : undefined;
+}
+/**
+ * Whether a value wants more room than the lines it was given.
+ *
+ * It compares the height the text wants against the height the clamp allows,
+ * rather than comparing the box to itself: `scrollHeight` reports the full
+ * content either way, so the answer does not change when the clamp is released
+ * and the control does not disappear under the hand that pressed it. A line
+ * height CSS cannot resolve — `normal`, or an element with no layout — answers
+ * no, which leaves the control absent rather than present and useless.
+ *
+ * Shared with the React binding through the tests that assert the same table.
+ */
+function overflowsClamp(scrollHeight, lineHeight, lines) {
+    if (!Number.isFinite(lineHeight) || lineHeight <= 0 || lines <= 0)
+        return false;
+    return scrollHeight > lineHeight * lines + 1;
+}
+/**
+ * Puts the value under the reader's own selection, which is the one thing left
+ * to offer when the platform refuses the clipboard. It returns whether it
+ * managed to, so the request can say what actually happened.
+ */
+function selectValue(node) {
+    const selection = node?.ownerDocument.defaultView?.getSelection();
+    if (!node || !selection)
+        return false;
+    try {
+        selection.removeAllRanges();
+        const range = node.ownerDocument.createRange();
+        range.selectNodeContents(node);
+        selection.addRange(range);
+        return true;
+    }
+    catch {
+        return false;
+    }
+}
+/**
+ * Putting a value on the clipboard, and saying whether it got there.
+ *
+ * The two ways and the order they are tried in belong to `@slotted/core`, which
+ * is where behaviour the two bindings would otherwise get differently wrong
+ * lives: a temporary selection that is not taken back destroys the reader's
+ * own, and that is a bug a family would rediscover once per framework (DL1).
+ *
+ * What is left here is the family's own reading of the answer: the control says
+ * it copied whichever way the text went, and says it could not only when both
+ * ways were refused.
+ */
+async function copyToClipboard(value) {
+    return (await writeToClipboard(value)) !== 'refused';
+}
+/**
+ * Application-scoped rather than module-scoped, for the reason `field` 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 SlDescriptionListIdFactory {
+    count = 0;
+    next() {
+        this.count += 1;
+        return `slotted-description-list-${this.count}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDescriptionListIdFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDescriptionListIdFactory, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDescriptionListIdFactory, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * Pairs of a term and its description, read rather than edited.
+ *
+ * **The semantics are the platform's.** `dl`, `dt` and `dd` already carry
+ * `list`, `term` and `definition`, so the family writes no role: MDN records
+ * that authoring the ARIA `term` and `definition` roles by hand changes how
+ * VoiceOver announces the construct.
+ *
+ * **The `dl` is the component's and the element around it is the consumer's.**
+ * An element with `container-type: inline-size` is a query container for its
+ * descendants and not for itself, and what the container query changes here is
+ * the grid — so the consumer's own element is the container, and the `dl` the
+ * component draws inside it is the grid. Every pair a consumer writes is
+ * projected into that `dl`.
+ */
+class SlDescriptionList {
+    layout = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
+    columns = input(undefined, { ...(ngDevMode ? { debugName: "columns" } : /* istanbul ignore next */ {}), transform: optionalColumns });
+    variant = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** The maximum width of the term column, as a CSS length. */
+    termWidth = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "termWidth" }] : /* istanbul ignore next */ []));
+    /**
+     * Words laid over the catalog of the language in force, key by key: the
+     * copy control and its announcements, the reveal control, and the sentence
+     * read in place of a missing value.
+     */
+    messages = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []));
+    defaults = injectDescriptionListDefaults();
+    layoutValue = computed(() => this.layout() ?? this.defaults.layout ?? DESCRIPTION_LIST_DEFAULT_LAYOUT, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "layoutValue" }] : /* istanbul ignore next */ []));
+    columnsValue = computed(() => this.columns() ?? this.defaults.columns ?? DESCRIPTION_LIST_DEFAULT_COLUMNS, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "columnsValue" }] : /* istanbul ignore next */ []));
+    variantValue = computed(() => this.variant() ?? this.defaults.variant ?? DESCRIPTION_LIST_DEFAULT_VARIANT, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variantValue" }] : /* istanbul ignore next */ []));
+    termWidthValue = computed(() => this.termWidth() ?? this.defaults.termWidth, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "termWidthValue" }] : /* istanbul ignore next */ []));
+    /** The family's words in the language in force, with this list's `messages` laid over them. */
+    t = injectMessages(descriptionListMessages, this.messages);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDescriptionList, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: SlDescriptionList, isStandalone: true, selector: "div[slDescriptionList]", inputs: { layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, termWidth: { classPropertyName: "termWidth", publicName: "termWidth", isSignal: true, isRequired: false, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-ui": "description-list", "data-part": "root" }, properties: { "attr.data-layout": "layoutValue()", "attr.data-columns": "columnsValue()", "attr.data-variant": "variantValue()", "style.--slotted-description-list-term-width": "termWidthValue() ?? null" } }, exportAs: ["slDescriptionList"], ngImport: i0, template: '<dl data-part="list"><ng-content></ng-content></dl>', isInline: true, styles: ["@layer slotted.components{[data-ui=description-list]{container-name:slotted-description-list;container-type:inline-size;display:block}[data-ui=description-list] [data-part=list]{--_ink: var(--slotted-description-list-color, var(--slotted-text, CanvasText));--_term-ink: var(--slotted-description-list-term-color, var(--slotted-text-muted, GrayText));--_hint-ink: var(--slotted-description-list-hint-color, var(--slotted-text-muted, GrayText));--_rule: var(--slotted-description-list-rule-color, var(--slotted-border-subtle, ButtonBorder));--_term-surface: var( --slotted-description-list-term-surface, var(--slotted-surface-sunken, Canvas) );--_surface: var(--slotted-description-list-surface, var(--slotted-surface, Canvas));--_placeholder-ink: var( --slotted-description-list-placeholder-color, var(--slotted-text-muted, GrayText) );--_control-ink: var( --slotted-description-list-control-color, var(--slotted-text-muted, GrayText) );--_control-ink-hover: var( --slotted-description-list-control-color-hover, var(--slotted-text, CanvasText) );--_control-ink-done: var( --slotted-description-list-control-color-complete, var(--slotted-tone-success-text, CanvasText) );--_link-ink: var( --slotted-description-list-toggle-color, var(--slotted-tone-accent-text, LinkText) );--_term-width: var(--slotted-description-list-term-width, 14rem);--_pair-gap: var(--slotted-description-list-column-gap, var(--slotted-control-gap-md, 8px));--_group-gap: var( --slotted-description-list-group-gap, calc(var(--slotted-control-gap-md, 8px) * 3) );--_row-gap: var( --slotted-description-list-row-gap, calc(var(--slotted-control-gap-md, 8px) + var(--slotted-space-2, .25rem)) );--_stack-gap: var(--slotted-description-list-stack-gap, var(--slotted-space-3, .375rem));--_pad-block: var( --slotted-description-list-cell-padding-block, var(--slotted-control-gap-md, 8px) );--_pad-inline: var( --slotted-description-list-cell-padding-inline, var(--slotted-control-padding-inline-md, 13px) );--_glyph: var(--slotted-description-list-glyph-size, var(--slotted-control-icon-size-md, 16px));--_hit: calc((var(--slotted-target-min, 24px) - var(--_glyph)) / 2);--_pair: fit-content(var(--_term-width)) minmax(0, 1fr);--_cols: var(--_pair);--_span-1: 2;--_span-2: 4;--_span-3: 6;--_item-cols: subgrid;--_item-col-gap: var(--_pair-gap);--_term-col: 1;--_term-row: auto;--_desc-col: 2 / -1;--_desc-row: auto;--_action-col: -2 / -1;--_action-row: auto;color:var(--_ink);column-gap:var(--_group-gap);display:grid;font-family:var( --slotted-description-list-font-family, var(--slotted-font-family-sans, inherit) );font-size:var(--slotted-description-list-font-size, var(--slotted-control-font-size-md, 13px));grid-template-columns:var(--_cols);line-height:var(--slotted-description-list-line-height, var(--slotted-line-height-md, 1.5));margin:0}[data-ui=description-list] [data-part=list]:has([data-part=action]){--_pair: fit-content(var(--_term-width)) minmax(0, 1fr) auto;--_span-1: 3;--_span-2: 6;--_span-3: 9;--_desc-col: 2 / -2}[data-ui=description-list][data-columns=\"2\"] [data-part=list]{--_cols: repeat(2, var(--_pair))}[data-ui=description-list][data-columns=\"3\"] [data-part=list]{--_cols: repeat(3, var(--_pair))}[data-ui=description-list][data-layout=stack] [data-part=list]{--_pair: minmax(0, 1fr);--_term-floor: 0px;--_span-1: 1;--_span-2: 2;--_span-3: 3;--_item-cols: minmax(0, 1fr);--_item-col-gap: var(--_pair-gap);--_term-col: 1;--_desc-col: 1 / -1;--_desc-row: 2;--_action-col: -1 / -2;--_action-row: 1}[data-ui=description-list][data-layout=stack] [data-part=list]:has([data-part=action]){--_item-cols: minmax(0, 1fr) auto;--_desc-col: 1 / -1}[data-ui=description-list] [data-part=item]{column-gap:var(--_item-col-gap);display:grid;grid-column:span var(--_span-1);grid-template-columns:var(--_item-cols);min-inline-size:0;row-gap:var(--_stack-gap)}[data-ui=description-list] [data-part=item][data-span=\"2\"]{grid-column:span var(--_span-2)}[data-ui=description-list] [data-part=item][data-span=\"3\"]{grid-column:span var(--_span-3)}[data-ui=description-list] [data-part=term]{color:var(--_term-ink);font-weight:var( --slotted-description-list-term-weight, var(--slotted-font-weight-medium, 500) );grid-column:var(--_term-col);grid-row:var(--_term-row);min-inline-size:var(--_term-floor, 0px);overflow-wrap:break-word}[data-ui=description-list] [data-part=list]:has([data-part=hint]){--_term-floor: var(--slotted-description-list-term-min, 12rem)}[data-ui=description-list] [data-part=hint]{color:var(--_hint-ink);contain:inline-size;display:block;font-size:var(--slotted-description-list-hint-font-size, var(--slotted-font-size-xs, .75rem));font-weight:var(--slotted-font-weight-regular, 400);line-height:var(--slotted-line-height-xs, 1.4);margin-block-start:var(--slotted-space-1, .125rem)}[data-ui=description-list] [data-part=description]:not([data-clamp]){display:block}[data-ui=description-list] [data-part=description]:not([data-clamp]) [data-part=value]{display:inline}[data-ui=description-list] [data-part=description]:not([data-clamp]) [data-part=copy]{margin-inline-start:var(--_pair-gap);vertical-align:text-bottom}[data-ui=description-list] [data-part=description]{align-items:baseline;column-gap:max(var(--_pair-gap),var(--slotted-space-4, .5rem));display:grid;grid-column:var(--_desc-col);grid-row:var(--_desc-row);grid-template-columns:minmax(0,max-content) auto;justify-content:start;margin:0;min-inline-size:0;row-gap:var(--slotted-space-2, .25rem)}[data-ui=description-list] [data-part=value]{grid-column:1;min-inline-size:0;overflow-wrap:break-word}[data-ui=description-list] [data-part=description][data-clamp] [data-part=value]{-webkit-box-orient:vertical;-webkit-line-clamp:var(--slotted-description-list-clamp, 2);display:-webkit-box;overflow:hidden}[data-ui=description-list] [data-part=description][data-clamp][data-revealed] [data-part=value]{-webkit-line-clamp:none;display:block;overflow:visible}[data-ui=description-list] [data-part=placeholder]{color:var(--_placeholder-ink)}[data-ui=description-list] :is([data-part=copy],[data-part=toggle]){appearance:none;background:none;border:0;border-radius:var(--slotted-description-list-radius, var(--slotted-control-radius, 4px));cursor:pointer;font:inherit;transition:color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=description-list] :is([data-part=copy],[data-part=toggle]):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=description-list] [data-part=copy]{--slotted-icon-size: var(--_glyph);align-items:center;block-size:var(--slotted-target-min, 24px);color:var(--_control-ink);display:inline-flex;grid-column:2;inline-size:var(--slotted-target-min, 24px);justify-content:center;margin-block:calc(var(--_hit) * -1);padding:var(--_hit)}[data-ui=description-list] [data-part=copy]:enabled:not([data-complete]):hover{background-color:var( --slotted-description-list-control-surface-hover, var(--slotted-tone-secondary-subtle-hover, ButtonFace) );color:var(--_control-ink-hover)}[data-ui=description-list] [data-part=copy]:enabled:not([data-complete]):active{background-color:var( --slotted-description-list-control-surface-active, var(--slotted-tone-secondary-subtle-active, ButtonFace) )}[data-ui=description-list] [data-part=copy][data-complete]{color:var(--_control-ink-done)}@media(pointer:coarse){[data-ui=description-list] [data-part=copy]{position:relative}[data-ui=description-list] [data-part=copy]:before{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-comfortable, 44px)) / 2));position:absolute}}[data-ui=description-list] [data-part=toggle]{--slotted-icon-size: var(--_glyph);align-items:center;color:var(--_link-ink);column-gap:var(--slotted-space-2, .25rem);display:inline-flex;grid-column:1 / -1;justify-self:start;min-block-size:var(--slotted-target-min, 24px);padding-inline:0}[data-ui=description-list] [data-part=toggle]>[data-ui=icon]{rotate:0deg;transition:rotate var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=description-list] [data-revealed] [data-part=toggle]>[data-ui=icon]{rotate:180deg}[data-ui=description-list] [data-part=toggle]:enabled:hover{text-decoration-line:underline;text-underline-offset:var(--slotted-description-list-underline-offset, .2em)}[data-ui=description-list] [data-part=toggle]:enabled:active{color:var(--_control-ink-hover)}[data-ui=description-list] [data-part=action]{align-self:start;grid-column:var(--_action-col);grid-row:var(--_action-row);justify-self:end;margin:0;white-space:nowrap}[data-ui=description-list][data-variant=plain] [data-part=list]{row-gap:var(--_row-gap)}[data-ui=description-list][data-variant=ruled] [data-part=list]{row-gap:0}[data-ui=description-list][data-variant=ruled] [data-part=item]{border-block-end:var(--slotted-border-width-thin, 1px) solid var(--_rule);padding-block:var(--_pad-block)}[data-ui=description-list][data-variant=framed] [data-part=list]{background-color:var(--_surface);border:var(--slotted-border-width-thin, 1px) solid var(--_rule);border-radius:var(--slotted-description-list-frame-radius, var(--slotted-radius-md, 6px));column-gap:0;overflow:clip;row-gap:0}[data-ui=description-list][data-variant=framed] [data-part=item]{border-block-start:var(--slotted-border-width-thin, 1px) solid var(--_rule);column-gap:0}[data-ui=description-list][data-variant=framed][data-columns=\"1\"] [data-part=item]:first-child,[data-ui=description-list][data-variant=framed][data-columns=\"2\"] [data-part=item]:nth-child(-n+2),[data-ui=description-list][data-variant=framed][data-columns=\"3\"] [data-part=item]:nth-child(-n+3){border-block-start-width:0}[data-ui=description-list][data-variant=framed] :is([data-part=term],[data-part=description],[data-part=action]){padding-block:var(--_pad-block);padding-inline:var(--_pad-inline)}[data-ui=description-list][data-variant=framed] [data-part=term]{background-color:var(--_term-surface);border-inline-end:var(--slotted-border-width-thin, 1px) solid var(--_rule)}[data-ui=description-list][data-variant=framed][data-layout=stack] [data-part=term]{border-inline-end:0}@container slotted-description-list (max-width: 48rem){[data-ui=description-list][data-columns=\"3\"] [data-part=list]{--_cols: repeat(2, var(--_pair));--_span-3: var(--_span-2)}}@container slotted-description-list (max-width: 34rem){[data-ui=description-list][data-columns=\"2\"] [data-part=list],[data-ui=description-list][data-columns=\"3\"] [data-part=list]{--_cols: var(--_pair);--_span-2: var(--_span-1);--_span-3: var(--_span-1)}[data-ui=description-list][data-layout=row] [data-part=list]:has([data-part=hint]){--_pair: minmax(0, 1fr);--_term-floor: 0px;--_span-1: 1;--_span-2: 1;--_span-3: 1;--_item-cols: minmax(0, 1fr);--_desc-col: 1 / -1;--_desc-row: 2;--_action-col: -1 / -2;--_action-row: 1}[data-ui=description-list][data-layout=row] [data-part=list]:has([data-part=hint]):has([data-part=action]){--_item-cols: minmax(0, 1fr) auto}[data-ui=description-list][data-variant=framed][data-layout=row] [data-part=list]:has([data-part=hint]) [data-part=term]{border-inline-end:0}}@container slotted-description-list (max-width: 26rem){[data-ui=description-list][data-layout=row] [data-part=list]{--_pair: minmax(0, 1fr);--_term-floor: 0px;--_span-1: 1;--_span-2: 1;--_span-3: 1;--_item-cols: minmax(0, 1fr);--_desc-col: 1 / -1;--_desc-row: 2;--_action-col: -1 / -2;--_action-row: 1}[data-ui=description-list][data-layout=row] [data-part=list]:has([data-part=action]){--_item-cols: minmax(0, 1fr) auto;--_desc-col: 1 / -1}[data-ui=description-list][data-variant=framed][data-layout=row] [data-part=term]{border-inline-end:0}}}\n", "@layer slotted.components{[data-ui=visually-hidden]:not([data-focusable]:focus-within){block-size:1px;border:0;clip-path:inset(50%);inline-size:1px;inset-block-start:0;inset-inline-start:0;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDescriptionList, decorators: [{
+            type: Component,
+            args: [{ selector: 'div[slDescriptionList]', standalone: true, template: '<dl data-part="list"><ng-content></ng-content></dl>', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, exportAs: 'slDescriptionList', host: {
+                        'data-ui': 'description-list',
+                        'data-part': 'root',
+                        '[attr.data-layout]': 'layoutValue()',
+                        '[attr.data-columns]': 'columnsValue()',
+                        '[attr.data-variant]': 'variantValue()',
+                        '[style.--slotted-description-list-term-width]': 'termWidthValue() ?? null',
+                    }, styles: ["@layer slotted.components{[data-ui=description-list]{container-name:slotted-description-list;container-type:inline-size;display:block}[data-ui=description-list] [data-part=list]{--_ink: var(--slotted-description-list-color, var(--slotted-text, CanvasText));--_term-ink: var(--slotted-description-list-term-color, var(--slotted-text-muted, GrayText));--_hint-ink: var(--slotted-description-list-hint-color, var(--slotted-text-muted, GrayText));--_rule: var(--slotted-description-list-rule-color, var(--slotted-border-subtle, ButtonBorder));--_term-surface: var( --slotted-description-list-term-surface, var(--slotted-surface-sunken, Canvas) );--_surface: var(--slotted-description-list-surface, var(--slotted-surface, Canvas));--_placeholder-ink: var( --slotted-description-list-placeholder-color, var(--slotted-text-muted, GrayText) );--_control-ink: var( --slotted-description-list-control-color, var(--slotted-text-muted, GrayText) );--_control-ink-hover: var( --slotted-description-list-control-color-hover, var(--slotted-text, CanvasText) );--_control-ink-done: var( --slotted-description-list-control-color-complete, var(--slotted-tone-success-text, CanvasText) );--_link-ink: var( --slotted-description-list-toggle-color, var(--slotted-tone-accent-text, LinkText) );--_term-width: var(--slotted-description-list-term-width, 14rem);--_pair-gap: var(--slotted-description-list-column-gap, var(--slotted-control-gap-md, 8px));--_group-gap: var( --slotted-description-list-group-gap, calc(var(--slotted-control-gap-md, 8px) * 3) );--_row-gap: var( --slotted-description-list-row-gap, calc(var(--slotted-control-gap-md, 8px) + var(--slotted-space-2, .25rem)) );--_stack-gap: var(--slotted-description-list-stack-gap, var(--slotted-space-3, .375rem));--_pad-block: var( --slotted-description-list-cell-padding-block, var(--slotted-control-gap-md, 8px) );--_pad-inline: var( --slotted-description-list-cell-padding-inline, var(--slotted-control-padding-inline-md, 13px) );--_glyph: var(--slotted-description-list-glyph-size, var(--slotted-control-icon-size-md, 16px));--_hit: calc((var(--slotted-target-min, 24px) - var(--_glyph)) / 2);--_pair: fit-content(var(--_term-width)) minmax(0, 1fr);--_cols: var(--_pair);--_span-1: 2;--_span-2: 4;--_span-3: 6;--_item-cols: subgrid;--_item-col-gap: var(--_pair-gap);--_term-col: 1;--_term-row: auto;--_desc-col: 2 / -1;--_desc-row: auto;--_action-col: -2 / -1;--_action-row: auto;color:var(--_ink);column-gap:var(--_group-gap);display:grid;font-family:var( --slotted-description-list-font-family, var(--slotted-font-family-sans, inherit) );font-size:var(--slotted-description-list-font-size, var(--slotted-control-font-size-md, 13px));grid-template-columns:var(--_cols);line-height:var(--slotted-description-list-line-height, var(--slotted-line-height-md, 1.5));margin:0}[data-ui=description-list] [data-part=list]:has([data-part=action]){--_pair: fit-content(var(--_term-width)) minmax(0, 1fr) auto;--_span-1: 3;--_span-2: 6;--_span-3: 9;--_desc-col: 2 / -2}[data-ui=description-list][data-columns=\"2\"] [data-part=list]{--_cols: repeat(2, var(--_pair))}[data-ui=description-list][data-columns=\"3\"] [data-part=list]{--_cols: repeat(3, var(--_pair))}[data-ui=description-list][data-layout=stack] [data-part=list]{--_pair: minmax(0, 1fr);--_term-floor: 0px;--_span-1: 1;--_span-2: 2;--_span-3: 3;--_item-cols: minmax(0, 1fr);--_item-col-gap: var(--_pair-gap);--_term-col: 1;--_desc-col: 1 / -1;--_desc-row: 2;--_action-col: -1 / -2;--_action-row: 1}[data-ui=description-list][data-layout=stack] [data-part=list]:has([data-part=action]){--_item-cols: minmax(0, 1fr) auto;--_desc-col: 1 / -1}[data-ui=description-list] [data-part=item]{column-gap:var(--_item-col-gap);display:grid;grid-column:span var(--_span-1);grid-template-columns:var(--_item-cols);min-inline-size:0;row-gap:var(--_stack-gap)}[data-ui=description-list] [data-part=item][data-span=\"2\"]{grid-column:span var(--_span-2)}[data-ui=description-list] [data-part=item][data-span=\"3\"]{grid-column:span var(--_span-3)}[data-ui=description-list] [data-part=term]{color:var(--_term-ink);font-weight:var( --slotted-description-list-term-weight, var(--slotted-font-weight-medium, 500) );grid-column:var(--_term-col);grid-row:var(--_term-row);min-inline-size:var(--_term-floor, 0px);overflow-wrap:break-word}[data-ui=description-list] [data-part=list]:has([data-part=hint]){--_term-floor: var(--slotted-description-list-term-min, 12rem)}[data-ui=description-list] [data-part=hint]{color:var(--_hint-ink);contain:inline-size;display:block;font-size:var(--slotted-description-list-hint-font-size, var(--slotted-font-size-xs, .75rem));font-weight:var(--slotted-font-weight-regular, 400);line-height:var(--slotted-line-height-xs, 1.4);margin-block-start:var(--slotted-space-1, .125rem)}[data-ui=description-list] [data-part=description]:not([data-clamp]){display:block}[data-ui=description-list] [data-part=description]:not([data-clamp]) [data-part=value]{display:inline}[data-ui=description-list] [data-part=description]:not([data-clamp]) [data-part=copy]{margin-inline-start:var(--_pair-gap);vertical-align:text-bottom}[data-ui=description-list] [data-part=description]{align-items:baseline;column-gap:max(var(--_pair-gap),var(--slotted-space-4, .5rem));display:grid;grid-column:var(--_desc-col);grid-row:var(--_desc-row);grid-template-columns:minmax(0,max-content) auto;justify-content:start;margin:0;min-inline-size:0;row-gap:var(--slotted-space-2, .25rem)}[data-ui=description-list] [data-part=value]{grid-column:1;min-inline-size:0;overflow-wrap:break-word}[data-ui=description-list] [data-part=description][data-clamp] [data-part=value]{-webkit-box-orient:vertical;-webkit-line-clamp:var(--slotted-description-list-clamp, 2);display:-webkit-box;overflow:hidden}[data-ui=description-list] [data-part=description][data-clamp][data-revealed] [data-part=value]{-webkit-line-clamp:none;display:block;overflow:visible}[data-ui=description-list] [data-part=placeholder]{color:var(--_placeholder-ink)}[data-ui=description-list] :is([data-part=copy],[data-part=toggle]){appearance:none;background:none;border:0;border-radius:var(--slotted-description-list-radius, var(--slotted-control-radius, 4px));cursor:pointer;font:inherit;transition:color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=description-list] :is([data-part=copy],[data-part=toggle]):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=description-list] [data-part=copy]{--slotted-icon-size: var(--_glyph);align-items:center;block-size:var(--slotted-target-min, 24px);color:var(--_control-ink);display:inline-flex;grid-column:2;inline-size:var(--slotted-target-min, 24px);justify-content:center;margin-block:calc(var(--_hit) * -1);padding:var(--_hit)}[data-ui=description-list] [data-part=copy]:enabled:not([data-complete]):hover{background-color:var( --slotted-description-list-control-surface-hover, var(--slotted-tone-secondary-subtle-hover, ButtonFace) );color:var(--_control-ink-hover)}[data-ui=description-list] [data-part=copy]:enabled:not([data-complete]):active{background-color:var( --slotted-description-list-control-surface-active, var(--slotted-tone-secondary-subtle-active, ButtonFace) )}[data-ui=description-list] [data-part=copy][data-complete]{color:var(--_control-ink-done)}@media(pointer:coarse){[data-ui=description-list] [data-part=copy]{position:relative}[data-ui=description-list] [data-part=copy]:before{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-comfortable, 44px)) / 2));position:absolute}}[data-ui=description-list] [data-part=toggle]{--slotted-icon-size: var(--_glyph);align-items:center;color:var(--_link-ink);column-gap:var(--slotted-space-2, .25rem);display:inline-flex;grid-column:1 / -1;justify-self:start;min-block-size:var(--slotted-target-min, 24px);padding-inline:0}[data-ui=description-list] [data-part=toggle]>[data-ui=icon]{rotate:0deg;transition:rotate var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=description-list] [data-revealed] [data-part=toggle]>[data-ui=icon]{rotate:180deg}[data-ui=description-list] [data-part=toggle]:enabled:hover{text-decoration-line:underline;text-underline-offset:var(--slotted-description-list-underline-offset, .2em)}[data-ui=description-list] [data-part=toggle]:enabled:active{color:var(--_control-ink-hover)}[data-ui=description-list] [data-part=action]{align-self:start;grid-column:var(--_action-col);grid-row:var(--_action-row);justify-self:end;margin:0;white-space:nowrap}[data-ui=description-list][data-variant=plain] [data-part=list]{row-gap:var(--_row-gap)}[data-ui=description-list][data-variant=ruled] [data-part=list]{row-gap:0}[data-ui=description-list][data-variant=ruled] [data-part=item]{border-block-end:var(--slotted-border-width-thin, 1px) solid var(--_rule);padding-block:var(--_pad-block)}[data-ui=description-list][data-variant=framed] [data-part=list]{background-color:var(--_surface);border:var(--slotted-border-width-thin, 1px) solid var(--_rule);border-radius:var(--slotted-description-list-frame-radius, var(--slotted-radius-md, 6px));column-gap:0;overflow:clip;row-gap:0}[data-ui=description-list][data-variant=framed] [data-part=item]{border-block-start:var(--slotted-border-width-thin, 1px) solid var(--_rule);column-gap:0}[data-ui=description-list][data-variant=framed][data-columns=\"1\"] [data-part=item]:first-child,[data-ui=description-list][data-variant=framed][data-columns=\"2\"] [data-part=item]:nth-child(-n+2),[data-ui=description-list][data-variant=framed][data-columns=\"3\"] [data-part=item]:nth-child(-n+3){border-block-start-width:0}[data-ui=description-list][data-variant=framed] :is([data-part=term],[data-part=description],[data-part=action]){padding-block:var(--_pad-block);padding-inline:var(--_pad-inline)}[data-ui=description-list][data-variant=framed] [data-part=term]{background-color:var(--_term-surface);border-inline-end:var(--slotted-border-width-thin, 1px) solid var(--_rule)}[data-ui=description-list][data-variant=framed][data-layout=stack] [data-part=term]{border-inline-end:0}@container slotted-description-list (max-width: 48rem){[data-ui=description-list][data-columns=\"3\"] [data-part=list]{--_cols: repeat(2, var(--_pair));--_span-3: var(--_span-2)}}@container slotted-description-list (max-width: 34rem){[data-ui=description-list][data-columns=\"2\"] [data-part=list],[data-ui=description-list][data-columns=\"3\"] [data-part=list]{--_cols: var(--_pair);--_span-2: var(--_span-1);--_span-3: var(--_span-1)}[data-ui=description-list][data-layout=row] [data-part=list]:has([data-part=hint]){--_pair: minmax(0, 1fr);--_term-floor: 0px;--_span-1: 1;--_span-2: 1;--_span-3: 1;--_item-cols: minmax(0, 1fr);--_desc-col: 1 / -1;--_desc-row: 2;--_action-col: -1 / -2;--_action-row: 1}[data-ui=description-list][data-layout=row] [data-part=list]:has([data-part=hint]):has([data-part=action]){--_item-cols: minmax(0, 1fr) auto}[data-ui=description-list][data-variant=framed][data-layout=row] [data-part=list]:has([data-part=hint]) [data-part=term]{border-inline-end:0}}@container slotted-description-list (max-width: 26rem){[data-ui=description-list][data-layout=row] [data-part=list]{--_pair: minmax(0, 1fr);--_term-floor: 0px;--_span-1: 1;--_span-2: 1;--_span-3: 1;--_item-cols: minmax(0, 1fr);--_desc-col: 1 / -1;--_desc-row: 2;--_action-col: -1 / -2;--_action-row: 1}[data-ui=description-list][data-layout=row] [data-part=list]:has([data-part=action]){--_item-cols: minmax(0, 1fr) auto;--_desc-col: 1 / -1}[data-ui=description-list][data-variant=framed][data-layout=row] [data-part=term]{border-inline-end:0}}}\n", "@layer slotted.components{[data-ui=visually-hidden]:not([data-focusable]:focus-within){block-size:1px;border:0;clip-path:inset(50%);inline-size:1px;inset-block-start:0;inset-inline-start:0;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap}}\n"] }]
+        }], propDecorators: { layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], termWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "termWidth", required: false }] }], messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }] } });
+/**
+ * One name-value pair, and the `div` the HTML Standard permits inside a `dl`.
+ *
+ * It is the box a rule, a tint and a span apply to, and the only part that can
+ * see both the term and the action — so it is where the identifier that ties
+ * the two together is made.
+ */
+class SlDescriptionListItem {
+    list = inject(SlDescriptionList);
+    span = input(undefined, { ...(ngDevMode ? { debugName: "span" } : /* istanbul ignore next */ {}), transform: optionalColumns });
+    /** The `dt`'s identifier, which the row's action is described by. */
+    termId = inject(SlDescriptionListIdFactory).next();
+    spanValue = computed(() => spanWithin(this.span(), this.list.columnsValue()) ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "spanValue" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDescriptionListItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.7", type: SlDescriptionListItem, isStandalone: true, selector: "div[slDescriptionListItem]", inputs: { span: { classPropertyName: "span", publicName: "span", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-part": "item" }, properties: { "attr.data-span": "spanValue()" } }, exportAs: ["slDescriptionListItem"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDescriptionListItem, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'div[slDescriptionListItem]',
+                    standalone: true,
+                    exportAs: 'slDescriptionListItem',
+                    host: {
+                        'data-part': 'item',
+                        '[attr.data-span]': 'spanValue()',
+                    },
+                }]
+        }], propDecorators: { span: [{ type: i0.Input, args: [{ isSignal: true, alias: "span", required: false }] }] } });
+/**
+ * The name. It carries an identifier so the row's action can be described by
+ * it; a static `id` the consumer wrote wins, because a page that already
+ * references this term references it by the name it chose.
+ */
+class SlDescriptionListTerm {
+    item = inject(SlDescriptionListItem, { optional: true });
+    ownId = inject(new HostAttributeToken('id'), { optional: true });
+    identifier = this.ownId ?? this.item?.termId ?? null;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDescriptionListTerm, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlDescriptionListTerm, isStandalone: true, selector: "dt[slDescriptionListTerm]", host: { attributes: { "data-part": "term" }, properties: { "attr.id": "identifier" } }, exportAs: ["slDescriptionListTerm"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDescriptionListTerm, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'dt[slDescriptionListTerm]',
+                    standalone: true,
+                    exportAs: 'slDescriptionListTerm',
+                    host: {
+                        'data-part': 'term',
+                        '[attr.id]': 'identifier',
+                    },
+                }]
+        }] });
+/**
+ * One line explaining what the term means, inside the `dt` that names it. It is
+ * part of the term's own text on purpose: a reader who reaches the term hears
+ * the explanation with it, and the row's action — described by the same `dt` —
+ * inherits the context rather than repeating it.
+ */
+class SlDescriptionListHint {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDescriptionListHint, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlDescriptionListHint, isStandalone: true, selector: "[slDescriptionListHint]", host: { attributes: { "data-part": "hint" } }, exportAs: ["slDescriptionListHint"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDescriptionListHint, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slDescriptionListHint]',
+                    standalone: true,
+                    exportAs: 'slDescriptionListHint',
+                    host: { 'data-part': 'hint' },
+                }]
+        }] });
+/**
+ * The value's cell: the value itself, and the controls that reach it.
+ *
+ * **Clamping is visual only.** Every character stays in the DOM, selectable,
+ * copyable and readable by a screen reader, which is what section 10 of the
+ * feature guide means by never truncating without access.
+ *
+ * **Empty is stated rather than inferred.** Angular cannot read projected
+ * content without reading the DOM after a render, so the absence of a value is
+ * an input here where React reads nullish children. Levelling the two down to
+ * the input in both would remove the case that matters most in React — a value
+ * missing because the data is missing — to make the two look alike.
+ */
+class SlDescriptionListDescription {
+    list = inject(SlDescriptionList);
+    /** The character a row shows where it has no value. */
+    emptyMark = DESCRIPTION_LIST_EMPTY_VALUE_MARK;
+    /** Lines the value is held to before it is revealed. `0` never clamps. */
+    clamp = input(0, { ...(ngDevMode ? { debugName: "clamp" } : /* istanbul ignore next */ {}), transform: (value) => numberAttribute(value, 0) });
+    /** Draws the control that puts the value on the clipboard. */
+    copy = input(false, { ...(ngDevMode ? { debugName: "copy" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * The text the control copies. Absent, the rendered text of the value is read
+     * at the moment of the press, which is what a formatted value needs.
+     */
+    copyValue = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "copyValue" }] : /* istanbul ignore next */ []));
+    /** Draws the placeholder in place of a value that is missing. */
+    empty = input(false, { ...(ngDevMode ? { debugName: "empty" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** What is read in place of that value. */
+    placeholder = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /**
+     * Present means controlled, for the life of the component, which is why the
+     * unset value is `undefined` rather than `false`: a family that read `false`
+     * as a consumer's answer would never own its own state.
+     */
+    revealedValue = input(undefined, { ...(ngDevMode ? { debugName: "revealedValue" } : /* istanbul ignore next */ {}), alias: 'revealed',
+        transform: (value) => value === undefined ? undefined : booleanAttribute(value) });
+    /** What an uncontrolled description starts from, read once. */
+    defaultRevealed = input(false, { ...(ngDevMode ? { debugName: "defaultRevealed" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Emitted before the value is revealed, carrying the value it replaces, the
+     * reason and the event it came from. It is not the second half of a two-way
+     * binding: one slot can carry none of those.
+     */
+    revealedChange = output();
+    /** Emitted after a copy, whether or not the platform accepted it. */
+    copied$ = output({ alias: 'copied' });
+    own = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "own" }] : /* istanbul ignore next */ []));
+    done = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "done" }] : /* istanbul ignore next */ []));
+    overflowing = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "overflowing" }] : /* istanbul ignore next */ []));
+    value = viewChild('value', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    destroyRef = inject(DestroyRef);
+    injector = inject(Injector);
+    timer;
+    observer;
+    keyed = false;
+    revealed = computed(() => this.revealedValue() ?? this.own(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "revealed" }] : /* istanbul ignore next */ []));
+    clampValue = computed(() => Math.max(0, Math.trunc(this.clamp())), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "clampValue" }] : /* istanbul ignore next */ []));
+    copied = computed(() => this.done(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "copied" }] : /* istanbul ignore next */ []));
+    /** Whether the value wants more room than the clamp gives it. */
+    overflows = computed(() => this.overflowing(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "overflows" }] : /* istanbul ignore next */ []));
+    placeholderText = computed(() => this.placeholder() ?? this.list.t('placeholder'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholderText" }] : /* istanbul ignore next */ []));
+    constructor() {
+        this.own.set(this.defaultRevealed());
+        this.destroyRef.onDestroy(() => {
+            clearTimeout(this.timer);
+            this.observer?.disconnect();
+        });
+        /**
+         * A control that reveals nothing is a control a reader presses once and
+         * learns to distrust. A clamp is a maximum rather than a promise: most
+         * values in a panel are shorter than it, and the toggle appears only for
+         * the ones that are not. The value is remeasured whenever its box changes,
+         * which is what the container query does to it at every breakpoint.
+         */
+        afterNextRender(() => {
+            effect(() => {
+                const lines = this.clampValue();
+                const node = this.value()?.nativeElement;
+                this.observer?.disconnect();
+                this.observer = undefined;
+                if (lines <= 0 || !node || typeof ResizeObserver === 'undefined') {
+                    this.overflowing.set(false);
+                    return;
+                }
+                const measure = () => {
+                    const lineHeight = Number.parseFloat(getComputedStyle(node).lineHeight);
+                    this.overflowing.set(overflowsClamp(node.scrollHeight, lineHeight, lines));
+                };
+                measure();
+                this.observer = new ResizeObserver(measure);
+                this.observer.observe(node);
+            }, { injector: this.injector });
+        }, { injector: this.injector });
+    }
+    /**
+     * `Enter` and `Space` both activate a button and the browser turns each into
+     * a click, so the reason a request carries is decided by whether a key came
+     * first. It is the difference between a press and a key, and a consumer that
+     * has to guess writes the wrong handler.
+     */
+    onKeydown(event) {
+        if (event.key === 'Enter' || event.key === ' ')
+            this.keyed = true;
+    }
+    onToggle(event) {
+        const reason = this.takeReason();
+        const state = createControllable({
+            controlled: this.revealedValue(),
+            initial: this.revealed(),
+            onRequest: (request) => this.revealedChange.emit(request),
+        });
+        if (state.request(!this.revealed(), reason, event))
+            this.own.set(!this.own());
+    }
+    async onCopy(event) {
+        const reason = this.takeReason();
+        /* Read at the moment of the press rather than at render: a formatted value
+           is what the reader sees, and `copyValue` is for when it is not. */
+        const text = this.copyValue() ?? this.value()?.nativeElement.textContent?.trim() ?? '';
+        const copied = await copyToClipboard(text);
+        let selected = false;
+        if (copied) {
+            this.done.set(true);
+            clearTimeout(this.timer);
+            this.timer = setTimeout(() => this.done.set(false), COPIED_FOR);
+            /* Through the shared announcer rather than a region this family owns, so
+               two copies in one update are both heard. */
+            getLiveAnnouncer().announce(this.list.t('copied'));
+        }
+        else {
+            /**
+             * A refused write used to leave the control at rest and the reader with
+             * nothing — which is indistinguishable from a broken button, and is
+             * exactly what a browser does when the document is not focused or the
+             * page is in an iframe carrying no `clipboard-write` permission. So the
+             * family does the part it still can: it selects the value, which the
+             * reader can see and copy with the keyboard, and says so.
+             */
+            selected = selectValue(this.value()?.nativeElement);
+            getLiveAnnouncer().announce(this.list.t('copyBlocked'));
+        }
+        this.copied$.emit({ copied, reason, selected, source: event, value: text });
+    }
+    takeReason() {
+        const reason = this.keyed ? 'keyboard' : 'pointer';
+        this.keyed = false;
+        return reason;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDescriptionListDescription, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlDescriptionListDescription, isStandalone: true, selector: "dd[slDescriptionListDescription]", inputs: { clamp: { classPropertyName: "clamp", publicName: "clamp", isSignal: true, isRequired: false, transformFunction: null }, copy: { classPropertyName: "copy", publicName: "copy", isSignal: true, isRequired: false, transformFunction: null }, copyValue: { classPropertyName: "copyValue", publicName: "copyValue", isSignal: true, isRequired: false, transformFunction: null }, empty: { classPropertyName: "empty", publicName: "empty", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, revealedValue: { classPropertyName: "revealedValue", publicName: "revealed", isSignal: true, isRequired: false, transformFunction: null }, defaultRevealed: { classPropertyName: "defaultRevealed", publicName: "defaultRevealed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { revealedChange: "revealedChange", copied$: "copied" }, host: { attributes: { "data-part": "description" }, properties: { "attr.data-clamp": "clampValue() > 0 ? \"\" : null", "attr.data-revealed": "clampValue() > 0 && revealed() ? \"\" : null", "style.--slotted-description-list-clamp": "clampValue() > 0 ? clampValue() : null" } }, viewQueries: [{ propertyName: "value", first: true, predicate: ["value"], descendants: true, isSignal: true }], exportAs: ["slDescriptionListDescription"], ngImport: i0, template: `
+    <span #value data-part="value">
+      <ng-content></ng-content>
+      @if (empty()) {
+        @if (placeholder()) {
+          <span data-part="placeholder">{{ placeholder() }}</span>
+        } @else {
+          <span aria-hidden="true" data-part="placeholder">{{ emptyMark }}</span>
+          <span data-ui="visually-hidden">{{ placeholderText() }}</span>
+        }
+      }
+    </span>
+    @if (copy()) {
+      <button
+        [attr.aria-label]="list.t('copy')"
+        [attr.data-complete]="copied() ? '' : null"
+        data-part="copy"
+        type="button"
+        (click)="onCopy($event)"
+        (keydown)="onKeydown($event)"
+      >
+        <!-- A finished copy changes its mark as well as its colour. -->
+        <span slIcon><svg slGlyph [name]="copied() ? 'check' : 'copy'"></svg></span>
+      </button>
+    }
+    @if (clampValue() > 0 && overflows()) {
+      <button
+        [attr.aria-expanded]="revealed()"
+        data-part="toggle"
+        type="button"
+        (click)="onToggle($event)"
+        (keydown)="onKeydown($event)"
+      >
+        {{ revealed() ? list.t('collapse') : list.t('reveal') }}
+        <span slIcon><svg slGlyph name="chevron-down"></svg></span>
+      </button>
+    }
+  `, isInline: true, styles: ["@layer slotted.components{[data-ui=description-list]{container-name:slotted-description-list;container-type:inline-size;display:block}[data-ui=description-list] [data-part=list]{--_ink: var(--slotted-description-list-color, var(--slotted-text, CanvasText));--_term-ink: var(--slotted-description-list-term-color, var(--slotted-text-muted, GrayText));--_hint-ink: var(--slotted-description-list-hint-color, var(--slotted-text-muted, GrayText));--_rule: var(--slotted-description-list-rule-color, var(--slotted-border-subtle, ButtonBorder));--_term-surface: var( --slotted-description-list-term-surface, var(--slotted-surface-sunken, Canvas) );--_surface: var(--slotted-description-list-surface, var(--slotted-surface, Canvas));--_placeholder-ink: var( --slotted-description-list-placeholder-color, var(--slotted-text-muted, GrayText) );--_control-ink: var( --slotted-description-list-control-color, var(--slotted-text-muted, GrayText) );--_control-ink-hover: var( --slotted-description-list-control-color-hover, var(--slotted-text, CanvasText) );--_control-ink-done: var( --slotted-description-list-control-color-complete, var(--slotted-tone-success-text, CanvasText) );--_link-ink: var( --slotted-description-list-toggle-color, var(--slotted-tone-accent-text, LinkText) );--_term-width: var(--slotted-description-list-term-width, 14rem);--_pair-gap: var(--slotted-description-list-column-gap, var(--slotted-control-gap-md, 8px));--_group-gap: var( --slotted-description-list-group-gap, calc(var(--slotted-control-gap-md, 8px) * 3) );--_row-gap: var( --slotted-description-list-row-gap, calc(var(--slotted-control-gap-md, 8px) + var(--slotted-space-2, .25rem)) );--_stack-gap: var(--slotted-description-list-stack-gap, var(--slotted-space-3, .375rem));--_pad-block: var( --slotted-description-list-cell-padding-block, var(--slotted-control-gap-md, 8px) );--_pad-inline: var( --slotted-description-list-cell-padding-inline, var(--slotted-control-padding-inline-md, 13px) );--_glyph: var(--slotted-description-list-glyph-size, var(--slotted-control-icon-size-md, 16px));--_hit: calc((var(--slotted-target-min, 24px) - var(--_glyph)) / 2);--_pair: fit-content(var(--_term-width)) minmax(0, 1fr);--_cols: var(--_pair);--_span-1: 2;--_span-2: 4;--_span-3: 6;--_item-cols: subgrid;--_item-col-gap: var(--_pair-gap);--_term-col: 1;--_term-row: auto;--_desc-col: 2 / -1;--_desc-row: auto;--_action-col: -2 / -1;--_action-row: auto;color:var(--_ink);column-gap:var(--_group-gap);display:grid;font-family:var( --slotted-description-list-font-family, var(--slotted-font-family-sans, inherit) );font-size:var(--slotted-description-list-font-size, var(--slotted-control-font-size-md, 13px));grid-template-columns:var(--_cols);line-height:var(--slotted-description-list-line-height, var(--slotted-line-height-md, 1.5));margin:0}[data-ui=description-list] [data-part=list]:has([data-part=action]){--_pair: fit-content(var(--_term-width)) minmax(0, 1fr) auto;--_span-1: 3;--_span-2: 6;--_span-3: 9;--_desc-col: 2 / -2}[data-ui=description-list][data-columns=\"2\"] [data-part=list]{--_cols: repeat(2, var(--_pair))}[data-ui=description-list][data-columns=\"3\"] [data-part=list]{--_cols: repeat(3, var(--_pair))}[data-ui=description-list][data-layout=stack] [data-part=list]{--_pair: minmax(0, 1fr);--_term-floor: 0px;--_span-1: 1;--_span-2: 2;--_span-3: 3;--_item-cols: minmax(0, 1fr);--_item-col-gap: var(--_pair-gap);--_term-col: 1;--_desc-col: 1 / -1;--_desc-row: 2;--_action-col: -1 / -2;--_action-row: 1}[data-ui=description-list][data-layout=stack] [data-part=list]:has([data-part=action]){--_item-cols: minmax(0, 1fr) auto;--_desc-col: 1 / -1}[data-ui=description-list] [data-part=item]{column-gap:var(--_item-col-gap);display:grid;grid-column:span var(--_span-1);grid-template-columns:var(--_item-cols);min-inline-size:0;row-gap:var(--_stack-gap)}[data-ui=description-list] [data-part=item][data-span=\"2\"]{grid-column:span var(--_span-2)}[data-ui=description-list] [data-part=item][data-span=\"3\"]{grid-column:span var(--_span-3)}[data-ui=description-list] [data-part=term]{color:var(--_term-ink);font-weight:var( --slotted-description-list-term-weight, var(--slotted-font-weight-medium, 500) );grid-column:var(--_term-col);grid-row:var(--_term-row);min-inline-size:var(--_term-floor, 0px);overflow-wrap:break-word}[data-ui=description-list] [data-part=list]:has([data-part=hint]){--_term-floor: var(--slotted-description-list-term-min, 12rem)}[data-ui=description-list] [data-part=hint]{color:var(--_hint-ink);contain:inline-size;display:block;font-size:var(--slotted-description-list-hint-font-size, var(--slotted-font-size-xs, .75rem));font-weight:var(--slotted-font-weight-regular, 400);line-height:var(--slotted-line-height-xs, 1.4);margin-block-start:var(--slotted-space-1, .125rem)}[data-ui=description-list] [data-part=description]:not([data-clamp]){display:block}[data-ui=description-list] [data-part=description]:not([data-clamp]) [data-part=value]{display:inline}[data-ui=description-list] [data-part=description]:not([data-clamp]) [data-part=copy]{margin-inline-start:var(--_pair-gap);vertical-align:text-bottom}[data-ui=description-list] [data-part=description]{align-items:baseline;column-gap:max(var(--_pair-gap),var(--slotted-space-4, .5rem));display:grid;grid-column:var(--_desc-col);grid-row:var(--_desc-row);grid-template-columns:minmax(0,max-content) auto;justify-content:start;margin:0;min-inline-size:0;row-gap:var(--slotted-space-2, .25rem)}[data-ui=description-list] [data-part=value]{grid-column:1;min-inline-size:0;overflow-wrap:break-word}[data-ui=description-list] [data-part=description][data-clamp] [data-part=value]{-webkit-box-orient:vertical;-webkit-line-clamp:var(--slotted-description-list-clamp, 2);display:-webkit-box;overflow:hidden}[data-ui=description-list] [data-part=description][data-clamp][data-revealed] [data-part=value]{-webkit-line-clamp:none;display:block;overflow:visible}[data-ui=description-list] [data-part=placeholder]{color:var(--_placeholder-ink)}[data-ui=description-list] :is([data-part=copy],[data-part=toggle]){appearance:none;background:none;border:0;border-radius:var(--slotted-description-list-radius, var(--slotted-control-radius, 4px));cursor:pointer;font:inherit;transition:color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=description-list] :is([data-part=copy],[data-part=toggle]):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=description-list] [data-part=copy]{--slotted-icon-size: var(--_glyph);align-items:center;block-size:var(--slotted-target-min, 24px);color:var(--_control-ink);display:inline-flex;grid-column:2;inline-size:var(--slotted-target-min, 24px);justify-content:center;margin-block:calc(var(--_hit) * -1);padding:var(--_hit)}[data-ui=description-list] [data-part=copy]:enabled:not([data-complete]):hover{background-color:var( --slotted-description-list-control-surface-hover, var(--slotted-tone-secondary-subtle-hover, ButtonFace) );color:var(--_control-ink-hover)}[data-ui=description-list] [data-part=copy]:enabled:not([data-complete]):active{background-color:var( --slotted-description-list-control-surface-active, var(--slotted-tone-secondary-subtle-active, ButtonFace) )}[data-ui=description-list] [data-part=copy][data-complete]{color:var(--_control-ink-done)}@media(pointer:coarse){[data-ui=description-list] [data-part=copy]{position:relative}[data-ui=description-list] [data-part=copy]:before{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-comfortable, 44px)) / 2));position:absolute}}[data-ui=description-list] [data-part=toggle]{--slotted-icon-size: var(--_glyph);align-items:center;color:var(--_link-ink);column-gap:var(--slotted-space-2, .25rem);display:inline-flex;grid-column:1 / -1;justify-self:start;min-block-size:var(--slotted-target-min, 24px);padding-inline:0}[data-ui=description-list] [data-part=toggle]>[data-ui=icon]{rotate:0deg;transition:rotate var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=description-list] [data-revealed] [data-part=toggle]>[data-ui=icon]{rotate:180deg}[data-ui=description-list] [data-part=toggle]:enabled:hover{text-decoration-line:underline;text-underline-offset:var(--slotted-description-list-underline-offset, .2em)}[data-ui=description-list] [data-part=toggle]:enabled:active{color:var(--_control-ink-hover)}[data-ui=description-list] [data-part=action]{align-self:start;grid-column:var(--_action-col);grid-row:var(--_action-row);justify-self:end;margin:0;white-space:nowrap}[data-ui=description-list][data-variant=plain] [data-part=list]{row-gap:var(--_row-gap)}[data-ui=description-list][data-variant=ruled] [data-part=list]{row-gap:0}[data-ui=description-list][data-variant=ruled] [data-part=item]{border-block-end:var(--slotted-border-width-thin, 1px) solid var(--_rule);padding-block:var(--_pad-block)}[data-ui=description-list][data-variant=framed] [data-part=list]{background-color:var(--_surface);border:var(--slotted-border-width-thin, 1px) solid var(--_rule);border-radius:var(--slotted-description-list-frame-radius, var(--slotted-radius-md, 6px));column-gap:0;overflow:clip;row-gap:0}[data-ui=description-list][data-variant=framed] [data-part=item]{border-block-start:var(--slotted-border-width-thin, 1px) solid var(--_rule);column-gap:0}[data-ui=description-list][data-variant=framed][data-columns=\"1\"] [data-part=item]:first-child,[data-ui=description-list][data-variant=framed][data-columns=\"2\"] [data-part=item]:nth-child(-n+2),[data-ui=description-list][data-variant=framed][data-columns=\"3\"] [data-part=item]:nth-child(-n+3){border-block-start-width:0}[data-ui=description-list][data-variant=framed] :is([data-part=term],[data-part=description],[data-part=action]){padding-block:var(--_pad-block);padding-inline:var(--_pad-inline)}[data-ui=description-list][data-variant=framed] [data-part=term]{background-color:var(--_term-surface);border-inline-end:var(--slotted-border-width-thin, 1px) solid var(--_rule)}[data-ui=description-list][data-variant=framed][data-layout=stack] [data-part=term]{border-inline-end:0}@container slotted-description-list (max-width: 48rem){[data-ui=description-list][data-columns=\"3\"] [data-part=list]{--_cols: repeat(2, var(--_pair));--_span-3: var(--_span-2)}}@container slotted-description-list (max-width: 34rem){[data-ui=description-list][data-columns=\"2\"] [data-part=list],[data-ui=description-list][data-columns=\"3\"] [data-part=list]{--_cols: var(--_pair);--_span-2: var(--_span-1);--_span-3: var(--_span-1)}[data-ui=description-list][data-layout=row] [data-part=list]:has([data-part=hint]){--_pair: minmax(0, 1fr);--_term-floor: 0px;--_span-1: 1;--_span-2: 1;--_span-3: 1;--_item-cols: minmax(0, 1fr);--_desc-col: 1 / -1;--_desc-row: 2;--_action-col: -1 / -2;--_action-row: 1}[data-ui=description-list][data-layout=row] [data-part=list]:has([data-part=hint]):has([data-part=action]){--_item-cols: minmax(0, 1fr) auto}[data-ui=description-list][data-variant=framed][data-layout=row] [data-part=list]:has([data-part=hint]) [data-part=term]{border-inline-end:0}}@container slotted-description-list (max-width: 26rem){[data-ui=description-list][data-layout=row] [data-part=list]{--_pair: minmax(0, 1fr);--_term-floor: 0px;--_span-1: 1;--_span-2: 1;--_span-3: 1;--_item-cols: minmax(0, 1fr);--_desc-col: 1 / -1;--_desc-row: 2;--_action-col: -1 / -2;--_action-row: 1}[data-ui=description-list][data-layout=row] [data-part=list]:has([data-part=action]){--_item-cols: minmax(0, 1fr) auto;--_desc-col: 1 / -1}[data-ui=description-list][data-variant=framed][data-layout=row] [data-part=term]{border-inline-end:0}}}\n", "@layer slotted.components{[data-ui=visually-hidden]:not([data-focusable]:focus-within){block-size:1px;border:0;clip-path:inset(50%);inline-size:1px;inset-block-start:0;inset-inline-start:0;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap}}\n"], dependencies: [{ kind: "component", type: SlGlyph, selector: "svg[slGlyph]", inputs: ["name", "solid"] }, { kind: "component", type: SlIcon, selector: "[slIcon]", inputs: ["directional", "label", "size", "tone"], exportAs: ["slIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDescriptionListDescription, decorators: [{
+            type: Component,
+            args: [{ selector: 'dd[slDescriptionListDescription]', standalone: true, imports: [SlGlyph, SlIcon], template: `
+    <span #value data-part="value">
+      <ng-content></ng-content>
+      @if (empty()) {
+        @if (placeholder()) {
+          <span data-part="placeholder">{{ placeholder() }}</span>
+        } @else {
+          <span aria-hidden="true" data-part="placeholder">{{ emptyMark }}</span>
+          <span data-ui="visually-hidden">{{ placeholderText() }}</span>
+        }
+      }
+    </span>
+    @if (copy()) {
+      <button
+        [attr.aria-label]="list.t('copy')"
+        [attr.data-complete]="copied() ? '' : null"
+        data-part="copy"
+        type="button"
+        (click)="onCopy($event)"
+        (keydown)="onKeydown($event)"
+      >
+        <!-- A finished copy changes its mark as well as its colour. -->
+        <span slIcon><svg slGlyph [name]="copied() ? 'check' : 'copy'"></svg></span>
+      </button>
+    }
+    @if (clampValue() > 0 && overflows()) {
+      <button
+        [attr.aria-expanded]="revealed()"
+        data-part="toggle"
+        type="button"
+        (click)="onToggle($event)"
+        (keydown)="onKeydown($event)"
+      >
+        {{ revealed() ? list.t('collapse') : list.t('reveal') }}
+        <span slIcon><svg slGlyph name="chevron-down"></svg></span>
+      </button>
+    }
+  `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, exportAs: 'slDescriptionListDescription', host: {
+                        'data-part': 'description',
+                        '[attr.data-clamp]': 'clampValue() > 0 ? "" : null',
+                        '[attr.data-revealed]': 'clampValue() > 0 && revealed() ? "" : null',
+                        '[style.--slotted-description-list-clamp]': 'clampValue() > 0 ? clampValue() : null',
+                    }, styles: ["@layer slotted.components{[data-ui=description-list]{container-name:slotted-description-list;container-type:inline-size;display:block}[data-ui=description-list] [data-part=list]{--_ink: var(--slotted-description-list-color, var(--slotted-text, CanvasText));--_term-ink: var(--slotted-description-list-term-color, var(--slotted-text-muted, GrayText));--_hint-ink: var(--slotted-description-list-hint-color, var(--slotted-text-muted, GrayText));--_rule: var(--slotted-description-list-rule-color, var(--slotted-border-subtle, ButtonBorder));--_term-surface: var( --slotted-description-list-term-surface, var(--slotted-surface-sunken, Canvas) );--_surface: var(--slotted-description-list-surface, var(--slotted-surface, Canvas));--_placeholder-ink: var( --slotted-description-list-placeholder-color, var(--slotted-text-muted, GrayText) );--_control-ink: var( --slotted-description-list-control-color, var(--slotted-text-muted, GrayText) );--_control-ink-hover: var( --slotted-description-list-control-color-hover, var(--slotted-text, CanvasText) );--_control-ink-done: var( --slotted-description-list-control-color-complete, var(--slotted-tone-success-text, CanvasText) );--_link-ink: var( --slotted-description-list-toggle-color, var(--slotted-tone-accent-text, LinkText) );--_term-width: var(--slotted-description-list-term-width, 14rem);--_pair-gap: var(--slotted-description-list-column-gap, var(--slotted-control-gap-md, 8px));--_group-gap: var( --slotted-description-list-group-gap, calc(var(--slotted-control-gap-md, 8px) * 3) );--_row-gap: var( --slotted-description-list-row-gap, calc(var(--slotted-control-gap-md, 8px) + var(--slotted-space-2, .25rem)) );--_stack-gap: var(--slotted-description-list-stack-gap, var(--slotted-space-3, .375rem));--_pad-block: var( --slotted-description-list-cell-padding-block, var(--slotted-control-gap-md, 8px) );--_pad-inline: var( --slotted-description-list-cell-padding-inline, var(--slotted-control-padding-inline-md, 13px) );--_glyph: var(--slotted-description-list-glyph-size, var(--slotted-control-icon-size-md, 16px));--_hit: calc((var(--slotted-target-min, 24px) - var(--_glyph)) / 2);--_pair: fit-content(var(--_term-width)) minmax(0, 1fr);--_cols: var(--_pair);--_span-1: 2;--_span-2: 4;--_span-3: 6;--_item-cols: subgrid;--_item-col-gap: var(--_pair-gap);--_term-col: 1;--_term-row: auto;--_desc-col: 2 / -1;--_desc-row: auto;--_action-col: -2 / -1;--_action-row: auto;color:var(--_ink);column-gap:var(--_group-gap);display:grid;font-family:var( --slotted-description-list-font-family, var(--slotted-font-family-sans, inherit) );font-size:var(--slotted-description-list-font-size, var(--slotted-control-font-size-md, 13px));grid-template-columns:var(--_cols);line-height:var(--slotted-description-list-line-height, var(--slotted-line-height-md, 1.5));margin:0}[data-ui=description-list] [data-part=list]:has([data-part=action]){--_pair: fit-content(var(--_term-width)) minmax(0, 1fr) auto;--_span-1: 3;--_span-2: 6;--_span-3: 9;--_desc-col: 2 / -2}[data-ui=description-list][data-columns=\"2\"] [data-part=list]{--_cols: repeat(2, var(--_pair))}[data-ui=description-list][data-columns=\"3\"] [data-part=list]{--_cols: repeat(3, var(--_pair))}[data-ui=description-list][data-layout=stack] [data-part=list]{--_pair: minmax(0, 1fr);--_term-floor: 0px;--_span-1: 1;--_span-2: 2;--_span-3: 3;--_item-cols: minmax(0, 1fr);--_item-col-gap: var(--_pair-gap);--_term-col: 1;--_desc-col: 1 / -1;--_desc-row: 2;--_action-col: -1 / -2;--_action-row: 1}[data-ui=description-list][data-layout=stack] [data-part=list]:has([data-part=action]){--_item-cols: minmax(0, 1fr) auto;--_desc-col: 1 / -1}[data-ui=description-list] [data-part=item]{column-gap:var(--_item-col-gap);display:grid;grid-column:span var(--_span-1);grid-template-columns:var(--_item-cols);min-inline-size:0;row-gap:var(--_stack-gap)}[data-ui=description-list] [data-part=item][data-span=\"2\"]{grid-column:span var(--_span-2)}[data-ui=description-list] [data-part=item][data-span=\"3\"]{grid-column:span var(--_span-3)}[data-ui=description-list] [data-part=term]{color:var(--_term-ink);font-weight:var( --slotted-description-list-term-weight, var(--slotted-font-weight-medium, 500) );grid-column:var(--_term-col);grid-row:var(--_term-row);min-inline-size:var(--_term-floor, 0px);overflow-wrap:break-word}[data-ui=description-list] [data-part=list]:has([data-part=hint]){--_term-floor: var(--slotted-description-list-term-min, 12rem)}[data-ui=description-list] [data-part=hint]{color:var(--_hint-ink);contain:inline-size;display:block;font-size:var(--slotted-description-list-hint-font-size, var(--slotted-font-size-xs, .75rem));font-weight:var(--slotted-font-weight-regular, 400);line-height:var(--slotted-line-height-xs, 1.4);margin-block-start:var(--slotted-space-1, .125rem)}[data-ui=description-list] [data-part=description]:not([data-clamp]){display:block}[data-ui=description-list] [data-part=description]:not([data-clamp]) [data-part=value]{display:inline}[data-ui=description-list] [data-part=description]:not([data-clamp]) [data-part=copy]{margin-inline-start:var(--_pair-gap);vertical-align:text-bottom}[data-ui=description-list] [data-part=description]{align-items:baseline;column-gap:max(var(--_pair-gap),var(--slotted-space-4, .5rem));display:grid;grid-column:var(--_desc-col);grid-row:var(--_desc-row);grid-template-columns:minmax(0,max-content) auto;justify-content:start;margin:0;min-inline-size:0;row-gap:var(--slotted-space-2, .25rem)}[data-ui=description-list] [data-part=value]{grid-column:1;min-inline-size:0;overflow-wrap:break-word}[data-ui=description-list] [data-part=description][data-clamp] [data-part=value]{-webkit-box-orient:vertical;-webkit-line-clamp:var(--slotted-description-list-clamp, 2);display:-webkit-box;overflow:hidden}[data-ui=description-list] [data-part=description][data-clamp][data-revealed] [data-part=value]{-webkit-line-clamp:none;display:block;overflow:visible}[data-ui=description-list] [data-part=placeholder]{color:var(--_placeholder-ink)}[data-ui=description-list] :is([data-part=copy],[data-part=toggle]){appearance:none;background:none;border:0;border-radius:var(--slotted-description-list-radius, var(--slotted-control-radius, 4px));cursor:pointer;font:inherit;transition:color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=description-list] :is([data-part=copy],[data-part=toggle]):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=description-list] [data-part=copy]{--slotted-icon-size: var(--_glyph);align-items:center;block-size:var(--slotted-target-min, 24px);color:var(--_control-ink);display:inline-flex;grid-column:2;inline-size:var(--slotted-target-min, 24px);justify-content:center;margin-block:calc(var(--_hit) * -1);padding:var(--_hit)}[data-ui=description-list] [data-part=copy]:enabled:not([data-complete]):hover{background-color:var( --slotted-description-list-control-surface-hover, var(--slotted-tone-secondary-subtle-hover, ButtonFace) );color:var(--_control-ink-hover)}[data-ui=description-list] [data-part=copy]:enabled:not([data-complete]):active{background-color:var( --slotted-description-list-control-surface-active, var(--slotted-tone-secondary-subtle-active, ButtonFace) )}[data-ui=description-list] [data-part=copy][data-complete]{color:var(--_control-ink-done)}@media(pointer:coarse){[data-ui=description-list] [data-part=copy]{position:relative}[data-ui=description-list] [data-part=copy]:before{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-comfortable, 44px)) / 2));position:absolute}}[data-ui=description-list] [data-part=toggle]{--slotted-icon-size: var(--_glyph);align-items:center;color:var(--_link-ink);column-gap:var(--slotted-space-2, .25rem);display:inline-flex;grid-column:1 / -1;justify-self:start;min-block-size:var(--slotted-target-min, 24px);padding-inline:0}[data-ui=description-list] [data-part=toggle]>[data-ui=icon]{rotate:0deg;transition:rotate var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=description-list] [data-revealed] [data-part=toggle]>[data-ui=icon]{rotate:180deg}[data-ui=description-list] [data-part=toggle]:enabled:hover{text-decoration-line:underline;text-underline-offset:var(--slotted-description-list-underline-offset, .2em)}[data-ui=description-list] [data-part=toggle]:enabled:active{color:var(--_control-ink-hover)}[data-ui=description-list] [data-part=action]{align-self:start;grid-column:var(--_action-col);grid-row:var(--_action-row);justify-self:end;margin:0;white-space:nowrap}[data-ui=description-list][data-variant=plain] [data-part=list]{row-gap:var(--_row-gap)}[data-ui=description-list][data-variant=ruled] [data-part=list]{row-gap:0}[data-ui=description-list][data-variant=ruled] [data-part=item]{border-block-end:var(--slotted-border-width-thin, 1px) solid var(--_rule);padding-block:var(--_pad-block)}[data-ui=description-list][data-variant=framed] [data-part=list]{background-color:var(--_surface);border:var(--slotted-border-width-thin, 1px) solid var(--_rule);border-radius:var(--slotted-description-list-frame-radius, var(--slotted-radius-md, 6px));column-gap:0;overflow:clip;row-gap:0}[data-ui=description-list][data-variant=framed] [data-part=item]{border-block-start:var(--slotted-border-width-thin, 1px) solid var(--_rule);column-gap:0}[data-ui=description-list][data-variant=framed][data-columns=\"1\"] [data-part=item]:first-child,[data-ui=description-list][data-variant=framed][data-columns=\"2\"] [data-part=item]:nth-child(-n+2),[data-ui=description-list][data-variant=framed][data-columns=\"3\"] [data-part=item]:nth-child(-n+3){border-block-start-width:0}[data-ui=description-list][data-variant=framed] :is([data-part=term],[data-part=description],[data-part=action]){padding-block:var(--_pad-block);padding-inline:var(--_pad-inline)}[data-ui=description-list][data-variant=framed] [data-part=term]{background-color:var(--_term-surface);border-inline-end:var(--slotted-border-width-thin, 1px) solid var(--_rule)}[data-ui=description-list][data-variant=framed][data-layout=stack] [data-part=term]{border-inline-end:0}@container slotted-description-list (max-width: 48rem){[data-ui=description-list][data-columns=\"3\"] [data-part=list]{--_cols: repeat(2, var(--_pair));--_span-3: var(--_span-2)}}@container slotted-description-list (max-width: 34rem){[data-ui=description-list][data-columns=\"2\"] [data-part=list],[data-ui=description-list][data-columns=\"3\"] [data-part=list]{--_cols: var(--_pair);--_span-2: var(--_span-1);--_span-3: var(--_span-1)}[data-ui=description-list][data-layout=row] [data-part=list]:has([data-part=hint]){--_pair: minmax(0, 1fr);--_term-floor: 0px;--_span-1: 1;--_span-2: 1;--_span-3: 1;--_item-cols: minmax(0, 1fr);--_desc-col: 1 / -1;--_desc-row: 2;--_action-col: -1 / -2;--_action-row: 1}[data-ui=description-list][data-layout=row] [data-part=list]:has([data-part=hint]):has([data-part=action]){--_item-cols: minmax(0, 1fr) auto}[data-ui=description-list][data-variant=framed][data-layout=row] [data-part=list]:has([data-part=hint]) [data-part=term]{border-inline-end:0}}@container slotted-description-list (max-width: 26rem){[data-ui=description-list][data-layout=row] [data-part=list]{--_pair: minmax(0, 1fr);--_term-floor: 0px;--_span-1: 1;--_span-2: 1;--_span-3: 1;--_item-cols: minmax(0, 1fr);--_desc-col: 1 / -1;--_desc-row: 2;--_action-col: -1 / -2;--_action-row: 1}[data-ui=description-list][data-layout=row] [data-part=list]:has([data-part=action]){--_item-cols: minmax(0, 1fr) auto;--_desc-col: 1 / -1}[data-ui=description-list][data-variant=framed][data-layout=row] [data-part=term]{border-inline-end:0}}}\n", "@layer slotted.components{[data-ui=visually-hidden]:not([data-focusable]:focus-within){block-size:1px;border:0;clip-path:inset(50%);inline-size:1px;inset-block-start:0;inset-inline-start:0;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { clamp: [{ type: i0.Input, args: [{ isSignal: true, alias: "clamp", required: false }] }], copy: [{ type: i0.Input, args: [{ isSignal: true, alias: "copy", required: false }] }], copyValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "copyValue", required: false }] }], empty: [{ type: i0.Input, args: [{ isSignal: true, alias: "empty", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], revealedValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "revealed", required: false }] }], defaultRevealed: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultRevealed", required: false }] }], revealedChange: [{ type: i0.Output, args: ["revealedChange"] }], copied$: [{ type: i0.Output, args: ["copied"] }], value: [{ type: i0.ViewChild, args: ['value', { isSignal: true }] }] } });
+/**
+ * The row's own action, in a second `dd` of the same group — which is what a
+ * `dt` followed by more than one `dd` is for, and what GOV.UK's summary list
+ * does.
+ *
+ * It is named by its own term through `aria-describedby`, so a reader who
+ * reaches "Change" out of context hears which row it changes. GOV.UK repeats
+ * the term as visually hidden text inside every action, which a template system
+ * has to do; a reference says it once and cannot drift. A static
+ * `aria-describedby` the consumer wrote is composed with rather than replaced.
+ */
+class SlDescriptionListAction {
+    item = inject(SlDescriptionListItem, { optional: true });
+    own = inject(new HostAttributeToken('aria-describedby'), { optional: true });
+    describedBy = [this.own, this.item?.termId].filter(Boolean).join(' ') || null;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDescriptionListAction, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlDescriptionListAction, isStandalone: true, selector: "dd[slDescriptionListAction]", host: { attributes: { "data-part": "action" }, properties: { "attr.aria-describedby": "describedBy" } }, exportAs: ["slDescriptionListAction"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDescriptionListAction, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'dd[slDescriptionListAction]',
+                    standalone: true,
+                    exportAs: 'slDescriptionListAction',
+                    host: {
+                        'data-part': 'action',
+                        '[attr.aria-describedby]': 'describedBy',
+                    },
+                }]
+        }] });
+/**
+ * Absence has to survive the transform: `numberAttribute` maps an unset input
+ * to `NaN`, and a family that read that would stop deferring to the provider.
+ */
+function optionalColumns(value) {
+    if (value === undefined || value === null || value === '')
+        return undefined;
+    const parsed = numberAttribute(value);
+    if (!Number.isFinite(parsed))
+        return undefined;
+    return Math.min(Math.max(Math.trunc(parsed), 1), 3);
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { COPIED_FOR, DESCRIPTION_LIST_DEFAULTS_TOKEN, DESCRIPTION_LIST_DEFAULT_COLUMNS, DESCRIPTION_LIST_DEFAULT_LAYOUT, DESCRIPTION_LIST_DEFAULT_VARIANT, SlDescriptionList, SlDescriptionListAction, SlDescriptionListDescription, SlDescriptionListHint, SlDescriptionListIdFactory, SlDescriptionListItem, SlDescriptionListTerm, copyToClipboard, injectDescriptionListDefaults, overflowsClamp, provideDescriptionListDefaults, selectValue, spanWithin };
+//# sourceMappingURL=slotted-angular-description-list.mjs.map