@konce-pt/react 0.11.2 → 0.14.0

package/dist/dialog/llms.txt

@@ -1,31 +1,31 @@
 # 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
 - `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,7 +47,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.

package/dist/divider/divider.d.ts

@@ -4,6 +4,11 @@ export interface KptDividerProps extends Omit<ComponentPropsWithRef<'div'>, 'chi
     orientation?: KptDividerOrientation;
     /** 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
+     * `role="separator"`, ukryta przed czytnikiem. Domyślnie separator jest ogłaszany.
+     */
+    decorative?: boolean;
 }
 /**
  * Separator (linia pozioma lub pionowa). Kolor z `--kpt-color-border`.
@@ -12,5 +17,6 @@ export interface KptDividerProps extends Omit<ComponentPropsWithRef<'div'>, 'chi
  * <KptDivider />
  * <KptDivider orientation="vertical" />
  * <KptDivider inset />
+ * <KptDivider decorative />
  */
-export declare function KptDivider({ orientation, inset, className, ...rest }: Readonly<KptDividerProps>): import("react").JSX.Element;
+export declare function KptDivider({ orientation, inset, decorative, className, ...rest }: Readonly<KptDividerProps>): import("react").JSX.Element;

package/dist/divider/divider.js

@@ -7,7 +7,8 @@ import { cn } from "../internal/cn.js";
  * <KptDivider />
  * <KptDivider orientation="vertical" />
  * <KptDivider inset />
+ * <KptDivider decorative />
  */
-export function KptDivider({ orientation = 'horizontal', inset = false, className, ...rest }) {
-    return (_jsx("div", { className: cn('kpt-divider', inset && 'kpt-divider--inset', className), role: "separator", "aria-orientation": orientation, "data-orientation": orientation, ...rest }));
+export function KptDivider({ orientation = 'horizontal', inset = false, decorative = false, className, ...rest }) {
+    return (_jsx("div", { className: cn('kpt-divider', inset && 'kpt-divider--inset', className), role: decorative ? 'none' : 'separator', "aria-orientation": decorative ? undefined : orientation, "aria-hidden": decorative || undefined, "data-orientation": orientation, ...rest }));
 }

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,12 +8,13 @@ Import: `import { KptDivider } from '@konce-pt/react';`
 
 ## Props
 - `orientation`: 'horizontal' | 'vertical' (default 'horizontal')
-- `inset`: boolean — an indent from the container edges
+- `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

@@ -6,7 +6,12 @@ export interface KptDrawerProps extends Omit<ComponentPropsWithRef<'div'>, 'onCh
     onOpenChange: (open: boolean) => void;
     position?: KptDrawerPosition;
     header?: string;
-    /** Pokazuje przycisk × i pozwala zamknąć klawiszem Escape. */
+    /**
+     * 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 x i pozwala zamknąć klawiszem Escape. */
     dismissible?: boolean;
     closeOnBackdrop?: boolean;
     children?: ReactNode;
@@ -14,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, dismissible, closeOnBackdrop, locale, dictionary, className, children, ...rest }: Readonly<KptDrawerProps>): import("react").JSX.Element;
+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

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useRef } from 'react';
 import { cn } from "../internal/cn.js";
@@ -8,15 +9,15 @@ 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 = '', dismissible = true, closeOnBackdrop = true, locale, dictionary, className, children, ...rest }) {
+export function KptDrawer({ open, onOpenChange, position = 'left', header = '', ariaLabel = '', dismissible = true, closeOnBackdrop = true, locale, dictionary, className, children, ...rest }) {
     const { t } = useKptMessages({ locale, dictionary });
     const close = useCallback(() => onOpenChange(false), [onOpenChange]);
     const panelRef = useRef(null);
@@ -26,5 +27,5 @@ export function KptDrawer({ open, onOpenChange, position = 'left', header = '',
         if (event.key === 'Escape' && dismissible)
             close();
     };
-    return (_jsxs("div", { className: cn('kpt-drawer-host', className), ...rest, children: [_jsx("div", { className: cn('kpt-drawer__backdrop', open && 'is-open'), onClick: () => closeOnBackdrop && close() }), _jsxs("aside", { ref: panelRef, className: cn('kpt-drawer__panel', open && 'is-open'), "data-position": position, role: "dialog", "aria-modal": "true", "aria-labelledby": header ? titleId : undefined, tabIndex: -1, onKeyDown: onKeyDown, children: [header || dismissible ? (_jsxs("div", { className: "kpt-drawer__header", children: [_jsx("span", { className: "kpt-drawer__title", id: titleId, children: header }), dismissible ? (_jsx("button", { type: "button", className: "kpt-drawer__close", onClick: close, "aria-label": t('common.close'), children: _jsx(KptIcon, { name: "x" }) })) : null] })) : null, _jsx("div", { className: "kpt-drawer__body", children: children })] })] }));
+    return (_jsxs("div", { className: cn('kpt-drawer-host', className), ...rest, children: [_jsx("div", { className: cn('kpt-drawer__backdrop', open && 'is-open'), onClick: () => closeOnBackdrop && close() }), _jsxs("aside", { ref: panelRef, className: cn('kpt-drawer__panel', open && 'is-open'), "data-position": position, role: "dialog", "aria-modal": "true", "aria-labelledby": header ? titleId : undefined, "aria-label": header ? undefined : ariaLabel || undefined, tabIndex: -1, onKeyDown: onKeyDown, children: [header || dismissible ? (_jsxs("div", { className: "kpt-drawer__header", children: [_jsx("span", { className: "kpt-drawer__title", id: titleId, children: header }), dismissible ? (_jsx("button", { type: "button", className: "kpt-drawer__close", onClick: close, "aria-label": t('common.close'), children: _jsx(KptIcon, { name: "x" }) })) : null] })) : null, _jsx("div", { className: "kpt-drawer__body", children: children })] })] }));
 }

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,4 +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.

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

@@ -1,24 +1,30 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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, onClick: () => setCollapsed(!isCollapsed), children: [_jsx(KptIcon, { name: isCollapsed ? 'chevron-down' : 'chevron-up' }), _jsx("span", { children: legend })] })) : (_jsx("span", { children: legend })) }), _jsx("div", { className: cn('kpt-fieldset__collapse', !isCollapsed && 'is-open'), inert: isCollapsed, "aria-hidden": 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 }) }) })] }) }));
 }

package/dist/fieldset/llms.txt

@@ -4,27 +4,31 @@ A group of fields with a legend, optionally collapsible.
 Import: `import { KptFieldset } from '@konce-pt/react';`
 
 ## DOM
-    <div class="kpt-fieldset-host" style="--kpt-anim-duration:500ms">
+    <div class="kpt-fieldset-host" data-variant="outlined" style="--kpt-anim-duration:500ms">
       <fieldset class="kpt-fieldset">
         <legend class="kpt-fieldset__legend">
-          <button class="kpt-fieldset__toggle" aria-expanded="true">…<span>Personal data</span></button>
+          <button class="kpt-fieldset__toggle" aria-expanded="true">...<span>Personal data</span></button>
         </legend>
         <div class="kpt-fieldset__collapse is-open">
-          <div class="kpt-fieldset__collapse-inner"><div class="kpt-fieldset__body">…</div></div>
+          <div class="kpt-fieldset__collapse-inner"><div class="kpt-fieldset__body">...</div></div>
         </div>
       </fieldset>
     </div>
 
 ## Props
 - `legend`: string
-- `toggleable`: boolean — turns the legend into a collapse button
+- `variant`: `'outlined'` (default, a frame on the parent's background) | `'filled'` (the group on
+  `--kpt-color-surface`, e.g. sections inside a grey panel); the legend takes the group's background
+  with rounded ends in both, so it never splits into two colours
+- `toggleable`: boolean - turns the legend into a collapse button
 - `collapsed` / `defaultCollapsed` / `onCollapsedChange`
 - `animated`: boolean (default true), `animationDuration`: ms (default 500)
+- `collapseMotion`: `'spring' | 'fade' | 'none'` (default from `KptMotionProvider`, else `spring`) - see "Collapse motion"
 - `className`, `ref` and every other `<div>` prop go to the host
 
 ## Collapsing without measuring
-The transition runs on `grid-template-rows: 0fr → 1fr`, so it animates to the content's natural
-height with no JS measurement and no height cached at mount — content that grows later still
+The transition runs on `grid-template-rows: 0fr -> 1fr`, so it animates to the content's natural
+height with no JS measurement and no height cached at mount - content that grows later still
 collapses correctly.
 
 ## The real fieldset stays
@@ -32,11 +36,24 @@ The markup is a native `<fieldset>` + `<legend>`, so the grouping is real for as
 the collapse only wraps the body, never the legend.
 
 ## Examples
-    <KptFieldset legend="Personal data" toggleable>…</KptFieldset>
-    <KptFieldset legend="Advanced" toggleable collapsed={closed} onCollapsedChange={setClosed}>…</KptFieldset>
+    <KptFieldset legend="Personal data" toggleable>...</KptFieldset>
+    <KptFieldset legend="Scrolling" variant="filled">...</KptFieldset>
+    <KptFieldset legend="Advanced" toggleable collapsed={closed} onCollapsedChange={setClosed}>...</KptFieldset>
+
+## Collapse motion
+- `spring` - the height opens on a soft spring, the content slides in from above and sharpens out
+  of a blur; when collapsing, the content fades first and only then the section closes. The chevron
+  turns on a spring.
+- `fade` - the height on the standard curve, the content cross-fades.
+- `none` - the state changes without motion.
+
+With no value it takes `collapse` from `KptMotionProvider` (default `spring`). `animated={false}`, `enabled: false`
+in the config and the system "reduce motion" setting always turn it off. `animationDuration` sets
+the time of every kind. Pure CSS: the kind sits in `data-motion` on the component root.
 
 ## Tokens
-Border `--kpt-color-border`, radius `--kpt-radius-md`, padding `--kpt-space-4`.
+Border `--kpt-color-border`, radius `--kpt-radius-md`, padding `--kpt-space-4`; `filled` background
+`--kpt-color-surface`, legend corners `--kpt-radius-full`.
 
 ## Accessibility
 The toggle carries `aria-expanded`; the collapsed body gets `inert` and `aria-hidden`, so it is

package/dist/file-upload/file-upload.d.ts

@@ -8,6 +8,12 @@ export interface KptFileUploadProps extends Omit<ComponentPropsWithRef<'div'>, '
     accept?: string;
     multiple?: boolean;
     disabled?: boolean;
+    /** Tylko do odczytu - listę plików widać, nie da się jej zmienić. */
+    readOnly?: boolean;
+    /** Id strefy; bez niego generowane, w `KptFormField` - z wrappera. */
+    id?: string;
+    /** Nazwa dostępna, gdy strefy nie opisuje etykieta (`KptFormField`). */
+    ariaLabel?: string | null;
     invalid?: boolean;
     touched?: boolean;
     onTouch?: () => void;
@@ -17,11 +23,11 @@ export interface KptFileUploadProps extends Omit<ComponentPropsWithRef<'div'>, '
  * Wartością jest tablica `File`.
  *
  * Strefa to `role="button"` z jednym przystankiem Tab: `Enter` i spacja otwierają okno wyboru,
- * tak jak kliknięcie — natywne pole pliku jest ukryte, więc bez tego klawiatura nie miałaby
+ * tak jak kliknięcie - natywne pole pliku jest ukryte, więc bez tego klawiatura nie miałaby
  * jak wybrać pliku. `disabled` wyjmuje strefę z kolejności Tab. Stan błędu: `invalid`
  * i `touched` (pominięty `touched` = błąd widać od razu, jak w `KptInput`).
  *
  * @example
  * <KptFileUpload value={files} onValueChange={setFiles} accept="image/*" multiple />
  */
-export declare function KptFileUpload({ value, defaultValue, onValueChange, accept, multiple, disabled, invalid, touched, onTouch, locale, dictionary, className, ...rest }: Readonly<KptFileUploadProps>): import("react").JSX.Element;
+export declare function KptFileUpload({ value, defaultValue, onValueChange, accept, multiple, disabled, readOnly, id, ariaLabel, invalid, touched, onTouch, locale, dictionary, className, ...rest }: Readonly<KptFileUploadProps>): import("react").JSX.Element;