forty-cdk 0.34.0 → 0.35.0

package/README.md

@@ -20,14 +20,15 @@ npm install forty-cdk
 
 Required:
 
-- `@angular/common` `^22.0.1`
-- `@angular/core` `^22.0.1`
+- `@angular/common` `^22.1.0`
+- `@angular/core` `^22.1.0`
+- `@angular/platform-browser` `^22.1.0`, already installed by every Angular browser or server app
 
 Optional — install only if you use the matching entry point / primitives:
 
 | Peer                               | Needed by                                                                                                                                                                                                                                                                                                                                                                  |
 | ---------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `@angular/forms` `^22.0.1`         | Form-control primitives (`Switch`, `Checkbox`, `RadioGroup`, `Listbox`, `Select`, `Slider`, `Combobox`, …). They implement `FormValueControl` / `FormCheckboxControl` from `@angular/forms/signals` for `[formField]` auto-wiring. The contract is type-only, so the published bundle never references the package — consumers using only non-form primitives can skip it. |
+| `@angular/forms` `^22.1.0`         | Form-control primitives (`Switch`, `Checkbox`, `RadioGroup`, `Listbox`, `Select`, `Slider`, `Combobox`, …). They implement `FormValueControl` / `FormCheckboxControl` from `@angular/forms/signals` for `[formField]` auto-wiring. The contract is type-only, so the published bundle never references the package — consumers using only non-form primitives can skip it. |
 | `@internationalized/date` `^3.0.0` | The `forty-cdk/internationalized-date` entry point (`InternationalizedDateAdapter`, `InternationalizedDateTimeAdapter`). The date/time primitives themselves depend only on the abstract `DateAdapter` contract from `forty-cdk/date-adapter` — install this peer only when you import that entry point.                                                                   |
 
 ### Regular dependencies

package/calendar/README.md

@@ -446,7 +446,7 @@ The lower-level hooks (`visibleMonthNumber()`, `visibleYear()`, `monthOptions()`
     <h2 forCalendarHeading #h="forCalendarHeading" class="sr-only">{{ h.label() }}</h2>
   </header>
 
-  @switch (cal.view()) { @case ('day') {
+  @let view = cal.view(); @switch (view) { @case ('day') {
   <table forCalendarGrid #grid="forCalendarGrid">
     <thead forCalendarGridHeader>
       <tr>
@@ -489,7 +489,7 @@ The lower-level hooks (`visibleMonthNumber()`, `visibleYear()`, `monthOptions()`
       }
     </tbody>
   </table>
-  } }
+  } @default never; }
 </div>
 ```
 

package/carousel/README.md

@@ -57,7 +57,7 @@ Headless and styleless: it ships slide tracking, keyboard navigation, focus mana
 
 ## Examples
 
-Page through the slides with the buttons, the arrow keys or a drag. The root carries `data-orientation`, and `data-dragging` is on while a pointer holds the track.
+Page through the slides with the buttons or with the arrow keys on the dots. The root carries `data-orientation`, and only the current dot is in the tab order however the slide was reached.
 
 ```ts
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
@@ -144,7 +144,7 @@ interface Slide {
           <button
             forCarouselIndicator
             class="car-dot"
-            [attr.aria-label]="'Go to slide ' + (i + 1)"
+            [ariaLabel]="'Go to slide ' + (i + 1)"
           ></button>
         }
       </div>
@@ -186,7 +186,7 @@ Set `slidesPerView` above `1` to show several slides at once. Each slide is `fle
 
 ### Autoplay with pause control
 
-With `autoplay` set, the slides advance every three seconds, unless your system asks for reduced motion, in which case they wait for the rotation control. Hover the carousel or move focus into it and rotation pauses until you leave; stop it with the control and it stays stopped through hover and focus until you start it again. [Autoplay](#autoplay) has the full pause rules and why the control must be the first focusable child.
+With `autoplay` set, the slides advance every three seconds, unless your system asks for reduced motion, in which case they wait for the rotation control. Hover the carousel or move focus into it and rotation pauses until you leave; stop it with the control and it stays stopped through hover and focus until you start it again, and a Start from the control rotates straight away, with focus and the pointer still on it. [Autoplay](#autoplay) has the full pause rules and why the control must be the first focusable child.
 
 ### Pointer drag & touch swipe
 
@@ -238,8 +238,12 @@ focusable child** of the carousel to enable automatic slide rotation.
 
 **Behaviour:**
 
-- Rotation pauses on hover, on keyboard focus anywhere inside the carousel, and
-  while the browser tab is backgrounded. It resumes when none of those hold.
+- Rotation that started on its own (`autoplay`) pauses on hover, on keyboard
+  focus anywhere inside the carousel, and while the browser tab is backgrounded.
+  It resumes when none of those hold.
+- An explicit user Start (clicking the rotation control or calling `play()`)
+  rotates even while focus or the pointer is inside the carousel, which is where
+  the user is when they press it. Only a backgrounded tab still pauses it.
 - An explicit user stop (clicking the rotation control or calling `pause()`) is
   **sticky**: hover-in/out and focus-in/out will not restart it. Only an explicit
   Start does.
@@ -461,7 +465,8 @@ Reflected on the `[forCarouselViewport]` host this directive is applied to:
 ## Keyboard
 
 Keyboard navigation lives on the indicator group. Only the current
-indicator is in the tab order. Arrow keys move focus and activate the target slide
+indicator is in the tab order, including after prev / next, autoplay or a drag
+moved the slide. Arrow keys move focus and activate the target slide
 automatically.
 
 | Key                        | Action                                                                |

package/checkbox/README.md

@@ -63,6 +63,12 @@ A parent checkbox reflects `indeterminate` when only some children are selected.
 import { Component, computed, signal } from '@angular/core';
 import { ForCheckbox } from 'forty-cdk/checkbox';
 
+interface Topping {
+  readonly id: number;
+  readonly label: string;
+  readonly selected: boolean;
+}
+
 @Component({
   selector: 'demo-select-all',
   imports: [ForCheckbox],
@@ -80,7 +86,12 @@ import { ForCheckbox } from 'forty-cdk/checkbox';
       Select all toppings
     </button>
     @for (item of items(); track item.id) {
-      <button forCheckbox class="cb-row" [(checked)]="item.selected">
+      <button
+        forCheckbox
+        class="cb-row"
+        [checked]="item.selected"
+        (checkedChange)="setItem(item.id, $event)"
+      >
         <span class="cb">
           <span class="cb-check" aria-hidden="true"></span>
         </span>
@@ -90,7 +101,7 @@ import { ForCheckbox } from 'forty-cdk/checkbox';
   `,
 })
 export class DemoSelectAll {
-  readonly items = signal([
+  readonly items = signal<readonly Topping[]>([
     { id: 1, label: 'Mozzarella', selected: false },
     { id: 2, label: 'Mushrooms', selected: true },
     { id: 3, label: 'Pepperoni', selected: false },
@@ -106,6 +117,10 @@ export class DemoSelectAll {
     const next = !this.allChecked();
     this.items.update((list) => list.map((i) => ({ ...i, selected: next })));
   }
+
+  setItem(id: number, selected: boolean): void {
+    this.items.update((list) => list.map((i) => (i.id === id ? { ...i, selected } : i)));
+  }
 }
 ```