@konce-pt/react 0.9.0 → 0.10.0

package/dist/badge/llms.txt

@@ -6,7 +6,9 @@ Import: `import { KptBadge } from '@konce-pt/react';`
 ## DOM
     <span class="kpt-badge-host">
       …children…
-      <span class="kpt-badge kpt-badge--overlay" data-variant="danger" data-size="md">8</span>
+      <span class="kpt-badge kpt-badge--overlay" data-variant="danger" data-size="md">
+        <span aria-hidden="true">8</span><span class="kpt-badge__label">8 unread</span>
+      </span>
     </span>
 
 ## Props
@@ -16,6 +18,8 @@ Import: `import { KptBadge } from '@konce-pt/react';`
 - `dot`: boolean — a bare status dot, no number
 - `overlay`: boolean — laid over the `children`
 - `max`: number (default 99) — above it the counter reads `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`)
 - `className`, `ref` and every other `<span>` prop go to the host
 
 ## Overlay
@@ -30,9 +34,11 @@ it on the host rather than on the badge.
     <span>Notifications <KptBadge value={4} size="sm" variant="success" /></span>
 
 ## Tokens
-The semantic colour pairs of each variant (`--kpt-color-primary` / `--kpt-color-on-primary`,
-`-success`, `-danger`, `-warning`, `-info`, `--kpt-color-muted` / `--kpt-color-on-muted`).
+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
-The badge is text inside the host, so a screen reader reads it together with the content it marks.
-For a counter that has to be announced on its own, add your own `aria-label` on the host.
+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/dist/bottom-sheet/bottom-sheet.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentPropsWithRef, ReactNode } from 'react';
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
 import { type KptI18nOverrides } from '../i18n/i18n-context.tsx';
 export interface KptBottomSheetProps extends ComponentPropsWithRef<'div'>, KptI18nOverrides {
     open: boolean;

package/dist/bottom-sheet/bottom-sheet.js

@@ -1,5 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from 'react';
 import { cn } from "../internal/cn.js";
+import { useKptId } from "../internal/use-id.js";
+import { useModalFocus } from "../internal/use-modal-focus.js";
 import { useKptMessages } from "../i18n/i18n-context.js";
 /**
  * Arkusz wysuwany z dołu ekranu.
@@ -15,8 +18,11 @@ import { useKptMessages } from "../i18n/i18n-context.js";
 export function KptBottomSheet({ open, onOpenChange, header = '', closeOnBackdrop = true, locale, dictionary, className, children, ...rest }) {
     const { t } = useKptMessages({ locale, dictionary });
     const close = () => onOpenChange(false);
-    return (_jsxs("div", { className: cn('kpt-bottom-sheet-host', className), ...rest, children: [_jsx("div", { className: cn('kpt-bottom-sheet__backdrop', open && 'is-open'), onClick: () => closeOnBackdrop && close() }), _jsxs("div", { className: cn('kpt-bottom-sheet__panel', open && 'is-open'), role: "dialog", "aria-modal": "true", tabIndex: -1, onKeyDown: (event) => {
+    const panelRef = useRef(null);
+    const titleId = useKptId(undefined, 'kpt-bottom-sheet-title');
+    useModalFocus(open, panelRef);
+    return (_jsxs("div", { className: cn('kpt-bottom-sheet-host', className), ...rest, children: [_jsx("div", { className: cn('kpt-bottom-sheet__backdrop', open && 'is-open'), onClick: () => closeOnBackdrop && close() }), _jsxs("div", { ref: panelRef, className: cn('kpt-bottom-sheet__panel', open && 'is-open'), role: "dialog", "aria-modal": "true", "aria-labelledby": header ? titleId : undefined, tabIndex: -1, onKeyDown: (event) => {
                     if (event.key === 'Escape')
                         close();
-                }, children: [_jsx("button", { type: "button", className: "kpt-bottom-sheet__handle", onClick: close, "aria-label": t('common.close') }), header ? _jsx("div", { className: "kpt-bottom-sheet__header", children: header }) : null, _jsx("div", { className: "kpt-bottom-sheet__body", children: children })] })] }));
+                }, children: [_jsx("button", { type: "button", className: "kpt-bottom-sheet__handle", onClick: close, "aria-label": t('common.close') }), header ? (_jsx("div", { className: "kpt-bottom-sheet__header", id: titleId, children: header })) : null, _jsx("div", { className: "kpt-bottom-sheet__body", children: children })] })] }));
 }

package/dist/bottom-sheet/llms.txt

@@ -31,6 +31,12 @@ The panel and the backdrop are `position: fixed` and the host is `display: conte
 needs no portal — the same DOM as the Angular port. A transformed ancestor would break the fixed
 positioning there too.
 
+## Focus and keyboard
+Opening moves focus into the panel (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 `internal/use-modal-focus.ts` (the Angular port has a twin on the CDK focus trap).
+
 ## Examples
     <KptButton onClick={() => setOpen(true)}>Share</KptButton>
     <KptBottomSheet open={open} onOpenChange={setOpen} header="Share">…</KptBottomSheet>
@@ -39,5 +45,5 @@ positioning there too.
 The panel `--kpt-color-surface-raised`, the top radius `--kpt-radius-lg`, `--kpt-elevation-4`.
 
 ## Accessibility
-`role="dialog"` with `aria-modal`; Escape and the handle close the sheet, and the handle is a real
-button labelled from `common.close`.
+`role="dialog"`, `aria-modal` and `aria-labelledby` pointing at the header; the handle is a real button
+labelled from `common.close`. Focus handling — see "Focus and keyboard" above.

package/dist/breadcrumb/breadcrumb.js

@@ -13,8 +13,8 @@ import { KptIcon } from "../icon/icon.js";
  */
 export function KptBreadcrumb({ items = [], locale, dictionary, className, ...rest }) {
     const { t } = useKptMessages({ locale, dictionary });
-    return (_jsx("div", { className: cn('kpt-breadcrumb-host', className), ...rest, children: _jsx("nav", { className: "kpt-breadcrumb", "aria-label": t('breadcrumb.label'), children: items.map((item, index) => {
-                const last = index === items.length - 1;
-                return (_jsxs("span", { style: { display: 'contents' }, children: [item.url && !last ? (_jsx("a", { className: "kpt-breadcrumb__link", href: item.url, children: item.label })) : (_jsx("span", { className: "kpt-breadcrumb__current", "aria-current": last ? 'page' : undefined, children: item.label })), last ? null : _jsx(KptIcon, { name: "chevron-right", className: "kpt-breadcrumb__sep" })] }, index));
-            }) }) }));
+    return (_jsx("div", { className: cn('kpt-breadcrumb-host', className), ...rest, children: _jsx("nav", { className: "kpt-breadcrumb", "aria-label": t('breadcrumb.label'), children: _jsx("ol", { className: "kpt-breadcrumb__list", children: items.map((item, index) => {
+                    const last = index === items.length - 1;
+                    return (_jsxs("li", { className: "kpt-breadcrumb__item", children: [item.url && !last ? (_jsx("a", { className: "kpt-breadcrumb__link", href: item.url, children: item.label })) : (_jsx("span", { className: "kpt-breadcrumb__current", "aria-current": last ? 'page' : undefined, children: item.label })), last ? null : _jsx(KptIcon, { name: "chevron-right", className: "kpt-breadcrumb__sep" })] }, index));
+                }) }) }) }));
 }

package/dist/breadcrumb/llms.txt

@@ -5,9 +5,15 @@ A breadcrumb trail. Import: `import { KptBreadcrumb } from '@konce-pt/react';`
 ## DOM
     <div class="kpt-breadcrumb-host">
       <nav class="kpt-breadcrumb" aria-label="breadcrumb">
-        <a class="kpt-breadcrumb__link" href="/">Home</a>
-        <span class="kpt-icon-host kpt-breadcrumb__sep">…</span>
-        <span class="kpt-breadcrumb__current" aria-current="page">Showcase</span>
+        <ol class="kpt-breadcrumb__list">
+          <li class="kpt-breadcrumb__item">
+            <a class="kpt-breadcrumb__link" href="/">Home</a>
+            <span class="kpt-icon-host kpt-breadcrumb__sep">…</span>
+          </li>
+          <li class="kpt-breadcrumb__item">
+            <span class="kpt-breadcrumb__current" aria-current="page">Showcase</span>
+          </li>
+        </ol>
       </nav>
     </div>
 
@@ -31,5 +37,6 @@ The nav label comes from `breadcrumb.label` in the dictionary.
 (the links).
 
 ## Accessibility
-A `<nav>` with a label from the dictionary; the current page carries `aria-current="page"`, so a
-screen reader can tell the trail from the position in it.
+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/dist/card/card.d.ts

@@ -1,10 +1,18 @@
 import { type ComponentPropsWithRef } from 'react';
 export type KptCardVariant = 'elevated' | 'outlined';
+/** Poziom nagłówka karty w strukturze strony. */
+export type KptCardHeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
 export interface KptCardProps extends ComponentPropsWithRef<'div'> {
     /** Wariant wizualny. */
     variant?: KptCardVariant;
     /** Opcjonalny tekst nagłówka. Dla bogatszego nagłówka użyj `<KptCard.Header>`. */
     header?: string;
+    /**
+     * Robi z `header` nagłówek strony (`role="heading"` z `aria-level`), żeby karta pojawiła się
+     * w strukturze dokumentu. Bez tego `header` to sam tekst — część kart (np. kafelki statystyk)
+     * nie powinna zaśmiecać spisu nagłówków.
+     */
+    headingLevel?: KptCardHeadingLevel;
     /** Body bez wewnętrznego paddingu — dla układów zarządzających własnymi sekcjami. */
     flush?: boolean;
 }
@@ -21,7 +29,7 @@ export interface KptCardProps extends ComponentPropsWithRef<'div'> {
  *   <KptCard.Footer><KptButton>Zapisz</KptButton></KptCard.Footer>
  * </KptCard>
  */
-export declare function KptCard({ variant, header, flush, className, children, ...rest }: Readonly<KptCardProps>): import("react").JSX.Element;
+export declare function KptCard({ variant, header, headingLevel, flush, className, children, ...rest }: Readonly<KptCardProps>): import("react").JSX.Element;
 export declare namespace KptCard {
     var Header: typeof KptCardHeader;
     var Footer: typeof KptCardFooter;

package/dist/card/card.js

@@ -20,7 +20,7 @@ import { cn } from "../internal/cn.js";
  *   <KptCard.Footer><KptButton>Zapisz</KptButton></KptCard.Footer>
  * </KptCard>
  */
-export function KptCard({ variant = 'elevated', header, flush = false, className, children, ...rest }) {
+export function KptCard({ variant = 'elevated', header, headingLevel, flush = false, className, children, ...rest }) {
     const headers = [];
     const footers = [];
     const body = [];
@@ -33,7 +33,7 @@ export function KptCard({ variant = 'elevated', header, flush = false, className
         else
             body.push(child);
     });
-    return (_jsxs("div", { className: cn('kpt-card', className), "data-variant": variant, ...rest, children: [header ? _jsx("div", { className: "kpt-card__header", children: header }) : null, headers, _jsx("div", { className: cn('kpt-card__body', flush && 'kpt-card__body--flush'), children: body }), footers] }));
+    return (_jsxs("div", { className: cn('kpt-card', className), "data-variant": variant, ...rest, children: [header ? (_jsx("div", { className: "kpt-card__header", role: headingLevel ? 'heading' : undefined, "aria-level": headingLevel, children: header })) : null, headers, _jsx("div", { className: cn('kpt-card__body', flush && 'kpt-card__body--flush'), children: body }), footers] }));
 }
 function slotOf(child) {
     return child.type?.kptCardSlot ?? 'body';

package/dist/card/llms.txt

@@ -15,6 +15,8 @@ Import: `import { KptCard } from '@konce-pt/react';`
 ## Props
 - `variant`: 'elevated' | 'outlined' (default 'elevated')
 - `header`: string — optional header text; use `<KptCard.Header>` for richer content
+- `headingLevel`: 1–6 — makes `header` a heading of that level (`role="heading"` + `aria-level`)
+- `headingLevel`: 1–6 — makes `header` a heading of that level (`role="heading"` + `aria-level`)
 - `flush`: boolean — a body with no padding (for rich layouts that manage their own sections)
 - `className`, `ref` and every other `<div>` prop go to the card root
 
@@ -56,5 +58,7 @@ An overlapping avatar is a class you apply to your own element: `className="kpt-
 `--kpt-card-{bg,fg,border,radius,padding,shadow}`.
 
 ## Accessibility
-The card is a plain container with no role of its own — give it heading semantics through your
-own content when it needs them.
+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/dist/carousel/carousel.d.ts

@@ -7,6 +7,8 @@ export interface KptCarouselProps<T> extends Omit<ComponentPropsWithRef<'div'>,
     onActiveIndexChange?: (index: number) => void;
     /** Szablon slajdu — odpowiednik `<ng-template let-item let-i="index">` z Angulara. */
     renderSlide: (item: T, index: number) => ReactNode;
+    /** Nazwa regionu dla czytników ekranu, np. „Nowości”; domyślnie `carousel.label`. */
+    label?: string;
 }
 /**
  * Karuzela slajdów. Dane przez `items`, wygląd slajdu przez `renderSlide`.
@@ -14,7 +16,12 @@ export interface KptCarouselProps<T> extends Omit<ComponentPropsWithRef<'div'>,
  * Tor przesuwa się jednym `translateX` o wielokrotność 100%, więc slajdy jadą płynnie, a każdy
  * zostaje zamontowany — przewijanie nie gubi stanu treści.
  *
+ * Semantyka według wzorca WAI-ARIA „carousel” (bez autoodtwarzania): region z
+ * `aria-roledescription="karuzela"`, każdy slajd to grupa „Slajd 2 z 4”, a slajdy poza widokiem są
+ * `inert` — `Tab` i czytnik ich nie widzą. Zmiana slajdu jest ogłaszana uprzejmie (`aria-live`
+ * na torze). Strzałki na końcach dostają `aria-disabled` zamiast `disabled`, żeby nie zgubić fokusu.
+ *
  * @example
  * <KptCarousel items={photos} renderSlide={(photo) => <img src={photo} style={{ width: '100%' }} />} />
  */
-export declare function KptCarousel<T>({ items, activeIndex, defaultActiveIndex, onActiveIndexChange, renderSlide, locale, dictionary, className, ...rest }: Readonly<KptCarouselProps<T>>): import("react").JSX.Element;
+export declare function KptCarousel<T>({ items, activeIndex, defaultActiveIndex, onActiveIndexChange, renderSlide, label, locale, dictionary, className, ...rest }: Readonly<KptCarouselProps<T>>): import("react").JSX.Element;

package/dist/carousel/carousel.js

@@ -9,10 +9,15 @@ import { KptIcon } from "../icon/icon.js";
  * Tor przesuwa się jednym `translateX` o wielokrotność 100%, więc slajdy jadą płynnie, a każdy
  * zostaje zamontowany — przewijanie nie gubi stanu treści.
  *
+ * Semantyka według wzorca WAI-ARIA „carousel” (bez autoodtwarzania): region z
+ * `aria-roledescription="karuzela"`, każdy slajd to grupa „Slajd 2 z 4”, a slajdy poza widokiem są
+ * `inert` — `Tab` i czytnik ich nie widzą. Zmiana slajdu jest ogłaszana uprzejmie (`aria-live`
+ * na torze). Strzałki na końcach dostają `aria-disabled` zamiast `disabled`, żeby nie zgubić fokusu.
+ *
  * @example
  * <KptCarousel items={photos} renderSlide={(photo) => <img src={photo} style={{ width: '100%' }} />} />
  */
-export function KptCarousel({ items = [], activeIndex, defaultActiveIndex = 0, onActiveIndexChange, renderSlide, locale, dictionary, className, ...rest }) {
+export function KptCarousel({ items = [], activeIndex, defaultActiveIndex = 0, onActiveIndexChange, renderSlide, label, locale, dictionary, className, ...rest }) {
     const { t } = useKptMessages({ locale, dictionary });
     const [active, setActive] = useControllableState({
         value: activeIndex,
@@ -20,5 +25,7 @@ export function KptCarousel({ items = [], activeIndex, defaultActiveIndex = 0, o
         onChange: onActiveIndexChange,
     });
     const goTo = (index) => setActive(Math.min(Math.max(index, 0), items.length - 1));
-    return (_jsx("div", { className: cn('kpt-carousel-host', className), ...rest, children: _jsxs("div", { className: "kpt-carousel", children: [_jsx("div", { className: "kpt-carousel__viewport", children: _jsx("div", { className: "kpt-carousel__track", style: { transform: `translateX(-${active * 100}%)` }, children: items.map((item, index) => (_jsx("div", { className: "kpt-carousel__slide", children: renderSlide(item, index) }, index))) }) }), _jsx("button", { type: "button", className: "kpt-carousel__nav kpt-carousel__nav--prev", disabled: active === 0, "aria-label": t('common.previous'), onClick: () => goTo(active - 1), children: _jsx(KptIcon, { name: "chevron-left" }) }), _jsx("button", { type: "button", className: "kpt-carousel__nav kpt-carousel__nav--next", disabled: active >= items.length - 1, "aria-label": t('common.next'), onClick: () => goTo(active + 1), children: _jsx(KptIcon, { name: "chevron-right" }) }), _jsx("div", { className: "kpt-carousel__dots", children: items.map((_, index) => (_jsx("button", { type: "button", className: cn('kpt-carousel__dot', index === active && 'is-active'), "aria-label": t('carousel.slide', { index: index + 1 }), onClick: () => goTo(index) }, index))) })] }) }));
+    const atStart = active <= 0;
+    const atEnd = active >= items.length - 1;
+    return (_jsx("div", { className: cn('kpt-carousel-host', className), ...rest, children: _jsxs("div", { className: "kpt-carousel", role: "region", "aria-roledescription": t('carousel.roleCarousel'), "aria-label": label || t('carousel.label'), children: [_jsx("div", { className: "kpt-carousel__viewport", children: _jsx("div", { className: "kpt-carousel__track", "aria-live": "polite", style: { transform: `translateX(calc(var(--_kpt-carousel-dir, 1) * -${active * 100}%))` }, children: items.map((item, index) => (_jsx("div", { className: "kpt-carousel__slide", role: "group", "aria-roledescription": t('carousel.roleSlide'), "aria-label": t('carousel.slideOf', { index: index + 1, total: items.length }), inert: index !== active, "aria-hidden": index === active ? undefined : true, children: renderSlide(item, index) }, index))) }) }), _jsx("button", { type: "button", className: "kpt-carousel__nav kpt-carousel__nav--prev", "aria-disabled": atStart || undefined, "aria-label": t('common.previous'), onClick: () => goTo(active - 1), children: _jsx(KptIcon, { name: "chevron-left" }) }), _jsx("button", { type: "button", className: "kpt-carousel__nav kpt-carousel__nav--next", "aria-disabled": atEnd || undefined, "aria-label": t('common.next'), onClick: () => goTo(active + 1), children: _jsx(KptIcon, { name: "chevron-right" }) }), _jsx("div", { className: "kpt-carousel__dots", children: items.map((_, index) => (_jsx("button", { type: "button", className: cn('kpt-carousel__dot', index === active && 'is-active'), "aria-current": index === active ? 'true' : undefined, "aria-label": t('carousel.slide', { index: index + 1 }), onClick: () => goTo(index) }, index))) })] }) }));
 }

package/dist/carousel/llms.txt

@@ -5,15 +5,21 @@ Import: `import { KptCarousel } from '@konce-pt/react';`
 
 ## DOM
     <div class="kpt-carousel-host">
-      <div class="kpt-carousel">
+      <div class="kpt-carousel" role="region" aria-roledescription="carousel" aria-label="Carousel">
         <div class="kpt-carousel__viewport">
-          <div class="kpt-carousel__track" style="transform:translateX(-100%)">
-            <div class="kpt-carousel__slide">…</div>…
+          <div class="kpt-carousel__track" aria-live="polite"
+               style="transform:translateX(calc(var(--_kpt-carousel-dir, 1) * -100%))">
+            <div class="kpt-carousel__slide" role="group" aria-roledescription="slide"
+                 aria-label="Slide 1 of 3" inert aria-hidden="true">…</div>
+            <div class="kpt-carousel__slide" role="group" aria-roledescription="slide"
+                 aria-label="Slide 2 of 3">…</div>…
           </div>
         </div>
-        <button class="kpt-carousel__nav kpt-carousel__nav--prev">…</button>
-        <button class="kpt-carousel__nav kpt-carousel__nav--next">…</button>
-        <div class="kpt-carousel__dots"><button class="kpt-carousel__dot is-active"></button>…</div>
+        <button class="kpt-carousel__nav kpt-carousel__nav--prev" aria-label="Previous">…</button>
+        <button class="kpt-carousel__nav kpt-carousel__nav--next" aria-label="Next">…</button>
+        <div class="kpt-carousel__dots">
+          <button class="kpt-carousel__dot is-active" aria-current="true" aria-label="Slide 2"></button>…
+        </div>
       </div>
     </div>
 
@@ -21,6 +27,7 @@ Import: `import { KptCarousel } from '@konce-pt/react';`
 - `items`: `T[]`
 - `activeIndex` / `defaultActiveIndex` / `onActiveIndexChange`
 - `renderSlide(item, index)` — required
+- `label`: string — the region name; empty = `carousel.label`
 - `className`, `ref` and every other `<div>` prop go to the host
 
 ## The render prop replaces the template
@@ -37,11 +44,18 @@ paging does not lose state inside a slide (a form, a playing video, a scroll pos
     <KptCarousel items={slides} activeIndex={index} onActiveIndexChange={setIndex} renderSlide={renderSlide} />
 
 ## i18n
-The arrows use `common.previous` / `common.next`, the dots `carousel.slide` (`{index}`).
+The arrows use `common.previous` / `common.next`, the dots `carousel.slide` (`{index}`); the region `carousel.label`, `carousel.roleCarousel`, the slides `carousel.slideOf` (`{index}`, `{total}`) and `carousel.roleSlide`.
 
 ## Tokens
-The 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 arrows are disabled at the ends instead of wrapping around, and every dot is a labelled button,
-so a slide can be reached directly from the keyboard.
+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/dist/checkbox/checkbox.d.ts

@@ -5,6 +5,11 @@ export interface KptCheckboxProps extends Omit<ComponentPropsWithRef<'input'>, '
     label?: string;
     /** Oznacza pole jako wymagane atrybutem `aria-required`, a NIE natywnym `required`. */
     required?: boolean;
+    /**
+     * Stan pośredni („część zaznaczona”) — dla pola „zaznacz wszystko” nad listą. To właściwość DOM,
+     * nie atrybut, więc ustawia ją komponent; czytnik ogłasza „częściowo zaznaczone”.
+     */
+    indeterminate?: boolean;
     /** Pole jest nieprawidłowe. Widoczne dopiero, gdy `touched` też jest prawdziwe. */
     invalid?: boolean;
     /** Czy pole było dotknięte; pominięty = stan błędu pokazuje się od razu po `invalid`. */
@@ -30,4 +35,4 @@ export interface KptCheckboxProps extends Omit<ComponentPropsWithRef<'input'>, '
  * <KptCheckbox name="terms" label="Akceptuję regulamin" />
  * <KptCheckbox checked={on} onCheckedChange={setOn} />
  */
-export declare function KptCheckbox({ label, required, invalid, touched, onCheckedChange, onTouch, hostProps, className, disabled, onChange, onBlur, children, 'aria-invalid': ariaInvalid, ...rest }: Readonly<KptCheckboxProps>): import("react").JSX.Element;
+export declare function KptCheckbox({ label, required, invalid, touched, onCheckedChange, onTouch, hostProps, className, disabled, onChange, onBlur, children, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedBy, id, indeterminate, ref, ...rest }: Readonly<KptCheckboxProps>): import("react").JSX.Element;

package/dist/checkbox/checkbox.js

@@ -1,6 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
+import { composeRefs } from "../internal/compose-refs.js";
 import { cn } from "../internal/cn.js";
+import { joinIds, useKptFieldA11y } from "../form-field/form-field-context.js";
 /**
  * Pole wyboru (checkbox). Cały układ niesie `<label>`, więc kliknięcie w etykietę przełącza pole
  * bez `htmlFor` — natywny `<input>` w środku odpowiada za semantykę i klawiaturę.
@@ -14,7 +16,13 @@ import { cn } from "../internal/cn.js";
  * <KptCheckbox name="terms" label="Akceptuję regulamin" />
  * <KptCheckbox checked={on} onCheckedChange={setOn} />
  */
-export function KptCheckbox({ label = '', required = false, invalid = false, touched, onCheckedChange, onTouch, hostProps, className, disabled = false, onChange, onBlur, children, 'aria-invalid': ariaInvalid, ...rest }) {
+export function KptCheckbox({ label = '', required = false, invalid = false, touched, onCheckedChange, onTouch, hostProps, className, disabled = false, onChange, onBlur, children, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedBy, id, indeterminate = false, ref, ...rest }) {
+    const inputRef = useRef(null);
+    useEffect(() => {
+        if (inputRef.current)
+            inputRef.current.indeterminate = indeterminate;
+    }, [indeterminate]);
+    const field = useKptFieldA11y(id, 'kpt-checkbox');
     const { className: hostClassName, ...hostRest } = hostProps ?? {};
     const showInvalid = invalid && (touched ?? true);
     const handleChange = useCallback((event) => {
@@ -25,5 +33,5 @@ export function KptCheckbox({ label = '', required = false, invalid = false, tou
         onBlur?.(event);
         onTouch?.();
     }, [onBlur, onTouch]);
-    return (_jsx("span", { className: cn('kpt-checkbox-host', hostClassName), ...hostRest, children: _jsxs("label", { className: cn('kpt-checkbox', disabled && 'kpt-checkbox--disabled', className), children: [_jsx("input", { type: "checkbox", className: "kpt-checkbox__input", disabled: disabled, "aria-required": required || undefined, "aria-invalid": ariaInvalid ?? (showInvalid || undefined), onChange: handleChange, onBlur: handleBlur, ...rest }), _jsx("span", { className: "kpt-checkbox__box", "aria-hidden": "true", children: _jsx("svg", { viewBox: "0 0 16 16", className: "kpt-checkbox__check", children: _jsx("path", { d: "M13 4.5 6.5 11 3 7.5" }) }) }), label ? _jsx("span", { className: "kpt-checkbox__label", children: label }) : null, children] }) }));
+    return (_jsx("span", { className: cn('kpt-checkbox-host', hostClassName), ...hostRest, children: _jsxs("label", { className: cn('kpt-checkbox', disabled && 'kpt-checkbox--disabled', className), children: [_jsx("input", { type: "checkbox", className: "kpt-checkbox__input", ref: composeRefs(inputRef, ref), id: field.id, "aria-describedby": joinIds(ariaDescribedBy, field.describedBy), disabled: disabled, "aria-required": required || undefined, "aria-invalid": ariaInvalid ?? (showInvalid || undefined), onChange: handleChange, onBlur: handleBlur, ...rest }), _jsxs("span", { className: "kpt-checkbox__box", "aria-hidden": "true", children: [_jsx("svg", { viewBox: "0 0 16 16", className: "kpt-checkbox__check", children: _jsx("path", { d: "M13 4.5 6.5 11 3 7.5" }) }), _jsx("svg", { viewBox: "0 0 16 16", className: "kpt-checkbox__dash", children: _jsx("path", { d: "M4 8h8" }) })] }), label ? _jsx("span", { className: "kpt-checkbox__label", children: label }) : null, children] }) }));
 }

package/dist/checkbox/llms.txt

@@ -29,6 +29,17 @@ Import: `import { KptCheckbox } from '@konce-pt/react';`
     <KptCheckbox checked={on} onCheckedChange={setOn} />
     <KptCheckbox label="Newsletter" invalid={!!err} touched={blurred} />
 
+## Screen reader and keyboard
+`indeterminate`: boolean — the "some selected" state for a "select all" box (a dash in the box;
+screen readers say "partially checked"). It is a DOM property, so the component sets it; the browser
+clears it on click, so set it to `false` in `onCheckedChange`.
+
+## Label and description
+`id` goes to the native field, not the host; without one it comes from `KptFormField` or is
+generated. Inside `KptFormField` the wrapper's `label[for]` points at it and the hint or error is
+added to `aria-describedby` (merged with your own). Without a wrapper, name it with `aria-label`.
+Inside `kpt-form-field` the box gets both names: the wrapper label and its own `label`.
+
 ## Tokens
 `--kpt-form-field-border`, `--kpt-color-primary` (the checked box), `--kpt-color-on-primary`
 (the tick), `--kpt-form-field-border-error`.

package/dist/chip/chip.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../internal/cn.js";
+import { useKptId } from "../internal/use-id.js";
 import { KptIcon } from "../icon/icon.js";
 import { useKptMessages } from "../i18n/i18n-context.js";
 /**
@@ -13,5 +14,13 @@ import { useKptMessages } from "../i18n/i18n-context.js";
 export function KptChip({ variant = 'neutral', textTransform = 'none', removable = false, disabled = false, onRemove, locale, dictionary, hostProps, className, children, ...rest }) {
     const { t } = useKptMessages({ locale, dictionary });
     const { className: hostClassName, ...hostRest } = hostProps ?? {};
-    return (_jsx("span", { className: cn('kpt-chip-host', hostClassName), ...hostRest, children: _jsxs("span", { className: cn('kpt-chip', disabled && 'kpt-chip--disabled', className), "data-variant": variant, "data-text-transform": textTransform === 'none' ? undefined : textTransform, ...rest, children: [children, removable ? (_jsx("button", { type: "button", className: "kpt-chip__remove", disabled: disabled, onClick: onRemove, "aria-label": t('common.remove'), children: _jsx(KptIcon, { name: "x" }) })) : null] }) }));
+    const uid = useKptId(undefined, 'kpt-chip');
+    const labelId = `${uid}-label`;
+    const removeId = `${uid}-remove`;
+    return (_jsx("span", { className: cn('kpt-chip-host', hostClassName), ...hostRest, children: _jsxs("span", { className: cn('kpt-chip', disabled && 'kpt-chip--disabled', className), "data-variant": variant, "data-text-transform": textTransform === 'none' ? undefined : textTransform, ...rest, children: [_jsx("span", { className: "kpt-chip__label", id: labelId, children: children }), removable ? (_jsx("button", { type: "button", className: "kpt-chip__remove", id: removeId, disabled: disabled, onClick: onRemove, onKeyDown: (event) => {
+                        if (event.key !== 'Backspace' && event.key !== 'Delete')
+                            return;
+                        event.preventDefault();
+                        onRemove?.();
+                    }, "aria-label": t('common.remove'), "aria-labelledby": `${removeId} ${labelId}`, children: _jsx(KptIcon, { name: "x" }) })) : null] }) }));
 }

package/dist/chip/llms.txt

@@ -6,8 +6,9 @@ Import: `import { KptChip } from '@konce-pt/react';`
 ## DOM
     <span class="kpt-chip-host">
       <span class="kpt-chip" data-variant="primary">
-        React
-        <button type="button" class="kpt-chip__remove" aria-label="Remove">…icon…</button>
+        <span class="kpt-chip__label" id="kpt-chip-r1-label">React</span>
+        <button type="button" class="kpt-chip__remove" id="kpt-chip-r1-remove" aria-label="Remove"
+                aria-labelledby="kpt-chip-r1-remove kpt-chip-r1-label">…icon…</button>
       </span>
     </span>
 
@@ -46,5 +47,7 @@ spelling it out in the content is the exact route.
 (`--kpt-color-primary` / `-subtle`, `-success`, `-danger`, `-warning`, `-info`).
 
 ## Accessibility
-The remove button is a native `<button>` with `aria-label`, so it is reachable by keyboard and goes
-`disabled` together with the chip.
+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/dist/chips-input/chips-input.d.ts

@@ -7,6 +7,12 @@ export interface KptChipsInputProps extends Omit<ComponentPropsWithRef<'div'>, '
     /** Placeholder; pominięty = `chipsInput.placeholder` ze słownika. */
     placeholder?: string;
     allowDuplicates?: boolean;
+    /** Id elementu fokusowalnego (nie hosta); bez niego generowane, w `KptFormField` — z wrappera. */
+    id?: string;
+    /** Nazwa dostępna, gdy kontrolki nie opisuje etykieta (`<label for>` albo `KptFormField`). */
+    ariaLabel?: string | null;
+    /** Oznacza pole jako wymagane atrybutem `aria-required`. */
+    required?: boolean;
     disabled?: boolean;
     invalid?: boolean;
     touched?: boolean;
@@ -22,4 +28,4 @@ export interface KptChipsInputProps extends Omit<ComponentPropsWithRef<'div'>, '
  * @example
  * <KptChipsInput value={tags} onValueChange={setTags} placeholder="Dodaj tag…" />
  */
-export declare function KptChipsInput({ value, defaultValue, onValueChange, placeholder, allowDuplicates, disabled, invalid, touched, onTouch, locale, dictionary, className, ...rest }: Readonly<KptChipsInputProps>): import("react").JSX.Element;
+export declare function KptChipsInput({ value, defaultValue, onValueChange, placeholder, allowDuplicates, id, ariaLabel, required, disabled, invalid, touched, onTouch, locale, dictionary, className, ...rest }: Readonly<KptChipsInputProps>): import("react").JSX.Element;

package/dist/chips-input/chips-input.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef } from 'react';
+import { useRef, useState } from 'react';
 import { cn } from "../internal/cn.js";
 import { useControllableState } from "../internal/use-controllable-state.js";
 import { useKptMessages } from "../i18n/i18n-context.js";
 import { KptChip } from "../chip/chip.js";
+import { useKptFieldA11y } from "../form-field/form-field-context.js";
 /**
  * Pole tagów — dodawanie Enterem albo przecinkiem, usuwanie Backspace lub ×.
  *
@@ -14,8 +15,9 @@ import { KptChip } from "../chip/chip.js";
  * @example
  * <KptChipsInput value={tags} onValueChange={setTags} placeholder="Dodaj tag…" />
  */
-export function KptChipsInput({ value, defaultValue = [], onValueChange, placeholder, allowDuplicates = false, disabled = false, invalid = false, touched, onTouch, locale, dictionary, className, ...rest }) {
+export function KptChipsInput({ value, defaultValue = [], onValueChange, placeholder, allowDuplicates = false, id, ariaLabel = null, required = false, disabled = false, invalid = false, touched, onTouch, locale, dictionary, className, ...rest }) {
     const { t } = useKptMessages({ locale, dictionary });
+    const field = useKptFieldA11y(id, 'kpt-chips-input');
     const inputRef = useRef(null);
     const [chips, setChips] = useControllableState({
         value,
@@ -23,16 +25,26 @@ export function KptChipsInput({ value, defaultValue = [], onValueChange, placeho
         onChange: onValueChange,
     });
     const showInvalid = invalid && (touched ?? true);
+    /** Komunikat regionu `polite`: dodanie, usunięcie albo odrzucony duplikat. */
+    const [announcement, setAnnouncement] = useState('');
     const commit = (el) => {
         const text = el.value.trim();
         if (!text)
             return;
-        if (allowDuplicates || !chips.includes(text))
-            setChips([...chips, text]);
+        if (!allowDuplicates && chips.includes(text)) {
+            // Duplikat zostaje w polu (do poprawy), a czytnik słyszy, dlaczego nic nie przybyło.
+            setAnnouncement(t('chipsInput.duplicate', { value: text }));
+            return;
+        }
+        setChips([...chips, text]);
+        setAnnouncement(t('chipsInput.added', { value: text }));
         el.value = '';
     };
     const removeAt = (index) => {
+        const removed = chips[index];
         setChips(chips.filter((_, i) => i !== index));
+        if (removed !== undefined)
+            setAnnouncement(t('chipsInput.removed', { value: removed }));
         onTouch?.();
     };
     const onKeyDown = (event) => {
@@ -50,5 +62,9 @@ export function KptChipsInput({ value, defaultValue = [], onValueChange, placeho
         commit(event.currentTarget);
         onTouch?.();
     };
-    return (_jsx("div", { className: cn('kpt-chips-input-host', className), ...rest, children: _jsxs("div", { className: cn('kpt-chips-input', disabled && 'kpt-chips-input--disabled', showInvalid && 'kpt-chips-input--invalid'), children: [chips.map((chip, index) => (_jsx(KptChip, { variant: "primary", removable: !disabled, onRemove: () => removeAt(index), children: chip }, index))), _jsx("input", { ref: inputRef, className: "kpt-chips-input__field", type: "text", placeholder: chips.length ? '' : (placeholder ?? t('chipsInput.placeholder')), disabled: disabled, onKeyDown: onKeyDown, onBlur: onBlur })] }) }));
+    return (_jsx("div", { className: cn('kpt-chips-input-host', className), ...rest, children: _jsxs("div", { className: cn('kpt-chips-input', disabled && 'kpt-chips-input--disabled', showInvalid && 'kpt-chips-input--invalid'), children: [_jsx("span", { className: "kpt-chips-input__list", role: "list", children: chips.map((chip, index) => (_jsx("span", { className: "kpt-chips-input__item", role: "listitem", children: _jsx(KptChip, { variant: "primary", removable: !disabled, onRemove: () => {
+                                removeAt(index);
+                                // Przycisk usuwania znika razem z tagiem — fokus wraca do pola, nie na <body>.
+                                inputRef.current?.focus();
+                            }, children: chip }) }, index))) }), _jsx("input", { ref: inputRef, className: "kpt-chips-input__field", id: field.id, "aria-label": ariaLabel ?? undefined, "aria-required": required || undefined, "aria-invalid": showInvalid || undefined, "aria-describedby": field.describedBy, type: "text", placeholder: chips.length ? '' : (placeholder ?? t('chipsInput.placeholder')), disabled: disabled, onKeyDown: onKeyDown, onBlur: onBlur }), _jsx("span", { className: "kpt-chips-input__live", "aria-live": "polite", children: announcement })] }) }));
 }

package/dist/chips-input/llms.txt

@@ -32,6 +32,18 @@ lost by clicking away.
     <KptChipsInput value={tags} onValueChange={setTags} placeholder="Add a tag…" />
     <KptChipsInput value={tags} onValueChange={setTags} allowDuplicates />
 
+## 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, not the host; without one it comes from `KptFormField` or is
+generated. Inside `KptFormField` the wrapper's `label[for]` points at it and the hint or error is
+added to `aria-describedby` (merged with your own). Without a wrapper, name it with `ariaLabel`.
+New: `id`, `ariaLabel`, `required` and `aria-invalid` on the text field.
+
 ## Tokens
 `--kpt-form-field-{bg,border,border-focus,border-error,radius}` plus the chip tokens.
 

package/dist/color-picker/color-picker.d.ts

@@ -1,11 +1,24 @@
-import type { ComponentPropsWithRef } from 'react';
-export interface KptColorPickerProps extends Omit<ComponentPropsWithRef<'div'>, 'onChange' | 'defaultValue'> {
+import { type ComponentPropsWithRef } from 'react';
+import { type KptI18nOverrides } from '../i18n/i18n-context.tsx';
+/** Gotowy kolor z nazwą — nazwa trafia do `aria-label` próbki. */
+export interface KptColorPreset {
+    value: string;
+    label: string;
+}
+export interface KptColorPickerProps extends Omit<ComponentPropsWithRef<'div'>, 'onChange' | 'defaultValue'>, KptI18nOverrides {
     /** Kolor jako hex, np. '#3b82f6'. */
     value?: string;
     defaultValue?: string;
     onValueChange?: (value: string) => void;
-    /** Paleta szybkiego wyboru. */
-    presets?: readonly string[];
+    /**
+     * Paleta szybkiego wyboru: kody albo `{ value, label }`. Kod sam w sobie niewiele mówi
+     * czytnikowi („#3b82f6”), więc własną paletę warto nazwać; domyślne kolory mają nazwy z i18n.
+     */
+    presets?: readonly (string | KptColorPreset)[];
+    /** Id elementu fokusowalnego (nie hosta); bez niego generowane, w `KptFormField` — z wrappera. */
+    id?: string;
+    /** Nazwa dostępna, gdy kontrolki nie opisuje etykieta (`<label for>` albo `KptFormField`). */
+    ariaLabel?: string | null;
     disabled?: boolean;
     invalid?: boolean;
     touched?: boolean;
@@ -20,4 +33,4 @@ export interface KptColorPickerProps extends Omit<ComponentPropsWithRef<'div'>,
  * @example
  * <KptColorPicker value={color} onValueChange={setColor} />
  */
-export declare function KptColorPicker({ value, defaultValue, onValueChange, presets, disabled, invalid, touched, onTouch, className, ...rest }: Readonly<KptColorPickerProps>): import("react").JSX.Element;
+export declare function KptColorPicker({ value, defaultValue, onValueChange, presets, id, ariaLabel, disabled, invalid, touched, onTouch, locale, dictionary, className, ...rest }: Readonly<KptColorPickerProps>): import("react").JSX.Element;