@cdevhub/ngx-tw 0.5.0 → 0.6.0

package/fesm2022/cdevhub-ngx-tw-tags-input-testing.mjs

@@ -0,0 +1,172 @@
+import { ComponentHarness, HarnessPredicate, TestKey } from '@angular/cdk/testing';
+
+/**
+ * Harness for a single committed chip inside a `tw-tags-input`.
+ *
+ * Chips are rendered by composing `[twBadge]`, so that attribute is the host
+ * selector. Reach these through {@link TagsInputHarness.getTags} rather than
+ * locating them directly against a fixture — located from a document root the
+ * selector would also match every unrelated badge on the page.
+ */
+class TagsInputTagHarness extends ComponentHarness {
+    static hostSelector = '[twBadge]';
+    /**
+     * The chip's remove control. It is the only `<button>` a chip contains: the
+     * badge's own `dismissible` button is not enabled here, so this always
+     * resolves to the tags-input remove control.
+     */
+    removeButton = this.locatorFor('button');
+    /** Predicate for `locatorFor` / `locatorForAll`. */
+    static with(options = {}) {
+        return new HarnessPredicate(TagsInputTagHarness, options).addOption('text', options.text, async (h, text) => HarnessPredicate.stringMatches(await h.getText(), text));
+    }
+    /**
+     * The chip's visible label, trimmed. This is `tagLabel(tag)`, not the tag
+     * value — for object tags the two differ.
+     */
+    async getText() {
+        return (await (await this.host()).text()).trim();
+    }
+    /**
+     * The remove control's accessible name (`Remove <label>`). Useful for
+     * asserting the control is announced, which is the only signal a screen
+     * reader gets for a chip.
+     */
+    async getRemoveLabel() {
+        return (await this.removeButton()).getAttribute('aria-label');
+    }
+    /**
+     * Clicks the chip's remove control. The component restores focus to the
+     * neighbouring chip (or the text input when none remain), so the caller may
+     * assert focus immediately afterwards.
+     */
+    async remove() {
+        await (await this.removeButton()).click();
+    }
+}
+
+/**
+ * Harness for `tw-tags-input`.
+ *
+ * The control renders committed tags as chips followed by a single text input;
+ * everything lives inside the `tw-tags-input` host, so no overlay handling is
+ * needed and the ordinary fixture loader is enough.
+ *
+ * Note where the ARIA lives: the host is a `role="group"`, which ARIA 1.2 does
+ * not allow to carry `aria-required` / `aria-invalid`, so those sit on the
+ * inner text input — the element that actually owns the pending value.
+ * {@link isRequired} and {@link isInvalid} read them from there;
+ * {@link isDisabled} reads `aria-disabled` from the group, which is allowed.
+ */
+class TagsInputHarness extends ComponentHarness {
+    static hostSelector = 'tw-tags-input';
+    textInput = this.locatorFor('input[type="text"]');
+    /** Predicate for `locatorFor` / `locatorForAll`. */
+    static with(options = {}) {
+        return new HarnessPredicate(TagsInputHarness, options)
+            .addOption('label', options.label, async (h, label) => HarnessPredicate.stringMatches(await h.getLabel(), label))
+            .addOption('disabled', options.disabled, async (h, disabled) => (await h.isDisabled()) === disabled);
+    }
+    /** The control's accessible name, from `aria-label` when one is set. */
+    async getLabel() {
+        return (await this.host()).getAttribute('aria-label');
+    }
+    /** Whether the group reports `aria-disabled="true"`. */
+    async isDisabled() {
+        return (await (await this.host()).getAttribute('aria-disabled')) === 'true';
+    }
+    /** Whether the text input reports `aria-required="true"`. */
+    async isRequired() {
+        return (await (await this.textInput()).getAttribute('aria-required')) === 'true';
+    }
+    /** Whether the text input reports `aria-invalid="true"`. */
+    async isInvalid() {
+        return (await (await this.textInput()).getAttribute('aria-invalid')) === 'true';
+    }
+    /**
+     * Every committed chip, in render order. Remove by index by indexing this
+     * array — `(await input.getTags())[1].remove()` — which is why no
+     * `removeTagAt(index)` exists.
+     */
+    async getTags(filters = {}) {
+        return this.locatorForAll(TagsInputTagHarness.with(filters))();
+    }
+    /** The visible label of every committed chip, in render order. */
+    async getTagTexts() {
+        const tags = await this.getTags();
+        return Promise.all(tags.map((tag) => tag.getText()));
+    }
+    /** The in-progress (uncommitted) text currently in the input. */
+    async getInputValue() {
+        return (await this.textInput()).getProperty('value');
+    }
+    /**
+     * Types `text` into the input and commits it with Enter. Typing appends, so
+     * any pending text already in the input is committed along with it.
+     *
+     * Enter is the commit gesture only while `separatorKeys` contains `'Enter'`
+     * (the default). A control configured with, say, `[separatorKeys]="[';']"`
+     * commits through {@link typeInput} instead — `typeInput('alpha;')`.
+     *
+     * The commit may be dropped by the component (empty, duplicate, or `maxTags`
+     * reached); assert against {@link getTagTexts} rather than assuming it
+     * landed.
+     */
+    async addTag(text) {
+        const input = await this.textInput();
+        await input.sendKeys(text);
+        await input.sendKeys(TestKey.ENTER);
+    }
+    /**
+     * Types `text` into the input character by character, appending to whatever
+     * is already there. Use it to stage pending text that {@link addTag} would
+     * commit for you — reading it back, discarding it, or letting `addOnBlur`
+     * pick it up.
+     *
+     * A separator character in `text` does commit the text before it, but CDK's
+     * synthetic typing appends every character to the input regardless of the
+     * component's `preventDefault()`, so the separator itself is left behind in
+     * the input where a real browser swallows it. Commit with {@link addTag},
+     * and treat a trailing separator here as staging, not as a commit gesture.
+     */
+    async typeInput(text) {
+        await (await this.textInput()).sendKeys(text);
+    }
+    /**
+     * Removes the first chip whose label matches. Throws when nothing matches,
+     * rather than failing silently.
+     */
+    async removeTag(text) {
+        const matches = await this.getTags({ text });
+        if (matches.length === 0) {
+            throw new Error(`TagsInputHarness.removeTag: no tag matching ${String(text)}.`);
+        }
+        await matches[0].remove();
+    }
+    /**
+     * Discards the in-progress text with Escape — the control's own clear
+     * gesture. A no-op when the input is already empty. Does not touch committed
+     * chips.
+     */
+    async clearInput() {
+        await (await this.textInput()).sendKeys(TestKey.ESCAPE);
+    }
+    /** Moves focus to the text input. */
+    async focus() {
+        await (await this.textInput()).focus();
+    }
+    /**
+     * Moves focus out of the control. This is the gesture that marks the control
+     * touched and, with `addOnBlur`, commits the pending text.
+     */
+    async blur() {
+        await (await this.textInput()).blur();
+    }
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { TagsInputHarness, TagsInputTagHarness };
+//# sourceMappingURL=cdevhub-ngx-tw-tags-input-testing.mjs.map

package/fesm2022/cdevhub-ngx-tw-tags-input-testing.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"cdevhub-ngx-tw-tags-input-testing.mjs","sources":["../../../projects/ngx-tw/tags-input/testing/tags-input-tag-harness.ts","../../../projects/ngx-tw/tags-input/testing/tags-input-harness.ts","../../../projects/ngx-tw/tags-input/testing/cdevhub-ngx-tw-tags-input-testing.ts"],"sourcesContent":["import { ComponentHarness, HarnessPredicate } from '@angular/cdk/testing';\nimport type { BaseHarnessFilters } from '@angular/cdk/testing';\n\n/** Filters accepted by `TagsInputTagHarness.with`. */\nexport interface TagsInputTagHarnessFilters extends BaseHarnessFilters {\n  /** Match by the chip's visible label. */\n  text?: string | RegExp;\n}\n\n/**\n * Harness for a single committed chip inside a `tw-tags-input`.\n *\n * Chips are rendered by composing `[twBadge]`, so that attribute is the host\n * selector. Reach these through {@link TagsInputHarness.getTags} rather than\n * locating them directly against a fixture — located from a document root the\n * selector would also match every unrelated badge on the page.\n */\nexport class TagsInputTagHarness extends ComponentHarness {\n  static hostSelector = '[twBadge]';\n\n  /**\n   * The chip's remove control. It is the only `<button>` a chip contains: the\n   * badge's own `dismissible` button is not enabled here, so this always\n   * resolves to the tags-input remove control.\n   */\n  private readonly removeButton = this.locatorFor('button');\n\n  /** Predicate for `locatorFor` / `locatorForAll`. */\n  static with(\n    options: TagsInputTagHarnessFilters = {},\n  ): HarnessPredicate<TagsInputTagHarness> {\n    return new HarnessPredicate(TagsInputTagHarness, options).addOption(\n      'text',\n      options.text,\n      async (h, text) => HarnessPredicate.stringMatches(await h.getText(), text),\n    );\n  }\n\n  /**\n   * The chip's visible label, trimmed. This is `tagLabel(tag)`, not the tag\n   * value — for object tags the two differ.\n   */\n  async getText(): Promise<string> {\n    return (await (await this.host()).text()).trim();\n  }\n\n  /**\n   * The remove control's accessible name (`Remove <label>`). Useful for\n   * asserting the control is announced, which is the only signal a screen\n   * reader gets for a chip.\n   */\n  async getRemoveLabel(): Promise<string | null> {\n    return (await this.removeButton()).getAttribute('aria-label');\n  }\n\n  /**\n   * Clicks the chip's remove control. The component restores focus to the\n   * neighbouring chip (or the text input when none remain), so the caller may\n   * assert focus immediately afterwards.\n   */\n  async remove(): Promise<void> {\n    await (await this.removeButton()).click();\n  }\n}\n","import { ComponentHarness, HarnessPredicate, TestKey } from '@angular/cdk/testing';\nimport type { BaseHarnessFilters } from '@angular/cdk/testing';\nimport {\n  TagsInputTagHarness,\n  type TagsInputTagHarnessFilters,\n} from './tags-input-tag-harness';\n\n/** Filters accepted by `TagsInputHarness.with`. */\nexport interface TagsInputHarnessFilters extends BaseHarnessFilters {\n  /** Match by the control's accessible name (its `aria-label`). */\n  label?: string | RegExp;\n  /** Match disabled / enabled controls. */\n  disabled?: boolean;\n}\n\n/**\n * Harness for `tw-tags-input`.\n *\n * The control renders committed tags as chips followed by a single text input;\n * everything lives inside the `tw-tags-input` host, so no overlay handling is\n * needed and the ordinary fixture loader is enough.\n *\n * Note where the ARIA lives: the host is a `role=\"group\"`, which ARIA 1.2 does\n * not allow to carry `aria-required` / `aria-invalid`, so those sit on the\n * inner text input — the element that actually owns the pending value.\n * {@link isRequired} and {@link isInvalid} read them from there;\n * {@link isDisabled} reads `aria-disabled` from the group, which is allowed.\n */\nexport class TagsInputHarness extends ComponentHarness {\n  static hostSelector = 'tw-tags-input';\n\n  private readonly textInput = this.locatorFor('input[type=\"text\"]');\n\n  /** Predicate for `locatorFor` / `locatorForAll`. */\n  static with(options: TagsInputHarnessFilters = {}): HarnessPredicate<TagsInputHarness> {\n    return new HarnessPredicate(TagsInputHarness, options)\n      .addOption('label', options.label, async (h, label) =>\n        HarnessPredicate.stringMatches(await h.getLabel(), label),\n      )\n      .addOption(\n        'disabled',\n        options.disabled,\n        async (h, disabled) => (await h.isDisabled()) === disabled,\n      );\n  }\n\n  /** The control's accessible name, from `aria-label` when one is set. */\n  async getLabel(): Promise<string | null> {\n    return (await this.host()).getAttribute('aria-label');\n  }\n\n  /** Whether the group reports `aria-disabled=\"true\"`. */\n  async isDisabled(): Promise<boolean> {\n    return (await (await this.host()).getAttribute('aria-disabled')) === 'true';\n  }\n\n  /** Whether the text input reports `aria-required=\"true\"`. */\n  async isRequired(): Promise<boolean> {\n    return (await (await this.textInput()).getAttribute('aria-required')) === 'true';\n  }\n\n  /** Whether the text input reports `aria-invalid=\"true\"`. */\n  async isInvalid(): Promise<boolean> {\n    return (await (await this.textInput()).getAttribute('aria-invalid')) === 'true';\n  }\n\n  /**\n   * Every committed chip, in render order. Remove by index by indexing this\n   * array — `(await input.getTags())[1].remove()` — which is why no\n   * `removeTagAt(index)` exists.\n   */\n  async getTags(\n    filters: TagsInputTagHarnessFilters = {},\n  ): Promise<TagsInputTagHarness[]> {\n    return this.locatorForAll(TagsInputTagHarness.with(filters))();\n  }\n\n  /** The visible label of every committed chip, in render order. */\n  async getTagTexts(): Promise<string[]> {\n    const tags = await this.getTags();\n    return Promise.all(tags.map((tag) => tag.getText()));\n  }\n\n  /** The in-progress (uncommitted) text currently in the input. */\n  async getInputValue(): Promise<string> {\n    return (await this.textInput()).getProperty<string>('value');\n  }\n\n  /**\n   * Types `text` into the input and commits it with Enter. Typing appends, so\n   * any pending text already in the input is committed along with it.\n   *\n   * Enter is the commit gesture only while `separatorKeys` contains `'Enter'`\n   * (the default). A control configured with, say, `[separatorKeys]=\"[';']\"`\n   * commits through {@link typeInput} instead — `typeInput('alpha;')`.\n   *\n   * The commit may be dropped by the component (empty, duplicate, or `maxTags`\n   * reached); assert against {@link getTagTexts} rather than assuming it\n   * landed.\n   */\n  async addTag(text: string): Promise<void> {\n    const input = await this.textInput();\n    await input.sendKeys(text);\n    await input.sendKeys(TestKey.ENTER);\n  }\n\n  /**\n   * Types `text` into the input character by character, appending to whatever\n   * is already there. Use it to stage pending text that {@link addTag} would\n   * commit for you — reading it back, discarding it, or letting `addOnBlur`\n   * pick it up.\n   *\n   * A separator character in `text` does commit the text before it, but CDK's\n   * synthetic typing appends every character to the input regardless of the\n   * component's `preventDefault()`, so the separator itself is left behind in\n   * the input where a real browser swallows it. Commit with {@link addTag},\n   * and treat a trailing separator here as staging, not as a commit gesture.\n   */\n  async typeInput(text: string): Promise<void> {\n    await (await this.textInput()).sendKeys(text);\n  }\n\n  /**\n   * Removes the first chip whose label matches. Throws when nothing matches,\n   * rather than failing silently.\n   */\n  async removeTag(text: string | RegExp): Promise<void> {\n    const matches = await this.getTags({ text });\n    if (matches.length === 0) {\n      throw new Error(`TagsInputHarness.removeTag: no tag matching ${String(text)}.`);\n    }\n    await matches[0].remove();\n  }\n\n  /**\n   * Discards the in-progress text with Escape — the control's own clear\n   * gesture. A no-op when the input is already empty. Does not touch committed\n   * chips.\n   */\n  async clearInput(): Promise<void> {\n    await (await this.textInput()).sendKeys(TestKey.ESCAPE);\n  }\n\n  /** Moves focus to the text input. */\n  async focus(): Promise<void> {\n    await (await this.textInput()).focus();\n  }\n\n  /**\n   * Moves focus out of the control. This is the gesture that marks the control\n   * touched and, with `addOnBlur`, commits the pending text.\n   */\n  async blur(): Promise<void> {\n    await (await this.textInput()).blur();\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/cdevhub-ngx-tw-tags-input.mjs

@@ -1,11 +1,12 @@
 import * as i0 from '@angular/core';
 import { input, output, inject, ElementRef, DestroyRef, viewChild, viewChildren, signal, computed, effect, untracked, afterNextRender, isDevMode, forwardRef, ChangeDetectionStrategy, Component } from '@angular/core';
-import { NgControl, NgForm, FormGroupDirective, Validators } from '@angular/forms';
+import { NgControl } from '@angular/forms';
 import { FocusMonitor, LiveAnnouncer } from '@angular/cdk/a11y';
+import { Directionality } from '@angular/cdk/bidi';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { isObservable, merge } from 'rxjs';
+import { isObservable } from 'rxjs';
 import { tv } from 'tailwind-variants';
-import { TW_ERROR_STATE_MATCHER } from '@cdevhub/ngx-tw/core';
+import { wireErrorState } from '@cdevhub/ngx-tw/core';
 import { FormFieldControl, TW_FORM_FIELD, TW_FORM_FIELD_CONTROL } from '@cdevhub/ngx-tw/form-field';
 import { BadgeComponent } from '@cdevhub/ngx-tw/badge';
 
@@ -68,12 +69,43 @@ const tagsInputVariants = tv({
         },
     },
     compoundVariants: [
-        // Standalone density × size — inline padding scale (mirrors combobox trigger).
-        { inFormField: false, size: 'xs', class: { root: 'px-2 py-1' } },
-        { inFormField: false, size: 'sm', class: { root: 'px-3 py-1.5' } },
-        { inFormField: false, size: 'md', class: { root: 'px-4 py-2' } },
-        { inFormField: false, size: 'lg', class: { root: 'px-5 py-2.5' } },
-        { inFormField: false, size: 'xl', class: { root: 'px-6 py-3' } },
+        // Standalone density × size — inline padding scale (mirrors combobox trigger)
+        // plus the control-height FLOOR. Per docs/vertical-rhythm.md §2 the chip
+        // strip is a `min-h` control, not a pinned one: chips wrap, so `py-*` stays
+        // exactly as it is and `min-h-*` only guarantees the box never sits below
+        // the control scale. Standalone-only, alongside the padding: inside a
+        // `tw-form-field` the root drops its border and padding and the field owns
+        // the box, so a floor here would stack on top of the field's own padding.
+        // Vertical padding is set so the `min-h-*` floor actually BINDS at rest.
+        //
+        // The tallest resting content is a CHIP, not the bare input line box. A
+        // chip is a badge: its own padding and text size make it taller than the
+        // input beside it at every size, so the box arithmetic that decides
+        // whether the floor binds is
+        //
+        //     chip + 2*py + 2px border  <=  floor
+        //
+        // Sizing the padding against the input line box instead left the floor
+        // inert the moment a single tag existed. Empty, the control measured
+        // correctly at all five sizes; populated, it measured 26 / 32 / 38 / 50 /
+        // 54 against a 24 / 32 / 36 / 44 / 48 scale — so a filter bar was on the
+        // grid until the user typed the first tag, then jumped 2px at xs and md
+        // and 6px at lg and xl. Only sm was ever correct, which is why the
+        // isolated slot reading looked like a one-off rather than a broken rule.
+        //
+        // Resting appearance does not change: once the floor binds, `items-center`
+        // centres the chip and the padding is no longer what sets the height. The
+        // padding still governs the multi-line case, where chips wrap and the box
+        // legitimately grows past the floor.
+        //
+        // Chip heights are 20 / 20 / 24 / 32 / 32, so the padding ceiling is
+        // 1 / 5 / 5 / 5 / 7px. `py-px` at xs is not decorative restraint: a 20px
+        // chip inside a 24px control with a 1px border leaves exactly 1px a side.
+        { inFormField: false, size: 'xs', class: { root: 'px-2 py-px min-h-6' } },
+        { inFormField: false, size: 'sm', class: { root: 'px-3 py-1 min-h-8' } },
+        { inFormField: false, size: 'md', class: { root: 'px-4 py-1 min-h-9' } },
+        { inFormField: false, size: 'lg', class: { root: 'px-5 py-1 min-h-11' } },
+        { inFormField: false, size: 'xl', class: { root: 'px-6 py-1.5 min-h-12' } },
         // Standalone error state — colored border + focus ring.
         {
             inFormField: false,
@@ -115,7 +147,7 @@ class TagsInputComponent extends FormFieldControl {
     disabledInput = input(false, { ...(ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {}), alias: 'disabled' });
     /** Marks the control as required. Mirrored to the input's `aria-required`. Also inferred from `Validators.required` on a bound control. Defaults to `false`. */
     requiredInput = input(false, { ...(ngDevMode ? { debugName: "requiredInput" } : /* istanbul ignore next */ {}), alias: 'required' });
-    /** Placeholder shown in the text input only while there are no chips and the input is empty. */
+    /** Placeholder shown in the text input only while there are no chips and the input is empty. Defaults to `undefined`. */
     placeholder = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
     /** Keys that commit the in-progress text as a tag. Each entry is a `KeyboardEvent.key` value (`'Enter'`) or a single separator character (`','`). Single-character separators also split pasted text. Defaults to `['Enter', ',']`. */
@@ -139,21 +171,32 @@ class TagsInputComponent extends FormFieldControl {
     /** Equality comparator used for dedup when `allowDuplicates` is false. Defaults to `Object.is` (reference / value identity). String tags dedupe case-sensitively by default; pass `(a, b) => a.toLowerCase() === b.toLowerCase()` for case-insensitive dedup. */
     compareWith = input((a, b) => Object.is(a, b), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "compareWith" }] : /* istanbul ignore next */ []));
-    /** Applied to the text input for labeling and identification only; does not submit the tag array via native (non-Angular) form posting. */
+    /** Applied to the text input for labeling and identification only; does not submit the tag array via native (non-Angular) form posting. Defaults to `undefined`. */
     name = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
     /** Id on the host element. Auto-generated as `tw-tags-input-N` when not provided. Used by the form-field's `<label for>` association. */
     idInput = input(undefined, { ...(ngDevMode ? { debugName: "idInput" } : /* istanbul ignore next */ {}), alias: 'id' });
-    /** Accessible name applied to the control when no visible label is wired. Mirrored to `aria-label`. */
+    /** Accessible name applied to the control when no visible label is wired. Mirrored to `aria-label`. Defaults to `undefined`. */
     ariaLabel = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
-    /** ID of an external element that labels the control. Mirrored to `aria-labelledby`. */
+    /** ID of an external element that labels the control. Mirrored to `aria-labelledby`. Defaults to `undefined`. */
     ariaLabelledby = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabelledby" } : /* istanbul ignore next */ {}), alias: 'aria-labelledby' });
-    /** ID of an external element that describes the control. Form-field merges its hint / error ids alongside. */
+    /** ID of an external element that describes the control. Form-field merges its hint / error ids alongside. Defaults to `undefined`. Alias: `aria-describedby`. */
     ariaDescribedby = input(undefined, { ...(ngDevMode ? { debugName: "ariaDescribedby" } : /* istanbul ignore next */ {}), alias: 'aria-describedby' });
     /** Per-instance override of the {@link ErrorStateMatcher}. When omitted, uses the `TW_ERROR_STATE_MATCHER` token's value. */
     errorStateMatcher = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "errorStateMatcher" }] : /* istanbul ignore next */ []));
-    /** Fires when the tag array changes through user interaction (add, remove, clear). Emits a fresh array reference. Does not fire on `writeValue`. */
+    /**
+     * Fires when the tag array changes through user interaction (add, remove,
+     * clear). Emits a fresh array reference. Does **not** fire on `writeValue` /
+     * `FormControl.setValue` / `ngModel`.
+     *
+     * This is a hand-written, user-gesture-only output. The control exposes no
+     * `value` input and therefore no two-way binding, so — unlike
+     * `tw-checkbox` / `tw-switch` / `tw-radio-group`, where `(valueChange)` /
+     * `(checkedChange)` is minted by a `model()` and fires on programmatic writes
+     * too — there is no any-change channel here. Observe programmatic writes
+     * through the bound form control's own `valueChanges`.
+     */
     valueChange = output();
     /** Fires when a tag is committed via Enter, a separator key, paste, or `addTag()`. Does not fire for dropped duplicates, blocked-by-max commits, empty commits, or `writeValue`. */
     tagAdded = output();
@@ -164,10 +207,14 @@ class TagsInputComponent extends FormFieldControl {
     elementRef = inject((ElementRef));
     destroyRef = inject(DestroyRef);
     ngControl = inject(NgControl, { optional: true, self: true });
-    parentForm = inject(NgForm, { optional: true });
-    parentFormGroup = inject(FormGroupDirective, { optional: true });
-    defaultMatcher = inject(TW_ERROR_STATE_MATCHER);
     formField = inject(TW_FORM_FIELD, { optional: true });
+    /**
+     * Optional so a consumer that never imports `BidiModule` still gets a working
+     * control — chip navigation falls back to LTR when the token is absent. Read
+     * imperatively inside the keydown handlers; nothing here needs to re-render
+     * on a direction change.
+     */
+    directionality = inject(Directionality, { optional: true });
     textInputRef = viewChild('textInput', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "textInputRef" }] : /* istanbul ignore next */ []));
     removeButtons = viewChildren('removeBtn', /* @ts-ignore */
@@ -186,10 +233,13 @@ class TagsInputComponent extends FormFieldControl {
     ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
     _focused = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_focused" }] : /* istanbul ignore next */ []));
-    _ngControlRev = signal(0, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "_ngControlRev" }] : /* istanbul ignore next */ []));
-    _formSubmitRev = signal(0, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "_formSubmitRev" }] : /* istanbul ignore next */ []));
+    /** @internal Shared `errorState` / `required` / `errors` derivation — see `wireErrorState`. */
+    errorWiring = wireErrorState({
+        ngControl: () => this.ngControl,
+        matcher: () => this.errorStateMatcher(),
+        required: () => this.requiredInput(),
+        track: [() => this._focused()],
+    });
     describedByIdsSignal = signal([], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "describedByIdsSignal" }] : /* istanbul ignore next */ []));
     labelledByIdsSignal = signal([], /* @ts-ignore */
@@ -216,30 +266,11 @@ class TagsInputComponent extends FormFieldControl {
     disabled = computed(() => this.disabledInput() || this.cvaDisabled(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     /** @internal */
-    required = computed(() => {
-        this._ngControlRev();
-        if (this.requiredInput())
-            return true;
-        return !!this.ngControl?.control?.hasValidator(Validators.required);
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    required = this.errorWiring.required;
     /** @internal */
-    errorState = computed(() => {
-        this._ngControlRev();
-        this._formSubmitRev();
-        this._focused();
-        const matcher = this.errorStateMatcher() ?? this.defaultMatcher;
-        const form = this.parentFormGroup ??
-            this.parentForm;
-        return matcher.isErrorState(this.ngControl?.control ?? null, form);
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "errorState" }] : /* istanbul ignore next */ []));
+    errorState = this.errorWiring.errorState;
     /** @internal Active validation errors map from the bound control, for `[twError match="…"]` filtering. */
-    errors = computed(() => {
-        this._ngControlRev();
-        return this.ngControl?.control?.errors ?? null;
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
+    errors = this.errorWiring.errors;
     /** @internal */
     controlType = 'tags-input';
     /** @internal */
@@ -470,7 +501,13 @@ class TagsInputComponent extends FormFieldControl {
             }
             return;
         }
-        if (key === 'ArrowLeft') {
+        // Stepping out of the input into the last chip is a *backwards* move: the
+        // chip row is rendered before the input, so it is ArrowLeft in LTR and
+        // ArrowRight in an RTL locale, where the row lays out right-to-left. The
+        // caret test is direction-independent — `selectionStart === 0` is the
+        // logical start of the text in both directions.
+        const backKey = this.directionality?.value === 'rtl' ? 'ArrowRight' : 'ArrowLeft';
+        if (key === backKey) {
             const el = event.target;
             const atStart = (el.selectionStart ?? 0) === 0 && (el.selectionEnd ?? 0) === 0;
             if (atStart && this.tags().length > 0) {
@@ -498,17 +535,26 @@ class TagsInputComponent extends FormFieldControl {
         const last = this.tags().length - 1;
         switch (event.key) {
             case 'ArrowLeft':
+            case 'ArrowRight': {
+                // Horizontal arrows follow the layout direction. Chips sit on a
+                // flex row that lays out right-to-left in an RTL locale, so ArrowLeft
+                // is the *forward* key there. The chip host is a custom element, not a
+                // native control, so the browser does no flipping for us. Home/End stay
+                // logical — CDK's ListKeyManager does not flip them either.
                 event.preventDefault();
-                if (index > 0)
+                const rtl = this.directionality?.value === 'rtl';
+                const forward = rtl ? event.key === 'ArrowLeft' : event.key === 'ArrowRight';
+                if (forward) {
+                    if (index < last)
+                        this.focusChip(index + 1);
+                    else
+                        this.focusInput();
+                }
+                else if (index > 0) {
                     this.focusChip(index - 1);
+                }
                 return;
-            case 'ArrowRight':
-                event.preventDefault();
-                if (index < last)
-                    this.focusChip(index + 1);
-                else
-                    this.focusInput();
-                return;
+            }
             case 'Home':
                 event.preventDefault();
                 this.focusChip(0);
@@ -605,28 +651,14 @@ class TagsInputComponent extends FormFieldControl {
                         this.commitInput();
                     }
                     this.onTouched();
-                    this._ngControlRev.update((n) => n + 1);
+                    this.errorWiring.bump();
                     // Reset roving so the next Tab into the control lands on the input.
                     this.activeChipIndex.set(null);
                 }
             });
         }
         this.destroyRef.onDestroy(() => this.focusMonitor.stopMonitoring(this.elementRef));
-        const ctrl = this.ngControl?.control;
-        if (ctrl) {
-            const streams = [ctrl.statusChanges, ctrl.valueChanges].filter((s) => !!s);
-            if (streams.length) {
-                merge(...streams)
-                    .pipe(takeUntilDestroyed(this.destroyRef))
-                    .subscribe(() => this._ngControlRev.update((n) => n + 1));
-            }
-        }
-        const submit = this.parentFormGroup?.ngSubmit ?? this.parentForm?.ngSubmit;
-        if (submit) {
-            submit
-                .pipe(takeUntilDestroyed(this.destroyRef))
-                .subscribe(() => this._formSubmitRev.update((n) => n + 1));
-        }
+        this.errorWiring.connect();
     }
     // ── Helpers ──
     focusChip(index) {
@@ -667,7 +699,7 @@ class TagsInputComponent extends FormFieldControl {
             this.labelledByIdsSignal().length > 0);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TagsInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: TagsInputComponent, isStandalone: true, selector: "tw-tags-input", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, requiredInput: { classPropertyName: "requiredInput", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, separatorKeys: { classPropertyName: "separatorKeys", publicName: "separatorKeys", isSignal: true, isRequired: false, transformFunction: null }, addOnBlur: { classPropertyName: "addOnBlur", publicName: "addOnBlur", isSignal: true, isRequired: false, transformFunction: null }, maxTags: { classPropertyName: "maxTags", publicName: "maxTags", isSignal: true, isRequired: false, transformFunction: null }, allowDuplicates: { classPropertyName: "allowDuplicates", publicName: "allowDuplicates", isSignal: true, isRequired: false, transformFunction: null }, createTag: { classPropertyName: "createTag", publicName: "createTag", isSignal: true, isRequired: false, transformFunction: null }, tagLabel: { classPropertyName: "tagLabel", publicName: "tagLabel", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, idInput: { classPropertyName: "idInput", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, errorStateMatcher: { classPropertyName: "errorStateMatcher", publicName: "errorStateMatcher", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", tagAdded: "tagAdded", tagRemoved: "tagRemoved" }, host: { attributes: { "role": "group" }, properties: { "id": "id()", "class": "rootClasses()", "attr.aria-label": "ariaLabel() || null", "attr.aria-labelledby": "resolvedLabelledBy() || null", "attr.aria-describedby": "resolvedDescribedBy() || null", "attr.aria-disabled": "disabled() || null", "attr.aria-invalid": "errorState() || null", "attr.data-focused": "focused() || null" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: TagsInputComponent, isStandalone: true, selector: "tw-tags-input", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, requiredInput: { classPropertyName: "requiredInput", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, separatorKeys: { classPropertyName: "separatorKeys", publicName: "separatorKeys", isSignal: true, isRequired: false, transformFunction: null }, addOnBlur: { classPropertyName: "addOnBlur", publicName: "addOnBlur", isSignal: true, isRequired: false, transformFunction: null }, maxTags: { classPropertyName: "maxTags", publicName: "maxTags", isSignal: true, isRequired: false, transformFunction: null }, allowDuplicates: { classPropertyName: "allowDuplicates", publicName: "allowDuplicates", isSignal: true, isRequired: false, transformFunction: null }, createTag: { classPropertyName: "createTag", publicName: "createTag", isSignal: true, isRequired: false, transformFunction: null }, tagLabel: { classPropertyName: "tagLabel", publicName: "tagLabel", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, idInput: { classPropertyName: "idInput", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, errorStateMatcher: { classPropertyName: "errorStateMatcher", publicName: "errorStateMatcher", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", tagAdded: "tagAdded", tagRemoved: "tagRemoved" }, host: { attributes: { "role": "group" }, properties: { "id": "id()", "class": "rootClasses()", "attr.aria-label": "ariaLabel() || null", "attr.aria-labelledby": "resolvedLabelledBy() || null", "attr.aria-describedby": "resolvedDescribedBy() || null", "attr.aria-disabled": "disabled() || null", "attr.data-focused": "focused() || null" } }, providers: [
             {
                 provide: TW_FORM_FIELD_CONTROL,
                 useExisting: forwardRef(() => TagsInputComponent),
@@ -784,7 +816,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                         '[attr.aria-labelledby]': 'resolvedLabelledBy() || null',
                         '[attr.aria-describedby]': 'resolvedDescribedBy() || null',
                         '[attr.aria-disabled]': 'disabled() || null',
-                        '[attr.aria-invalid]': 'errorState() || null',
+                        // NOTE: no `aria-invalid` here. ARIA 1.2 does not allow it on
+                        // `role="group"` (axe: critical `aria-allowed-attr`). The inner
+                        // `<input type="text">` already carries it — that is the control with the
+                        // value. Latent rather than observed: it only fires once a consumer puts
+                        // the control into an error state.
                         '[attr.data-focused]': 'focused() || null',
                     },
                 }]