@cdevhub/ngx-tw 0.5.0 → 0.6.0

package/theme/_semantic.css

@@ -22,10 +22,31 @@
   --color-fg-muted: var(--color-gray-600);
   --color-fg-subtle: var(--color-gray-500);
 
-  /* ===== Border ===== */
-  --color-border: var(--color-gray-300);
+  /* ===== Border =====
+     `--color-border` and `--color-border-strong` carry the boundary that
+     IDENTIFIES a control — the outline of an input, a checkbox, a select
+     trigger. WCAG 2.2 SC 1.4.11 (Non-text Contrast) requires 3:1 for exactly
+     that, and for an unchecked checkbox the border IS the component. Measured
+     against `--color-surface`, gray-300 gave 1.47:1 and gray-400 gave 2.60:1,
+     so both failed; the values below are the first palette steps that clear
+     3:1 (4.84:1 and 7.56:1 in light, 4.16:1 and 7.73:1 in dark).
+     (The dark `-strong` figure read 8.59 until 2026-09-03; measured it is
+     7.73, and no plausible pairing reproduces 8.59 — gray-400 on gray-900 is
+     6.82. The verdict is unchanged: it was and is the first step clearing 3:1.
+     Re-measure with `scratchpad/p6-pairs.mjs` rather than estimating.)
+
+     `--color-border-muted` is deliberately NOT raised. It is the decorative
+     divider — ghost-variant footers, subtle rules between rows — and SC 1.4.11
+     exempts boundaries that are purely decorative and not needed to identify a
+     component or its state. Raising it would darken every hairline in the
+     library for no accessibility gain.
+
+     axe does not catch any of this: its `color-contrast` rule tests TEXT only,
+     so these three tokens were invisible to the a11y sweep and were measured
+     by hand. See docs/audit-2026-09-register.md. */
+  --color-border: var(--color-gray-500);
   --color-border-muted: var(--color-gray-200);
-  --color-border-strong: var(--color-gray-400);
+  --color-border-strong: var(--color-gray-600);
 
   /* ===== Table sticky shadows =====
      Hairline 1px shadows used to separate sticky table chrome from scrolled
@@ -36,15 +57,6 @@
   --shadow-table-sticky-cell-start: 1px 0 0 0 var(--color-border);
   --shadow-table-sticky-cell-end: -1px 0 0 0 var(--color-border);
 
-  /* ===== Calendar widths =====
-     Pinned per size so month / year / multi-year views share the same footprint
-     across view transitions. Each value is roughly `cell-size × 7 + gutters`. */
-  --width-calendar-xs: 210px;
-  --width-calendar-sm: 240px;
-  --width-calendar-md: 292px;
-  --width-calendar-lg: 320px;
-  --width-calendar-xl: 376px;
-
   /* ===== Extra-small typography =====
      Used for xs-density secondary text (xs descriptions, calendar cell labels,
      keyboard hints). Sits one step below Tailwind's `text-xs` (0.75rem).
@@ -176,6 +188,29 @@
        -solid-fg       text on -solid (AA body)
        -border         subtle border (outline variant, dividers)
        -border-strong  accent border (indicators, rings)
+
+     `-border` reads as "subtle", but it is NOT decorative the way
+     `--color-border-muted` is: it is the alert `outline` variant's only
+     boundary (`alert.ts:50`, transparent background), so SC 1.4.11's 3:1
+     applies to it. The four schemes currently disagree about whether they
+     honour that, and the disagreement is deliberate, not drift:
+
+       scheme              {role}-border       on surface    3:1?
+       light               {role}-300          1.40 – 1.92    ✗  (all 7 roles)
+       dark                see `_dark.css`     3.42 – 4.22    ✓  (raised 2026-09-03)
+       high-contrast       {hue}-700           4.94 – 10.34   ✓
+       high-contrast-dark  {hue}-300          10.93 – 15.02   ✓
+
+     The ✓/✗ column is ENFORCED — `theme-contrast.spec.ts` recomputes it for
+     every scheme on every run, and `light` is its one dated allowance. The
+     ranges and step names are indicative and were measured on 2026-09-03; if
+     you need a current number, re-run the harness rather than quoting this.
+
+     Light is the outstanding one. Raising it means darkening the default
+     scheme's outline tier across eight colours — a visual-baseline change
+     with its own blast radius, reported for a pass of its own rather than
+     folded into the dark fix. Re-measure any row here with
+     `scratchpad/p6-contrast.mjs <scheme> <baseline>`; do not estimate.
        -fg             colored text on neutral surface (tab labels, links)
        -icon           icon tint on -soft / surface contexts
 

package/theme/_typography.css

@@ -3,6 +3,23 @@
   --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
   --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace;
 
+  /* ===== Font sizes — line-heights pinned in `rem`, deliberately =====
+     Tailwind's defaults are UNITLESS ratios (e.g. `--text-sm--line-height:
+     calc(1.25 / 0.875)`). A consumer who re-units `--text-sm` therefore
+     rescales every line box, which silently overflows controls whose height is
+     pinned. Absolute values make the line box a fixed 4px multiple that cannot
+     be rescaled out from under a pinned height.
+
+     These reproduce Tailwind's own COMPUTED defaults exactly (16 / 20 / 24px),
+     so the visual diff of adopting them is zero. This is robustness, not a
+     redesign — do not "simplify" them back to ratios. */
+  --text-xs: 0.75rem;
+  --text-xs--line-height: 1rem; /* 12 / 16 */
+  --text-sm: 0.875rem;
+  --text-sm--line-height: 1.25rem; /* 14 / 20 */
+  --text-base: 1rem;
+  --text-base--line-height: 1.5rem; /* 16 / 24 */
+
   /* ===== Animation durations ===== */
   --duration-fast: 150ms;
   --duration-normal: 200ms;

package/theme/index.css

@@ -3,23 +3,85 @@
 /* ===== Dark variant binding =====
    Re-binds Tailwind's `dark:` variant so it activates on the same condition
    that flips the semantic tokens in `_dark.css`:
-     1. an explicit `[data-theme="dark"]` ancestor, OR
-     2. `prefers-color-scheme: dark` AND no explicit `data-theme` opt-out.
+     1. an explicit `[data-theme="dark"]` or `[data-theme="high-contrast-dark"]`
+        ancestor, OR
+     2. `prefers-color-scheme: dark` AND no explicit `data-theme` opt-out,
+   and in BOTH cases only while no nearer `[data-theme="light"]` /
+   `[data-theme="high-contrast"]` ancestor has opted the subtree back out.
+
+   `high-contrast-dark` counts as dark here because it IS dark — a subtree
+   scoped to it must keep the same `dark:` utilities a `dark` subtree gets, or
+   consumer overrides silently stop applying inside it.
 
    Without this binding `dark:` defaults to `@media (prefers-color-scheme: dark)`,
    which drifts from the `[data-theme="dark"]` selector — producing inverted
    token state but un-inverted dark utilities (or vice versa) whenever OS
-   preference disagrees with the consumer's chosen theme. Keep this rule in
-   lock-step with the activation predicates in `_dark.css`. */
+   preference disagrees with the consumer's chosen theme.
+
+   Keep this rule in lock-step with the activation predicates in `_dark.css`
+   and `_light.css` — with ONE deliberate divergence, stated here so a later
+   pass does not "fix" it into a bug. `_dark.css`'s media branch excludes
+   `[data-theme="high-contrast-dark"]` roots, because a root asking for the
+   dark high-contrast TOKENS must not be handed the plain dark ones. The media
+   branch below does NOT exclude them, because a root asking for dark high
+   contrast is still asking for dark, and `dark:` utilities must keep applying
+   there. The two predicates answer different questions — "which token set" and
+   "is this dark" — and only agree on three of the four schemes.
+
+   The `:not(:where(…))` exclusions carry zero specificity, so they cannot
+   change how a consumer's own `dark:` utility resolves against their other
+   rules — they only narrow *when* it applies. Both branches need one, but the
+   two are deliberately NOT the same shape:
+
+   - The media branch excludes any `[data-theme="light"]` /
+     `[data-theme="high-contrast"]` ancestor outright. Re-entering dark below
+     such a subtree is still handled, because the explicit branch above matches
+     it independently.
+   - The explicit branch can only exclude a light/high-contrast boundary that
+     sits *below* a dark one (`[data-theme="dark"] [data-theme="light"] *`).
+     The plain form would also strip `dark:` from a dark subtree nested inside
+     a light one, where it is correct — CSS has no "nearest themed ancestor"
+     combinator, and inherited custom properties get that semantic for free
+     while selectors do not. The residual gap is depth-3 alternation
+     (dark → light → dark), which is no worse than before this rule existed.
+
+     With two dark schemes and two light ones that exclusion is a 2×2 product,
+     so it is written with nested `:where()` groups rather than four spelled-out
+     descendant pairs. `:where()` contributes zero specificity and the whole
+     thing already sits inside a zero-specificity `:not(:where(…))`, so the
+     grouped form is exactly equivalent to the enumeration — just not four times
+     as long.
+
+   The library ships no `dark:` variants of its own, so this is consumer-facing
+   only. */
 @custom-variant dark {
-  &:where([data-theme="dark"], [data-theme="dark"] *) {
+  &:where(
+      [data-theme="dark"],
+      [data-theme="dark"] *,
+      [data-theme="high-contrast-dark"],
+      [data-theme="high-contrast-dark"] *
+    ):not(
+      :where(
+        :where([data-theme="dark"], [data-theme="high-contrast-dark"])
+          :where([data-theme="light"], [data-theme="high-contrast"]),
+        :where([data-theme="dark"], [data-theme="high-contrast-dark"])
+          :where([data-theme="light"], [data-theme="high-contrast"]) *
+      )
+    ) {
     @slot;
   }
   @media (prefers-color-scheme: dark) {
     &:where(
       :root:not([data-theme="light"]):not([data-theme="high-contrast"]),
       :root:not([data-theme="light"]):not([data-theme="high-contrast"]) *
-    ) {
+    ):not(
+        :where(
+          [data-theme="light"],
+          [data-theme="light"] *,
+          [data-theme="high-contrast"],
+          [data-theme="high-contrast"] *
+        )
+      ) {
       @slot;
     }
   }
@@ -54,8 +116,25 @@
 /* Semantic token definitions */
 @import "./_semantic.css";
 
-/* Theme overrides */
+/* Theme overrides.
+   `_high-contrast.css` must stay LAST of the four, and every other scheme file
+   before it. Each scheme's own block is a bare `[data-theme=…]` at specificity
+   0,1,0, and `_high-contrast.css`'s `@media (forced-colors: active)` list
+   names all four of them at that same 0,1,0 — so source order is the only
+   tie-breaker and the forced-colors remap has to come last to win. That is why
+   `_light.css` leads and why `_high-contrast-dark.css` sits above
+   `_high-contrast.css` rather than below it.
+
+   Between the first three the order is grouping, not cascade: `[data-theme]`
+   values are matched exactly, so no two scheme blocks can ever apply to the
+   same element. `_high-contrast-dark.css` sits next to `_dark.css` because it
+   is the dark family's contrast variant, and because `_dark.css`'s
+   `prefers-color-scheme` branch has to exclude it by name — that branch is
+   0,4,0 and would otherwise outrank it. See the header of
+   `_high-contrast-dark.css`. */
+@import "./_light.css";
 @import "./_dark.css";
+@import "./_high-contrast-dark.css";
 @import "./_high-contrast.css";
 
 /* Base/reset */

package/types/cdevhub-ngx-tw-accordion.d.ts

@@ -4,7 +4,13 @@ import { CollapsibleGroupComponent } from '@cdevhub/ngx-tw/collapsible';
 /** Open mode of the accordion. */
 type AccordionType = 'single' | 'multiple';
 /** Visual style of the accordion container. */
-type AccordionVariant = 'default' | 'bordered' | 'ghost';
+type AccordionVariant = 'default' | 'outline' | 'ghost' | AccordionVariantLegacy;
+/**
+ * Legacy `variant` spellings, kept so existing templates keep compiling.
+ * @deprecated `'bordered'` is an alias for `'outline'` and renders identically.
+ * It will be removed in the next major — prefer `'outline'`.
+ */
+type AccordionVariantLegacy = 'bordered';
 /**
  * Accordion — single- or multiple-open-panel group built on top of
  * `<tw-collapsible>` children. Extends `CollapsibleGroupComponent` to inherit
@@ -24,16 +30,18 @@ type AccordionVariant = 'default' | 'bordered' | 'ghost';
 declare class AccordionComponent extends CollapsibleGroupComponent {
     /** Open mode. `'single'` allows one panel open at a time; `'multiple'` allows many. Defaults to `'single'`. */
     readonly type: _angular_core.InputSignal<AccordionType>;
-    /** Visual style of the accordion container. Defaults to `'default'`. */
+    /** Visual style of the accordion container. Defaults to `'default'`. `'bordered'` is a deprecated alias for `'outline'` and renders identically. */
     readonly variant: _angular_core.InputSignal<AccordionVariant>;
     /** In `'single'` mode, whether re-clicking the open panel closes it. Defaults to `true` — accordions are collapsible by definition; opt-out only. */
     readonly collapsible: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    /** Accessible name for the accordion. Use when surrounding context doesn't make the purpose obvious. */
+    /** Accessible name for the accordion. Use when surrounding context doesn't make the purpose obvious. Defaults to `undefined`. Alias: `aria-label`. */
     readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
-    /** ID(s) of element(s) that label the accordion. Use instead of `aria-label` when a visible heading is available. */
+    /** ID(s) of element(s) that label the accordion. Use instead of `aria-label` when a visible heading is available. Defaults to `undefined`. Alias: `aria-labelledby`. */
     readonly ariaLabelledby: _angular_core.InputSignal<string | undefined>;
     /** @internal APG: accordions don't carry `role="group"`. */
     readonly hostRole: _angular_core.Signal<string | null>;
+    /** @internal Canonical variant with legacy spellings folded in. */
+    private readonly resolvedVariant;
     /** @internal Variant-driven container classes; replaces the parent's default group string. */
     readonly hostClasses: _angular_core.Signal<string>;
     /** @internal Drive single-open-panel behaviour from `type`, ignoring the inherited `accordion` input. */

package/types/cdevhub-ngx-tw-avatar.d.ts

@@ -17,6 +17,13 @@ interface AvatarAppearance {
  * Injection token used by `AvatarGroupComponent` to propagate its size
  * to child avatars. When present, overrides the individual avatar's `size` input.
  */
+declare const TW_AVATAR_GROUP_SIZE: InjectionToken<() => TwSize>;
+/**
+ * @deprecated Renamed to {@link TW_AVATAR_GROUP_SIZE} for consistency with every
+ * other ngx-tw injection token. This is the *same token instance*, not a copy —
+ * providing under either name and injecting under the other resolves — so the
+ * rename is safe to adopt incrementally. Removed in the next major.
+ */
 declare const AVATAR_GROUP_SIZE: InjectionToken<() => TwSize>;
 declare class AvatarComponent {
     /** URL of the avatar image. When set, renders an `<img>`. Falls back to initials or projected content on load error. Defaults to `null`. */
@@ -64,7 +71,7 @@ declare class AvatarGroupComponent {
     readonly size: _angular_core.InputSignal<TwSize>;
     /** Maximum number of avatars to display. Remaining count is shown as a "+N" overflow indicator. Defaults to `null` (show all). */
     readonly max: _angular_core.InputSignal<number | null>;
-    /** Accessible label for the avatar group. Defaults to `'Avatar group'` (English) — override for localisation. */
+    /** Accessible label for the avatar group, mirrored to `aria-label`. Defaults to `'Avatar group'` (English) — override for localisation. */
     readonly ariaLabel: _angular_core.InputSignal<string>;
     private readonly avatars;
     readonly overflowCount: _angular_core.Signal<number>;
@@ -72,8 +79,8 @@ declare class AvatarGroupComponent {
     readonly overflowClasses: _angular_core.Signal<string>;
     private readonly visibilityEffect;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AvatarGroupComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AvatarGroupComponent, "tw-avatar-group", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, ["avatars"], ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AvatarGroupComponent, "tw-avatar-group", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; }, {}, ["avatars"], ["*"], true, never>;
 }
 
-export { AVATAR_GROUP_SIZE, AvatarComponent, AvatarGroupComponent };
+export { AVATAR_GROUP_SIZE, AvatarComponent, AvatarGroupComponent, TW_AVATAR_GROUP_SIZE };
 export type { AvatarAppearance, AvatarRounded, AvatarStatus };

package/types/cdevhub-ngx-tw-button.d.ts

@@ -49,6 +49,7 @@ declare class ButtonDirective implements OnInit {
     readonly isNativeButton: _angular_core.Signal<boolean>;
     readonly classes: _angular_core.Signal<string>;
     ngOnInit(): void;
+    /** @internal Swallows clicks while the button is disabled or loading, so neither navigation nor consumer handlers run. */
     handleClick(event: MouseEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ButtonDirective, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ButtonDirective, "[twButton]", ["twButton"], { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;

package/types/cdevhub-ngx-tw-calendar-luxon.d.ts

@@ -20,7 +20,7 @@ interface TwLuxonDateFormat {
     readonly preset?: Intl.DateTimeFormatOptions;
 }
 /**
- * Luxon-backed `DateAdapter`. Honors the calendar's `TZ_OVERRIDE` injection
+ * Luxon-backed `DateAdapter`. Honors the calendar's `TW_TZ_OVERRIDE` injection
  * token so `today()` resolves against the consumer-configured timezone, and
  * implements the §20.2 TZ-aware virtuals (`getTimezone`, `withTimezone`,
  * `isDST`, `resolveAmbiguous`).
@@ -45,7 +45,7 @@ declare class LuxonDateAdapter extends DateAdapter<DateTime> {
     private get locale();
     /**
      * Returns the configured timezone for new dates. Precedence: per-instance
-     * `TZ_OVERRIDE` → Luxon's `Settings.defaultZone` → `'local'`.
+     * `TW_TZ_OVERRIDE` → Luxon's `Settings.defaultZone` → `'local'`.
      */
     private get zone();
     /** Builds a `DateTime` in the adapter's configured zone + locale. */

package/types/cdevhub-ngx-tw-calendar-testing.d.ts

@@ -19,7 +19,7 @@ declare class CalendarCellHarness extends ComponentHarness {
     getText(): Promise<string>;
     /** The cell's `aria-label`. */
     getAriaLabel(): Promise<string | null>;
-    /** Whether the cell carries `aria-selected="true"`. */
+    /** Whether the cell carries `aria-selected="true"`. Read from the `role="gridcell"` host, which is the element that carries selection state — a `<button>`'s implicit role does not support `aria-selected`. */
     isSelected(): Promise<boolean>;
     /** Whether the cell is disabled — true if the button has `disabled` or carries `aria-disabled="true"`. */
     isDisabled(): Promise<boolean>;