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

package/fesm2022/slotted-angular-text-field.mjs

@@ -0,0 +1,674 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, input, booleanAttribute, output, ElementRef, signal, contentChild, computed, DestroyRef, ViewEncapsulation, ChangeDetectionStrategy, Component, numberAttribute, Injector, HostAttributeToken, effect, afterNextRender, forwardRef, Directive } from '@angular/core';
+import { SlField } from '@slotted/angular/field';
+import { injectMessages } from '@slotted/angular/i18n';
+import { SlGlyph, SlIcon } from '@slotted/angular/icon';
+import { writeToClipboard } from '@slotted/core/clipboard';
+import { textFieldMessages } from '@slotted/core/i18n';
+import { getLiveAnnouncer } from '@slotted/core/live-announcer';
+import { createControllable } from '@slotted/core/state';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+
+const FALLBACK = {
+    mono: false,
+    size: 'md',
+    variant: 'outline',
+};
+const TEXT_FIELD_DEFAULTS = new InjectionToken('slotted text field defaults', { providedIn: 'root', factory: () => FALLBACK });
+/**
+ * An application decides once what its text fields look like, rather than
+ * repeating the same inputs on every control in a form. A control that states
+ * any of them itself still wins. What the buttons and marks say comes from the
+ * language in force (`provideSlotted`).
+ *
+ * `size` is the one the field outranks: a `size="sm"` field holding an `md`
+ * control is a field and a control disagreeing about one row, so a control
+ * inside a field takes the field's step and this token answers only outside
+ * one.
+ */
+function provideTextFieldDefaults(defaults) {
+    return {
+        provide: TEXT_FIELD_DEFAULTS,
+        useFactory: () => ({ ...FALLBACK, ...defaults }),
+    };
+}
+/** What a text field renders as here, before it states anything of its own. */
+function injectTextFieldDefaults() {
+    return inject(TEXT_FIELD_DEFAULTS);
+}
+/**
+ * What the frame needs to know about the control inside it, and what the
+ * control needs the frame to call.
+ *
+ * It is an abstract class rather than an import so the two directives can
+ * depend on each other without a cycle — the shape `SlFieldDefaultsSource`
+ * already has in `field`. The input provides itself as this, and the frame
+ * queries for it.
+ */
+class SlTextFieldControl {
+}
+
+/** How long the check stays in place of the copy mark: `code-block`'s number. */
+const COPIED_FOR = 2000;
+/**
+ * The frame: one line of text, and everything that sits inside its border.
+ *
+ * **It is not the control.** The element carrying `data-ui` is the consumer's
+ * own box with no role; the `input` inside it holds the value, the identifier
+ * and every native attribute. WAI-ARIA settles the shape: a `textbox` may hold
+ * only non-interactive, presentational children, so the clear and reveal
+ * buttons are the control's siblings rather than its children.
+ *
+ * **Angular pays one element for that frame, and React pays none.** React can
+ * render a wrapper from inside a component; an Angular directive cannot create
+ * a box around its own host. `slTextFieldInput` injects this class, so a
+ * control written without the frame is a compile-time failure rather than a
+ * silent one — the property `docs/history/designs/2026-08-31-field-aware-controls-design.md`
+ * asks of every control this library ships.
+ */
+class SlTextField {
+    /** Defaults to the field, then to the token, then to `md`. */
+    size = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Defaults to the token, then to `outline`. */
+    variant = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** Sets the value in the monospaced family, for identifiers, hashes and keys. */
+    mono = input(undefined, { ...(ngDevMode ? { debugName: "mono" } : /* istanbul ignore next */ {}), transform: (value) => (value === undefined ? undefined : booleanAttribute(value)) });
+    /** Draws a button that empties the value and returns focus to the control. */
+    clearable = input(false, { ...(ngDevMode ? { debugName: "clearable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Draws a toggle that turns a password from dots into characters. */
+    revealable = input(false, { ...(ngDevMode ? { debugName: "revealable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Draws a button that writes the value to the clipboard, shows a check for
+     * two seconds and announces the outcome. It stays for a read-only value and
+     * leaves while the value is empty or disabled.
+     */
+    copyable = input(false, { ...(ngDevMode ? { debugName: "copyable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Words laid over the catalog of the language in force, key by key: the
+     * names of the clear, copy and reveal buttons (`reveal` does not change with
+     * the state), and what a copy and the Caps Lock mark announce.
+     */
+    messages = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []));
+    /**
+     * Draws the shared ring before the buttons while something about the value
+     * is being checked, and marks the control `aria-busy`. The value stays
+     * editable. Stating it at all — `false` included — keeps the ring's place,
+     * so it can leave as well as arrive.
+     */
+    loading = input(undefined, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: (value) => (value === undefined ? undefined : booleanAttribute(value)) });
+    /** Once the copy button has asked the clipboard, with the outcome. */
+    valueCopy = output();
+    defaults = injectTextFieldDefaults();
+    element = inject(ElementRef).nativeElement;
+    copied = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "copied" }] : /* istanbul ignore next */ []));
+    copiedTimer;
+    field = inject(SlField, { optional: true });
+    /**
+     * The control inside. It provides itself as `SlTextFieldControl`, so the
+     * frame can read whether the value is empty and whether it is a password
+     * without either directive importing the other.
+     */
+    control = contentChild(SlTextFieldControl, { ...(ngDevMode ? { debugName: "control" } : /* istanbul ignore next */ {}), descendants: true });
+    resolvedSize = computed(() => this.size() ?? this.field?.resolvedSize() ?? this.defaults.size, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedSize" }] : /* istanbul ignore next */ []));
+    resolvedVariant = computed(() => this.variant() ?? this.defaults.variant, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedVariant" }] : /* istanbul ignore next */ []));
+    resolvedMono = computed(() => this.mono() ?? this.defaults.mono, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedMono" }] : /* istanbul ignore next */ []));
+    /** The family's words in the language in force, with this field's `messages` laid over them. */
+    t = injectMessages(textFieldMessages, this.messages);
+    /**
+     * A button that clears an empty control, or a value the reader cannot change,
+     * is a button that lies. Both cases withdraw it rather than disabling it,
+     * because a disabled control in the frame is one more thing to tab past.
+     */
+    showClear = computed(() => {
+        const control = this.control();
+        if (control === undefined || !this.clearable())
+            return false;
+        return (!control.empty() && control.resolvedDisabled() !== true && control.resolvedReadOnly() !== true);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showClear" }] : /* istanbul ignore next */ []));
+    /** A read-only value may still be copied: only an empty or disabled one withdraws it. */
+    showCopy = computed(() => {
+        const control = this.control();
+        return control !== undefined && !control.empty() && control.resolvedDisabled() !== true;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showCopy" }] : /* istanbul ignore next */ []));
+    constructor() {
+        inject(DestroyRef).onDestroy(() => clearTimeout(this.copiedTimer));
+    }
+    async copy(event) {
+        const reason = event.detail === 0 ? 'keyboard' : 'pointer';
+        const value = this.control()?.currentValue() ?? '';
+        const done = (await writeToClipboard(value)) !== 'refused';
+        if (done) {
+            this.copied.set(true);
+            clearTimeout(this.copiedTimer);
+            this.copiedTimer = setTimeout(() => this.copied.set(false), COPIED_FOR);
+        }
+        getLiveAnnouncer(this.element.ownerDocument).announce(done ? this.t('copied') : this.t('copyFailed'));
+        this.valueCopy.emit({ copied: done, reason, source: event, value });
+    }
+    /** A read-only password may still be read: only `disabled` withdraws it. */
+    showReveal = computed(() => {
+        const control = this.control();
+        if (control === undefined || !this.revealable())
+            return false;
+        return control.password() && control.resolvedDisabled() !== true;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showReveal" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTextField, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlTextField, isStandalone: true, selector: "[slTextField]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, mono: { classPropertyName: "mono", publicName: "mono", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, revealable: { classPropertyName: "revealable", publicName: "revealable", isSignal: true, isRequired: false, transformFunction: null }, copyable: { classPropertyName: "copyable", publicName: "copyable", isSignal: true, isRequired: false, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueCopy: "valueCopy" }, host: { attributes: { "data-ui": "text-field", "data-part": "root" }, properties: { "attr.data-size": "resolvedSize()", "attr.data-variant": "resolvedVariant()", "attr.data-mono": "resolvedMono() ? '' : null", "attr.data-disabled": "control()?.resolvedDisabled() === true ? '' : null", "attr.data-invalid": "control()?.resolvedInvalid() === true ? '' : null", "attr.data-readonly": "control()?.resolvedReadOnly() === true ? '' : null", "attr.data-loading": "loading() === true ? '' : null" } }, queries: [{ propertyName: "control", first: true, predicate: SlTextFieldControl, descendants: true, isSignal: true }], exportAs: ["slTextField"], ngImport: i0, template: `<ng-content select="[slTextFieldStart]" />
+    <ng-content />
+    <!-- The ring, the mark and the two buttons below stay rendered for as long
+         as their capability is on, and leave through hidden, so the stylesheet
+         can take them out as well as bring them in. -->
+    @if (loading() !== undefined) {
+      <span data-part="busy" data-ui="spinner" aria-hidden="true" [hidden]="!loading()"></span>
+    }
+    @if (control()?.password()) {
+      <span data-part="caps-lock" aria-hidden="true" [hidden]="!control()!.capsLock()">
+        <span slIcon><svg slGlyph name="caps-lock"></svg></span>
+      </span>
+    }
+    @if (clearable()) {
+      <button
+        data-part="clear"
+        type="button"
+        [hidden]="!showClear()"
+        [attr.aria-label]="t('clear')"
+        (click)="control()!.clear($event)"
+      >
+        <span slIcon><svg slGlyph name="x"></svg></span>
+      </button>
+    }
+    @if (copyable()) {
+      <button
+        data-part="copy"
+        type="button"
+        [hidden]="!showCopy()"
+        [attr.aria-label]="t('copy')"
+        [attr.data-complete]="copied() ? '' : null"
+        (click)="copy($event)"
+      >
+        <!-- Two blocks, so the check is a new element and arrives. -->
+        @if (copied()) {
+          <span slIcon><svg slGlyph name="check"></svg></span>
+        } @else {
+          <span slIcon><svg slGlyph name="copy"></svg></span>
+        }
+      </button>
+    }
+    @if (showReveal()) {
+      <button
+        data-part="reveal"
+        type="button"
+        [attr.aria-label]="t('reveal')"
+        [attr.aria-pressed]="control()!.revealed()"
+        (click)="control()!.toggleReveal($event)"
+      >
+        @if (control()!.revealed()) {
+          <span slIcon><svg slGlyph name="eye-off"></svg></span>
+        } @else {
+          <span slIcon><svg slGlyph name="eye"></svg></span>
+        }
+      </button>
+    }
+    <ng-content select="[slTextFieldEnd]" />`, isInline: true, styles: ["@layer slotted.components{[data-ui=text-field][data-part=root]{--_font-size: var(--slotted-control-font-size-md, 13px);--_height: var(--slotted-control-height-md, 34px);--_padding-inline: var(--slotted-control-padding-inline-md, 13px);--_gap: var(--slotted-control-gap-md, 8px);--_icon-floor: var(--slotted-text-field-icon-size-min, 14px);--_icon-size: max(var(--_icon-floor), var(--slotted-control-icon-size-md, 16px));--_inner-size: var(--slotted-control-inner-size-md, 24px);--_action-size: var( --slotted-text-field-action-size, min(calc(var(--_icon-size) + 2 * var(--slotted-space-2, .25rem)), var(--_inner-size)) );--_inset: max( 0px, calc( (var(--_height) - 2 * var(--slotted-control-border-width, 1px) - var(--_action-size)) / 2 ) );--_action-radius: max( var(--slotted-radius-xs, 2px), calc(var(--slotted-text-field-radius, var(--slotted-control-radius, 4px)) - var(--_inset)) );--_action-transition: background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing), color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);align-items:center;background-color:var(--slotted-text-field-background, var(--slotted-control-surface, Field));border:var(--slotted-control-border-width, 1px) solid var(--slotted-text-field-border-color, var(--slotted-control-border-color, ButtonBorder));border-radius:var(--slotted-text-field-radius, var(--slotted-control-radius, 4px));box-shadow:var(--slotted-text-field-shadow, var(--slotted-control-shadow, none));box-sizing:border-box;color:var(--slotted-text-field-color, var(--slotted-text, CanvasText));display:flex;font-family:var(--slotted-control-font-family, system-ui, sans-serif);font-size:var(--_font-size);gap:var(--_gap);inline-size:100%;min-inline-size:0;min-block-size:var(--_height);padding-inline:var(--_padding-inline);transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),border-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),box-shadow var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=text-field][data-part=root]:has(>:is([data-part=clear],[data-part=copy],[data-part=reveal]):not([hidden]):last-child,>[data-part=end]:last-child>[data-part=action]:last-child){padding-inline-end:var(--_inset)}[data-ui=text-field][data-part=root]:has(>[data-part=start]:first-child>[data-part=action]:first-child){padding-inline-start:var(--_inset)}[data-ui=text-field]>[data-part=input]{background-color:transparent;align-self:stretch;margin-block:calc(var(--slotted-control-border-width, 1px) * -1);border:0;color:inherit;flex:1 1 auto;font:inherit;outline:none;padding:0;min-inline-size:0;text-align:inherit;text-overflow:ellipsis}[data-ui=text-field]>[data-part=input]::placeholder{color:var(--slotted-text-field-placeholder-color, var(--slotted-text-muted, GrayText));text-overflow:ellipsis}[data-ui=text-field]>[data-part=input]::-webkit-search-cancel-button,[data-ui=text-field]>[data-part=input]::-webkit-search-decoration{appearance:none}[data-ui=text-field]>[data-part=input]:autofill{box-shadow:inset 0 0 0 100px var(--slotted-text-field-autofill-background, var(--slotted-tone-accent-surface));-webkit-text-fill-color:var(--slotted-text-field-color, var(--slotted-text, CanvasText))}[data-ui=text-field][data-part=root][data-size=sm]{--_font-size: var(--slotted-control-font-size-sm, 12px);--_height: var(--slotted-control-height-sm, 30px);--_padding-inline: var(--slotted-control-padding-inline-sm, 10px);--_gap: var(--slotted-control-gap-sm, 6px);--_icon-size: max(var(--_icon-floor), var(--slotted-control-icon-size-sm, 14px));--_inner-size: var(--slotted-control-inner-size-sm, 22px)}[data-ui=text-field][data-part=root][data-size=md]{--_font-size: var(--slotted-control-font-size-md, 13px);--_height: var(--slotted-control-height-md, 34px);--_padding-inline: var(--slotted-control-padding-inline-md, 13px);--_gap: var(--slotted-control-gap-md, 8px);--_icon-size: max(var(--_icon-floor), var(--slotted-control-icon-size-md, 16px));--_inner-size: var(--slotted-control-inner-size-md, 24px)}[data-ui=text-field][data-part=root][data-size=lg]{--_font-size: var(--slotted-control-font-size-lg, 14px);--_height: var(--slotted-control-height-lg, 38px);--_padding-inline: var(--slotted-control-padding-inline-lg, 16px);--_gap: var(--slotted-control-gap-lg, 8px);--_icon-size: max(var(--_icon-floor), var(--slotted-control-icon-size-lg, 18px));--_inner-size: var(--slotted-control-inner-size-lg, 28px)}[data-ui=button-group]>[data-ui=text-field][data-part=root]{flex:1 1 0;inline-size:auto}[data-ui=text-field][data-part=root][data-variant=subtle]{background-color:var( --slotted-text-field-subtle-background, var(--slotted-surface-sunken, Canvas) );border-color:var( --slotted-text-field-subtle-border-color, var(--slotted-border-subtle, ButtonBorder) )}[data-ui=text-field][data-part=root][data-variant=plain]{background-color:transparent;border-color:transparent;border-radius:var(--slotted-radius-none, 0px);box-shadow:none}@media(forced-colors:active){[data-ui=text-field][data-part=root][data-variant=plain]{border-color:ButtonBorder}}[data-ui=text-field][data-part=root][data-mono]{font-family:var(--slotted-font-family-mono, monospace);font-variant-numeric:tabular-nums}[data-ui=text-field]>[data-part=start],[data-ui=text-field]>[data-part=end]{align-items:center;color:var(--slotted-text-field-adornment-color, var(--slotted-text-muted, GrayText));display:inline-flex;flex:0 0 auto;gap:var(--slotted-space-2, .25rem);line-height:1;unicode-bidi:plaintext}[data-ui=text-field]>[data-part=start],[data-ui=text-field]>[data-part=end]{--slotted-icon-size: var(--_icon-size);--slotted-control-inner-size: var(--_inner-size)}[data-ui=text-field]>[data-part=start]>svg,[data-ui=text-field]>[data-part=end]>svg{block-size:var(--_icon-size);inline-size:var(--_icon-size)}[data-ui=text-field]>[data-part=start]:not(:has(svg,img,[data-ui=icon],[data-part=action])),[data-ui=text-field]>[data-part=end]:not(:has(svg,img,[data-ui=icon],[data-part=action])){padding-inline:calc(var(--_icon-size) / 8)}[data-ui=text-field]>:is([data-part=clear],[data-part=copy],[data-part=reveal]),[data-ui=text-field]>:is([data-part=start],[data-part=end])>[data-part=action]{--slotted-icon-size: var(--_icon-size);align-items:center;appearance:none;background-color:transparent;block-size:var(--_action-size);border:0;border-radius:var(--_action-radius);box-sizing:border-box;color:var(--slotted-text-field-action-color, var(--slotted-text-muted, GrayText));cursor:pointer;display:inline-flex;flex:0 0 auto;font:inherit;gap:var(--slotted-space-2, .25rem);justify-content:center;line-height:1;min-inline-size:var(--_action-size);padding:0;position:relative;touch-action:manipulation;transition:var(--_action-transition);unicode-bidi:plaintext;white-space:nowrap;-webkit-tap-highlight-color:transparent}[data-ui=text-field]>:is([data-part=start],[data-part=end])>[data-part=action]:not([aria-label],[aria-labelledby]){color:var(--slotted-text-field-action-label-color, var(--slotted-text, CanvasText));font-weight:var(--slotted-font-weight-medium, 500);padding-inline:var(--slotted-space-3, .375rem)}[data-ui=text-field]>:is([data-part=start],[data-part=end])>[data-part=action]:not([aria-label],[aria-labelledby]){align-content:center;align-items:baseline;display:inline-grid;grid-auto-flow:column;justify-content:center}[data-ui=text-field]>:is([data-part=start],[data-part=end])>[data-part=action]:not([aria-label],[aria-labelledby])>[data-ui=icon]{margin-block-start:calc((1cap + 1ex) / 4 - var(--_icon-size) / 2);translate:0 calc(var(--_icon-size) / 2 - (1cap + 1ex) / 4)}[data-ui=text-field]>:is([data-part=start],[data-part=end]):has(>[data-part=action]){gap:0}[data-ui=text-field]>:is([data-part=clear],[data-part=copy],[data-part=reveal]):after,[data-ui=text-field]>:is([data-part=start],[data-part=end])>[data-part=action]:after{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-min, 24px)) / 2));position:absolute}@media(pointer:coarse){[data-ui=text-field]>:is([data-part=start],[data-part=end])>[data-part=action]:after,[data-ui=text-field]>:is([data-part=clear],[data-part=copy],[data-part=reveal]):after{inset:min(0px,calc((100% - var(--slotted-target-comfortable, 44px)) / 2))}[data-ui=text-field]>:is([data-part=clear],[data-part=copy]):has(~:is([data-part=copy],[data-part=reveal]):not([hidden])):after,[data-ui=text-field]>:is([data-part=start],[data-part=end])>[data-part=action]:has(+[data-part=action]):after{inset-inline-end:0}[data-ui=text-field]>:is([data-part=clear],[data-part=copy]):not([hidden])~:is([data-part=copy],[data-part=reveal]):after,[data-ui=text-field]>:is([data-part=start],[data-part=end])>[data-part=action]+[data-part=action]:after{inset-inline-start:0}}[data-ui=text-field]>:is([data-part=clear],[data-part=copy],[data-part=reveal]):hover:not(:disabled,[data-complete]),[data-ui=text-field]>:is([data-part=start],[data-part=end])>[data-part=action]:hover:not(:disabled,[aria-expanded=true]){background-color:var( --slotted-text-field-action-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=text-field]>:is([data-part=clear],[data-part=copy],[data-part=reveal]):active:not(:disabled),[data-ui=text-field]>:is([data-part=start],[data-part=end])>[data-part=action]:active:not(:disabled){background-color:var( --slotted-text-field-action-active-background, var(--slotted-tone-secondary-subtle-active) )}[data-ui=text-field]>:is([data-part=start],[data-part=end])>[data-part=action][aria-expanded=true]{background-color:var( --slotted-text-field-action-active-background, var(--slotted-tone-secondary-subtle-active) )}[data-ui=text-field]>:is([data-part=start],[data-part=end])>[data-part=action]:disabled,[data-ui=text-field][data-part=root][data-disabled]>:is([data-part=start],[data-part=end])>[data-part=action]{color:var(--slotted-disabled-foreground);cursor:not-allowed}[data-ui=text-field]>:is([data-part=clear],[data-part=copy],[data-part=reveal]):focus-visible,[data-ui=text-field]>:is([data-part=start],[data-part=end])>[data-part=action]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}[data-ui=text-field]>[data-part=copy][data-complete]{color:var( --slotted-text-field-copy-complete-color, var(--slotted-tone-success-text, CanvasText) )}[data-ui=text-field]>:is([data-part=copy],[data-part=reveal])>[data-ui=icon]{transition:opacity var(--slotted-duration-short) var(--slotted-easing-enter),scale var(--slotted-duration-short) var(--slotted-easing-enter)}@starting-style{[data-ui=text-field]>:is([data-part=copy],[data-part=reveal])>[data-ui=icon]{opacity:0;scale:.8}}[data-ui=text-field]>:is([data-part=busy],[data-part=caps-lock],[data-part=clear],[data-part=copy]){transition:var(--_action-transition),opacity var(--slotted-duration-short) var(--slotted-easing-enter),scale var(--slotted-duration-short) var(--slotted-easing-enter),display var(--slotted-duration-short) allow-discrete}[data-ui=text-field]>:is([data-part=busy],[data-part=caps-lock],[data-part=clear],[data-part=copy])[hidden]{display:none;opacity:0;scale:.8;transition:opacity var(--slotted-duration-short) var(--slotted-easing-exit),scale var(--slotted-duration-short) var(--slotted-easing-exit),display var(--slotted-duration-short) allow-discrete}@starting-style{[data-ui=text-field]>:is([data-part=busy],[data-part=caps-lock],[data-part=clear],[data-part=copy]){opacity:0;scale:.8}}[data-ui=text-field]>[data-part=busy]{--slotted-spinner-size: var(--_icon-size);color:var(--slotted-text-field-adornment-color, var(--slotted-text-muted, GrayText));flex:0 0 auto}[data-ui=text-field]>[data-part=caps-lock]{--slotted-icon-size: var(--_icon-size);align-items:center;color:var(--slotted-text-field-caps-lock-color, var(--slotted-tone-warning-text, CanvasText));display:inline-flex;flex:0 0 auto}[data-ui=text-field][data-part=root]:hover:not([data-disabled]):not([data-readonly]):not([data-invalid]){border-color:var(--slotted-text-field-hover-border-color, var(--slotted-tone-accent-border))}[data-ui=text-field][data-part=root][data-variant=subtle]:hover:not([data-disabled]):not([data-readonly]):not([data-invalid]){background-color:var( --slotted-text-field-subtle-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=text-field][data-part=root][data-variant=plain]:hover:not([data-disabled]):not([data-readonly]):not([data-invalid]){background-color:var( --slotted-text-field-plain-hover-background, var(--slotted-tone-secondary-subtle-hover) );border-color:transparent}[data-ui=text-field][data-part=root]:has(>[data-part=input]:focus-visible){box-shadow:var(--slotted-control-shadow-focus-geometry, 0 1px 4px -1px) var(--slotted-focus-ring-color, Highlight);outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=text-field][data-part=root][data-variant=plain]:has(>[data-part=input]:focus-visible){box-shadow:none;outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}[data-ui=text-field][data-part=root][data-invalid]{--slotted-focus-ring-color: var( --slotted-text-field-invalid-focus-ring-color, var(--slotted-focus-ring-color-invalid, Highlight) );--_invalid-edge-width: var( --slotted-text-field-invalid-edge-width, var(--slotted-control-invalid-edge-width, 1px) );--_invalid-edge-color: var( --slotted-text-field-invalid-border-color, var(--slotted-tone-danger-border) );--_invalid-edge: inset 0 0 0 var(--_invalid-edge-width) var(--_invalid-edge-color);border-color:var(--slotted-text-field-invalid-border-color, var(--slotted-tone-danger-border));box-shadow:var(--_invalid-edge)}[data-ui=text-field][data-part=root][data-invalid]:has(>[data-part=input]:focus-visible){box-shadow:var(--_invalid-edge),var(--slotted-control-shadow-focus-geometry, 0 1px 4px -1px) var(--slotted-focus-ring-color, Highlight)}[data-ui=text-field][data-part=root][data-variant=plain][data-invalid]:has(>[data-part=input]:focus-visible){box-shadow:inset 0 0 0 calc(var(--slotted-focus-ring-offset, 2px) - var(--slotted-control-border-width, 1px) + var(--_invalid-edge-width)) var(--_invalid-edge-color)}@media(forced-colors:active){[data-ui=text-field][data-part=root][data-invalid]{outline:var(--_invalid-edge-width) solid CanvasText;outline-offset:calc(-1 * (var(--slotted-control-border-width, 1px) + var(--_invalid-edge-width)))}[data-ui=text-field][data-part=root][data-invalid]:has(>[data-part=input]:focus-visible){outline:calc(var(--slotted-focus-ring-width, 2px) + var(--_invalid-edge-width)) double var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=text-field][data-part=root][data-variant=plain][data-invalid]:has(>[data-part=input]:focus-visible){outline:calc(var(--slotted-focus-ring-width, 2px) + var(--_invalid-edge-width)) double var(--slotted-focus-ring-color, Highlight);outline-offset:calc(-1 * (var(--slotted-focus-ring-width, 2px) + var(--_invalid-edge-width)))}}[data-ui=text-field][data-part=root][data-readonly]{background-color:var( --slotted-text-field-readonly-background, var(--slotted-tone-secondary-subtle-hover) );cursor:default}[data-ui=text-field][data-part=root][data-disabled],[data-ui=text-field][data-part=root]:has(>[data-part=input]:disabled){background-color:var( --slotted-text-field-disabled-background, var(--slotted-disabled-background) );border-color:var(--slotted-text-field-disabled-border-color, var(--slotted-disabled-border));box-shadow:none;color:var(--slotted-text-field-disabled-color, var(--slotted-disabled-foreground));cursor:not-allowed}[data-ui=text-field][data-part=root][data-disabled]>[data-part=start],[data-ui=text-field][data-part=root][data-disabled]>[data-part=end]{color:var(--slotted-disabled-foreground)}}\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: SlTextField, decorators: [{
+            type: Component,
+            args: [{ selector: '[slTextField]', standalone: true, exportAs: 'slTextField', imports: [SlGlyph, SlIcon], template: `<ng-content select="[slTextFieldStart]" />
+    <ng-content />
+    <!-- The ring, the mark and the two buttons below stay rendered for as long
+         as their capability is on, and leave through hidden, so the stylesheet
+         can take them out as well as bring them in. -->
+    @if (loading() !== undefined) {
+      <span data-part="busy" data-ui="spinner" aria-hidden="true" [hidden]="!loading()"></span>
+    }
+    @if (control()?.password()) {
+      <span data-part="caps-lock" aria-hidden="true" [hidden]="!control()!.capsLock()">
+        <span slIcon><svg slGlyph name="caps-lock"></svg></span>
+      </span>
+    }
+    @if (clearable()) {
+      <button
+        data-part="clear"
+        type="button"
+        [hidden]="!showClear()"
+        [attr.aria-label]="t('clear')"
+        (click)="control()!.clear($event)"
+      >
+        <span slIcon><svg slGlyph name="x"></svg></span>
+      </button>
+    }
+    @if (copyable()) {
+      <button
+        data-part="copy"
+        type="button"
+        [hidden]="!showCopy()"
+        [attr.aria-label]="t('copy')"
+        [attr.data-complete]="copied() ? '' : null"
+        (click)="copy($event)"
+      >
+        <!-- Two blocks, so the check is a new element and arrives. -->
+        @if (copied()) {
+          <span slIcon><svg slGlyph name="check"></svg></span>
+        } @else {
+          <span slIcon><svg slGlyph name="copy"></svg></span>
+        }
+      </button>
+    }
+    @if (showReveal()) {
+      <button
+        data-part="reveal"
+        type="button"
+        [attr.aria-label]="t('reveal')"
+        [attr.aria-pressed]="control()!.revealed()"
+        (click)="control()!.toggleReveal($event)"
+      >
+        @if (control()!.revealed()) {
+          <span slIcon><svg slGlyph name="eye-off"></svg></span>
+        } @else {
+          <span slIcon><svg slGlyph name="eye"></svg></span>
+        }
+      </button>
+    }
+    <ng-content select="[slTextFieldEnd]" />`, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        'data-ui': 'text-field',
+                        'data-part': 'root',
+                        '[attr.data-size]': 'resolvedSize()',
+                        '[attr.data-variant]': 'resolvedVariant()',
+                        '[attr.data-mono]': "resolvedMono() ? '' : null",
+                        '[attr.data-disabled]': "control()?.resolvedDisabled() === true ? '' : null",
+                        '[attr.data-invalid]': "control()?.resolvedInvalid() === true ? '' : null",
+                        '[attr.data-readonly]': "control()?.resolvedReadOnly() === true ? '' : null",
+                        '[attr.data-loading]': "loading() === true ? '' : null",
+                    }, styles: ["@layer slotted.components{[data-ui=text-field][data-part=root]{--_font-size: var(--slotted-control-font-size-md, 13px);--_height: var(--slotted-control-height-md, 34px);--_padding-inline: var(--slotted-control-padding-inline-md, 13px);--_gap: var(--slotted-control-gap-md, 8px);--_icon-floor: var(--slotted-text-field-icon-size-min, 14px);--_icon-size: max(var(--_icon-floor), var(--slotted-control-icon-size-md, 16px));--_inner-size: var(--slotted-control-inner-size-md, 24px);--_action-size: var( --slotted-text-field-action-size, min(calc(var(--_icon-size) + 2 * var(--slotted-space-2, .25rem)), var(--_inner-size)) );--_inset: max( 0px, calc( (var(--_height) - 2 * var(--slotted-control-border-width, 1px) - var(--_action-size)) / 2 ) );--_action-radius: max( var(--slotted-radius-xs, 2px), calc(var(--slotted-text-field-radius, var(--slotted-control-radius, 4px)) - var(--_inset)) );--_action-transition: background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing), color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);align-items:center;background-color:var(--slotted-text-field-background, var(--slotted-control-surface, Field));border:var(--slotted-control-border-width, 1px) solid var(--slotted-text-field-border-color, var(--slotted-control-border-color, ButtonBorder));border-radius:var(--slotted-text-field-radius, var(--slotted-control-radius, 4px));box-shadow:var(--slotted-text-field-shadow, var(--slotted-control-shadow, none));box-sizing:border-box;color:var(--slotted-text-field-color, var(--slotted-text, CanvasText));display:flex;font-family:var(--slotted-control-font-family, system-ui, sans-serif);font-size:var(--_font-size);gap:var(--_gap);inline-size:100%;min-inline-size:0;min-block-size:var(--_height);padding-inline:var(--_padding-inline);transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),border-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),box-shadow var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=text-field][data-part=root]:has(>:is([data-part=clear],[data-part=copy],[data-part=reveal]):not([hidden]):last-child,>[data-part=end]:last-child>[data-part=action]:last-child){padding-inline-end:var(--_inset)}[data-ui=text-field][data-part=root]:has(>[data-part=start]:first-child>[data-part=action]:first-child){padding-inline-start:var(--_inset)}[data-ui=text-field]>[data-part=input]{background-color:transparent;align-self:stretch;margin-block:calc(var(--slotted-control-border-width, 1px) * -1);border:0;color:inherit;flex:1 1 auto;font:inherit;outline:none;padding:0;min-inline-size:0;text-align:inherit;text-overflow:ellipsis}[data-ui=text-field]>[data-part=input]::placeholder{color:var(--slotted-text-field-placeholder-color, var(--slotted-text-muted, GrayText));text-overflow:ellipsis}[data-ui=text-field]>[data-part=input]::-webkit-search-cancel-button,[data-ui=text-field]>[data-part=input]::-webkit-search-decoration{appearance:none}[data-ui=text-field]>[data-part=input]:autofill{box-shadow:inset 0 0 0 100px var(--slotted-text-field-autofill-background, var(--slotted-tone-accent-surface));-webkit-text-fill-color:var(--slotted-text-field-color, var(--slotted-text, CanvasText))}[data-ui=text-field][data-part=root][data-size=sm]{--_font-size: var(--slotted-control-font-size-sm, 12px);--_height: var(--slotted-control-height-sm, 30px);--_padding-inline: var(--slotted-control-padding-inline-sm, 10px);--_gap: var(--slotted-control-gap-sm, 6px);--_icon-size: max(var(--_icon-floor), var(--slotted-control-icon-size-sm, 14px));--_inner-size: var(--slotted-control-inner-size-sm, 22px)}[data-ui=text-field][data-part=root][data-size=md]{--_font-size: var(--slotted-control-font-size-md, 13px);--_height: var(--slotted-control-height-md, 34px);--_padding-inline: var(--slotted-control-padding-inline-md, 13px);--_gap: var(--slotted-control-gap-md, 8px);--_icon-size: max(var(--_icon-floor), var(--slotted-control-icon-size-md, 16px));--_inner-size: var(--slotted-control-inner-size-md, 24px)}[data-ui=text-field][data-part=root][data-size=lg]{--_font-size: var(--slotted-control-font-size-lg, 14px);--_height: var(--slotted-control-height-lg, 38px);--_padding-inline: var(--slotted-control-padding-inline-lg, 16px);--_gap: var(--slotted-control-gap-lg, 8px);--_icon-size: max(var(--_icon-floor), var(--slotted-control-icon-size-lg, 18px));--_inner-size: var(--slotted-control-inner-size-lg, 28px)}[data-ui=button-group]>[data-ui=text-field][data-part=root]{flex:1 1 0;inline-size:auto}[data-ui=text-field][data-part=root][data-variant=subtle]{background-color:var( --slotted-text-field-subtle-background, var(--slotted-surface-sunken, Canvas) );border-color:var( --slotted-text-field-subtle-border-color, var(--slotted-border-subtle, ButtonBorder) )}[data-ui=text-field][data-part=root][data-variant=plain]{background-color:transparent;border-color:transparent;border-radius:var(--slotted-radius-none, 0px);box-shadow:none}@media(forced-colors:active){[data-ui=text-field][data-part=root][data-variant=plain]{border-color:ButtonBorder}}[data-ui=text-field][data-part=root][data-mono]{font-family:var(--slotted-font-family-mono, monospace);font-variant-numeric:tabular-nums}[data-ui=text-field]>[data-part=start],[data-ui=text-field]>[data-part=end]{align-items:center;color:var(--slotted-text-field-adornment-color, var(--slotted-text-muted, GrayText));display:inline-flex;flex:0 0 auto;gap:var(--slotted-space-2, .25rem);line-height:1;unicode-bidi:plaintext}[data-ui=text-field]>[data-part=start],[data-ui=text-field]>[data-part=end]{--slotted-icon-size: var(--_icon-size);--slotted-control-inner-size: var(--_inner-size)}[data-ui=text-field]>[data-part=start]>svg,[data-ui=text-field]>[data-part=end]>svg{block-size:var(--_icon-size);inline-size:var(--_icon-size)}[data-ui=text-field]>[data-part=start]:not(:has(svg,img,[data-ui=icon],[data-part=action])),[data-ui=text-field]>[data-part=end]:not(:has(svg,img,[data-ui=icon],[data-part=action])){padding-inline:calc(var(--_icon-size) / 8)}[data-ui=text-field]>:is([data-part=clear],[data-part=copy],[data-part=reveal]),[data-ui=text-field]>:is([data-part=start],[data-part=end])>[data-part=action]{--slotted-icon-size: var(--_icon-size);align-items:center;appearance:none;background-color:transparent;block-size:var(--_action-size);border:0;border-radius:var(--_action-radius);box-sizing:border-box;color:var(--slotted-text-field-action-color, var(--slotted-text-muted, GrayText));cursor:pointer;display:inline-flex;flex:0 0 auto;font:inherit;gap:var(--slotted-space-2, .25rem);justify-content:center;line-height:1;min-inline-size:var(--_action-size);padding:0;position:relative;touch-action:manipulation;transition:var(--_action-transition);unicode-bidi:plaintext;white-space:nowrap;-webkit-tap-highlight-color:transparent}[data-ui=text-field]>:is([data-part=start],[data-part=end])>[data-part=action]:not([aria-label],[aria-labelledby]){color:var(--slotted-text-field-action-label-color, var(--slotted-text, CanvasText));font-weight:var(--slotted-font-weight-medium, 500);padding-inline:var(--slotted-space-3, .375rem)}[data-ui=text-field]>:is([data-part=start],[data-part=end])>[data-part=action]:not([aria-label],[aria-labelledby]){align-content:center;align-items:baseline;display:inline-grid;grid-auto-flow:column;justify-content:center}[data-ui=text-field]>:is([data-part=start],[data-part=end])>[data-part=action]:not([aria-label],[aria-labelledby])>[data-ui=icon]{margin-block-start:calc((1cap + 1ex) / 4 - var(--_icon-size) / 2);translate:0 calc(var(--_icon-size) / 2 - (1cap + 1ex) / 4)}[data-ui=text-field]>:is([data-part=start],[data-part=end]):has(>[data-part=action]){gap:0}[data-ui=text-field]>:is([data-part=clear],[data-part=copy],[data-part=reveal]):after,[data-ui=text-field]>:is([data-part=start],[data-part=end])>[data-part=action]:after{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-min, 24px)) / 2));position:absolute}@media(pointer:coarse){[data-ui=text-field]>:is([data-part=start],[data-part=end])>[data-part=action]:after,[data-ui=text-field]>:is([data-part=clear],[data-part=copy],[data-part=reveal]):after{inset:min(0px,calc((100% - var(--slotted-target-comfortable, 44px)) / 2))}[data-ui=text-field]>:is([data-part=clear],[data-part=copy]):has(~:is([data-part=copy],[data-part=reveal]):not([hidden])):after,[data-ui=text-field]>:is([data-part=start],[data-part=end])>[data-part=action]:has(+[data-part=action]):after{inset-inline-end:0}[data-ui=text-field]>:is([data-part=clear],[data-part=copy]):not([hidden])~:is([data-part=copy],[data-part=reveal]):after,[data-ui=text-field]>:is([data-part=start],[data-part=end])>[data-part=action]+[data-part=action]:after{inset-inline-start:0}}[data-ui=text-field]>:is([data-part=clear],[data-part=copy],[data-part=reveal]):hover:not(:disabled,[data-complete]),[data-ui=text-field]>:is([data-part=start],[data-part=end])>[data-part=action]:hover:not(:disabled,[aria-expanded=true]){background-color:var( --slotted-text-field-action-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=text-field]>:is([data-part=clear],[data-part=copy],[data-part=reveal]):active:not(:disabled),[data-ui=text-field]>:is([data-part=start],[data-part=end])>[data-part=action]:active:not(:disabled){background-color:var( --slotted-text-field-action-active-background, var(--slotted-tone-secondary-subtle-active) )}[data-ui=text-field]>:is([data-part=start],[data-part=end])>[data-part=action][aria-expanded=true]{background-color:var( --slotted-text-field-action-active-background, var(--slotted-tone-secondary-subtle-active) )}[data-ui=text-field]>:is([data-part=start],[data-part=end])>[data-part=action]:disabled,[data-ui=text-field][data-part=root][data-disabled]>:is([data-part=start],[data-part=end])>[data-part=action]{color:var(--slotted-disabled-foreground);cursor:not-allowed}[data-ui=text-field]>:is([data-part=clear],[data-part=copy],[data-part=reveal]):focus-visible,[data-ui=text-field]>:is([data-part=start],[data-part=end])>[data-part=action]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}[data-ui=text-field]>[data-part=copy][data-complete]{color:var( --slotted-text-field-copy-complete-color, var(--slotted-tone-success-text, CanvasText) )}[data-ui=text-field]>:is([data-part=copy],[data-part=reveal])>[data-ui=icon]{transition:opacity var(--slotted-duration-short) var(--slotted-easing-enter),scale var(--slotted-duration-short) var(--slotted-easing-enter)}@starting-style{[data-ui=text-field]>:is([data-part=copy],[data-part=reveal])>[data-ui=icon]{opacity:0;scale:.8}}[data-ui=text-field]>:is([data-part=busy],[data-part=caps-lock],[data-part=clear],[data-part=copy]){transition:var(--_action-transition),opacity var(--slotted-duration-short) var(--slotted-easing-enter),scale var(--slotted-duration-short) var(--slotted-easing-enter),display var(--slotted-duration-short) allow-discrete}[data-ui=text-field]>:is([data-part=busy],[data-part=caps-lock],[data-part=clear],[data-part=copy])[hidden]{display:none;opacity:0;scale:.8;transition:opacity var(--slotted-duration-short) var(--slotted-easing-exit),scale var(--slotted-duration-short) var(--slotted-easing-exit),display var(--slotted-duration-short) allow-discrete}@starting-style{[data-ui=text-field]>:is([data-part=busy],[data-part=caps-lock],[data-part=clear],[data-part=copy]){opacity:0;scale:.8}}[data-ui=text-field]>[data-part=busy]{--slotted-spinner-size: var(--_icon-size);color:var(--slotted-text-field-adornment-color, var(--slotted-text-muted, GrayText));flex:0 0 auto}[data-ui=text-field]>[data-part=caps-lock]{--slotted-icon-size: var(--_icon-size);align-items:center;color:var(--slotted-text-field-caps-lock-color, var(--slotted-tone-warning-text, CanvasText));display:inline-flex;flex:0 0 auto}[data-ui=text-field][data-part=root]:hover:not([data-disabled]):not([data-readonly]):not([data-invalid]){border-color:var(--slotted-text-field-hover-border-color, var(--slotted-tone-accent-border))}[data-ui=text-field][data-part=root][data-variant=subtle]:hover:not([data-disabled]):not([data-readonly]):not([data-invalid]){background-color:var( --slotted-text-field-subtle-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=text-field][data-part=root][data-variant=plain]:hover:not([data-disabled]):not([data-readonly]):not([data-invalid]){background-color:var( --slotted-text-field-plain-hover-background, var(--slotted-tone-secondary-subtle-hover) );border-color:transparent}[data-ui=text-field][data-part=root]:has(>[data-part=input]:focus-visible){box-shadow:var(--slotted-control-shadow-focus-geometry, 0 1px 4px -1px) var(--slotted-focus-ring-color, Highlight);outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=text-field][data-part=root][data-variant=plain]:has(>[data-part=input]:focus-visible){box-shadow:none;outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}[data-ui=text-field][data-part=root][data-invalid]{--slotted-focus-ring-color: var( --slotted-text-field-invalid-focus-ring-color, var(--slotted-focus-ring-color-invalid, Highlight) );--_invalid-edge-width: var( --slotted-text-field-invalid-edge-width, var(--slotted-control-invalid-edge-width, 1px) );--_invalid-edge-color: var( --slotted-text-field-invalid-border-color, var(--slotted-tone-danger-border) );--_invalid-edge: inset 0 0 0 var(--_invalid-edge-width) var(--_invalid-edge-color);border-color:var(--slotted-text-field-invalid-border-color, var(--slotted-tone-danger-border));box-shadow:var(--_invalid-edge)}[data-ui=text-field][data-part=root][data-invalid]:has(>[data-part=input]:focus-visible){box-shadow:var(--_invalid-edge),var(--slotted-control-shadow-focus-geometry, 0 1px 4px -1px) var(--slotted-focus-ring-color, Highlight)}[data-ui=text-field][data-part=root][data-variant=plain][data-invalid]:has(>[data-part=input]:focus-visible){box-shadow:inset 0 0 0 calc(var(--slotted-focus-ring-offset, 2px) - var(--slotted-control-border-width, 1px) + var(--_invalid-edge-width)) var(--_invalid-edge-color)}@media(forced-colors:active){[data-ui=text-field][data-part=root][data-invalid]{outline:var(--_invalid-edge-width) solid CanvasText;outline-offset:calc(-1 * (var(--slotted-control-border-width, 1px) + var(--_invalid-edge-width)))}[data-ui=text-field][data-part=root][data-invalid]:has(>[data-part=input]:focus-visible){outline:calc(var(--slotted-focus-ring-width, 2px) + var(--_invalid-edge-width)) double var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=text-field][data-part=root][data-variant=plain][data-invalid]:has(>[data-part=input]:focus-visible){outline:calc(var(--slotted-focus-ring-width, 2px) + var(--_invalid-edge-width)) double var(--slotted-focus-ring-color, Highlight);outline-offset:calc(-1 * (var(--slotted-focus-ring-width, 2px) + var(--_invalid-edge-width)))}}[data-ui=text-field][data-part=root][data-readonly]{background-color:var( --slotted-text-field-readonly-background, var(--slotted-tone-secondary-subtle-hover) );cursor:default}[data-ui=text-field][data-part=root][data-disabled],[data-ui=text-field][data-part=root]:has(>[data-part=input]:disabled){background-color:var( --slotted-text-field-disabled-background, var(--slotted-disabled-background) );border-color:var(--slotted-text-field-disabled-border-color, var(--slotted-disabled-border));box-shadow:none;color:var(--slotted-text-field-disabled-color, var(--slotted-disabled-foreground));cursor:not-allowed}[data-ui=text-field][data-part=root][data-disabled]>[data-part=start],[data-ui=text-field][data-part=root][data-disabled]>[data-part=end]{color:var(--slotted-disabled-foreground)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], mono: [{ type: i0.Input, args: [{ isSignal: true, alias: "mono", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], revealable: [{ type: i0.Input, args: [{ isSignal: true, alias: "revealable", required: false }] }], copyable: [{ type: i0.Input, args: [{ isSignal: true, alias: "copyable", required: false }] }], messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], valueCopy: [{ type: i0.Output, args: ["valueCopy"] }], control: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SlTextFieldControl), { ...{ descendants: true }, isSignal: true }] }] } });
+
+/**
+ * A native button fires the same `click` for a pointer, for Space and for
+ * Enter. A click synthesised by the keyboard reports no detail; a real one
+ * reports the click count — the rule `button` and `tag` both write.
+ */
+function activationReason(event) {
+    return event instanceof MouseEvent && event.detail === 0 ? 'keyboard' : 'pointer';
+}
+/**
+ * The control itself: the value, the identifier, and everything the field
+ * around it says.
+ *
+ * **The element owns the characters.** The directive keeps a mirror of what the
+ * element shows, for the clear button and the count, and never a second copy of
+ * the value. `writeValue` from a form and a `[value]` binding both write the
+ * element; typing writes it directly, and nothing here fights the browser for
+ * it — which is what Angular's own `DefaultValueAccessor` does, and the
+ * asymmetry with React, where a controlled input's DOM belongs to React.
+ *
+ * **Unset means ask the field.** `disabled`, `readOnly` and `invalid` default to
+ * `undefined` rather than `false`, which is what makes "not disabled" and "said
+ * nothing" different answers. A value the consumer wrote as a static attribute
+ * is read before the host binding computes, so the binding never writes over it.
+ */
+class SlTextFieldInput {
+    /** Present means the consumer owns the value. */
+    value = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** The value the control starts from when nobody else writes one. */
+    defaultValue = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "defaultValue" }] : /* istanbul ignore next */ []));
+    /** Unstated rather than `false`, so the control defers to the field. */
+    disabled = input(undefined, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: (value) => (value === undefined ? undefined : booleanAttribute(value)) });
+    /** Unstated rather than `false`. Reaches the element as the native `readonly`. */
+    readOnly = input(undefined, { ...(ngDevMode ? { debugName: "readOnly" } : /* istanbul ignore next */ {}), transform: (value) => (value === undefined ? undefined : booleanAttribute(value)) });
+    /** Unstated rather than `false`. Reaches the element as `aria-invalid`. */
+    invalid = input(undefined, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: (value) => (value === undefined ? undefined : booleanAttribute(value)) });
+    /** Publishes the length of the value to the field, which draws the count. */
+    showCount = input(false, { ...(ngDevMode ? { debugName: "showCount" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * The limit the count is measured against. Defaults to the element's own
+     * `maxlength`, and set alone it is a soft limit: the value can pass it, and
+     * the counter says so before validation runs.
+     */
+    countMax = input(undefined, { ...(ngDevMode ? { debugName: "countMax" } : /* istanbul ignore next */ {}), transform: (value) => value === undefined || value === null ? undefined : numberAttribute(value) });
+    /** Present means the consumer owns whether the password is showing. */
+    revealedValue = input(undefined, { ...(ngDevMode ? { debugName: "revealedValue" } : /* istanbul ignore next */ {}), alias: 'revealed',
+        transform: (value) => (value === undefined ? undefined : booleanAttribute(value)) });
+    defaultRevealed = input(false, { ...(ngDevMode ? { debugName: "defaultRevealed" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * The element's own `type`, written or bound. An input rather than a host
+     * attribute read once, because a bound `[type]` would otherwise go to the
+     * element's property and the host binding below would never see it.
+     */
+    type = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    /**
+     * One output for one transition, carrying the value, the value it replaces,
+     * the reason, the originating event and `cancel()`. There is no `[(value)]`,
+     * because a two-way binding has one slot and can carry none of those; a form
+     * gets the same movement through `ControlValueAccessor`.
+     */
+    valueChange = output();
+    revealedChange = output();
+    element = inject(ElementRef).nativeElement;
+    injector = inject(Injector);
+    /**
+     * The frame around the control. Injected without `optional`, so an `input`
+     * written without it fails at construction rather than silently losing its
+     * border, its ring and the place its two buttons stand — the property
+     * `docs/history/designs/2026-08-31-field-aware-controls-design.md` asks of
+     * every control this library ships. It is public because a template that
+     * reaches the input through `exportAs` may want the frame's resolved step.
+     */
+    textField = inject(SlTextField);
+    field = inject(SlField, { optional: true });
+    writtenId = inject(new HostAttributeToken('id'), { optional: true });
+    writtenDescribedBy = inject(new HostAttributeToken('aria-describedby'), {
+        optional: true,
+    });
+    writtenInvalid = inject(new HostAttributeToken('aria-invalid'), {
+        optional: true,
+    });
+    writtenRequired = inject(new HostAttributeToken('aria-required'), {
+        optional: true,
+    });
+    writtenReadonly = inject(new HostAttributeToken('readonly'), { optional: true });
+    writtenMaxLength = inject(new HostAttributeToken('maxlength'), {
+        optional: true,
+    });
+    /** What the element is showing. Never a second copy of the value. */
+    mirror = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mirror" }] : /* istanbul ignore next */ []));
+    ownRevealed = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ownRevealed" }] : /* istanbul ignore next */ []));
+    formDisabled = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formDisabled" }] : /* istanbul ignore next */ []));
+    onChangeFn = () => undefined;
+    onTouchedFn = () => undefined;
+    ownCapsLock = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ownCapsLock" }] : /* istanbul ignore next */ []));
+    capsLock = this.ownCapsLock.asReadonly();
+    currentValue = this.mirror.asReadonly();
+    empty = computed(() => this.mirror() === '', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "empty" }] : /* istanbul ignore next */ []));
+    revealed = computed(() => this.revealedValue() ?? this.ownRevealed(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "revealed" }] : /* istanbul ignore next */ []));
+    ownType = computed(() => this.type() ?? 'text', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ownType" }] : /* istanbul ignore next */ []));
+    password = computed(() => this.ownType() === 'password', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "password" }] : /* istanbul ignore next */ []));
+    resolvedDisabled = computed(() => this.disabled() ?? this.formDisabled() ?? this.field?.resolvedDisabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedDisabled" }] : /* istanbul ignore next */ []));
+    resolvedReadOnly = computed(() => this.readOnly() ??
+        (this.writtenReadonly === null ? undefined : true) ??
+        this.field?.resolvedReadOnly(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedReadOnly" }] : /* istanbul ignore next */ []));
+    resolvedInvalid = computed(() => this.invalid() ?? this.field?.invalid(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedInvalid" }] : /* istanbul ignore next */ []));
+    controlId = computed(() => this.writtenId ?? this.field?.ids().control ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "controlId" }] : /* istanbul ignore next */ []));
+    /**
+     * The swap the reveal button makes. It is the element's own `type` otherwise,
+     * so a consumer's `type="email"` survives the host binding that a directive
+     * on the element would otherwise write over.
+     */
+    resolvedType = computed(() => this.password() && this.revealed() ? 'text' : this.ownType(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedType" }] : /* istanbul ignore next */ []));
+    /** Merged after the consumer's own, so a tour step is read before the help. */
+    describedBy = computed(() => {
+        const merged = [this.writtenDescribedBy, this.field?.describedBy()].filter(Boolean);
+        return merged.length === 0 ? null : merged.join(' ');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
+    ariaInvalid = computed(() => this.writtenInvalid ?? (this.resolvedInvalid() === true ? 'true' : null), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : /* istanbul ignore next */ []));
+    ariaRequired = computed(() => this.writtenRequired ?? (this.field?.required() === true ? 'true' : null), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaRequired" }] : /* istanbul ignore next */ []));
+    disabledAttribute = computed(() => this.resolvedDisabled() === true ? '' : null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabledAttribute" }] : /* istanbul ignore next */ []));
+    readonlyAttribute = computed(() => this.resolvedReadOnly() === true ? '' : null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "readonlyAttribute" }] : /* istanbul ignore next */ []));
+    limit = computed(() => {
+        const written = this.writtenMaxLength === null ? undefined : Number(this.writtenMaxLength);
+        return (this.countMax() ?? (written === undefined || Number.isNaN(written) ? undefined : written));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "limit" }] : /* istanbul ignore next */ []));
+    constructor() {
+        /* A consumer's own value writes the element, the way a form's does. */
+        effect(() => {
+            const next = this.value();
+            if (next === undefined || next === this.element.value)
+                return;
+            this.element.value = next;
+            this.mirror.set(next);
+        });
+        /* The count is the control's and the place is the field's. */
+        effect(() => {
+            if (this.field === null)
+                return;
+            if (!this.showCount()) {
+                this.field.setCount(undefined);
+                return;
+            }
+            this.field.setCount({ length: this.mirror().length, max: this.limit() });
+        });
+    }
+    /**
+     * Angular creates every directive in a template before it binds any input, so
+     * the starting value is read here rather than in the constructor: read there,
+     * `defaultValue` is always `undefined` and the mirror starts empty — which is
+     * what the first run of this family's spec showed, as a clear button that
+     * never appeared and a count that stayed at nought.
+     */
+    ngOnInit() {
+        this.ownRevealed.set(this.defaultRevealed());
+        const initial = this.defaultValue() ?? this.element.value;
+        if (initial !== this.element.value)
+            this.element.value = initial;
+        this.mirror.set(this.element.value);
+    }
+    /** The native element, for `focus()`, `select()` and `setSelectionRange()`. */
+    get inputElement() {
+        return this.element;
+    }
+    writeValue(value) {
+        this.element.value = value ?? '';
+        this.mirror.set(this.element.value);
+    }
+    registerOnChange(fn) {
+        this.onChangeFn = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouchedFn = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.formDisabled.set(isDisabled);
+    }
+    clear(source) {
+        if (this.request('', 'clear', source)) {
+            this.element.value = '';
+            this.mirror.set('');
+            this.onChangeFn('');
+        }
+        this.element.focus();
+    }
+    toggleReveal(source) {
+        const start = this.element.selectionStart;
+        const end = this.element.selectionEnd;
+        const next = !this.revealed();
+        let cancelled = false;
+        const state = createControllable({
+            controlled: this.revealedValue(),
+            initial: this.revealed(),
+            onRequest: (request) => {
+                this.revealedChange.emit(request);
+                cancelled = request.cancelled;
+            },
+        });
+        state.request(next, activationReason(source), source);
+        if (cancelled)
+            return;
+        this.ownRevealed.set(next);
+        /* Swapping the type moves the caret to the end, so it is put back after
+           the attribute is written rather than before. */
+        afterNextRender(() => {
+            this.element.focus();
+            if (start !== null && end !== null)
+                this.element.setSelectionRange(start, end);
+        }, { injector: this.injector });
+    }
+    onInput(event) {
+        const next = this.element.value;
+        if (this.request(next, 'keyboard', event)) {
+            this.mirror.set(next);
+            this.onChangeFn(next);
+        }
+    }
+    onBlur() {
+        this.ownCapsLock.set(false);
+        this.onTouchedFn();
+    }
+    /**
+     * Caps Lock is read from the key events the control already receives, and
+     * only in a password: the platform exposes the modifier on an event and
+     * nowhere else. It is announced once, as it turns on.
+     */
+    readCapsLock(event) {
+        if (!this.password() || typeof event.getModifierState !== 'function')
+            return;
+        const on = event.getModifierState('CapsLock');
+        if (on && !this.ownCapsLock()) {
+            getLiveAnnouncer(this.element.ownerDocument).announce(this.textField.t('capsLock'));
+        }
+        this.ownCapsLock.set(on);
+    }
+    /** Emits the request and says whether anything may commit. */
+    request(next, reason, source) {
+        if (next === this.mirror())
+            return false;
+        let cancelled = false;
+        const state = createControllable({
+            controlled: undefined,
+            initial: this.mirror(),
+            onRequest: (request) => {
+                this.valueChange.emit(request);
+                cancelled = request.cancelled;
+            },
+        });
+        state.request(next, reason, source);
+        return !cancelled;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTextFieldInput, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.7", type: SlTextFieldInput, isStandalone: true, selector: "input[slTextFieldInput]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, showCount: { classPropertyName: "showCount", publicName: "showCount", isSignal: true, isRequired: false, transformFunction: null }, countMax: { classPropertyName: "countMax", publicName: "countMax", 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 }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", revealedChange: "revealedChange" }, host: { attributes: { "data-part": "input" }, listeners: { "input": "onInput($event)", "keydown": "readCapsLock($event)", "keyup": "readCapsLock($event)", "blur": "onBlur()" }, properties: { "attr.id": "controlId()", "attr.type": "resolvedType()", "attr.aria-describedby": "describedBy()", "attr.aria-invalid": "ariaInvalid()", "attr.aria-required": "ariaRequired()", "attr.disabled": "disabledAttribute()", "attr.readonly": "readonlyAttribute()", "attr.aria-busy": "textField.loading() === true ? 'true' : null" } }, providers: [
+            { provide: SlTextFieldControl, useExisting: forwardRef(() => SlTextFieldInput) },
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SlTextFieldInput), multi: true },
+        ], exportAs: ["slTextFieldInput"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTextFieldInput, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[slTextFieldInput]',
+                    standalone: true,
+                    exportAs: 'slTextFieldInput',
+                    providers: [
+                        { provide: SlTextFieldControl, useExisting: forwardRef(() => SlTextFieldInput) },
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SlTextFieldInput), multi: true },
+                    ],
+                    host: {
+                        'data-part': 'input',
+                        '[attr.id]': 'controlId()',
+                        '[attr.type]': 'resolvedType()',
+                        '[attr.aria-describedby]': 'describedBy()',
+                        '[attr.aria-invalid]': 'ariaInvalid()',
+                        '[attr.aria-required]': 'ariaRequired()',
+                        '[attr.disabled]': 'disabledAttribute()',
+                        '[attr.readonly]': 'readonlyAttribute()',
+                        '[attr.aria-busy]': "textField.loading() === true ? 'true' : null",
+                        '(input)': 'onInput($event)',
+                        '(keydown)': 'readCapsLock($event)',
+                        '(keyup)': 'readCapsLock($event)',
+                        '(blur)': 'onBlur()',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], defaultValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValue", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], showCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCount", required: false }] }], countMax: [{ type: i0.Input, args: [{ isSignal: true, alias: "countMax", required: false }] }], revealedValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "revealed", required: false }] }], defaultRevealed: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultRevealed", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], revealedChange: [{ type: i0.Output, args: ["revealedChange"] }] } });
+
+/**
+ * An adornment before the value in the reading direction: a currency mark, a
+ * unit, an icon, an `@`. Named for the direction rather than for a side, so the
+ * same markup puts the mark before the amount in both directions —
+ * `docs/component-features.md` §2.4 states the preference and `tag` already
+ * ships parts by these names.
+ *
+ * It is a directive on the consumer's own element, so an `icon`, a `kbd` or a
+ * `span` all work and none of them loses its own semantics. The stylesheet
+ * sizes any icon inside it from the control's own glyph scale.
+ */
+class SlTextFieldStart {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTextFieldStart, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlTextFieldStart, isStandalone: true, selector: "[slTextFieldStart]", host: { attributes: { "data-part": "start" } }, exportAs: ["slTextFieldStart"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTextFieldStart, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slTextFieldStart]',
+                    standalone: true,
+                    exportAs: 'slTextFieldStart',
+                    host: { 'data-part': 'start' },
+                }]
+        }] });
+/** An adornment after the value in the reading direction. */
+class SlTextFieldEnd {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTextFieldEnd, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlTextFieldEnd, isStandalone: true, selector: "[slTextFieldEnd]", host: { attributes: { "data-part": "end" } }, exportAs: ["slTextFieldEnd"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTextFieldEnd, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slTextFieldEnd]',
+                    standalone: true,
+                    exportAs: 'slTextFieldEnd',
+                    host: { 'data-part': 'end' },
+                }]
+        }] });
+/**
+ * A button of the consumer's inside the frame, projected into `start` or
+ * `end`: a submit, a menu trigger naming a country, a tooltip on an
+ * information mark. Named by `aria-label` it is drawn square, like the
+ * family's own buttons; named by its text it takes a step of air a side.
+ *
+ * `slMenuTriggerFor` on the same element binds `data-part` to `null` outside
+ * a bar or a surface, and that binding is a constant, so the part is written
+ * back once after the first render and nothing writes over it again — the
+ * rule `menu` records for its own trigger. A `type` the consumer wrote wins.
+ */
+class SlTextFieldAction {
+    type = inject(new HostAttributeToken('type'), { optional: true }) ?? 'button';
+    constructor() {
+        const element = inject(ElementRef).nativeElement;
+        afterNextRender(() => element.setAttribute('data-part', 'action'));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTextFieldAction, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlTextFieldAction, isStandalone: true, selector: "button[slTextFieldAction]", host: { attributes: { "data-part": "action" }, properties: { "attr.type": "type" } }, exportAs: ["slTextFieldAction"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTextFieldAction, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[slTextFieldAction]',
+                    standalone: true,
+                    exportAs: 'slTextFieldAction',
+                    host: { 'data-part': 'action', '[attr.type]': 'type' },
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SlTextField, SlTextFieldAction, SlTextFieldControl, SlTextFieldEnd, SlTextFieldInput, SlTextFieldStart, TEXT_FIELD_DEFAULTS, injectTextFieldDefaults, provideTextFieldDefaults };
+//# sourceMappingURL=slotted-angular-text-field.mjs.map