ngwr 10.2.1 → 11.0.0

package/fesm2022/ngwr-carousel-testing.mjs

@@ -0,0 +1,377 @@
+import { ComponentHarness, HarnessPredicate } from '@angular/cdk/testing';
+
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+/**
+ * The settled percentage out of `translateX(-100%)`, and out of the mid-drag
+ * `translateX(calc(-100% + 12px))` — the pixel half is the finger, not the slide.
+ */
+const TRACK_OFFSET = /translateX\(\s*(?:calc\(\s*)?(-?[\d.]+)%/;
+/**
+ * Test harness for `<wr-carousel>` — drive the strip the way someone on the page
+ * drives it.
+ *
+ * Everything it reads is public API: the `.wr-carousel__*` elements, the dots'
+ * `aria-current`, and the `aria-roledescription` the viewport and each slide
+ * publish. Two things are worth knowing before writing an assertion against it:
+ *
+ * - **The slides do not say which one is showing.** A `<wr-carousel-slide>` carries
+ *   `role="group"` and `aria-roledescription="slide"` and nothing else — no
+ *   `aria-current`, no `aria-hidden` on the ones off-screen. The current slide is
+ *   published in exactly two places, the dot carrying `aria-current="true"` and the
+ *   track's own offset, and {@link getActiveIndex} reads them in that order. There
+ *   is likewise no live region: the component announces a move to nobody, so a
+ *   harness cannot report one.
+ * - **It never drags.** The swipe the component supports is a touch gesture
+ *   measured against the viewport's own width, and jsdom has no layout — that width
+ *   is 0, so the "20% of the viewport" threshold is 0 too and EVERY drag clears it,
+ *   a 1px twitch included. The result says nothing about a real finger, and the spec
+ *   pins that artifact rather than pretending otherwise. Every move here goes
+ *   through the arrow buttons and the dots instead, which is the accessible path
+ *   anyway. `carousel.spec.ts` is where the gesture itself is pinned, by staging the
+ *   touch events and declaring an `offsetWidth`.
+ *
+ * @example
+ * ```ts
+ * const loader = TestbedHarnessEnvironment.loader(fixture);
+ * const gallery = await loader.getHarness(WrCarouselHarness.with({ ariaLabel: 'Gallery' }));
+ *
+ * expect(await gallery.getSlideCount()).toBe(3);
+ * await gallery.next();
+ * expect(await gallery.getActiveIndex()).toBe(1);
+ *
+ * await gallery.goTo(2);
+ * expect(await gallery.getActiveSlideText()).toBe('Dunes');
+ * ```
+ *
+ * @see https://ngwr.dev/guides/testing
+ */
+class WrCarouselHarness extends ComponentHarness {
+    static hostSelector = 'wr-carousel';
+    /** Build a predicate that narrows the query — pass to `getHarness` / `getAllHarnesses`. */
+    static with(options = {}) {
+        return new HarnessPredicate(WrCarouselHarness, options)
+            .addOption('ariaLabel', options.ariaLabel, (harness, label) => HarnessPredicate.stringMatches(harness.getAccessibleName(), label))
+            .addOption('slideCount', options.slideCount, async (harness, count) => (await harness.getSlideCount()) === count)
+            .addOption('slideText', options.slideText, async (harness, text) => {
+            for (const slide of await harness.getSlideTexts()) {
+                if (await HarnessPredicate.stringMatches(slide, text))
+                    return true;
+            }
+            return false;
+        });
+    }
+    // What the carousel announces
+    /**
+     * The role the strip announces — `group`, which is what lets
+     * `aria-roledescription` mean anything.
+     *
+     * Read off the VIEWPORT rather than the host, and that is the whole point of the
+     * pairing: `aria-roledescription` is dropped on an element with no semantic role,
+     * and the host element (`<wr-carousel>`) has none.
+     */
+    async getRole() {
+        return (await this.viewport()).getAttribute('role');
+    }
+    /** How the strip describes itself to a screen reader — `carousel`. */
+    async getRoleDescription() {
+        return (await this.viewport()).getAttribute('aria-roledescription');
+    }
+    /**
+     * The carousel's accessible name.
+     *
+     * The RESOLVED one, which is the only one the page has: the `ariaLabel` input
+     * defaults to `null` and the component runs it through the `ngwr/i18n` catalog
+     * (`carousel.label`, falling back to `'Carousel'`), so a consumer who passed
+     * nothing still gets a named group and this still answers. Reporting the raw
+     * input would say `null` about a carousel that announces itself perfectly well.
+     */
+    async getAccessibleName() {
+        return (await this.viewport()).getAttribute('aria-label');
+    }
+    /** The accessible name of the previous-slide button. Throws when the arrows are not rendered. */
+    async getPreviousLabel() {
+        return (await this.nav('prev', 'getPreviousLabel')).getAttribute('aria-label');
+    }
+    /** The accessible name of the next-slide button. Throws when the arrows are not rendered. */
+    async getNextLabel() {
+        return (await this.nav('next', 'getNextLabel')).getAttribute('aria-label');
+    }
+    /**
+     * The accessible name of the dot group — what names the row of dots as a set
+     * rather than leaving a screen reader with N unexplained buttons.
+     *
+     * Throws when the dots are not rendered: there is no group to name then, and a
+     * `null` would read like a group that lost its label.
+     */
+    async getPaginationLabel() {
+        const dots = await this.locatorForOptional('.wr-carousel__dots')();
+        if (!dots) {
+            throw new Error('WrCarouselHarness.getPaginationLabel(): this carousel renders no dot group — the dots are dropped ' +
+                'when [showDots] is false or when there are fewer than two slides.');
+        }
+        return dots.getAttribute('aria-label');
+    }
+    /**
+     * What each slide announces itself as — `slide`, on every one of them, in DOM
+     * order.
+     *
+     * The one piece of ARIA the slides carry, and the reason it is worth asking: it
+     * is set on the slide component's own host, so a slide reaching the page through
+     * some other element would come back `null` here while the carousel kept working.
+     */
+    async getSlideRoleDescriptions() {
+        const slides = await this.slides();
+        return Promise.all(slides.map(slide => slide.getAttribute('aria-roledescription')));
+    }
+    // What the carousel is showing
+    /** How many slides the carousel holds. */
+    async getSlideCount() {
+        return (await this.slides()).length;
+    }
+    /** The text of every slide, in DOM order. */
+    async getSlideTexts() {
+        const slides = await this.slides();
+        return Promise.all(slides.map(slide => slide.text()));
+    }
+    /**
+     * Which slide is showing, as a zero-based index.
+     *
+     * Taken from the dot carrying `aria-current="true"` whenever the dots are
+     * rendered — that attribute is the only thing on the page that tells a screen
+     * reader where in the strip it has got to, so it is the answer that matters —
+     * and derived from the track's rendered offset when they are not, `[showDots]`
+     * being off and a single-slide carousel both dropping the strip entirely.
+     *
+     * That fallback takes the MAGNITUDE of the offset on purpose. The transform is
+     * physical while the slides sit on the inline axis, so a mirrored carousel paints
+     * `translateX(100%)` for the very slide an LTR one paints `translateX(-100%)`
+     * for; signed, this reported slide -1 for a perfectly healthy RTL carousel.
+     *
+     * Throws on a carousel with no slides at all — nothing is showing there, and `0`
+     * would read like the first slide.
+     */
+    async getActiveIndex() {
+        const count = await this.getSlideCount();
+        if (count === 0) {
+            throw new Error('WrCarouselHarness.getActiveIndex(): this carousel has no <wr-carousel-slide> children, so no slide is ' +
+                'current — 0 would read like the first one.');
+        }
+        const dots = await this.dots();
+        if (dots.length) {
+            for (let index = 0; index < dots.length; index++) {
+                if ((await dots[index].getAttribute('aria-current')) === 'true')
+                    return index;
+            }
+            throw new Error('WrCarouselHarness.getActiveIndex(): the dots are rendered but none of them carries aria-current, so the ' +
+                'page tells a screen reader that no slide is current. The component clamps `active` into range, so look ' +
+                'for a lost aria-current binding rather than an out-of-range index — the `--active` class alone is paint.');
+        }
+        return Math.round(Math.abs(await this.getTrackOffsetPercent()) / 100);
+    }
+    /** The text of the slide that is showing. Throws on a carousel with no slides. */
+    async getActiveSlideText() {
+        const index = await this.getActiveIndex();
+        return (await this.slides())[index].text();
+    }
+    /**
+     * The track's rendered offset, as a percentage of one viewport: `-100` for the
+     * second slide of an LTR carousel, `+100` for the second slide of a mirrored one.
+     *
+     * Read off the inline `style` attribute rather than through `getCssValue()`,
+     * because the percentage only survives where the component wrote it. jsdom hands
+     * a declared `transform` straight back through `getComputedStyle`, so
+     * `getCssValue()` answers correctly HERE and would stop the moment the same
+     * harness ran against a real browser, which resolves the property to a pixel
+     * matrix — a green unit test would be hiding it. Mid-drag the component writes
+     * `translateX(calc(-100% + 12px))` and this reports the settled `-100`: the pixel
+     * half is the finger's own displacement, which is physical in both directions and
+     * belongs to no slide.
+     *
+     * Worth asserting next to {@link getActiveIndex}: it is the same fact painted
+     * instead of announced, and a carousel that lights the right dot while parking
+     * the track in blank space is exactly the failure nobody sees in a spec.
+     */
+    async getTrackOffsetPercent() {
+        const style = (await (await this.track()).getAttribute('style')) ?? '';
+        const match = TRACK_OFFSET.exec(style);
+        if (!match) {
+            throw new Error(`WrCarouselHarness.getTrackOffsetPercent(): the track carries no translateX() offset (style: "${style}"). ` +
+                'That transform is how the carousel moves at all, so it should always be there.');
+        }
+        return Number(match[1]);
+    }
+    // The controls the carousel renders
+    /** Whether the prev / next arrows are on the page. Both are dropped together. */
+    async hasArrows() {
+        return (await this.locatorForOptional('.wr-carousel__nav--next')()) !== null;
+    }
+    /** Whether the dot strip is on the page. */
+    async hasDots() {
+        return (await this.locatorForOptional('.wr-carousel__dots')()) !== null;
+    }
+    /** How many dots are rendered — one per slide, or `0` while the strip is hidden. */
+    async getDotCount() {
+        return (await this.dots()).length;
+    }
+    /**
+     * The accessible name of every dot, in order — `'Go to slide 1'`, … resolved
+     * through the `ngwr/i18n` catalog.
+     *
+     * A dot is a bare button with no text of its own, so this label is all a screen
+     * reader has to tell one from another. `[]` when the strip is hidden, matching
+     * {@link getDotCount}.
+     */
+    async getDotLabels() {
+        const dots = await this.dots();
+        return Promise.all(dots.map(dot => dot.getAttribute('aria-label')));
+    }
+    // Moving the carousel
+    /**
+     * Click the next-slide arrow.
+     *
+     * "Next" is the next SLIDE, not the next thing on the right: the buttons keep
+     * their semantics under `dir="rtl"` and only the travel under them turns around.
+     * At the last slide this wraps to the first one, unless `[loop]` is off — in
+     * which case it legitimately does nothing, so nothing is asserted about the move.
+     */
+    async next() {
+        return (await this.nav('next', 'next')).click();
+    }
+    /** Click the previous-slide arrow. Wraps to the last slide unless `[loop]` is off. */
+    async previous() {
+        return (await this.nav('prev', 'previous')).click();
+    }
+    /**
+     * Jump to a slide by clicking its dot — the only way the page offers to reach a
+     * slide directly.
+     *
+     * Throws when the dots are hidden (the component's own `goTo()` is still there
+     * for a spec holding the instance, but nothing on the page can be clicked) and
+     * throws on an index no slide has, rather than clicking nothing and leaving the
+     * carousel where it was.
+     */
+    async goTo(index) {
+        const dots = await this.dots();
+        if (!dots.length) {
+            throw new Error(`WrCarouselHarness.goTo(${index}): this carousel renders no dots, and they are the only way to reach a ` +
+                'slide directly from the page — they are dropped when [showDots] is false or when there are fewer than ' +
+                'two slides. Use next() / previous(), or write the active index from the host.');
+        }
+        if (!Number.isInteger(index) || index < 0 || index >= dots.length) {
+            throw new Error(`WrCarouselHarness.goTo(${index}): out of range — this carousel has ${dots.length} slides, so the index ` +
+                `must be a whole number between 0 and ${dots.length - 1}.`);
+        }
+        return dots[index].click();
+    }
+    // Holding autoplay
+    /**
+     * Move the pointer onto the carousel, which is what HOLDS autoplay.
+     *
+     * Aimed at the host and not the viewport, deliberately: the arrows and the dots
+     * are the viewport's SIBLINGS, so a viewport-scoped hover would let a slide
+     * change under a cursor that is aiming at an arrow.
+     */
+    async hover() {
+        return (await this.host()).hover();
+    }
+    /** Move the pointer away again, releasing the hold. */
+    async mouseAway() {
+        return (await this.host()).mouseAway();
+    }
+    /**
+     * Put keyboard focus on the first control the carousel renders — the previous
+     * arrow, or the first dot when the arrows are hidden.
+     *
+     * This is the keyboard half of the autoplay hold: WCAG 2.2.2 wants a way to stop
+     * moving content, and hovering is not one for someone who never touches a mouse,
+     * so the component listens for `focusin` on its host as well. Focus lands on the
+     * carousel's OWN controls; anything focusable a slide happens to project is not
+     * this harness's business, though in a browser it would hold autoplay just the
+     * same.
+     *
+     * Note what this is NOT: the dot of the slide showing. The dots are ordinary
+     * buttons with no roving `tabindex`, so each of them is a tab stop of its own and
+     * the first one a Tab press meets is the prev arrow whatever slide is current —
+     * two different questions, answered here and by {@link getActiveIndex}.
+     *
+     * Throws when the carousel renders no controls at all, because then there is
+     * nothing for a Tab press to land on and no keyboard mechanism to assert.
+     */
+    async focus() {
+        const [first] = await this.controls();
+        if (!first) {
+            throw new Error('WrCarouselHarness.focus(): this carousel renders no controls of its own — the arrows and the dots are ' +
+                'both gone (a single slide, or [showArrows] and [showDots] switched off), so a Tab press has nothing ' +
+                'inside it to land on.');
+        }
+        return first.focus();
+    }
+    /**
+     * Take focus off whichever of the carousel's controls holds it, releasing the
+     * hold {@link focus} started.
+     *
+     * Throws when none of them is focused: `focusout` is what the component listens
+     * for, and blurring an element that never had focus fires nothing — a quiet
+     * no-op here surfaces as an autoplay assertion failing three lines later.
+     */
+    async blur() {
+        for (const control of await this.controls()) {
+            if (await control.isFocused())
+                return control.blur();
+        }
+        throw new Error('WrCarouselHarness.blur(): none of the controls this carousel renders holds focus, so there is no focus to ' +
+            'release. Call focus() first — the hold is released by blurring the element that took it.');
+    }
+    /** Whether one of the carousel's own controls holds focus — which is what holds autoplay. */
+    async isFocused() {
+        for (const control of await this.controls()) {
+            if (await control.isFocused())
+                return true;
+        }
+        return false;
+    }
+    // Internals
+    /** The element that carries the carousel's role and name. */
+    async viewport() {
+        return this.locatorFor('.wr-carousel__viewport')();
+    }
+    /** The moving strip, whose inline transform is where the carousel IS. */
+    async track() {
+        return this.locatorFor('.wr-carousel__track')();
+    }
+    async slides() {
+        return this.locatorForAll('wr-carousel-slide')();
+    }
+    async dots() {
+        return this.locatorForAll('.wr-carousel__dot')();
+    }
+    /**
+     * Every control the carousel renders itself, in the order a Tab press meets
+     * them: the two arrows, then the dots.
+     */
+    async controls() {
+        const navs = await this.locatorForAll('.wr-carousel__nav')();
+        return [...navs, ...(await this.dots())];
+    }
+    /** One arrow, or a failure naming both reasons it might not be there. */
+    async nav(side, caller) {
+        const button = await this.locatorForOptional(`.wr-carousel__nav--${side}`)();
+        if (!button) {
+            throw new Error(`WrCarouselHarness.${caller}(): this carousel renders no ${side} arrow — the arrows are dropped when ` +
+                '[showArrows] is false or when there are fewer than two slides to page through.');
+        }
+        return button;
+    }
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { WrCarouselHarness };
+//# sourceMappingURL=ngwr-carousel-testing.mjs.map

package/fesm2022/ngwr-carousel-testing.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngwr-carousel-testing.mjs","sources":["../../../projects/lib/carousel/testing/wr-carousel-harness.ts","../../../projects/lib/carousel/testing/ngwr-carousel-testing.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { ComponentHarness, HarnessPredicate, type TestElement } from '@angular/cdk/testing';\n\nimport type { WrCarouselHarnessFilters } from './interfaces';\n\n/**\n * The settled percentage out of `translateX(-100%)`, and out of the mid-drag\n * `translateX(calc(-100% + 12px))` — the pixel half is the finger, not the slide.\n */\nconst TRACK_OFFSET = /translateX\\(\\s*(?:calc\\(\\s*)?(-?[\\d.]+)%/;\n\n/**\n * Test harness for `<wr-carousel>` — drive the strip the way someone on the page\n * drives it.\n *\n * Everything it reads is public API: the `.wr-carousel__*` elements, the dots'\n * `aria-current`, and the `aria-roledescription` the viewport and each slide\n * publish. Two things are worth knowing before writing an assertion against it:\n *\n * - **The slides do not say which one is showing.** A `<wr-carousel-slide>` carries\n *   `role=\"group\"` and `aria-roledescription=\"slide\"` and nothing else — no\n *   `aria-current`, no `aria-hidden` on the ones off-screen. The current slide is\n *   published in exactly two places, the dot carrying `aria-current=\"true\"` and the\n *   track's own offset, and {@link getActiveIndex} reads them in that order. There\n *   is likewise no live region: the component announces a move to nobody, so a\n *   harness cannot report one.\n * - **It never drags.** The swipe the component supports is a touch gesture\n *   measured against the viewport's own width, and jsdom has no layout — that width\n *   is 0, so the \"20% of the viewport\" threshold is 0 too and EVERY drag clears it,\n *   a 1px twitch included. The result says nothing about a real finger, and the spec\n *   pins that artifact rather than pretending otherwise. Every move here goes\n *   through the arrow buttons and the dots instead, which is the accessible path\n *   anyway. `carousel.spec.ts` is where the gesture itself is pinned, by staging the\n *   touch events and declaring an `offsetWidth`.\n *\n * @example\n * ```ts\n * const loader = TestbedHarnessEnvironment.loader(fixture);\n * const gallery = await loader.getHarness(WrCarouselHarness.with({ ariaLabel: 'Gallery' }));\n *\n * expect(await gallery.getSlideCount()).toBe(3);\n * await gallery.next();\n * expect(await gallery.getActiveIndex()).toBe(1);\n *\n * await gallery.goTo(2);\n * expect(await gallery.getActiveSlideText()).toBe('Dunes');\n * ```\n *\n * @see https://ngwr.dev/guides/testing\n */\nexport class WrCarouselHarness extends ComponentHarness {\n  static hostSelector = 'wr-carousel';\n\n  /** Build a predicate that narrows the query — pass to `getHarness` / `getAllHarnesses`. */\n  static with(options: WrCarouselHarnessFilters = {}): HarnessPredicate<WrCarouselHarness> {\n    return new HarnessPredicate(WrCarouselHarness, options)\n      .addOption('ariaLabel', options.ariaLabel, (harness, label) =>\n        HarnessPredicate.stringMatches(harness.getAccessibleName(), label)\n      )\n      .addOption('slideCount', options.slideCount, async (harness, count) => (await harness.getSlideCount()) === count)\n      .addOption('slideText', options.slideText, async (harness, text) => {\n        for (const slide of await harness.getSlideTexts()) {\n          if (await HarnessPredicate.stringMatches(slide, text)) return true;\n        }\n        return false;\n      });\n  }\n\n  // What the carousel announces\n\n  /**\n   * The role the strip announces — `group`, which is what lets\n   * `aria-roledescription` mean anything.\n   *\n   * Read off the VIEWPORT rather than the host, and that is the whole point of the\n   * pairing: `aria-roledescription` is dropped on an element with no semantic role,\n   * and the host element (`<wr-carousel>`) has none.\n   */\n  async getRole(): Promise<string | null> {\n    return (await this.viewport()).getAttribute('role');\n  }\n\n  /** How the strip describes itself to a screen reader — `carousel`. */\n  async getRoleDescription(): Promise<string | null> {\n    return (await this.viewport()).getAttribute('aria-roledescription');\n  }\n\n  /**\n   * The carousel's accessible name.\n   *\n   * The RESOLVED one, which is the only one the page has: the `ariaLabel` input\n   * defaults to `null` and the component runs it through the `ngwr/i18n` catalog\n   * (`carousel.label`, falling back to `'Carousel'`), so a consumer who passed\n   * nothing still gets a named group and this still answers. Reporting the raw\n   * input would say `null` about a carousel that announces itself perfectly well.\n   */\n  async getAccessibleName(): Promise<string | null> {\n    return (await this.viewport()).getAttribute('aria-label');\n  }\n\n  /** The accessible name of the previous-slide button. Throws when the arrows are not rendered. */\n  async getPreviousLabel(): Promise<string | null> {\n    return (await this.nav('prev', 'getPreviousLabel')).getAttribute('aria-label');\n  }\n\n  /** The accessible name of the next-slide button. Throws when the arrows are not rendered. */\n  async getNextLabel(): Promise<string | null> {\n    return (await this.nav('next', 'getNextLabel')).getAttribute('aria-label');\n  }\n\n  /**\n   * The accessible name of the dot group — what names the row of dots as a set\n   * rather than leaving a screen reader with N unexplained buttons.\n   *\n   * Throws when the dots are not rendered: there is no group to name then, and a\n   * `null` would read like a group that lost its label.\n   */\n  async getPaginationLabel(): Promise<string | null> {\n    const dots = await this.locatorForOptional('.wr-carousel__dots')();\n    if (!dots) {\n      throw new Error(\n        'WrCarouselHarness.getPaginationLabel(): this carousel renders no dot group — the dots are dropped ' +\n          'when [showDots] is false or when there are fewer than two slides.'\n      );\n    }\n    return dots.getAttribute('aria-label');\n  }\n\n  /**\n   * What each slide announces itself as — `slide`, on every one of them, in DOM\n   * order.\n   *\n   * The one piece of ARIA the slides carry, and the reason it is worth asking: it\n   * is set on the slide component's own host, so a slide reaching the page through\n   * some other element would come back `null` here while the carousel kept working.\n   */\n  async getSlideRoleDescriptions(): Promise<(string | null)[]> {\n    const slides = await this.slides();\n    return Promise.all(slides.map(slide => slide.getAttribute('aria-roledescription')));\n  }\n\n  // What the carousel is showing\n\n  /** How many slides the carousel holds. */\n  async getSlideCount(): Promise<number> {\n    return (await this.slides()).length;\n  }\n\n  /** The text of every slide, in DOM order. */\n  async getSlideTexts(): Promise<string[]> {\n    const slides = await this.slides();\n    return Promise.all(slides.map(slide => slide.text()));\n  }\n\n  /**\n   * Which slide is showing, as a zero-based index.\n   *\n   * Taken from the dot carrying `aria-current=\"true\"` whenever the dots are\n   * rendered — that attribute is the only thing on the page that tells a screen\n   * reader where in the strip it has got to, so it is the answer that matters —\n   * and derived from the track's rendered offset when they are not, `[showDots]`\n   * being off and a single-slide carousel both dropping the strip entirely.\n   *\n   * That fallback takes the MAGNITUDE of the offset on purpose. The transform is\n   * physical while the slides sit on the inline axis, so a mirrored carousel paints\n   * `translateX(100%)` for the very slide an LTR one paints `translateX(-100%)`\n   * for; signed, this reported slide -1 for a perfectly healthy RTL carousel.\n   *\n   * Throws on a carousel with no slides at all — nothing is showing there, and `0`\n   * would read like the first slide.\n   */\n  async getActiveIndex(): Promise<number> {\n    const count = await this.getSlideCount();\n    if (count === 0) {\n      throw new Error(\n        'WrCarouselHarness.getActiveIndex(): this carousel has no <wr-carousel-slide> children, so no slide is ' +\n          'current — 0 would read like the first one.'\n      );\n    }\n\n    const dots = await this.dots();\n    if (dots.length) {\n      for (let index = 0; index < dots.length; index++) {\n        if ((await dots[index].getAttribute('aria-current')) === 'true') return index;\n      }\n      throw new Error(\n        'WrCarouselHarness.getActiveIndex(): the dots are rendered but none of them carries aria-current, so the ' +\n          'page tells a screen reader that no slide is current. The component clamps `active` into range, so look ' +\n          'for a lost aria-current binding rather than an out-of-range index — the `--active` class alone is paint.'\n      );\n    }\n\n    return Math.round(Math.abs(await this.getTrackOffsetPercent()) / 100);\n  }\n\n  /** The text of the slide that is showing. Throws on a carousel with no slides. */\n  async getActiveSlideText(): Promise<string> {\n    const index = await this.getActiveIndex();\n    return (await this.slides())[index].text();\n  }\n\n  /**\n   * The track's rendered offset, as a percentage of one viewport: `-100` for the\n   * second slide of an LTR carousel, `+100` for the second slide of a mirrored one.\n   *\n   * Read off the inline `style` attribute rather than through `getCssValue()`,\n   * because the percentage only survives where the component wrote it. jsdom hands\n   * a declared `transform` straight back through `getComputedStyle`, so\n   * `getCssValue()` answers correctly HERE and would stop the moment the same\n   * harness ran against a real browser, which resolves the property to a pixel\n   * matrix — a green unit test would be hiding it. Mid-drag the component writes\n   * `translateX(calc(-100% + 12px))` and this reports the settled `-100`: the pixel\n   * half is the finger's own displacement, which is physical in both directions and\n   * belongs to no slide.\n   *\n   * Worth asserting next to {@link getActiveIndex}: it is the same fact painted\n   * instead of announced, and a carousel that lights the right dot while parking\n   * the track in blank space is exactly the failure nobody sees in a spec.\n   */\n  async getTrackOffsetPercent(): Promise<number> {\n    const style = (await (await this.track()).getAttribute('style')) ?? '';\n    const match = TRACK_OFFSET.exec(style);\n    if (!match) {\n      throw new Error(\n        `WrCarouselHarness.getTrackOffsetPercent(): the track carries no translateX() offset (style: \"${style}\"). ` +\n          'That transform is how the carousel moves at all, so it should always be there.'\n      );\n    }\n    return Number(match[1]);\n  }\n\n  // The controls the carousel renders\n\n  /** Whether the prev / next arrows are on the page. Both are dropped together. */\n  async hasArrows(): Promise<boolean> {\n    return (await this.locatorForOptional('.wr-carousel__nav--next')()) !== null;\n  }\n\n  /** Whether the dot strip is on the page. */\n  async hasDots(): Promise<boolean> {\n    return (await this.locatorForOptional('.wr-carousel__dots')()) !== null;\n  }\n\n  /** How many dots are rendered — one per slide, or `0` while the strip is hidden. */\n  async getDotCount(): Promise<number> {\n    return (await this.dots()).length;\n  }\n\n  /**\n   * The accessible name of every dot, in order — `'Go to slide 1'`, … resolved\n   * through the `ngwr/i18n` catalog.\n   *\n   * A dot is a bare button with no text of its own, so this label is all a screen\n   * reader has to tell one from another. `[]` when the strip is hidden, matching\n   * {@link getDotCount}.\n   */\n  async getDotLabels(): Promise<(string | null)[]> {\n    const dots = await this.dots();\n    return Promise.all(dots.map(dot => dot.getAttribute('aria-label')));\n  }\n\n  // Moving the carousel\n\n  /**\n   * Click the next-slide arrow.\n   *\n   * \"Next\" is the next SLIDE, not the next thing on the right: the buttons keep\n   * their semantics under `dir=\"rtl\"` and only the travel under them turns around.\n   * At the last slide this wraps to the first one, unless `[loop]` is off — in\n   * which case it legitimately does nothing, so nothing is asserted about the move.\n   */\n  async next(): Promise<void> {\n    return (await this.nav('next', 'next')).click();\n  }\n\n  /** Click the previous-slide arrow. Wraps to the last slide unless `[loop]` is off. */\n  async previous(): Promise<void> {\n    return (await this.nav('prev', 'previous')).click();\n  }\n\n  /**\n   * Jump to a slide by clicking its dot — the only way the page offers to reach a\n   * slide directly.\n   *\n   * Throws when the dots are hidden (the component's own `goTo()` is still there\n   * for a spec holding the instance, but nothing on the page can be clicked) and\n   * throws on an index no slide has, rather than clicking nothing and leaving the\n   * carousel where it was.\n   */\n  async goTo(index: number): Promise<void> {\n    const dots = await this.dots();\n    if (!dots.length) {\n      throw new Error(\n        `WrCarouselHarness.goTo(${index}): this carousel renders no dots, and they are the only way to reach a ` +\n          'slide directly from the page — they are dropped when [showDots] is false or when there are fewer than ' +\n          'two slides. Use next() / previous(), or write the active index from the host.'\n      );\n    }\n    if (!Number.isInteger(index) || index < 0 || index >= dots.length) {\n      throw new Error(\n        `WrCarouselHarness.goTo(${index}): out of range — this carousel has ${dots.length} slides, so the index ` +\n          `must be a whole number between 0 and ${dots.length - 1}.`\n      );\n    }\n    return dots[index].click();\n  }\n\n  // Holding autoplay\n\n  /**\n   * Move the pointer onto the carousel, which is what HOLDS autoplay.\n   *\n   * Aimed at the host and not the viewport, deliberately: the arrows and the dots\n   * are the viewport's SIBLINGS, so a viewport-scoped hover would let a slide\n   * change under a cursor that is aiming at an arrow.\n   */\n  async hover(): Promise<void> {\n    return (await this.host()).hover();\n  }\n\n  /** Move the pointer away again, releasing the hold. */\n  async mouseAway(): Promise<void> {\n    return (await this.host()).mouseAway();\n  }\n\n  /**\n   * Put keyboard focus on the first control the carousel renders — the previous\n   * arrow, or the first dot when the arrows are hidden.\n   *\n   * This is the keyboard half of the autoplay hold: WCAG 2.2.2 wants a way to stop\n   * moving content, and hovering is not one for someone who never touches a mouse,\n   * so the component listens for `focusin` on its host as well. Focus lands on the\n   * carousel's OWN controls; anything focusable a slide happens to project is not\n   * this harness's business, though in a browser it would hold autoplay just the\n   * same.\n   *\n   * Note what this is NOT: the dot of the slide showing. The dots are ordinary\n   * buttons with no roving `tabindex`, so each of them is a tab stop of its own and\n   * the first one a Tab press meets is the prev arrow whatever slide is current —\n   * two different questions, answered here and by {@link getActiveIndex}.\n   *\n   * Throws when the carousel renders no controls at all, because then there is\n   * nothing for a Tab press to land on and no keyboard mechanism to assert.\n   */\n  async focus(): Promise<void> {\n    const [first] = await this.controls();\n    if (!first) {\n      throw new Error(\n        'WrCarouselHarness.focus(): this carousel renders no controls of its own — the arrows and the dots are ' +\n          'both gone (a single slide, or [showArrows] and [showDots] switched off), so a Tab press has nothing ' +\n          'inside it to land on.'\n      );\n    }\n    return first.focus();\n  }\n\n  /**\n   * Take focus off whichever of the carousel's controls holds it, releasing the\n   * hold {@link focus} started.\n   *\n   * Throws when none of them is focused: `focusout` is what the component listens\n   * for, and blurring an element that never had focus fires nothing — a quiet\n   * no-op here surfaces as an autoplay assertion failing three lines later.\n   */\n  async blur(): Promise<void> {\n    for (const control of await this.controls()) {\n      if (await control.isFocused()) return control.blur();\n    }\n    throw new Error(\n      'WrCarouselHarness.blur(): none of the controls this carousel renders holds focus, so there is no focus to ' +\n        'release. Call focus() first — the hold is released by blurring the element that took it.'\n    );\n  }\n\n  /** Whether one of the carousel's own controls holds focus — which is what holds autoplay. */\n  async isFocused(): Promise<boolean> {\n    for (const control of await this.controls()) {\n      if (await control.isFocused()) return true;\n    }\n    return false;\n  }\n\n  // Internals\n\n  /** The element that carries the carousel's role and name. */\n  private async viewport(): Promise<TestElement> {\n    return this.locatorFor('.wr-carousel__viewport')();\n  }\n\n  /** The moving strip, whose inline transform is where the carousel IS. */\n  private async track(): Promise<TestElement> {\n    return this.locatorFor('.wr-carousel__track')();\n  }\n\n  private async slides(): Promise<TestElement[]> {\n    return this.locatorForAll('wr-carousel-slide')();\n  }\n\n  private async dots(): Promise<TestElement[]> {\n    return this.locatorForAll('.wr-carousel__dot')();\n  }\n\n  /**\n   * Every control the carousel renders itself, in the order a Tab press meets\n   * them: the two arrows, then the dots.\n   */\n  private async controls(): Promise<TestElement[]> {\n    const navs = await this.locatorForAll('.wr-carousel__nav')();\n    return [...navs, ...(await this.dots())];\n  }\n\n  /** One arrow, or a failure naming both reasons it might not be there. */\n  private async nav(side: 'prev' | 'next', caller: string): Promise<TestElement> {\n    const button = await this.locatorForOptional(`.wr-carousel__nav--${side}`)();\n    if (!button) {\n      throw new Error(\n        `WrCarouselHarness.${caller}(): this carousel renders no ${side} arrow — the arrows are dropped when ` +\n          '[showArrows] is false or when there are fewer than two slides to page through.'\n      );\n    }\n    return button;\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngwr-carousel.mjs

@@ -1,7 +1,9 @@
+import { Directionality } from '@angular/cdk/bidi';
 import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
+import { isPlatformBrowser } from '@angular/common';
 import * as i0 from '@angular/core';
-import { ViewEncapsulation, Component, input, model, contentChildren, computed, signal, inject, DestroyRef, effect } from '@angular/core';
-import { useI18nText } from 'ngwr/i18n';
+import { ViewEncapsulation, Component, input, model, contentChildren, computed, signal, inject, DestroyRef, PLATFORM_ID, effect } from '@angular/core';
+import { useI18nText, useI18nFormatter } from 'ngwr/i18n';
 
 /**
  * @license
@@ -49,7 +51,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
  * @see https://ngwr.dev/reference/components/carousel
  */
 class WrCarousel {
-    /** Active slide index. Two-way bindable. @default 0 */
     /** Accessible name of the previous-slide button. Falls back to `carousel.prev`. */
     prevLabel = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "prevLabel" }] : /* istanbul ignore next */ []));
@@ -62,6 +63,14 @@ class WrCarousel {
     resolvedPrevLabel = useI18nText(this.prevLabel, 'carousel.prev', 'Previous slide');
     resolvedNextLabel = useI18nText(this.nextLabel, 'carousel.next', 'Next slide');
     resolvedPaginationLabel = useI18nText(this.paginationLabel, 'carousel.pagination', 'Carousel pagination');
+    /** Accessible name of the carousel itself. Falls back to `carousel.label`. */
+    ariaLabel = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    resolvedAriaLabel = useI18nText(this.ariaLabel, 'carousel.label', 'Carousel');
+    // The three labels above route through the catalog; this one was a hard-coded
+    // English template, so a localized app got two languages in one pagination strip.
+    slideLabel = useI18nFormatter('carousel.goToSlide', 'Go to slide {{index}}');
+    /** Active slide index. Two-way bindable. @default 0 */
     active = model(0, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
     /** Show prev / next arrow buttons. @default true */
@@ -83,9 +92,26 @@ class WrCarousel {
     ...(ngDevMode ? [{ debugName: "dragX" }] : /* istanbul ignore next */ []));
     dragging = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "dragging" }] : /* istanbul ignore next */ []));
+    dir = inject(Directionality, { optional: true });
+    /**
+     * Reading direction of the track. `Directionality` is root-provided, so this
+     * always resolves — `optional` only guards a consumer who has deliberately
+     * torn the provider out. It reads the document once at construction; a
+     * subtree that overrides the direction does it with the CDK's `Dir`
+     * directive, which writes `valueSignal`, so `trackStyle` re-renders instead
+     * of leaving the track parked on the old side.
+     */
+    isRtl = computed(() => this.dir?.valueSignal() === 'rtl', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isRtl" }] : /* istanbul ignore next */ []));
     /** CSS transform for the track — the per-slide offset plus any live drag. */
     trackStyle = computed(() => {
-        const base = -this.active() * 100;
+        // `translateX` is PHYSICAL while the slides are laid out on the inline axis:
+        // under `dir="rtl"` the flex track runs right-to-left, so slide 1 sits to the
+        // LEFT of slide 0 and reaching it means moving the track the other way. Left
+        // unsigned, every RTL carousel translated itself off into blank space.
+        const base = (this.isRtl() ? 1 : -1) * this.active() * 100;
+        // The drag stays physical on purpose: it is the finger's own displacement,
+        // and the track follows the finger in both directions.
         const drag = this.dragX();
         return drag === 0 ? `translateX(${base}%)` : `translateX(calc(${base}% + ${drag}px))`;
     }, /* @ts-ignore */
@@ -94,25 +120,39 @@ class WrCarousel {
     paused = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "paused" }] : /* istanbul ignore next */ []));
     destroyRef = inject(DestroyRef);
+    isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
     constructor() {
         effect(() => {
             if (this.timer)
                 clearInterval(this.timer);
             this.timer = null;
-            if (!this.autoplay() || this.paused() || this.count() < 2)
+            // `isBrowser` first: without it the prerender ran the timer too, doing work
+            // nobody will ever see on a slide index that then gets serialized.
+            if (!this.isBrowser || !this.autoplay() || this.paused() || this.count() < 2)
                 return;
             const interval = this.intervalMs();
             this.timer = setInterval(() => this.next(), interval);
         });
+        // `active` is a plain `model`, so `[(active)]` and a shrinking slide list both
+        // write into it unchecked — a filtered list left it pointing past the end,
+        // translating the track into blank space with no dot lit.
+        effect(() => {
+            const max = this.count() - 1;
+            if (max < 0)
+                return;
+            const clamped = Math.min(Math.max(0, this.active()), max);
+            if (clamped !== this.active())
+                this.active.set(clamped);
+        });
         this.destroyRef.onDestroy(() => {
             if (this.timer)
                 clearInterval(this.timer);
         });
     }
-    onMouseEnter() {
+    onPauseIn() {
         this.paused.set(true);
     }
-    onMouseLeave() {
+    onPauseOut() {
         this.paused.set(false);
     }
     // Imperative
@@ -135,7 +175,9 @@ class WrCarousel {
         this.goTo(this.active() - 1);
     }
     // Swipe navigation — the track follows the finger; releasing past ~20% of the
-    // viewport advances a slide (left = next, right = prev), otherwise snaps back.
+    // viewport advances a slide, otherwise snaps back. Which way that is follows
+    // the reading direction: dragging toward the inline start (left in LTR, right
+    // in RTL) pulls the next slide into view.
     swipeStartX = 0;
     onSwipeStart(event) {
         const touch = event.touches[0];
@@ -161,18 +203,30 @@ class WrCarousel {
         this.dragX.set(0);
         this.paused.set(false);
         const threshold = (viewport.offsetWidth || 0) * 0.2;
-        if (dx <= -threshold)
+        // `dx` is a physical delta. The next slide sits to the physical RIGHT in LTR
+        // and to the LEFT in RTL, so the drag that pulls it into view — and with it
+        // the sign that advances — turns around with the direction. The buttons keep
+        // their semantics either way; only the gesture is physical.
+        const advance = this.isRtl() ? dx >= threshold : dx <= -threshold;
+        const retreat = this.isRtl() ? dx <= -threshold : dx >= threshold;
+        if (advance)
             this.next();
-        else if (dx >= threshold)
+        else if (retreat)
             this.prev();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrCarousel, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: WrCarousel, isStandalone: true, selector: "wr-carousel", inputs: { prevLabel: { classPropertyName: "prevLabel", publicName: "prevLabel", isSignal: true, isRequired: false, transformFunction: null }, nextLabel: { classPropertyName: "nextLabel", publicName: "nextLabel", isSignal: true, isRequired: false, transformFunction: null }, paginationLabel: { classPropertyName: "paginationLabel", publicName: "paginationLabel", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, showArrows: { classPropertyName: "showArrows", publicName: "showArrows", isSignal: true, isRequired: false, transformFunction: null }, showDots: { classPropertyName: "showDots", publicName: "showDots", isSignal: true, isRequired: false, transformFunction: null }, autoplay: { classPropertyName: "autoplay", publicName: "autoplay", isSignal: true, isRequired: false, transformFunction: null }, intervalMs: { classPropertyName: "intervalMs", publicName: "intervalMs", isSignal: true, isRequired: false, transformFunction: null }, loop: { classPropertyName: "loop", publicName: "loop", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { active: "activeChange" }, host: { classAttribute: "wr-carousel" }, queries: [{ propertyName: "slides", predicate: WrCarouselSlide, isSignal: true }], ngImport: i0, template: "<div\n  #viewport\n  class=\"wr-carousel__viewport\"\n  aria-roledescription=\"carousel\"\n  (mouseenter)=\"onMouseEnter()\"\n  (mouseleave)=\"onMouseLeave()\"\n  (touchstart)=\"onSwipeStart($event)\"\n  (touchmove)=\"onSwipeMove($event)\"\n  (touchend)=\"onSwipeEnd($event, viewport)\"\n  (touchcancel)=\"onSwipeEnd($event, viewport)\"\n>\n  <div class=\"wr-carousel__track\" [style.transform]=\"trackStyle()\" [style.transition]=\"dragging() ? 'none' : null\">\n    <ng-content />\n  </div>\n</div>\n\n@if (showArrows() && count() > 1) {\n  <button\n    type=\"button\"\n    class=\"wr-carousel__nav wr-carousel__nav--prev\"\n    [attr.aria-label]=\"resolvedPrevLabel()\"\n    (click)=\"prev()\"\n  >\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" aria-hidden=\"true\">\n      <path d=\"M9 2 L4 7 L9 12\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n    </svg>\n  </button>\n  <button\n    type=\"button\"\n    class=\"wr-carousel__nav wr-carousel__nav--next\"\n    [attr.aria-label]=\"resolvedNextLabel()\"\n    (click)=\"next()\"\n  >\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" aria-hidden=\"true\">\n      <path d=\"M5 2 L10 7 L5 12\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n    </svg>\n  </button>\n}\n\n@if (showDots() && count() > 1) {\n  <div class=\"wr-carousel__dots\" role=\"group\" [attr.aria-label]=\"resolvedPaginationLabel()\">\n    @for (slide of slides(); track $index) {\n      <button\n        type=\"button\"\n        class=\"wr-carousel__dot\"\n        [class.wr-carousel__dot--active]=\"$index === active()\"\n        [attr.aria-current]=\"$index === active() ? 'true' : null\"\n        [attr.aria-label]=\"`Go to slide ${$index + 1}`\"\n        (click)=\"goTo($index)\"\n      ></button>\n    }\n  </div>\n}\n", encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: WrCarousel, isStandalone: true, selector: "wr-carousel", inputs: { prevLabel: { classPropertyName: "prevLabel", publicName: "prevLabel", isSignal: true, isRequired: false, transformFunction: null }, nextLabel: { classPropertyName: "nextLabel", publicName: "nextLabel", isSignal: true, isRequired: false, transformFunction: null }, paginationLabel: { classPropertyName: "paginationLabel", publicName: "paginationLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, showArrows: { classPropertyName: "showArrows", publicName: "showArrows", isSignal: true, isRequired: false, transformFunction: null }, showDots: { classPropertyName: "showDots", publicName: "showDots", isSignal: true, isRequired: false, transformFunction: null }, autoplay: { classPropertyName: "autoplay", publicName: "autoplay", isSignal: true, isRequired: false, transformFunction: null }, intervalMs: { classPropertyName: "intervalMs", publicName: "intervalMs", isSignal: true, isRequired: false, transformFunction: null }, loop: { classPropertyName: "loop", publicName: "loop", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { active: "activeChange" }, host: { listeners: { "mouseenter": "onPauseIn()", "mouseleave": "onPauseOut()", "focusin": "onPauseIn()", "focusout": "onPauseOut()" }, classAttribute: "wr-carousel" }, queries: [{ propertyName: "slides", predicate: WrCarouselSlide, isSignal: true }], ngImport: i0, template: "<div\n  #viewport\n  class=\"wr-carousel__viewport\"\n  role=\"group\"\n  aria-roledescription=\"carousel\"\n  [attr.aria-label]=\"resolvedAriaLabel()\"\n  (touchstart)=\"onSwipeStart($event)\"\n  (touchmove)=\"onSwipeMove($event)\"\n  (touchend)=\"onSwipeEnd($event, viewport)\"\n  (touchcancel)=\"onSwipeEnd($event, viewport)\"\n>\n  <div class=\"wr-carousel__track\" [style.transform]=\"trackStyle()\" [style.transition]=\"dragging() ? 'none' : null\">\n    <ng-content />\n  </div>\n</div>\n\n@if (showArrows() && count() > 1) {\n  <button\n    type=\"button\"\n    class=\"wr-carousel__nav wr-carousel__nav--prev\"\n    [attr.aria-label]=\"resolvedPrevLabel()\"\n    (click)=\"prev()\"\n  >\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" aria-hidden=\"true\">\n      <path d=\"M9 2 L4 7 L9 12\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n    </svg>\n  </button>\n  <button\n    type=\"button\"\n    class=\"wr-carousel__nav wr-carousel__nav--next\"\n    [attr.aria-label]=\"resolvedNextLabel()\"\n    (click)=\"next()\"\n  >\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" aria-hidden=\"true\">\n      <path d=\"M5 2 L10 7 L5 12\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n    </svg>\n  </button>\n}\n\n@if (showDots() && count() > 1) {\n  <div class=\"wr-carousel__dots\" role=\"group\" [attr.aria-label]=\"resolvedPaginationLabel()\">\n    @for (slide of slides(); track $index) {\n      <button\n        type=\"button\"\n        class=\"wr-carousel__dot\"\n        [class.wr-carousel__dot--active]=\"$index === active()\"\n        [attr.aria-current]=\"$index === active() ? 'true' : null\"\n        [attr.aria-label]=\"slideLabel({ index: $index + 1 })\"\n        (click)=\"goTo($index)\"\n      ></button>\n    }\n  </div>\n}\n", encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrCarousel, decorators: [{
             type: Component,
-            args: [{ selector: 'wr-carousel', encapsulation: ViewEncapsulation.None, host: { class: 'wr-carousel' }, template: "<div\n  #viewport\n  class=\"wr-carousel__viewport\"\n  aria-roledescription=\"carousel\"\n  (mouseenter)=\"onMouseEnter()\"\n  (mouseleave)=\"onMouseLeave()\"\n  (touchstart)=\"onSwipeStart($event)\"\n  (touchmove)=\"onSwipeMove($event)\"\n  (touchend)=\"onSwipeEnd($event, viewport)\"\n  (touchcancel)=\"onSwipeEnd($event, viewport)\"\n>\n  <div class=\"wr-carousel__track\" [style.transform]=\"trackStyle()\" [style.transition]=\"dragging() ? 'none' : null\">\n    <ng-content />\n  </div>\n</div>\n\n@if (showArrows() && count() > 1) {\n  <button\n    type=\"button\"\n    class=\"wr-carousel__nav wr-carousel__nav--prev\"\n    [attr.aria-label]=\"resolvedPrevLabel()\"\n    (click)=\"prev()\"\n  >\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" aria-hidden=\"true\">\n      <path d=\"M9 2 L4 7 L9 12\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n    </svg>\n  </button>\n  <button\n    type=\"button\"\n    class=\"wr-carousel__nav wr-carousel__nav--next\"\n    [attr.aria-label]=\"resolvedNextLabel()\"\n    (click)=\"next()\"\n  >\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" aria-hidden=\"true\">\n      <path d=\"M5 2 L10 7 L5 12\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n    </svg>\n  </button>\n}\n\n@if (showDots() && count() > 1) {\n  <div class=\"wr-carousel__dots\" role=\"group\" [attr.aria-label]=\"resolvedPaginationLabel()\">\n    @for (slide of slides(); track $index) {\n      <button\n        type=\"button\"\n        class=\"wr-carousel__dot\"\n        [class.wr-carousel__dot--active]=\"$index === active()\"\n        [attr.aria-current]=\"$index === active() ? 'true' : null\"\n        [attr.aria-label]=\"`Go to slide ${$index + 1}`\"\n        (click)=\"goTo($index)\"\n      ></button>\n    }\n  </div>\n}\n" }]
-        }], ctorParameters: () => [], propDecorators: { prevLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "prevLabel", required: false }] }], nextLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextLabel", required: false }] }], paginationLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginationLabel", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }, { type: i0.Output, args: ["activeChange"] }], showArrows: [{ type: i0.Input, args: [{ isSignal: true, alias: "showArrows", required: false }] }], showDots: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDots", required: false }] }], autoplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoplay", required: false }] }], intervalMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "intervalMs", required: false }] }], loop: [{ type: i0.Input, args: [{ isSignal: true, alias: "loop", required: false }] }], slides: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => WrCarouselSlide), { isSignal: true }] }] } });
+            args: [{ selector: 'wr-carousel', encapsulation: ViewEncapsulation.None, host: {
+                        class: 'wr-carousel',
+                        '(mouseenter)': 'onPauseIn()',
+                        '(mouseleave)': 'onPauseOut()',
+                        '(focusin)': 'onPauseIn()',
+                        '(focusout)': 'onPauseOut()',
+                    }, template: "<div\n  #viewport\n  class=\"wr-carousel__viewport\"\n  role=\"group\"\n  aria-roledescription=\"carousel\"\n  [attr.aria-label]=\"resolvedAriaLabel()\"\n  (touchstart)=\"onSwipeStart($event)\"\n  (touchmove)=\"onSwipeMove($event)\"\n  (touchend)=\"onSwipeEnd($event, viewport)\"\n  (touchcancel)=\"onSwipeEnd($event, viewport)\"\n>\n  <div class=\"wr-carousel__track\" [style.transform]=\"trackStyle()\" [style.transition]=\"dragging() ? 'none' : null\">\n    <ng-content />\n  </div>\n</div>\n\n@if (showArrows() && count() > 1) {\n  <button\n    type=\"button\"\n    class=\"wr-carousel__nav wr-carousel__nav--prev\"\n    [attr.aria-label]=\"resolvedPrevLabel()\"\n    (click)=\"prev()\"\n  >\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" aria-hidden=\"true\">\n      <path d=\"M9 2 L4 7 L9 12\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n    </svg>\n  </button>\n  <button\n    type=\"button\"\n    class=\"wr-carousel__nav wr-carousel__nav--next\"\n    [attr.aria-label]=\"resolvedNextLabel()\"\n    (click)=\"next()\"\n  >\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" aria-hidden=\"true\">\n      <path d=\"M5 2 L10 7 L5 12\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n    </svg>\n  </button>\n}\n\n@if (showDots() && count() > 1) {\n  <div class=\"wr-carousel__dots\" role=\"group\" [attr.aria-label]=\"resolvedPaginationLabel()\">\n    @for (slide of slides(); track $index) {\n      <button\n        type=\"button\"\n        class=\"wr-carousel__dot\"\n        [class.wr-carousel__dot--active]=\"$index === active()\"\n        [attr.aria-current]=\"$index === active() ? 'true' : null\"\n        [attr.aria-label]=\"slideLabel({ index: $index + 1 })\"\n        (click)=\"goTo($index)\"\n      ></button>\n    }\n  </div>\n}\n" }]
+        }], ctorParameters: () => [], propDecorators: { prevLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "prevLabel", required: false }] }], nextLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextLabel", required: false }] }], paginationLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginationLabel", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }, { type: i0.Output, args: ["activeChange"] }], showArrows: [{ type: i0.Input, args: [{ isSignal: true, alias: "showArrows", required: false }] }], showDots: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDots", required: false }] }], autoplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoplay", required: false }] }], intervalMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "intervalMs", required: false }] }], loop: [{ type: i0.Input, args: [{ isSignal: true, alias: "loop", required: false }] }], slides: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => WrCarouselSlide), { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.