@cdevhub/ngx-tw 0.5.0 → 0.6.1

package/fesm2022/cdevhub-ngx-tw-progress-bar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"cdevhub-ngx-tw-progress-bar.mjs","sources":["../../../projects/ngx-tw/progress-bar/progress-bar.ts","../../../projects/ngx-tw/progress-bar/cdevhub-ngx-tw-progress-bar.ts"],"sourcesContent":["/**\n * `tw-progress-bar` — visualises measurable progress.\n *\n * Composition usecases:\n * - Upload progress (determinate linear with `options.formatter` → `\"3.2 MB / 10 MB\"`).\n * - Multi-step wizard (segmented variant, `options.segments` = step count).\n * - Skill / rating display (static determinate linear).\n * - Inline list-row progress (compact `size=\"sm\"`, constrained width via host class).\n * - Card-footer task completion (`options.showValue=true`, `color` switches to `success`/`error`).\n * - Indeterminate loading before first byte (omit `value` — the bar sweeps).\n *\n * For unknown-duration operations with no measurable progress, use `tw-spinner` instead.\n */\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  effect,\n  input,\n  untracked,\n} from '@angular/core';\nimport { tv } from 'tailwind-variants';\nimport type { TwColor } from '@cdevhub/ngx-tw/core';\n\n// `ngDevMode` is a globalThis flag set by Angular's build tooling — true in dev,\n// `false` in production builds. The `typeof` guard keeps the warning path safe\n// in environments (SSR, ad-hoc test harnesses) where the global is undeclared.\n// Preferred over `isDevMode()` because the latter is a runtime function call;\n// `ngDevMode` is a build-time constant the bundler can dead-code-eliminate.\ndeclare const ngDevMode: boolean | undefined;\n\n/** Visual style of the progress bar. */\nexport type ProgressBarVariant = 'linear' | 'segmented';\n\n/** Size scale specific to progress bars (bar thickness). */\nexport type ProgressBarSize = 'sm' | 'md' | 'lg';\n\n/** Function signature for formatting the visible / announced progress value. */\nexport type ProgressBarValueFormatter = (value: number, max: number, min: number) => string;\n\n/**\n * Non-visual configuration bundled into a single input to keep the component's public\n * surface small. Every field is optional and falls back to a sensible default.\n */\nexport interface ProgressBarOptions {\n  /** Lower bound of the value range. Defaults to `0`. */\n  min?: number;\n  /** Upper bound of the value range. Defaults to `100`. */\n  max?: number;\n  /** Number of equal cells when `variant` is `'segmented'`. Ignored for `'linear'`. Defaults to `5`. */\n  segments?: number;\n  /** When true, renders the formatted progress value next to the label. Defaults to `false`. */\n  showValue?: boolean;\n  /** Custom formatter for the displayed and announced value. Defaults to an integer percentage, e.g. `'42%'`. */\n  formatter?: ProgressBarValueFormatter;\n  /** Accessible name when no visible `label` is provided. Mirrored to `aria-label` on the progressbar element. */\n  ariaLabel?: string;\n  /** ID of an external element that labels the progress bar. Mirrored to `aria-labelledby`. */\n  ariaLabelledby?: string;\n}\n\n// ── Static fill-color lookup (Tailwind v4 scans class strings statically) ──\n\nconst FILL_COLORS: Record<TwColor, string> = {\n  primary: 'bg-primary-500',\n  secondary: 'bg-secondary-500',\n  accent: 'bg-accent-500',\n  neutral: 'bg-fg',\n  info: 'bg-info-500',\n  success: 'bg-success-500',\n  warning: 'bg-warning-500',\n  error: 'bg-error-500',\n};\n\n// ── tv() config ──\n\nconst progressBarVariants = tv({\n  slots: {\n    root: 'flex flex-col w-full',\n    header: 'flex items-center justify-between gap-3',\n    label: 'text-xs text-fg-muted',\n    valueText: 'text-xs text-fg-muted font-medium tabular-nums',\n    rail: 'relative w-full overflow-hidden rounded-full bg-surface-muted',\n    fill: 'absolute inset-y-0 left-0 rounded-full',\n    segmentList: 'flex w-full gap-1',\n    segment: 'flex-1 rounded-full',\n  },\n  variants: {\n    size: {\n      sm: { rail: 'h-1', segment: 'h-1' },\n      md: { rail: 'h-2', segment: 'h-2' },\n      lg: { rail: 'h-3', segment: 'h-3' },\n    },\n    variant: {\n      linear: { segmentList: 'hidden' },\n      segmented: { rail: 'hidden' },\n    },\n    isIndeterminate: {\n      true: { fill: 'w-[30%] animate-progress-bar-indeterminate' },\n      false: { fill: 'transition-[width] duration-normal motion-reduce:transition-none' },\n    },\n    hasHeader: {\n      true: { root: 'gap-1.5' },\n      false: { root: 'gap-0' },\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n    variant: 'linear',\n    isIndeterminate: false,\n    hasHeader: false,\n  },\n}, {\n  twMerge: true,\n});\n\nlet nextId = 0;\n\nconst DEFAULT_FORMATTER: ProgressBarValueFormatter = (value, max, min) => {\n  const range = max - min;\n  if (range <= 0) return '0%';\n  return `${Math.round(((value - min) / range) * 100)}%`;\n};\n\n/**\n * Indicates progress toward the completion of a task.\n *\n * @example\n * ```html\n * <tw-progress-bar [value]=\"40\" />\n * <tw-progress-bar label=\"Fetching records\" />\n * <tw-progress-bar\n *   variant=\"segmented\"\n *   [value]=\"step() * 25\"\n *   [options]=\"{ segments: 4 }\"\n * />\n * ```\n */\n@Component({\n  selector: 'tw-progress-bar',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class]': 'rootClasses()',\n  },\n  template: `\n    @if (hasHeader()) {\n      <div [class]=\"headerClasses()\">\n        @if (label(); as lbl) {\n          <span [id]=\"labelId\" [class]=\"labelClasses()\">{{ lbl }}</span>\n        } @else {\n          <span></span>\n        }\n        @if (resolvedShowValue() && !isIndeterminate()) {\n          <span [class]=\"valueTextClasses()\">{{ formattedValue() }}</span>\n        }\n      </div>\n    }\n\n    @if (variant() === 'linear') {\n      <div\n        [class]=\"railClasses()\"\n        role=\"progressbar\"\n        [attr.aria-valuemin]=\"resolvedMin()\"\n        [attr.aria-valuemax]=\"resolvedMax()\"\n        [attr.aria-valuenow]=\"isIndeterminate() ? null : clampedValue()\"\n        [attr.aria-valuetext]=\"isIndeterminate() ? null : formattedValue()\"\n        [attr.aria-busy]=\"isIndeterminate() ? true : null\"\n        [attr.aria-label]=\"resolvedAriaLabel()\"\n        [attr.aria-labelledby]=\"resolvedAriaLabelledby()\"\n      >\n        @if (isIndeterminate()) {\n          <span [class]=\"fillClasses()\"></span>\n        } @else {\n          <span [class]=\"fillClasses()\" [style.width.%]=\"progressRatio() * 100\"></span>\n        }\n      </div>\n    } @else {\n      <div\n        [class]=\"segmentListClasses()\"\n        role=\"progressbar\"\n        [attr.aria-valuemin]=\"resolvedMin()\"\n        [attr.aria-valuemax]=\"resolvedMax()\"\n        [attr.aria-valuenow]=\"isIndeterminate() ? null : clampedValue()\"\n        [attr.aria-valuetext]=\"isIndeterminate() ? null : formattedValue()\"\n        [attr.aria-busy]=\"isIndeterminate() ? true : null\"\n        [attr.aria-label]=\"resolvedAriaLabel()\"\n        [attr.aria-labelledby]=\"resolvedAriaLabelledby()\"\n      >\n        @for (i of segmentIndices(); track i) {\n          <span [class]=\"segmentClassFor(i)\"></span>\n        }\n      </div>\n    }\n  `,\n})\nexport class ProgressBarComponent {\n  /** Current progress value. When null or undefined, the bar renders indeterminate. Values outside `[options.min, options.max]` are clamped. */\n  readonly value = input<number | null | undefined>(null);\n\n  /** Visual style of the bar. `'linear'` renders a single fill; `'segmented'` splits the rail into discrete steps. Defaults to `'linear'`. */\n  readonly variant = input<ProgressBarVariant>('linear');\n\n  /** Semantic color of the filled portion. Defaults to `'primary'`. Use status colors (`success`/`warning`/`error`) to reflect task outcome. */\n  readonly color = input<TwColor>('primary');\n\n  /** Bar thickness. `'sm'` = h-1, `'md'` = h-2, `'lg'` = h-3. Defaults to `'md'`. */\n  readonly size = input<ProgressBarSize>('md');\n\n  /** Visible label rendered above the bar. When set, the bar is wired to the label via `aria-labelledby`. */\n  readonly label = input<string | undefined>(undefined);\n\n  /** Bundles non-visual configuration: value range (`min`/`max`/`segments`), value readout (`showValue`/`formatter`), and accessibility fallbacks (`ariaLabel`/`ariaLabelledby`). Every field is optional. */\n  readonly options = input<ProgressBarOptions | undefined>(undefined);\n\n  /** @internal */\n  readonly labelId = `tw-progress-bar-${nextId++}-label`;\n\n  /** @internal */\n  readonly resolvedMin = computed(() => this.options()?.min ?? 0);\n\n  /** @internal */\n  readonly resolvedMax = computed(() => this.options()?.max ?? 100);\n\n  /** @internal */\n  readonly resolvedSegments = computed(() => this.options()?.segments ?? 5);\n\n  /** @internal */\n  readonly resolvedShowValue = computed(() => this.options()?.showValue ?? false);\n\n  /** @internal */\n  readonly isIndeterminate = computed(() => {\n    const v = this.value();\n    return v === null || v === undefined;\n  });\n\n  /** @internal */\n  readonly clampedValue = computed(() => {\n    const v = this.value();\n    if (v === null || v === undefined) return this.resolvedMin();\n    const lo = this.resolvedMin();\n    const hi = this.resolvedMax();\n    if (v < lo) return lo;\n    if (v > hi) return hi;\n    return v;\n  });\n\n  /** @internal */\n  readonly progressRatio = computed(() => {\n    if (this.isIndeterminate()) return 0;\n    const range = this.resolvedMax() - this.resolvedMin();\n    if (range <= 0) return 0;\n    return (this.clampedValue() - this.resolvedMin()) / range;\n  });\n\n  /** @internal */\n  readonly formattedValue = computed(() => {\n    if (this.isIndeterminate()) return '';\n    const fmt = this.options()?.formatter ?? DEFAULT_FORMATTER;\n    return fmt(this.clampedValue(), this.resolvedMax(), this.resolvedMin());\n  });\n\n  /** @internal */\n  readonly hasHeader = computed(() => !!this.label() || this.resolvedShowValue());\n\n  /** @internal */\n  readonly segmentIndices = computed(() => {\n    const n = Math.max(1, Math.floor(this.resolvedSegments()));\n    return Array.from({ length: n }, (_, i) => i);\n  });\n\n  /** @internal */\n  readonly resolvedAriaLabel = computed(() => {\n    if (this.label()) return null;\n    if (this.options()?.ariaLabelledby) return null;\n    return this.options()?.ariaLabel ?? null;\n  });\n\n  /** @internal */\n  readonly resolvedAriaLabelledby = computed(() => {\n    if (this.label()) return this.labelId;\n    return this.options()?.ariaLabelledby ?? null;\n  });\n\n  // ── tv() slot computeds ──\n\n  private readonly variantResult = computed(() =>\n    progressBarVariants({\n      size: this.size(),\n      variant: this.variant(),\n      isIndeterminate: this.isIndeterminate(),\n      hasHeader: this.hasHeader(),\n    }),\n  );\n\n  readonly rootClasses = computed(() => this.variantResult().root());\n  readonly headerClasses = computed(() => this.variantResult().header());\n  readonly labelClasses = computed(() => this.variantResult().label());\n  readonly valueTextClasses = computed(() => this.variantResult().valueText());\n  readonly railClasses = computed(() => this.variantResult().rail());\n  readonly fillClasses = computed(() => `${this.variantResult().fill()} ${FILL_COLORS[this.color()]}`);\n  readonly segmentListClasses = computed(() => this.variantResult().segmentList());\n  private readonly segmentBaseClasses = computed(() => this.variantResult().segment());\n\n  /** @internal */\n  segmentClassFor(index: number): string {\n    const base = this.segmentBaseClasses();\n    const filled = (index + 1) / this.segmentIndices().length <= this.progressRatio();\n    const bg = filled ? FILL_COLORS[this.color()] : 'bg-surface-muted';\n    return `${base} ${bg}`;\n  }\n\n  // ── Dev-mode accessible-name warning (fires once per instance) ──\n  //\n  // The effect is reactive on purpose: if a consumer mounts the component\n  // without a label and later removes the only accessible name they had, the\n  // warning still fires on the *first* render where no name is present. Once\n  // it has fired, `warned` short-circuits further evaluations. Production\n  // builds skip the entire effect setup because `ngDevMode` is statically\n  // `false` and the constructor returns early.\n\n  constructor() {\n    if (typeof ngDevMode !== 'undefined' && !ngDevMode) return;\n    let warned = false;\n    effect(() => {\n      if (warned) return;\n      const opts = this.options();\n      if (this.label() || opts?.ariaLabel || opts?.ariaLabelledby) return;\n      // `untracked` wraps the side-effect so the console.warn / flag mutation\n      // can never create a reactive subscription — defensive in case future\n      // work adds signal reads inside the warning block.\n      untracked(() => {\n        warned = true;\n        console.warn(\n          'tw-progress-bar: no accessible name provided. Supply one of `label`, `options.ariaLabel`, or `options.ariaLabelledby`.',\n        );\n      });\n    });\n  }\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-progress-bar.mjs","sources":["../../../projects/ngx-tw/progress-bar/progress-bar.ts","../../../projects/ngx-tw/progress-bar/cdevhub-ngx-tw-progress-bar.ts"],"sourcesContent":["/**\n * `tw-progress-bar` — visualises measurable progress.\n *\n * Composition usecases:\n * - Upload progress (determinate linear with `options.formatter` → `\"3.2 MB / 10 MB\"`).\n * - Multi-step wizard (segmented variant, `options.segments` = step count).\n * - Skill / rating display (static determinate linear).\n * - Inline list-row progress (compact `size=\"sm\"`, constrained width via host class).\n * - Card-footer task completion (`options.showValue=true`, `color` switches to `success`/`error`).\n * - Indeterminate loading before first byte (omit `value` — the bar sweeps).\n *\n * For unknown-duration operations with no measurable progress, use `tw-spinner` instead.\n */\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  effect,\n  input,\n  untracked,\n} from '@angular/core';\nimport { tv } from 'tailwind-variants';\nimport type { TwColor } from '@cdevhub/ngx-tw/core';\n\n// `ngDevMode` is a globalThis flag set by Angular's build tooling — true in dev,\n// `false` in production builds. The `typeof` guard keeps the warning path safe\n// in environments (SSR, ad-hoc test harnesses) where the global is undeclared.\n// Preferred over `isDevMode()` because the latter is a runtime function call;\n// `ngDevMode` is a build-time constant the bundler can dead-code-eliminate.\ndeclare const ngDevMode: boolean | undefined;\n\n/** Visual style of the progress bar. */\nexport type ProgressBarVariant = 'linear' | 'segmented';\n\n/** Size scale specific to progress bars (bar thickness). */\nexport type ProgressBarSize = 'sm' | 'md' | 'lg';\n\n/** Function signature for formatting the visible / announced progress value. */\nexport type ProgressBarValueFormatter = (value: number, max: number, min: number) => string;\n\n/**\n * Non-visual configuration bundled into a single input to keep the component's public\n * surface small. Every field is optional and falls back to a sensible default.\n */\nexport interface ProgressBarOptions {\n  /** Lower bound of the value range. Defaults to `0`. */\n  min?: number;\n  /** Upper bound of the value range. Defaults to `100`. */\n  max?: number;\n  /** Number of equal cells when `variant` is `'segmented'`. Ignored for `'linear'`. Defaults to `5`. */\n  segments?: number;\n  /** When true, renders the formatted progress value next to the label. Defaults to `false`. */\n  showValue?: boolean;\n  /** Custom formatter for the displayed and announced value. Defaults to an integer percentage, e.g. `'42%'`. */\n  formatter?: ProgressBarValueFormatter;\n  /** Accessible name when no visible `label` is provided. Mirrored to `aria-label` on the progressbar element. */\n  ariaLabel?: string;\n  /** ID of an external element that labels the progress bar. Mirrored to `aria-labelledby`. */\n  ariaLabelledby?: string;\n}\n\n// ── Static fill-color lookup (Tailwind v4 scans class strings statically) ──\n\nconst FILL_COLORS: Record<TwColor, string> = {\n  primary: 'bg-primary-500',\n  secondary: 'bg-secondary-500',\n  accent: 'bg-accent-500',\n  neutral: 'bg-fg',\n  info: 'bg-info-500',\n  success: 'bg-success-500',\n  warning: 'bg-warning-500',\n  error: 'bg-error-500',\n};\n\n// ── tv() config ──\n\nconst progressBarVariants = tv({\n  slots: {\n    root: 'flex flex-col w-full',\n    header: 'flex items-center justify-between gap-3',\n    label: 'text-xs text-fg-muted',\n    valueText: 'text-xs text-fg-muted font-medium tabular-nums',\n    rail: 'relative w-full overflow-hidden rounded-full bg-surface-muted',\n    fill: 'absolute inset-y-0 left-0 rounded-full',\n    segmentList: 'flex w-full gap-1',\n    segment: 'flex-1 rounded-full',\n  },\n  variants: {\n    size: {\n      sm: { rail: 'h-1', segment: 'h-1' },\n      md: { rail: 'h-2', segment: 'h-2' },\n      lg: { rail: 'h-3', segment: 'h-3' },\n    },\n    variant: {\n      linear: { segmentList: 'hidden' },\n      segmented: { rail: 'hidden' },\n    },\n    isIndeterminate: {\n      true: { fill: 'w-[30%] animate-progress-bar-indeterminate' },\n      false: { fill: 'transition-[width] duration-normal motion-reduce:transition-none' },\n    },\n    hasHeader: {\n      true: { root: 'gap-1.5' },\n      false: { root: 'gap-0' },\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n    variant: 'linear',\n    isIndeterminate: false,\n    hasHeader: false,\n  },\n}, {\n  twMerge: true,\n});\n\nlet nextId = 0;\n\nconst DEFAULT_FORMATTER: ProgressBarValueFormatter = (value, max, min) => {\n  const range = max - min;\n  if (range <= 0) return '0%';\n  return `${Math.round(((value - min) / range) * 100)}%`;\n};\n\n/**\n * Indicates progress toward the completion of a task.\n *\n * @example\n * ```html\n * <tw-progress-bar [value]=\"40\" />\n * <tw-progress-bar label=\"Fetching records\" />\n * <tw-progress-bar\n *   variant=\"segmented\"\n *   [value]=\"step() * 25\"\n *   [options]=\"{ segments: 4 }\"\n * />\n * ```\n */\n@Component({\n  selector: 'tw-progress-bar',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class]': 'rootClasses()',\n  },\n  template: `\n    @if (hasHeader()) {\n      <div [class]=\"headerClasses()\">\n        @if (label(); as lbl) {\n          <span [id]=\"labelId\" [class]=\"labelClasses()\">{{ lbl }}</span>\n        } @else {\n          <span></span>\n        }\n        @if (resolvedShowValue() && !isIndeterminate()) {\n          <span [class]=\"valueTextClasses()\">{{ formattedValue() }}</span>\n        }\n      </div>\n    }\n\n    @if (variant() === 'linear') {\n      <div\n        [class]=\"railClasses()\"\n        role=\"progressbar\"\n        [attr.aria-valuemin]=\"resolvedMin()\"\n        [attr.aria-valuemax]=\"resolvedMax()\"\n        [attr.aria-valuenow]=\"isIndeterminate() ? null : clampedValue()\"\n        [attr.aria-valuetext]=\"isIndeterminate() ? null : formattedValue()\"\n        [attr.aria-busy]=\"isIndeterminate() ? true : null\"\n        [attr.aria-label]=\"resolvedAriaLabel()\"\n        [attr.aria-labelledby]=\"resolvedAriaLabelledby()\"\n      >\n        @if (isIndeterminate()) {\n          <span [class]=\"fillClasses()\"></span>\n        } @else {\n          <span [class]=\"fillClasses()\" [style.width.%]=\"progressRatio() * 100\"></span>\n        }\n      </div>\n    } @else {\n      <div\n        [class]=\"segmentListClasses()\"\n        role=\"progressbar\"\n        [attr.aria-valuemin]=\"resolvedMin()\"\n        [attr.aria-valuemax]=\"resolvedMax()\"\n        [attr.aria-valuenow]=\"isIndeterminate() ? null : clampedValue()\"\n        [attr.aria-valuetext]=\"isIndeterminate() ? null : formattedValue()\"\n        [attr.aria-busy]=\"isIndeterminate() ? true : null\"\n        [attr.aria-label]=\"resolvedAriaLabel()\"\n        [attr.aria-labelledby]=\"resolvedAriaLabelledby()\"\n      >\n        @for (i of segmentIndices(); track i) {\n          <span [class]=\"segmentClassFor(i)\"></span>\n        }\n      </div>\n    }\n  `,\n})\nexport class ProgressBarComponent {\n  /** Current progress value. When null or undefined, the bar renders indeterminate. Values outside `[options.min, options.max]` are clamped. Defaults to `null`. */\n  readonly value = input<number | null | undefined>(null);\n\n  /** Visual style of the bar. `'linear'` renders a single fill; `'segmented'` splits the rail into discrete steps. Defaults to `'linear'`. */\n  readonly variant = input<ProgressBarVariant>('linear');\n\n  /** Semantic color of the filled portion. Defaults to `'primary'`. Use status colors (`success`/`warning`/`error`) to reflect task outcome. */\n  readonly color = input<TwColor>('primary');\n\n  /** Bar thickness. `'sm'` = h-1, `'md'` = h-2, `'lg'` = h-3. Defaults to `'md'`. */\n  readonly size = input<ProgressBarSize>('md');\n\n  /** Visible label rendered above the bar. When set, the bar is wired to the label via `aria-labelledby`. */\n  readonly label = input<string | undefined>(undefined);\n\n  /** Bundles non-visual configuration: value range (`min`/`max`/`segments`), value readout (`showValue`/`formatter`), and accessibility fallbacks (`ariaLabel`/`ariaLabelledby`). Every field is optional. */\n  readonly options = input<ProgressBarOptions | undefined>(undefined);\n\n  /** @internal */\n  readonly labelId = `tw-progress-bar-${nextId++}-label`;\n\n  /** @internal */\n  readonly resolvedMin = computed(() => this.options()?.min ?? 0);\n\n  /** @internal */\n  readonly resolvedMax = computed(() => this.options()?.max ?? 100);\n\n  /** @internal */\n  readonly resolvedSegments = computed(() => this.options()?.segments ?? 5);\n\n  /** @internal */\n  readonly resolvedShowValue = computed(() => this.options()?.showValue ?? false);\n\n  /** @internal */\n  readonly isIndeterminate = computed(() => {\n    const v = this.value();\n    return v === null || v === undefined;\n  });\n\n  /** @internal */\n  readonly clampedValue = computed(() => {\n    const v = this.value();\n    if (v === null || v === undefined) return this.resolvedMin();\n    const lo = this.resolvedMin();\n    const hi = this.resolvedMax();\n    if (v < lo) return lo;\n    if (v > hi) return hi;\n    return v;\n  });\n\n  /** @internal */\n  readonly progressRatio = computed(() => {\n    if (this.isIndeterminate()) return 0;\n    const range = this.resolvedMax() - this.resolvedMin();\n    if (range <= 0) return 0;\n    return (this.clampedValue() - this.resolvedMin()) / range;\n  });\n\n  /** @internal */\n  readonly formattedValue = computed(() => {\n    if (this.isIndeterminate()) return '';\n    const fmt = this.options()?.formatter ?? DEFAULT_FORMATTER;\n    return fmt(this.clampedValue(), this.resolvedMax(), this.resolvedMin());\n  });\n\n  /** @internal */\n  readonly hasHeader = computed(() => !!this.label() || this.resolvedShowValue());\n\n  /** @internal */\n  readonly segmentIndices = computed(() => {\n    const n = Math.max(1, Math.floor(this.resolvedSegments()));\n    return Array.from({ length: n }, (_, i) => i);\n  });\n\n  /** @internal */\n  readonly resolvedAriaLabel = computed(() => {\n    if (this.label()) return null;\n    if (this.options()?.ariaLabelledby) return null;\n    return this.options()?.ariaLabel ?? null;\n  });\n\n  /** @internal */\n  readonly resolvedAriaLabelledby = computed(() => {\n    if (this.label()) return this.labelId;\n    return this.options()?.ariaLabelledby ?? null;\n  });\n\n  // ── tv() slot computeds ──\n\n  private readonly variantResult = computed(() =>\n    progressBarVariants({\n      size: this.size(),\n      variant: this.variant(),\n      isIndeterminate: this.isIndeterminate(),\n      hasHeader: this.hasHeader(),\n    }),\n  );\n\n  readonly rootClasses = computed(() => this.variantResult().root());\n  readonly headerClasses = computed(() => this.variantResult().header());\n  readonly labelClasses = computed(() => this.variantResult().label());\n  readonly valueTextClasses = computed(() => this.variantResult().valueText());\n  readonly railClasses = computed(() => this.variantResult().rail());\n  readonly fillClasses = computed(() => `${this.variantResult().fill()} ${FILL_COLORS[this.color()]}`);\n  readonly segmentListClasses = computed(() => this.variantResult().segmentList());\n  private readonly segmentBaseClasses = computed(() => this.variantResult().segment());\n\n  /** @internal */\n  segmentClassFor(index: number): string {\n    const base = this.segmentBaseClasses();\n    const filled = (index + 1) / this.segmentIndices().length <= this.progressRatio();\n    const bg = filled ? FILL_COLORS[this.color()] : 'bg-surface-muted';\n    return `${base} ${bg}`;\n  }\n\n  // ── Dev-mode accessible-name warning (fires once per instance) ──\n  //\n  // The effect is reactive on purpose: if a consumer mounts the component\n  // without a label and later removes the only accessible name they had, the\n  // warning still fires on the *first* render where no name is present. Once\n  // it has fired, `warned` short-circuits further evaluations. Production\n  // builds skip the entire effect setup because `ngDevMode` is statically\n  // `false` and the constructor returns early.\n\n  constructor() {\n    if (typeof ngDevMode !== 'undefined' && !ngDevMode) return;\n    let warned = false;\n    effect(() => {\n      if (warned) return;\n      const opts = this.options();\n      if (this.label() || opts?.ariaLabel || opts?.ariaLabelledby) return;\n      // `untracked` wraps the side-effect so the console.warn / flag mutation\n      // can never create a reactive subscription — defensive in case future\n      // work adds signal reads inside the warning block.\n      untracked(() => {\n        warned = true;\n        console.warn(\n          'tw-progress-bar: no accessible name provided. Supply one of `label`, `options.ariaLabel`, or `options.ariaLabelledby`.',\n        );\n      });\n    });\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

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

@@ -1,11 +1,9 @@
 import * as i0 from '@angular/core';
 import { input, model, output, inject, ElementRef, DestroyRef, forwardRef, signal, linkedSignal, computed, afterNextRender, isDevMode, ChangeDetectionStrategy, Component, contentChildren } from '@angular/core';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { NgControl, NgForm, FormGroupDirective } from '@angular/forms';
+import { NgControl } from '@angular/forms';
 import { FocusMonitor } from '@angular/cdk/a11y';
-import { merge } from 'rxjs';
 import { tv } from 'tailwind-variants';
-import { TW_ERROR_STATE_MATCHER } from '@cdevhub/ngx-tw/core';
+import { wireErrorState } from '@cdevhub/ngx-tw/core';
 
 // ── Radio tv() config ────────────────────────────────────────────
 const radioVariants = tv({
@@ -13,6 +11,25 @@ const radioVariants = tv({
         // `items-start` aligns circleWrap with the top of the label container; combined with
         // a `min-h-N` matching the label's first-line line-height on circleWrap, the circle
         // stays centered on the first line whether the label spans one line or many.
+        //
+        // ── Row-height scale (selection cohort) ──────────────────────────────
+        // The rendered row is `max(circleWrap, label first line)`, and the host itself is the
+        // click target (`role="radio"` + `tabindex` + `(click)` all sit on the root), so the
+        // row IS the interactive target. It runs 16 / 20 / 24 / 28 / 32 px — five distinct
+        // steps, every one on the 4px baseline of docs/vertical-rhythm.md, and identical to
+        // `checkbox` and `switch`. Selection controls are glyph-scale and deliberately do NOT
+        // take the pinned 24/32/36/44/48 form-row scale (vertical-rhythm.md section 4).
+        //
+        // The row is driven by `circleWrap` min-h, NOT by the circle glyph, which keeps its own
+        // 14 / 16 / 20 / 24 / 28 scale. Driving it from circleWrap is what makes the five steps
+        // survive when no label is projected.
+        //
+        // Because centering demands `circleWrap height == label first-line leading`, the label
+        // leading carries the same 4 / 5 / 6 / 7 / 8 progression. That is forced, not chosen:
+        // the label font scale has only three steps (text-xs, text-sm, text-base), so leading
+        // is the only lever that can break the sm/md and lg/xl ties. Before this, sm and md
+        // both rendered a 20px row — a dead step. Accepted cost: `text-base leading-8` at xl is
+        // a 2.0 line ratio, looser than typographic ideal on a wrapped multi-line label.
         root: 'inline-flex items-start gap-3 cursor-pointer select-none rounded-md focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500',
         circleWrap: 'relative inline-flex items-center justify-center shrink-0',
         circle: 'inline-flex items-center justify-center rounded-full border bg-surface transition-colors duration-normal motion-reduce:transition-none',
@@ -27,6 +44,12 @@ const radioVariants = tv({
             xs: {
                 // `size-3.5` half-step: aligns with text-xs/leading-4 row metric.
                 circle: 'size-3.5',
+                // The dot runs 6 / 8 / 10 / 12 / 14px — it is NOT on the status-dot sub-scale of
+                // CLAUDE.md (that one is for standalone presence pips). It is a proportional inner
+                // selection mark, held at ~50% of the enclosing circle at every size, so its value
+                // is derived from `circle` rather than picked off a table. At xs, 50% of a 14px
+                // circle is 7px, which no utility expresses; `size-1.5` (6px) is the nearest step
+                // down — rounding up to 8px would leave under 3px of ring on each side.
                 dot: 'size-1.5',
                 circleWrap: 'min-h-4',
                 label: 'text-xs leading-4',
@@ -42,15 +65,18 @@ const radioVariants = tv({
             md: {
                 circle: 'size-5',
                 dot: 'size-2.5',
-                circleWrap: 'min-h-5',
-                label: 'text-sm leading-5',
+                // 24px row. `text-sm` is shared with sm by the documented font scale, so the
+                // leading breaks the tie: leading-6 lifts the row off sm's 20px.
+                circleWrap: 'min-h-6',
+                label: 'text-sm leading-6',
                 description: 'text-xs leading-4',
             },
             lg: {
                 circle: 'size-6',
                 dot: 'size-3',
-                circleWrap: 'min-h-6',
-                label: 'text-base leading-6',
+                // 28px row — leading-7 keeps the first label line the same height as circleWrap.
+                circleWrap: 'min-h-7',
+                label: 'text-base leading-7',
                 description: 'text-sm leading-5',
             },
             xl: {
@@ -58,10 +84,10 @@ const radioVariants = tv({
                 // xl density: dot uses `size-3.5` (14px) as the proportionally-sized
                 // selection mark inside the size-7 (28px) circle — exactly 50%.
                 dot: 'size-3.5',
-                // xl circle (28px) > default text-base line-height (24px); bump leading to
-                // leading-7 so the first line height matches the circle and they align.
-                circleWrap: 'min-h-7',
-                label: 'text-base leading-7',
+                // 32px row. `text-base` is shared with lg, so leading-8 breaks that tie the same
+                // way leading-6 breaks sm/md. A 2.0 ratio on a wrapped label is the accepted cost.
+                circleWrap: 'min-h-8',
+                label: 'text-base leading-8',
                 description: 'text-sm leading-5',
             },
         },
@@ -138,7 +164,7 @@ const OUTLINE_DOT = {
 let nextRadioId = 0;
 // ── RadioComponent ───────────────────────────────────────────────
 class RadioComponent {
-    /** The value this radio contributes when selected inside a `tw-radio-group`. Required when nested in a group; ignored when used standalone. */
+    /** The value this radio contributes when selected inside a `tw-radio-group`. Required when nested in a group; ignored when used standalone. Defaults to `undefined`. */
     value = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     /** Overrides the parent group's color for this radio. When undefined, inherits from the group (or defaults to `'primary'` standalone). */
@@ -165,36 +191,60 @@ class RadioComponent {
     /** Optional name attribute for standalone use. Ignored when the parent group provides a name. */
     name = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
-    /** Accessible name when no visible label is provided. Mirrored to `aria-label`. */
+    /** Accessible name when no visible label is provided. Mirrored to `aria-label`. Defaults to `undefined`. */
     ariaLabel = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
-    /** ID of an external element that labels the radio. Mirrored to `aria-labelledby`. */
+    /** ID of an external element that labels the radio. Mirrored to `aria-labelledby`. Defaults to `undefined`. */
     ariaLabelledby = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabelledby" } : /* istanbul ignore next */ {}), alias: 'aria-labelledby' });
-    /** ID of an external element that describes the radio. Mirrored to `aria-describedby`. */
+    /** ID of an external element that describes the radio. Mirrored to `aria-describedby`. Defaults to `undefined`. */
     ariaDescribedby = input(undefined, { ...(ngDevMode ? { debugName: "ariaDescribedby" } : /* istanbul ignore next */ {}), alias: 'aria-describedby' });
-    /** Two-way bound checked state. Authoritative only in standalone mode; when inside a `tw-radio-group`, this model reflects group selection but does NOT drive it. */
+    /**
+     * Two-way bound checked state. Authoritative only in standalone mode.
+     * Defaults to `false`.
+     *
+     * Standalone, the minted `checkedChange` output is the *any-change* channel:
+     * it fires both when the user selects this radio and when a bound form writes
+     * into it (`FormControl.setValue`, `ngModel`, `writeValue`). `(change)` is the
+     * *user-gesture-only* channel — bind that one for analytics or a confirmation
+     * prompt, where a programmatic write must not count as a click.
+     *
+     * Inside a `tw-radio-group` this model is inert: the group owns selection,
+     * the rendered state comes from the group's `value`, and the component never
+     * writes `checked` — so `(checkedChange)` never fires on a grouped radio.
+     * `(change)` still fires when this radio becomes the selected one. Bind the
+     * group's `[(value)]` / `(change)` instead.
+     */
     checked = model(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
     /** Per-instance override of the {@link ErrorStateMatcher}. When omitted, the radio uses the `TW_ERROR_STATE_MATCHER` token's value. */
     errorStateMatcher = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "errorStateMatcher" }] : /* istanbul ignore next */ []));
-    /** Fires after the checked state changes from a user interaction on this radio. In grouped mode only fires when this radio becomes the selected one. Does not fire when selection is updated programmatically. */
+    /**
+     * Fires after the checked state changes from a user interaction on this
+     * radio. In grouped mode only fires when this radio becomes the selected one.
+     * Does **not** fire when selection is updated programmatically via
+     * `writeValue` / `FormControl.setValue` / `ngModel` — standalone, bind the
+     * two-way binding's `(checkedChange)` for that, which fires on any change.
+     * (Grouped, `(checkedChange)` never fires at all; use the group's
+     * `[(value)]`.)
+     */
     change = output();
     focusMonitor = inject(FocusMonitor);
     elementRef = inject((ElementRef));
     destroyRef = inject(DestroyRef);
     parent = inject(forwardRef(() => RadioGroupComponent), { optional: true });
     ngControl = inject(NgControl, { optional: true, self: true });
-    parentForm = inject(NgForm, { optional: true });
-    parentFormGroup = inject(FormGroupDirective, { optional: true });
-    defaultMatcher = inject(TW_ERROR_STATE_MATCHER);
     onChange = () => { };
     onTouched = () => { };
     cvaDisabled = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
-    _ngControlRev = signal(0, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "_ngControlRev" }] : /* istanbul ignore next */ []));
-    _formSubmitRev = signal(0, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "_formSubmitRev" }] : /* istanbul ignore next */ []));
+    /** @internal Shared `errorState` derivation — see `wireErrorState`. */
+    errorWiring = wireErrorState({
+        ngControl: () => this.ngControl,
+        matcher: () => this.errorStateMatcher(),
+        // A radio inside a group inherits the group's error state verbatim,
+        // including `false`; standalone it falls through to the matcher.
+        errorStateOverride: () => (this.parent ? this.parent.errorState() : undefined),
+    });
     uid = nextRadioId++;
     hostId = `tw-radio-${this.uid}`;
     labelId = `${this.hostId}-label`;
@@ -224,17 +274,7 @@ class RadioComponent {
     isDisabled = computed(() => this.disabled() || this.cvaDisabled() || (this.parent?.isDisabled() ?? false), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
     /** Whether the radio is in an error state per the configured `ErrorStateMatcher`. Inherits from the parent group when wrapped; falls back to its own NgControl when standalone. */
-    errorState = computed(() => {
-        this._ngControlRev();
-        this._formSubmitRev();
-        if (this.parent)
-            return this.parent.errorState();
-        const matcher = this.errorStateMatcher() ?? this.defaultMatcher;
-        const form = this.parentFormGroup ??
-            this.parentForm;
-        return matcher.isErrorState(this.ngControl?.control ?? null, form);
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "errorState" }] : /* istanbul ignore next */ []));
+    errorState = this.errorWiring.errorState;
     /** Roving tabindex: in a group, only the selected (or first enabled if none selected) radio is focusable. Standalone radios are always focusable unless disabled. */
     isFocusable = computed(() => {
         if (this.isDisabled())
@@ -336,7 +376,8 @@ class RadioComponent {
             this.internalChecked.set(true);
             this.checked.set(true);
             this.onChange(true);
-            this.onTouched();
+            // Deliberately NOT `onTouched()` — that is the blur notification, and
+            // `onBlur()` owns it. See the note on `RadioGroupComponent.selectValue`.
             this.change.emit(true);
         }
     }
@@ -357,7 +398,7 @@ class RadioComponent {
         else {
             this.onTouched();
             // Blur flips `touched` on `NgControl`; bump the revision so `errorState` recomputes.
-            this._ngControlRev.update((n) => n + 1);
+            this.errorWiring.bump();
         }
     }
     /** Focuses the host element. Required for keyboard navigation from the group. */
@@ -386,21 +427,7 @@ class RadioComponent {
         });
         // Track validator status/value changes on a bound NgControl so `errorState`
         // re-evaluates when status flips. Mirrors `input.ts`'s pattern.
-        const ctrl = this.ngControl?.control;
-        if (ctrl) {
-            const streams = [ctrl.statusChanges, ctrl.valueChanges].filter((s) => !!s);
-            if (streams.length) {
-                merge(...streams)
-                    .pipe(takeUntilDestroyed(this.destroyRef))
-                    .subscribe(() => this._ngControlRev.update((n) => n + 1));
-            }
-        }
-        const submit = this.parentFormGroup?.ngSubmit ?? this.parentForm?.ngSubmit;
-        if (submit) {
-            submit
-                .pipe(takeUntilDestroyed(this.destroyRef))
-                .subscribe(() => this._formSubmitRev.update((n) => n + 1));
-        }
+        this.errorWiring.connect();
     }
     hasAccessibleNameHint() {
         if (this.label() || this.ariaLabel() || this.ariaLabelledby())
@@ -527,31 +554,61 @@ class RadioGroupComponent {
     /** Visual style of the selected indicator. `'solid'` fills the dot with the color against a colored ring; `'outline'` keeps a transparent fill with a colored ring and colored dot. Propagated to children unless a child overrides it. Defaults to `'solid'`. */
     variant = input('solid', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
-    /** Layout direction of the group. Drives `aria-orientation` and the arrow-key model. Defaults to `'vertical'`. */
+    /** Layout direction of the group. Sets `aria-orientation` and the visual axis; both arrow-key pairs navigate in either orientation, per WAI-ARIA APG. Defaults to `'vertical'`. */
     orientation = input('vertical', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
     /** When true, disables every radio in the group and blocks keyboard interaction. Defaults to `false`. */
     disabled = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
-    /** When true, sets `aria-required="true"` on the group for assistive tech. Defaults to `false`. */
-    required = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    /** When true, sets `aria-required="true"` on the group for assistive tech. Also inferred from `Validators.required` on a bound control, so a reactive/template-driven form does not have to state it twice. Defaults to `false`. */
+    requiredInput = input(false, { ...(ngDevMode ? { debugName: "requiredInput" } : /* istanbul ignore next */ {}), alias: 'required' });
+    /**
+     * @internal Shared `errorState` / `required` / `errors` derivation — see
+     * `wireErrorState`. Declared here, above `required`, because class field
+     * initializers run in declaration order.
+     */
+    errorWiring = wireErrorState({
+        ngControl: () => this.ngControl,
+        matcher: () => this.errorStateMatcher(),
+        required: () => this.requiredInput(),
+    });
+    /**
+     * @internal Resolved required state: the `required` input OR'd with
+     * `Validators.required` on a bound `NgControl`.
+     */
+    required = this.errorWiring.required;
     /** Optional form-association name. Propagated to each child radio's host `name` attribute so standard HTML form semantics still apply. */
     name = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
-    /** Accessible name for the group when no visible label is provided. Mirrored to `aria-label`. */
+    /** Accessible name for the group when no visible label is provided. Mirrored to `aria-label`. Defaults to `undefined`. */
     ariaLabel = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
-    /** ID of an external element that labels the group. Mirrored to `aria-labelledby`. */
+    /** ID of an external element that labels the group. Mirrored to `aria-labelledby`. Defaults to `undefined`. */
     ariaLabelledby = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabelledby" } : /* istanbul ignore next */ {}), alias: 'aria-labelledby' });
-    /** ID of an external element that describes the group. Mirrored to `aria-describedby`. */
+    /** ID of an external element that describes the group. Mirrored to `aria-describedby`. Defaults to `undefined`. */
     ariaDescribedby = input(undefined, { ...(ngDevMode ? { debugName: "ariaDescribedby" } : /* istanbul ignore next */ {}), alias: 'aria-describedby' });
-    /** Two-way bound selected value. Updates when the user picks a radio; fires `valueChange`. `null` means no selection. */
+    /**
+     * Two-way bound selected value. `null` means no selection. Defaults to
+     * `null`.
+     *
+     * The two-way binding mints a `valueChange` output. That output is the
+     * *any-change* channel: it fires when the user picks a radio **and** when a
+     * bound form writes into the group (`FormControl.setValue`, `ngModel`,
+     * `writeValue`). `(change)` is the *user-gesture-only* channel — bind that
+     * one for analytics or a confirmation prompt, where a programmatic write must
+     * not count as a click. Writing back into the same form from a
+     * `(valueChange)` handler will echo.
+     */
     value = model(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     /** Per-instance override of the {@link ErrorStateMatcher}. When omitted, the group uses the `TW_ERROR_STATE_MATCHER` token's value. */
     errorStateMatcher = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "errorStateMatcher" }] : /* istanbul ignore next */ []));
-    /** Fires after the selected value changes from a user interaction. Does not fire when the value is updated programmatically via `writeValue`. */
+    /**
+     * Fires after the selected value changes from a user interaction. Does
+     * **not** fire when the value is updated programmatically via `writeValue` /
+     * `FormControl.setValue` / `ngModel` — for those, bind the two-way binding's
+     * `(valueChange)` instead, which fires on any change.
+     */
     change = output();
     /** @internal Child radios discovered via content projection. */
     radios = contentChildren(RadioComponent, { ...(ngDevMode ? { debugName: "radios" } : /* istanbul ignore next */ {}), descendants: true });
@@ -559,31 +616,16 @@ class RadioGroupComponent {
     elementRef = inject((ElementRef));
     destroyRef = inject(DestroyRef);
     ngControl = inject(NgControl, { optional: true, self: true });
-    parentForm = inject(NgForm, { optional: true });
-    parentFormGroup = inject(FormGroupDirective, { optional: true });
-    defaultMatcher = inject(TW_ERROR_STATE_MATCHER);
     hostId = `tw-radio-group-${nextGroupId++}`;
     onChange = () => { };
     onTouched = () => { };
     cvaDisabled = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
-    _ngControlRev = signal(0, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "_ngControlRev" }] : /* istanbul ignore next */ []));
-    _formSubmitRev = signal(0, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "_formSubmitRev" }] : /* istanbul ignore next */ []));
     /** Effective disabled state — input OR CVA disabled. */
     isDisabled = computed(() => this.disabled() || this.cvaDisabled(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
     /** Group-level error state per the configured `ErrorStateMatcher`. Reads the bound `NgControl.invalid` through the matcher; child radios inherit from this when wrapped in the group. */
-    errorState = computed(() => {
-        this._ngControlRev();
-        this._formSubmitRev();
-        const matcher = this.errorStateMatcher() ?? this.defaultMatcher;
-        const form = this.parentFormGroup ??
-            this.parentForm;
-        return matcher.isErrorState(this.ngControl?.control ?? null, form);
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "errorState" }] : /* istanbul ignore next */ []));
+    errorState = this.errorWiring.errorState;
     activeValue = linkedSignal(() => this.value(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "activeValue" }] : /* istanbul ignore next */ []));
     variantResult = computed(() => radioGroupVariants({
@@ -613,20 +655,25 @@ class RadioGroupComponent {
             return;
         const typed = next;
         if (typed === this.activeValue()) {
-            this.onTouched();
             return;
         }
         this.activeValue.set(typed);
         this.value.set(typed);
         this.onChange(typed);
-        this.onTouched();
+        // Deliberately NOT `onTouched()`. Angular's CVA contract registers
+        // `onTouched` as the BLUR notification; calling it on selection flipped
+        // `touched` with no blur, so a consumer staging error display on `touched`
+        // got different behaviour from `tw-radio-group` than from `tw-slider` /
+        // `tw-input`. `notifyTouched()` — reached from a child radio's real blur —
+        // is the only place that fires it.
         this.change.emit(typed);
     }
     /** @internal Called by child radios on blur — propagates to CVA onTouched and bumps the errorState revision so a blur on a child radio refreshes the group's `aria-invalid`. */
     notifyTouched() {
         this.onTouched();
-        this._ngControlRev.update((n) => n + 1);
+        this.errorWiring.bump();
     }
+    /** @internal Handles roving-focus keyboard navigation (Arrow keys, Space) across the radios in the group. */
     onKeydown(event) {
         if (this.isDisabled())
             return;
@@ -710,24 +757,10 @@ class RadioGroupComponent {
         // NgControl's `control` is set by the parent FormControl* directive before
         // children's `ngOnInit`. Subscribe here so errorState reacts to status/value
         // changes on the bound control.
-        const ctrl = this.ngControl?.control;
-        if (ctrl) {
-            const streams = [ctrl.statusChanges, ctrl.valueChanges].filter((s) => !!s);
-            if (streams.length) {
-                merge(...streams)
-                    .pipe(takeUntilDestroyed(this.destroyRef))
-                    .subscribe(() => this._ngControlRev.update((n) => n + 1));
-            }
-        }
-        const submit = this.parentFormGroup?.ngSubmit ?? this.parentForm?.ngSubmit;
-        if (submit) {
-            submit
-                .pipe(takeUntilDestroyed(this.destroyRef))
-                .subscribe(() => this._formSubmitRev.update((n) => n + 1));
-        }
+        this.errorWiring.connect();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: RadioGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.7", type: RadioGroupComponent, isStandalone: true, selector: "tw-radio-group", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, errorStateMatcher: { classPropertyName: "errorStateMatcher", publicName: "errorStateMatcher", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", change: "change" }, host: { attributes: { "role": "radiogroup" }, listeners: { "keydown": "onKeydown($event)" }, properties: { "id": "hostId", "class": "rootClasses()", "attr.aria-orientation": "orientation()", "attr.aria-disabled": "isDisabled() || null", "attr.aria-required": "required() || null", "attr.aria-invalid": "errorState() || null", "attr.aria-label": "ariaLabel() || null", "attr.aria-labelledby": "ariaLabelledby() || null", "attr.aria-describedby": "ariaDescribedby() || null" } }, queries: [{ propertyName: "radios", predicate: RadioComponent, descendants: true, isSignal: true }], ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.7", type: RadioGroupComponent, isStandalone: true, selector: "tw-radio-group", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, requiredInput: { classPropertyName: "requiredInput", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, errorStateMatcher: { classPropertyName: "errorStateMatcher", publicName: "errorStateMatcher", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", change: "change" }, host: { attributes: { "role": "radiogroup" }, listeners: { "keydown": "onKeydown($event)" }, properties: { "id": "hostId", "class": "rootClasses()", "attr.aria-orientation": "orientation()", "attr.aria-disabled": "isDisabled() || null", "attr.aria-required": "required() || null", "attr.aria-invalid": "errorState() || null", "attr.aria-label": "ariaLabel() || null", "attr.aria-labelledby": "ariaLabelledby() || null", "attr.aria-describedby": "ariaDescribedby() || null" } }, queries: [{ propertyName: "radios", predicate: RadioComponent, descendants: true, isSignal: true }], ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: RadioGroupComponent, decorators: [{
             type: Component,
@@ -749,7 +782,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                         '(keydown)': 'onKeydown($event)',
                     },
                 }]
-        }], ctorParameters: () => [], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], errorStateMatcher: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorStateMatcher", required: false }] }], change: [{ type: i0.Output, args: ["change"] }], radios: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => RadioComponent), { ...{ descendants: true }, isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], requiredInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], errorStateMatcher: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorStateMatcher", required: false }] }], change: [{ type: i0.Output, args: ["change"] }], radios: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => RadioComponent), { ...{ descendants: true }, isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.