@konce-pt/angular 0.9.1 → 0.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@konce-pt/angular",
-  "version": "0.9.1",
+  "version": "0.10.0",
   "description": "Open-source Angular 22 component library on Signals & Signal Forms — 70+ components, rich data table, zoneless, fully tokenized. Selektory kpt-*, klasy Kpt*.",
   "license": "MIT",
   "author": "konce.pt",
@@ -46,16 +46,16 @@
   },
   "dependencies": {
     "tslib": "^2.3.0",
-    "@konce-pt/backdrop": "0.9.1",
-    "@konce-pt/chart": "0.9.1",
-    "@konce-pt/i18n": "0.9.1",
-    "@konce-pt/icons": "0.9.1",
-    "@konce-pt/map": "0.9.1",
-    "@konce-pt/table": "0.9.1",
-    "@konce-pt/datetime": "0.9.1",
-    "@konce-pt/roadmap": "0.9.1",
-    "@konce-pt/mention": "0.9.1",
-    "@konce-pt/chat": "0.9.1"
+    "@konce-pt/backdrop": "0.10.0",
+    "@konce-pt/map": "0.10.0",
+    "@konce-pt/chat": "0.10.0",
+    "@konce-pt/roadmap": "0.10.0",
+    "@konce-pt/icons": "0.10.0",
+    "@konce-pt/chart": "0.10.0",
+    "@konce-pt/mention": "0.10.0",
+    "@konce-pt/datetime": "0.10.0",
+    "@konce-pt/table": "0.10.0",
+    "@konce-pt/i18n": "0.10.0"
   },
   "module": "fesm2022/konce-pt-angular.mjs",
   "typings": "types/konce-pt-angular.d.ts",

package/src/lib/accordion/llms.txt

@@ -18,3 +18,9 @@ Import: `import { KptAccordion, KptAccordionPanel } from '@konce-pt/angular';`
     </kpt-accordion>
 
 Single/multi coordination: a panel calls its parent through inject(KptAccordion).
+
+## Accessibility
+Each header is a native button with `aria-expanded` and `aria-controls`; the body is a
+`role="region"` named by its header (`aria-labelledby`), so a screen reader announces both the state
+and what it belongs to. A collapsed body is `inert` and `aria-hidden`, skipped by the keyboard and
+the screen reader alike.

package/src/lib/alert/llms.txt

@@ -9,6 +9,7 @@ Import: `import { KptAlert } from '@konce-pt/angular';`
 ## Inputs / outputs
 - `variant`: 'info'|'success'|'warning'|'danger' (default 'info')
 - `title`: string; `dismissible`: boolean (a × button)
+- `visible`: model<boolean> (default true) — shown or closed, two-way; × sets `false`
 - `closed`: output<void>
 
 ## Example
@@ -17,3 +18,9 @@ Import: `import { KptAlert } from '@konce-pt/angular';`
 
 ## Tokens
 The accent comes from `--kpt-color-{info,success,warning,danger}`; the background is a color-mix over `--kpt-color-surface`.
+
+## Accessibility
+The role follows the weight of the message: `info` and `success` are `role="status"` (read
+politely, without interrupting), `warning` and `danger` are `role="alert"` (read at once). The icon
+is decorative; the × button is labelled from `common.close`. After closing, focus falls back to the
+page — move it yourself in the close handler when the alert was reached with the keyboard.

package/src/lib/app-shell/llms.txt

@@ -90,6 +90,7 @@ otherwise you end up with two layers of the same logic.
 `--kpt-sidenav-width` (16rem), `--kpt-sidenav-rail-width` (4rem), `--kpt-z-overlay`,
 `--kpt-color-overlay-scrim`, `--kpt-elevation-3`, `--kpt-motion-duration-base`.
 
-## Deferred
-A focus trap and returning focus to the button after closing (consistent with `kpt-drawer`, which does not
-have them either — that is a separate task for the whole repo). The `<aside>` already carries `tabindex="-1"`.
+## Focus
+Opening the overlay moves focus into the panel (its first focusable element, or the `<aside>`
+itself); closing it returns focus to where it came from — usually the menu button — unless the user
+has already moved it elsewhere. An overlay that is open when the page loads does not take focus.

package/src/lib/autocomplete/llms.txt

@@ -12,5 +12,18 @@ Import: `import { KptAutocomplete } from '@konce-pt/angular';`
 ## Example
     <kpt-autocomplete [formField]="f.city" [options]="cities" placeholder="City…" />
 
+## Screen reader and keyboard
+The WAI-ARIA combobox-with-list pattern: focus stays in the field, `aria-autocomplete="list"`,
+`aria-controls` and `aria-activedescendant` point at the active suggestion, and a polite live region
+says how many suggestions there are (`autocomplete.results`) or that there are none
+(`autocomplete.noResults`). Matching ignores case and diacritics ("lodz" finds "Łódź"). `↑` from the
+field goes to the last suggestion; the first `Escape` closes the list, the second clears the field.
+
+## Label and description
+`id` goes to the native field — the host never carries it; without one it is generated. Inside
+`kpt-form-field` the control links itself: the wrapper's `label[for]` points at it and the hint or
+error is added to `aria-describedby`, so `controlId` is not needed. Without a wrapper, name it with
+`ariaLabel`.
+
 ## Tokens
 `--kpt-form-field-*`, the panel `--kpt-color-surface-raised`.

package/src/lib/avatar/llms.txt

@@ -5,6 +5,7 @@ An avatar — an image, initials (from `name`) or an icon. Import: `import { Kpt
 ## Inputs
 - `src`: string|null (an image); `name`: string (initials, up to 2 letters); `icon`: string|null
 - `size`: 'sm'|'md'|'lg'|'xl'; `shape`: 'circle'|'square'
+- `decorative`: boolean — hides the avatar from screen readers (the name is written next to it)
 
 ## Examples
     <kpt-avatar src="/u/anna.jpg" />
@@ -12,9 +13,11 @@ An avatar — an image, initials (from `name`) or an icon. Import: `import { Kpt
     <kpt-avatar icon="user" shape="square" />
 
 ## Accessibility
-`name` goes into the native `title` (a tooltip with the full name — initials on their own say nothing).
-Without `src`: `role="img"` + `aria-label="name"`, and the initials are `aria-hidden`. With `src` the label
-is carried by the image's `alt` — it is not duplicated in `aria-label`.
+`name` goes into the native `title` (initials alone say nothing). With a photo the name is the
+image's `alt`; without one the avatar is `role="img"` with `aria-label`, and the initials are
+`aria-hidden`. A photo that fails to load falls back to the initials (or the icon); a new `src` is
+tried again. `decorative` removes the avatar from the accessibility tree — use it when the name is
+already written next to it.
 
 ## Tokens
 `--kpt-color-muted`, `--kpt-color-on-muted`, `--kpt-radius-full`/`--kpt-radius-md`.

package/src/lib/avatar-group/llms.txt

@@ -7,6 +7,7 @@ Import: `import { KptAvatarGroup } from '@konce-pt/angular';`
 - `avatars`: KptAvatarItem[] — { name?, src?, icon? }
 - `max`: number (default 4) — how many to show before "+N"
 - `size`: 'sm' | 'md' | 'lg' | 'xl'
+- `label`: string — the group's name; with it the row is `role="group"`
 
 Every avatar in the group shows its `name` in a tooltip (the `title` from `kpt-avatar`), so
 the initials stay readable even at `size="sm"`.
@@ -16,3 +17,8 @@ the initials stay readable even at `size="sm"`.
 
 ## Tokens
 The overlap uses a `--kpt-color-surface` ring; "+N" uses `--kpt-color-muted`.
+
+## Accessibility
+Every avatar keeps its own name. With `label` the row is `role="group"` with that name. The “+N”
+counter is `role="img"` named from `avatarGroup.more` (`{count}` — “2 more”), with the hidden names
+in its `title`. The overlap uses `margin-inline-start`, so it mirrors in RTL.

package/src/lib/badge/llms.txt

@@ -4,11 +4,13 @@ A badge — a counter or a status dot; standalone or overlaid on content (`overl
 Import: `import { KptBadge } from '@konce-pt/angular';`
 
 ## Inputs
-- `value`: string|number|null; `variant`: 'neutral'|'primary'|'success'|'danger'|'warning'|'info'
+- `value`: string|number|null; `variant`: 'neutral'|'primary'|'success'|'danger'|'warning'|'info' (default 'primary')
 - `size`: 'sm'|'md'|'lg' (default 'md') — height 1rem / 1.25rem / 1.5rem. The type size, the side inset
   and the dot diameter are derived from the height, so the proportions hold at every size.
   `sm` is meant for a badge sitting inside a line of text (a menu entry, a label, a table cell).
 - `dot`: boolean (a dot with no number); `overlay`: boolean (the corner of the content); `max`: number (default 99 → '99+')
+- `label`: string — the meaning for screen readers (“3 unread”, “online”); the visible text is then `aria-hidden`
+- `hideZero`: boolean — hides the badge when `value` is `0` or `null` (not with `dot`)
 
 ## Examples
     <kpt-badge [value]="3" variant="danger" />
@@ -17,4 +19,11 @@ Import: `import { KptBadge } from '@konce-pt/angular';`
     <kpt-badge dot variant="success" overlay><kpt-avatar name="AK" /></kpt-badge>
 
 ## Tokens
-`--kpt-color-{primary,muted,success,danger,warning,info}`, the overlay ring from `--kpt-color-surface`.
+Background `--kpt-color-{primary,success,danger,warning,info}` with the text in the matching `*-contrast` token (`--kpt-color-on-primary` for `primary`) — the same pairs as `kpt-button`; `neutral` is `--kpt-color-muted` / `--kpt-color-on-muted`; the overlay ring comes from `--kpt-color-surface`.
+
+## Accessibility
+On its own a badge is just a number, and a `dot` is nothing. `label` gives it a meaning — a visually
+hidden `.kpt-badge__label` that screen readers read instead of the visible text. Without `label`, put
+the meaning into the name of the control the badge sits on. Count changes are not announced. The
+`success`, `warning` and `info` variants draw the text in `--kpt-color-surface`; check the contrast
+in your theme, especially for `warning`.

package/src/lib/bottom-sheet/llms.txt

@@ -18,5 +18,12 @@ The sheet is always in the DOM (no `@if`), hidden with `transform` **and** `visi
 out of the tab order and out of the accessibility tree without `inert`, and it does so on the very first frame,
 without waiting for JavaScript. `prefers-reduced-motion: reduce` drops the transitions.
 
+## Focus and keyboard
+Opening moves focus into the panel (`cdkFocusInitial`, else its first focusable element, else the
+panel itself) and traps it there — `Tab` / `Shift+Tab` wrap inside, as `aria-modal="true"` promises.
+Closing returns focus to the element that had it before. `Escape` closes the panel. The panel
+is named by its `header` through `aria-labelledby`. The shared helper is `shared/modal-focus.ts` (on the CDK focus trap; the React port has a twin hook).
+
 ## Tokens
-The panel `--kpt-color-surface-raised`, the top radius `--kpt-radius-lg`, `--kpt-elevation-4`.
+The panel `--kpt-color-surface-raised`, the top radius `--kpt-radius-lg`, `--kpt-elevation-4`; the backdrop
+`--kpt-color-overlay-scrim`.

package/src/lib/breadcrumb/llms.txt

@@ -10,3 +10,8 @@ A navigation trail. Import: `import { KptBreadcrumb, KptBreadcrumbItem } from '@
 
 ## Tokens
 The separator is a `chevron-right` icon; links `--kpt-color-on-surface-muted` → hover `--kpt-color-primary`.
+
+## Accessibility
+A `<nav>` landmark labelled from `breadcrumb.label`, holding an ordered list (`<ol>`/`<li>`), so a
+screen reader announces how many levels the trail has. The current page carries
+`aria-current="page"`; separators are icons hidden from assistive technology.

package/src/lib/button/llms.txt

@@ -26,6 +26,9 @@ you pass `href`. Standalone, OnPush, signals. Import: `import { KptButton } from
 - `iconClass` / `iconEndClass`: string — an extra class on that icon
 - `href`: string — renders an `<a>` instead of a `<button>`
 - `target` / `rel`: string — only meaningful together with `href`
+- `ariaLabel`: string | null (default null) — the accessible name for an icon-only button; it lands on
+  the inner `<button>`/`<a>`. Do not use `[attr.aria-label]` on `<kpt-button>`: that puts it on the host,
+  which has no button role, and a screen reader announces a nameless button
 
 ## Events
 None of its own — the native `click` bubbles out of the inner `<button>`; bind `(click)` on `<kpt-button>`.

package/src/lib/card/llms.txt

@@ -9,6 +9,8 @@ Import: `import { KptCard } from '@konce-pt/angular';`
 ## Inputs
 - `variant`: 'elevated' | 'outlined' (default 'elevated')
 - `header`: string — optional header text
+- `headingLevel`: 1–6 | null (default null) — makes `header` a heading of that level
+- `headingLevel`: 1–6 | null (default null) — makes `header` a heading of that level
 - `flush`: boolean — a body with no padding (for rich layouts that manage their own sections)
 
 ## Content projection
@@ -49,3 +51,9 @@ than a placement one. Put the wrapper inside the footer, not the footer inside t
 
 ## Tokens
 `--kpt-card-{bg,fg,border,radius,padding,shadow}`.
+
+## Accessibility
+The card is a plain container with no role of its own. `header` is styled text by default — set
+`headingLevel` (1–6) to make it a heading (`role="heading"` + `aria-level`) when the card should
+appear in the page outline; leave it off for tiles that would only clutter it. Give media images a
+meaningful `alt`, or `alt=""` when decorative.

package/src/lib/carousel/llms.txt

@@ -6,6 +6,7 @@ Data through `items`, the slide template through projection: `<ng-template let-i
 ## Inputs / model
 - `items`: T[] — the slide data
 - `activeIndex`: model<number> (default 0) — the two-way index of the active slide
+- `label`: string — the region name; empty = `carousel.label`
 
 ## Content projection
 - `<ng-template let-item let-i="index">` — the template for a single slide; context: `$implicit` = the item, `index`.
@@ -21,4 +22,15 @@ Data through `items`, the slide template through projection: `<ng-template let-i
     </kpt-carousel>
 
 ## Tokens
-Navigation and dots `--kpt-color-primary`; the arrow background `--kpt-color-surface-raised`.
+The active dot `--kpt-color-primary`; the arrows `--kpt-color-surface` (80% via `color-mix`, solid on hover) with `--kpt-elevation-2`; the slide transition `--kpt-motion-duration-base`.
+
+## Accessibility
+The WAI-ARIA carousel pattern without autoplay. The root is `role="region"` with
+`aria-roledescription` from `carousel.roleCarousel` (“carousel”) and a name from `label` or
+`carousel.label`. Each slide is `role="group"` with `aria-roledescription` from `carousel.roleSlide`
+and a name from `carousel.slideOf` (“Slide 2 of 4”); slides outside the view are `inert` and
+`aria-hidden`, so Tab never lands on an invisible link. The track is `aria-live="polite"`, so the
+slide that comes in is announced. The arrows use `aria-disabled` at the ends instead of `disabled`,
+so they keep the focus; the active dot carries `aria-current`, and every dot has a 24 px target
+(WCAG 2.5.8) with an 8 px visible dot. The transition is off under `prefers-reduced-motion`; in RTL
+the track and the chevrons follow the reading direction (`:dir(rtl)`).

package/src/lib/checkbox/llms.txt

@@ -11,5 +11,15 @@ Import: `import { KptCheckbox } from '@konce-pt/angular';`
 - `label`: string
 - `disabled` / `invalid` / `touched`: boolean (bound by FormField); the `touch` output (blur)
 
+## Screen reader and keyboard
+`indeterminate`: model<boolean> — the "some selected" state for a "select all" box (a dash in the
+box; screen readers say "partially checked"). A click clears it and sets `checked`.
+
+## Label and description
+`id` goes to the native field — the host never carries it; without one it is generated. Inside
+`kpt-form-field` the control links itself: the wrapper's `label[for]` points at it and the hint or
+error is added to `aria-describedby`, so `controlId` is not needed. Without a wrapper, name it with
+`ariaLabel`. Inside `kpt-form-field` the box gets both names: the wrapper label and its own `label`.
+
 ## Tokens
 `--kpt-color-primary`, `--kpt-color-on-primary`, `--kpt-form-field-border`, `--kpt-form-field-border-error`.

package/src/lib/chip/llms.txt

@@ -20,3 +20,9 @@ word ends. For labels with a hyphen, spelling it out in the content is the exact
 
 ## Tokens
 A color-mix background over the variant, `--kpt-color-muted` (neutral).
+
+## Accessibility
+The label sits in `.kpt-chip__label`, and the remove button is named by `aria-labelledby` from
+itself plus that label — “Remove Angular” — so with several chips a screen reader user hears which
+one goes. `Backspace` and `Delete` on the button work like a click. After removal focus falls back
+to the page; move it to the next chip yourself.

package/src/lib/chips-input/llms.txt

@@ -14,5 +14,17 @@ Import: `import { KptChipsInput } from '@konce-pt/angular';`
     <kpt-chips-input [formField]="f.tags" placeholder="Add a tag…" />
     <kpt-chips-input [(value)]="tags" />
 
+## Screen reader and keyboard
+The tags are a list (`role="list"`/`listitem`), so a screen reader hears how many there are. Adding,
+removing (also with `Backspace`) and a rejected duplicate are announced by a polite live region
+(`chipsInput.added`/`removed`/`duplicate`); a duplicate stays in the field to be corrected instead
+of vanishing. After removing a tag with its `×`, focus returns to the text field.
+
+## Label and description
+`id` goes to the native field — the host never carries it; without one it is generated. Inside
+`kpt-form-field` the control links itself: the wrapper's `label[for]` points at it and the hint or
+error is added to `aria-describedby`, so `controlId` is not needed. Without a wrapper, name it with
+`ariaLabel`. New: `id`, `ariaLabel`, `required` and `aria-invalid` on the text field.
+
 ## Tokens
 The field uses `--kpt-form-field-*`; the tags inherit from `kpt-chip`.

package/src/lib/color-picker/llms.txt

@@ -14,5 +14,19 @@ Import: `import { KptColorPicker } from '@konce-pt/angular';`
 
     color = signal('#3b82f6');
 
+## Screen reader and keyboard
+`presets` accepts codes or `{ value, label }` (the `KptColorPreset` type): the label names the
+swatch, because a hex code says little to a screen reader; the default palette is named from i18n
+(`colorPicker.red`…). The active swatch has `aria-pressed`. The hex field changes the value only on
+a full `#rrggbb` code (a missing `#` is added); an incomplete code stays visible with
+`aria-invalid`.
+
+## Label and description
+`id` goes to the native field — the host never carries it; without one it is generated. Inside
+`kpt-form-field` the control links itself: the wrapper's `label[for]` points at it and the hint or
+error is added to `aria-describedby`, so `controlId` is not needed. Without a wrapper, name it with
+`ariaLabel`. `id` and the label go to the hex field; the native colour well is named "Pick a colour"
+(`colorPicker.picker`), and the hex field falls back to "Hex code" (`colorPicker.hex`).
+
 ## Tokens
 The border `--kpt-form-field-border`; the active preset `--kpt-color-primary`.

package/src/lib/confirm/llms.txt

@@ -23,3 +23,8 @@ English by default; configured through `provideKptI18n` — see `i18n/llms.txt`.
 
 ## Tokens
 Inherited from `kpt-dialog`; the icon follows the variant (`--kpt-color-danger` / `--kpt-color-primary`).
+
+## Accessibility
+The window is `role="alertdialog"` named by its header, with the message tied to it through
+`aria-describedby`, so a screen reader reads the question as soon as it opens. Focus starts on the
+reject button — the safe answer, so a stray `Enter` deletes nothing. Escape and × reject.

package/src/lib/context-menu/llms.txt

@@ -15,5 +15,13 @@ Import: `import { KptContextMenu } from '@konce-pt/angular';`
       <div class="area">Right-click here</div>
     </kpt-context-menu>
 
+## Keyboard
+The same model as `kpt-menu` (the shared `menu-keys.ts`): opening moves focus to the first item, arrows /
+`Home` / `End` move between items (disabled ones and separators are skipped), `Escape` and `Tab` close
+it and focus returns to where it was. `Shift+F10` and the context-menu key on a focused element inside
+the area open it too — the browser then sends `contextmenu` without mouse coordinates, so the panel is
+placed at that element. The panel is kept inside the viewport (8px from the edges). Touch screens have
+no right click, so still offer the same actions through a visible button with `kpt-menu`.
+
 ## Tokens
 The panel `--kpt-color-surface-raised`, `--kpt-elevation-3`.

package/src/lib/data-table/llms.txt

@@ -121,10 +121,11 @@ swaps its value for a control from `column.edit.type`. How it commits depends on
   the way — the panel stays open until the user clicks outside it, and then a single event fires with the full list.
 
 The table **never commits on `touch`** — and that must not be reinstated. `touch` in these
-controls does not mean "the user is done": it fires on the trigger's blur (and the panel lives in a CDK Overlay
-container next to `<body>`, so pressing the mouse on an option/day blurs the trigger) and, on top of that, from `step_()`
-in `kpt-input-number`. Committing on `touch` destroyed the editor together with the panel before the click
-had a chance to pick a value. Instead: overlay editors bind to `open` (`[open]`/`(openChange)`),
+controls does not mean "the user is done": it fires on the trigger's blur and, on top of that, from `step_()`
+in `kpt-input-number`. Committing on `touch` once destroyed the editor together with the panel before the click
+had a chance to pick a value (the panel lives in a CDK Overlay container next to `<body>`, and pressing the mouse
+on an option used to blur the trigger). The select and date pickers no longer emit `touch` while their panel
+is open, but `open` remains the only signal that says "the choice is over". Instead: overlay editors bind to `open` (`[open]`/`(openChange)`),
 and the rest to `focusout` on the whole editor (focus moved within the editor does not commit).
 
 **A limitation**: for overlay editors Escape **commits** (it closes the panel) rather than discarding —

package/src/lib/date-range/llms.txt

@@ -17,7 +17,10 @@ Requires `import '@angular/cdk/overlay-prebuilt.css';`
 - `minuteStep`: number (default 1) — minute snapping on the dial
 - `placeholder`: string — with no value it uses i18n (`dateRange.placeholder`); the input takes priority
 - `displayFormat`: 'pl' | 'iso' (default 'pl') — the display format for start/end
-- `disabled`/`invalid`/`touched`: boolean; `touch`: output
+- `minDate`/`maxDate`: string|null — 'YYYY-MM-DD' bounds (inclusive); days outside are disabled
+- `ariaLabel`: string|null — the accessible name when no `<label for>` describes the field
+- `disabled`/`invalid`/`touched`: boolean; `touch`: output — fires when the panel closes and when
+  focus leaves the closed trigger
 
 ## Behavior
 The first click sets `start`, the second `end` (the order is normalized). The "×" clears it.
@@ -25,6 +28,18 @@ The range highlights one continuous band running across every panel: the end day
 blob, and the band leaves their center, rounding off at the ends of a grid row.
 The datetime/time modes: a "From / To" toggle + the clock dial, confirmed with the "Done" button.
 
+## Keyboard
+As in the date picker: the trigger has `aria-haspopup="dialog"` and `aria-expanded`; `Enter`, `Space`
+and `↓` open the panel (a `role="dialog"` named "Choose a date range") with focus on the range start,
+or today. The arrows, `Home`/`End` and `PageUp`/`PageDown` (with `Shift` — a year) walk the days across
+every panel, shifting the set of months when focus leaves it. `Tab` cycles inside the panel, `Escape`
+closes it, and picking the end (or "Done") returns focus to the trigger. `Delete`/`Backspace` on the
+trigger clears the range.
+
+Each day is named with the full date and its role in the range ("…, start of range", "…, end of range",
+"…, in range") — the band colour is not the only carrier. The ends have `aria-pressed`, today has
+`aria-current="date"`. After the first pick a polite live region says "Start: … Choose the end date.".
+
 ## Example
     <kpt-date-range [formField]="f.period" />
     <kpt-date-range [(value)]="period" />
@@ -34,7 +49,14 @@ The datetime/time modes: a "From / To" toggle + the clock dial, confirmed with t
 
 ## i18n
 Day and month names come from `Intl` per locale; the labels ("From/To", navigation, "Done", the placeholder) come from i18n
-(the `dateRange` namespace + `datepicker`/`common`). English by default — see `i18n/llms.txt`.
+(the `dateRange` namespace + `datepicker`/`common`), and so do the dialog name, the range roles of
+the days and the live announcements. English by default — see `i18n/llms.txt`.
+
+## Label and description
+`id` goes to the focusable element — the host never carries it; without one it is generated. A `div`
+with a role is not named by `label[for]`, so inside `kpt-form-field` it gets `aria-labelledby`
+pointing at the wrapper's label (unless `ariaLabel` is set), and the hint or error is added to
+`aria-describedby`. No `controlId` needed. New: `id`; the trigger is the element that carries it.
 
 ## Tokens
 The field `--kpt-form-field-*`; the calendar `--kpt-color-surface-raised`, the range `--kpt-color-primary`.

package/src/lib/datepicker/llms.txt

@@ -33,15 +33,29 @@ Import: `import { KptDatepicker } from '@konce-pt/angular';`
 - `displayFormat`: 'pl' | 'iso' (default 'pl') — the display format and the default placeholder
 - `disabled`/`invalid`/`touched`: boolean; the `touch` output.
 - `open`: model (two-way `[(open)]`, the `(openChange)` output) — the calendar state. It lets you open
-  it from outside and know when the user is done choosing. For the latter **do not use `touch`**:
-  it also fires on the trigger's blur, that is, the moment the mouse goes down on a day in the panel (the panel
-  lives in a CDK Overlay container next to `<body>`, outside the control's DOM). That is what inline editing
-  in `kpt-data-table` does — see `data-table/llms.txt`.
+  it from outside and know when the user is done choosing — that is what inline editing
+  in `kpt-data-table` does, see `data-table/llms.txt`. `touch` fires when the panel closes and when
+  focus leaves the closed trigger; focus moving into the calendar does not count as leaving.
 - `ariaLabel`: string|null — the accessible name when no `<label for>` describes the field
   (two times in one editor row, for instance). Without it a screen reader announces the value alone.
 - The icon in the field: a calendar, and a clock in 'time' mode.
 - The panel: a clear button (×), the clock dial with "Done".
 
+## Keyboard
+The date picker dialog pattern. The trigger has `aria-haspopup="dialog"` and `aria-expanded`;
+`Enter`, `Space` and `↓` open the panel — a `role="dialog"` named "Choose a date" — and move focus to
+the selected day, or today, clamped to `minDate`/`maxDate`.
+- Day grid: `←`/`→` one day, `↑`/`↓` one week, `Home`/`End` Monday and Sunday of the week,
+  `PageUp`/`PageDown` one month, with `Shift` one year (the day is clamped to the month length).
+  Crossing a month edge turns the page. Each day is named with the full date from `Intl`
+  ("Thursday, October 8, 2026"), today has `aria-current="date"`, and only the focused day is
+  a Tab stop. In RTL the horizontal arrows are mirrored.
+- Month, year and decade grids: the arrows move between cells (three columns), `Home`/`End` to the ends.
+  Clicking a title moves focus to the new grid.
+- `Tab` cycles inside the panel; `Escape` closes it. Picking a value (or "Done") closes the panel
+  and returns focus to the trigger. `Delete`/`Backspace` on the trigger clears the value; the "×" button
+  sits outside the Tab order.
+
 ## Behavior (the view stack)
 The panel header always has the shape `‹ title ›`; the arrows move the current level's page,
 and the title is a button that goes one level up:
@@ -58,7 +72,7 @@ An arrow dims (`disabled`) when the whole neighboring page falls outside `minDat
 
 ## i18n
 Weekday and month names are derived from `Intl` per the active i18n locale (not from the dictionary).
-The navigation/aria labels ("previous decades", "choose a year"…) and "Done" come from i18n
+The navigation/aria labels ("previous decades", "choose a year", the dialog name…) and "Done" come from i18n
 (the `datepicker` + `common` namespaces). English by default;
 configured through `provideKptI18n` — see `i18n/llms.txt`. Note: `displayFormat` ('pl'/'iso')
 controls the date format only and is independent of the label language.
@@ -67,5 +81,11 @@ controls the date format only and is independent of the label language.
 The grids, bounds, paging and formats come from `@konce-pt/datetime` — the same framework-free
 package the React port uses, with its own tests. The component holds signals and markup only.
 
+## Label and description
+`id` goes to the focusable element — the host never carries it; without one it is generated. A `div`
+with a role is not named by `label[for]`, so inside `kpt-form-field` it gets `aria-labelledby`
+pointing at the wrapper's label (unless `ariaLabel` is set), and the hint or error is added to
+`aria-describedby`. No `controlId` needed. New: `id`; the trigger is the element that carries it.
+
 ## Tokens
 `--kpt-form-field-{bg,text,border,border-focus,border-error,radius}`.

package/src/lib/dialog/llms.txt

@@ -12,6 +12,18 @@ Import: `import { KptDialog } from '@konce-pt/angular';`
 - `size`: 'sm' | 'md' | 'lg' (default 'md') — 24rem / 32rem / 48rem, always capped at the viewport
   (`min(var(--_width), calc(100vw - 2rem))`). Reach for `lg` when the content cannot sensibly be
   narrowed: code, a table, two columns side by side.
+- `ariaLabel`: string — the name of a dialog with no `header` (with one, the header names it)
+- `ariaDescribedby`: string | null — the `id` of the element that describes the dialog
+- `alert`: boolean — `role="alertdialog"`, for a window that interrupts and demands an answer
+- `ariaLabel`: string — the name of a dialog with no `header` (with one, the header names it)
+- `ariaDescribedby`: string | null — the `id` of the element that describes the dialog
+- `alert`: boolean — `role="alertdialog"`, for a window that interrupts and demands an answer
+- `ariaLabel`: string — the name of a dialog with no `header` (with one, the header names it)
+- `ariaDescribedby`: string | null — the `id` of the element that describes the dialog
+- `alert`: boolean — `role="alertdialog"`, for a window that interrupts and demands an answer
+- `ariaLabel`: string — the name of a dialog with no `header` (with one, the header names it)
+- `ariaDescribedby`: string | null — the `id` of the element that describes the dialog
+- `alert`: boolean — `role="alertdialog"`, for a window that interrupts and demands an answer
 
 ## Slots
 - the default content → the body; an element with the `kptDialogFooter` attribute → the footer
@@ -76,3 +88,9 @@ The negative side margins have to match its padding (`--kpt-space-6`),
 and the `bottom` offset has to mirror the negative bottom margin
 (`bottom: calc(var(--kpt-space-6) * -1)`) — stickiness is computed for the margin
 box, so with `bottom: 0` a sliver of content would slide underneath the bar.
+
+## Accessibility
+`showModal()` gives the focus trap, Escape and the inert page; focus returns to the opener on
+close. With `header` the dialog is named by its `<h2>` (`aria-labelledby`); without it pass
+`ariaLabel`. `alert` + `ariaDescribedby` make it an alert dialog whose message is read out on
+open — `kpt-confirm-container` uses exactly that.

package/src/lib/drawer/llms.txt

@@ -22,5 +22,11 @@ without waiting for JavaScript. Both closed-state declarations live in the **bas
 attribute would flash on screen and then animate away. `prefers-reduced-motion: reduce`
 drops the transitions.
 
+## Focus and keyboard
+Opening moves focus into the panel (`cdkFocusInitial`, else its first focusable element, else the
+panel itself) and traps it there — `Tab` / `Shift+Tab` wrap inside, as `aria-modal="true"` promises.
+Closing returns focus to the element that had it before. `Escape` closes the panel — only when `dismissible`, like the `×` button. The panel
+is named by its `header` through `aria-labelledby`. The shared helper is `shared/modal-focus.ts` (on the CDK focus trap; the React port has a twin hook).
+
 ## Tokens
-The panel `--kpt-color-surface-raised`, `--kpt-elevation-4`; a semi-transparent backdrop.
+The panel `--kpt-color-surface-raised`, `--kpt-elevation-4`; the backdrop `--kpt-color-overlay-scrim`.

package/src/lib/empty/llms.txt

@@ -6,6 +6,7 @@ Import: `import { KptEmpty } from '@konce-pt/angular';`
 ## Inputs
 - `icon`: string | null (default 'info-circle')
 - `title`: string; `description`: string
+- `headingLevel`: 1–6 | null (default null) — makes the title a heading (`role="heading"` + `aria-level`)
 - Actions: `<ng-content>` (buttons, for instance).
 
 ## Example
@@ -15,3 +16,8 @@ Import: `import { KptEmpty } from '@konce-pt/angular';`
 
 ## Tokens
 The icon sits in a `--kpt-color-muted` circle; text `--kpt-color-on-surface(-muted)`.
+
+## Accessibility
+The icon is decorative. The title is a styled paragraph unless `headingLevel` makes it a heading —
+use that when the empty state stands in for a whole section. Replacing results with an empty state
+is not announced; report “0 results” in a live region of your own.

package/src/lib/fab/llms.txt

@@ -1,6 +1,6 @@
 # KptFab (kpt-fab)
 
-A floating action button — a round, raised action button. Import: `import { KptFab } from '@konce-pt/angular';`
+A floating action button — a raised action button (a rounded square; `extended` is a pill). Import: `import { KptFab } from '@konce-pt/angular';`
 
 ## Inputs
 - `variant`: 'filled' | 'tonal' (default 'filled')
@@ -8,6 +8,8 @@ A floating action button — a round, raised action button. Import: `import { Kp
 - `extended`: boolean (a pill with text)
 - `disabled`: boolean; `type`: 'button' | 'submit' | 'reset'
 - `ariaLabel`: string (required for the round, textless variant)
+- `ariaExpanded`: `boolean | null` = `null`, `ariaControls`: `string | null` = `null` — for a FAB that opens
+  a panel (`kpt-speed-dial` uses them); they land on the inner `<button>`, the host has no button role
 
 ## Example
     <kpt-fab ariaLabel="Add"><kpt-icon name="plus" /></kpt-fab>
@@ -15,4 +17,5 @@ A floating action button — a round, raised action button. Import: `import { Kp
     <kpt-fab variant="tonal" size="mini" ariaLabel="Edit"><kpt-icon name="copy" /></kpt-fab>
 
 ## Tokens
-Background `--kpt-color-primary` / `--kpt-color-primary-container` (tonal); shadow `--kpt-elevation-3`.
+Background `--kpt-color-primary` / `--kpt-color-muted` (tonal); shadow `--kpt-elevation-3`, `--kpt-elevation-4` on hover;
+shape `--kpt-radius-lg` (md), `--kpt-radius-md` (mini), `--kpt-radius-full` (extended).

package/src/lib/file-upload/llms.txt

@@ -19,5 +19,16 @@ Import: `import { KptFileUpload } from '@konce-pt/angular';`
 The zone responds both to a click and to files dragged onto it. With `multiple=false` it keeps only the first file.
 The file list shows the name, the size and a remove button.
 
+## Keyboard and states
+- The zone is `role="button"` with a single Tab stop: `Enter` and `Space` open the file picker,
+  the same as a click. The native `<input type="file">` is hidden, so without this a keyboard user
+  could not pick a file at all.
+- `disabled` takes the zone out of the Tab order (`tabindex="-1"`, `aria-disabled`) and blocks
+  both picking and dropping.
+- The error state (`aria-invalid`, a `--kpt-color-danger` border via `[data-invalid]`) shows once
+  the field is invalid and touched.
+- List items get an icon by type: `photo` for `image/*`, `paperclip` for anything else.
+
 ## Tokens
-The zone uses `--kpt-form-field-border` (dashed), the dragover state `--kpt-color-primary`.
+The zone `--kpt-color-border-strong` (dashed), hover / dragover `--kpt-color-primary`, error `--kpt-color-danger`,
+focus ring `--kpt-color-focus-ring`.