forty-cdk 0.38.0 → 0.39.0

package/avatar/README.md

@@ -100,6 +100,8 @@ When the image errors, the directive flips `shouldShowFallback()` and the initia
 
 The directive does not impose a `role`. Pair the avatar with visible name text or `aria-label` on the surrounding element when identity matters. Set `alt=""` on the `<img>` for purely decorative avatars next to a name, or provide a meaningful `alt` description if the avatar stands alone.
 
+A meaningful `alt` names the avatar only while the image is shown: once it fails, the image is hidden and the fallback initials are all that is left to announce. When an avatar stands alone, name the root instead (`role="img"` with an `aria-label`) and give the `<img>` `alt=""`, so the fallback carries the same name as the loaded image.
+
 ## Styling
 
 forty-cdk ships no styles: put your own class on each piece and key your CSS off the `data-*` attributes listed under [API](#api), not off the `for*` selectors ([Styling forty-cdk](../../../docs/styling.md) explains why).

package/button/README.md

@@ -5,7 +5,7 @@ archetype: [composable-ui]
 apgUrl: https://www.w3.org/WAI/ARIA/apg/patterns/button/
 ---
 
-# ForButton
+# Button
 
 Turns any element (a native `<button>` or a custom host like `<div>` / `<span>`) into an accessible button with keyboard activation. Disabled stays focusable (aria-disabled, never the native attribute) and pressed / hovered / focus-visible are reflected as data-\* hooks.
 

package/calendar/README.md

@@ -341,12 +341,18 @@ The recommended path is `[forCalendarMonthSelect]` and `[forCalendarYearSelect]`
         />
       </svg>
     </button>
-    <select forCalendarMonthSelect #m="forCalendarMonthSelect">
+    <select forCalendarMonthSelect #m="forCalendarMonthSelect" aria-label="Month">
       @for (opt of m.options(); track opt.value) {
       <option [value]="opt.value" [disabled]="opt.disabled">{{ opt.label }}</option>
       }
     </select>
-    <select forCalendarYearSelect #y="forCalendarYearSelect" [minYear]="1900" [maxYear]="2100">
+    <select
+      forCalendarYearSelect
+      #y="forCalendarYearSelect"
+      aria-label="Year"
+      [minYear]="1900"
+      [maxYear]="2100"
+    >
       @for (opt of y.years(); track opt.value) {
       <option [value]="opt.value" [disabled]="opt.disabled">{{ opt.value }}</option>
       }
@@ -575,7 +581,7 @@ Implements the [WAI-ARIA Grid pattern](https://www.w3.org/WAI/ARIA/apg/patterns/
 - **`aria-selected`** is always emitted (`"true"` / `"false"`); **`aria-current="date"`** marks today; **`aria-disabled`** marks unavailable dates (truthy-only).
 - **`aria-multiselectable="true"`** is set on the day grid in `selectionMode="range"`, where a committed range selects several cells, and is absent in single mode.
 - **Roving tabindex**: exactly one cell (the focused date) is tabbable. `Tab` enters and leaves the grid in one stop.
-- **Boolean `data-*`** on the cell, present when true and absent when false: `data-selected`, `data-today`, `data-highlighted` (the focused/roving cell), `data-disabled` and `data-outside-month`.
+- **Boolean `data-*`** on the cell, present when true and absent when false: `data-selected`, `data-today`, `data-highlighted` (the roving tab-stop cell, kept after focus leaves the grid), `data-disabled` and `data-outside-month`.
 
 ## Styling
 

package/carousel/README.md

@@ -5,7 +5,7 @@ archetype: [composable-ui]
 apgUrl: https://www.w3.org/WAI/ARIA/apg/patterns/carousel/
 ---
 
-# ForCarousel
+# Carousel
 
 A slideshow of content panels with previous / next controls, an indicator group, optional looping and multi-slide views, and an accessible autoplay mode with a pause control.
 

package/combobox/README.md

@@ -115,17 +115,11 @@ const COUNTRIES = [
     ForComboboxClear,
   ],
   template: `
-    <div
-      forCombobox
-      #combobox="forCombobox"
-      class="combobox"
-      [(query)]="query"
-      [(value)]="value"
-      ariaLabel="Country search"
-    >
+    <div forCombobox #combobox="forCombobox" class="combobox" [(query)]="query" [(value)]="value">
       <div class="combobox-single">
         <input
           forComboboxInput
+          aria-label="Country search"
           class="combobox-input combobox-input--boxed"
           placeholder="Search countries…"
         />
@@ -192,7 +186,7 @@ Click the `[forComboboxTrigger]` button, type into the search field inside the p
 
 ### Virtualized (1,000 options)
 
-The primitive never owns the scroll container, so it virtualizes with any windowing strategy. The demo uses a dependency-free one. The consumer renders only the visible window and wires `[totalCount]`, `[visibleRange]` and `[forComboboxOption][posInSet]`; `(scrollToIndex)` fires when navigation targets a row outside the window.
+The primitive never owns the scroll container, so it virtualizes with any windowing strategy. The demo uses a dependency-free one. The consumer renders only the visible window, adds `forComboboxVirtualized` to the combobox, and wires its `[totalCount]` and `[visibleRange]` plus `[forComboboxOption][posInSet]`; `(scrollToIndex)` fires when navigation targets a row outside the window.
 
 ## API
 
@@ -225,6 +219,9 @@ The content anchors to the field box when a `[forComboboxAnchor]` is present; se
 | `[forCombobox]`          | `data-dirty`       | present / absent                                                    |
 | `[forCombobox]`          | `data-pending`     | present / absent                                                    |
 | `[forCombobox]`          | `data-invalid`     | present / absent                                                    |
+| `[forComboboxTrigger]`   | `data-state`       | `open` \| `closed`                                                  |
+| `[forComboboxTrigger]`   | `data-disabled`    | present / absent                                                    |
+| `[forComboboxTrigger]`   | `data-readonly`    | present / absent                                                    |
 | `[forComboboxInput]`     | `data-state`       | `open` \| `closed`                                                  |
 | `[forComboboxInput]`     | `data-disabled`    | present / absent                                                    |
 | `[forComboboxToggle]`    | `data-state`       | `open` \| `closed`                                                  |
@@ -299,7 +296,7 @@ The default (editable) anatomy is a text field that filters in place. A **picker
 
 Add two parts:
 
-- **`[forComboboxTrigger]`**: a real `<button>` outside the `@if (open())`. It opens the panel, becomes the default positioning anchor, and is where focus returns on close.
+- **`[forComboboxTrigger]`**: a real `<button>` outside the `@if (open())`. It opens the panel, becomes the default positioning anchor, and is where focus returns on close. It carries `role="combobox"` and announces the form state (`aria-required`, `aria-invalid`, `aria-busy`, `aria-readonly`), because while the panel is closed it is the only focusable part of the field. Give it a label: a combobox is not named by its text.
 - **`[forComboboxList]`**: the `role="listbox"` element nested inside `[forComboboxContent]`, next to the input. It owns the options and the labelled role; `[forComboboxContent]` becomes the `role="dialog"` the trigger opens, named by the trigger.
 
 ```html
@@ -669,14 +666,17 @@ The same three inputs cover multi mode + chips: bind `<span forComboboxChip [val
 
 ## Virtualization
 
-For very large option sets (1k+) the consumer can render only the visible window and let the directive coordinate navigation across the full source. Three additive inputs / one output cover the wiring; non-virtualized usage is unchanged.
+For very large option sets (1k+) the consumer can render only the visible window and let the directive coordinate navigation across the full source. The wiring lives on `ForComboboxVirtualized` (`[forComboboxVirtualized]`, `exportAs: 'forComboboxVirtualized'`), placed on the same element as `[forCombobox]` and imported from `forty-cdk/combobox` next to `ForCombobox`. Non-virtualized usage is unchanged, and a combobox without the directive never bundles the virtualized navigation engine.
 
-| Input / Output                              | Purpose                                                                                                                                                                    |
-| ------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `[totalCount]: number \| undefined`         | Length of the **filtered** source array. Drives `aria-setsize` and lets navigation walk past the rendered window. Leave `undefined` (default) for non-virtualized lists.   |
-| `[visibleRange]: [start, end) \| undefined` | Inclusive-exclusive index range currently rendered in the DOM. Pulled from your virtualizer's `getVirtualItems()`.                                                         |
-| `[forComboboxOption][posInSet]`             | Absolute index of this option in the source array. Required when virtualizing; the directive folds option data into a snapshot keyed by this index so it survives unmount. |
-| `(scrollToIndex)`                           | Emitted when arrow keys (or Home / End) need to land on an option whose absolute index falls outside `visibleRange()`. Wire to the virtualizer's `scrollToIndex(idx)`.     |
+| `ForComboboxVirtualized` member             | Purpose                                                                                                                                                                  |
+| ------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `[totalCount]: number \| undefined`         | Length of the **filtered** source array. Drives `aria-setsize` and lets navigation walk past the rendered window. Leave `undefined` (default) for non-virtualized lists. |
+| `[visibleRange]: [start, end) \| undefined` | Inclusive-exclusive index range currently rendered in the DOM. Pulled from your virtualizer's `getVirtualItems()`.                                                       |
+| `[dataVersion]: unknown`                    | Bind any value that changes when the source is re-sorted or refreshed without its length changing, so navigation never lands on a stale off-window entry.                |
+| `(scrollToIndex)`                           | Emitted when arrow keys (or Home / End) need to land on an option whose absolute index falls outside `visibleRange()`. Wire to the virtualizer's `scrollToIndex(idx)`.   |
+| `invalidateSnapshot()`                      | The imperative twin of `[dataVersion]`, for a same-length refresh you cannot express through the input. No-op while `totalCount` is unset.                               |
+
+Each rendered option also binds `[forComboboxOption][posInSet]`, its absolute index in the source array. It is required when virtualizing: the directive keeps option data keyed by this index so it survives unmount.
 
 How navigation flows when virtualizing:
 
@@ -692,6 +692,7 @@ Inline autocomplete matches against the most recently rendered window overlaid w
 ```html
 <div
   forCombobox
+  forComboboxVirtualized
   [(query)]="query"
   [(value)]="value"
   [(open)]="open"
@@ -742,11 +743,11 @@ This uses the library's own [`injectVirtualizer`](../virtualization/README.md) c
 
 `[totalCount]` is also the result count the message pieces read: `[forComboboxStatus]`'s `count()` reports it rather than the size of the rendered window, so `{{ status.count() }} results.` announces the full count once and stays put while the window scrolls, and `[forComboboxEmpty]` stays hidden while a window with results has not rendered yet.
 
-When `[totalCount]` is omitted, the directive falls back to `options().length` and behaves exactly as before: `aria-setsize` is left to the platform default and navigation never emits `(scrollToIndex)`.
+When `[forComboboxVirtualized]` is absent or its `[totalCount]` is omitted, the combobox falls back to `options().length` and behaves exactly as before: `aria-setsize` is left to the platform default and navigation never emits `(scrollToIndex)`.
 
 > **Disabled options off-screen.** The directive learns an option's `disabled` only when it's been rendered at least once. While the consumer can pre-mark disabled rows with their own filter (most apps do), arrow nav cannot skip an off-screen disabled option it has never seen: it will land on it, the option will mount, and the next arrow press skips. Mark disabled rows in the source array if this matters.
 
-> **Listbox virtualization** ships the same contract: `[forListbox]` defaults to roving tabindex (DOM focus on the actual option element) and switches to the `aria-activedescendant` model when you set `[totalCount]`. See the [Listbox README "Virtualization"](../listbox/README.md#virtualization) section.
+> **Listbox virtualization** ships the same contract: `[forListbox]` defaults to roving tabindex (DOM focus on the actual option element) and switches to the `aria-activedescendant` model when you add `[forListboxVirtualized]` with `[totalCount]`. See the [Listbox README "Virtualization"](../listbox/README.md#virtualization) section.
 
 ## Writing direction
 
@@ -838,10 +839,11 @@ Hovering an option also makes it the activedescendant, so mouse and keyboard int
 
 Implements the [WAI-ARIA Combobox pattern](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/).
 
+- **Name the input.** `role="combobox"` takes its name from the author, and a placeholder is only a fallback that disappears once the user types. The root's `ariaLabel` names the listbox, not the input. Give `[forComboboxInput]` a `<label for>`, an `aria-label` or an `aria-labelledby`, or wrap the combobox in `[forField]` with a `[forLabel]`. In the picker anatomy, label `[forComboboxTrigger]` the same way, for example `aria-labelledby` pointing at a visible label and at the element showing the value.
 - Apply the input directive to an actual `<input>`: the browser's caret and selection semantics are what make inline autocomplete work, and screen readers expect a real text field for `role="combobox"`.
 - `role="listbox"` lives on `[forComboboxContent]` in the editable anatomy and on `[forComboboxList]` in the picker anatomy; the input's `aria-controls` targets whichever carries it. In the picker anatomy the popup surface (`[forComboboxContent]`) is a `role="dialog"` named by the trigger (`aria-labelledby`; a static `aria-label` or `aria-labelledby` on it wins), so it can hold the input next to the list without an `aria-required-owned-elements` violation. The "editable + list" shape, with no trigger, leaves it role-less.
 - `aria-multiselectable="true"` (multi mode) and the labelled role (`aria-label` / `aria-labelledby`, pointing at the input) sit on whichever element carries `role="listbox"`: content in the editable anatomy, the list in the picker anatomy.
-- `[forComboboxTrigger]` (picker anatomy) is a real `<button>` reflecting `aria-haspopup="dialog"`, `aria-expanded`, `aria-controls` (the dialog surface, while open), an `id` (a static one is kept), and native `disabled` from the combobox's effective disabled. The popup is a dialog rather than a listbox because focus moves into the search input inside it. It is exempt from the popup's outside-pointer dismissal layer, like the input.
+- `[forComboboxTrigger]` (picker anatomy) is a real `<button>` with `role="combobox"`, reflecting `aria-haspopup="dialog"`, `aria-expanded`, `aria-controls` (the dialog surface, while open), an `id` (a static one is kept), and native `disabled` from the combobox's effective disabled. It also reflects `aria-required`, `aria-invalid`, `aria-busy` and `aria-readonly` (truthy-only) from the root, so a closed picker announces a required, failing or validating field: the input carrying the same state only exists while the panel is open. It keeps the role while the dialog is open, next to the `role="combobox"` search input inside it. The popup is a dialog rather than a listbox because focus moves into the search input inside it. It is exempt from the popup's outside-pointer dismissal layer, like the input.
 - `[forComboboxContent]` and `[forComboboxList]` cancel a `mousedown` that would otherwise move focus onto the surface or blur the input, so a press between options leaves focus in the input. A press on a focusable descendant is let through.
 - `[forComboboxToggle]` (editable anatomy) is a real `<button>` with `tabindex="-1"`, a localizable `aria-label`, `aria-expanded`, `aria-controls` (the listbox, while open) and native `disabled`. It cancels `mousedown` so focus stays in the input, and it is exempt from the outside-pointer dismissal layer.
 - `[forComboboxClear]` has `tabindex="-1"` and a localizable `aria-label`. It cancels `mousedown` too, and is exempt from the outside-pointer dismissal layer, so clearing an open listbox leaves it open with focus in the input and the combobox untouched.
@@ -885,4 +887,4 @@ forty-cdk ships no styles: put your own class on each piece and key your CSS off
 
 ## Wrapping in a design system
 
-[Wrapping form primitives](../../../docs/wrapping-form-primitives.md) documents both supported wrapper patterns: `hostDirectives` with the exported `FOR_COMBOBOX_HOST_DIRECTIVE_INPUTS` / `FOR_COMBOBOX_HOST_DIRECTIVE_OUTPUTS` name tuples, and subclassing.
+[Wrapping form primitives](../../../docs/wrapping-form-primitives.md) documents both supported wrapper patterns: `hostDirectives` with the exported `FOR_COMBOBOX_HOST_DIRECTIVE_INPUTS` / `FOR_COMBOBOX_HOST_DIRECTIVE_OUTPUTS` name tuples, and subclassing. A virtualized wrapper adds `ForComboboxVirtualized` as a second `hostDirectives` entry and re-exposes its surface with `FOR_COMBOBOX_VIRTUALIZED_HOST_DIRECTIVE_INPUTS` / `FOR_COMBOBOX_VIRTUALIZED_HOST_DIRECTIVE_OUTPUTS`.

package/date-field/README.md

@@ -135,7 +135,7 @@ export class DobFormField {
 
 ### Date range
 
-`ForDateRangeField` is the range variant, shipped from this same entry point. Two labelled endpoint groups share locale, granularity and bounds; each is its own tab stop, so `Tab` steps start → end while the arrows move between segments inside one endpoint.
+`ForDateRangeField` is the range variant, shipped from this same entry point. Two labelled endpoint groups share locale, granularity and bounds; each is its own tab stop, so `Tab` steps start → end while the arrows move between segments inside one endpoint. Type an end date before the start and a message under the field says so, read from `disordered()`, since the red border alone is a colour cue only.
 
 ### Date & time range
 
@@ -143,7 +143,7 @@ With a time-capable adapter, a `granularity` finer than `'day'` appends time seg
 
 ### Range in Signal Forms
 
-`ForDateRangeField` implements `FormValueControl<DateRange | null>`, so `[formField]` binds the committed range into the form and pulls validation back out. A half-entered or out-of-order range keeps `value()` null, so a `required` field stays invalid until both endpoints are filled and ordered.
+`ForDateRangeField` implements `FormValueControl<DateRange | null>`, so `[formField]` binds the committed range into the form and pulls validation back out. A half-entered or out-of-order range keeps `value()` null, so a `required` field stays invalid until both endpoints are filled and ordered. The error message tells the two cases apart through `disordered()`.
 
 ## API
 
@@ -191,7 +191,7 @@ A native reset of the owning `<form>` returns `value` to what it held when the f
 | `[forDateFieldSegment]` | `data-disabled`    | present \| absent |
 | `[forDateFieldSegment]` | `data-readonly`    | present \| absent |
 
-`data-empty` marks the field only while **every** editable segment is empty (nothing has been entered); a partially-typed field is **not** empty. `data-placeholder` marks each individual segment that is still empty. `data-highlighted` is the current roving-tabindex segment and the only focus hook the consumer gets, shared with the other roving primitives. `[forDateFieldLiteral]` carries no data-\* attributes (it is `aria-hidden` and out of the tab order).
+`data-empty` marks the field only while **every** editable segment is empty (nothing has been entered); a partially-typed field is **not** empty. `data-placeholder` marks each individual segment that is still empty. `data-highlighted` marks the roving tab-stop segment, the vocabulary shared with the other roving primitives. It stays on that segment after focus leaves the field, so a style that reads as focus is scoped to the field's `:focus-within`, and to each endpoint group's in a range field, where each endpoint keeps its own. `[forDateFieldLiteral]` carries no data-\* attributes (it is `aria-hidden` and out of the tab order).
 
 ## Date-time field
 
@@ -306,7 +306,7 @@ The endpoint groups each accept an `ariaLabel` input for their own group label,
 
 ### Ordering
 
-The two endpoints are typed independently, so order is not guaranteed by construction the way the picker's two-click flow guarantees it. The field preserves the `DateRange` `end >= start` invariant by **never emitting an out-of-order range**: when both endpoints are complete but `start > end`, the typed segments are kept (not silently rewritten), `value` stays `null`, and the root reflects `aria-invalid="true"` + `data-range-error` so the disorder is perceivable and stylable. Editing either endpoint back into order emits the range.
+The two endpoints are typed independently, so order is not guaranteed by construction the way the picker's two-click flow guarantees it. The field preserves the `DateRange` `end >= start` invariant by **never emitting an out-of-order range**: when both endpoints are complete but `start > end`, the typed segments are kept (not silently rewritten), `value` stays `null`, and the root reflects `aria-invalid="true"` + `data-range-error` so the disorder is perceivable and stylable. Editing either endpoint back into order emits the range. The border colour alone is not an error message, so read the same state from `disordered()` (through `#range="forDateRangeField"`) and say it in words, as the Date range example does.
 
 ### Range keyboard and accessibility
 
@@ -339,13 +339,13 @@ Composes the [WAI-ARIA Spinbutton pattern](https://www.w3.org/WAI/ARIA/apg/patte
 - **`role="spinbutton"`** per segment, with `aria-valuemin` / `aria-valuemax` / `aria-valuenow` reflected; the month segment also exposes a localized `aria-valuetext` ("March"), so screen readers read the name rather than the number.
 - **Roving tabindex**: exactly one segment is tabbable, so `Tab` enters and leaves the whole field in one stop; arrows move between segments.
 - **Literals are `aria-hidden`** and never focusable, so assistive tech reads only the spinbutton segments.
-- **Boolean `data-*`** on each segment, present when true and absent when false: `data-highlighted` (focused/roving), `data-placeholder` (empty), `data-disabled`, `data-readonly`.
+- **Boolean `data-*`** on each segment, present when true and absent when false: `data-highlighted` (the roving tab stop, kept after blur), `data-placeholder` (empty), `data-disabled`, `data-readonly`.
 - **`aria-readonly` belongs on the segments, not the group.** WAI-ARIA supports it on `role="spinbutton"` but not on `role="group"`, so each segment carries `aria-readonly="true"` while the group reflects the `data-readonly` styling hook only.
 - **On-screen keyboards work.** A segment of a field that is neither disabled nor read-only is a `contenteditable="plaintext-only"` editing host with `inputmode="numeric"`, so tapping it on a touch device opens the numeric keypad (the AM/PM segment opens the text keyboard). What the keyboard or an input method types goes through the [Keyboard](#keyboard) map above and is never inserted into the segment, which keeps rendering `{{ seg.text }}`.
 
 ## Styling
 
-The library is styleless, so style the boolean `data-*` hooks yourself: `[data-highlighted]` (the focused/roving segment), `[data-placeholder]` (empty), `[data-disabled]` and `[data-readonly]` on the segments, and `[data-empty]` / `[data-disabled]` / `[data-readonly]` / `[data-required]` plus the form-state hooks `[data-touched]` / `[data-dirty]` / `[data-pending]` / `[data-invalid]` on the root group.
+The library is styleless, so style the boolean `data-*` hooks yourself: `[data-highlighted]` (the roving tab-stop segment, kept after focus leaves the field), `[data-placeholder]` (empty), `[data-disabled]` and `[data-readonly]` on the segments, and `[data-empty]` / `[data-disabled]` / `[data-readonly]` / `[data-required]` plus the form-state hooks `[data-touched]` / `[data-dirty]` / `[data-pending]` / `[data-invalid]` on the root group.
 
 forty-cdk ships no styles: put your own class on each piece and key your CSS off the `data-*` attributes listed under [Data attributes](#data-attributes), not off the `for*` selectors ([Styling forty-cdk](../../../docs/styling.md) explains why).
 
@@ -355,7 +355,7 @@ A segment is an editing host, so the browser paints a text caret in the focused
 .date-field-segment[data-placeholder] {
   color: GrayText;
 }
-.date-field-segment[data-highlighted] {
+.date-field:focus-within .date-field-segment[data-highlighted] {
   caret-color: transparent;
   background: Highlight;
   color: HighlightText;

package/date-picker/README.md

@@ -94,14 +94,13 @@ import { provideInternationalizedDateAdapter } from 'forty-cdk/internationalized
   ],
   providers: [...provideInternationalizedDateAdapter()],
   template: `
-    <div
-      forDatePicker
-      #picker="forDatePicker"
-      [(value)]="date"
-      placeholder="Pick a date"
-      ariaLabel="Choose a date"
-    >
-      <button forDatePickerTrigger type="button" class="date-picker-trigger">
+    <div forDatePicker #picker="forDatePicker" [(value)]="date" placeholder="Pick a date">
+      <button
+        forDatePickerTrigger
+        aria-label="Choose a date"
+        type="button"
+        class="date-picker-trigger"
+      >
         <span forDatePickerValue class="date-picker-value"></span>
         <svg class="date-picker-chevron" viewBox="0 0 24 24" aria-hidden="true">
           <path

package/dropdown-menu/README.md

@@ -65,7 +65,9 @@ import { ForMenuContent, ForMenuItem, ForMenuSeparator } from 'forty-cdk/menu';
           <hr forMenuSeparator class="dropdown-menu-separator" />
           <button forMenuItem class="dropdown-menu-item">Downloads</button>
           <button forMenuItem class="dropdown-menu-item">Bookmarks</button>
-          <button forMenuItem class="dropdown-menu-item" disabled>Sync (signed out)</button>
+          <button forMenuItem class="dropdown-menu-item" [disabled]="true">
+            Sync (signed out)
+          </button>
           <hr forMenuSeparator class="dropdown-menu-separator" />
           <button forMenuItem class="dropdown-menu-item dropdown-menu-item--danger">
             Clear browsing data

package/fesm2022/forty-cdk-carousel.mjs

@@ -1,5 +1,5 @@
 import * as i0 from "@angular/core";
-import { DestroyRef, Directive, ElementRef, InjectionToken, PLATFORM_ID, booleanAttribute, computed, effect, inject, input, isDevMode, model, numberAttribute, signal, untracked } from "@angular/core";
+import { DestroyRef, Directive, ElementRef, InjectionToken, PLATFORM_ID, booleanAttribute, computed, effect, inject, input, model, numberAttribute, signal, untracked } from "@angular/core";
 import { isPlatformBrowser } from "@angular/common";
 import { Collection, FLICK_STALE_VELOCITY_MS, FLICK_VELOCITY_PX_PER_MS, assertRootContext, attachSwipeDismiss, clamp, createSingleSlot, firstEnabledHost, flickVelocity, fortyWarn, hostAriaLabel, hostButtonType, hostId, injectElementSize, injectPauseController, injectPrefersReducedMotion, injectTextDirection, isScrollableAtEdge, moveIndex, navigateFromRovingItem, orphanContextError, registerHandle, resolveText, resolveTextInput, selectionTabStop } from "forty-cdk/core";
 import { FOR_CAROUSEL_DEFAULTS, FOR_CAROUSEL_DEFAULTS as FOR_CAROUSEL_DEFAULTS$1, provideForCarouselDefaults } from "forty-cdk/defaults";
@@ -101,7 +101,7 @@ var ForCarousel = class ForCarousel {
 			untracked(() => this.#syncTimer(rotating, interval));
 		});
 		this.#destroyRef.onDestroy(() => this.#clearTimer());
-		if (isDevMode()) {
+		if (typeof ngDevMode === "undefined" || ngDevMode) {
 			let warned = false;
 			effect(() => {
 				const slides = this.slideCount();