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

package/types/slotted-angular-tags-input.d.ts

@@ -0,0 +1,302 @@
+import * as _slotted_core_i18n from '@slotted/core/i18n';
+import { PartialMessages, TagsInputMessages } from '@slotted/core/i18n';
+import * as _slotted_core_tags from '@slotted/core/tags';
+import { TagsRefuseCause, TagsValidator, TagsVerdict } from '@slotted/core/tags';
+import * as _angular_core from '@angular/core';
+import { InjectionToken, Provider, OnInit } from '@angular/core';
+import { ChangeRequest } from '@slotted/core/state';
+import { ControlValueAccessor, Validator, ValidationErrors } from '@angular/forms';
+import { SlField } from '@slotted/angular/field';
+import { ClipboardOutcome } from '@slotted/core/clipboard';
+
+type TagsInputSize = 'sm' | 'md' | 'lg';
+type TagsInputVariant = 'outline' | 'subtle' | 'plain';
+/** What the row does with more chips than fit on one line. */
+type TagsInputOverflow = 'wrap' | 'collapse';
+/** What becomes of a value that fails the judgement: a marked chip, or a report. */
+type TagsInputInvalidValues = 'keep' | 'refuse';
+/** What becomes of the pending text when focus leaves the control. */
+type TagsInputPendingOnBlur = 'commit' | 'keep' | 'discard';
+/**
+ * Why the list moved. The five words the React binding states in full, and
+ * for the same reason: a consumer writes a different handler for each, and
+ * `keyboard` is reorder alone.
+ */
+type TagsInputValueReason = 'submit' | 'remove' | 'clear' | 'keyboard' | 'programmatic';
+type TagsInputInputReason = 'keyboard' | 'submit' | 'clear' | 'blur' | 'programmatic';
+type TagsInputRefuseCause = TagsRefuseCause;
+type TagsInputValidator = TagsValidator;
+type TagsInputCopyOutcome = ClipboardOutcome;
+interface TagsInputDefaults {
+    addOnPaste: boolean;
+    allowDuplicates: boolean;
+    clearable: boolean;
+    /** The characters that commit the typed text, and split a paste. */
+    delimiters: readonly string[];
+    disabled: boolean;
+    editable: boolean;
+    fullWidth: boolean;
+    invalid: boolean;
+    invalidValues: TagsInputInvalidValues;
+    /** The most values the list may hold, or `null` for no limit. */
+    max: number | null;
+    overflow: TagsInputOverflow;
+    pendingOnBlur: TagsInputPendingOnBlur;
+    readOnly: boolean;
+    reorderable: boolean;
+    required: boolean;
+    size: TagsInputSize;
+    variant: TagsInputVariant;
+}
+/**
+ * The numbers, and why they are these numbers. The React binding's
+ * `TAGS_INPUT_FALLBACK` states the reasoning; the values are the same, and
+ * they have to be — an application that renders both bindings would otherwise
+ * ship two controls that behave differently under the same name.
+ */
+declare const TAGS_INPUT_FALLBACK: TagsInputDefaults;
+declare const TAGS_INPUT_DEFAULTS: InjectionToken<TagsInputDefaults>;
+/**
+ * The decisions an application takes once. Its words come from the language in
+ * force (`provideSlotted`).
+ */
+declare function provideTagsInputDefaults(defaults: Partial<TagsInputDefaults>): Provider;
+declare function injectTagsInputDefaults(): TagsInputDefaults;
+
+/** The chips in the row, in the order the row holds them. */
+declare const CHIP_SELECTOR = "[data-part='chips'] > [role='gridcell']:not([data-part='field'])";
+/** The width, in CSS pixels, under which a chip has no room for a word. */
+declare const NARROW_WIDTH = 120;
+/**
+ * A frame of typed values, with a field that adds more.
+ *
+ * **The host element is the frame**, as `sl-multi-select`'s is: it carries
+ * `data-ui`, and the grid, the chips, the field, the counter and the clear
+ * button are its template.
+ *
+ * **The value is a list of texts, and the text is the label.** There is no
+ * collection behind it, which is what separates this family from
+ * `multi-select`.
+ *
+ * **A value that fails is held and shown.** Every value is judged at render —
+ * by `validate`, or by the input's own constraints through the browser — and a
+ * value that fails wears the danger tone, the alert mark and a description,
+ * marks the host, puts `invalidValues` on the form control through the
+ * `Validator`, and blocks the native submit through `setCustomValidity`.
+ *
+ * **What is refused is reported, not dropped.** `valueRefuse` carries the
+ * values that did not get in and the cause.
+ */
+declare class SlTagsInput implements ControlValueAccessor, OnInit, Validator {
+    private static readonly flag;
+    private static readonly count;
+    /** The values, in the order the reader gave them. */
+    readonly value: _angular_core.ModelSignal<readonly string[]>;
+    readonly valueChangeRequest: _angular_core.OutputEmitterRef<ChangeRequest<readonly string[]>>;
+    /** What an unbound `value` starts from, read once. */
+    readonly defaultValue: _angular_core.InputSignal<readonly string[] | undefined>;
+    /** The characters in the field, which are not yet a value. */
+    readonly inputValue: _angular_core.ModelSignal<string>;
+    readonly inputValueChangeRequest: _angular_core.OutputEmitterRef<ChangeRequest<string>>;
+    /** What the family refused, and why. It holds no state and cancels nothing. */
+    readonly valueRefuse: _angular_core.OutputEmitterRef<{
+        values: readonly string[];
+        cause: TagsInputRefuseCause;
+    }>;
+    /** What was put on the clipboard, and whether it got there. */
+    readonly valueCopy: _angular_core.OutputEmitterRef<{
+        values: readonly string[];
+        outcome: TagsInputCopyOutcome;
+    }>;
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
+    readonly placeholder: _angular_core.InputSignal<string>;
+    readonly name: _angular_core.InputSignal<string | undefined>;
+    readonly form: _angular_core.InputSignal<string | undefined>;
+    readonly type: _angular_core.InputSignal<"text" | "email" | "url" | "tel" | "search">;
+    readonly list: _angular_core.InputSignal<string | undefined>;
+    readonly pattern: _angular_core.InputSignal<string | undefined>;
+    readonly minLength: _angular_core.InputSignalWithTransform<number | undefined, string | number | undefined>;
+    readonly maxLength: _angular_core.InputSignalWithTransform<number | undefined, string | number | undefined>;
+    readonly inputMode: _angular_core.InputSignal<string | undefined>;
+    readonly autocomplete: _angular_core.InputSignal<string | undefined>;
+    /** BCP 47, for the comparison the duplicate rule makes. The language in force when absent. */
+    readonly locale: _angular_core.InputSignal<string | undefined>;
+    /** `validateValue` rather than `validate`, which is the Validator's own method. */
+    readonly validateValue: _angular_core.InputSignal<_slotted_core_tags.TagsValidator | undefined>;
+    /** Runs before a value is judged. Trim by default. */
+    readonly normalize: _angular_core.InputSignal<((text: string) => string) | undefined>;
+    /** How a paste is split. The default splits on the delimiters and on line breaks. */
+    readonly split: _angular_core.InputSignal<((text: string) => readonly string[]) | undefined>;
+    /** The chip's text for a value. */
+    readonly formatLabel: _angular_core.InputSignal<((value: string) => string) | undefined>;
+    /** The values the reader may not remove. */
+    readonly lockedValues: _angular_core.InputSignal<readonly string[]>;
+    readonly delimiters: _angular_core.InputSignal<readonly string[] | undefined>;
+    readonly max: _angular_core.InputSignalWithTransform<number | undefined, string | number | undefined>;
+    readonly size: _angular_core.InputSignal<TagsInputSize | undefined>;
+    readonly variant: _angular_core.InputSignal<TagsInputVariant | undefined>;
+    readonly overflow: _angular_core.InputSignal<TagsInputOverflow | undefined>;
+    readonly invalidValues: _angular_core.InputSignal<TagsInputInvalidValues | undefined>;
+    readonly pendingOnBlur: _angular_core.InputSignal<TagsInputPendingOnBlur | undefined>;
+    /**
+     * Words laid over the catalog of the language in force, key by key: the
+     * clear button, the chips, the counter, the hint, and the sentences the
+     * announcer says.
+     */
+    readonly messages: _angular_core.InputSignal<PartialMessages<TagsInputMessages> | undefined>;
+    readonly addOnPaste: _angular_core.InputSignalWithTransform<boolean | undefined, string | boolean | undefined>;
+    readonly allowDuplicates: _angular_core.InputSignalWithTransform<boolean | undefined, string | boolean | undefined>;
+    readonly editable: _angular_core.InputSignalWithTransform<boolean | undefined, string | boolean | undefined>;
+    readonly reorderable: _angular_core.InputSignalWithTransform<boolean | undefined, string | boolean | undefined>;
+    readonly clearable: _angular_core.InputSignalWithTransform<boolean | undefined, string | boolean | undefined>;
+    readonly fullWidth: _angular_core.InputSignalWithTransform<boolean | undefined, string | boolean | undefined>;
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean | undefined, string | boolean | undefined>;
+    readonly readOnly: _angular_core.InputSignalWithTransform<boolean | undefined, string | boolean | undefined>;
+    readonly required: _angular_core.InputSignalWithTransform<boolean | undefined, string | boolean | undefined>;
+    readonly invalid: _angular_core.InputSignalWithTransform<boolean | undefined, string | boolean | undefined>;
+    private readonly defaults;
+    /** The family's words in the language in force, with this control's `messages` laid over them. */
+    readonly t: _slotted_core_i18n.FamilyTranslator<TagsInputMessages>;
+    private readonly inForceLocale;
+    private readonly host;
+    private readonly controlRef;
+    private readonly rowRef;
+    private readonly countRef;
+    readonly field: SlField | null;
+    private readonly identifier;
+    private readonly ownId;
+    readonly hintId: string;
+    readonly hiddenCount: _angular_core.WritableSignal<number>;
+    readonly narrow: _angular_core.WritableSignal<boolean>;
+    readonly expanded: _angular_core.WritableSignal<boolean>;
+    /** The value a refused duplicate is already held under, marked for one long step. */
+    readonly current: _angular_core.WritableSignal<string | null>;
+    readonly editingIndex: _angular_core.WritableSignal<number | null>;
+    readonly editingText: _angular_core.WritableSignal<string>;
+    private ring;
+    private removal;
+    private collapse;
+    private gate;
+    private currentTimer;
+    private reverting;
+    private disabledByForm;
+    private readonly hostId;
+    private onChange;
+    private onTouched;
+    private validatorChange;
+    readonly resolvedSize: _angular_core.Signal<TagsInputSize>;
+    readonly resolvedVariant: _angular_core.Signal<TagsInputVariant>;
+    readonly resolvedOverflow: _angular_core.Signal<TagsInputOverflow>;
+    readonly resolvedInvalidValues: _angular_core.Signal<TagsInputInvalidValues>;
+    readonly resolvedPendingOnBlur: _angular_core.Signal<TagsInputPendingOnBlur>;
+    readonly resolvedClearable: _angular_core.Signal<boolean>;
+    readonly resolvedFullWidth: _angular_core.Signal<boolean>;
+    readonly resolvedEditable: _angular_core.Signal<boolean>;
+    readonly resolvedReorderable: _angular_core.Signal<boolean>;
+    readonly resolvedAddOnPaste: _angular_core.Signal<boolean>;
+    readonly resolvedAllowDuplicates: _angular_core.Signal<boolean>;
+    readonly resolvedDelimiters: _angular_core.Signal<readonly string[]>;
+    readonly resolvedMax: _angular_core.Signal<number | null>;
+    readonly resolvedDisabled: _angular_core.Signal<boolean>;
+    readonly resolvedReadOnly: _angular_core.Signal<boolean>;
+    readonly resolvedRequired: _angular_core.Signal<boolean>;
+    readonly resolvedInvalid: _angular_core.Signal<boolean>;
+    readonly controlId: _angular_core.Signal<string>;
+    readonly describedBy: _angular_core.Signal<string | null>;
+    readonly frozen: _angular_core.Signal<boolean>;
+    readonly collapsing: _angular_core.Signal<boolean>;
+    /** The list has reached `max` and takes nothing more. */
+    readonly full: _angular_core.Signal<boolean>;
+    private readonly collator;
+    /**
+     * A detached input carrying the visible one's constraints, rebuilt when they
+     * change, so the platform's judgement reads the attributes the template is
+     * about to write rather than the ones it wrote last time.
+     */
+    private readonly probe;
+    /**
+     * Validity is a function of the value alone, judged at render, so a value a
+     * form wrote in with an invalid entry is marked like one the reader typed.
+     */
+    readonly verdicts: _angular_core.Signal<readonly TagsVerdict[]>;
+    readonly firstFailure: _angular_core.Signal<{
+        valid: false;
+        message: string;
+    } | undefined>;
+    readonly isInvalid: _angular_core.Signal<boolean>;
+    readonly countText: _angular_core.Signal<string>;
+    readonly gridLabel: _angular_core.Signal<string | null>;
+    readonly gridLabelledBy: _angular_core.Signal<string | null>;
+    readonly hintText: _angular_core.Signal<string>;
+    readonly showClear: _angular_core.Signal<boolean>;
+    readonly counterText: _angular_core.Signal<string | null>;
+    constructor();
+    ngOnInit(): void;
+    protected trackChip(index: number, value: string): string;
+    labelFor(value: string): string;
+    isLocked(value: string): boolean;
+    protected chipFrozen(value: string): boolean;
+    protected messageId(index: number): string;
+    protected messageFor(index: number): string | null;
+    protected removeLabelFor(value: string): string;
+    protected chipLabel(value: string, index: number): string | null;
+    private judge;
+    focus(): void;
+    private announce;
+    setInputValue(next: string, reason: TagsInputInputReason, source?: Event): void;
+    /** One request for one transition, whatever moved the list. */
+    private commit;
+    /**
+     * The one door into the list. Every candidate runs the sequence
+     * `@slotted/core/tags` states — normalise, judge, deduplicate, cap — and each
+     * refusal is reported under its cause rather than dropped.
+     */
+    admit(candidates: readonly string[], source?: Event, replacing?: number): _slotted_core_tags.AdmitResult;
+    /** The chip that answered a duplicate stays marked for one long step. */
+    private markCurrent;
+    remove(index: number, source?: Event): void;
+    clear(source?: Event): void;
+    /** Reorder, and the only shape it has: one value moving to one index. */
+    move(from: number, to: number, source?: Event): void;
+    copy(values: readonly string[]): Promise<void>;
+    setValue(values: readonly string[], reason?: TagsInputValueReason): void;
+    private chips;
+    private focusChip;
+    private splitText;
+    /** The typed text, committed as one or several values. */
+    private commitText;
+    protected onInput(event: Event): void;
+    protected onEditInput(event: Event): void;
+    protected onEditKeyDown(index: number, event: KeyboardEvent): void;
+    protected commitEdit(index: number, event: Event): void;
+    private beginEdit;
+    protected onChipDoubleClick(value: string, index: number): void;
+    protected onChipKeyDown(value: string, index: number, event: KeyboardEvent): void;
+    protected onKeyDown(event: KeyboardEvent): void;
+    /** A paste that carries several values, split by the same rule the key reads. */
+    protected onPaste(event: ClipboardEvent): void;
+    protected onBlur(event: FocusEvent): void;
+    protected onFocusIn(): void;
+    protected onFocusOut(event: FocusEvent): void;
+    protected onClear(event: MouseEvent): void;
+    protected onRemoveClick(index: number, event: MouseEvent): void;
+    private bindRow;
+    writeValue(value: readonly string[] | null): void;
+    registerOnChange(fn: (value: readonly string[]) => void): void;
+    registerOnTouched(fn: () => void): void;
+    registerOnValidatorChange(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    /**
+     * Four validities the family owns: a required control holding nothing, a
+     * list over its limit, a list holding a value twice where duplicates are
+     * refused, and — the one no other family reports — the values in the list
+     * that failed the judgement, by name, so a form can say which.
+     */
+    validate(): ValidationErrors | null;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlTagsInput, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SlTagsInput, "sl-tags-input", ["slTagsInput"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "defaultValue": { "alias": "defaultValue"; "required": false; "isSignal": true; }; "inputValue": { "alias": "inputValue"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "form": { "alias": "form"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "list": { "alias": "list"; "required": false; "isSignal": true; }; "pattern": { "alias": "pattern"; "required": false; "isSignal": true; }; "minLength": { "alias": "minLength"; "required": false; "isSignal": true; }; "maxLength": { "alias": "maxLength"; "required": false; "isSignal": true; }; "inputMode": { "alias": "inputMode"; "required": false; "isSignal": true; }; "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "validateValue": { "alias": "validateValue"; "required": false; "isSignal": true; }; "normalize": { "alias": "normalize"; "required": false; "isSignal": true; }; "split": { "alias": "split"; "required": false; "isSignal": true; }; "formatLabel": { "alias": "formatLabel"; "required": false; "isSignal": true; }; "lockedValues": { "alias": "lockedValues"; "required": false; "isSignal": true; }; "delimiters": { "alias": "delimiters"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "overflow": { "alias": "overflow"; "required": false; "isSignal": true; }; "invalidValues": { "alias": "invalidValues"; "required": false; "isSignal": true; }; "pendingOnBlur": { "alias": "pendingOnBlur"; "required": false; "isSignal": true; }; "messages": { "alias": "messages"; "required": false; "isSignal": true; }; "addOnPaste": { "alias": "addOnPaste"; "required": false; "isSignal": true; }; "allowDuplicates": { "alias": "allowDuplicates"; "required": false; "isSignal": true; }; "editable": { "alias": "editable"; "required": false; "isSignal": true; }; "reorderable": { "alias": "reorderable"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "fullWidth": { "alias": "fullWidth"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readOnly": { "alias": "readOnly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "valueChangeRequest": "valueChangeRequest"; "inputValue": "inputValueChange"; "inputValueChangeRequest": "inputValueChangeRequest"; "valueRefuse": "valueRefuse"; "valueCopy": "valueCopy"; }, never, never, true, never>;
+}
+
+export { CHIP_SELECTOR, NARROW_WIDTH, SlTagsInput, TAGS_INPUT_DEFAULTS, TAGS_INPUT_FALLBACK, injectTagsInputDefaults, provideTagsInputDefaults };
+export type { TagsInputCopyOutcome, TagsInputDefaults, TagsInputInputReason, TagsInputInvalidValues, TagsInputOverflow, TagsInputPendingOnBlur, TagsInputRefuseCause, TagsInputSize, TagsInputValidator, TagsInputValueReason, TagsInputVariant };
+//# sourceMappingURL=slotted-angular-tags-input.d.ts.map

package/types/slotted-angular-tags-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slotted-angular-tags-input.d.ts","sources":["../../tags-input/src/tags-input-defaults.ts","../../tags-input/src/tags-input.ts"],"mappings":"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","names":[]}

package/types/slotted-angular-text-field.d.ts

@@ -0,0 +1,334 @@
+import * as _slotted_core_i18n from '@slotted/core/i18n';
+import { PartialMessages, TextFieldMessages } from '@slotted/core/i18n';
+import * as _slotted_angular_text_field from '@slotted/angular/text-field';
+import * as _angular_core from '@angular/core';
+import { Signal, InjectionToken, OnInit } from '@angular/core';
+import { ChangeRequest } from '@slotted/core/state';
+import { ControlValueAccessor } from '@angular/forms';
+
+/** The type step the control sits at, matching the field around it. */
+type TextFieldSize = 'sm' | 'md' | 'lg';
+/**
+ * How much frame the control shows. `outline` takes the ground it is placed on,
+ * `subtle` sinks into the page, and `plain` shows nothing at rest — which is
+ * what a dense table needs: a cell that is only a control while it is used, and
+ * that keeps the same box so the row does not reflow under the pointer.
+ */
+type TextFieldVariant = 'outline' | 'subtle' | 'plain';
+/**
+ * The six text types. Anything else an `input` accepts still reaches the
+ * element, because the consumer writes it there; the six are the ones this
+ * family paints, sizes and reveals.
+ */
+type TextFieldType = 'text' | 'search' | 'email' | 'url' | 'tel' | 'password';
+interface TextFieldDefaults {
+    mono: boolean;
+    size: TextFieldSize;
+    variant: TextFieldVariant;
+}
+declare const TEXT_FIELD_DEFAULTS: InjectionToken<TextFieldDefaults>;
+/**
+ * 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.
+ */
+declare function provideTextFieldDefaults(defaults: Partial<TextFieldDefaults>): {
+    provide: InjectionToken<TextFieldDefaults>;
+    useFactory: () => TextFieldDefaults;
+};
+/** What a text field renders as here, before it states anything of its own. */
+declare function injectTextFieldDefaults(): TextFieldDefaults;
+/**
+ * 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.
+ */
+declare abstract class SlTextFieldControl {
+    /** Whether there is anything to clear. */
+    abstract readonly empty: Signal<boolean>;
+    /** Whether the control is a password, which is what the toggle is for. */
+    abstract readonly password: Signal<boolean>;
+    /** Whether the password is currently showing. */
+    abstract readonly revealed: Signal<boolean>;
+    /** Whether Caps Lock is on while a password has focus. */
+    abstract readonly capsLock: Signal<boolean>;
+    /** What the element shows, for the copy button. */
+    abstract readonly currentValue: Signal<string>;
+    abstract readonly resolvedDisabled: Signal<boolean | undefined>;
+    abstract readonly resolvedReadOnly: Signal<boolean | undefined>;
+    abstract readonly resolvedInvalid: Signal<boolean | undefined>;
+    /** Empties the value with reason `clear` and returns focus to the control. */
+    abstract clear(source: Event): void;
+    /** Turns the password from dots into characters, and holds the caret. */
+    abstract toggleReveal(source: Event): void;
+}
+/** What a finished copy reports: whether the clipboard took it, and why it was asked. */
+interface TextFieldCopyDetail {
+    copied: boolean;
+    reason: 'pointer' | 'keyboard';
+    source: Event;
+    value: string;
+}
+
+/**
+ * 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.
+ */
+declare class SlTextField {
+    /** Defaults to the field, then to the token, then to `md`. */
+    readonly size: _angular_core.InputSignal<TextFieldSize | undefined>;
+    /** Defaults to the token, then to `outline`. */
+    readonly variant: _angular_core.InputSignal<TextFieldVariant | undefined>;
+    /** Sets the value in the monospaced family, for identifiers, hashes and keys. */
+    readonly mono: _angular_core.InputSignalWithTransform<boolean | undefined, string | boolean | undefined>;
+    /** Draws a button that empties the value and returns focus to the control. */
+    readonly clearable: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Draws a toggle that turns a password from dots into characters. */
+    readonly revealable: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * 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.
+     */
+    readonly copyable: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * 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.
+     */
+    readonly messages: _angular_core.InputSignal<PartialMessages<TextFieldMessages> | undefined>;
+    /**
+     * 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.
+     */
+    readonly loading: _angular_core.InputSignalWithTransform<boolean | undefined, string | boolean | undefined>;
+    /** Once the copy button has asked the clipboard, with the outcome. */
+    readonly valueCopy: _angular_core.OutputEmitterRef<TextFieldCopyDetail>;
+    protected readonly defaults: _slotted_angular_text_field.TextFieldDefaults;
+    private readonly element;
+    protected readonly copied: _angular_core.WritableSignal<boolean>;
+    private copiedTimer;
+    private readonly field;
+    /**
+     * 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.
+     */
+    readonly control: _angular_core.Signal<SlTextFieldControl | undefined>;
+    readonly resolvedSize: _angular_core.Signal<TextFieldSize>;
+    readonly resolvedVariant: _angular_core.Signal<TextFieldVariant>;
+    readonly resolvedMono: _angular_core.Signal<boolean>;
+    /** The family's words in the language in force, with this field's `messages` laid over them. */
+    readonly t: _slotted_core_i18n.FamilyTranslator<TextFieldMessages>;
+    /**
+     * 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.
+     */
+    protected readonly showClear: _angular_core.Signal<boolean>;
+    /** A read-only value may still be copied: only an empty or disabled one withdraws it. */
+    protected readonly showCopy: _angular_core.Signal<boolean>;
+    constructor();
+    protected copy(event: MouseEvent): Promise<void>;
+    /** A read-only password may still be read: only `disabled` withdraws it. */
+    protected readonly showReveal: _angular_core.Signal<boolean>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlTextField, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SlTextField, "[slTextField]", ["slTextField"], { "size": { "alias": "size"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "mono": { "alias": "mono"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "revealable": { "alias": "revealable"; "required": false; "isSignal": true; }; "copyable": { "alias": "copyable"; "required": false; "isSignal": true; }; "messages": { "alias": "messages"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; }, { "valueCopy": "valueCopy"; }, ["control"], ["[slTextFieldStart]", "*", "[slTextFieldEnd]"], true, never>;
+}
+
+/**
+ * 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.
+ */
+declare class SlTextFieldInput implements ControlValueAccessor, OnInit, SlTextFieldControl {
+    /** Present means the consumer owns the value. */
+    readonly value: _angular_core.InputSignal<string | undefined>;
+    /** The value the control starts from when nobody else writes one. */
+    readonly defaultValue: _angular_core.InputSignal<string | undefined>;
+    /** Unstated rather than `false`, so the control defers to the field. */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean | undefined, string | boolean | undefined>;
+    /** Unstated rather than `false`. Reaches the element as the native `readonly`. */
+    readonly readOnly: _angular_core.InputSignalWithTransform<boolean | undefined, string | boolean | undefined>;
+    /** Unstated rather than `false`. Reaches the element as `aria-invalid`. */
+    readonly invalid: _angular_core.InputSignalWithTransform<boolean | undefined, string | boolean | undefined>;
+    /** Publishes the length of the value to the field, which draws the count. */
+    readonly showCount: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * 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.
+     */
+    readonly countMax: _angular_core.InputSignalWithTransform<number | undefined, unknown>;
+    /** Present means the consumer owns whether the password is showing. */
+    readonly revealedValue: _angular_core.InputSignalWithTransform<boolean | undefined, string | boolean | undefined>;
+    readonly defaultRevealed: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * 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.
+     */
+    readonly type: _angular_core.InputSignal<string | undefined>;
+    /**
+     * 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`.
+     */
+    readonly valueChange: _angular_core.OutputEmitterRef<ChangeRequest<string>>;
+    readonly revealedChange: _angular_core.OutputEmitterRef<ChangeRequest<boolean>>;
+    private readonly element;
+    private readonly 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.
+     */
+    readonly textField: SlTextField;
+    private readonly field;
+    private readonly writtenId;
+    private readonly writtenDescribedBy;
+    private readonly writtenInvalid;
+    private readonly writtenRequired;
+    private readonly writtenReadonly;
+    private readonly writtenMaxLength;
+    /** What the element is showing. Never a second copy of the value. */
+    private readonly mirror;
+    private readonly ownRevealed;
+    private readonly formDisabled;
+    private onChangeFn;
+    private onTouchedFn;
+    private readonly ownCapsLock;
+    readonly capsLock: _angular_core.Signal<boolean>;
+    readonly currentValue: _angular_core.Signal<string>;
+    readonly empty: _angular_core.Signal<boolean>;
+    readonly revealed: _angular_core.Signal<boolean>;
+    private readonly ownType;
+    readonly password: _angular_core.Signal<boolean>;
+    readonly resolvedDisabled: _angular_core.Signal<boolean | undefined>;
+    readonly resolvedReadOnly: _angular_core.Signal<boolean | undefined>;
+    readonly resolvedInvalid: _angular_core.Signal<boolean | undefined>;
+    protected readonly controlId: _angular_core.Signal<string | null>;
+    /**
+     * 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.
+     */
+    protected readonly resolvedType: _angular_core.Signal<string>;
+    /** Merged after the consumer's own, so a tour step is read before the help. */
+    protected readonly describedBy: _angular_core.Signal<string | null>;
+    protected readonly ariaInvalid: _angular_core.Signal<string | null>;
+    protected readonly ariaRequired: _angular_core.Signal<string | null>;
+    protected readonly disabledAttribute: _angular_core.Signal<"" | null>;
+    protected readonly readonlyAttribute: _angular_core.Signal<"" | null>;
+    private readonly limit;
+    constructor();
+    /**
+     * 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(): void;
+    /** The native element, for `focus()`, `select()` and `setSelectionRange()`. */
+    get inputElement(): HTMLInputElement;
+    writeValue(value: string | null | undefined): void;
+    registerOnChange(fn: (value: string) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    clear(source: Event): void;
+    toggleReveal(source: Event): void;
+    protected onInput(event: Event): void;
+    protected onBlur(): void;
+    /**
+     * 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.
+     */
+    protected readCapsLock(event: KeyboardEvent): void;
+    /** Emits the request and says whether anything may commit. */
+    private request;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlTextFieldInput, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SlTextFieldInput, "input[slTextFieldInput]", ["slTextFieldInput"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "defaultValue": { "alias": "defaultValue"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readOnly": { "alias": "readOnly"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "showCount": { "alias": "showCount"; "required": false; "isSignal": true; }; "countMax": { "alias": "countMax"; "required": false; "isSignal": true; }; "revealedValue": { "alias": "revealed"; "required": false; "isSignal": true; }; "defaultRevealed": { "alias": "defaultRevealed"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; "revealedChange": "revealedChange"; }, never, never, true, never>;
+}
+
+/**
+ * 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.
+ */
+declare class SlTextFieldStart {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlTextFieldStart, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SlTextFieldStart, "[slTextFieldStart]", ["slTextFieldStart"], {}, {}, never, never, true, never>;
+}
+/** An adornment after the value in the reading direction. */
+declare class SlTextFieldEnd {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlTextFieldEnd, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SlTextFieldEnd, "[slTextFieldEnd]", ["slTextFieldEnd"], {}, {}, never, never, true, never>;
+}
+/**
+ * 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.
+ */
+declare class SlTextFieldAction {
+    protected readonly type: string;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlTextFieldAction, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SlTextFieldAction, "button[slTextFieldAction]", ["slTextFieldAction"], {}, {}, never, never, true, never>;
+}
+
+export { SlTextField, SlTextFieldAction, SlTextFieldControl, SlTextFieldEnd, SlTextFieldInput, SlTextFieldStart, TEXT_FIELD_DEFAULTS, injectTextFieldDefaults, provideTextFieldDefaults };
+export type { TextFieldCopyDetail, TextFieldDefaults, TextFieldSize, TextFieldType, TextFieldVariant };
+//# sourceMappingURL=slotted-angular-text-field.d.ts.map