@kouji-ui/core 0.1.1 → 0.1.2

package/.turbo/turbo-build.log

@@ -1,30 +0,0 @@
-
-> @kouji-ui/core@0.1.1 build /home/runner/work/kouji-ui/kouji-ui/packages/core
-> ng-packagr -p ng-package.json -c tsconfig.lib.prod.json
-
-Building Angular Package
-
-------------------------------------------------------------------------------
-Building entry point '@kouji-ui/core'
-------------------------------------------------------------------------------
-- Compiling with Angular sources in partial compilation mode.
-✔ Compiling with Angular sources in partial compilation mode.
-✔ Generating FESM and DTS bundles
-- Copying assets
-✔ Copying assets
-- Writing package manifest
-WARNING: Found a conflicting export condition for "./package.json". The "default" condition would be overridden by ng-packagr. Please unset it.
-WARNING: Found a conflicting export condition for ".". The "types" condition would be overridden by ng-packagr. Please unset it.
-WARNING: Found a conflicting export condition for ".". The "default" condition would be overridden by ng-packagr. Please unset it.
-ℹ Removing scripts section in package.json as it's considered a potential security vulnerability.
-✔ Writing package manifest
-✔ Built @kouji-ui/core
-
-------------------------------------------------------------------------------
-Built Angular Package
-- from: /home/runner/work/kouji-ui/kouji-ui/packages/core
-- to:   /home/runner/work/kouji-ui/kouji-ui/dist/kj-core
-------------------------------------------------------------------------------
-
-Build at: 2026-07-03T12:29:59.171Z - Time: 14974ms
-

package/CHANGELOG.md

@@ -1,190 +0,0 @@
-# @kouji-ui/core
-
-## 0.1.1
-
-### Major Changes
-
-- ec17a49: Upgrade to Angular 22. Peer dependency ranges for `@angular/core`, `@angular/common`, and `@angular/cdk` now require `^22.0.0` (was `^21.0.0`) — consumers must upgrade to Angular 22 to use this version.
-
-  Internal changes as part of the upgrade:
-  - `KjSpeedDial`, `KjPagination`, and `KjCombobox`'s two-way-bindable inputs (`kjOpen`, `kjPage`, `kjQuery`) now use `input()` + `linkedSignal()` instead of `model()`, to avoid colliding with their paired convenience outputs under Angular 22's stricter duplicate-output check. Public API is unchanged.
-  - `packages/core`'s build now passes `-c tsconfig.lib.prod.json` explicitly to `ng-packagr`, fixing a silent fallback to an internal `es2018` lib default that broke `Intl`/`Array.prototype.at` typings.
-
-  Known issue: a subset of overlay-based components (confirm-popup, drawer, popover, date-picker, and others using the shared overlay `attachComponent()` primitive) hit `NG0950` (required input not available) under Angular 22's stricter dynamic-component input timing. Tracked as follow-up work, not fixed in this release.
-
-### Minor Changes
-
-- 658554d: Add leading dot indicator to badge (superset, additive).
-  - core: `[kjBadge]` gains `kjBadgeDot` input reflecting a `data-dot` attribute; defaults off, existing consumers unaffected.
-  - components: `<kj-badge>` gains `dot` input rendering a `::before` indicator, themeable via `--kj-badge-dot-size` and `--kj-badge-dot-color` (defaults to `currentColor`).
-
-- be6386d: Data-table polish: server-mode pagination, virtualization fix, inline-edit overlay, xs pagination tier.
-  - `KjTable` (core): dedupe identity-only slice patches; expose
-    `setRowCount` / `manualPagination` so resource-backed tables report the
-    full remote total instead of just the visible page.
-  - `KjSelect` / `KjSelectTrigger` (core): trigger registers its element
-    with the parent at construction time. `KjSelect.focus()` delegates to
-    the registered trigger — no view-query timing dance for consumers.
-  - `KjTableComponent`: virtualization reads pre-pagination rows (10k rows
-    scroll correctly); inline editors mount as `position: absolute` overlays
-    with a hidden ghost preserving column width; column meta (`selectOptions`)
-    forwarded to dynamically-mounted editors via the cell-editor outlet.
-  - `KjTablePaginationComponent`: three-column footer (page size · summary ·
-    nav), `space-between` nav cluster, full `xs | sm | md | lg` size tier
-    forwarded to the boundary buttons.
-  - `KjPagination`: `xs` registered in `KJ_PAGINATION_DEFAULTS.sizes` + CSS.
-  - `KjSelectComponent` / `KjInputComponent` / `KjNumberInputComponent`:
-    public `focus()` methods, no DOM querying.
-  - Renamed `KjCellEditorOutlet` output `cancel` → `editCancel` to avoid
-    the DOM-event collision flagged by angular-eslint.
-  - `kjTableVirtual` directive selector + exportAs lowercased for the `kj`
-    prefix rule.
-
-### Patch Changes
-
-- d2150ee: fix(signals): widen `nonRecords` constructor type to accept native builtins (WeakSet/WeakMap/Promise/Error/RegExp/DataView/Function) — pure type-level change, no runtime behavior change.
-
-## 0.0.6
-
-### Patch Changes
-
-- 625e81a: Add three new themes: `retro`, `cyberpunk`, `corporate`.
-  - **retro** — warm cream surfaces with terracotta + sand accents, soft rounding (vintage paper feel).
-  - **cyberpunk** — hot yellow base with magenta/cyan accents, hard edges and mono type.
-  - **corporate** — clean white surfaces, blue primary, subtle rounding (calm, business-ready).
-
-  Each theme defines every required shared-layer token, verified by the contract test in `themes.spec.ts`. Activate via `data-theme="retro"` (or `cyberpunk` / `corporate`) on the `<html>` element.
-
-- 9acdb07: Add Wave 2 Batch 8 components plus cross-cutting fixes and version bump to 0.0.5.
-
-  ## New components in `@kouji-ui/core` + `@kouji-ui/components`
-
-  **Data input**
-  - `<kj-input-group>` + `<kj-input-group-addon>` — flex addon wrapper joining inputs with prefix/suffix addons into a single visually-unified field with `aria-labelledby` composition
-  - `<kj-input-mask>` — fixed-format input (phone, card, date, custom token alphabet) with built-in `NG_VALIDATORS` mask error
-  - `<kj-input-otp>` — N-cell one-time-code input with auto-advance, paste distribution, and `KjLiveRegion` completion announcement
-  - `<kj-cascade-select>` + `<kj-cascade-option>` + `<kj-cascade-sub-panel>` — hierarchical flyout-chain picker composing `KjSelect`
-  - `<kj-tree-select>` + `<kj-tree-select-node>` — flat-rendered hierarchical dropdown with single and multi-select modes
-
-  **Actions**
-  - `<kj-command-palette>` + `<kj-command-item>` + `<kj-command-group>` + `<kj-command-input>` + `<kj-command-separator>` + `<kj-command-empty>` — full combobox-with-listbox command palette with substring and fuzzy filters and `[kjCommandPaletteHotkey]` global Cmd-K listener.
-    Modal-by-default API: `[(kjOpen)]` 2-way binding, `[kjHotkey]` opt-in keyboard chord, `[kjItems]` + `<ng-template kjCommandPaletteItemTemplate let-item>` for templated item lists (with `<kj-command-item>` projection still supported as a fallback). Built-in backdrop, centered dialog, fade/slide animations, ESC + backdrop-click to close, auto-focus input on open, default keyboard-hint footer with `[kjCommandPaletteFooter]` slot for override.
-
-  ## Fixes
-  - **`<kj-input>` CVA** — `KjInputComponent` now implements `ControlValueAccessor` so `[(ngModel)]` and `[formControl]` work directly on `<kj-input>`
-  - **Input group visual parity** — addon background, line-height, and border-width now match `<kj-input>`; removed wrapper `overflow: hidden` that was clipping the input's focus outline
-  - **Command palette CSS** — replaced hardcoded light-mode colors with theme tokens (`--kj-color-base-100/300`, `--kj-color-neutral`, `--kj-color-primary`, `--kj-font-mono`) and added modal-shell, backdrop, and animation styles
-  - **Cascade select / Input group CSS** — fixed `var(--kj-border)` → `1px` so borders render in all themes
-  - **Docs search** — refactored to use `<kj-command-palette>` with `[kjItems]` + `kjCommandPaletteItemTemplate` instead of bespoke palette markup; backdrop, animations, and Cmd-K wiring now come from the wrapper
-  - **Page TOC** — `overflow-x: hidden` on `.toc-col`, removed `min-width` on `.toc-nav`, dropped `max-height` so the column can grow to full page height
-  - **Input group examples** — updated to use `<kj-input>` component instead of bare `[kjInput]` directive, consistent with components-layer convention
-  - **E2E coverage** — new Playwright specs verifying input-group visual parity and command-palette modal flow + Ctrl/Cmd+K hotkey
-
-- 58b3b98: Fix command palette ArrowUp/Down: stop resetting highlight when async results update the list; resolve item values dynamically for stable activation.
-- f93e535: Expand `@kouji-ui/components` from 5 wrappers to 16, with code+preview docs and daisyUI-style sidebar grouping.
-
-  **New components** (each ships multiple `@doc-example` panels):
-  - **Actions** — `<kj-button>` (variants/sizes/disabled examples), `<kj-dialog>` with `<kj-dialog-overlay>`/`<kj-dialog-header>`/`<kj-dialog-title>`/`<kj-dialog-body>`/`<kj-dialog-footer>` slots
-  - **Data input** — `<kj-checkbox>`, `<kj-radio-group>` + `<kj-radio>`, `<kj-select>` + `<kj-option>`, `<kj-toggle>` (each projects label content; `disabled` dims the entire control)
-  - **Data display** — `<kj-accordion>` + `<kj-accordion-item>` (label-input shorthand) + `<kj-accordion-trigger>` + `<kj-accordion-content>`, `<kj-avatar>` (with `src`/`alt`/`content` inputs), `<kj-badge>`, plus `<kj-card>` upgraded to ant-design / PrimeNG-style sub-components (`<kj-card-cover>` with `size`/`fit` inputs, `<kj-card-header>`, `<kj-card-title>`, `<kj-card-subtitle>`, `<kj-card-content>`, `<kj-card-footer>`)
-  - **Navigation** — `<kj-menu>` + `<kj-menu-trigger>`/`<kj-menu-content>`/`<kj-menu-item>`, `<kj-tabs>` + `<kj-tab>` (flat config-element API with `id`, `label`, `disabled` inputs)
-  - **Feedback** — `<kj-toast-viewport>` + `<kj-toast>` + `<kj-toast-close>` (templated render, driven by `KjToastService`)
-
-  **Public API additions on existing wrappers**:
-  - `<kj-button>` gains `type` (button/submit/reset) and `ariaLabel` inputs.
-  - `<kj-radio>` and `<kj-checkbox>` project content as their own label and wire `aria-labelledby` for the role-bearing element (fixes axe-core `aria-toggle-field-name` violations).
-  - `<kj-avatar>` mirrors `alt` to a host `title` attribute for native hover tooltip.
-
-  **Theming**:
-  - Each shipped theme now declares `--kj-color-primary-hover` and `--kj-color-destructive-hover` so filled-button hover uses a brand-correct shade. `light`/`dark`/`corporate`/`retro`/`cyberpunk` define values; `kouji` keeps its existing component-layer brightening override. The button stylesheet falls back to a base-content color-mix when the token isn't defined, so consumer themes don't break.
-  - `base.css` gains `blue-700`, `red-400`, and `red-600` shades that the new hover tokens reference.
-
-  **Categorization**:
-  - The docs extractor adds the daisyUI-style category union (`actions` / `data-input` / `data-display` / `navigation` / `feedback`) for the components track. The core track keeps its existing categories.
-  - Manifest dev-watcher now invalidates on `packages/components/src` changes too.
-
-- 51422f1: Use `forwardRef` for the self-referential `KJ_ROVING_TABINDEX` provider on `KjRovingTabindex`. Behavior is unchanged in normal Angular builds (the compiler already handles the self-reference); this prevents a temporal-dead-zone error when the file is loaded by tooling that runs the raw decorator metadata (e.g. Playwright's TS loader sweeping spec files).
-- 2484383: Add `@kouji-ui/core/icon` — provider-agnostic icon layer:
-  - `KjIconDirective` (`[span,i][kjIcon]`) renders icons via CSS custom
-    properties (`--kj-icon` + `mask-image` for svg, `content` for font).
-  - `provideIcons` / `provideIconResolver` / `provideIconLoader` for
-    registering icon sets, sync URL synthesis, or async loaders.
-  - `injectKjIconResolver()` exposes the unified resolver in injection
-    contexts.
-  - `KJ_ICON_REGISTRY` / `KJ_ICON_RESOLVER` / `KJ_ICON_LOADER` /
-    `KJ_ICON_CSS_PATH` tokens published.
-  - Stylesheet shipped at `@kouji-ui/core/icon/icon.css` with mask-image
-    rendering for monochrome SVG and `content` for font glyphs.
-
-- 4b7487f: Restore nullable input types on component wrappers (kjValue, kjMin, kjMax, kjReferenceDate, etc.) to match the headless directives' contracts. Sentinel-default approach was producing broken 2-way binding chains and incorrect runtime behaviour on null. Time-picker core now caches a stable per-instance reference Date so `serialise()` doesn't churn new Date() on every commit.
-- 8406d0f: Finalize the listbox-primitives migration for cascade-select, tree-select, menubar, and combobox.
-
-  **`@kouji-ui/core`**
-  - `KjSelectionModel` now receives its source signals via a `bind()` call from the consumer root (replacing the older inject-the-config pattern). The model auto-derives a tree shape from each `KjListItem`'s parent DI pointer when the consumer doesn't supply one explicitly — DOM-nested clusters (cascade-select, sub-menus) are tree-aware out of the box. `'single'` mode now respects the shape and blocks branch commits at the model layer.
-  - `KjListItem` exposes a `parent` reference (nearest ancestor `KjListItem` via `skipSelf` element-injector lookup) and gates activation through `KjSelectionModel.canActivate(value)` — branch options serve purely as disclosure controls without leaking values.
-  - `KjCascadeSelectOption` migrates to mode `'single'` (was `'leaf'`) for a clean string value rather than an array; aliases `KjListItem` inputs as `kjValue`/`kjLabel`/`kjDisabled` (was `kjOptionValue`/`kjOptionLabel`/`kjDisabled`) to match `KjTreeSelectNode`'s convention. Branch detection switched from imperative `_registerSubPanel()` to a `contentChildren(KjCascadeSelectSubPanel)` query.
-  - `KjCascadeSelect` removes the required `kjTreeShape` input — the consumer-supplied shape is optional now (defaults to the auto-derived one). Path derivation moves to `KjSelectionModel.pathTo()`.
-  - `KjMenubarItem` gains a `kjActivate` output (bridged from `KjListItem.activate`) and now early-returns from its open/close toggle when `kjDropdownMenuTriggerFor` is unset, so a sibling `[kjDropdownMenuTrigger]` on the same element can own the overlay state without the item's toggle handler closing the dropdown that just opened (the two directives share a single per-element `KjOverlayController`).
-
-  **`@kouji-ui/components`**
-  - `KjCascadeOptionComponent` now extends `KjCascadeSelectOption` directly and registers itself under the directive's token via `useExisting` so projected sub-panels resolve their parent option through normal element-injector DI. This works around Angular 21's NG2017 rule (chained hostDirective alias forwarding is forbidden) while keeping the markup-driven recursive API.
-  - Cascade-option public inputs renamed to `kjValue`/`kjLabel`/`kjDisabled` to match tree-select-node and the new core aliases.
-  - `kj-menubar-item` wrapper forwards the new `(kjActivate)` output.
-  - Menubar examples rewritten (the previous files were placeholders): `default`, `disabled-item`, `with-shortcuts` (composes `<kj-kbd>`), `with-submenu` (uses the standard `kjDropdownMenuTrigger` + `<kj-dropdown-menu-content [kjFor]>` idiom).
-  - Dropdown-menu playground gains a "Last selected" readout wired through `(kjSelect)` on each item; menubar playground gets the same readout wired through the new `(kjActivate)`.
-  - `kj-option` (select) selected-state styling now uses a tinted primary token (`color-mix(in oklab, var(--kj-bg-primary) 12%, transparent)` + `var(--kj-fg-primary)` + `font-weight: 600`), mirroring `kj-tree-select-node` so the listbox family stays visually consistent across themes.
-  - New `packages/components/src/overlay/` aggregator stylesheet so consumers register a single overlay CSS entry rather than per-component overlays in `angular.json`.
-
-- 2484383: Overlay primitive refactor and select-family alignment.
-
-  **`@kouji-ui/core`**
-  - New overlay primitives layer: `KjOverlayController`, `KjOverlayPanel`, `KjOverlayTrigger`, `KjOverlayBuilder`, `KjOverlayHandle`, `KjOverlayWrapper`, `KjOverlayContainer`, `KjOverlayStack`. Strategies (`mount`, `position`, `backdrop`, `focus-trap`, `scroll-lock`, `trigger-event`) compose into per-overlay configs (`inPlace()` for service-launched, `bodyPortal()` for declarative).
-  - `select`, `tree-select`, `combobox`, and `cascade-select` all follow the same root-controller pattern: a single `[kjXxx]` root directive provides `KjOverlayController` and owns selection state; trigger no longer self-provides; consumer-action methods call `controller.close()` directly (no signal indirection).
-  - Cascade-select adds dedicated branch sub-panels with `position: fixed` so they escape the root panel's `overflow: auto`. Branch detection uses `contentChildren` (declaration tree) — no DOM querying.
-  - Tree-select splits into root + per-node directives.
-  - Re-entrancy guards on `open()` / `close()` / `toggle()`. Outside-click flicker fixed by hiding the panel synchronously in the rAF before strategy cleanup.
-
-  **`@kouji-ui/components`**
-  - Cascade-select wrapper composes the new root via `hostDirectives` (`kjValue`, `kjCascadePath`).
-  - Confirm-popup, dialog, drawer, popover, tooltip, dropdown-menu, and toast JSDoc `@category` regrouped under `Library/Overlay` and `Core/Overlay` for the docs sidebar.
-
-- a485472: - `<kj-select>` now exposes `[multiple]`, forwarding to the underlying
-  `KjSelectTrigger`'s `kjMultiple` input. The wrapper's display label
-  joins array values into a comma-separated list when multi mode is
-  on (placeholder shown when empty). Fills the gap that previously
-  required dropping to the headless directives for multi-select.
-  - `KjTimePickerSegment` reflect-effect now guards the `document`
-    reference so server-side rendering no longer throws
-    `ReferenceError: document is not defined` while pre-rendering the
-    time-picker.
-- 884c5a1: Prerender/SSR: avoid `document` ReferenceError in time-picker segment and calendar day (browser guard + `inject(DOCUMENT)` for `activeElement`).
-- a015b14: Theme generator (docs app): accessibility tooling and configurator-related updates in components/core — `@docCategory` on directives, tag `xs` size, tooltip `[hidden]` guard, calendar SSR guard, overlay/command-palette/browser DOM safety.
-- 7f95f75: `kj-input` now supports `type="color"` and a new `value` input that forwards to the underlying native input via property binding. Includes a `data-type` host attribute (mirrors `type`) and a small built-in style normalization for color swatches (44×32px). Existing `type` values and form-control bindings continue to work unchanged.
-
-  Core fix in `kjInput`: the directive's CVA-to-DOM reflection now skips writing when the form control's value is null/undefined, so external `[value]` bindings work for non-form usage. Form-bound usage is unchanged (callers clear via `setValue('')`).
-
-  These changes power the new in-app theme generator at `/theme-generator` in the docs site — fork built-in themes, edit colors with the native picker, tweak shape/font/motion controls, save multiple drafts to localStorage, export as CSS or JSON, import JSON back.
-
-- 1968274: Workspace resolution metadata: `@kouji-ui/core`'s `package.json` now declares `module`, `typings`, `exports`, and `type: "module"` so other workspace packages (`@kouji-ui/components`, future packages) can resolve `@kouji-ui/core` via Node module resolution after `ng build kj-core` runs. Workspace-only paths point at `../../dist/kj-core/...`; a `publishConfig` override rewrites them to in-package paths (`./fesm2022/...`, `./types/...`) for the published npm artifact, so consumers see the same shape as before.
-
-  No public API change. Pure infrastructure for the upcoming `@kouji-ui/components` package (Wave 0 of the themes & components architecture).
-
-## 0.0.4
-
-### Patch Changes
-
-- 202d9de: CI fix: husky pre-push hook now skips in CI environments (`$CI` or `$GITHUB_ACTIONS` set). Prevents the Changesets action's automated push from being blocked by the changeset-status gate. No runtime effect on the published package.
-- dc0fe0f: Test-only fix: rewrite `KjToastService` test suite to use `TestBed.inject()` so `inject(KJ_TOAST_STRATEGY)` resolves through Angular DI (was crashing with `new KjToastService()` outside an injection context). No runtime change.
-- d6b40e1: Internal lint cleanup — replace `any` casts in select option storage with typed `HTMLElement & { __kjOptionValue?: unknown }` and convert ternary statement to if/else in overlay toggle. No public API or behavior change.
-
-## 0.0.3
-
-### Patch Changes
-
-- c177d1e: Rewrite README with real install/usage docs, primitive index, and design principles. Replaces the Angular CLI scaffold placeholder.
-
-## 0.0.2
-
-### Patch Changes
-
-- 1813d21: Initial publish — headless Angular 21 UI primitives over CDK with WCAG 2.1 AAA semantics and zero CSS.

package/ng-package.json

@@ -1,11 +0,0 @@
-{
-  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
-  "dest": "../../dist/kj-core",
-  "lib": {
-    "entryFile": "src/public-api.ts"
-  },
-  "assets": [
-    { "input": "src/typography", "glob": "prose.css", "output": "typography" },
-    { "input": "src/icon", "glob": "icon.css", "output": "icon" }
-  ]
-}

package/src/a11y/aria-describedby.spec.ts

@@ -1,55 +0,0 @@
-import { render } from '@testing-library/angular';
-import { axe, toHaveNoViolations } from 'jest-axe';
-import { KjAriaDescribedBy } from './aria-describedby';
-
-expect.extend(toHaveNoViolations);
-
-describe('KjAriaDescribedBy', () => {
-  it('sets aria-describedby from a single id string', async () => {
-    const { container } = await render(
-      `<input kjAriaDescribedBy [kjDescribedBy]="'hint-1'" />
-       <span id="hint-1">This is a hint</span>`,
-      { imports: [KjAriaDescribedBy] },
-    );
-    expect(container.querySelector('input')).toHaveAttribute('aria-describedby', 'hint-1');
-  });
-
-  it('sets aria-describedby from multiple ids', async () => {
-    const { container } = await render(
-      `<input kjAriaDescribedBy [kjDescribedBy]="['hint-1', 'error-1']" />
-       <span id="hint-1">Hint</span>
-       <span id="error-1">Error</span>`,
-      { imports: [KjAriaDescribedBy] },
-    );
-    expect(container.querySelector('input')).toHaveAttribute(
-      'aria-describedby',
-      'hint-1 error-1',
-    );
-  });
-
-  it('removes aria-describedby when given empty array', async () => {
-    const { container } = await render(
-      `<input kjAriaDescribedBy [kjDescribedBy]="[]" />`,
-      { imports: [KjAriaDescribedBy] },
-    );
-    expect(container.querySelector('input')).not.toHaveAttribute('aria-describedby');
-  });
-
-  it('removes aria-describedby when given empty string', async () => {
-    const { container } = await render(
-      `<input kjAriaDescribedBy [kjDescribedBy]="''" />`,
-      { imports: [KjAriaDescribedBy] },
-    );
-    expect(container.querySelector('input')).not.toHaveAttribute('aria-describedby');
-  });
-
-  it('passes axe accessibility audit', async () => {
-    const { container } = await render(
-      `<label for="f">Name</label>
-       <input id="f" kjAriaDescribedBy [kjDescribedBy]="'hint'" />
-       <span id="hint">Enter your full name</span>`,
-      { imports: [KjAriaDescribedBy] },
-    );
-    expect(await axe(container)).toHaveNoViolations();
-  });
-});

package/src/a11y/aria-describedby.ts

@@ -1,37 +0,0 @@
-import { Directive, computed, input } from '@angular/core';
-
-/**
- * Wires `aria-describedby` to one or more element IDs.
- * Accepts a single ID string or an array of ID strings.
- * Removes the attribute automatically when the value is empty.
- *
- * @example
- * ```html
- * <input kjAriaDescribedBy [kjDescribedBy]="['hint-id', errorId()]" />
- * <span id="hint-id">Format: DD/MM/YYYY</span>
- * ```
- * @doc-category Core/Accessibility
- * @doc
- * @doc-name a11y
- * @doc-description Wires `aria-describedby` from a single id or an array of ids onto any element.
- * @doc-is-main
- */
-@Directive({
-  selector: '[kjAriaDescribedBy]',
-  standalone: true,
-  host: {
-    '[attr.aria-describedby]': 'ariaDescribedBy()',
-  },
-})
-export class KjAriaDescribedBy {
-  /** One or more element IDs to reference via `aria-describedby`. */
-  kjDescribedBy = input<string | readonly string[]>('');
-
-  /** @internal */
-  readonly ariaDescribedBy = computed(() => {
-    const val = this.kjDescribedBy();
-    const ids = Array.isArray(val) ? val : [val];
-    const filtered = ids.filter(Boolean);
-    return filtered.length ? filtered.join(' ') : null;
-  });
-}

package/src/a11y/aria-labelledby.spec.ts

@@ -1,55 +0,0 @@
-import { render } from '@testing-library/angular';
-import { axe, toHaveNoViolations } from 'jest-axe';
-import { KjAriaLabelledBy } from './aria-labelledby';
-
-expect.extend(toHaveNoViolations);
-
-describe('KjAriaLabelledBy', () => {
-  it('sets aria-labelledby from a single id string', async () => {
-    const { container } = await render(
-      `<section kjAriaLabelledBy [kjLabelledBy]="'h-1'">
-         <h2 id="h-1">Features</h2>
-       </section>`,
-      { imports: [KjAriaLabelledBy] },
-    );
-    expect(container.querySelector('section')).toHaveAttribute('aria-labelledby', 'h-1');
-  });
-
-  it('sets aria-labelledby from multiple ids', async () => {
-    const { container } = await render(
-      `<section kjAriaLabelledBy [kjLabelledBy]="['h-1', 'h-2']">
-         <h2 id="h-1">A</h2>
-         <h2 id="h-2">B</h2>
-       </section>`,
-      { imports: [KjAriaLabelledBy] },
-    );
-    expect(container.querySelector('section')).toHaveAttribute('aria-labelledby', 'h-1 h-2');
-  });
-
-  it('removes aria-labelledby when given empty array', async () => {
-    const { container } = await render(
-      `<section kjAriaLabelledBy [kjLabelledBy]="[]"></section>`,
-      { imports: [KjAriaLabelledBy] },
-    );
-    expect(container.querySelector('section')).not.toHaveAttribute('aria-labelledby');
-  });
-
-  it('removes aria-labelledby when given empty string', async () => {
-    const { container } = await render(
-      `<section kjAriaLabelledBy [kjLabelledBy]="''"></section>`,
-      { imports: [KjAriaLabelledBy] },
-    );
-    expect(container.querySelector('section')).not.toHaveAttribute('aria-labelledby');
-  });
-
-  it('passes axe accessibility audit', async () => {
-    const { container } = await render(
-      `<section kjAriaLabelledBy [kjLabelledBy]="'h-1'">
-         <h2 id="h-1">Features</h2>
-         <p>Stuff</p>
-       </section>`,
-      { imports: [KjAriaLabelledBy] },
-    );
-    expect(await axe(container)).toHaveNoViolations();
-  });
-});

package/src/a11y/aria-labelledby.ts

@@ -1,38 +0,0 @@
-import { Directive, computed, input } from '@angular/core';
-
-/**
- * Wires `aria-labelledby` to one or more element IDs.
- * Accepts a single ID string or an array of ID strings.
- * Removes the attribute automatically when the value is empty.
- *
- * @example
- * ```html
- * <section kjAriaLabelledBy [kjLabelledBy]="'features-heading'">
- *   <h2 id="features-heading">Features</h2>
- *   …
- * </section>
- * ```
- * @doc-category Core/Accessibility
- * @doc
- * @doc-name a11y
- * @doc-description Wires `aria-labelledby` from a single id or an array of ids onto any element.
- */
-@Directive({
-  selector: '[kjAriaLabelledBy]',
-  standalone: true,
-  host: {
-    '[attr.aria-labelledby]': 'ariaLabelledBy()',
-  },
-})
-export class KjAriaLabelledBy {
-  /** One or more element IDs to reference via `aria-labelledby`. */
-  kjLabelledBy = input<string | readonly string[]>('');
-
-  /** @internal */
-  readonly ariaLabelledBy = computed(() => {
-    const val = this.kjLabelledBy();
-    const ids = Array.isArray(val) ? val : [val];
-    const filtered = ids.filter(Boolean);
-    return filtered.length ? filtered.join(' ') : null;
-  });
-}

package/src/a11y/focus-trap.spec.ts

@@ -1,86 +0,0 @@
-import { render, fireEvent } from '@testing-library/angular';
-import { axe, toHaveNoViolations } from 'jest-axe';
-import { KjFocusTrap } from './focus-trap';
-
-expect.extend(toHaveNoViolations);
-
-describe('KjFocusTrap', () => {
-  it('renders without error when enabled', async () => {
-    const { container } = await render(
-      `<div kjFocusTrap [kjFocusTrapEnabled]="true">
-        <button>First</button>
-        <button>Last</button>
-      </div>`,
-      { imports: [KjFocusTrap] },
-    );
-    expect(container.querySelector('[kjFocusTrap]')).toBeInTheDocument();
-  });
-
-  it('renders without error when disabled', async () => {
-    const { container } = await render(
-      `<div kjFocusTrap [kjFocusTrapEnabled]="false">
-        <button>First</button>
-      </div>`,
-      { imports: [KjFocusTrap] },
-    );
-    expect(container.querySelector('[kjFocusTrap]')).toBeInTheDocument();
-  });
-
-  it('wraps focus from last to first on Tab when enabled', async () => {
-    const { container } = await render(
-      `<div kjFocusTrap [kjFocusTrapEnabled]="true">
-        <button>First</button>
-        <button>Last</button>
-      </div>`,
-      { imports: [KjFocusTrap] },
-    );
-    const buttons = container.querySelectorAll('button');
-    const last = buttons[buttons.length - 1] as HTMLElement;
-    last.focus();
-    fireEvent.keyDown(document, { key: 'Tab', shiftKey: false });
-    expect(document.activeElement).toBe(buttons[0]);
-  });
-
-  it('wraps focus from first to last on Shift+Tab when enabled', async () => {
-    const { container } = await render(
-      `<div kjFocusTrap [kjFocusTrapEnabled]="true">
-        <button>First</button>
-        <button>Last</button>
-      </div>`,
-      { imports: [KjFocusTrap] },
-    );
-    const buttons = container.querySelectorAll('button');
-    const first = buttons[0] as HTMLElement;
-    first.focus();
-    fireEvent.keyDown(document, { key: 'Tab', shiftKey: true });
-    expect(document.activeElement).toBe(buttons[buttons.length - 1]);
-  });
-
-  it('does not trap focus when disabled', async () => {
-    const { container } = await render(
-      `<div kjFocusTrap [kjFocusTrapEnabled]="false">
-        <button>First</button>
-        <button>Last</button>
-      </div>`,
-      { imports: [KjFocusTrap] },
-    );
-    const buttons = container.querySelectorAll('button');
-    const last = buttons[buttons.length - 1] as HTMLElement;
-    last.focus();
-    // Tab should not redirect focus — no focus change from the handler.
-    const activeBeforeTab = document.activeElement;
-    fireEvent.keyDown(document, { key: 'Tab', shiftKey: false });
-    // When disabled, the handler does nothing, so focus stays on last.
-    expect(document.activeElement).toBe(activeBeforeTab);
-  });
-
-  it('passes axe accessibility audit', async () => {
-    const { container } = await render(
-      `<div role="dialog" aria-label="Test dialog" kjFocusTrap [kjFocusTrapEnabled]="true">
-        <button>Action</button>
-      </div>`,
-      { imports: [KjFocusTrap] },
-    );
-    expect(await axe(container)).toHaveNoViolations();
-  });
-});

package/src/a11y/focus-trap.ts

@@ -1,72 +0,0 @@
-import { Directive, DestroyRef, ElementRef, afterNextRender, inject, input } from '@angular/core';
-import { PLATFORM_ID } from '@angular/core';
-import { isPlatformBrowser } from '@angular/common';
-
-const FOCUSABLE = [
-  'a[href]', 'button:not([disabled])', 'input:not([disabled])',
-  'select:not([disabled])', 'textarea:not([disabled])',
-  '[tabindex]:not([tabindex="-1"])', '[contenteditable="true"]',
-].join(',');
-
-/**
- * Traps keyboard focus within the host element using a native Tab-key interceptor.
- * Designed for modal dialogs, drawers, and other overlay patterns.
- *
- * @example
- * ```html
- * <div role="dialog" kjFocusTrap [kjFocusTrapEnabled]="isOpen()">
- *   <button>Action</button>
- * </div>
- * ```
- * @doc-category Core/Accessibility
- * @doc
- * @doc-name a11y
- */
-@Directive({
-  selector: '[kjFocusTrap]',
-  standalone: true,
-})
-export class KjFocusTrap {
-  private readonly el = inject(ElementRef<HTMLElement>);
-  private readonly destroyRef = inject(DestroyRef);
-  private readonly platformId = inject(PLATFORM_ID);
-
-  /** Whether the focus trap is active. Set to true when the overlay is open. */
-  kjFocusTrapEnabled = input<boolean>(false);
-
-  constructor() {
-    afterNextRender(() => {
-      if (!isPlatformBrowser(this.platformId)) return;
-
-      const handleKeydown = (e: KeyboardEvent) => {
-        if (!this.kjFocusTrapEnabled() || e.key !== 'Tab') return;
-        const focusable = (Array.from(
-          this.el.nativeElement.querySelectorAll(FOCUSABLE)
-        ) as HTMLElement[]).filter(el => !el.closest('[hidden]') && getComputedStyle(el).display !== 'none');
-
-        if (!focusable.length) { e.preventDefault(); return; }
-        const first = focusable[0];
-        const last = focusable[focusable.length - 1];
-
-        if (e.shiftKey) {
-          if (document.activeElement === first || !this.el.nativeElement.contains(document.activeElement)) {
-            e.preventDefault(); last.focus();
-          }
-        } else {
-          if (document.activeElement === last || !this.el.nativeElement.contains(document.activeElement)) {
-            e.preventDefault(); first.focus();
-          }
-        }
-      };
-
-      document.addEventListener('keydown', handleKeydown);
-      this.destroyRef.onDestroy(() => document.removeEventListener('keydown', handleKeydown));
-    });
-  }
-
-  /** Focuses the first tabbable element inside the trap. */
-  focusFirst(): void {
-    const el = this.el.nativeElement.querySelector(FOCUSABLE) as HTMLElement | null;
-    el?.focus();
-  }
-}

package/src/a11y/index.ts

@@ -1,10 +0,0 @@
-export { KjAriaDescribedBy } from './aria-describedby';
-export { KjAriaLabelledBy } from './aria-labelledby';
-export { KjFocusTrap } from './focus-trap';
-export { KjLiveRegion, type KjLivePoliteness } from './live-region';
-export {
-  KjRovingTabindex,
-  KjRovingTabindexItemDirective,
-  KJ_ROVING_TABINDEX,
-} from './roving-tabindex';
-export { KjVisuallyHidden } from './visually-hidden';