forty-cdk 0.22.0 → 0.23.0

package/README.md

@@ -43,13 +43,13 @@ Two packages are regular dependencies, installed automatically and never declare
 
 **The package name itself exports nothing.** `import { … } from 'forty-cdk'` resolves to no symbol, and your editor will not auto-import anything under the bare package name — by design, so that every symbol has exactly one import path. There are three specifiers you do import from:
 
-| Specifier                          | What it exports                                                                                                                                                                                                                                       |
-| ---------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `forty-cdk/<primitive>`            | The primitive's directives, components, context tokens and defaults provider — `ForDialog` from `forty-cdk/dialog`, `ForAccordion` from `forty-cdk/accordion`, and so on for every entry in the tables below.                                         |
-| [`forty-cdk/shared`](shared)       | The cross-primitive contract types a primitive's public API references — `WritingDirection`, `VetoableEvent`, `DateAdapter`, `FloatingSide`, … — declared once and published once. Six of them ship from their own primitive instead; see its README. |
-| `forty-cdk/internationalized-date` | The `@internationalized/date` adapters, kept apart so that optional peer stays genuinely optional.                                                                                                                                                    |
+| Specifier                          | What it exports                                                                                                                                                                                                                                         |
+| ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `forty-cdk/<primitive>`            | The primitive's directives, components, context tokens and defaults provider — `ForDialog` from `forty-cdk/dialog`, `ForAccordion` from `forty-cdk/accordion`, and so on for every entry in the tables below.                                           |
+| [`forty-cdk/shared`](shared)       | The cross-primitive contract types a primitive's public API references — `WritingDirection`, `VetoableEvent`, `DateAdapter`, `FloatingSide`, … — declared once and published once. Eight ship from their own primitive instead; that README names them. |
+| `forty-cdk/internationalized-date` | The `@internationalized/date` adapters, kept apart so that optional peer stays genuinely optional.                                                                                                                                                      |
 
-`forty-cdk/core` resolves too, but it is **not** public: it holds the engines and DI singletons the library refactors freely, and it exists so every primitive resolves that shared implementation to one compiled module. If a symbol you need is not exported by the three specifiers above, it is internal by design — [open an issue](https://github.com/tutkli/forty-cdk/issues) rather than importing from `core`.
+`forty-cdk/core` and `forty-cdk/core-overlay` resolve too, but neither is **public**: together they hold the engines and DI singletons the library refactors freely, and they exist so every primitive resolves that shared implementation to one compiled module. They are two rather than one for a bundling reason you get for free: a published module is a bundler's chunk-splitting unit, so keeping the positioning engine (`@floating-ui/dom` and the overlay shells) in its own module means a lazy route that renders no overlay does not load it. Measured on a seven-lazy-route app, that is **41.7 kB raw / 12.1 kB transfer** a non-overlay route no longer pays. If a symbol you need is not exported by the three specifiers above, it is internal by design — [open an issue](https://github.com/tutkli/forty-cdk/issues) rather than importing from either.
 
 ## Errors
 
@@ -156,7 +156,7 @@ The tables below group the primitives by purpose. The link on each name opens th
 | [Separator](separator)             | A static, optionally semantic divider between groups of content, horizontal or vertical.                                                                                |
 | [Aspect Ratio](aspect-ratio)       | A container that keeps its content at a fixed width-to-height ratio.                                                                                                    |
 | [Avatar](avatar)                   | A user image with a graceful fallback across its loading lifecycle.                                                                                                     |
-| [Visually Hidden](visually-hidden) | Hides content visually while keeping it in the accessibility tree — screen-reader-only labels and announcements.                                                        |
+| [Visually Hidden](visually-hidden) | Hides content visually while keeping it in the accessibility tree — screen-reader-only labels, plus the injectable `LiveAnnouncer`.                                     |
 
 ### Feedback
 
@@ -171,7 +171,7 @@ Headless — no DOM or ARIA of their own; an `inject*` / provider API that other
 
 | Utility                                      | What it is                                                                                                                                             |
 | -------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| [Breakpoints](breakpoints)                   | A signal-first, zoneless, SSR-safe viewport breakpoint observer (`injectBreakpoints`).                                                                 |
+| [Breakpoints](breakpoints)                   | A signal-first, zoneless, SSR-safe viewport breakpoint observer (`injectBreakpoints`), plus the `prefers-reduced-motion` detector.                     |
 | [Drag & Drop](drag-drop)                     | Headless, accessible drag-and-drop for sortable lists and cross-list transfers, keyboard and pointer driven.                                           |
 | [Virtualization](virtualization)             | A headless windowing core (`injectVirtualizer`) plus a `[forVirtualViewport]` layer that renders only the visible slice of huge lists.                 |
 | [Table Virtualization](table-virtualization) | `[forTableVirtualized]`, the adapter that windows a `[forTable]` grid — its own entry point because it composes both the table and the windowing core. |

package/breakpoints/README.md

@@ -82,6 +82,27 @@ Now `injectBreakpoints()` autocompletes `'mobile' | 'tablet' | 'laptop' | 'deskt
 | `active`         | the largest breakpoint whose `min-width` matches, or `null` below the smallest |
 | `matches(query)` | escape hatch for an arbitrary media query (orientation, `prefers-*`, …)        |
 
+### `injectPrefersReducedMotion`
+
+The same shape for a different query: `injectPrefersReducedMotion()` returns a `Signal<boolean>` that is `true` while the user has asked their OS to suppress animation, and flips if they change the setting mid-session. Call it from an injection context, like `injectBreakpoints()`.
+
+```ts
+import { computed } from '@angular/core';
+import { injectPrefersReducedMotion } from 'forty-cdk/breakpoints';
+
+export class Panel {
+  private readonly reducedMotion = injectPrefersReducedMotion();
+
+  protected readonly transition = computed(() =>
+    this.reducedMotion() ? 'none' : 'transform 200ms ease-out',
+  );
+}
+```
+
+It is published here because forty-cdk ships no styles: the animation on a `data-state` change is yours, so honouring the preference is yours too — and a signal is what a `computed()` or a `[style]` binding can branch on, which a CSS `@media` block cannot. Treat `true` as "skip the animated path entirely", not "shorten the duration": the setting asks for no motion, not less of it.
+
+`bp.matches('(prefers-reduced-motion: reduce)')` resolves to the same thing. Prefer the named helper — it is the one the library's own motion-bearing primitives (drag gestures, carousel, drawer) read, so the query string stays spelled in one place.
+
 ## SSR
 
-On the server (or where `matchMedia` is unavailable) every query signal reads `false` and `active` reads `null`. No `matchMedia` access happens server-side, so the helper is safe under Angular Universal.
+On the server (or where `matchMedia` is unavailable) every query signal reads `false` and `active` reads `null`. No `matchMedia` access happens server-side, so the helper is safe under Angular Universal. `injectPrefersReducedMotion()` reads `false` there for the same reason: the server render takes the animated branch, and the client applies the real preference on its first observation.

package/combobox/README.md

@@ -582,7 +582,7 @@ When `[totalCount]` is omitted, the directive falls back to `options().length` a
 `[forCombobox]` exposes a `dir: 'ltr' | 'rtl'` input (default `'ltr'`). It drives:
 
 - **Chip keyboard navigation** — ArrowLeft / ArrowRight roles swap so they follow the visual order of the chip cluster, not the DOM order. See _Chip keyboard_ above.
-- **Default popover placement** — `align` defaults to `'start'` in LTR and `'end'` in RTL so the listbox anchors to the visually-leading edge of the input (`side` defaults to `'bottom'` in both). A consumer-provided `[align]` is honoured as-is — no automatic flip — so advanced layouts can pin an alignment regardless of writing direction.
+- **Default popover placement** — `align` defaults to `'start'` in LTR and `'end'` in RTL so the listbox anchors to the visually-leading edge of the input (`side` defaults to `'bottom'` in both). A consumer-provided `[align]` is honoured as-is — no automatic flip — so advanced layouts can pin an alignment regardless of writing direction. `provideForComboboxDefaults({ align })` pins it for a whole scope the same way; its default is `null`, which is what "follow the writing direction" is spelled as there. `side` is scope-defaultable through the same provider, with the plain `'bottom'` fallback — writing direction does not enter into it.
 
 The native `<input>` handles caret movement and BiDi from the document's CSS `direction` already, so there's nothing extra to do for the typed text itself.
 

package/context-menu/README.md

@@ -120,8 +120,8 @@ Both triggers carry `[menuPositioning]`, a partial `{ side, align, sideOffset, a
 | Property                    | Type                                                      | Description                                                                                                                                                                                                                                                                                                                                         |
 | --------------------------- | --------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `open`                      | `model<boolean>`                                          | Two-way bindable. Whether the menu is shown.<br>**Default:** `false`                                                                                                                                                                                                                                                                                |
-| `side`                      | `input<string>`                                           | Anchor side relative to the pointer.<br>**Default:** `'bottom'`                                                                                                                                                                                                                                                                                     |
-| `align`                     | `input<string>`                                           | Alignment along `side` (`'start'` / `'center'` / `'end'`).<br>**Default:** `'start'`                                                                                                                                                                                                                                                                |
+| `side`                      | `input<string>`                                           | Anchor side relative to the pointer. The default is read from `provideForContextMenuDefaults` for the surrounding scope.<br>**Default:** `'bottom'`                                                                                                                                                                                                 |
+| `align`                     | `input<string>`                                           | Alignment along `side` (`'start'` / `'center'` / `'end'`). The default is read from `provideForContextMenuDefaults` for the surrounding scope.<br>**Default:** `'start'`                                                                                                                                                                            |
 | `sideOffset`                | `input<number>`                                           | Gap (px) between the pointer and the menu along the main axis.<br>**Default:** `0`                                                                                                                                                                                                                                                                  |
 | `alignOffset`               | `input<number>`                                           | Gap (px) along the cross axis (parallel to `side`).<br>**Default:** `0`                                                                                                                                                                                                                                                                             |
 | `fallbackAxisSideDirection` | `input<'none' \| 'start' \| 'end'>`                       | When both sides of the preferred axis overflow, lets `flip` drop the menu to a perpendicular side instead of clipping. `'none'` keeps only the opposite same-axis placement. The default is read from `provideForContextMenuDefaults` for the surrounding scope — set it once for the whole app rather than per call site.<br>**Default:** `'none'` |

package/date-picker/README.md

@@ -157,7 +157,7 @@ The library is styleless: presence in the DOM is the consumer's job (`@if (open(
 | `formatOptions`     | `input<Intl.DateTimeFormatOptions>`              | Options for the text rendered by `[forDatePickerValue]`.<br>**Default:** `{ year: 'numeric', month: 'long', day: 'numeric' }`                                             |
 | `locale`            | `input<string \| null>`                          | BCP 47 locale for the text rendered by `[forDatePickerValue]`. Not forwarded to the projected calendar — bind its `[locale]` too.<br>**Default:** `null` → runtime locale |
 | `placeholder`       | `input<string>`                                  | Fallback text for `[forDatePickerValue]` when empty.<br>**Default:** `''`                                                                                                 |
-| `side` / `align`    | `input`                                          | Anchored placement (popover mode only).<br>**Default:** `'bottom'` / `'start'`                                                                                            |
+| `side` / `align`    | `input`                                          | Anchored placement (popover mode only). Defaults from `provideForDatePickerDefaults` / `provideForDateRangePickerDefaults`.<br>**Default:** `'bottom'` / `'start'`        |
 | `dir`               | `input<'ltr' \| 'rtl' \| null>`                  | Writing direction.<br>**Default:** `null` resolves the ambient direction; reflected to the host `dir`                                                                     |
 
 Plus the shared `FormUiControl` inputs from the base (`disabled`, `readonly`, `required`, `invalid`, `pending`, `dirty`, `name`, `errors`, and the `touched` model) and the floating tunables (`sideOffset`, `alignOffset`, `avoidCollisions`, `collisionPadding`, `sticky`, `hideWhenDetached`).
@@ -322,7 +322,7 @@ readonly booking = form(this.model, (p) => required(p.stay));
 - **Native submission.** When `name` is set, two hidden inputs `<name>-start` / `<name>-end` mirror the committed endpoints as ISO `YYYY-MM-DD` for native `<form>` posts.
 - **Bounds naming.** `minDate` / `maxDate` (not `min` / `max`) for the same reason as `ForDatePicker` — and additionally because `FormUiControl.min` / `max` are typed `NonNullable<TValue>` (the range object itself), which is meaningless as a bound.
 
-Defaults are configured with `provideForDateRangePickerDefaults` (`sideOffset` / `collisionPadding`), and both wrapper patterns work via the exported `FOR_DATE_RANGE_PICKER_HOST_DIRECTIVE_INPUTS` / `FOR_DATE_RANGE_PICKER_HOST_DIRECTIVE_OUTPUTS` tuples — see [Wrapping form primitives](../../../docs/wrapping-form-primitives.md).
+Defaults are configured with `provideForDateRangePickerDefaults` (`side` / `align` / `sideOffset` / `collisionPadding`), and both wrapper patterns work via the exported `FOR_DATE_RANGE_PICKER_HOST_DIRECTIVE_INPUTS` / `FOR_DATE_RANGE_PICKER_HOST_DIRECTIVE_OUTPUTS` tuples — see [Wrapping form primitives](../../../docs/wrapping-form-primitives.md).
 
 ## Keyboard
 

package/dropdown-menu/README.md

@@ -69,7 +69,7 @@ import {
   `,
 })
 export class DemoOptions {
-  readonly alignment = signal<string>('left');
+  readonly alignment = signal<string | null>('left');
   cut() {
     /* ... */
   }
@@ -136,8 +136,8 @@ Angular resolves `ng-template` DI at the template's **declaration** site, not wh
 | Property                    | Type                                                      | Description                                                                                                                                                                                                                                                                                                                                          |
 | --------------------------- | --------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `open`                      | `model<boolean>`                                          | Two-way bindable. Whether the menu is shown.<br>**Default:** `false`                                                                                                                                                                                                                                                                                 |
-| `side`                      | `input<string>`                                           | Anchor side of `[forMenuContent]` against the trigger.<br>**Default:** `'bottom'`                                                                                                                                                                                                                                                                    |
-| `align`                     | `input<string>`                                           | Alignment along `side` (`'start'` / `'center'` / `'end'`).<br>**Default:** `'start'`                                                                                                                                                                                                                                                                 |
+| `side`                      | `input<string>`                                           | Anchor side of `[forMenuContent]` against the trigger. The default is read from `provideForDropdownMenuDefaults` for the surrounding scope.<br>**Default:** `'bottom'`                                                                                                                                                                               |
+| `align`                     | `input<string>`                                           | Alignment along `side` (`'start'` / `'center'` / `'end'`). The default is read from `provideForDropdownMenuDefaults` for the surrounding scope.<br>**Default:** `'start'`                                                                                                                                                                            |
 | `sideOffset`                | `input<number>`                                           | Gap (px) between the trigger and the content along the main axis.<br>**Default:** `4`                                                                                                                                                                                                                                                                |
 | `alignOffset`               | `input<number>`                                           | Gap (px) along the cross axis (parallel to `side`).<br>**Default:** `0`                                                                                                                                                                                                                                                                              |
 | `fallbackAxisSideDirection` | `input<'none' \| 'start' \| 'end'>`                       | When both sides of the preferred axis overflow, lets `flip` drop the menu to a perpendicular side instead of clipping. `'none'` keeps only the opposite same-axis placement. The default is read from `provideForDropdownMenuDefaults` for the surrounding scope — set it once for the whole app rather than per call site.<br>**Default:** `'none'` |

package/fesm2022/forty-cdk-accordion.mjs

@@ -2,16 +2,16 @@ import * as i0 from '@angular/core';
 import { InjectionToken, inject, input, booleanAttribute, model, Directive, computed, signal, ElementRef } from '@angular/core';
 import { orphanContextError, assertRootContext, Collection, injectTextDirection, moveIndex, IdGenerator, adoptHostId, hostButtonType, registerHandle, reflectDisabled, resolveListNavigation, hostLabelledBy } from 'forty-cdk/core';
 
-/**
- * DI token for the accordion's coordination surface, provided by `[forAccordion]`.
- *
- * Publicly typed as the read surface {@link ForAccordionContext}, which is the whole of
- * what the token promises a consumer. The pieces read the same token at an internal type
- * that adds the trigger-registration protocol, so a wrapper re-providing it must alias it
- * to the root: `{ provide: FOR_ACCORDION_CONTEXT, useExisting: MyAccordion }`, where
- * `MyAccordion` extends `ForAccordion`. A value that merely satisfies the declared type
- * resolves too, and is rejected in dev mode by the first piece to reach the protocol.
- */
+
+
+
+
+
+
+
+
+
+
 const FOR_ACCORDION_CONTEXT = new InjectionToken('FOR_ACCORDION_CONTEXT');
 const FOR_ACCORDION_ITEM_CONTEXT = new InjectionToken('FOR_ACCORDION_ITEM_CONTEXT');
 function injectAccordionContext(piece) {
@@ -46,76 +46,76 @@ function injectAccordionItemContext(piece) {
     return ctx;
 }
 
-/**
- * Root of the Accordion primitive. Holds the open value(s) and orchestrates
- * single/multiple expansion, collapse rules, and keyboard navigation between
- * triggers.
- *
- * Implements the [WAI-ARIA Accordion pattern](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/).
- *
- * State is modeled as `value: readonly string[]` regardless of mode:
- * - In single mode (`multiple=false`, default), the array has 0 or 1 element.
- * - In multiple mode, any number of items can be open.
- *
- * @example
- * ```html
- * <div forAccordion [(value)]="open" collapsible>
- *   <div forAccordionItem value="a">
- *     <h3><button type="button" forAccordionTrigger>A</button></h3>
- *     <section forAccordionContent>...</section>
- *   </div>
- *   <div forAccordionItem value="b">...</div>
- * </div>
- * ```
- */
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 class ForAccordion {
     #triggers = new Collection();
-    /** When true, multiple items can be expanded simultaneously. */
+
     multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    /**
-     * When true, the whole accordion is disabled: every item's trigger reflects
-     * the native `disabled` attribute (dropped from the Tab order and skipped by
-     * arrow-key navigation) and cannot toggle. Composes with a per-item
-     * `[disabled]` — an item is effectively disabled when either is set. Mirrors
-     * the root `disabled` on `ForTabs` / `ForStepper` / `ForDisclosure`.
-     */
+
+
+
+
+
+
+
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    /**
-     * Single mode only: when true, the open item can be collapsed by clicking
-     * its trigger. When false, exactly one item stays open at all times once
-     * any has been opened.
-     */
+
+
+
+
+
     collapsible = input(false, { ...(ngDevMode ? { debugName: "collapsible" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    /**
-     * Layout direction of the trigger list. `'vertical'` (default) maps
-     * ArrowUp/Down to prev/next; `'horizontal'` maps ArrowLeft/Right (with RTL
-     * swap when `dir='rtl'`).
-     */
+
+
+
+
+
     orientation = input('vertical', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
-    /**
-     * Writing direction. Only relevant when `orientation='horizontal'`. When
-     * unset (default `null`), the inherited ambient direction is resolved from
-     * the nearest ancestor carrying a `dir` attribute (or `<html dir>`),
-     * defaulting to `'ltr'`. An explicit `[dir]` always wins. The resolved
-     * value is reflected to the host `dir` attribute and drives arrow-key
-     * semantics.
-     */
+
+
+
+
+
+
+
+
     _dirInput = input(null, { ...(ngDevMode ? { debugName: "_dirInput" } : /* istanbul ignore next */ {}), alias: 'dir' });
     dir = injectTextDirection(this._dirInput);
-    /**
-     * When true (default), arrow navigation between triggers wraps at the ends —
-     * moving past the last trigger focuses the first and vice versa. Set `false`
-     * to stop at the boundaries. Mirrors the `loop` input on `ForTabs` and
-     * `ForListbox`.
-     */
+
+
+
+
+
+
     loop = input(true, { ...(ngDevMode ? { debugName: "loop" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    /**
-     * Two-way bindable. List of currently expanded item values. In single
-     * mode the array has 0 or 1 element. The `model()` change emitter
-     * (`(valueChange)`) fires only on internal toggles, never on consumer
-     * writes via `[(value)]` — observe transitions without binding back.
-     */
+
+
+
+
+
+
     value = model([], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     isExpanded(itemValue) {
@@ -181,32 +181,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                 }]
         }], propDecorators: { multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], _dirInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "dir", required: false }] }], loop: [{ type: i0.Input, args: [{ isSignal: true, alias: "loop", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
 
-/**
- * One section of a `ForAccordion`. Owns the unique `value` identifying this
- * item to the root and exposes the per-item context that the trigger and
- * content read.
- */
+
+
+
+
+
 class ForAccordionItem {
     parent = injectAccordionContext('ForAccordionItem');
     #idGen = inject(IdGenerator);
-    /** Unique identifier of this item within the accordion. Required. */
+
     value = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
-    /**
-     * When true, this item's trigger ignores clicks and reflects the native
-     * `disabled` attribute (not `aria-disabled`): dropped from the Tab order and
-     * skipped by arrow-key navigation, but kept in the accessibility tree so
-     * screen readers still announce it. See `ForAccordionTrigger` for the rationale. Bind via
-     * `[disabled]`; read the composed {@link disabled} for state.
-     */
+
+
+
+
+
+
+
     disabledInput = input(false, { ...(ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {}), transform: booleanAttribute, alias: 'disabled' });
-    /**
-     * Effective disabled: this item's own `[disabled]` OR'd with the root
-     * `[forAccordion]`'s `disabled`. Everything that gates on the item's disabled
-     * state — native attribute reflection, trigger click, arrow-navigation skip,
-     * `data-disabled` — reads this, so disabling the whole accordion disables
-     * every item.
-     */
+
+
+
+
+
+
+
     disabled = computed(() => this.disabledInput() || this.parent.disabled(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     #triggerId = signal(this.#idGen.next('for-accordion-trigger'), /* @ts-ignore */
@@ -217,15 +217,15 @@ class ForAccordionItem {
     contentId = this.#contentId.asReadonly();
     expanded = computed(() => this.parent.isExpanded(this.value()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
-    /**
-     * Adopts a consumer-set static `id` on the `[forAccordionTrigger]` host into
-     * `triggerId` (preserving anchors / external `aria-labelledby` references /
-     * label `for`) instead of letting the `[id]` host binding clobber it.
-     */
+
+
+
+
+
     adoptTriggerId(el) {
         adoptHostId(el, this.#triggerId);
     }
-    /** Adopts a consumer-set static `id` on the content host into `contentId`. */
+
     adoptContentId(el) {
         adoptHostId(el, this.#contentId);
     }
@@ -252,38 +252,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                 }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
 
-/**
- * Header button for a `ForAccordionItem`. Apply on a `<button>` wrapped in a
- * heading element (`<h2>`–`<h6>`) so APG landmark navigation works. The
- * directive host-binds `type="button"` so a trigger inside a `<form>` never
- * submits it on toggle.
- *
- * Handles ARIA wiring, click-to-toggle, and the recommended keyboard
- * navigation (ArrowDown / ArrowUp / Home / End).
- *
- * `aria-controls` is emitted only while the item is expanded — mirroring the
- * overlay triggers' open-only gating — so the reference never dangles at an
- * unmounted panel under the recommended `@if (item.expanded())` mount pattern.
- */
+
+
+
+
+
+
+
+
+
+
+
+
+
 class ForAccordionTrigger {
     buttonType = hostButtonType();
     #host = inject(ElementRef);
     parent = injectAccordionContext('ForAccordionTrigger');
     item = injectAccordionItemContext('ForAccordionTrigger');
-    /**
-     * APG: aria-disabled is true only when the panel is open AND the accordion
-     * disallows collapse. A real `disabled` item is reflected via the native
-     * `disabled` attribute instead — the sanctioned exception to that rule:
-     * the trigger is a real single-purpose `<button>`, not a roving collection
-     * item (every trigger stays independently in the Tab order; the arrow-key
-     * navigation is an APG-optional enhancement layered on top, not a
-     * roving-tabindex collection), so native `disabled` is correct here. The
-     * button stays in the accessibility tree — screen readers still announce it
-     * as unavailable in browse mode — while being dropped from the Tab order and
-     * the arrow-key navigation (which `focusByOffset` already skips), keeping
-     * disabled triggers uniformly unreachable. The APG Accordion pattern does not
-     * require disabled headers to remain focusable.
-     */
+
+
+
+
+
+
+
+
+
+
+
+
+
+
     ariaDisabled = computed(() => {
         if (this.item.disabled()) {
             return false;
@@ -334,20 +334,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
-/**
- * Panel revealed by a `ForAccordionTrigger`. The directive does not manage
- * DOM presence — wrap with `@if (item.expanded())` so panels mount and
- * unmount with the expanded state and `animate.enter` / `animate.leave`
- * work natively. If the consumer prefers to keep the panel mounted (for
- * CSS-only transitions or to preserve internal state), the directive
- * reflects `aria-hidden="true"` and `inert` while closed so the panel is
- * removed from the accessibility tree and focus order automatically.
- *
- * APG note: `role="region"` adds the panel to the landmark navigation tree.
- * If the accordion has 6+ simultaneously expandable panels, consider not
- * using region — the directive will gain an opt-out input when this comes up
- * in real usage.
- */
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 class ForAccordionContent {
     parent = injectAccordionContext('ForAccordionContent');
     item = injectAccordionItemContext('ForAccordionContent');
@@ -376,9 +376,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
-/**
- * Generated bundle index. Do not edit.
- */
+
+
+
 
 export { FOR_ACCORDION_CONTEXT, FOR_ACCORDION_ITEM_CONTEXT, ForAccordion, ForAccordionContent, ForAccordionItem, ForAccordionTrigger };
 //# sourceMappingURL=forty-cdk-accordion.mjs.map

package/fesm2022/forty-cdk-aspect-ratio.mjs

@@ -1,48 +1,48 @@
 import * as i0 from '@angular/core';
 import { input, numberAttribute, computed, Directive } from '@angular/core';
 
-/**
- * Headless aspect-ratio container. Locks the host element's box to a fixed
- * `width / height` ratio via the native CSS `aspect-ratio` property — useful
- * for media (video, image, iframe) and skeletons that must reserve space
- * before content loads.
- *
- * The directive only writes the `aspect-ratio` style; sizing rules (width,
- * max-width, background, etc.) stay with the consumer.
- *
- * This ships as a dedicated primitive — rather than leaving consumers to write
- * a static `aspect-ratio` CSS declaration — because it is more than one line of
- * CSS: it exposes a reactive `ratio` input that recomputes as the value
- * changes, guards `0` / negative / non-finite ratios so the host never emits
- * invalid CSS, is SSR-safe (the style is bound, never touched imperatively),
- * and offers the same headless API shape as the other primitives. Consumers who
- * only need a fixed, never-changing ratio can skip it and set the native CSS
- * `aspect-ratio` property directly; reach for `[forAspectRatio]` when the ratio
- * is dynamic or must be validated.
- *
- * @example
- * ```html
- * <div forAspectRatio [ratio]="16 / 9">
- *   <img src="cover.jpg" alt="" />
- * </div>
- *
- * <div forAspectRatio ratio="1">  <!-- square -->
- *   <video src="clip.mp4" controls></video>
- * </div>
- * ```
- */
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 class ForAspectRatio {
-    /**
-     * Width / height ratio, e.g. `16 / 9`, `4 / 3`, `1`. Accepts numeric inputs
-     * (`[ratio]="16 / 9"`) and string attributes (`ratio="1.5"`). Defaults to
-     * `1` (square). Non-positive or non-finite values fall back to `1` so the
-     * host never emits an invalid `aspect-ratio`.
-     */
+
+
+
+
+
+
     ratio = input(1, { ...(ngDevMode ? { debugName: "ratio" } : /* istanbul ignore next */ {}), transform: numberAttribute });
-    /**
-     * The host `aspect-ratio` style value, guarded so a `0`, negative, or
-     * non-finite `ratio` never produces invalid CSS — it falls back to `1`.
-     */
+
+
+
+
     resolvedRatio = computed(() => {
         const value = this.ratio();
         return String(Number.isFinite(value) && value > 0 ? value : 1);
@@ -62,9 +62,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                 }]
         }], propDecorators: { ratio: [{ type: i0.Input, args: [{ isSignal: true, alias: "ratio", required: false }] }] } });
 
-/**
- * Generated bundle index. Do not edit.
- */
+
+
+
 
 export { ForAspectRatio };
 //# sourceMappingURL=forty-cdk-aspect-ratio.mjs.map