@konce-pt/react 0.12.0 → 0.15.0

package/dist/datepicker/llms.txt

@@ -8,33 +8,33 @@ Import: `import { KptDatepicker } from '@konce-pt/react';`
       <div class="kpt-datepicker" role="combobox" tabindex="0" aria-haspopup="dialog">
         <span class="kpt-datepicker__value">06.09.2026</span>
         <span class="kpt-datepicker__spacer"></span>
-        <button class="kpt-datepicker__clear">…</button>
-        <span class="kpt-icon-host kpt-datepicker__icon">…</span>
+        <button class="kpt-datepicker__clear">...</button>
+        <span class="kpt-icon-host kpt-datepicker__icon">...</span>
       </div>
     </div>
-    <!-- in a portal: <div class="kpt-calendar">…</div> -->
+    <!-- in a portal: <div class="kpt-calendar">...</div> -->
 
 ## Props
-- `value` / `defaultValue` / `onValueChange` — the value as a string; its format follows the mode:
+- `value` / `defaultValue` / `onValueChange` - the value as a string; its format follows the mode:
   'YYYY-MM-DD' / 'YYYY-MM' / 'YYYY' / 'MM' / 'YYYY-MM-DDTHH:mm' / 'HH:mm'
 - `selectionMode`: `'date'` (default) | `'monthYear'` | `'year'` | `'month'` | `'datetime'` | `'time'`
-- `startView`: `'day' | 'month' | 'year' | 'decade' | null` — the level the panel opens at; `null`
+- `startView`: `'day' | 'month' | 'year' | 'decade' | null` - the level the panel opens at; `null`
   means the level where the mode commits. It is never lowered below that level, so
   `startView="day"` in 'year' mode is raised to 'year'.
 - `minDate`, `maxDate`: 'YYYY-MM-DD' strings
 - `monthDisplay`: `'long'` (default) | `'number'`; `displayFormat`: `'pl'` (default) | `'iso'` | `'locale'`
-- `hourFormat`: 12 | 24 (default 24) — the dial; the stored value is always 24h
-- `minuteStep`: number (default 1) — minute snapping on the dial
-- `open` / `onOpenChange` — the panel state, so it can be opened from outside
+- `hourFormat`: 12 | 24 (default 24) - the dial; the stored value is always 24h
+- `minuteStep`: number (default 1) - minute snapping on the dial
+- `open` / `onOpenChange` - the panel state, so it can be opened from outside
 - `placeholder`, `ariaLabel`, `disabled`, `invalid`, `touched`
-- `onTouch()` — fires when the panel closes or focus leaves the closed trigger
+- `onTouch()` - fires when the panel closes or focus leaves the closed trigger
 - `className`, `ref` and every other `<div>` prop go to the host
 
 ## 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
+`Enter`, `Space` and `ArrowDown` 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,
+- Day grid: `ArrowLeft`/`ArrowRight` one day, `ArrowUp`/`ArrowDown` 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
@@ -42,22 +42,22 @@ the selected day, or today, clamped to `minDate`/`maxDate`.
 - 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
+  and returns focus to the trigger. `Delete`/`Backspace` on the trigger clears the value; the "x" button
   sits outside the Tab order.
 
 ## The view stack
-The header is always `‹ title ›`: the arrows page the current level, the title goes one level up.
+The header is always `< title >`: the arrows page the current level, the title goes one level up.
 
-    day      ‹  [June]  [1979]  ›   arrows ±1 month;  the chips → months / years
-    month    ‹      [1979]      ›   arrows ±1 year;   the chip  → years
-    year     ‹  [1970 – 1979]   ›   arrows ±10 years; the chip  → decades
-    decade   ‹   1920 – 2039    ›   arrows ±120 years; the top of the stack
+    day      <  [June]  [1979]  >   arrows +/-1 month;  the chips -> months / years
+    month    <      [1979]      >   arrows +/-1 year;   the chip  -> years
+    year     <  [1970 - 1979]   >   arrows +/-10 years; the chip  -> decades
+    decade   <   1920 - 2039    >   arrows +/-120 years; the top of the stack
 
 Clicking a cell above the committing level drills down; on that level it sets the value and closes
 the panel. An arrow dims when the whole neighbouring page falls outside `minDate`/`maxDate`.
 
 ## The logic lives in a package, the component only renders
-Every grid, bound and format comes from `@konce-pt/datetime` — pure functions with their own tests.
+Every grid, bound and format comes from `@konce-pt/datetime` - pure functions with their own tests.
 The component holds nothing but React state: the page, the level, the time buffer.
 
 ## The panel is set up on open, not on click
@@ -66,7 +66,7 @@ outside through the `open` prop. The effect deliberately depends on `open` alone
 while the panel is open must not reset the view under the user's fingers.
 
 ## Requires
-`@konce-pt/styles/components` for the calendar styles. No CDK — the panel rides the internal
+`@konce-pt/styles/components` for the calendar styles. No CDK - the panel rides the internal
 overlay primitive.
 
 ## Examples
@@ -83,16 +83,16 @@ navigation labels and "Done" come from the `datepicker` and `common` namespaces;
 
 ## Week start, display format and field state
 - The week starts by the active language (`Intl.Locale#getWeekInfo`, with a fallback list of regions):
-  en / en-US on Sunday, pl, de, en-GB on Monday. `firstDayOfWeek` (1 = Monday … 7 = Sunday) overrides it;
+  en / en-US on Sunday, pl, de, en-GB on Monday. `firstDayOfWeek` (1 = Monday ... 7 = Sunday) overrides it;
   the headers, the grid and `Home`/`End` follow it.
-- `displayFormat`: `'pl'` (DD.MM.YYYY, default), `'iso'` (YYYY-MM-DD) or `'locale'` — order and separators
+- `displayFormat`: `'pl'` (DD.MM.YYYY, default), `'iso'` (YYYY-MM-DD) or `'locale'` - order and separators
   from `Intl` (en-US: MM/DD/YYYY). The placeholder follows the format and its letters follow the language
   (EN `YYYY`, PL `RRRR`, the `datepicker.yearToken`/`monthToken`/`dayToken` keys). AM/PM come from `Intl`.
 - The field is `role="combobox"` with `aria-haspopup="dialog"` (the APG select-only combobox), so it carries
-  `aria-required` (`required`), `aria-readonly` (`readOnly` — the value shows, the panel does not open,
+  `aria-required` (`required`), `aria-readonly` (`readOnly` - the value shows, the panel does not open,
   there is no clear button) and `aria-invalid`.
-- Turning the page with ‹ › is announced (`aria-live="polite"`); the title buttons are named
-  "October, Choose month" — the visible text first (WCAG 2.5.3). Clearing the value counts as a touch.
+- Turning the page with < > is announced (`aria-live="polite"`); the title buttons are named
+  "October, Choose month" - the visible text first (WCAG 2.5.3). Clearing the value counts as a touch.
 - "Today" is computed on every open, so a panel opened after midnight marks the right day.
 
 ## Label and description

package/dist/dialog/dialog.d.ts

@@ -1,28 +1,33 @@
 import { type ComponentPropsWithRef, type ReactNode } from 'react';
 import { type KptI18nOverrides } from '../i18n/i18n-context.tsx';
-/** Szerokość okna. `md` to wartość domyślna i zarazem jedyna, jaką okno miało wcześniej. */
-export type KptDialogSize = 'sm' | 'md' | 'lg';
+/**
+ * Szerokość okna. `md` to wartość domyślna i zarazem jedyna, jaką okno miało wcześniej;
+ * `full` to cały ekran (bez ramki, zaokrągleń i marginesów).
+ */
+export type KptDialogSize = 'sm' | 'md' | 'lg' | 'full';
 export interface KptDialogProps extends Omit<ComponentPropsWithRef<'dialog'>, 'open' | 'onClose'>, KptI18nOverrides {
     open: boolean;
     onOpenChange: (open: boolean) => void;
     header?: string;
     /**
-     * Szerokość okna: `sm` 24rem, `md` 32rem (domyślna), `lg` 48rem — zawsze przycięta do szerokości
+     * Szerokość okna: `sm` 24rem, `md` 32rem (domyślna), `lg` 48rem - zawsze przycięta do szerokości
      * okna przeglądarki. `lg` jest dla treści, której nie da się sensownie zwęzić: kodu, tabeli,
-     * porównania dwóch kolumn.
+     * porównania dwóch kolumn. `full` zajmuje cały ekran, a treść rośnie na całą wysokość - dla
+     * podglądu kamery, edytora albo okna, które na telefonie ma być osobnym ekranem
+     * (`[size]="phone() ? 'full' : 'md'"`).
      */
     size?: KptDialogSize;
-    /** Pozwala zamknąć klawiszem Esc i przyciskiem ×. */
+    /** Pozwala zamknąć klawiszem Esc i przyciskiem x. */
     dismissible?: boolean;
     children?: ReactNode;
 }
 /**
- * Okno modalne na natywnym `<dialog>` — pułapka fokusu, Escape i backdrop pochodzą z platformy,
+ * Okno modalne na natywnym `<dialog>` - pułapka fokusu, Escape i backdrop pochodzą z platformy,
  * nie z naszego kodu. Stopkę wstaw przez `<KptDialog.Footer>`.
  *
  * Z `header` okno bierze nazwę z nagłówka (`aria-labelledby`); bez niego podaj `aria-label`.
  * Okno wymagające odpowiedzi dostaje `role="alertdialog"` i `aria-describedby` wprost z propsów
- * `<dialog>` — tak robi `KptConfirmContainer`.
+ * `<dialog>` - tak robi `KptConfirmContainer`.
  *
  * @example
  * <KptDialog open={open} onOpenChange={setOpen} header="Usunąć?">

package/dist/dialog/dialog.js

@@ -10,12 +10,12 @@ import { KptOverlayContainerContext } from "../internal/overlay-container.js";
 import { useKptMessages } from "../i18n/i18n-context.js";
 import { KptIcon } from "../icon/icon.js";
 /**
- * Okno modalne na natywnym `<dialog>` — pułapka fokusu, Escape i backdrop pochodzą z platformy,
+ * Okno modalne na natywnym `<dialog>` - pułapka fokusu, Escape i backdrop pochodzą z platformy,
  * nie z naszego kodu. Stopkę wstaw przez `<KptDialog.Footer>`.
  *
  * Z `header` okno bierze nazwę z nagłówka (`aria-labelledby`); bez niego podaj `aria-label`.
  * Okno wymagające odpowiedzi dostaje `role="alertdialog"` i `aria-describedby` wprost z propsów
- * `<dialog>` — tak robi `KptConfirmContainer`.
+ * `<dialog>` - tak robi `KptConfirmContainer`.
  *
  * @example
  * <KptDialog open={open} onOpenChange={setOpen} header="Usunąć?">
@@ -30,7 +30,7 @@ export function KptDialog({ open, onOpenChange, header = '', size = 'md', dismis
     const { t } = useKptMessages({ locale, dictionary });
     const dialogRef = useRef(null);
     const titleId = useKptId(undefined, 'kpt-dialog-title');
-    // Element trafia do kontekstu, więc musi wywołać render — sam `ref` by nie wystarczył.
+    // Element trafia do kontekstu, więc musi wywołać render - sam `ref` by nie wystarczył.
     const [dialogEl, setDialogEl] = useState(null);
     useEffect(() => {
         const el = dialogRef.current;
@@ -49,7 +49,7 @@ export function KptDialog({ open, onOpenChange, header = '', size = 'md', dismis
     /**
      * `close` przychodzi z każdej drogi. Przy `dismissible=false` zamknąć wolno tylko z kodu:
      * Chromium z CloseWatcherem pozwala anulować `cancel` jedynie po aktywacji użytkownika, więc drugi
-     * Escape z rzędu zamyka okno mimo `preventDefault` — wtedy otwieramy je z powrotem.
+     * Escape z rzędu zamyka okno mimo `preventDefault` - wtedy otwieramy je z powrotem.
      */
     const onClose = () => {
         const el = dialogRef.current;

package/dist/dialog/llms.txt

@@ -1,31 +1,34 @@
 # KptDialog (@konce-pt/react)
 
-A modal window on a native `<dialog>` — the focus trap, Escape and the backdrop come from the
+A modal window on a native `<dialog>` - the focus trap, Escape and the backdrop come from the
 platform, not from our code. Import: `import { KptDialog } from '@konce-pt/react';`
 
 ## DOM
     <dialog class="kpt-dialog">
       <div class="kpt-dialog__header">
         <h2 class="kpt-dialog__title">Delete record?</h2>
-        <button class="kpt-dialog__close" type="button" aria-label="Close">…</button>
+        <button class="kpt-dialog__close" type="button" aria-label="Close">...</button>
       </div>
-      <div class="kpt-dialog__body">…children…</div>
-      <div kptdialogfooter="">…footer…</div>
+      <div class="kpt-dialog__body">...children...</div>
+      <div kptdialogfooter="">...footer...</div>
     </dialog>
 
 ## Props
-- `open`: boolean, `onOpenChange(open)` — the dialog is always controlled; the browser can close it
+- `open`: boolean, `onOpenChange(open)` - the dialog is always controlled; the browser can close it
   on its own (Escape, the `close` event), and the state has to follow
-- `header`: string — the title; with no header there is no header row and no × button
-- `dismissible`: boolean (default true) — allows Escape and shows ×
+- `header`: string - the title; with no header there is no header row and no x button
+- `dismissible`: boolean (default true) - allows Escape and shows x
+- `size`: 'sm' | 'md' | 'lg' | 'full' (default 'md') - 24rem / 32rem / 48rem, capped at the viewport;
+  `full` covers the whole screen (no border, radius or margin) and the body grows to the full height -
+  e.g. `size={phone ? 'full' : 'md'}` for a window that is its own screen on a phone
 - `className`, `ref` and every other `<dialog>` prop go to the dialog
 
 ## Sub-components
-- `KptDialog.Footer` — lifted below the body; carries the `kptdialogfooter` attribute the shared
+- `KptDialog.Footer` - lifted below the body; carries the `kptdialogfooter` attribute the shared
   SCSS targets.
 
 ## An overlay inside a modal
-`showModal()` lifts the dialog into the browser's TOP LAYER, which sits above the whole document —
+`showModal()` lifts the dialog into the browser's TOP LAYER, which sits above the whole document -
 no `z-index` beats it. A `KptSelect` or `KptMenu` panel portalled to `document.body` would open
 INVISIBLE, hidden behind the modal backdrop. While it is open, `KptDialog` therefore makes itself
 the overlay container (through `KptOverlayContainerContext`), so those panels portal INSIDE the
@@ -47,10 +50,10 @@ dialog; the mechanism differs, the result does not.
 
 ## Accessibility
 A native `<dialog>` opened with `showModal()`: focus moves inside and is trapped, the rest of the
-page becomes inert, and Escape closes it — all from the browser. With `dismissible={false}` the
+page becomes inert, and Escape closes it - all from the browser. With `dismissible={false}` the
 `cancel` event is prevented, so Escape stops working; give the user another way out.
 With `header` the dialog is named by its title (`aria-labelledby`); without one pass `aria-label`.
 `role="alertdialog"` and `aria-describedby` go straight through as `<dialog>` props.
 
 ## Scrolling and non-dismissible windows
-An open window locks page scrolling underneath (a shared counter with drawers and bottom sheets, so nested windows do not release each other). With `dismissible` off the window gets `closedby="none"`, and if a browser still closes it on a gesture (Chromium lets the second Escape in a row through `cancel`), it is reopened — only code can close it.
+An open window locks page scrolling underneath (a shared counter with drawers and bottom sheets, so nested windows do not release each other). With `dismissible` off the window gets `closedby="none"`, and if a browser still closes it on a gesture (Chromium lets the second Escape in a row through `cancel`), it is reopened - only code can close it.

package/dist/divider/divider.d.ts

@@ -5,7 +5,7 @@ export interface KptDividerProps extends Omit<ComponentPropsWithRef<'div'>, 'chi
     /** Wcięcie (odstęp od krawędzi kontenera). */
     inset?: boolean;
     /**
-     * Linia czysto ozdobna (np. między kartami, które i tak są osobnymi regionami) — bez
+     * Linia czysto ozdobna (np. między kartami, które i tak są osobnymi regionami) - bez
      * `role="separator"`, ukryta przed czytnikiem. Domyślnie separator jest ogłaszany.
      */
     decorative?: boolean;

package/dist/divider/llms.txt

@@ -1,6 +1,6 @@
 # KptDivider (@konce-pt/react)
 
-A separator — a horizontal or vertical line. Colour from `--kpt-color-border`.
+A separator - a horizontal or vertical line. Colour from `--kpt-color-border`.
 Import: `import { KptDivider } from '@konce-pt/react';`
 
 ## DOM
@@ -8,13 +8,13 @@ Import: `import { KptDivider } from '@konce-pt/react';`
 
 ## Props
 - `orientation`: 'horizontal' | 'vertical' (default 'horizontal')
-- `inset`: boolean — an indent from the container edges
-- `decorative`: boolean — a purely ornamental line: no `role="separator"`, hidden from screen readers
+- `inset`: boolean - an indent from the container edges
+- `decorative`: boolean - a purely ornamental line: no `role="separator"`, hidden from screen readers
 - `className`, `ref` and every other `<div>` prop go to the divider
 
 ## Vertical needs a flex parent
 The vertical variant stretches to the height of its container, so it only makes sense inside a
-flex row — on its own it has nothing to measure against and collapses to nothing.
+flex row - on its own it has nothing to measure against and collapses to nothing.
 
 ## Examples
     <KptDivider />

package/dist/drawer/drawer.d.ts

@@ -7,11 +7,11 @@ export interface KptDrawerProps extends Omit<ComponentPropsWithRef<'div'>, 'onCh
     position?: KptDrawerPosition;
     header?: string;
     /**
-     * Nazwa panelu bez `header` — okno dialogowe bez nazwy czytnik ogłasza jako samo „okno
-     * dialogowe” (WCAG 4.1.2). Z nagłówkiem nazwą jest nagłówek (`aria-labelledby`).
+     * Nazwa panelu bez `header` - okno dialogowe bez nazwy czytnik ogłasza jako samo "okno
+     * dialogowe" (WCAG 4.1.2). Z nagłówkiem nazwą jest nagłówek (`aria-labelledby`).
      */
     ariaLabel?: string;
-    /** Pokazuje przycisk × i pozwala zamknąć klawiszem Escape. */
+    /** Pokazuje przycisk x i pozwala zamknąć klawiszem Escape. */
     dismissible?: boolean;
     closeOnBackdrop?: boolean;
     children?: ReactNode;
@@ -19,12 +19,12 @@ export interface KptDrawerProps extends Omit<ComponentPropsWithRef<'div'>, 'onCh
 /**
  * Panel wysuwany (drawer / off-canvas), niezależny od app-shell.
  *
- * Panel i backdrop są zawsze w DOM, a o widoczności decyduje klasa `is-open` — dzięki temu
+ * Panel i backdrop są zawsze w DOM, a o widoczności decyduje klasa `is-open` - dzięki temu
  * wysunięcie i schowanie da się animować, tak samo jak w porcie Angulara.
  *
  * @example
  * <KptDrawer open={open} onOpenChange={setOpen} position="right" header="Filtry">
- *   Treść panelu…
+ *   Treść panelu...
  * </KptDrawer>
  */
 export declare function KptDrawer({ open, onOpenChange, position, header, ariaLabel, dismissible, closeOnBackdrop, locale, dictionary, className, children, ...rest }: Readonly<KptDrawerProps>): import("react").JSX.Element;

package/dist/drawer/drawer.js

@@ -9,12 +9,12 @@ import { KptIcon } from "../icon/icon.js";
 /**
  * Panel wysuwany (drawer / off-canvas), niezależny od app-shell.
  *
- * Panel i backdrop są zawsze w DOM, a o widoczności decyduje klasa `is-open` — dzięki temu
+ * Panel i backdrop są zawsze w DOM, a o widoczności decyduje klasa `is-open` - dzięki temu
  * wysunięcie i schowanie da się animować, tak samo jak w porcie Angulara.
  *
  * @example
  * <KptDrawer open={open} onOpenChange={setOpen} position="right" header="Filtry">
- *   Treść panelu…
+ *   Treść panelu...
  * </KptDrawer>
  */
 export function KptDrawer({ open, onOpenChange, position = 'left', header = '', ariaLabel = '', dismissible = true, closeOnBackdrop = true, locale, dictionary, className, children, ...rest }) {

package/dist/drawer/llms.txt

@@ -9,38 +9,38 @@ Import: `import { KptDrawer } from '@konce-pt/react';`
       <aside class="kpt-drawer__panel is-open" data-position="right" role="dialog" aria-modal="true" tabindex="-1">
         <div class="kpt-drawer__header">
           <span class="kpt-drawer__title">Filters</span>
-          <button class="kpt-drawer__close" type="button" aria-label="Close">…</button>
+          <button class="kpt-drawer__close" type="button" aria-label="Close">...</button>
         </div>
-        <div class="kpt-drawer__body">…children…</div>
+        <div class="kpt-drawer__body">...children...</div>
       </aside>
     </div>
 
 ## Props
-- `open`: boolean, `onOpenChange(open)` — controlled
+- `open`: boolean, `onOpenChange(open)` - controlled
 - `position`: 'left' | 'right' | 'top' | 'bottom' (default 'left')
 - `header`: string
-- `dismissible`: boolean (default true) — shows × and lets Escape close it
+- `dismissible`: boolean (default true) - shows x and lets Escape close it
 - `closeOnBackdrop`: boolean (default true)
 - `className`, `ref` and every other `<div>` prop go to the host
 
 ## Always in the DOM
 The panel and the backdrop are always rendered; only the `is-open` class decides what is visible.
-That is what makes the slide animatable — mounting the panel on open would give the transition
+That is what makes the slide animatable - mounting the panel on open would give the transition
 nothing to animate from.
 
 ## Not a native modal
 Unlike `KptDialog` this is a plain `<aside role="dialog" aria-modal="true">`, not a native
-`<dialog>` — the focus handling below is done by the component, not by the browser.
+`<dialog>` - the focus handling below is done by the component, not by the browser.
 
 ## 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 — only when `dismissible`, like the `×` button. 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 `x` button. 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
     <KptDrawer open={open} onOpenChange={setOpen} position="right" header="Filters">
-      Panel content…
+      Panel content...
     </KptDrawer>
 
 ## Tokens
@@ -49,7 +49,7 @@ is named by its `header` through `aria-labelledby`. The shared helper is `intern
 
 ## Accessibility
 `role="dialog"`, `aria-modal="true"` and `aria-labelledby` pointing at the title; the close button gets
-its label from `common.close`. Focus handling — see "Focus and keyboard" above.
+its label from `common.close`. Focus handling - see "Focus and keyboard" above.
 
 ## Name and scrolling
-Without `header` give the panel `ariaLabel` — a `role="dialog"` without a name is announced as a bare "dialog". An open drawer locks page scrolling underneath.
+Without `header` give the panel `ariaLabel` - a `role="dialog"` without a name is announced as a bare "dialog". An open drawer locks page scrolling underneath.

package/dist/empty/empty.d.ts

@@ -6,14 +6,14 @@ export interface KptEmptyProps extends Omit<ComponentPropsWithRef<'div'>, 'title
     description?: string;
     /**
      * Robi z tytułu nagłówek strony (`role="heading"` z `aria-level`), żeby pusty stan pojawił się
-     * w strukturze dokumentu — np. gdy zastępuje całą sekcję. Bez tego tytuł to sam tekst.
+     * w strukturze dokumentu - np. gdy zastępuje całą sekcję. Bez tego tytuł to sam tekst.
      */
     headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
     /** Akcje pod opisem. */
     children?: ReactNode;
 }
 /**
- * Stan pusty (empty state) — ikona, tytuł, opis i opcjonalne akcje.
+ * Stan pusty (empty state) - ikona, tytuł, opis i opcjonalne akcje.
  *
  * @example
  * <KptEmpty icon="search" title="Brak wyników" description="Zmień kryteria wyszukiwania.">

package/dist/empty/empty.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../internal/cn.js";
 import { KptIcon } from "../icon/icon.js";
 /**
- * Stan pusty (empty state) — ikona, tytuł, opis i opcjonalne akcje.
+ * Stan pusty (empty state) - ikona, tytuł, opis i opcjonalne akcje.
  *
  * @example
  * <KptEmpty icon="search" title="Brak wyników" description="Zmień kryteria wyszukiwania.">

package/dist/empty/llms.txt

@@ -1,23 +1,23 @@
 # KptEmpty (@konce-pt/react)
 
-An empty state — an icon, a title, a description and optional actions.
+An empty state - an icon, a title, a description and optional actions.
 Import: `import { KptEmpty } from '@konce-pt/react';`
 
 ## DOM
     <div class="kpt-empty-host">
       <div class="kpt-empty">
-        <div class="kpt-empty__icon">…icon…</div>
+        <div class="kpt-empty__icon">...icon...</div>
         <p class="kpt-empty__title">No results</p>
         <p class="kpt-empty__desc">Adjust your search criteria.</p>
-        <div class="kpt-empty__actions">…children…</div>
+        <div class="kpt-empty__actions">...children...</div>
       </div>
     </div>
 
 ## Props
-- `icon`: string | null (default 'info-circle') — a registry icon name; `null` hides it
-- `title`: string, `description`: string — each row disappears when its text is empty
-- `headingLevel`: 1–6 | null (default null) — makes the title a heading (`role="heading"` + `aria-level`)
-- `children` — the actions under the description
+- `icon`: string | null (default 'info-circle') - a registry icon name; `null` hides it
+- `title`: string, `description`: string - each row disappears when its text is empty
+- `headingLevel`: 1-6 | null (default null) - makes the title a heading (`role="heading"` + `aria-level`)
+- `children` - the actions under the description
 - `className`, `ref` and every other `<div>` prop go to the host
 
 ## Examples
@@ -31,6 +31,6 @@ Import: `import { KptEmpty } from '@konce-pt/react';`
 `--kpt-color-on-surface-muted` (the description), `--kpt-space-*`.
 
 ## Accessibility
-The icon is decorative. The title is a styled paragraph unless `headingLevel` makes it a heading —
+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.
+is not announced; report "0 results" in a live region of your own.

package/dist/fab/fab.d.ts

@@ -9,7 +9,7 @@ export interface KptFabProps extends ComponentPropsWithRef<'button'> {
     hostProps?: KptHostProps<'span'>;
 }
 /**
- * Floating Action Button — okrągły, wyniesiony przycisk akcji. `extended` robi z niego pigułkę
+ * Floating Action Button - okrągły, wyniesiony przycisk akcji. `extended` robi z niego pigułkę
  * z tekstem.
  *
  * W wariancie okrągłym `aria-label` jest niezbędny, bo przycisk nie ma tekstu; w `extended`

package/dist/fab/fab.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "../internal/cn.js";
 /**
- * Floating Action Button — okrągły, wyniesiony przycisk akcji. `extended` robi z niego pigułkę
+ * Floating Action Button - okrągły, wyniesiony przycisk akcji. `extended` robi z niego pigułkę
  * z tekstem.
  *
  * W wariancie okrągłym `aria-label` jest niezbędny, bo przycisk nie ma tekstu; w `extended`

package/dist/fab/llms.txt

@@ -1,27 +1,27 @@
 # KptFab (@konce-pt/react)
 
-A floating action button — round and raised. `extended` turns it into a pill with text.
+A floating action button - round and raised. `extended` turns it into a pill with text.
 Import: `import { KptFab } from '@konce-pt/react';`
 
 ## DOM
     <span class="kpt-fab-host">
-      <button class="kpt-fab" type="button" data-variant="filled" data-size="md" aria-label="Add">…icon…</button>
+      <button class="kpt-fab" type="button" data-variant="filled" data-size="md" aria-label="Add">...icon...</button>
     </span>
 
 ## Props
 - `variant`: 'filled' | 'tonal' (default 'filled')
 - `size`: 'md' | 'mini' (default 'md')
-- `extended`: boolean — a pill with text next to the icon
-- `hostProps` — props for the `.kpt-fab-host` wrapper
+- `extended`: boolean - a pill with text next to the icon
+- `hostProps` - props for the `.kpt-fab-host` wrapper
 - `className`, `ref` and every other `<button>` prop go to the inner `<button>`
 
 ## The label depends on the variant
-In the round variant `aria-label` is essential — the button has no text. In `extended` the content
+In the round variant `aria-label` is essential - the button has no text. In `extended` the content
 already is the label, so `aria-label` is dropped there rather than passed through: two names on one
 control make a screen reader announce the wrong one.
 
 ## Placement is yours
-The component does not position itself. It is a button, not a layout — put it in a container that
+The component does not position itself. It is a button, not a layout - put it in a container that
 pins it wherever the design wants (usually `position: fixed` in a corner).
 
 ## Examples
@@ -29,6 +29,10 @@ pins it wherever the design wants (usually `position: fixed` in a corner).
     <KptFab extended><KptIcon name="plus" /> New</KptFab>
     <KptFab variant="tonal" size="mini" aria-label="Edit"><KptIcon name="copy" /></KptFab>
 
+## Motion
+Pressed, it squeezes slightly and springs back on release (shared mixin `styles/_press.scss`). Pure CSS; durations follow `--kpt-motion-scale`, so `enabled: false` turns it off, and it drops out
+under "reduce motion".
+
 ## Tokens
 `--kpt-color-primary` / `--kpt-color-on-primary` (filled), `--kpt-color-muted` /
 `--kpt-color-on-muted` (tonal), `--kpt-elevation-3` (`--kpt-elevation-4` on hover); shape

package/dist/fieldset/fieldset.d.ts

@@ -1,6 +1,13 @@
 import type { ComponentPropsWithRef, ReactNode } from 'react';
+import { type KptCollapseMotion } from '@konce-pt/motion';
+export type KptFieldsetVariant = 'outlined' | 'filled';
 export interface KptFieldsetProps extends ComponentPropsWithRef<'div'> {
     legend?: string;
+    /**
+     * `outlined` (domyślny) - sama ramka na tle rodzica; `filled` - grupa na kolorze powierzchni,
+     * np. sekcje w szarym panelu. Legenda w obu bierze tło grupy, więc nie dzieli się na dwa kolory.
+     */
+    variant?: KptFieldsetVariant;
     /** Legenda staje się przyciskiem zwijającym zawartość. */
     toggleable?: boolean;
     collapsed?: boolean;
@@ -8,15 +15,22 @@ export interface KptFieldsetProps extends ComponentPropsWithRef<'div'> {
     onCollapsedChange?: (collapsed: boolean) => void;
     animated?: boolean;
     animationDuration?: number;
+    /**
+     * Ruch zwijania: `spring` - wysokość na sprężynie, treść wjeżdża i wyostrza się, przy zwijaniu
+     * najpierw gaśnie; `fade` - treść się przenika; `none` - bez ruchu. Bez wartości bierze `collapse`
+     * z `KptMotionProvider` (domyślnie `spring`); `animated={false}`, `enabled={false}` i systemowe
+     * "ogranicz ruch" wyłączają go zawsze.
+     */
+    collapseMotion?: KptCollapseMotion;
     children?: ReactNode;
 }
 /**
  * Grupa pól z legendą (`<fieldset>` + `<legend>`), opcjonalnie zwijana.
  *
- * Zwijanie idzie przez `grid-template-rows: 0fr → 1fr`, więc animuje się do naturalnej wysokości
- * treści — bez mierzenia czegokolwiek w JS.
+ * Zwijanie idzie przez `grid-template-rows: 0fr -> 1fr`, więc animuje się do naturalnej wysokości
+ * treści - bez mierzenia czegokolwiek w JS.
  *
  * @example
- * <KptFieldset legend="Dane osobowe" toggleable>…</KptFieldset>
+ * <KptFieldset legend="Dane osobowe" toggleable>...</KptFieldset>
  */
-export declare function KptFieldset({ legend, toggleable, collapsed, defaultCollapsed, onCollapsedChange, animated, animationDuration, className, style, children, ...rest }: Readonly<KptFieldsetProps>): import("react").JSX.Element;
+export declare function KptFieldset({ legend, variant, toggleable, collapsed, defaultCollapsed, onCollapsedChange, animated, animationDuration, collapseMotion, className, style, children, ...rest }: Readonly<KptFieldsetProps>): import("react").JSX.Element;

package/dist/fieldset/fieldset.js

@@ -4,24 +4,27 @@ import { cn } from "../internal/cn.js";
 import { useControllableState } from "../internal/use-controllable-state.js";
 import { useKptId } from "../internal/use-id.js";
 import { KptIcon } from "../icon/icon.js";
+import { resolveCollapseMotion } from '@konce-pt/motion';
+import { useKptMotion } from "../motion/motion-context.js";
 /**
  * Grupa pól z legendą (`<fieldset>` + `<legend>`), opcjonalnie zwijana.
  *
- * Zwijanie idzie przez `grid-template-rows: 0fr → 1fr`, więc animuje się do naturalnej wysokości
- * treści — bez mierzenia czegokolwiek w JS.
+ * Zwijanie idzie przez `grid-template-rows: 0fr -> 1fr`, więc animuje się do naturalnej wysokości
+ * treści - bez mierzenia czegokolwiek w JS.
  *
  * @example
- * <KptFieldset legend="Dane osobowe" toggleable>…</KptFieldset>
+ * <KptFieldset legend="Dane osobowe" toggleable>...</KptFieldset>
  */
-export function KptFieldset({ legend = '', toggleable = false, collapsed, defaultCollapsed = false, onCollapsedChange, animated = true, animationDuration = 500, className, style, children, ...rest }) {
+export function KptFieldset({ legend = '', variant = 'outlined', toggleable = false, collapsed, defaultCollapsed = false, onCollapsedChange, animated = true, animationDuration = 500, collapseMotion, className, style, children, ...rest }) {
     const bodyId = useKptId(undefined, 'kpt-fieldset-body');
+    const motion = resolveCollapseMotion(collapseMotion, useKptMotion(), animated);
     const [isCollapsed, setCollapsed] = useControllableState({
         value: collapsed,
         defaultValue: defaultCollapsed,
         onChange: onCollapsedChange,
     });
-    return (_jsx("div", { className: cn('kpt-fieldset-host', className), style: {
+    return (_jsx("div", { className: cn('kpt-fieldset-host', className), "data-variant": variant, style: {
             ['--kpt-anim-duration']: `${animated ? animationDuration : 0}ms`,
             ...style,
-        }, ...rest, children: _jsxs("fieldset", { className: "kpt-fieldset", children: [_jsx("legend", { className: "kpt-fieldset__legend", children: toggleable ? (_jsxs("button", { type: "button", className: "kpt-fieldset__toggle", "aria-expanded": !isCollapsed, "aria-controls": bodyId, onClick: () => setCollapsed(!isCollapsed), children: [_jsx(KptIcon, { name: isCollapsed ? 'chevron-down' : 'chevron-up' }), _jsx("span", { children: legend })] })) : (_jsx("span", { children: legend })) }), _jsx("div", { id: bodyId, className: cn('kpt-fieldset__collapse', !isCollapsed && 'is-open'), inert: isCollapsed, children: _jsx("div", { className: "kpt-fieldset__collapse-inner", children: _jsx("div", { className: "kpt-fieldset__body", children: children }) }) })] }) }));
+        }, ...rest, children: _jsxs("fieldset", { className: "kpt-fieldset", "data-motion": motion, children: [_jsx("legend", { className: "kpt-fieldset__legend", children: toggleable ? (_jsxs("button", { type: "button", className: "kpt-fieldset__toggle", "aria-expanded": !isCollapsed, "aria-controls": bodyId, onClick: () => setCollapsed(!isCollapsed), children: [_jsx(KptIcon, { name: "chevron-down", className: cn('kpt-fieldset__chevron', !isCollapsed && 'is-open') }), _jsx("span", { children: legend })] })) : (_jsx("span", { children: legend })) }), _jsx("div", { id: bodyId, className: cn('kpt-fieldset__collapse', !isCollapsed && 'is-open'), inert: isCollapsed, children: _jsx("div", { className: "kpt-fieldset__collapse-inner", children: _jsx("div", { className: "kpt-fieldset__body", children: children }) }) })] }) }));
 }