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

package/fesm2022/slotted-angular-field.mjs

@@ -0,0 +1,928 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, Injectable, HostAttributeToken, computed, input, booleanAttribute, Directive, ElementRef, signal, DestroyRef, afterNextRender, contentChild, forwardRef, ViewEncapsulation, ChangeDetectionStrategy, Component, effect } from '@angular/core';
+import { injectMessages } from '@slotted/angular/i18n';
+import { SlInlineMessage } from '@slotted/angular/inline-message';
+import { fieldMessages } from '@slotted/core/i18n';
+import { SlGlyph, SlIcon } from '@slotted/angular/icon';
+import * as i1 from '@slotted/angular/tooltip';
+import { SlTooltip, SlTooltipArrow, SlTooltipContent, SlTooltipLayer, provideTooltipDefaults, SlTooltipTrigger } from '@slotted/angular/tooltip';
+
+const FIELD_DESCRIBED_ORDER = [
+    'indicator',
+    'help',
+    'description',
+    'counter',
+    'error',
+];
+const FALLBACK = {
+    disabled: undefined,
+    labelPlacement: 'top',
+    necessity: 'mark',
+    readOnly: undefined,
+    size: 'md',
+};
+const FIELD_DEFAULTS = new InjectionToken('slotted field defaults', {
+    providedIn: 'root',
+    factory: () => FALLBACK,
+});
+/**
+ * An application decides once what its fields look like, rather than repeating
+ * the same inputs on every field in a form. Their words come from the language
+ * in force (`provideSlotted`).
+ * `SlFieldGroup` provides an overriding value for its own subtree, so a compact
+ * section — or a disabled one — is one attribute rather than one per field.
+ *
+ * Among the surveyed implementations only Angular Material ships
+ * application-wide defaults, and this is that idea taken to both bindings.
+ *
+ * `disabled` and `readOnly` are here and `invalid` and `required` are not. The
+ * first two describe a context a whole section can be in; the second two are
+ * facts about one value, and a token that set them would mark every field in an
+ * application as required for a reason no field could name.
+ */
+function provideFieldDefaults(defaults) {
+    return {
+        provide: FIELD_DEFAULTS,
+        useFactory: () => ({
+            disabled: defaults.disabled ?? FALLBACK.disabled,
+            labelPlacement: defaults.labelPlacement ?? FALLBACK.labelPlacement,
+            necessity: defaults.necessity ?? FALLBACK.necessity,
+            readOnly: defaults.readOnly ?? FALLBACK.readOnly,
+            size: defaults.size ?? FALLBACK.size,
+        }),
+    };
+}
+/** What a field renders as here, before it states anything of its own. */
+function injectFieldDefaults() {
+    return inject(FIELD_DEFAULTS);
+}
+/**
+ * A component in the tree answering for the fields under it, which is what
+ * `field-group` is. It exists as a class of its own so `@slotted/angular/field`
+ * never has to know that `field-group` exists — the dependency runs one way,
+ * from the group to the field.
+ *
+ * It is read rather than snapshotted, because Angular creates every directive
+ * in a template before it binds any input: a group that handed its fields a
+ * value in its constructor would hand them the value its inputs had before the
+ * consumer's bindings ran, which is the default for all six.
+ */
+class SlFieldDefaultsSource {
+}
+/** The identifiers a field derives from its base, in one place. */
+function deriveFieldIds(base) {
+    return {
+        control: `${base}-control`,
+        counter: `${base}-counter`,
+        description: `${base}-description`,
+        error: `${base}-error`,
+        help: `${base}-help`,
+        indicator: `${base}-indicator`,
+        label: `${base}-label`,
+    };
+}
+/**
+ * What the necessity mark says, and whether a reader hears it. The asterisk is
+ * hidden, because `aria-required` on the control already carries the fact and a
+ * form of twenty required fields does not need "asterisk" twenty times; the
+ * words are not, because `(optional)` is information rather than decoration.
+ * `null` when nothing is drawn. `slFieldGroupLegend` draws its mark with the
+ * same answer.
+ */
+function necessityMark(necessity, required, t) {
+    switch (necessity) {
+        case 'mark':
+            return required ? { hidden: true, text: '*' } : null;
+        case 'optional':
+            return required ? null : { hidden: false, text: t('optional') };
+        case 'words':
+            return { hidden: false, text: t(required ? 'required' : 'optional') };
+        case 'none':
+            return null;
+    }
+}
+/**
+ * The field as the parts that live in a module `field.ts` imports see it — the
+ * counter today. Provided by `SlField` as itself, so the counter reaches the
+ * field's identifiers without importing it, which would be a cycle.
+ */
+class SlFieldContext {
+}
+/**
+ * The parts the field looks for without importing them. Each part provides
+ * its marker as itself, and the field queries the marker; importing the part
+ * classes into `field.ts` would be a cycle, since every one of them injects
+ * `SlField`.
+ */
+class SlFieldHeaderSlot {
+}
+class SlFieldHelpSlot {
+}
+class SlFieldIndicatorSlot {
+}
+/**
+ * Application-scoped rather than module-scoped, for the reason `inline-message`
+ * records: a module-level counter produces colliding sequences when two
+ * applications render in one server process, and the server and the client
+ * sequences must match for hydration.
+ */
+class SlFieldIdFactory {
+    count = 0;
+    next() {
+        this.count += 1;
+        return `slotted-field-${this.count}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlFieldIdFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlFieldIdFactory, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlFieldIdFactory, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * How a count reads: `12/280` when there is a limit and `12` when there is
+ * none. Carbon and Polaris both write the pair; Angular Material writes it in
+ * the subscript, where a count that appears on the first keystroke shares a row
+ * with the error and pushes it.
+ */
+function formatFieldCount(count) {
+    return count.max === undefined ? String(count.length) : `${count.length}/${count.max}`;
+}
+/** Whether a count has passed the limit it was given. */
+function isFieldCountOver(count) {
+    return count.max !== undefined && count.length > count.max;
+}
+/**
+ * A count the page writes itself, at the end of the label row — which is where
+ * Carbon puts it. Angular Material puts it in the subscript beside the error,
+ * where a count that appears on the first keystroke shares a row with the
+ * message and pushes it.
+ *
+ * A field whose control publishes a count gets a counter drawn by the field, so
+ * this directive is for the page that counts something the control cannot:
+ * words, bytes, line items. Writing one withdraws the field's own, because two
+ * counters in one row is one row too many.
+ *
+ * It lives in a module of its own so `field.ts` can look for it without
+ * importing the parts that inject `SlField`, which would be a cycle; it reaches
+ * the field through `SlFieldContext` for the same reason.
+ */
+class SlFieldCounter {
+    field = inject(SlFieldContext, { optional: true });
+    writtenId = inject(new HostAttributeToken('id'), { optional: true });
+    /**
+     * The identifier the field's description reads the count by, which
+     * `docs/component-features.md` §2.8 requires of a counter. A consumer's own
+     * `id` wins.
+     */
+    counterId = computed(() => this.writtenId ?? this.field?.ids().counter ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "counterId" }] : /* istanbul ignore next */ []));
+    /**
+     * The count has passed its limit. It is the counter's own state rather than
+     * the field's: a count can pass its maximum while validation has not run, and
+     * a counter that only turned at submit would say nothing at the moment it is
+     * being read.
+     */
+    invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlFieldCounter, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.7", type: SlFieldCounter, isStandalone: true, selector: "[slFieldCounter]", inputs: { invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-part": "counter" }, properties: { "attr.id": "counterId()", "attr.data-invalid": "invalid() ? '' : null" } }, exportAs: ["slFieldCounter"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlFieldCounter, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slFieldCounter]',
+                    standalone: true,
+                    exportAs: 'slFieldCounter',
+                    host: {
+                        'data-part': 'counter',
+                        '[attr.id]': 'counterId()',
+                        '[attr.data-invalid]': "invalid() ? '' : null",
+                    },
+                }]
+        }], propDecorators: { invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }] } });
+
+/**
+ * What the page wants said, and how — carried by the element the page writes
+ * and read by the field, which renders the `inline-message` around it.
+ *
+ * The field renders the message rather than the page, because `SlInlineMessage`
+ * takes its values as `input()` signals and nothing outside the template that
+ * instantiates it can write one. A directive sharing the element could only set
+ * attributes the component's own host bindings would then overwrite, and the
+ * identifier the field derives is exactly such a value.
+ */
+class SlFieldMessage {
+    /** Replaces the message's own tone. `inline-message` owns the five. */
+    tone = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
+    /** Whether the message announces itself when it arrives. */
+    live = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "live" }] : /* istanbul ignore next */ []));
+    /**
+     * Which mark the message draws. A field's messages default to `none`, and
+     * `glyph` asks for the tone's own silhouette, `dot` for one neutral bullet.
+     */
+    mark = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mark" }] : /* istanbul ignore next */ []));
+    /** The word read before the message; the empty string removes it. */
+    prefix = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "prefix" }] : /* istanbul ignore next */ []));
+    /** Draws no mark, for a message that carries its own artwork. */
+    hideIcon = input(false, { ...(ngDevMode ? { debugName: "hideIcon" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Holds one line box open so nothing below moves when the message arrives. */
+    reserve = input(false, { ...(ngDevMode ? { debugName: "reserve" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    host = inject(ElementRef).nativeElement;
+    content = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether the message has text to say. An empty one — a `reserve` line
+     * waiting for its text — keeps its box and describes nothing, which is what
+     * React's messages register.
+     *
+     * It is read after the template that declares the message writes its text
+     * and before the host bindings of that template run, so the first render,
+     * the only one a server performs, names exactly the messages that have text.
+     * In the browser an observer also reports text that arrives from anywhere
+     * else.
+     */
+    hasContent = this.content.asReadonly();
+    constructor() {
+        const destroyRef = inject(DestroyRef);
+        afterNextRender(() => {
+            const observer = new MutationObserver(() => this.read());
+            observer.observe(this.host, { characterData: true, childList: true, subtree: true });
+            destroyRef.onDestroy(() => observer.disconnect());
+        });
+    }
+    ngAfterContentChecked() {
+        this.read();
+    }
+    read() {
+        this.content.set((this.host.textContent ?? '').trim() !== '');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlFieldMessage, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.7", type: SlFieldMessage, isStandalone: true, inputs: { tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, live: { classPropertyName: "live", publicName: "live", isSignal: true, isRequired: false, transformFunction: null }, mark: { classPropertyName: "mark", publicName: "mark", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, hideIcon: { classPropertyName: "hideIcon", publicName: "hideIcon", isSignal: true, isRequired: false, transformFunction: null }, reserve: { classPropertyName: "reserve", publicName: "reserve", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlFieldMessage, decorators: [{
+            type: Directive
+        }], ctorParameters: () => [], propDecorators: { tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], live: [{ type: i0.Input, args: [{ isSignal: true, alias: "live", required: false }] }], mark: [{ type: i0.Input, args: [{ isSignal: true, alias: "mark", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], hideIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideIcon", required: false }] }], reserve: [{ type: i0.Input, args: [{ isSignal: true, alias: "reserve", required: false }] }] } });
+/**
+ * Help about the field, projected into the `inline-message` the field renders.
+ *
+ * It arrives with a tone, a mark, a clipped severity word an application
+ * translates once and a reserved line — none of which the field reimplements.
+ * `docs/process/build-order.md` states that as the reason `inline-message` was built
+ * in wave 2.
+ */
+class SlFieldDescription extends SlFieldMessage {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlFieldDescription, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlFieldDescription, isStandalone: true, selector: "[slFieldDescription]", exportAs: ["slFieldDescription"], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlFieldDescription, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slFieldDescription]',
+                    standalone: true,
+                    exportAs: 'slFieldDescription',
+                }]
+        }] });
+/**
+ * What is wrong with the value, in words — which is what WCAG 2.2 SC 3.3.1
+ * requires and what colour and a mark alone do not satisfy.
+ *
+ * `tone` accepts the other four, so a warning that does not block submission is
+ * the same part in another tone rather than a member of its own. Fluent spends
+ * a `validationState` axis on that distinction and Carbon a second component.
+ */
+class SlFieldError extends SlFieldMessage {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlFieldError, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlFieldError, isStandalone: true, selector: "[slFieldError]", exportAs: ["slFieldError"], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlFieldError, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slFieldError]',
+                    standalone: true,
+                    exportAs: 'slFieldError',
+                }]
+        }] });
+
+/**
+ * One control, its name, its necessity, its help and its error — and the
+ * identifiers that bind the four together.
+ *
+ * **Every shared state is unset rather than `false`.** `disabled`, `invalid`,
+ * `required` and `readOnly` default to `undefined`, so a field defers to the
+ * `slFieldGroup` around it and the group to the application. A field that
+ * defaulted to `false` could not be told from a consumer saying "not disabled",
+ * and it would quietly override a disabled section.
+ *
+ * **The identifiers are derived, not registered.** One base yields four, so
+ * `label[for]` resolves to the identifier the control will use with no ordering
+ * dependency between siblings and nothing to coordinate during hydration.
+ *
+ * **The field renders its own messages.** The page writes what it wants said —
+ * `<span slFieldError>` — and the field puts it inside an `inline-message` it
+ * renders itself, with the identifier, the step and the disabled state already
+ * resolved. `SlInlineMessage` takes its values as `input()` signals, and nothing
+ * outside the template that instantiates it can write one; a directive sharing
+ * the element could only set attributes its host bindings would overwrite. A
+ * message the page did not write is not drawn, which is the DOM React's
+ * `FieldDescription` and `FieldError` produce.
+ */
+class SlField {
+    /** Defaults to the token, then to `md`. */
+    size = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Defaults to the token, then to `top`. */
+    labelPlacement = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelPlacement" }] : /* istanbul ignore next */ []));
+    /** Defaults to the token, then to `mark`. */
+    necessity = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "necessity" }] : /* istanbul ignore next */ []));
+    /**
+     * Words laid over the catalog of the language in force, key by key: the
+     * necessity words (`optional`, `required`) and the help control's name (`help`).
+     */
+    messages = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []));
+    /**
+     * Unstated rather than `false`, so the field defers to its group and the group
+     * to the application. Stated, it wins, and it reaches the control as the
+     * native attribute: removing it from the tab order and from submission is what
+     * the word means.
+     */
+    disabled = input(undefined, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: (value) => (value === undefined ? undefined : booleanAttribute(value)) });
+    /** Unstated rather than `false`. Reaches the control as `aria-invalid`. */
+    invalid = input(undefined, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: (value) => (value === undefined ? undefined : booleanAttribute(value)) });
+    /**
+     * Unstated rather than `false`. Reaches the control as `aria-required` and
+     * never as the native `required`, which would engage browser constraint
+     * validation and change submit behaviour.
+     */
+    required = input(undefined, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: (value) => (value === undefined ? undefined : booleanAttribute(value)) });
+    /** Unstated rather than `false`. Reaches the control as the native `readonly`. */
+    readOnly = input(undefined, { ...(ngDevMode ? { debugName: "readOnly" } : /* istanbul ignore next */ {}), transform: (value) => (value === undefined ? undefined : booleanAttribute(value)) });
+    /**
+     * What the control inside published about its value. A control this library
+     * ships calls `setCount`; the field draws the counter in the spare column of
+     * its label row — the header draws it at its own end when there is one — and
+     * only when the page wrote none of its own.
+     */
+    countState = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "countState" }] : /* istanbul ignore next */ []));
+    /** The counter the page wrote, anywhere in the field. */
+    writtenCounter = contentChild(SlFieldCounter, { ...(ngDevMode ? { debugName: "writtenCounter" } : /* istanbul ignore next */ {}), descendants: true });
+    header = contentChild(SlFieldHeaderSlot, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "header" }] : /* istanbul ignore next */ []));
+    help = contentChild(SlFieldHelpSlot, { ...(ngDevMode ? { debugName: "help" } : /* istanbul ignore next */ {}), descendants: true });
+    indicator = contentChild(SlFieldIndicatorSlot, { ...(ngDevMode ? { debugName: "indicator" } : /* istanbul ignore next */ {}), descendants: true });
+    drawnCount = computed(() => this.writtenCounter() === undefined && this.header() === undefined
+        ? this.countState()
+        : undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "drawnCount" }] : /* istanbul ignore next */ []));
+    countOver = computed(() => {
+        const count = this.drawnCount();
+        return count !== undefined && isFieldCountOver(count);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "countOver" }] : /* istanbul ignore next */ []));
+    formatCount = formatFieldCount;
+    /** The count a control this library ships publishes, whenever its value changes. */
+    setCount(count) {
+        this.countState.set(count);
+    }
+    /** What the control published, for a page that draws the counter itself. */
+    count = this.countState.asReadonly();
+    token = injectFieldDefaults();
+    /**
+     * The group around this field, if there is one. It answers before the
+     * application's own token, and it is read on every change rather than
+     * captured, because Angular binds a component's inputs after it has created
+     * the directives its template declares.
+     */
+    source = inject(SlFieldDefaultsSource, { optional: true });
+    defaults = computed(() => this.source?.fieldDefaults() ?? this.token, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "defaults" }] : /* istanbul ignore next */ []));
+    /**
+     * The base every identifier is derived from. A consumer's own `id` is the
+     * base and stays on the element; the generated one is not written anywhere,
+     * because the field is addressable through its parts rather than as a box.
+     */
+    base = inject(new HostAttributeToken('id'), { optional: true }) ?? inject(SlFieldIdFactory).next();
+    ids = computed(() => deriveFieldIds(this.base), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ids" }] : /* istanbul ignore next */ []));
+    /**
+     * Direct content rather than any descendant: a field nested inside another
+     * field's control — a composed control, a fieldset of its own — must not have
+     * its message read as this field's.
+     */
+    description = contentChild(SlFieldDescription, { ...(ngDevMode ? { debugName: "description" } : /* istanbul ignore next */ {}), descendants: false });
+    error = contentChild(SlFieldError, { ...(ngDevMode ? { debugName: "error" } : /* istanbul ignore next */ {}), descendants: false });
+    resolvedSize = computed(() => this.size() ?? this.defaults().size, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedSize" }] : /* istanbul ignore next */ []));
+    resolvedLabelPlacement = computed(() => this.labelPlacement() ?? this.defaults().labelPlacement, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedLabelPlacement" }] : /* istanbul ignore next */ []));
+    resolvedNecessity = computed(() => this.necessity() ?? this.defaults().necessity, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedNecessity" }] : /* istanbul ignore next */ []));
+    resolvedDisabled = computed(() => this.disabled() ?? this.defaults().disabled, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedDisabled" }] : /* istanbul ignore next */ []));
+    resolvedReadOnly = computed(() => this.readOnly() ?? this.defaults().readOnly, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedReadOnly" }] : /* istanbul ignore next */ []));
+    /** The field's words in the language in force, with this field's `messages` laid over them. */
+    t = injectMessages(fieldMessages, this.messages);
+    /**
+     * A message is quieter than the control it is about, so it starts one step
+     * below and only the largest field's message reaches the second step.
+     */
+    messageSize = computed(() => this.resolvedSize() === 'lg' ? 'md' : 'sm', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "messageSize" }] : /* istanbul ignore next */ []));
+    /**
+     * The contract's order, and only the parts with something to say: the
+     * indicator, the help, the description, the count, the error. Known slots
+     * have one correct reading order, so it is stated rather than read from the
+     * DOM. The count is there whenever one is drawn — the page's, or the one the
+     * field or its header draws from what the control published.
+     */
+    describedBy = computed(() => {
+        const present = {
+            counter: this.writtenCounter() !== undefined || this.countState() !== undefined,
+            description: this.description()?.hasContent() === true,
+            error: this.error()?.hasContent() === true,
+            help: this.help() !== undefined,
+            indicator: this.indicator() !== undefined,
+        };
+        const ids = this.ids();
+        const parts = FIELD_DESCRIBED_ORDER.filter((slot) => present[slot]).map((slot) => ids[slot]);
+        return parts.length === 0 ? null : parts.join(' ');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlField, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlField, isStandalone: true, selector: "[slField]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, labelPlacement: { classPropertyName: "labelPlacement", publicName: "labelPlacement", isSignal: true, isRequired: false, transformFunction: null }, necessity: { classPropertyName: "necessity", publicName: "necessity", isSignal: true, isRequired: false, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-ui": "field", "data-part": "root" }, properties: { "attr.data-size": "resolvedSize()", "attr.data-label-placement": "resolvedLabelPlacement()", "attr.data-necessity": "resolvedNecessity()", "attr.data-disabled": "resolvedDisabled() === true ? '' : null", "attr.data-invalid": "invalid() === true ? '' : null", "attr.data-readonly": "resolvedReadOnly() === true ? '' : null", "attr.data-required": "required() === true ? '' : null" } }, providers: [{ provide: SlFieldContext, useExisting: forwardRef(() => SlField) }], queries: [{ propertyName: "writtenCounter", first: true, predicate: SlFieldCounter, descendants: true, isSignal: true }, { propertyName: "header", first: true, predicate: SlFieldHeaderSlot, descendants: true, isSignal: true }, { propertyName: "help", first: true, predicate: SlFieldHelpSlot, descendants: true, isSignal: true }, { propertyName: "indicator", first: true, predicate: SlFieldIndicatorSlot, descendants: true, isSignal: true }, { propertyName: "description", first: true, predicate: SlFieldDescription, isSignal: true }, { propertyName: "error", first: true, predicate: SlFieldError, isSignal: true }], exportAs: ["slField"], ngImport: i0, template: `<ng-content select="[slFieldLabel], [slFieldHeader]" />
+    <ng-content select="[slFieldCounter]" />
+    @if (drawnCount(); as count) {
+      <span
+        data-part="counter"
+        [id]="ids().counter"
+        [attr.data-invalid]="countOver() ? '' : null"
+        >{{ formatCount(count) }}</span
+      >
+    }
+    <ng-content />
+    @if (description(); as message) {
+      <p
+        slInlineMessage
+        [id]="ids().description"
+        [size]="messageSize()"
+        [disabled]="resolvedDisabled()"
+        [mark]="message.mark() ?? 'none'"
+        [tone]="message.tone() ?? 'secondary'"
+        [live]="message.live() ?? 'off'"
+        [hideIcon]="message.hideIcon() ?? false"
+        [reserve]="message.reserve() ?? false"
+        [prefix]="message.prefix()"
+      >
+        <ng-content select="[slFieldDescription]" />
+      </p>
+    }
+    @if (error(); as message) {
+      <p
+        slInlineMessage
+        [id]="ids().error"
+        [size]="messageSize()"
+        [disabled]="resolvedDisabled()"
+        [mark]="message.mark() ?? 'none'"
+        [tone]="message.tone() ?? 'danger'"
+        [live]="message.live() ?? 'off'"
+        [hideIcon]="message.hideIcon() ?? false"
+        [reserve]="message.reserve() ?? false"
+        [prefix]="message.prefix()"
+      >
+        <ng-content select="[slFieldError]" />
+      </p>
+    }`, isInline: true, styles: ["@layer slotted.components{[data-ui=field][data-part=root]{--_font-size: var(--slotted-control-font-size-md, 13px);--_control-block-size: var(--slotted-control-height-md, 34px);--_row-gap: var(--slotted-field-row-gap, var(--slotted-space-3, .375rem));--_column-gap: var(--slotted-field-column-gap, var(--slotted-space-5, .75rem));align-content:start;container-name:slotted-field;container-type:inline-size;display:grid;font-family:var(--slotted-field-font-family, var(--slotted-control-font-family, sans-serif));grid-template-columns:minmax(0,var(--slotted-field-label-inline-size, 12rem)) minmax(0,1fr) auto;min-inline-size:0;row-gap:var(--_row-gap)}[data-ui=field][data-part=root]>*{grid-column:1 / -1}[data-ui=field]>[data-part=control]{min-inline-size:0}[data-ui=field][data-part=root][data-size=sm]{--_help-glyph: max( var(--slotted-field-icon-size-min, 14px), var(--slotted-control-icon-size-sm, 14px) );--_help-inner-size: var(--slotted-control-inner-size-sm, 22px);--_font-size: var(--slotted-control-font-size-sm, 12px);--_control-block-size: var(--slotted-control-height-sm, 30px)}[data-ui=field][data-part=root][data-size=md]{--_help-glyph: max( var(--slotted-field-icon-size-min, 14px), var(--slotted-control-icon-size-sm, 14px) );--_help-inner-size: var(--slotted-control-inner-size-sm, 22px);--_font-size: var(--slotted-control-font-size-md, 13px);--_control-block-size: var(--slotted-control-height-md, 34px)}[data-ui=field][data-part=root][data-size=lg]{--_help-glyph: max( var(--slotted-field-icon-size-min, 14px), var(--slotted-control-icon-size-md, 16px) );--_help-inner-size: var(--slotted-control-inner-size-md, 24px);--_font-size: var(--slotted-control-font-size-lg, 14px);--_control-block-size: var(--slotted-control-height-lg, 38px)}[data-ui=field]>[data-part=label],[data-ui=field]>[data-part=header]>[data-part=label]{color:var(--slotted-field-label-color, var(--slotted-text));font-size:var(--_font-size);font-weight:var(--slotted-field-label-font-weight, var(--slotted-font-weight-medium, 500));line-height:var(--slotted-field-line-height, var(--slotted-line-height-sm, 1.45));min-inline-size:0;overflow-wrap:anywhere;transition:color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=field]>[data-part=label],[data-ui=field]>[data-part=header]{grid-column:1 / -1;grid-row:1}[data-ui=field][data-part=root]:has(>[data-part=counter])>[data-part=label]{grid-column:1 / 3}[data-ui=field]>[data-part=label]>[data-part=mark],[data-ui=field]>[data-part=header]>[data-part=label]>[data-part=mark]{color:var(--slotted-field-mark-color, var(--slotted-tone-danger-text));margin-inline-start:var(--slotted-field-mark-gap, var(--slotted-space-2, .25rem));overflow-wrap:normal;unicode-bidi:isolate}[data-ui=field]:is([data-necessity=optional],[data-necessity=words])>[data-part=label]>[data-part=mark],[data-ui=field]:is([data-necessity=optional],[data-necessity=words])>[data-part=header]>[data-part=label]>[data-part=mark]{color:var(--slotted-field-mark-text-color, var(--slotted-text-muted));font-size:var(--slotted-control-font-size-sm, 12px);font-weight:var(--slotted-font-weight-regular, 400)}[data-ui=field]>[data-part=header]{align-items:baseline;column-gap:var(--slotted-field-header-gap, var(--slotted-space-3, .375rem));display:flex;flex-wrap:wrap;font-size:var(--_font-size);line-height:var(--slotted-field-line-height, var(--slotted-line-height-sm, 1.45));min-inline-size:0}[data-ui=field]>[data-part=header]>[data-part=label]{flex:0 1 auto}[data-ui=field]>[data-part=header]>[data-part=action],[data-ui=field]>[data-part=header]>[data-part=counter]{margin-inline-start:auto}[data-ui=field]>[data-part=header]>[data-part=action]~[data-part=counter]{margin-inline-start:var(--slotted-space-3, .375rem)}[data-ui=field]>[data-part=header]>[data-part=help]{--_box: max( min(calc(var(--_help-glyph) + 2 * var(--slotted-space-2, .25rem)), var(--_help-inner-size)), 1lh );--slotted-icon-size: var(--_help-glyph);appearance:none;background-color:transparent;block-size:var(--_box);border:0;border-radius:var(--slotted-field-help-radius, var(--slotted-control-radius, 4px));color:var(--slotted-field-help-color, var(--slotted-text-muted));cursor:pointer;display:inline-block;flex:none;font:inherit;inline-size:var(--_box);margin-block:calc((var(--_font-size) * var(--slotted-field-line-height, var(--slotted-line-height-sm, 1.45)) - var(--_box)) / 2);margin-inline-start:calc(var(--slotted-space-1, .125rem) - var(--slotted-field-header-gap, var(--slotted-space-3, .375rem)));padding:0;position:relative;text-align:center;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=field]>[data-part=header]>[data-part=help]:before{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-min, 24px)) / 2));position:absolute}[data-ui=field]>[data-part=header]>[data-part=help]>[data-ui=icon]{vertical-align:calc(((1cap + 1ex) / 2 - var(--_help-glyph)) / 2)}[data-ui=field]>[data-part=header]>[data-part=help]:enabled:hover,[data-ui=field]>[data-part=header]>[data-part=help][data-open]{background-color:var( --slotted-field-help-surface-hover, var(--slotted-tone-secondary-subtle-hover, ButtonFace) )}[data-ui=field]>[data-part=header]>[data-part=help]:enabled:active{background-color:var( --slotted-field-help-surface-active, var(--slotted-tone-secondary-subtle-active, ButtonFace) )}[data-ui=field]>[data-part=header]>[data-part=help]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=field]>[data-part=header]>[data-part=indicator]{align-items:center;align-self:center;column-gap:var(--slotted-space-2, .25rem);display:inline-flex;flex-wrap:wrap}[data-ui=field]>[data-part=header]>[data-part=action]{--_rest: var(--slotted-field-action-color, var(--slotted-tone-accent-text, LinkText));align-items:center;appearance:none;background:none;block-size:var(--slotted-target-min, 24px);border:0;border-radius:var(--slotted-field-action-radius, var(--slotted-control-radius, 4px));color:var(--_rest);cursor:pointer;display:inline-flex;flex:none;font-family:inherit;font-size:var(--slotted-control-font-size-sm, 12px);font-weight:var(--slotted-font-weight-regular, 400);line-height:var(--slotted-field-line-height, var(--slotted-line-height-sm, 1.45));margin-block:calc((1lh - var(--slotted-target-min, 24px)) / 2);padding:0;text-decoration-color:transparent;text-decoration-line:underline;text-decoration-thickness:from-font;text-underline-offset:.15em;transition:color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),text-decoration-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);unicode-bidi:plaintext}[data-ui=field]>[data-part=header]>[data-part=action]:not(:disabled,[aria-disabled=true]):hover{color:var( --slotted-field-action-color-hover, color-mix(in oklab, var(--_rest) 65%, var(--slotted-text, CanvasText)) );text-decoration-color:currentColor}[data-ui=field]>[data-part=header]>[data-part=action]:not(:disabled,[aria-disabled=true]):active{color:var( --slotted-field-action-color-active, color-mix(in oklab, var(--_rest) 35%, var(--slotted-text, CanvasText)) );text-decoration-color:currentColor}[data-ui=field]>[data-part=header]>[data-part=action]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px);text-decoration-color:currentColor}[data-ui=field]>[data-part=header]>[data-part=action]:is(:disabled,[aria-disabled=true]){color:var(--slotted-disabled-foreground, GrayText);cursor:not-allowed}@media(pointer:coarse){[data-ui=field]>[data-part=header]>[data-part=action]{position:relative}[data-ui=field]>[data-part=header]>[data-part=help]:before,[data-ui=field]>[data-part=header]>[data-part=action]:before{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-comfortable, 44px)) / 2));position:absolute}}[data-ui=field]>[data-part=counter],[data-ui=field]>[data-part=header]>[data-part=counter]{color:var(--slotted-field-counter-color, var(--slotted-text-muted));font-size:var(--slotted-control-font-size-sm, 12px);font-variant-numeric:tabular-nums;line-height:var(--slotted-field-line-height, var(--slotted-line-height-sm, 1.45));transition:color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=field]>[data-part=counter]{align-self:end;grid-column:3;grid-row:1;justify-self:end;padding-inline-start:var(--_column-gap)}[data-ui=field]>[data-part=counter][data-invalid],[data-ui=field]>[data-part=header]>[data-part=counter][data-invalid]{color:var(--slotted-field-counter-invalid-color, var(--slotted-tone-danger-text));font-weight:var(--slotted-font-weight-medium, 500)}[data-ui=field]>[data-ui=inline-message]:not([data-reserve]):has([data-part=text]:empty){display:none}[data-ui=field][data-part=root]>[data-ui=inline-message]{font-size:var(--slotted-font-size-xs, .75rem)}[data-ui=field][data-part=root]>[data-ui=inline-message][data-tone=danger],[data-ui=field][data-part=root]>[data-ui=inline-message][data-tone=success]{font-weight:var(--slotted-font-weight-medium, 500)}@container slotted-field (min-width: 320px){[data-ui=field][data-part=root][data-label-placement=side]>*{align-self:start;grid-column:2 / 3}[data-ui=field][data-part=root][data-label-placement=side]>[data-part=label],[data-ui=field][data-part=root][data-label-placement=side]>[data-part=header]{grid-column:1;grid-row:1;padding-block-start:max(0px,calc((var(--_control-block-size) - 1lh) / 2));padding-inline-end:var(--_column-gap)}[data-ui=field][data-part=root][data-label-placement=side]>[data-part=counter]{grid-column:1;grid-row:2;justify-self:end;padding-inline:0 var(--_column-gap)}[data-ui=field][data-part=root][data-label-placement=side]>[data-part=header]>[data-part=counter]{flex-basis:100%;margin-inline-start:0;text-align:end}}[data-ui=field][data-part=root][data-disabled]>[data-part=label],[data-ui=field][data-part=root][data-disabled]>[data-part=counter],[data-ui=field][data-part=root][data-disabled]>[data-part=header]>[data-part=label],[data-ui=field][data-part=root][data-disabled]>[data-part=header]>[data-part=counter]{color:var(--slotted-disabled-foreground)}[data-ui=field][data-part=root][data-disabled]>[data-part=label]>[data-part=mark],[data-ui=field][data-part=root][data-disabled]>[data-part=header]>[data-part=label]>[data-part=mark]{color:var(--slotted-disabled-foreground)}[data-ui=field][data-part=root][data-disabled]>[data-part=counter][data-invalid],[data-ui=field][data-part=root][data-disabled]>[data-part=header]>[data-part=counter][data-invalid]{color:var(--slotted-disabled-foreground);font-weight:var(--slotted-font-weight-regular, 400)}}\n"], dependencies: [{ kind: "component", type: SlInlineMessage, selector: "[slInlineMessage]", inputs: ["tone", "size", "live", "mark", "prefix", "hideIcon", "loading", "disabled", "reserve", "id"], exportAs: ["slInlineMessage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlField, decorators: [{
+            type: Component,
+            args: [{ selector: '[slField]', standalone: true, exportAs: 'slField', imports: [SlInlineMessage], template: `<ng-content select="[slFieldLabel], [slFieldHeader]" />
+    <ng-content select="[slFieldCounter]" />
+    @if (drawnCount(); as count) {
+      <span
+        data-part="counter"
+        [id]="ids().counter"
+        [attr.data-invalid]="countOver() ? '' : null"
+        >{{ formatCount(count) }}</span
+      >
+    }
+    <ng-content />
+    @if (description(); as message) {
+      <p
+        slInlineMessage
+        [id]="ids().description"
+        [size]="messageSize()"
+        [disabled]="resolvedDisabled()"
+        [mark]="message.mark() ?? 'none'"
+        [tone]="message.tone() ?? 'secondary'"
+        [live]="message.live() ?? 'off'"
+        [hideIcon]="message.hideIcon() ?? false"
+        [reserve]="message.reserve() ?? false"
+        [prefix]="message.prefix()"
+      >
+        <ng-content select="[slFieldDescription]" />
+      </p>
+    }
+    @if (error(); as message) {
+      <p
+        slInlineMessage
+        [id]="ids().error"
+        [size]="messageSize()"
+        [disabled]="resolvedDisabled()"
+        [mark]="message.mark() ?? 'none'"
+        [tone]="message.tone() ?? 'danger'"
+        [live]="message.live() ?? 'off'"
+        [hideIcon]="message.hideIcon() ?? false"
+        [reserve]="message.reserve() ?? false"
+        [prefix]="message.prefix()"
+      >
+        <ng-content select="[slFieldError]" />
+      </p>
+    }`, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [{ provide: SlFieldContext, useExisting: forwardRef(() => SlField) }], host: {
+                        'data-ui': 'field',
+                        'data-part': 'root',
+                        '[attr.data-size]': 'resolvedSize()',
+                        '[attr.data-label-placement]': 'resolvedLabelPlacement()',
+                        '[attr.data-necessity]': 'resolvedNecessity()',
+                        '[attr.data-disabled]': "resolvedDisabled() === true ? '' : null",
+                        '[attr.data-invalid]': "invalid() === true ? '' : null",
+                        '[attr.data-readonly]': "resolvedReadOnly() === true ? '' : null",
+                        '[attr.data-required]': "required() === true ? '' : null",
+                    }, styles: ["@layer slotted.components{[data-ui=field][data-part=root]{--_font-size: var(--slotted-control-font-size-md, 13px);--_control-block-size: var(--slotted-control-height-md, 34px);--_row-gap: var(--slotted-field-row-gap, var(--slotted-space-3, .375rem));--_column-gap: var(--slotted-field-column-gap, var(--slotted-space-5, .75rem));align-content:start;container-name:slotted-field;container-type:inline-size;display:grid;font-family:var(--slotted-field-font-family, var(--slotted-control-font-family, sans-serif));grid-template-columns:minmax(0,var(--slotted-field-label-inline-size, 12rem)) minmax(0,1fr) auto;min-inline-size:0;row-gap:var(--_row-gap)}[data-ui=field][data-part=root]>*{grid-column:1 / -1}[data-ui=field]>[data-part=control]{min-inline-size:0}[data-ui=field][data-part=root][data-size=sm]{--_help-glyph: max( var(--slotted-field-icon-size-min, 14px), var(--slotted-control-icon-size-sm, 14px) );--_help-inner-size: var(--slotted-control-inner-size-sm, 22px);--_font-size: var(--slotted-control-font-size-sm, 12px);--_control-block-size: var(--slotted-control-height-sm, 30px)}[data-ui=field][data-part=root][data-size=md]{--_help-glyph: max( var(--slotted-field-icon-size-min, 14px), var(--slotted-control-icon-size-sm, 14px) );--_help-inner-size: var(--slotted-control-inner-size-sm, 22px);--_font-size: var(--slotted-control-font-size-md, 13px);--_control-block-size: var(--slotted-control-height-md, 34px)}[data-ui=field][data-part=root][data-size=lg]{--_help-glyph: max( var(--slotted-field-icon-size-min, 14px), var(--slotted-control-icon-size-md, 16px) );--_help-inner-size: var(--slotted-control-inner-size-md, 24px);--_font-size: var(--slotted-control-font-size-lg, 14px);--_control-block-size: var(--slotted-control-height-lg, 38px)}[data-ui=field]>[data-part=label],[data-ui=field]>[data-part=header]>[data-part=label]{color:var(--slotted-field-label-color, var(--slotted-text));font-size:var(--_font-size);font-weight:var(--slotted-field-label-font-weight, var(--slotted-font-weight-medium, 500));line-height:var(--slotted-field-line-height, var(--slotted-line-height-sm, 1.45));min-inline-size:0;overflow-wrap:anywhere;transition:color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=field]>[data-part=label],[data-ui=field]>[data-part=header]{grid-column:1 / -1;grid-row:1}[data-ui=field][data-part=root]:has(>[data-part=counter])>[data-part=label]{grid-column:1 / 3}[data-ui=field]>[data-part=label]>[data-part=mark],[data-ui=field]>[data-part=header]>[data-part=label]>[data-part=mark]{color:var(--slotted-field-mark-color, var(--slotted-tone-danger-text));margin-inline-start:var(--slotted-field-mark-gap, var(--slotted-space-2, .25rem));overflow-wrap:normal;unicode-bidi:isolate}[data-ui=field]:is([data-necessity=optional],[data-necessity=words])>[data-part=label]>[data-part=mark],[data-ui=field]:is([data-necessity=optional],[data-necessity=words])>[data-part=header]>[data-part=label]>[data-part=mark]{color:var(--slotted-field-mark-text-color, var(--slotted-text-muted));font-size:var(--slotted-control-font-size-sm, 12px);font-weight:var(--slotted-font-weight-regular, 400)}[data-ui=field]>[data-part=header]{align-items:baseline;column-gap:var(--slotted-field-header-gap, var(--slotted-space-3, .375rem));display:flex;flex-wrap:wrap;font-size:var(--_font-size);line-height:var(--slotted-field-line-height, var(--slotted-line-height-sm, 1.45));min-inline-size:0}[data-ui=field]>[data-part=header]>[data-part=label]{flex:0 1 auto}[data-ui=field]>[data-part=header]>[data-part=action],[data-ui=field]>[data-part=header]>[data-part=counter]{margin-inline-start:auto}[data-ui=field]>[data-part=header]>[data-part=action]~[data-part=counter]{margin-inline-start:var(--slotted-space-3, .375rem)}[data-ui=field]>[data-part=header]>[data-part=help]{--_box: max( min(calc(var(--_help-glyph) + 2 * var(--slotted-space-2, .25rem)), var(--_help-inner-size)), 1lh );--slotted-icon-size: var(--_help-glyph);appearance:none;background-color:transparent;block-size:var(--_box);border:0;border-radius:var(--slotted-field-help-radius, var(--slotted-control-radius, 4px));color:var(--slotted-field-help-color, var(--slotted-text-muted));cursor:pointer;display:inline-block;flex:none;font:inherit;inline-size:var(--_box);margin-block:calc((var(--_font-size) * var(--slotted-field-line-height, var(--slotted-line-height-sm, 1.45)) - var(--_box)) / 2);margin-inline-start:calc(var(--slotted-space-1, .125rem) - var(--slotted-field-header-gap, var(--slotted-space-3, .375rem)));padding:0;position:relative;text-align:center;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=field]>[data-part=header]>[data-part=help]:before{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-min, 24px)) / 2));position:absolute}[data-ui=field]>[data-part=header]>[data-part=help]>[data-ui=icon]{vertical-align:calc(((1cap + 1ex) / 2 - var(--_help-glyph)) / 2)}[data-ui=field]>[data-part=header]>[data-part=help]:enabled:hover,[data-ui=field]>[data-part=header]>[data-part=help][data-open]{background-color:var( --slotted-field-help-surface-hover, var(--slotted-tone-secondary-subtle-hover, ButtonFace) )}[data-ui=field]>[data-part=header]>[data-part=help]:enabled:active{background-color:var( --slotted-field-help-surface-active, var(--slotted-tone-secondary-subtle-active, ButtonFace) )}[data-ui=field]>[data-part=header]>[data-part=help]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=field]>[data-part=header]>[data-part=indicator]{align-items:center;align-self:center;column-gap:var(--slotted-space-2, .25rem);display:inline-flex;flex-wrap:wrap}[data-ui=field]>[data-part=header]>[data-part=action]{--_rest: var(--slotted-field-action-color, var(--slotted-tone-accent-text, LinkText));align-items:center;appearance:none;background:none;block-size:var(--slotted-target-min, 24px);border:0;border-radius:var(--slotted-field-action-radius, var(--slotted-control-radius, 4px));color:var(--_rest);cursor:pointer;display:inline-flex;flex:none;font-family:inherit;font-size:var(--slotted-control-font-size-sm, 12px);font-weight:var(--slotted-font-weight-regular, 400);line-height:var(--slotted-field-line-height, var(--slotted-line-height-sm, 1.45));margin-block:calc((1lh - var(--slotted-target-min, 24px)) / 2);padding:0;text-decoration-color:transparent;text-decoration-line:underline;text-decoration-thickness:from-font;text-underline-offset:.15em;transition:color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),text-decoration-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);unicode-bidi:plaintext}[data-ui=field]>[data-part=header]>[data-part=action]:not(:disabled,[aria-disabled=true]):hover{color:var( --slotted-field-action-color-hover, color-mix(in oklab, var(--_rest) 65%, var(--slotted-text, CanvasText)) );text-decoration-color:currentColor}[data-ui=field]>[data-part=header]>[data-part=action]:not(:disabled,[aria-disabled=true]):active{color:var( --slotted-field-action-color-active, color-mix(in oklab, var(--_rest) 35%, var(--slotted-text, CanvasText)) );text-decoration-color:currentColor}[data-ui=field]>[data-part=header]>[data-part=action]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px);text-decoration-color:currentColor}[data-ui=field]>[data-part=header]>[data-part=action]:is(:disabled,[aria-disabled=true]){color:var(--slotted-disabled-foreground, GrayText);cursor:not-allowed}@media(pointer:coarse){[data-ui=field]>[data-part=header]>[data-part=action]{position:relative}[data-ui=field]>[data-part=header]>[data-part=help]:before,[data-ui=field]>[data-part=header]>[data-part=action]:before{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-comfortable, 44px)) / 2));position:absolute}}[data-ui=field]>[data-part=counter],[data-ui=field]>[data-part=header]>[data-part=counter]{color:var(--slotted-field-counter-color, var(--slotted-text-muted));font-size:var(--slotted-control-font-size-sm, 12px);font-variant-numeric:tabular-nums;line-height:var(--slotted-field-line-height, var(--slotted-line-height-sm, 1.45));transition:color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=field]>[data-part=counter]{align-self:end;grid-column:3;grid-row:1;justify-self:end;padding-inline-start:var(--_column-gap)}[data-ui=field]>[data-part=counter][data-invalid],[data-ui=field]>[data-part=header]>[data-part=counter][data-invalid]{color:var(--slotted-field-counter-invalid-color, var(--slotted-tone-danger-text));font-weight:var(--slotted-font-weight-medium, 500)}[data-ui=field]>[data-ui=inline-message]:not([data-reserve]):has([data-part=text]:empty){display:none}[data-ui=field][data-part=root]>[data-ui=inline-message]{font-size:var(--slotted-font-size-xs, .75rem)}[data-ui=field][data-part=root]>[data-ui=inline-message][data-tone=danger],[data-ui=field][data-part=root]>[data-ui=inline-message][data-tone=success]{font-weight:var(--slotted-font-weight-medium, 500)}@container slotted-field (min-width: 320px){[data-ui=field][data-part=root][data-label-placement=side]>*{align-self:start;grid-column:2 / 3}[data-ui=field][data-part=root][data-label-placement=side]>[data-part=label],[data-ui=field][data-part=root][data-label-placement=side]>[data-part=header]{grid-column:1;grid-row:1;padding-block-start:max(0px,calc((var(--_control-block-size) - 1lh) / 2));padding-inline-end:var(--_column-gap)}[data-ui=field][data-part=root][data-label-placement=side]>[data-part=counter]{grid-column:1;grid-row:2;justify-self:end;padding-inline:0 var(--_column-gap)}[data-ui=field][data-part=root][data-label-placement=side]>[data-part=header]>[data-part=counter]{flex-basis:100%;margin-inline-start:0;text-align:end}}[data-ui=field][data-part=root][data-disabled]>[data-part=label],[data-ui=field][data-part=root][data-disabled]>[data-part=counter],[data-ui=field][data-part=root][data-disabled]>[data-part=header]>[data-part=label],[data-ui=field][data-part=root][data-disabled]>[data-part=header]>[data-part=counter]{color:var(--slotted-disabled-foreground)}[data-ui=field][data-part=root][data-disabled]>[data-part=label]>[data-part=mark],[data-ui=field][data-part=root][data-disabled]>[data-part=header]>[data-part=label]>[data-part=mark]{color:var(--slotted-disabled-foreground)}[data-ui=field][data-part=root][data-disabled]>[data-part=counter][data-invalid],[data-ui=field][data-part=root][data-disabled]>[data-part=header]>[data-part=counter][data-invalid]{color:var(--slotted-disabled-foreground);font-weight:var(--slotted-font-weight-regular, 400)}}\n"] }]
+        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], labelPlacement: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPlacement", required: false }] }], necessity: [{ type: i0.Input, args: [{ isSignal: true, alias: "necessity", required: false }] }], messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], writtenCounter: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SlFieldCounter), { ...{ descendants: true }, isSignal: true }] }], header: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SlFieldHeaderSlot), { isSignal: true }] }], help: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SlFieldHelpSlot), { ...{ descendants: true }, isSignal: true }] }], indicator: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SlFieldIndicatorSlot), { ...{ descendants: true }, isSignal: true }] }], description: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SlFieldDescription), { ...{ descendants: false }, isSignal: true }] }], error: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SlFieldError), { ...{ descendants: false }, isSignal: true }] }] } });
+
+/**
+ * Names the control, and says whether it has to be answered.
+ *
+ * The association is explicit — `for` pointing at the control's identifier —
+ * because the APG's naming practice records that some combinations of assistive
+ * technology and browser fail to treat the implicit form, wrapping the control
+ * in the label, as having an accessible name at all.
+ *
+ * The necessity marker is drawn here rather than written by the page. The glyph
+ * is `aria-hidden`, because `aria-required` on the control already carries the
+ * semantics and a reader working a form of twenty required fields does not need
+ * to hear "asterisk" twenty times; the two word forms are not hidden, because
+ * `(optional)` is information rather than decoration.
+ */
+class SlFieldLabel {
+    field = inject(SlField);
+    writtenFor = inject(new HostAttributeToken('for'), { optional: true });
+    writtenId = inject(new HostAttributeToken('id'), { optional: true });
+    labelFor = computed(() => this.writtenFor ?? this.field.ids().control, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelFor" }] : /* istanbul ignore next */ []));
+    labelId = computed(() => this.writtenId ?? this.field.ids().label, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelId" }] : /* istanbul ignore next */ []));
+    necessity = computed(() => necessityMark(this.field.resolvedNecessity(), this.field.required() === true, this.field.t), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "necessity" }] : /* istanbul ignore next */ []));
+    markHidden = computed(() => this.necessity()?.hidden === true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "markHidden" }] : /* istanbul ignore next */ []));
+    mark = computed(() => this.necessity()?.text ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mark" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlFieldLabel, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlFieldLabel, isStandalone: true, selector: "label[slFieldLabel]", host: { attributes: { "data-part": "label" }, properties: { "attr.for": "labelFor()", "attr.id": "labelId()" } }, exportAs: ["slFieldLabel"], ngImport: i0, template: `<ng-content />
+    @if (mark(); as text) {
+      <span data-part="mark" [attr.aria-hidden]="markHidden() ? 'true' : null">{{ text }}</span>
+    }`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlFieldLabel, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'label[slFieldLabel]',
+                    standalone: true,
+                    exportAs: 'slFieldLabel',
+                    template: `<ng-content />
+    @if (mark(); as text) {
+      <span data-part="mark" [attr.aria-hidden]="markHidden() ? 'true' : null">{{ text }}</span>
+    }`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        'data-part': 'label',
+                        '[attr.for]': 'labelFor()',
+                        '[attr.id]': 'labelId()',
+                    },
+                }]
+        }] });
+/**
+ * Applies the field's wiring to a control the library does not own.
+ *
+ * Controls this library ships read the field themselves and need no directive,
+ * which is what
+ * `docs/history/designs/2026-08-31-field-aware-controls-design.md` decides.
+ * This exists for the two cases that cannot: a plain native element, and a
+ * component written before this library.
+ *
+ * Every value the consumer wrote wins. A host binding beats a static attribute
+ * in Angular, so each written value is read before the binding is computed
+ * rather than after — the asymmetry with React, where a consumer's prop simply
+ * spreads over the family's.
+ */
+class SlFieldControl {
+    field = inject(SlField);
+    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,
+    });
+    writtenDisabled = inject(new HostAttributeToken('disabled'), { optional: true });
+    writtenReadonly = inject(new HostAttributeToken('readonly'), { optional: true });
+    controlId = computed(() => this.writtenId ?? this.field.ids().control, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "controlId" }] : /* 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.field.invalid() === 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.writtenDisabled ?? (this.field.resolvedDisabled() === true ? '' : null), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabledAttribute" }] : /* istanbul ignore next */ []));
+    readonlyAttribute = computed(() => this.writtenReadonly ?? (this.field.resolvedReadOnly() === true ? '' : null), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "readonlyAttribute" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlFieldControl, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlFieldControl, isStandalone: true, selector: "[slFieldControl]", host: { attributes: { "data-part": "control" }, properties: { "attr.id": "controlId()", "attr.aria-describedby": "describedBy()", "attr.aria-invalid": "ariaInvalid()", "attr.aria-required": "ariaRequired()", "attr.disabled": "disabledAttribute()", "attr.readonly": "readonlyAttribute()" } }, exportAs: ["slFieldControl"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlFieldControl, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slFieldControl]',
+                    standalone: true,
+                    exportAs: 'slFieldControl',
+                    host: {
+                        'data-part': 'control',
+                        '[attr.id]': 'controlId()',
+                        '[attr.aria-describedby]': 'describedBy()',
+                        '[attr.aria-invalid]': 'ariaInvalid()',
+                        '[attr.aria-required]': 'ariaRequired()',
+                        '[attr.disabled]': 'disabledAttribute()',
+                        '[attr.readonly]': 'readonlyAttribute()',
+                    },
+                }]
+        }] });
+/**
+ * A link or a button at the end of the label row — `Forgot password?`,
+ * `Generate` — written on the consumer's own `a` or `button`. On a `button` the
+ * directive writes `type="button"` unless the page wrote a type, so it never
+ * submits the form it sits in; on a link it writes nothing. The field does not
+ * disable it with the control: what it does is the page's.
+ */
+class SlFieldAction {
+    writtenType = inject(new HostAttributeToken('type'), { optional: true });
+    type = this.writtenType ??
+        (inject(ElementRef).nativeElement.tagName === 'BUTTON'
+            ? 'button'
+            : null);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlFieldAction, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlFieldAction, isStandalone: true, selector: "[slFieldAction]", host: { attributes: { "data-part": "action" }, properties: { "attr.type": "type" } }, exportAs: ["slFieldAction"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlFieldAction, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slFieldAction]',
+                    standalone: true,
+                    exportAs: 'slFieldAction',
+                    host: {
+                        'data-part': 'action',
+                        '[attr.type]': 'type',
+                    },
+                }]
+        }] });
+
+/**
+ * The label row, when the label has company: the help, an indicator, an action
+ * and the counter beside it. ReUI writes the same row by hand in four of its
+ * examples; here it is a part, so its alignment, its gap and its place in a
+ * side layout are the family's.
+ *
+ * It draws the count the control published at its own end when the page wrote
+ * no counter, which is where a field without a header puts it too.
+ */
+class SlFieldHeader {
+    field = inject(SlField);
+    drawnCount = computed(() => this.field.writtenCounter() === undefined ? this.field.count() : undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "drawnCount" }] : /* istanbul ignore next */ []));
+    countOver = computed(() => {
+        const count = this.drawnCount();
+        return count !== undefined && isFieldCountOver(count);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "countOver" }] : /* istanbul ignore next */ []));
+    formatCount = formatFieldCount;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlFieldHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlFieldHeader, isStandalone: true, selector: "[slFieldHeader]", host: { attributes: { "data-part": "header" } }, providers: [{ provide: SlFieldHeaderSlot, useExisting: forwardRef(() => SlFieldHeader) }], exportAs: ["slFieldHeader"], ngImport: i0, template: `<ng-content />
+    @if (drawnCount(); as count) {
+      <span
+        data-part="counter"
+        [id]="field.ids().counter"
+        [attr.data-invalid]="countOver() ? '' : null"
+        >{{ formatCount(count) }}</span
+      >
+    }`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlFieldHeader, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[slFieldHeader]',
+                    standalone: true,
+                    exportAs: 'slFieldHeader',
+                    template: `<ng-content />
+    @if (drawnCount(); as count) {
+      <span
+        data-part="counter"
+        [id]="field.ids().counter"
+        [attr.data-invalid]="countOver() ? '' : null"
+        >{{ formatCount(count) }}</span
+      >
+    }`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    providers: [{ provide: SlFieldHeaderSlot, useExisting: forwardRef(() => SlFieldHeader) }],
+                    host: { 'data-part': 'header' },
+                }]
+        }] });
+/**
+ * What qualifies the field — `Beta`, `Pro`, `New` — as one or more `slBadge`s
+ * after the label. It stands outside the `label`, so the necessity mark stays
+ * against the label's last word, and it joins the control's description, so a
+ * reader on the control hears it.
+ */
+class SlFieldIndicator {
+    field = inject(SlField);
+    writtenId = inject(new HostAttributeToken('id'), { optional: true });
+    indicatorId = computed(() => this.writtenId ?? this.field.ids().indicator, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "indicatorId" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlFieldIndicator, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlFieldIndicator, isStandalone: true, selector: "[slFieldIndicator]", host: { attributes: { "data-part": "indicator" }, properties: { "attr.id": "indicatorId()" } }, providers: [{ provide: SlFieldIndicatorSlot, useExisting: forwardRef(() => SlFieldIndicator) }], exportAs: ["slFieldIndicator"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlFieldIndicator, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slFieldIndicator]',
+                    standalone: true,
+                    exportAs: 'slFieldIndicator',
+                    providers: [{ provide: SlFieldIndicatorSlot, useExisting: forwardRef(() => SlFieldIndicator) }],
+                    host: {
+                        'data-part': 'indicator',
+                        '[attr.id]': 'indicatorId()',
+                    },
+                }]
+        }] });
+/**
+ * The help beside the label: the button itself, drawing `circle-question`, with
+ * the hint in a tooltip. The hint is the directive's value —
+ * `<button slFieldHelp="Dias corridos."></button>` — because it is written once
+ * and read in two places: the tooltip's layer, and a hidden node inside the
+ * button that describes the button and the control while the layer is closed. A
+ * directly referenced hidden element still enters the description (accname 1.2,
+ * step 2A), and the tooltip is asked to describe nothing, so the hint is not
+ * read twice.
+ *
+ * **A press is the hint.** A tooltip opens on a coarse pointer only by a long
+ * press, because a tap is the trigger's own action; this button has no other
+ * action, so the tooltip is composed on the button as host directives and run
+ * by hand (`openOn: 'manual'`, provided here): a press pins the hint open and a
+ * second press closes it, while hover and keyboard focus open it the way every
+ * tooltip opens. It is Carbon's toggletip. `[(open)]` and `(openChangeRequest)`
+ * are the tooltip's own, exposed on the button.
+ *
+ * **It stays operable on a disabled field.** The help is often where the reason
+ * the field is off is written.
+ */
+class SlFieldHelp {
+    /** The hint. */
+    slFieldHelp = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "slFieldHelp" }] : /* istanbul ignore next */ []));
+    field = inject(SlField, { optional: true });
+    tooltip = inject(SlTooltip);
+    writtenLabel = inject(new HostAttributeToken('aria-label'), { optional: true });
+    writtenDescribedBy = inject(new HostAttributeToken('aria-describedby'), {
+        optional: true,
+    });
+    fallbackId = `${inject(SlFieldIdFactory).next()}-help`;
+    /** The field family's words, for a help control outside a field. */
+    own = injectMessages(fieldMessages);
+    textId = computed(() => this.field?.ids().help ?? this.fallbackId, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "textId" }] : /* istanbul ignore next */ []));
+    label = computed(() => this.writtenLabel ?? (this.field?.t ?? this.own)('help'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    describedBy = computed(() => this.writtenDescribedBy ?? this.textId(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
+    /** Whether a press opened the hint; a hover-opened hint closes when the pointer leaves. */
+    pinned = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pinned" }] : /* istanbul ignore next */ []));
+    constructor() {
+        /* A hint closed from anywhere — Escape, a press outside, the consumer — is
+           no longer pinned by the press that opened it. */
+        effect(() => {
+            if (!this.tooltip.isOpen())
+                this.pinned.set(false);
+        });
+    }
+    enter(event) {
+        if (event.pointerType === 'touch' || this.tooltip.isOpen())
+            return;
+        this.tooltip.openAfterDelay(event);
+    }
+    leave(event) {
+        if (event.pointerType === 'touch' || this.pinned())
+            return;
+        this.tooltip.closeAfterDelay(event);
+    }
+    /** `:focus-visible` rather than every focus: a press focuses the button too. */
+    focus(event) {
+        if (!event.target.matches(':focus-visible'))
+            return;
+        this.tooltip.toggle(true, 'keyboard', event);
+    }
+    blur(event) {
+        this.pinned.set(false);
+        this.tooltip.toggle(false, 'blur', event);
+    }
+    /**
+     * A click synthesised by the keyboard reports no detail; a real one reports
+     * the click count, which is how `Enter` and `Space` are told from a press.
+     */
+    press(event) {
+        const reason = event.detail === 0 ? 'keyboard' : 'pointer';
+        if (this.tooltip.isOpen() && this.pinned()) {
+            this.pinned.set(false);
+            this.tooltip.toggle(false, reason, event);
+            return;
+        }
+        this.pinned.set(true);
+        this.tooltip.toggle(true, reason, event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlFieldHelp, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: SlFieldHelp, isStandalone: true, selector: "button[slFieldHelp]", inputs: { slFieldHelp: { classPropertyName: "slFieldHelp", publicName: "slFieldHelp", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-part": "help", "type": "button" }, listeners: { "pointerenter": "enter($event)", "pointerleave": "leave($event)", "focus": "focus($event)", "blur": "blur($event)", "click": "press($event)" }, properties: { "attr.aria-label": "label()", "attr.aria-describedby": "describedBy()" } }, providers: [
+            provideTooltipDefaults({ closeOnPress: false, describes: 'none', openOn: 'manual' }),
+            { provide: SlFieldHelpSlot, useExisting: forwardRef(() => SlFieldHelp) },
+        ], exportAs: ["slFieldHelp"], hostDirectives: [{ directive: i1.SlTooltip, inputs: ["open", "open", "side", "side"], outputs: ["openChange", "openChange", "openChangeRequest", "openChangeRequest"] }, { directive: i1.SlTooltipTrigger }], ngImport: i0, template: `<span slIcon aria-hidden="true"><svg slGlyph name="circle-question"></svg></span>
+    <span data-part="help-text" hidden [id]="textId()">{{ slFieldHelp() }}</span>
+    <ng-template slTooltipLayer>
+      <div slTooltipContent>{{ slFieldHelp() }}</div>
+      <div slTooltipArrow></div>
+    </ng-template>`, isInline: true, dependencies: [{ kind: "component", type: SlGlyph, selector: "svg[slGlyph]", inputs: ["name", "solid"] }, { kind: "component", type: SlIcon, selector: "[slIcon]", inputs: ["directional", "label", "size", "tone"], exportAs: ["slIcon"] }, { kind: "directive", type: SlTooltipArrow, selector: "[slTooltipArrow]", exportAs: ["slTooltipArrow"] }, { kind: "component", type: SlTooltipContent, selector: "[slTooltipContent]", exportAs: ["slTooltipContent"] }, { kind: "directive", type: SlTooltipLayer, selector: "ng-template[slTooltipLayer]", exportAs: ["slTooltipLayer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlFieldHelp, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'button[slFieldHelp]',
+                    standalone: true,
+                    exportAs: 'slFieldHelp',
+                    imports: [SlGlyph, SlIcon, SlTooltipArrow, SlTooltipContent, SlTooltipLayer],
+                    hostDirectives: [
+                        {
+                            directive: SlTooltip,
+                            inputs: ['open', 'side'],
+                            outputs: ['openChange', 'openChangeRequest'],
+                        },
+                        SlTooltipTrigger,
+                    ],
+                    template: `<span slIcon aria-hidden="true"><svg slGlyph name="circle-question"></svg></span>
+    <span data-part="help-text" hidden [id]="textId()">{{ slFieldHelp() }}</span>
+    <ng-template slTooltipLayer>
+      <div slTooltipContent>{{ slFieldHelp() }}</div>
+      <div slTooltipArrow></div>
+    </ng-template>`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    providers: [
+                        provideTooltipDefaults({ closeOnPress: false, describes: 'none', openOn: 'manual' }),
+                        { provide: SlFieldHelpSlot, useExisting: forwardRef(() => SlFieldHelp) },
+                    ],
+                    host: {
+                        'data-part': 'help',
+                        type: 'button',
+                        '[attr.aria-label]': 'label()',
+                        '[attr.aria-describedby]': 'describedBy()',
+                        '(pointerenter)': 'enter($event)',
+                        '(pointerleave)': 'leave($event)',
+                        '(focus)': 'focus($event)',
+                        '(blur)': 'blur($event)',
+                        '(click)': 'press($event)',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { slFieldHelp: [{ type: i0.Input, args: [{ isSignal: true, alias: "slFieldHelp", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FIELD_DEFAULTS, FIELD_DESCRIBED_ORDER, SlField, SlFieldAction, SlFieldContext, SlFieldControl, SlFieldCounter, SlFieldDefaultsSource, SlFieldDescription, SlFieldError, SlFieldHeader, SlFieldHeaderSlot, SlFieldHelp, SlFieldHelpSlot, SlFieldIdFactory, SlFieldIndicator, SlFieldIndicatorSlot, SlFieldLabel, SlFieldMessage, deriveFieldIds, formatFieldCount, injectFieldDefaults, isFieldCountOver, necessityMark, provideFieldDefaults };
+//# sourceMappingURL=slotted-angular-field.mjs.map