@kouji-ui/core 0.1.1 → 0.1.2

package/src/number-input/number-stepper.ts

@@ -1,193 +0,0 @@
-import {
-  DestroyRef,
-  Directive,
-  ElementRef,
-  afterNextRender,
-  booleanAttribute,
-  computed,
-  inject,
-  input,
-  numberAttribute,
-  output,
-} from '@angular/core';
-import { KJ_NUMBER_INPUT, KjNumberInputContext } from './number-input.context';
-
-/**
- * Sibling stepper button for `[kjNumberInput]`. Owns increment / decrement
- * activations on click / Enter / Space and a long-press auto-repeat cycle on
- * pointer-hold (500 ms initial → 100 ms → 50 ms after 10 ticks).
- *
- * Reflects bounds-aware `aria-disabled` (`value >= max` for `up`,
- * `value <= min` for `down`) and intercepts capture-phase activation when
- * effective-disabled, mirroring `KjButton`. The host is forced to
- * `type="button"` so a press inside a `<form>` does not submit it.
- *
- * Expects to find a `KjNumberInput` either via an enclosing
- * `[kjNumberInputGroup]` (canonical) or via the `[kjNumberStepperFor]`
- * template-ref escape hatch.
- *
- * @example
- * ```html
- * <div kjNumberInputGroup>
- *   <button kjButton kjNumberStepper kjStep="down" aria-label="Decrease">−</button>
- *   <input kjNumberInput [(kjValue)]="qty" [kjMin]="0" [kjMax]="100" />
- *   <button kjButton kjNumberStepper kjStep="up" aria-label="Increase">+</button>
- * </div>
- * ```
- * @doc-category Core/Inputs
- * @doc
- * @doc-name number-input
- */
-@Directive({
-  selector: '[kjNumberStepper]',
-  standalone: true,
-  host: {
-    '[attr.type]': '"button"',
-    '[attr.aria-label]': 'kjAriaLabel()',
-    '[attr.aria-controls]': 'controlledId()',
-    '[attr.aria-disabled]': 'effectiveDisabled() ? "true" : null',
-    '[attr.data-disabled]': 'effectiveDisabled() ? "" : null',
-    '[attr.tabindex]': '"-1"',
-    '(click)': 'onClick($event)',
-    '(keydown.enter)': 'onActivate($event)',
-    '(keydown.space)': 'onActivate($event)',
-    '(pointerdown)': 'onPointerDown($event)',
-    '(pointerup)': 'cancelRepeat()',
-    '(pointerleave)': 'cancelRepeat()',
-    '(pointercancel)': 'cancelRepeat()',
-  },
-})
-export class KjNumberStepper {
-  private readonly el = inject<ElementRef<HTMLElement>>(ElementRef);
-  private readonly destroyRef = inject(DestroyRef);
-  private readonly groupCtx = inject<KjNumberInputContext>(KJ_NUMBER_INPUT, { optional: true });
-
-  /** Direction. Required — no default. */
-  readonly kjStep = input.required<'up' | 'down'>();
-
-  /** Per-button override of the input's `kjStep`. */
-  readonly kjStepAmount = input<number | undefined, unknown>(undefined, {
-    transform: (v: unknown) => (v === undefined || v === null || v === '' ? undefined : numberAttribute(v)),
-  });
-
-  /** Optional escape-hatch reference to a `[kjNumberInput]`. */
-  readonly kjNumberStepperFor = input<KjNumberInputContext | null>(null);
-
-  /** Required for icon-only stepper buttons. */
-  readonly kjAriaLabel = input<string | null>(null);
-
-  /** Forwarded to the host's effective-disabled. ORed with bounds-disabled. */
-  readonly kjDisabled = input<boolean, unknown>(false, { transform: booleanAttribute });
-
-  /** Emits the new value after each step. */
-  readonly kjStepped = output<number>();
-
-  private timeoutId: ReturnType<typeof setTimeout> | null = null;
-  private intervalId: ReturnType<typeof setInterval> | null = null;
-  private repeatTicks = 0;
-
-  protected readonly target = computed<KjNumberInputContext | null>(
-    () => this.kjNumberStepperFor() ?? this.groupCtx ?? null,
-  );
-
-  protected readonly controlledId = computed(() => {
-    const t = this.target();
-    if (!t) return null;
-    // The input's host id is set via `[attr.id]` from KjNumberInput. Reach for the element.
-    // `t` is the directive instance — we don't expose a public `inputId()` on the context, so
-    // we fall back to scanning the DOM in afterNextRender. For now, return null and rely on the
-    // wrapper to wire `aria-controls` via DOM-id when needed.
-    return null;
-  });
-
-  /** Bounds-aware effective disabled. */
-  protected readonly effectiveDisabled = computed(() => {
-    if (this.kjDisabled()) return true;
-    const t = this.target();
-    if (!t) return false;
-    if (t.disabled() || t.readonly()) return true;
-    const v = t.value();
-    if (v == null) return false;
-    return this.kjStep() === 'up' ? v >= t.max() : v <= t.min();
-  });
-
-  constructor() {
-    // Capture-phase click suppression mirrors KjButton: stops consumer (click)
-    // listeners from firing when the stepper is effective-disabled.
-    afterNextRender(() => {
-      const handler = (event: Event) => {
-        if (this.effectiveDisabled()) {
-          event.preventDefault();
-          event.stopImmediatePropagation();
-        }
-      };
-      this.el.nativeElement.addEventListener('click', handler, { capture: true });
-      this.destroyRef.onDestroy(() => {
-        this.el.nativeElement.removeEventListener('click', handler, { capture: true });
-        this.cancelRepeat();
-      });
-    });
-  }
-
-  /** @internal */
-  onClick(event: Event): void {
-    if (this.effectiveDisabled()) {
-      event.preventDefault();
-      return;
-    }
-    this.tick();
-  }
-
-  /** @internal */
-  onActivate(event: Event): void {
-    if (this.effectiveDisabled()) {
-      event.preventDefault();
-      return;
-    }
-    event.preventDefault();
-    this.tick();
-  }
-
-  /** @internal */
-  onPointerDown(event: PointerEvent): void {
-    if (this.effectiveDisabled()) {
-      event.preventDefault();
-      return;
-    }
-    // Preserve focus on the input — clicking the stepper must not move focus.
-    event.preventDefault();
-    this.cancelRepeat();
-    this.timeoutId = setTimeout(() => {
-      this.intervalId = setInterval(() => {
-        this.repeatTicks++;
-        this.tick();
-        if (this.repeatTicks === 10 && this.intervalId !== null) {
-          clearInterval(this.intervalId);
-          this.intervalId = setInterval(() => this.tick(), 50);
-        }
-      }, 100);
-    }, 500);
-  }
-
-  /** @internal */
-  cancelRepeat(): void {
-    if (this.timeoutId !== null) {
-      clearTimeout(this.timeoutId);
-      this.timeoutId = null;
-    }
-    if (this.intervalId !== null) {
-      clearInterval(this.intervalId);
-      this.intervalId = null;
-    }
-    this.repeatTicks = 0;
-  }
-
-  private tick(): void {
-    const t = this.target();
-    if (!t) return;
-    const units = this.kjStep() === 'up' ? 1 : -1;
-    t.stepBy(units, this.kjStepAmount());
-    const v = t.value();
-    if (v != null) this.kjStepped.emit(v);
-  }
-}

package/src/overlay-badge/index.ts

@@ -1,7 +0,0 @@
-export { KjOverlayBadge } from './overlay-badge';
-export { KjOverlayBadgeContent } from './overlay-badge-content';
-export {
-  KJ_OVERLAY_BADGE,
-  type KjOverlayBadgeContext,
-  type KjOverlayBadgePosition,
-} from './overlay-badge.context';

package/src/overlay-badge/overlay-badge-content.ts

@@ -1,73 +0,0 @@
-import { Directive, computed, inject } from '@angular/core';
-import { KjBadge } from '../badge/badge';
-import { KJ_OVERLAY_BADGE } from './overlay-badge.context';
-
-/**
- * The badge content node of the Overlay Badge family. Applied to the element
- * that renders the badge's visible chrome (typically a `<span>` projected as
- * the last child of the anchor host).
- *
- * Composes {@link KjBadge} via `hostDirectives` so all variant / size styling
- * comes from the existing inline-Badge primitive — one CSS source of truth.
- *
- * Reads {@link KJ_OVERLAY_BADGE} for position, dot-mode, decorative, and
- * description state. Owns:
- *
- * - `data-position` reflection of the parent's logical-corner choice — used
- *   by CSS to drive `inset-inline-*` / `inset-block-*` placement (RTL is a
- *   pure-CSS concern, not JS).
- * - `data-dot` reflection for dot-vs-content rendering.
- * - `aria-hidden="true"` when the parent is decorative or no description was
- *   set (a stray "4" with no context would mislead AT — silence is better).
- * - Stable `id` derived from the parent context — referenced by the host's
- *   merged `aria-describedby` when a description is configured.
- * - `pointer-events: none` so clicks pass through to the anchor. Consumers
- *   who project an interactive child (e.g. `<button kjBadge>`) override this
- *   in their own CSS.
- *
- * @example
- * ```html
- * <button kjOverlayBadge kjDescription="4 unread">
- *   <kj-icon name="bell" />
- *   <span kjOverlayBadgeContent>4</span>
- * </button>
- * ```
- * @doc-category Core/Data display
- * @doc
- * @doc-name overlay-badge
- */
-@Directive({
-  selector: '[kjOverlayBadgeContent]',
-  standalone: true,
-  hostDirectives: [
-    { directive: KjBadge, inputs: ['kjBadgeVariant'] },
-  ],
-  host: {
-    'style': 'position: absolute; pointer-events: none;',
-    '[attr.id]': 'ctx.contentId()',
-    '[attr.data-position]': 'ctx.position()',
-    '[attr.data-dot]': 'ctx.dot() ? "" : null',
-    '[attr.aria-hidden]': 'ariaHidden()',
-  },
-})
-export class KjOverlayBadgeContent {
-  /** The parent {@link KJ_OVERLAY_BADGE} context. */
-  protected readonly ctx = inject(KJ_OVERLAY_BADGE);
-
-  /**
-   * `aria-hidden` resolution:
-   *
-   * - `true` when the parent is decorative — the consumer has explicitly
-   *   opted out of AT announcement.
-   * - `true` when there is no description — without one, reading the badge
-   *   alone (e.g. just "4") would be context-free.
-   * - `null` (attribute removed) when a description is wired and the badge
-   *   is non-decorative — AT reaches the description through the host's
-   *   merged `aria-describedby`.
-   */
-  protected readonly ariaHidden = computed(() => {
-    if (this.ctx.decorative()) return 'true';
-    if (!this.ctx.description()) return 'true';
-    return null;
-  });
-}

package/src/overlay-badge/overlay-badge.context.ts

@@ -1,37 +0,0 @@
-import { InjectionToken, type Signal } from '@angular/core';
-
-/**
- * Logical corner placement for an overlay badge. The `start`/`end` keywords
- * map to `inset-inline-start` / `inset-inline-end` in CSS so RTL flipping
- * happens at the style layer without any JS bidi reads.
- */
-export type KjOverlayBadgePosition =
-  | 'top-end'
-  | 'top-start'
-  | 'bottom-end'
-  | 'bottom-start';
-
-/** Context shared between {@link KjOverlayBadge} and {@link KjOverlayBadgeContent}. */
-export interface KjOverlayBadgeContext {
-  /** Stable id of the badge content node. */
-  readonly contentId: Signal<string>;
-  /** Stable id of the visually-hidden description node, when present. */
-  readonly descriptionId: Signal<string>;
-  /** Logical corner of the anchor where the badge is placed. */
-  readonly position: Signal<KjOverlayBadgePosition>;
-  /** Presence-dot mode flag. */
-  readonly dot: Signal<boolean>;
-  /** Decorative opt-out flag — when true, the content is `aria-hidden`. */
-  readonly decorative: Signal<boolean>;
-  /** The accessible description text — empty string means "no description". */
-  readonly description: Signal<string>;
-}
-
-/** Injection token for the {@link KjOverlayBadge} context. */
-export const KJ_OVERLAY_BADGE = new InjectionToken<KjOverlayBadgeContext>('KjOverlayBadge');
-
-let _overlayBadgeIdCounter = 0;
-/** Allocates a stable id used for the badge content node + `aria-describedby` wiring. */
-export function nextOverlayBadgeId(): string {
-  return `kj-overlay-badge-${++_overlayBadgeIdCounter}`;
-}

package/src/overlay-badge/overlay-badge.spec.ts

@@ -1,220 +0,0 @@
-import { Component, signal } from '@angular/core';
-import { render } from '@testing-library/angular';
-import { axe, toHaveNoViolations } from 'jest-axe';
-import { KjOverlayBadge } from './overlay-badge';
-import { KjOverlayBadgeContent } from './overlay-badge-content';
-import type { KjOverlayBadgePosition } from './overlay-badge.context';
-
-expect.extend(toHaveNoViolations);
-
-const imports = [KjOverlayBadge, KjOverlayBadgeContent];
-
-const anchor = (extras = ''): string =>
-  `<button kjOverlayBadge ${extras}>Bell<span kjOverlayBadgeContent>4</span></button>`;
-
-describe('KjOverlayBadge', () => {
-  describe('position', () => {
-    it('defaults data-position to top-end on the content node', async () => {
-      const { container } = await render(anchor(), { imports });
-      expect(container.querySelector('[kjOverlayBadgeContent]')).toHaveAttribute(
-        'data-position',
-        'top-end',
-      );
-    });
-
-    it.each<KjOverlayBadgePosition>([
-      'top-end',
-      'top-start',
-      'bottom-end',
-      'bottom-start',
-    ])(
-      'reflects %s verbatim to data-position — RTL is a CSS concern, not JS',
-      async corner => {
-        const { container } = await render(anchor(`[kjPosition]="'${corner}'"`), {
-          imports,
-        });
-        expect(container.querySelector('[kjOverlayBadgeContent]')).toHaveAttribute(
-          'data-position',
-          corner,
-        );
-      },
-    );
-
-    it('does not read [dir] — same data-position regardless of RTL', async () => {
-      const { container } = await render(
-        `<div dir="rtl">${anchor(`[kjPosition]="'top-end'"`)}</div>`,
-        { imports },
-      );
-      expect(container.querySelector('[kjOverlayBadgeContent]')).toHaveAttribute(
-        'data-position',
-        'top-end',
-      );
-    });
-  });
-
-  describe('dot mode', () => {
-    it('omits data-dot when kjDot is false (default)', async () => {
-      const { container } = await render(anchor(), { imports });
-      expect(container.querySelector('[kjOverlayBadgeContent]')).not.toHaveAttribute(
-        'data-dot',
-      );
-    });
-
-    it('reflects data-dot="" when kjDot is true', async () => {
-      const { container } = await render(anchor(`[kjDot]="true"`), { imports });
-      expect(container.querySelector('[kjOverlayBadgeContent]')).toHaveAttribute(
-        'data-dot',
-        '',
-      );
-    });
-  });
-
-  describe('decorative mode', () => {
-    it('sets aria-hidden="true" on the content node', async () => {
-      const { container } = await render(
-        anchor(`[kjDecorative]="true" kjDescription="ignored"`),
-        { imports },
-      );
-      expect(container.querySelector('[kjOverlayBadgeContent]')).toHaveAttribute(
-        'aria-hidden',
-        'true',
-      );
-    });
-
-    it('does not merge a description id into aria-describedby when decorative', async () => {
-      const { container } = await render(
-        anchor(`[kjDecorative]="true" kjDescription="4 unread"`),
-        { imports },
-      );
-      expect(container.querySelector('button')).not.toHaveAttribute('aria-describedby');
-    });
-  });
-
-  describe('aria-describedby merge', () => {
-    it('appends the description id while preserving existing ids', async () => {
-      const template = `
-        <button kjOverlayBadge kjDescription="4 unread" aria-describedby="hint err">
-          Bell<span kjOverlayBadgeContent>4</span>
-        </button>
-        <span id="hint">Hint</span>
-        <span id="err">Error</span>
-      `;
-      const { container } = await render(template, { imports });
-      const button = container.querySelector('button')!;
-      const ids = button.getAttribute('aria-describedby')!.split(/\s+/u);
-
-      expect(ids[0]).toBe('hint');
-      expect(ids[1]).toBe('err');
-      expect(ids[2]).toMatch(/^kj-overlay-badge-\d+-desc$/u);
-    });
-
-    it('renders a single description id when no consumer ids exist', async () => {
-      const { container } = await render(anchor(`kjDescription="4 unread"`), {
-        imports,
-      });
-      const button = container.querySelector('button')!;
-      const ids = button.getAttribute('aria-describedby')!.split(/\s+/u);
-      expect(ids).toHaveLength(1);
-      expect(ids[0]).toMatch(/^kj-overlay-badge-\d+-desc$/u);
-    });
-
-    it('drops aria-describedby when no description and no original ids', async () => {
-      const { container } = await render(anchor(), { imports });
-      expect(container.querySelector('button')).not.toHaveAttribute('aria-describedby');
-    });
-
-    it('preserves original aria-describedby when description is unset', async () => {
-      const template = `
-        <button kjOverlayBadge aria-describedby="hint">
-          Bell<span kjOverlayBadgeContent>4</span>
-        </button>
-        <span id="hint">Hint</span>
-      `;
-      const { container } = await render(template, { imports });
-      expect(container.querySelector('button')).toHaveAttribute(
-        'aria-describedby',
-        'hint',
-      );
-    });
-
-    it('removes the description id when description is cleared', async () => {
-      @Component({
-        standalone: true,
-        imports,
-        template: `
-          <button kjOverlayBadge [kjDescription]="desc()">
-            Bell<span kjOverlayBadgeContent>4</span>
-          </button>
-        `,
-      })
-      class Host {
-        readonly desc = signal<string | undefined>('4 unread');
-      }
-      const { fixture } = await render(Host);
-      const button = fixture.nativeElement.querySelector('button')!;
-      expect(button.getAttribute('aria-describedby')).toMatch(/^kj-overlay-badge-\d+-desc$/u);
-
-      fixture.componentInstance.desc.set(undefined);
-      fixture.detectChanges();
-
-      expect(button.hasAttribute('aria-describedby')).toBe(false);
-    });
-  });
-
-  describe('content host bindings', () => {
-    it('applies pointer-events:none on the content host so clicks reach the anchor', async () => {
-      const { container } = await render(anchor(), { imports });
-      const content = container.querySelector('[kjOverlayBadgeContent]') as HTMLElement;
-      expect(content.style.pointerEvents).toBe('none');
-    });
-
-    it('applies position:absolute on the content host', async () => {
-      const { container } = await render(anchor(), { imports });
-      const content = container.querySelector('[kjOverlayBadgeContent]') as HTMLElement;
-      expect(content.style.position).toBe('absolute');
-    });
-
-    it('host-composes KjBadge — data-variant lands on the content node', async () => {
-      const { container } = await render(
-        `<button kjOverlayBadge>Bell<span kjOverlayBadgeContent [kjBadgeVariant]="'destructive'">4</span></button>`,
-        { imports },
-      );
-      expect(container.querySelector('[kjOverlayBadgeContent]')).toHaveAttribute(
-        'data-variant',
-        'destructive',
-      );
-    });
-
-    it('aria-hidden="true" by default (no description, not decorative)', async () => {
-      const { container } = await render(anchor(), { imports });
-      expect(container.querySelector('[kjOverlayBadgeContent]')).toHaveAttribute(
-        'aria-hidden',
-        'true',
-      );
-    });
-
-    it('drops aria-hidden when a description is wired', async () => {
-      const { container } = await render(anchor(`kjDescription="4 unread"`), {
-        imports,
-      });
-      expect(container.querySelector('[kjOverlayBadgeContent]')).not.toHaveAttribute(
-        'aria-hidden',
-      );
-    });
-  });
-
-  describe('anchor host bindings', () => {
-    it('applies position:relative inline so the absolute content can land', async () => {
-      const { container } = await render(anchor(), { imports });
-      const button = container.querySelector('button') as HTMLElement;
-      expect(button.style.position).toBe('relative');
-    });
-  });
-
-  it('passes axe audit', async () => {
-    const { container } = await render(anchor(`kjDescription="4 unread"`), {
-      imports,
-    });
-    expect(await axe(container)).toHaveNoViolations();
-  });
-});

package/src/overlay-badge/overlay-badge.ts

@@ -1,128 +0,0 @@
-import {
-  Directive,
-  ElementRef,
-  computed,
-  inject,
-  input,
-  signal,
-} from '@angular/core';
-import {
-  KJ_OVERLAY_BADGE,
-  type KjOverlayBadgeContext,
-  type KjOverlayBadgePosition,
-  nextOverlayBadgeId,
-} from './overlay-badge.context';
-
-/**
- * Anchor-side directive of the Overlay Badge family. Applied to the host
- * element the badge decorates (a button, an avatar, a tab label, an inbox
- * row). Provides the {@link KJ_OVERLAY_BADGE} context that the sibling
- * `[kjOverlayBadgeContent]` directive consumes.
- *
- * The directive does **not** inject a wrapper element — it composes onto the
- * existing anchor host. Visual chrome (variant, size, dot styling) is reused
- * from {@link import('../badge/badge').KjBadge} via `hostDirectives` on the
- * content node.
- *
- * Accessibility:
- *
- * - When `kjDescription` is set, the directive renders a visually-hidden span
- *   (id derived from `contentId`) and **merges** that id into the host's
- *   existing `aria-describedby` attribute, preserving any consumer-set ids.
- * - When `kjDecorative` is `true`, the badge content is `aria-hidden` and the
- *   describedby merge is skipped.
- * - Without a description and without `kjDecorative`, the content node is
- *   `aria-hidden` by default (a stray "4" with no context is worse than
- *   silence — the Material rule).
- *
- * @example
- * ```html
- * <button kjOverlayBadge kjDescription="4 unread" [kjPosition]="'top-end'">
- *   <kj-icon name="bell" />
- *   <span kjOverlayBadgeContent>4</span>
- * </button>
- * ```
- * @doc-category Core/Data display
- * @doc
- * @doc-name overlay-badge
- * @doc-description Positions a badge chip over its host element with an optional accessible description.
- * @doc-is-main
- */
-@Directive({
-  selector: '[kjOverlayBadge]',
-  standalone: true,
-  providers: [{ provide: KJ_OVERLAY_BADGE, useExisting: KjOverlayBadge }],
-  host: {
-    'style': 'position: relative;',
-    '[attr.aria-describedby]': 'mergedDescribedBy()',
-  },
-})
-export class KjOverlayBadge implements KjOverlayBadgeContext {
-  private readonly hostEl = inject<ElementRef<HTMLElement>>(ElementRef);
-
-  /** Logical corner where the badge is placed. Defaults to `'top-end'`. */
-  readonly kjPosition = input<KjOverlayBadgePosition>('top-end');
-
-  /** Renders a fixed-size presence dot in place of numeric / text content. */
-  readonly kjDot = input<boolean>(false);
-
-  /**
-   * Decorative opt-out. When `true`, the badge content is `aria-hidden` and
-   * the host's `aria-describedby` merge is skipped. Use for cases where the
-   * surrounding context already announces the badge's meaning.
-   */
-  readonly kjDecorative = input<boolean>(false);
-
-  /**
-   * Optional accessible description for assistive tech. When set, drives a
-   * visually-hidden span whose id is merged into the host's existing
-   * `aria-describedby`. Required for non-decorative badges that carry
-   * meaning (a count, a status word).
-   */
-  readonly kjDescription = input<string | undefined>(undefined);
-
-  /** Stable id of the badge content node. */
-  private readonly _contentId = signal(nextOverlayBadgeId());
-
-  /** @internal — exposed via {@link KJ_OVERLAY_BADGE}. */
-  readonly contentId = this._contentId.asReadonly();
-
-  /** Id of the visually-hidden description node — `${contentId}-desc`. */
-  readonly descriptionId = computed(() => `${this._contentId()}-desc`);
-
-  /** @internal — context surface (signal-typed) for consumers / tests. */
-  readonly position = computed<KjOverlayBadgePosition>(() => this.kjPosition());
-  /** @internal */
-  readonly dot = computed(() => this.kjDot());
-  /** @internal */
-  readonly decorative = computed(() => this.kjDecorative());
-  /** @internal */
-  readonly description = computed(() => this.kjDescription() ?? '');
-
-  /**
-   * `aria-describedby` cached at construction so we can merge our description
-   * id without dropping any consumer-set ids. We re-read once at construction
-   * — consumers who mutate `aria-describedby` post-init via direct DOM are
-   * out-of-contract; declarative bindings or `KjAriaDescribedBy` are the
-   * supported paths.
-   */
-  private readonly originalDescribedBy = this.readOriginalDescribedBy();
-
-  /** Merged `aria-describedby` value bound to the host. */
-  protected readonly mergedDescribedBy = computed(() => {
-    const original = this.originalDescribedBy;
-    if (this.decorative() || !this.description()) {
-      return original.length ? original.join(' ') : null;
-    }
-    const merged = [...original];
-    const id = this.descriptionId();
-    if (!merged.includes(id)) merged.push(id);
-    return merged.join(' ');
-  });
-
-  private readOriginalDescribedBy(): string[] {
-    const raw = this.hostEl.nativeElement.getAttribute('aria-describedby');
-    if (!raw) return [];
-    return raw.split(/\s+/u).filter(Boolean);
-  }
-}