forty-cdk 0.2.0 → 0.3.0

package/number-input/README.md

@@ -0,0 +1,171 @@
+# Number Input
+
+Headless numeric spinbutton implementing the [WAI-ARIA Spinbutton pattern](https://www.w3.org/WAI/ARIA/apg/patterns/spinbutton/) and Angular's `FormValueControl<number | null>` from `@angular/forms/signals`, so it auto-wires with `[formField]` and auto-associates inside a [`[forField]`](../field/README.md) — label, description, and error wiring — with zero extra markup.
+
+It owns parsing, clamping to `[min, max]`, the full Spinbutton keyboard map, and optional `Intl.NumberFormat`-based display formatting. The directive sits on a `<input type="text">` (not `type="number"`, whose native UI is unstylable and locale-quirky); the focusable spinbutton input itself is the `FormValueControl`, mirroring `<button forSwitch>`.
+
+## Pieces
+
+| Class                     | Selector                    | Element     | Role                                                                 |
+| ------------------------- | --------------------------- | ----------- | -------------------------------------------------------------------- |
+| `ForNumberInput`          | `[forNumberInput]`          | `<input>`   | The spinbutton. Owns value, parsing, clamping, keyboard.             |
+| `ForNumberInputGroup`     | `[forNumberInputGroup]`     | any wrapper | Coordination wrapper — only needed when you use the stepper buttons. |
+| `ForNumberInputIncrement` | `[forNumberInputIncrement]` | `<button>`  | "Step up" affordance (`tabindex="-1"`).                              |
+| `ForNumberInputDecrement` | `[forNumberInputDecrement]` | `<button>`  | "Step down" affordance (`tabindex="-1"`).                            |
+
+> **Why the group?** A `<input>` is a void element, so the stepper buttons can't be its DOM descendants and therefore can't inject its context directly. `[forNumberInputGroup]` provides that context and forwards it to the `[forNumberInput]` registered beneath it. A standalone spinbutton (keyboard / `[(value)]` only) needs no group.
+
+## Inputs / models (`ForNumberInput`)
+
+| API                                                                    | Type                                      | Description                                                                                                        |
+| ---------------------------------------------------------------------- | ----------------------------------------- | ------------------------------------------------------------------------------------------------------------------ |
+| `value`                                                                | `model<number \| null>`                   | Two-way bindable value. `null` is the empty input (reflected as `data-empty`).                                     |
+| `min`                                                                  | `input<number \| undefined>`              | Lower bound. Reflected as `aria-valuemin`. Unset → no lower bound.                                                 |
+| `max`                                                                  | `input<number \| undefined>`              | Upper bound. Reflected as `aria-valuemax`. Unset → no upper bound.                                                 |
+| `step`                                                                 | `input<number>`                           | Increment for ArrowUp / ArrowDown and the buttons. Defaults to `1`.                                                |
+| `stepMultiplier`                                                       | `input<number>`                           | Multiplier over `step` for PageUp / PageDown. Defaults to `10` (configurable via `provideForNumberInputDefaults`). |
+| `formatOptions`                                                        | `input<Intl.NumberFormatOptions \| null>` | When set, drives the displayed text and `aria-valuetext`.                                                          |
+| `locale`                                                               | `input<string \| null>`                   | BCP 47 locale for parsing and formatting. Defaults to the runtime locale.                                          |
+| `disabled` / `readonly` / `required` / `invalid` / `pending` / `dirty` | `input<boolean>`                          | Shared form-control flags (see [Field](../field/README.md)).                                                       |
+| `name`                                                                 | `input<string>`                           | Mounts a hidden `<input>` carrying the **raw** number for native form submission.                                  |
+| `touched`                                                              | `model<boolean>`                          | Set to `true` on blur.                                                                                             |
+
+The host carries `data-empty` (while the value is `null`), `data-disabled`, and `data-readonly`, plus `data-touched` / `data-dirty` / `data-pending` / `data-invalid` from the shared form-control reflection.
+
+### Stepper buttons
+
+Both `[forNumberInputIncrement]` / `[forNumberInputDecrement]` take the uniform `ariaLabel` input for their accessible name and stay `tabindex="-1"` (focus belongs on the spinbutton). They reflect `[disabled]` + `data-disabled` at the bound (`max` for increment, `min` for decrement) or when the control is disabled / read-only.
+
+> Set the accessible name with the `ariaLabel` **input** (`ariaLabel="Increase"`), not the native `aria-label` attribute — like every forty-cdk primitive, the directive host-binds `aria-label` from that input and clears it when empty.
+
+## Keyboard (Spinbutton APG)
+
+| Key                     | Behavior                                                        |
+| ----------------------- | --------------------------------------------------------------- |
+| `ArrowUp` / `ArrowDown` | `value ± step`, clamped.                                        |
+| `PageUp` / `PageDown`   | `value ± step × stepMultiplier`, clamped.                       |
+| `Home` / `End`          | Set to `min` / `max` (when defined).                            |
+| `Enter`                 | Commit (clamp the typed text).                                  |
+| typing                  | Numeric characters parsed live; clamped on blur / Enter / step. |
+
+Stepping from an empty field lands on the clamped baseline (`min ?? 0`).
+
+## Stand-alone usage
+
+```ts
+import { Component, signal } from '@angular/core';
+import {
+  ForNumberInput,
+  ForNumberInputDecrement,
+  ForNumberInputGroup,
+  ForNumberInputIncrement,
+} from 'forty-cdk/number-input';
+
+@Component({
+  selector: 'demo-quantity',
+  imports: [ForNumberInputGroup, ForNumberInput, ForNumberInputIncrement, ForNumberInputDecrement],
+  template: `
+    <div forNumberInputGroup>
+      <button forNumberInputDecrement class="number-input-decrement" ariaLabel="Decrease">−</button>
+      <input forNumberInput [(value)]="qty" [min]="0" [max]="10" [step]="1" />
+      <button forNumberInputIncrement class="number-input-increment" ariaLabel="Increase">+</button>
+    </div>
+    <p>{{ qty() }}</p>
+  `,
+})
+export class DemoQuantity {
+  readonly qty = signal<number | null>(1);
+}
+```
+
+Keyboard-only (no buttons, no group):
+
+```html
+<input forNumberInput [(value)]="qty" [min]="0" [max]="100" />
+```
+
+## Formatting
+
+`formatOptions` (+ optional `locale`) drives both the displayed text and `aria-valuetext`; `value()` stays the raw number, and that raw number is what a surrounding `<form>` submits (via a hidden input).
+
+```html
+<input
+  forNumberInput
+  [(value)]="price"
+  locale="en-US"
+  [formatOptions]="{ style: 'currency', currency: 'USD' }"
+/>
+<!-- value() === 1234.5 → displayed "$1,234.50", aria-valuenow="1234.5" -->
+```
+
+## Field composition
+
+Drop the spinbutton inside a `[forField]` and it auto-associates with the label, description, and error region — no `id` / `aria-*` wiring by hand.
+
+```ts
+import { Component, signal } from '@angular/core';
+import { form, min, required, FormField } from '@angular/forms/signals';
+import { ForField, ForFieldError, ForLabel } from 'forty-cdk/field';
+import { ForNumberInput } from 'forty-cdk/number-input';
+
+@Component({
+  selector: 'demo-order',
+  imports: [ForField, ForLabel, ForFieldError, ForNumberInput, FormField],
+  template: `
+    <div forField>
+      <label forLabel>Quantity</label>
+      <input forNumberInput [formField]="order.qty" [min]="1" />
+      @if (err.shown()) {
+        <p forFieldError #err="forFieldError">{{ err.messages().join(', ') }}</p>
+      }
+    </div>
+  `,
+})
+export class DemoOrder {
+  readonly model = signal({ qty: null as number | null });
+  readonly order = form(this.model, (o) => {
+    required(o.qty, { message: 'Quantity is required' });
+    min(o.qty, 1, { message: 'At least one' });
+  });
+}
+```
+
+## Styling
+
+forty-cdk ships no styles. Add your own class to each piece — the `for*` selectors are the behavior API, not a styling contract (see [Styling forty-cdk](../../../../../docs/styling.md)). Key your CSS off the reflected `data-*` attributes below.
+
+### Data attributes
+
+| Piece                       | Attribute       | Values                                               |
+| --------------------------- | --------------- | ---------------------------------------------------- |
+| `[forNumberInput]`          | `data-empty`    | present (while `value()` is `null`) / absent         |
+| `[forNumberInput]`          | `data-disabled` | present / absent                                     |
+| `[forNumberInput]`          | `data-readonly` | present / absent                                     |
+| `[forNumberInput]`          | `data-touched`  | present / absent                                     |
+| `[forNumberInput]`          | `data-dirty`    | present / absent                                     |
+| `[forNumberInput]`          | `data-pending`  | present / absent                                     |
+| `[forNumberInput]`          | `data-invalid`  | present / absent                                     |
+| `[forNumberInputIncrement]` | `data-disabled` | present (at `max`, or disabled / read-only) / absent |
+| `[forNumberInputDecrement]` | `data-disabled` | present (at `min`, or disabled / read-only) / absent |
+
+`[forNumberInputGroup]` carries no styling attributes — it is a behavior-only coordination wrapper.
+
+```css
+.number-input-increment[data-disabled],
+.number-input-decrement[data-disabled] {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+```
+
+## Accessibility notes
+
+- **`role="spinbutton"` on a text input.** `aria-valuenow` / `aria-valuemin` / `aria-valuemax` reflect the value and bounds; `aria-valuetext` is emitted only when `formatOptions` is set (so the formatted text — "$1,234.50" — is announced instead of the bare number). `inputmode` is `numeric`, or `decimal` when fractional values are possible.
+- **Clamp on commit, validate on input.** Keystrokes update the parsed value live so you can type transient out-of-range text without fighting the caret; clamping to `[min, max]` happens on blur / Enter / step actions.
+- **Hidden input for submission.** Because the displayed text can be formatted, the visible input does **not** carry `name`; setting `name` mounts a hidden `<input>` with the raw number so native `<form>` serialization sees the value, not "$1,234.50". A disabled control is skipped automatically.
+- **Falsy state styling selects on absence.** `aria-disabled` / `aria-readonly` / `aria-required` / `aria-invalid` / `aria-busy` are emitted only when truthy — style the off state with `:not([aria-invalid])`, never `[aria-invalid="false"]`.
+- **`@angular/forms` is an optional peer.** If you're not using Signal Forms, don't install it — the directive runs fine on a plain `[(value)]` binding (the only `@angular/forms/signals` reference is a type import, erased at build).
+
+## Wrapping in a design system
+
+Both supported wrapper patterns — `hostDirectives` with the exported `FOR_NUMBER_INPUT_HOST_DIRECTIVE_INPUTS` / `FOR_NUMBER_INPUT_HOST_DIRECTIVE_OUTPUTS` name tuples, and subclassing — are documented in [Wrapping form primitives](../../../../../docs/wrapping-form-primitives.md).

package/otp-input/README.md

@@ -0,0 +1,198 @@
+# OTP Input
+
+Headless OTP / PIN input on the **single-input** model: one real `<input maxlength=N>` carries the whole code as a `string`, and the `[forOtpInputSlot]` pieces are a pure styling surface painted over it. There is **no** WAI-ARIA APG pattern for OTP — this approach gives the cleanest screen-reader experience (one ordinary text field, not "edit text, 1 of 6" announced N times), native mobile SMS autofill via `autocomplete="one-time-code"`, and native paste / caret / selection.
+
+It implements Angular's `FormValueControl<string>` from `@angular/forms/signals`, so it auto-wires with `[formField]` and auto-associates inside a [`[forField]`](../field/README.md) — label, description, and error wiring — with zero extra markup.
+
+## How it works
+
+Apply `[forOtpInput]` on a **wrapper** element. It becomes a `role="group"` and the directive injects the single visually-hidden-but-interactive `<input>` inside it. You style that input to **overlay the slots** (typically `position: absolute; inset: 0` with a transparent or `caret-color`-only appearance); pointer events land on it and native caret positioning drives which slot is active. The slots are inert visual boxes.
+
+The focusable, submittable control is the injected `<input>`, not the `role="group"` host — so form-control state, the field association, and native `name` submission all live on that input.
+
+## Pieces
+
+| Class             | Selector            | Element | Role                                                                                 |
+| ----------------- | ------------------- | ------- | ------------------------------------------------------------------------------------ |
+| `ForOtpInput`     | `[forOtpInput]`     | wrapper | `role="group"`. Owns the value, injects the real input, parsing / filtering / paste. |
+| `ForOtpInputSlot` | `[forOtpInputSlot]` | any     | One styling surface per index. Exposes `char()` / `active()` / `hasFakeCaret()`.     |
+
+## Inputs / models (`ForOtpInput`)
+
+| API                                                                    | Type                                                 | Description                                                                                                                         |
+| ---------------------------------------------------------------------- | ---------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
+| `value`                                                                | `model<string>`                                      | Two-way bindable code. Rendered length is clamped to `length`.                                                                      |
+| `length`                                                               | `input.required<number>`                             | Number of characters / slots.                                                                                                       |
+| `type`                                                                 | `input<'numeric' \| 'alphanumeric' \| 'alphabetic'>` | Allowed character class. Defaults to `'numeric'`. Ignored when `allowedPattern` is set.                                             |
+| `allowedPattern`                                                       | `input<RegExp \| null>`                              | Custom allowed-character RegExp (tested per character); overrides `type`.                                                           |
+| `mask`                                                                 | `input<boolean>`                                     | Obscure the rendered `char()` (PIN entry); `value()` stays raw.                                                                     |
+| `oneTimeCode`                                                          | `input<boolean>`                                     | Toggle `autocomplete="one-time-code"` for SMS autofill. Defaults to `true`.                                                         |
+| `pasteTransformer`                                                     | `input<((pasted: string) => string) \| null>`        | Rewrite pasted text before it fills the slots (e.g. strip separators).                                                              |
+| `ariaLabel`                                                            | `input<string \| null>`                              | Accessible name for the group, also reflected onto the real input when no field label applies. Emits `aria-label` only when truthy. |
+| `disabled` / `readonly` / `required` / `invalid` / `pending` / `dirty` | `input<boolean>`                                     | Shared form-control flags (see [Field](../field/README.md)).                                                                        |
+| `name`                                                                 | `input<string>`                                      | Reflected as the real input's `name` for native form submission.                                                                    |
+| `touched`                                                              | `model<boolean>`                                     | Set to `true` on blur.                                                                                                              |
+
+| Output          | Type                        | Fires                                                                        |
+| --------------- | --------------------------- | ---------------------------------------------------------------------------- |
+| `valueComplete` | `output<string>`            | When every slot is filled, by typing or paste.                               |
+| `valueInvalid`  | `output<{ value: string }>` | When an entered / pasted character is rejected by `type` / `allowedPattern`. |
+
+`ForOtpInput` also exposes a `slots()` signal (`readonly number[]`) for the `@for`, a `complete()` signal, and a `focus()` method.
+
+> **Why `allowedPattern`, not `pattern`?** `FormUiControl.pattern` is reserved by Signal Forms for an array of validation patterns the `[formField]` directive binds in. Reusing the name would break the `FormValueControl` contract and let the field overwrite your character filter, so the custom char-class RegExp is `allowedPattern`.
+
+### Slot (`ForOtpInputSlot`)
+
+| API              | Type                     | Description                                                      |
+| ---------------- | ------------------------ | ---------------------------------------------------------------- |
+| `index`          | `input.required<number>` | This slot's 0-based position.                                    |
+| `char()`         | `Signal<string \| null>` | The slot's character (masked when `mask`), or `null` when empty. |
+| `active()`       | `Signal<boolean>`        | Whether this slot is the active caret position.                  |
+| `hasFakeCaret()` | `Signal<boolean>`        | Whether to render a fake caret here (active + empty + focused).  |
+
+The slot host reflects boolean `data-active` (current caret slot) and `data-empty` (no character) for CSS.
+
+## Exported pattern constants
+
+`OTP_REGEXP_ONLY_DIGITS`, `OTP_REGEXP_ONLY_CHARS`, `OTP_REGEXP_ONLY_DIGITS_AND_CHARS` — bind one to `[allowedPattern]` for a custom restriction. `allowedCharForType` / `inputModeForType` expose the `type` → RegExp / `inputmode` mapping.
+
+## Usage
+
+```ts
+import { Component, signal } from '@angular/core';
+import { ForOtpInput, ForOtpInputSlot } from 'forty-cdk/otp-input';
+
+@Component({
+  selector: 'demo-otp',
+  imports: [ForOtpInput, ForOtpInputSlot],
+  template: `
+    <div
+      forOtpInput
+      class="otp-input"
+      [(value)]="code"
+      [length]="6"
+      type="numeric"
+      ariaLabel="Verification code"
+      #otp="forOtpInput"
+    >
+      @for (i of otp.slots(); track i) {
+        <div forOtpInputSlot [index]="i" #s="forOtpInputSlot" class="slot otp-input-slot">
+          {{ s.char() }}
+          @if (s.hasFakeCaret()) {
+            <span class="caret"></span>
+          }
+        </div>
+      }
+    </div>
+    <p>{{ code() }}</p>
+  `,
+})
+export class DemoOtp {
+  readonly code = signal('');
+}
+```
+
+The styling is yours. The key rule: make the injected `<input>` overlay the slots so it stays the interactive surface, e.g.
+
+```css
+.slot {
+  position: relative;
+  width: 2.5rem;
+  height: 3rem; /* ... */
+}
+.otp-input {
+  position: relative;
+  display: flex;
+  gap: 0.5rem;
+}
+.otp-input > input {
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+}
+.caret {
+  /* style + animate; gate the blink on prefers-reduced-motion */
+}
+```
+
+## Field composition
+
+Drop the OTP inside a `[forField]` and it auto-associates with the label, description, and error region — no `id` / `aria-*` wiring by hand. The label's `for`, `aria-labelledby`, `aria-describedby`, and `aria-errormessage` all land on the real input.
+
+```ts
+import { Component, signal } from '@angular/core';
+import { form, required, FormField } from '@angular/forms/signals';
+import { ForField, ForFieldError, ForLabel } from 'forty-cdk/field';
+import { ForOtpInput, ForOtpInputSlot } from 'forty-cdk/otp-input';
+
+@Component({
+  selector: 'demo-otp-field',
+  imports: [ForField, ForLabel, ForFieldError, ForOtpInput, ForOtpInputSlot, FormField],
+  template: `
+    <div forField>
+      <label forLabel>One-time code</label>
+      <div
+        forOtpInput
+        class="otp-input"
+        [formField]="login.otp"
+        [length]="6"
+        type="numeric"
+        #otp="forOtpInput"
+      >
+        @for (i of otp.slots(); track i) {
+          <div forOtpInputSlot class="otp-input-slot" [index]="i" #s="forOtpInputSlot">
+            {{ s.char() }}
+          </div>
+        }
+      </div>
+      @if (err.shown()) {
+        <p forFieldError #err="forFieldError">{{ err.messages().join(', ') }}</p>
+      }
+    </div>
+  `,
+})
+export class DemoOtpField {
+  readonly model = signal({ otp: '' });
+  readonly login = form(this.model, (l) => {
+    required(l.otp, { message: 'Enter the 6-digit code' });
+  });
+}
+```
+
+## Styling
+
+forty-cdk ships no styles. Add your own class to each piece — the `for*` selectors are the behavior API, not a styling contract (see [Styling forty-cdk](../../../../../docs/styling.md)). Key your CSS off the reflected `data-*` attributes below.
+
+### Data attributes
+
+| Piece               | Attribute       | Values           |
+| ------------------- | --------------- | ---------------- |
+| `[forOtpInput]`     | `data-complete` | present / absent |
+| `[forOtpInput]`     | `data-disabled` | present / absent |
+| `[forOtpInputSlot]` | `data-active`   | present / absent |
+| `[forOtpInputSlot]` | `data-empty`    | present / absent |
+
+The injected real `<input>` (created inside the `[forOtpInput]` wrapper) additionally carries `data-disabled`, `data-readonly`, `data-touched`, `data-dirty`, `data-pending`, and `data-invalid` (present / absent), mirroring its form-control flags.
+
+```css
+.otp-input-slot[data-active] {
+  outline: 2px solid var(--ring);
+}
+.otp-input-slot[data-empty] {
+  color: transparent;
+}
+```
+
+## Accessibility notes
+
+- **One real text field, not N boxes.** The `role="group"` wrapper carries the `ariaLabel`; the single `<input>` inside it is the focusable control, and it reflects the same `ariaLabel` as its own `aria-label` whenever no field-provided `aria-labelledby` applies (a `[forField]` label always wins). Screen readers announce the group name on entry and treat the code as one ordinary, named text field.
+- **Mobile autofill & keypad.** `autocomplete="one-time-code"` (toggle with `oneTimeCode`) drives SMS autofill; `inputmode` is `numeric` for `type="numeric"` (plus a legacy `pattern="[0-9]*"` for older iOS), `text` otherwise.
+- **Character filtering happens live.** Rejected characters (per `type` / `allowedPattern`) are dropped before they reach the value and fire `valueInvalid`. Paste runs through `pasteTransformer`, is filtered, and sliced to `length`.
+- **Fake caret is yours to style.** The slot exposes `hasFakeCaret()`; render and animate the blink in CSS, gated on `prefers-reduced-motion`. There is no JS-driven blink.
+- **Falsy state styling selects on absence.** `aria-disabled` / `aria-readonly` / `aria-required` / `aria-invalid` / `aria-busy` are emitted only when truthy — style the off state with `:not([aria-invalid])`, never `[aria-invalid="false"]`.
+- **`@angular/forms` is an optional peer.** The directive runs fine on a plain `[(value)]` binding; the only `@angular/forms/signals` reference is a type import, erased at build.
+
+## Wrapping in a design system
+
+Both supported wrapper patterns — `hostDirectives` with the exported `FOR_OTP_INPUT_HOST_DIRECTIVE_INPUTS` / `FOR_OTP_INPUT_HOST_DIRECTIVE_OUTPUTS` name tuples, and subclassing — are documented in [Wrapping form primitives](../../../../../docs/wrapping-form-primitives.md).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "forty-cdk",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Headless / styleless UI primitives for Angular with WAI-ARIA accessibility built in.",
   "keywords": [
     "angular",
@@ -57,10 +57,222 @@
       "types": "./types/forty-cdk.d.ts",
       "default": "./fesm2022/forty-cdk.mjs"
     },
+    "./accordion": {
+      "types": "./types/forty-cdk-accordion.d.ts",
+      "default": "./fesm2022/forty-cdk-accordion.mjs"
+    },
+    "./aspect-ratio": {
+      "types": "./types/forty-cdk-aspect-ratio.d.ts",
+      "default": "./fesm2022/forty-cdk-aspect-ratio.mjs"
+    },
+    "./avatar": {
+      "types": "./types/forty-cdk-avatar.d.ts",
+      "default": "./fesm2022/forty-cdk-avatar.mjs"
+    },
+    "./breadcrumbs": {
+      "types": "./types/forty-cdk-breadcrumbs.d.ts",
+      "default": "./fesm2022/forty-cdk-breadcrumbs.mjs"
+    },
+    "./breakpoints": {
+      "types": "./types/forty-cdk-breakpoints.d.ts",
+      "default": "./fesm2022/forty-cdk-breakpoints.mjs"
+    },
+    "./button": {
+      "types": "./types/forty-cdk-button.d.ts",
+      "default": "./fesm2022/forty-cdk-button.mjs"
+    },
+    "./calendar": {
+      "types": "./types/forty-cdk-calendar.d.ts",
+      "default": "./fesm2022/forty-cdk-calendar.mjs"
+    },
+    "./carousel": {
+      "types": "./types/forty-cdk-carousel.d.ts",
+      "default": "./fesm2022/forty-cdk-carousel.mjs"
+    },
+    "./checkbox": {
+      "types": "./types/forty-cdk-checkbox.d.ts",
+      "default": "./fesm2022/forty-cdk-checkbox.mjs"
+    },
+    "./combobox": {
+      "types": "./types/forty-cdk-combobox.d.ts",
+      "default": "./fesm2022/forty-cdk-combobox.mjs"
+    },
+    "./context-menu": {
+      "types": "./types/forty-cdk-context-menu.d.ts",
+      "default": "./fesm2022/forty-cdk-context-menu.mjs"
+    },
+    "./core": {
+      "types": "./types/forty-cdk-core.d.ts",
+      "default": "./fesm2022/forty-cdk-core.mjs"
+    },
+    "./date-field": {
+      "types": "./types/forty-cdk-date-field.d.ts",
+      "default": "./fesm2022/forty-cdk-date-field.mjs"
+    },
+    "./date-picker": {
+      "types": "./types/forty-cdk-date-picker.d.ts",
+      "default": "./fesm2022/forty-cdk-date-picker.mjs"
+    },
+    "./dialog": {
+      "types": "./types/forty-cdk-dialog.d.ts",
+      "default": "./fesm2022/forty-cdk-dialog.mjs"
+    },
+    "./disclosure": {
+      "types": "./types/forty-cdk-disclosure.d.ts",
+      "default": "./fesm2022/forty-cdk-disclosure.mjs"
+    },
+    "./drag-drop": {
+      "types": "./types/forty-cdk-drag-drop.d.ts",
+      "default": "./fesm2022/forty-cdk-drag-drop.mjs"
+    },
+    "./drawer": {
+      "types": "./types/forty-cdk-drawer.d.ts",
+      "default": "./fesm2022/forty-cdk-drawer.mjs"
+    },
+    "./dropdown-menu": {
+      "types": "./types/forty-cdk-dropdown-menu.d.ts",
+      "default": "./fesm2022/forty-cdk-dropdown-menu.mjs"
+    },
+    "./field": {
+      "types": "./types/forty-cdk-field.d.ts",
+      "default": "./fesm2022/forty-cdk-field.mjs"
+    },
+    "./fieldset": {
+      "types": "./types/forty-cdk-fieldset.d.ts",
+      "default": "./fesm2022/forty-cdk-fieldset.mjs"
+    },
+    "./file-upload": {
+      "types": "./types/forty-cdk-file-upload.d.ts",
+      "default": "./fesm2022/forty-cdk-file-upload.mjs"
+    },
+    "./hover-card": {
+      "types": "./types/forty-cdk-hover-card.d.ts",
+      "default": "./fesm2022/forty-cdk-hover-card.mjs"
+    },
+    "./input": {
+      "types": "./types/forty-cdk-input.d.ts",
+      "default": "./fesm2022/forty-cdk-input.mjs"
+    },
     "./internationalized-date": {
       "types": "./types/forty-cdk-internationalized-date.d.ts",
       "default": "./fesm2022/forty-cdk-internationalized-date.mjs"
     },
+    "./listbox": {
+      "types": "./types/forty-cdk-listbox.d.ts",
+      "default": "./fesm2022/forty-cdk-listbox.mjs"
+    },
+    "./menu": {
+      "types": "./types/forty-cdk-menu.d.ts",
+      "default": "./fesm2022/forty-cdk-menu.mjs"
+    },
+    "./menubar": {
+      "types": "./types/forty-cdk-menubar.d.ts",
+      "default": "./fesm2022/forty-cdk-menubar.mjs"
+    },
+    "./meter": {
+      "types": "./types/forty-cdk-meter.d.ts",
+      "default": "./fesm2022/forty-cdk-meter.mjs"
+    },
+    "./navigation-menu": {
+      "types": "./types/forty-cdk-navigation-menu.d.ts",
+      "default": "./fesm2022/forty-cdk-navigation-menu.mjs"
+    },
+    "./number-input": {
+      "types": "./types/forty-cdk-number-input.d.ts",
+      "default": "./fesm2022/forty-cdk-number-input.mjs"
+    },
+    "./otp-input": {
+      "types": "./types/forty-cdk-otp-input.d.ts",
+      "default": "./fesm2022/forty-cdk-otp-input.mjs"
+    },
+    "./pagination": {
+      "types": "./types/forty-cdk-pagination.d.ts",
+      "default": "./fesm2022/forty-cdk-pagination.mjs"
+    },
+    "./pane-resizer": {
+      "types": "./types/forty-cdk-pane-resizer.d.ts",
+      "default": "./fesm2022/forty-cdk-pane-resizer.mjs"
+    },
+    "./popover": {
+      "types": "./types/forty-cdk-popover.d.ts",
+      "default": "./fesm2022/forty-cdk-popover.mjs"
+    },
+    "./progress": {
+      "types": "./types/forty-cdk-progress.d.ts",
+      "default": "./fesm2022/forty-cdk-progress.mjs"
+    },
+    "./radio-group": {
+      "types": "./types/forty-cdk-radio-group.d.ts",
+      "default": "./fesm2022/forty-cdk-radio-group.mjs"
+    },
+    "./scroll-area": {
+      "types": "./types/forty-cdk-scroll-area.d.ts",
+      "default": "./fesm2022/forty-cdk-scroll-area.mjs"
+    },
+    "./search": {
+      "types": "./types/forty-cdk-search.d.ts",
+      "default": "./fesm2022/forty-cdk-search.mjs"
+    },
+    "./select": {
+      "types": "./types/forty-cdk-select.d.ts",
+      "default": "./fesm2022/forty-cdk-select.mjs"
+    },
+    "./separator": {
+      "types": "./types/forty-cdk-separator.d.ts",
+      "default": "./fesm2022/forty-cdk-separator.mjs"
+    },
+    "./signal-forms": {
+      "types": "./types/forty-cdk-signal-forms.d.ts",
+      "default": "./fesm2022/forty-cdk-signal-forms.mjs"
+    },
+    "./slider": {
+      "types": "./types/forty-cdk-slider.d.ts",
+      "default": "./fesm2022/forty-cdk-slider.mjs"
+    },
+    "./stepper": {
+      "types": "./types/forty-cdk-stepper.d.ts",
+      "default": "./fesm2022/forty-cdk-stepper.mjs"
+    },
+    "./switch": {
+      "types": "./types/forty-cdk-switch.d.ts",
+      "default": "./fesm2022/forty-cdk-switch.mjs"
+    },
+    "./table": {
+      "types": "./types/forty-cdk-table.d.ts",
+      "default": "./fesm2022/forty-cdk-table.mjs"
+    },
+    "./tabs": {
+      "types": "./types/forty-cdk-tabs.d.ts",
+      "default": "./fesm2022/forty-cdk-tabs.mjs"
+    },
+    "./time-field": {
+      "types": "./types/forty-cdk-time-field.d.ts",
+      "default": "./fesm2022/forty-cdk-time-field.mjs"
+    },
+    "./time-picker": {
+      "types": "./types/forty-cdk-time-picker.d.ts",
+      "default": "./fesm2022/forty-cdk-time-picker.mjs"
+    },
+    "./toast": {
+      "types": "./types/forty-cdk-toast.d.ts",
+      "default": "./fesm2022/forty-cdk-toast.mjs"
+    },
+    "./toggle": {
+      "types": "./types/forty-cdk-toggle.d.ts",
+      "default": "./fesm2022/forty-cdk-toggle.mjs"
+    },
+    "./toolbar": {
+      "types": "./types/forty-cdk-toolbar.d.ts",
+      "default": "./fesm2022/forty-cdk-toolbar.mjs"
+    },
+    "./tooltip": {
+      "types": "./types/forty-cdk-tooltip.d.ts",
+      "default": "./fesm2022/forty-cdk-tooltip.mjs"
+    },
+    "./tree": {
+      "types": "./types/forty-cdk-tree.d.ts",
+      "default": "./fesm2022/forty-cdk-tree.mjs"
+    },
     "./virtualization": {
       "types": "./types/forty-cdk-virtualization.d.ts",
       "default": "./fesm2022/forty-cdk-virtualization.mjs"