@cdevhub/ngx-tw 0.4.0 → 0.6.0

package/fesm2022/cdevhub-ngx-tw-card.mjs

@@ -2,6 +2,10 @@ import * as i0 from '@angular/core';
 import { input, computed, ChangeDetectionStrategy, Component, inject, Directive } from '@angular/core';
 import { tv } from 'tailwind-variants';
 
+/** Maps every legacy spelling onto its canonical replacement. */
+const VARIANT_ALIASES = {
+    outlined: 'outline',
+};
 const cardVariants = tv({
     slots: {
         root: 'rounded-lg text-fg overflow-hidden',
@@ -15,7 +19,7 @@ const cardVariants = tv({
             elevated: {
                 root: 'bg-surface-raised shadow hover:shadow-md transition-shadow duration-normal motion-reduce:transition-none',
             },
-            outlined: {
+            outline: {
                 root: 'bg-surface border border-border',
             },
             ghost: {
@@ -41,13 +45,13 @@ const cardVariants = tv({
         },
     },
     compoundVariants: [
-        { variant: 'outlined', color: 'primary', class: { root: 'border-primary-300' } },
-        { variant: 'outlined', color: 'secondary', class: { root: 'border-secondary-300' } },
-        { variant: 'outlined', color: 'accent', class: { root: 'border-accent-300' } },
-        { variant: 'outlined', color: 'info', class: { root: 'border-info-300' } },
-        { variant: 'outlined', color: 'success', class: { root: 'border-success-300' } },
-        { variant: 'outlined', color: 'warning', class: { root: 'border-warning-300' } },
-        { variant: 'outlined', color: 'error', class: { root: 'border-error-300' } },
+        { variant: 'outline', color: 'primary', class: { root: 'border-primary-300' } },
+        { variant: 'outline', color: 'secondary', class: { root: 'border-secondary-300' } },
+        { variant: 'outline', color: 'accent', class: { root: 'border-accent-300' } },
+        { variant: 'outline', color: 'info', class: { root: 'border-info-300' } },
+        { variant: 'outline', color: 'success', class: { root: 'border-success-300' } },
+        { variant: 'outline', color: 'warning', class: { root: 'border-warning-300' } },
+        { variant: 'outline', color: 'error', class: { root: 'border-error-300' } },
     ],
     defaultVariants: {
         variant: 'elevated',
@@ -58,17 +62,23 @@ const cardVariants = tv({
     twMerge: true,
 });
 class CardComponent {
-    /** Controls the visual elevation style. Defaults to `'elevated'`. */
+    /** Controls the visual elevation style. Defaults to `'elevated'`. `'outlined'` is a deprecated alias for `'outline'` and renders identically. */
     variant = input('elevated', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
-    /** Sets the semantic color for bordered regions. Only applies to `outlined` variant borders. Defaults to `'neutral'`. */
+    /** Sets the semantic color for bordered regions. Only applies to `outline` variant borders. Defaults to `'neutral'`. */
     color = input('neutral', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
     /** Controls padding of header, body, and footer sections. Defaults to `'md'`. */
     size = input('md', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** @internal Canonical variant with legacy spellings folded in. */
+    resolvedVariant = computed(() => {
+        const v = this.variant();
+        return VARIANT_ALIASES[v] ?? v;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedVariant" }] : /* istanbul ignore next */ []));
     variantResult = computed(() => cardVariants({
-        variant: this.variant(),
+        variant: this.resolvedVariant(),
         color: this.color(),
         size: this.size(),
     }), /* @ts-ignore */

package/fesm2022/cdevhub-ngx-tw-card.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"cdevhub-ngx-tw-card.mjs","sources":["../../../projects/ngx-tw/card/card.ts","../../../projects/ngx-tw/card/cdevhub-ngx-tw-card.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  Directive,\n  inject,\n  input,\n} from '@angular/core';\nimport { tv } from 'tailwind-variants';\nimport type { TwColor, TwSize } from '@cdevhub/ngx-tw/core';\n\n/** Visual style of the card container. */\nexport type CardVariant = 'elevated' | 'outlined' | 'ghost';\n\nconst cardVariants = tv({\n  slots: {\n    root: 'rounded-lg text-fg overflow-hidden',\n    header: 'text-sm font-semibold text-fg border-b border-border',\n    body: 'text-sm text-fg',\n    footer: 'text-xs text-fg-muted border-t border-border',\n    media: 'w-full overflow-hidden',\n  },\n  variants: {\n    variant: {\n      elevated: {\n        root: 'bg-surface-raised shadow hover:shadow-md transition-shadow duration-normal motion-reduce:transition-none',\n      },\n      outlined: {\n        root: 'bg-surface border border-border',\n      },\n      ghost: {\n        root: 'bg-transparent',\n      },\n    },\n    size: {\n      xs: { header: 'p-2', body: 'p-2', footer: 'p-2' },\n      sm: { header: 'p-3', body: 'p-3', footer: 'p-3' },\n      md: { header: 'p-4', body: 'p-4', footer: 'p-4' },\n      lg: { header: 'p-6', body: 'p-6', footer: 'p-6' },\n      xl: { header: 'p-8', body: 'p-8', footer: 'p-8' },\n    },\n    color: {\n      primary: {},\n      secondary: {},\n      accent: {},\n      neutral: {},\n      info: {},\n      success: {},\n      warning: {},\n      error: {},\n    },\n  },\n  compoundVariants: [\n    { variant: 'outlined', color: 'primary', class: { root: 'border-primary-300' } },\n    { variant: 'outlined', color: 'secondary', class: { root: 'border-secondary-300' } },\n    { variant: 'outlined', color: 'accent', class: { root: 'border-accent-300' } },\n    { variant: 'outlined', color: 'info', class: { root: 'border-info-300' } },\n    { variant: 'outlined', color: 'success', class: { root: 'border-success-300' } },\n    { variant: 'outlined', color: 'warning', class: { root: 'border-warning-300' } },\n    { variant: 'outlined', color: 'error', class: { root: 'border-error-300' } },\n  ],\n  defaultVariants: {\n    variant: 'elevated',\n    color: 'neutral',\n    size: 'md',\n  },\n}, {\n  twMerge: true,\n});\n\n@Component({\n  selector: 'tw-card',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class]': 'rootClasses()',\n  },\n  template: `<ng-content />`,\n})\nexport class CardComponent {\n  /** Controls the visual elevation style. Defaults to `'elevated'`. */\n  readonly variant = input<CardVariant>('elevated');\n\n  /** Sets the semantic color for bordered regions. Only applies to `outlined` variant borders. Defaults to `'neutral'`. */\n  readonly color = input<TwColor>('neutral');\n\n  /** Controls padding of header, body, and footer sections. Defaults to `'md'`. */\n  readonly size = input<TwSize>('md');\n\n  private readonly variantResult = computed(() =>\n    cardVariants({\n      variant: this.variant(),\n      color: this.color(),\n      size: this.size(),\n    }),\n  );\n\n  readonly rootClasses = computed(() => this.variantResult().root());\n  readonly headerClasses = computed(() => this.variantResult().header());\n  readonly bodyClasses = computed(() => this.variantResult().body());\n  readonly footerClasses = computed(() => this.variantResult().footer());\n  readonly mediaClasses = computed(() => this.variantResult().media());\n}\n\n@Directive({\n  selector: '[twCardHeader]',\n  host: {\n    '[class]': 'classes()',\n  },\n})\nexport class CardHeaderDirective {\n  private readonly card = inject(CardComponent);\n  readonly classes = this.card.headerClasses;\n}\n\n@Directive({\n  selector: '[twCardBody]',\n  host: {\n    '[class]': 'classes()',\n  },\n})\nexport class CardBodyDirective {\n  private readonly card = inject(CardComponent);\n  readonly classes = this.card.bodyClasses;\n}\n\n@Directive({\n  selector: '[twCardFooter]',\n  host: {\n    '[class]': 'classes()',\n  },\n})\nexport class CardFooterDirective {\n  private readonly card = inject(CardComponent);\n  readonly classes = this.card.footerClasses;\n}\n\n@Directive({\n  selector: '[twCardMedia]',\n  host: {\n    '[class]': 'classes()',\n  },\n})\nexport class CardMediaDirective {\n  private readonly card = inject(CardComponent);\n  readonly classes = this.card.mediaClasses;\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"cdevhub-ngx-tw-card.mjs","sources":["../../../projects/ngx-tw/card/card.ts","../../../projects/ngx-tw/card/cdevhub-ngx-tw-card.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  Directive,\n  inject,\n  input,\n} from '@angular/core';\nimport { tv } from 'tailwind-variants';\nimport type { TwColor, TwSize } from '@cdevhub/ngx-tw/core';\n\n/** Visual style of the card container. */\nexport type CardVariant = 'elevated' | 'outline' | 'ghost' | CardVariantLegacy;\n\n/**\n * Legacy `variant` spellings, kept so existing templates keep compiling.\n * @deprecated `'outlined'` is an alias for `'outline'` and renders identically.\n * It will be removed in the next major — prefer `'outline'`.\n */\nexport type CardVariantLegacy = 'outlined';\n\n/** Canonical `variant` spellings — the set `tv()` actually keys on. */\ntype CardVariantCanonical = Exclude<CardVariant, CardVariantLegacy>;\n\n/** Maps every legacy spelling onto its canonical replacement. */\nconst VARIANT_ALIASES: Readonly<Record<CardVariantLegacy, CardVariantCanonical>> = {\n  outlined: 'outline',\n};\n\nconst cardVariants = tv({\n  slots: {\n    root: 'rounded-lg text-fg overflow-hidden',\n    header: 'text-sm font-semibold text-fg border-b border-border',\n    body: 'text-sm text-fg',\n    footer: 'text-xs text-fg-muted border-t border-border',\n    media: 'w-full overflow-hidden',\n  },\n  variants: {\n    variant: {\n      elevated: {\n        root: 'bg-surface-raised shadow hover:shadow-md transition-shadow duration-normal motion-reduce:transition-none',\n      },\n      outline: {\n        root: 'bg-surface border border-border',\n      },\n      ghost: {\n        root: 'bg-transparent',\n      },\n    },\n    size: {\n      xs: { header: 'p-2', body: 'p-2', footer: 'p-2' },\n      sm: { header: 'p-3', body: 'p-3', footer: 'p-3' },\n      md: { header: 'p-4', body: 'p-4', footer: 'p-4' },\n      lg: { header: 'p-6', body: 'p-6', footer: 'p-6' },\n      xl: { header: 'p-8', body: 'p-8', footer: 'p-8' },\n    },\n    color: {\n      primary: {},\n      secondary: {},\n      accent: {},\n      neutral: {},\n      info: {},\n      success: {},\n      warning: {},\n      error: {},\n    },\n  },\n  compoundVariants: [\n    { variant: 'outline', color: 'primary', class: { root: 'border-primary-300' } },\n    { variant: 'outline', color: 'secondary', class: { root: 'border-secondary-300' } },\n    { variant: 'outline', color: 'accent', class: { root: 'border-accent-300' } },\n    { variant: 'outline', color: 'info', class: { root: 'border-info-300' } },\n    { variant: 'outline', color: 'success', class: { root: 'border-success-300' } },\n    { variant: 'outline', color: 'warning', class: { root: 'border-warning-300' } },\n    { variant: 'outline', color: 'error', class: { root: 'border-error-300' } },\n  ],\n  defaultVariants: {\n    variant: 'elevated',\n    color: 'neutral',\n    size: 'md',\n  },\n}, {\n  twMerge: true,\n});\n\n@Component({\n  selector: 'tw-card',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class]': 'rootClasses()',\n  },\n  template: `<ng-content />`,\n})\nexport class CardComponent {\n  /** Controls the visual elevation style. Defaults to `'elevated'`. `'outlined'` is a deprecated alias for `'outline'` and renders identically. */\n  readonly variant = input<CardVariant>('elevated');\n\n  /** Sets the semantic color for bordered regions. Only applies to `outline` variant borders. Defaults to `'neutral'`. */\n  readonly color = input<TwColor>('neutral');\n\n  /** Controls padding of header, body, and footer sections. Defaults to `'md'`. */\n  readonly size = input<TwSize>('md');\n\n  /** @internal Canonical variant with legacy spellings folded in. */\n  private readonly resolvedVariant = computed<CardVariantCanonical>(() => {\n    const v = this.variant();\n    return (VARIANT_ALIASES as Record<string, CardVariantCanonical | undefined>)[v] ?? (v as CardVariantCanonical);\n  });\n\n  private readonly variantResult = computed(() =>\n    cardVariants({\n      variant: this.resolvedVariant(),\n      color: this.color(),\n      size: this.size(),\n    }),\n  );\n\n  readonly rootClasses = computed(() => this.variantResult().root());\n  readonly headerClasses = computed(() => this.variantResult().header());\n  readonly bodyClasses = computed(() => this.variantResult().body());\n  readonly footerClasses = computed(() => this.variantResult().footer());\n  readonly mediaClasses = computed(() => this.variantResult().media());\n}\n\n@Directive({\n  selector: '[twCardHeader]',\n  host: {\n    '[class]': 'classes()',\n  },\n})\nexport class CardHeaderDirective {\n  private readonly card = inject(CardComponent);\n  readonly classes = this.card.headerClasses;\n}\n\n@Directive({\n  selector: '[twCardBody]',\n  host: {\n    '[class]': 'classes()',\n  },\n})\nexport class CardBodyDirective {\n  private readonly card = inject(CardComponent);\n  readonly classes = this.card.bodyClasses;\n}\n\n@Directive({\n  selector: '[twCardFooter]',\n  host: {\n    '[class]': 'classes()',\n  },\n})\nexport class CardFooterDirective {\n  private readonly card = inject(CardComponent);\n  readonly classes = this.card.footerClasses;\n}\n\n@Directive({\n  selector: '[twCardMedia]',\n  host: {\n    '[class]': 'classes()',\n  },\n})\nexport class CardMediaDirective {\n  private readonly card = inject(CardComponent);\n  readonly classes = this.card.mediaClasses;\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-carousel.mjs

@@ -2,14 +2,20 @@ import * as i0 from '@angular/core';
 import { input, inject, ElementRef, signal, computed, ChangeDetectionStrategy, Component, model, output, DestroyRef, viewChild, contentChildren, afterNextRender, isDevMode, effect, untracked, Directive } from '@angular/core';
 import { tv } from 'tailwind-variants';
 
-// `CarouselComponent` is the canonical "structural-layout primitive" exception
-// to CLAUDE.md's 5–6 input cap (precedent: `SplitComponent`). The 17 inputs
-// here are each an independent geometry/behavior axis (orientation, slides
-// math, gap, loop, autoplay knobs, drag, keyboard, snap, active index, ARIA
-// label sources, i18n) — removing any would force consumers to coordinate two
-// carousels or replicate logic externally. Documented in
-// docs/requirements/carousel.requirements.md § 2.2 and § 12.
-/** Default English labels used when consumers do not override via the `labels` input. */
+/**
+ * Carousel label resolution — the English defaults and the `{placeholder}`
+ * interpolation both `CarouselSlideComponent` (per-slide `aria-label`) and
+ * `CarouselIndicatorsComponent` (per-page `aria-label`) read.
+ *
+ * `formatLabel` is exported so those two files can share one implementation;
+ * it is deliberately **not** re-exported from `index.ts` and carries no
+ * compatibility promise.
+ */
+/**
+ * Default English labels used when consumers do not override via the `labels`
+ * input. Typed `Required<TwCarouselLabels>` so readers keep a non-optional
+ * `string` for every key even though the interface itself is all-optional.
+ */
 const DEFAULT_CAROUSEL_LABELS = {
     previous: 'Previous slide',
     next: 'Next slide',
@@ -19,12 +25,34 @@ const DEFAULT_CAROUSEL_LABELS = {
     slideOfWithLabel: '{index} of {total}: {label}',
     slideOf: '{index} of {total}',
 };
-// ── Helpers ────────────────────────────────────────────────────────
-/** Replaces `{key}` placeholders in `template` with values from `vars`. Ported from paginator. */
+/** @internal Replaces `{key}` placeholders in `template` with values from `vars`. Ported from paginator. */
 function formatLabel(template, vars) {
+    // Defence in depth. `resolvedLabels()` already filters explicitly-undefined
+    // consumer keys, so a non-string cannot reach here through the public
+    // `labels` input today. The guard exists so a future regression in that
+    // merge degrades to a missing label instead of throwing inside a `computed`
+    // and taking the render down.
+    if (typeof template !== 'string')
+        return '';
     return template.replace(/\{(\w+)\}/g, (match, key) => Object.prototype.hasOwnProperty.call(vars, key) ? String(vars[key]) : match);
 }
-/** Pixel value of the inter-slide gap, used to compute the slide-basis CSS variable. */
+
+/**
+ * Carousel styling source of truth — the `tv()` slot config plus the pixel
+ * mirror of its gap scale.
+ *
+ * Shared by `carousel.ts` and `carousel-indicators.ts`, which is the only
+ * reason it is a separate file; it is **not** exported from `index.ts` and is
+ * not consumer API (CLAUDE.md: "Do not export variant configs").
+ *
+ * `GAP_PX` lives here rather than beside `slideBasis()` because it is the
+ * numeric mirror of the `gap-x-*` / `gap-y-*` compound variants below —
+ * editing the `md` row from `gap-x-4` to `gap-x-5` without editing `GAP_PX`
+ * from 16 to 20 silently miscomputes every slide's `flex-basis`. Co-locating
+ * them makes this file the single place a reviewer edits carousel gap
+ * geometry.
+ */
+/** @internal Pixel value of the inter-slide gap, used to compute the slide-basis CSS variable. */
 const GAP_PX = {
     xs: 8,
     sm: 12,
@@ -32,64 +60,6 @@ const GAP_PX = {
     lg: 24,
     xl: 32,
 };
-// ── Static color × state class lookups ──
-// Tailwind v4 only resolves statically-written class names. Per the stepper
-// precedent, every color × active/inactive indicator combination is enumerated.
-// Active indicators are also distinguishable by more than color (WCAG 1.4.1):
-// `dots` scale 1.5×; `lines` widen to w-12; `numbers` gain a filled background.
-const INDICATOR_ACTIVE_DOTS = {
-    primary: 'bg-primary-solid scale-150',
-    secondary: 'bg-secondary-solid scale-150',
-    accent: 'bg-accent-solid scale-150',
-    neutral: 'bg-neutral-solid scale-150',
-    info: 'bg-info-solid scale-150',
-    success: 'bg-success-solid scale-150',
-    warning: 'bg-warning-solid scale-150',
-    error: 'bg-error-solid scale-150',
-};
-const INDICATOR_ACTIVE_LINES = {
-    primary: 'bg-primary-solid w-12',
-    secondary: 'bg-secondary-solid w-12',
-    accent: 'bg-accent-solid w-12',
-    neutral: 'bg-neutral-solid w-12',
-    info: 'bg-info-solid w-12',
-    success: 'bg-success-solid w-12',
-    warning: 'bg-warning-solid w-12',
-    error: 'bg-error-solid w-12',
-};
-const INDICATOR_ACTIVE_NUMBERS = {
-    primary: 'bg-primary-solid text-primary-solid-fg',
-    secondary: 'bg-secondary-solid text-secondary-solid-fg',
-    accent: 'bg-accent-solid text-accent-solid-fg',
-    neutral: 'bg-neutral-solid text-neutral-solid-fg',
-    info: 'bg-info-solid text-info-solid-fg',
-    success: 'bg-success-solid text-success-solid-fg',
-    warning: 'bg-warning-solid text-warning-solid-fg',
-    error: 'bg-error-solid text-error-solid-fg',
-};
-const INDICATOR_INACTIVE_DOTS = 'bg-fg-muted opacity-50 hover:opacity-100';
-const INDICATOR_INACTIVE_LINES = 'bg-fg-muted opacity-50 hover:opacity-100';
-const INDICATOR_INACTIVE_NUMBERS = 'bg-surface-muted text-fg hover:bg-surface-sunken';
-function resolveIndicatorActiveClasses(variant, color) {
-    switch (variant) {
-        case 'dots':
-            return INDICATOR_ACTIVE_DOTS[color];
-        case 'lines':
-            return INDICATOR_ACTIVE_LINES[color];
-        case 'numbers':
-            return INDICATOR_ACTIVE_NUMBERS[color];
-    }
-}
-function resolveIndicatorInactiveClasses(variant) {
-    switch (variant) {
-        case 'dots':
-            return INDICATOR_INACTIVE_DOTS;
-        case 'lines':
-            return INDICATOR_INACTIVE_LINES;
-        case 'numbers':
-            return INDICATOR_INACTIVE_NUMBERS;
-    }
-}
 // ── tv() config ───────────────────────────────────────────────────
 const carouselVariants = tv({
     slots: {
@@ -114,8 +84,20 @@ const carouselVariants = tv({
             'text-white hover:bg-overlay-control-hover transition-colors duration-200 motion-reduce:transition-none ' +
             'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500',
         indicators: 'flex items-center justify-center',
-        indicator: 'inline-block transition-colors duration-200 motion-reduce:transition-none cursor-pointer ' +
+        // The indicator <button> — the pointer/keyboard target. WCAG 2.2
+        // SC 2.5.8 wants 24x24 CSS px and the spacing exception is unavailable
+        // (indicators sit in a row, a 24px circle on each would intersect its
+        // neighbour). A 12px dot cannot be the target, so the target and the
+        // painted mark are two elements: this one is floored at 24x24 at every
+        // size and stays transparent; `indicator` below is the visible mark and
+        // keeps the whole size axis. Targets wider than the floor (numbers at
+        // lg/xl, an active line at `w-12`) grow from the mark inside.
+        indicatorTarget: 'inline-flex shrink-0 items-center justify-center min-h-6 min-w-6 cursor-pointer ' +
             'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500',
+        // The painted mark inside the target. Never focusable — the focus ring
+        // lives on `indicatorTarget`, the color transition lives here because
+        // this is the element whose `bg-*` changes.
+        indicator: 'block transition-colors duration-200 motion-reduce:transition-none',
     },
     variants: {
         orientation: {
@@ -169,11 +151,18 @@ const carouselVariants = tv({
     },
     compoundVariants: [
         // Indicator geometry per variant × size.
+        //
+        // `dots` follows CLAUDE.md's **dot indicator** sub-scale — 2 / 2.5 / 3 /
+        // 3.5 / 4, the five-step 2px cadence `badge-dot` was corrected onto. It
+        // previously rendered 2/2.5/3/3/3, freezing md/lg/xl at 12px so two of
+        // the five advertised steps were dead on the *default* indicator
+        // variant. The active-state `scale-150` is a CSS transform, so it
+        // composes multiplicatively with every base value here.
         { variant: 'dots', size: 'xs', class: { indicator: 'size-2' } },
         { variant: 'dots', size: 'sm', class: { indicator: 'size-2.5' } },
         { variant: 'dots', size: 'md', class: { indicator: 'size-3' } },
-        { variant: 'dots', size: 'lg', class: { indicator: 'size-3' } },
-        { variant: 'dots', size: 'xl', class: { indicator: 'size-3' } },
+        { variant: 'dots', size: 'lg', class: { indicator: 'size-3.5' } },
+        { variant: 'dots', size: 'xl', class: { indicator: 'size-4' } },
         { variant: 'lines', size: 'xs', class: { indicator: 'h-1 w-4' } },
         { variant: 'lines', size: 'sm', class: { indicator: 'h-1 w-5' } },
         { variant: 'lines', size: 'md', class: { indicator: 'h-1.5 w-6' } },
@@ -226,7 +215,31 @@ const carouselVariants = tv({
         position: 'below',
     },
 }, { twMerge: true });
+
+// `CarouselComponent` is the canonical "structural-layout primitive" exception
+// to CLAUDE.md's 5–6 input cap (precedent: `SplitComponent`). The 17 inputs
+// here are each an independent geometry/behavior axis (orientation, slides
+// math, gap, loop, autoplay knobs, drag, keyboard, snap, active index, ARIA
+// label sources, i18n) — removing any would force consumers to coordinate two
+// carousels or replicate logic externally. Documented in
+// docs/requirements/carousel.requirements.md § 2.2 and § 12.
 // ── CarouselSlideComponent ────────────────────────────────────────
+//
+// This class stays in the same file as `CarouselComponent` **on purpose** —
+// do not "finish the split" by moving it out.
+//
+// The two form a true bidirectional dependency: `CarouselComponent` queries
+// the slides with `contentChildren(CarouselSlideComponent)` while every slide
+// resolves its parent with `inject(CarouselComponent)`. Both edges are value
+// edges (a query token and a DI token), so neither is erased at compile time —
+// splitting them across two files produces a circular import at runtime, and
+// whichever module the bundler evaluates second sees `undefined` for the other
+// class. Breaking it needs an injection token or a shared base class first,
+// which is a behavioural change, not a move.
+//
+// The three classes that used to sit below `CarouselComponent` did NOT have
+// this problem — they only inject the parent, never the reverse — and they now
+// live in `carousel-indicators.ts` and `carousel-nav.ts`.
 /**
  * A single slide inside a `<tw-carousel>`. Projects arbitrary content via its
  * default slot. Reports its visibility back to the carousel container via a
@@ -352,12 +365,10 @@ class CarouselComponent {
     /** Two-way bound 0-based index of the first visible slide in the current page. Setting from the parent scrolls the viewport smoothly to align that slide; reading reflects user-driven scroll position after `scrollend`. Defaults to `0`. */
     activeIndex = model(0, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
-    /** Accessible name for the carousel region. If both this and `ariaLabelledBy` are `null`, a one-time dev-mode `console.warn` is logged (production builds never log). Defaults to `null`. */
-    ariaLabel = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
-    /** ID of an element labeling the carousel. Either `ariaLabel` or `ariaLabelledBy` SHOULD be provided. Defaults to `null`. */
-    ariaLabelledBy = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "ariaLabelledBy" }] : /* istanbul ignore next */ []));
+    /** Accessible name for the carousel region. Mirrored to `aria-label`. If both this and `aria-labelledby` are `null`, a one-time dev-mode `console.warn` is logged (production builds never log). Defaults to `null`. */
+    ariaLabel = input(null, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
+    /** ID of an element labeling the carousel. Mirrored to `aria-labelledby`. Either `aria-label` or `aria-labelledby` SHOULD be provided. Defaults to `null`. */
+    ariaLabelledBy = input(null, { ...(ngDevMode ? { debugName: "ariaLabelledBy" } : /* istanbul ignore next */ {}), alias: 'aria-labelledby' });
     /** Localizable strings for prev/next/pause/resume/indicator/slide-of templates. Unset keys fall back to the English defaults in `DEFAULT_CAROUSEL_LABELS`. Defaults to `{}`. */
     labels = input({}, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []));
@@ -376,11 +387,22 @@ class CarouselComponent {
     /** @internal Projected slides in DOM order. */
     slides = contentChildren(CarouselSlideComponent, { ...(ngDevMode ? { debugName: "slides" } : /* istanbul ignore next */ {}), descendants: false });
     // ── Resolved configuration ─────────────────────────────────────
-    /** @internal Resolved label record with English defaults filled in. */
-    resolvedLabels = computed(() => ({
-        ...DEFAULT_CAROUSEL_LABELS,
-        ...this.labels(),
-    }), /* @ts-ignore */
+    /**
+     * @internal Resolved label record with English defaults filled in.
+     *
+     * Explicitly-undefined keys are dropped before merging. Root `tsconfig.json`
+     * does not set `exactOptionalPropertyTypes`, so `[labels]="{ indicator:
+     * t('carousel.indicator') }"` type-checks even when `t()` returns
+     * `string | undefined` — and a plain spread would then overwrite the default
+     * with `undefined`, which reaches `formatLabel()` and throws
+     * `Cannot read properties of undefined (reading 'replace')` inside a
+     * `computed`, taking the whole render down. Same filter `table.ts` and
+     * `timeline.ts` already use; `Required<>` then guarantees a string per key.
+     */
+    resolvedLabels = computed(() => {
+        const overrides = Object.fromEntries(Object.entries(this.labels() ?? {}).filter(([, value]) => value !== undefined));
+        return { ...DEFAULT_CAROUSEL_LABELS, ...overrides };
+    }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "resolvedLabels" }] : /* istanbul ignore next */ []));
     /** @internal Effective `slidesPerView` clamped to `[0.5, slideCount]`. */
     _effectiveSlidesPerView = computed(() => {
@@ -514,7 +536,7 @@ class CarouselComponent {
                     this.ariaLabel() === null &&
                     this.ariaLabelledBy() === null) {
                     warnedMissingLabel = true;
-                    console.warn('[tw-carousel] Provide either `ariaLabel` or `ariaLabelledBy` so the carousel region has an accessible name (WCAG 4.1.2).');
+                    console.warn('[tw-carousel] Provide either `aria-label` or `aria-labelledby` so the carousel region has an accessible name (WCAG 4.1.2).');
                 }
                 if (!warnedLowInterval && this.autoplayInterval() < 1000) {
                     warnedLowInterval = true;
@@ -619,6 +641,8 @@ class CarouselComponent {
     _onScrollEndBound = null;
     _onScrollDebouncedBound = null;
     _scrollDebounceTimer = null;
+    /** Handle for the post-interaction autoplay-pause expiry (see `_onPointerUp`). */
+    _postInteractionPauseTimer = null;
     _onVisibilityChangeBound = null;
     _setupViewport() {
         const viewport = this._viewportRef().nativeElement;
@@ -701,6 +725,10 @@ class CarouselComponent {
         this._intersectionObserver = null;
         this._resizeObserver?.disconnect();
         this._resizeObserver = null;
+        if (this._postInteractionPauseTimer !== null) {
+            clearTimeout(this._postInteractionPauseTimer);
+            this._postInteractionPauseTimer = null;
+        }
         if (this._loopJumpHandle !== null) {
             clearTimeout(this._loopJumpHandle);
             this._loopJumpHandle = null;
@@ -1099,7 +1127,14 @@ class CarouselComponent {
         });
         // Post-interaction autoplay pause.
         this._postInteractionPauseUntil.set(Date.now() + this._effectiveAutoplayInterval() * 2);
-        setTimeout(() => {
+        // Held in a field so `_teardownViewport` can clear it. Unstored, this
+        // fires at least two autoplay intervals after destroy and writes a signal
+        // on a torn-down component.
+        if (this._postInteractionPauseTimer !== null) {
+            clearTimeout(this._postInteractionPauseTimer);
+        }
+        this._postInteractionPauseTimer = setTimeout(() => {
+            this._postInteractionPauseTimer = null;
             if (this._postInteractionPauseUntil() !== null &&
                 Date.now() >= (this._postInteractionPauseUntil() ?? 0)) {
                 this._postInteractionPauseUntil.set(null);
@@ -1177,7 +1212,7 @@ class CarouselComponent {
         this._isManuallyPaused.set(next);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: CarouselComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: CarouselComponent, isStandalone: true, selector: "tw-carousel", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, slidesPerView: { classPropertyName: "slidesPerView", publicName: "slidesPerView", isSignal: true, isRequired: false, transformFunction: null }, slidesToScroll: { classPropertyName: "slidesToScroll", publicName: "slidesToScroll", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, loop: { classPropertyName: "loop", publicName: "loop", isSignal: true, isRequired: false, transformFunction: null }, autoplay: { classPropertyName: "autoplay", publicName: "autoplay", isSignal: true, isRequired: false, transformFunction: null }, autoplayInterval: { classPropertyName: "autoplayInterval", publicName: "autoplayInterval", isSignal: true, isRequired: false, transformFunction: null }, pauseOnHover: { classPropertyName: "pauseOnHover", publicName: "pauseOnHover", isSignal: true, isRequired: false, transformFunction: null }, pauseOnFocusIn: { classPropertyName: "pauseOnFocusIn", publicName: "pauseOnFocusIn", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, keyboard: { classPropertyName: "keyboard", publicName: "keyboard", isSignal: true, isRequired: false, transformFunction: null }, snapAlign: { classPropertyName: "snapAlign", publicName: "snapAlign", isSignal: true, isRequired: false, transformFunction: null }, activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeIndex: "activeIndexChange", slideChange: "slideChange", autoplayPaused: "autoplayPaused", autoplayResumed: "autoplayResumed" }, host: { attributes: { "role": "region" }, listeners: { "pointerenter": "_onPointerEnter()", "pointerleave": "_onPointerLeave()", "focusin": "_onFocusIn()", "focusout": "_onFocusOut($event)" }, properties: { "attr.aria-roledescription": "\"carousel\"", "attr.aria-label": "ariaLabel()", "attr.aria-labelledby": "ariaLabelledBy()", "class": "rootClasses()" } }, queries: [{ propertyName: "slides", predicate: CarouselSlideComponent, isSignal: true }], viewQueries: [{ propertyName: "_viewportRef", first: true, predicate: ["viewport"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: CarouselComponent, isStandalone: true, selector: "tw-carousel", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, slidesPerView: { classPropertyName: "slidesPerView", publicName: "slidesPerView", isSignal: true, isRequired: false, transformFunction: null }, slidesToScroll: { classPropertyName: "slidesToScroll", publicName: "slidesToScroll", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, loop: { classPropertyName: "loop", publicName: "loop", isSignal: true, isRequired: false, transformFunction: null }, autoplay: { classPropertyName: "autoplay", publicName: "autoplay", isSignal: true, isRequired: false, transformFunction: null }, autoplayInterval: { classPropertyName: "autoplayInterval", publicName: "autoplayInterval", isSignal: true, isRequired: false, transformFunction: null }, pauseOnHover: { classPropertyName: "pauseOnHover", publicName: "pauseOnHover", isSignal: true, isRequired: false, transformFunction: null }, pauseOnFocusIn: { classPropertyName: "pauseOnFocusIn", publicName: "pauseOnFocusIn", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, keyboard: { classPropertyName: "keyboard", publicName: "keyboard", isSignal: true, isRequired: false, transformFunction: null }, snapAlign: { classPropertyName: "snapAlign", publicName: "snapAlign", isSignal: true, isRequired: false, transformFunction: null }, activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", 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 }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeIndex: "activeIndexChange", slideChange: "slideChange", autoplayPaused: "autoplayPaused", autoplayResumed: "autoplayResumed" }, host: { attributes: { "role": "region" }, listeners: { "pointerenter": "_onPointerEnter()", "pointerleave": "_onPointerLeave()", "focusin": "_onFocusIn()", "focusout": "_onFocusOut($event)" }, properties: { "attr.aria-roledescription": "\"carousel\"", "attr.aria-label": "ariaLabel()", "attr.aria-labelledby": "ariaLabelledBy()", "class": "rootClasses()" } }, queries: [{ propertyName: "slides", predicate: CarouselSlideComponent, isSignal: true }], viewQueries: [{ propertyName: "_viewportRef", first: true, predicate: ["viewport"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <div
       #viewport
       data-tw-carousel-viewport
@@ -1283,7 +1318,75 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
     <ng-content />
   `,
                 }]
-        }], ctorParameters: () => [], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], slidesPerView: [{ type: i0.Input, args: [{ isSignal: true, alias: "slidesPerView", required: false }] }], slidesToScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "slidesToScroll", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], loop: [{ type: i0.Input, args: [{ isSignal: true, alias: "loop", required: false }] }], autoplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoplay", required: false }] }], autoplayInterval: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoplayInterval", required: false }] }], pauseOnHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "pauseOnHover", required: false }] }], pauseOnFocusIn: [{ type: i0.Input, args: [{ isSignal: true, alias: "pauseOnFocusIn", required: false }] }], draggable: [{ type: i0.Input, args: [{ isSignal: true, alias: "draggable", required: false }] }], keyboard: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyboard", required: false }] }], snapAlign: [{ type: i0.Input, args: [{ isSignal: true, alias: "snapAlign", required: false }] }], activeIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIndex", required: false }] }, { type: i0.Output, args: ["activeIndexChange"] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledBy", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], slideChange: [{ type: i0.Output, args: ["slideChange"] }], autoplayPaused: [{ type: i0.Output, args: ["autoplayPaused"] }], autoplayResumed: [{ type: i0.Output, args: ["autoplayResumed"] }], _viewportRef: [{ type: i0.ViewChild, args: ['viewport', { isSignal: true }] }], slides: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => CarouselSlideComponent), { ...{ descendants: false }, isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], slidesPerView: [{ type: i0.Input, args: [{ isSignal: true, alias: "slidesPerView", required: false }] }], slidesToScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "slidesToScroll", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], loop: [{ type: i0.Input, args: [{ isSignal: true, alias: "loop", required: false }] }], autoplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoplay", required: false }] }], autoplayInterval: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoplayInterval", required: false }] }], pauseOnHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "pauseOnHover", required: false }] }], pauseOnFocusIn: [{ type: i0.Input, args: [{ isSignal: true, alias: "pauseOnFocusIn", required: false }] }], draggable: [{ type: i0.Input, args: [{ isSignal: true, alias: "draggable", required: false }] }], keyboard: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyboard", required: false }] }], snapAlign: [{ type: i0.Input, args: [{ isSignal: true, alias: "snapAlign", required: false }] }], activeIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIndex", required: false }] }, { type: i0.Output, args: ["activeIndexChange"] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], slideChange: [{ type: i0.Output, args: ["slideChange"] }], autoplayPaused: [{ type: i0.Output, args: ["autoplayPaused"] }], autoplayResumed: [{ type: i0.Output, args: ["autoplayResumed"] }], _viewportRef: [{ type: i0.ViewChild, args: ['viewport', { isSignal: true }] }], slides: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => CarouselSlideComponent), { ...{ descendants: false }, isSignal: true }] }] } });
+
+/**
+ * `<tw-carousel-indicators>` — the per-page indicator row companion to
+ * `<tw-carousel>`.
+ *
+ * Depends on `CarouselComponent` one-way (it injects the parent; the parent
+ * never references this class), so this file imports `./carousel` and never
+ * the reverse. The static color x state class tables live here because nothing
+ * outside the indicators reads them.
+ */
+// ── Static color × state class lookups ──
+// Tailwind v4 only resolves statically-written class names. Per the stepper
+// precedent, every color × active/inactive indicator combination is enumerated.
+// Active indicators are also distinguishable by more than color (WCAG 1.4.1):
+// `dots` scale 1.5×; `lines` widen to w-12; `numbers` gain a filled background.
+const INDICATOR_ACTIVE_DOTS = {
+    primary: 'bg-primary-solid scale-150',
+    secondary: 'bg-secondary-solid scale-150',
+    accent: 'bg-accent-solid scale-150',
+    neutral: 'bg-neutral-solid scale-150',
+    info: 'bg-info-solid scale-150',
+    success: 'bg-success-solid scale-150',
+    warning: 'bg-warning-solid scale-150',
+    error: 'bg-error-solid scale-150',
+};
+const INDICATOR_ACTIVE_LINES = {
+    primary: 'bg-primary-solid w-12',
+    secondary: 'bg-secondary-solid w-12',
+    accent: 'bg-accent-solid w-12',
+    neutral: 'bg-neutral-solid w-12',
+    info: 'bg-info-solid w-12',
+    success: 'bg-success-solid w-12',
+    warning: 'bg-warning-solid w-12',
+    error: 'bg-error-solid w-12',
+};
+const INDICATOR_ACTIVE_NUMBERS = {
+    primary: 'bg-primary-solid text-primary-solid-fg',
+    secondary: 'bg-secondary-solid text-secondary-solid-fg',
+    accent: 'bg-accent-solid text-accent-solid-fg',
+    neutral: 'bg-neutral-solid text-neutral-solid-fg',
+    info: 'bg-info-solid text-info-solid-fg',
+    success: 'bg-success-solid text-success-solid-fg',
+    warning: 'bg-warning-solid text-warning-solid-fg',
+    error: 'bg-error-solid text-error-solid-fg',
+};
+const INDICATOR_INACTIVE_DOTS = 'bg-fg-muted opacity-50 hover:opacity-100';
+const INDICATOR_INACTIVE_LINES = 'bg-fg-muted opacity-50 hover:opacity-100';
+const INDICATOR_INACTIVE_NUMBERS = 'bg-surface-muted text-fg hover:bg-surface-sunken';
+function resolveIndicatorActiveClasses(variant, color) {
+    switch (variant) {
+        case 'dots':
+            return INDICATOR_ACTIVE_DOTS[color];
+        case 'lines':
+            return INDICATOR_ACTIVE_LINES[color];
+        case 'numbers':
+            return INDICATOR_ACTIVE_NUMBERS[color];
+    }
+}
+function resolveIndicatorInactiveClasses(variant) {
+    switch (variant) {
+        case 'dots':
+            return INDICATOR_INACTIVE_DOTS;
+        case 'lines':
+            return INDICATOR_INACTIVE_LINES;
+        case 'numbers':
+            return INDICATOR_INACTIVE_NUMBERS;
+    }
+}
 // ── CarouselIndicatorsComponent ───────────────────────────────────
 /**
  * Renders one button per **page** (not per slide) inside a `<tw-carousel>`.
@@ -1346,7 +1449,11 @@ class CarouselIndicatorsComponent {
             });
         }
     }
-    _buttonClasses(page) {
+    /** @internal Classes for the indicator `<button>` — the 24x24-floored hit target (SC 2.5.8). Identical for every page, so it is a computed rather than a per-page call. */
+    _buttonClasses = computed(() => this._variantResult().indicatorTarget(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_buttonClasses" }] : /* istanbul ignore next */ []));
+    /** @internal Classes for the painted mark inside the target: geometry from the `variant` × `size` compound variants, fill from the active/inactive lookup. */
+    _indicatorClasses(page) {
         const base = this._variantResult().indicator();
         const active = page === this.carousel.activePage();
         const stateClasses = active
@@ -1370,14 +1477,16 @@ class CarouselIndicatorsComponent {
     @for (page of _pages(); track page) {
       <button
         type="button"
-        [class]="_buttonClasses(page)"
+        [class]="_buttonClasses()"
         [attr.aria-label]="_buttonLabel(page)"
         [attr.aria-current]="page === carousel.activePage() ? 'true' : null"
         (click)="_onClick(page)"
       >
-        @if (variant() === 'numbers') {
-          {{ page + 1 }}
-        }
+        <span [class]="_indicatorClasses(page)">
+          @if (variant() === 'numbers') {
+            {{ page + 1 }}
+          }
+        </span>
       </button>
     }
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
@@ -1395,19 +1504,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
     @for (page of _pages(); track page) {
       <button
         type="button"
-        [class]="_buttonClasses(page)"
+        [class]="_buttonClasses()"
         [attr.aria-label]="_buttonLabel(page)"
         [attr.aria-current]="page === carousel.activePage() ? 'true' : null"
         (click)="_onClick(page)"
       >
-        @if (variant() === 'numbers') {
-          {{ page + 1 }}
-        }
+        <span [class]="_indicatorClasses(page)">
+          @if (variant() === 'numbers') {
+            {{ page + 1 }}
+          }
+        </span>
       </button>
     }
   `,
                 }]
         }], ctorParameters: () => [], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }] } });
+
+/**
+ * `[twCarouselPrev]` / `[twCarouselNext]` — the prev/next navigation
+ * directives applied to a consumer's own button primitive.
+ *
+ * Both inject `CarouselComponent` and are never referenced by it, so the
+ * import edge to `./carousel` is strictly one-way.
+ */
 // ── Prev / Next directives ────────────────────────────────────────
 /**
  * Apply to any focusable element (typically `<button>`) inside a `<tw-carousel>`