@konce-pt/react 0.11.2 → 0.14.0

package/dist/clock/clock.js

@@ -1,26 +1,56 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef, useState } from 'react';
-import { from12h, handAngle, handIsInner, hourFromAngle, hourMarks, minuteFromAngle, minuteMarks, pad, parseTime, } from '@konce-pt/datetime';
+import { dayPeriodLabels, from12h, handAngle, handIsInner, hourFromAngle, hourMarks, minuteFromAngle, minuteMarks, pad, parseTime, stepClockTime, } from '@konce-pt/datetime';
 import { cn } from "../internal/cn.js";
+import { useKptMessages } from "../i18n/i18n-context.js";
+/** Klawisze segmentu czasu -> liczba kroków. */
+const SEGMENT_STEPS = { ArrowUp: 1, ArrowDown: -1, PageUp: 5, PageDown: -5 };
 /**
- * Tarcza zegara — dwa etapy: godziny → minuty, klikiem albo przeciąganiem. W trybie 24h dochodzi
- * wewnętrzny pierścień 13–00; w 12h przełącznik AM/PM. Używana przez `KptDatepicker`
- * i `KptDateRange`.
+ * Tarcza zegara - dwa etapy: godziny -> minuty, klikiem albo przeciąganiem. W trybie 24h dochodzi
+ * wewnętrzny pierścień 13-00; w 12h przełącznik AM/PM z etykietami pory dnia z `Intl`. Używana
+ * przez `KptDatepicker` i `KptDateRange`.
+ *
+ * Klawiatura: segmenty godzin i minut to `role="spinbutton"` - `ArrowUp`/`ArrowDown` o jeden krok (minuty
+ * o `minuteStep`), `PageUp`/`PageDown` o pięć, `Home`/`End` do granic. Tak da się ustawić każdą
+ * minutę, także spoza znaczników tarczy co pięć.
  *
  * @example
  * <KptClock value={time} onValueChange={setTime} hourFormat={12} minuteStep={5} />
  */
-export function KptClock({ value = '', onValueChange, hourFormat = 24, minuteStep = 1, className, ...rest }) {
+export function KptClock({ value = '', onValueChange, hourFormat = 24, minuteStep = 1, locale, dictionary, className, ...rest }) {
+    const { t, locale: activeLocale } = useKptMessages({ locale, dictionary });
     const faceRef = useRef(null);
     const [phase, setPhase] = useState('hours');
-    // Wartość jest jedynym źródłem prawdy — stan tarczy wyliczamy z niej przy każdym renderze,
+    // Wartość jest jedynym źródłem prawdy - stan tarczy wyliczamy z niej przy każdym renderze,
     // więc podmiana `value` z zewnątrz nie wymaga synchronizacji.
     const parsed = parseTime(value);
     const hour = parsed?.h ?? 0;
     const minute = parsed?.m ?? 0;
     const ampm = hour < 12 ? 'AM' : 'PM';
     const hour12 = hour % 12 === 0 ? 12 : hour % 12;
+    const periods = dayPeriodLabels(activeLocale);
+    const hourLabel = hourFormat === 12 ? String(hour12) : pad(hour);
+    // W 12h czytnik słyszy godzinę z porą dnia ("9 PM"), nie samą liczbę 21.
+    const hourText = hourFormat === 12 ? `${hour12} ${ampm === 'AM' ? periods.am : periods.pm}` : hourLabel;
     const emit = (h, m) => onValueChange?.(`${pad(h)}:${pad(m)}`);
+    const onSegmentKey = (part, event) => {
+        let next;
+        if (event.key === 'Home') {
+            next = part === 'hours' ? { h: 0, m: minute } : { h: hour, m: 0 };
+        }
+        else if (event.key === 'End') {
+            next = part === 'hours' ? { h: 23, m: minute } : { h: hour, m: 60 - Math.max(1, minuteStep) };
+        }
+        else {
+            const delta = SEGMENT_STEPS[event.key];
+            if (delta === undefined)
+                return;
+            next = stepClockTime(hour, minute, part, delta, minuteStep);
+        }
+        event.preventDefault();
+        emit(next.h, next.m);
+    };
     const onDialPointer = (event) => {
         const face = faceRef.current;
         if (!face)
@@ -28,7 +58,7 @@ export function KptClock({ value = '', onValueChange, hourFormat = 24, minuteSte
         if (event.type === 'pointerdown')
             face.setPointerCapture(event.pointerId);
         // Przy ruchu bez wciśniętego przycisku tarcza ma tylko śledzić kursor wzrokiem, nie zmieniać
-        // wartości — inaczej samo przesunięcie myszy nad zegarem przestawiałoby godzinę.
+        // wartości - inaczej samo przesunięcie myszy nad zegarem przestawiałoby godzinę.
         else if (!(event.buttons & 1))
             return;
         const rect = face.getBoundingClientRect();
@@ -45,7 +75,7 @@ export function KptClock({ value = '', onValueChange, hourFormat = 24, minuteSte
         }
     };
     const marks = phase === 'hours' ? hourMarks(hour, hourFormat) : minuteMarks(minute);
-    return (_jsx("div", { className: cn('kpt-clock-host', className), ...rest, children: _jsxs("div", { className: "kpt-clock", children: [_jsxs("div", { className: "kpt-clock__time", children: [_jsx("button", { type: "button", className: cn('kpt-clock__seg', phase === 'hours' && 'is-active'), onClick: () => setPhase('hours'), children: hourFormat === 12 ? String(hour12) : pad(hour) }), _jsx("span", { className: "kpt-clock__colon", children: ":" }), _jsx("button", { type: "button", className: cn('kpt-clock__seg', phase === 'minutes' && 'is-active'), onClick: () => setPhase('minutes'), children: pad(minute) }), hourFormat === 12 ? (_jsxs("div", { className: "kpt-clock__ampm", children: [_jsx("button", { type: "button", className: cn(ampm === 'AM' && 'is-active'), onClick: () => emit(from12h(hour12, 'AM'), minute), children: "AM" }), _jsx("button", { type: "button", className: cn(ampm === 'PM' && 'is-active'), onClick: () => emit(from12h(hour12, 'PM'), minute), children: "PM" })] })) : null] }), _jsxs("div", { ref: faceRef, className: "kpt-clock__face", onPointerDown: onDialPointer, onPointerMove: onDialPointer, onPointerUp: () => phase === 'hours' && setPhase('minutes'), children: [_jsx("span", { className: "kpt-clock__center" }), _jsx("span", { className: cn('kpt-clock__hand', handIsInner(hour, hourFormat, phase) && 'kpt-clock__hand--inner'), style: { transform: `rotate(${handAngle(hour, minute, phase)}deg)` } }), marks.map((mark) => (_jsx("button", { type: "button", className: cn('kpt-clock__num', mark.inner && 'kpt-clock__num--inner', mark.selected && 'kpt-clock__num--selected'), style: { left: `${mark.x}%`, top: `${mark.y}%` }, onClick: () => {
+    return (_jsx("div", { className: cn('kpt-clock-host', className), ...rest, children: _jsxs("div", { className: "kpt-clock", children: [_jsxs("div", { className: "kpt-clock__time", children: [_jsx("span", { className: cn('kpt-clock__seg', phase === 'hours' && 'is-active'), role: "spinbutton", tabIndex: 0, "aria-label": t('clock.hours'), "aria-valuemin": 0, "aria-valuemax": 23, "aria-valuenow": hour, "aria-valuetext": hourText, onClick: () => setPhase('hours'), onFocus: () => setPhase('hours'), onKeyDown: (event) => onSegmentKey('hours', event), children: hourLabel }), _jsx("span", { className: "kpt-clock__colon", "aria-hidden": "true", children: ":" }), _jsx("span", { className: cn('kpt-clock__seg', phase === 'minutes' && 'is-active'), role: "spinbutton", tabIndex: 0, "aria-label": t('clock.minutes'), "aria-valuemin": 0, "aria-valuemax": 59, "aria-valuenow": minute, "aria-valuetext": pad(minute), onClick: () => setPhase('minutes'), onFocus: () => setPhase('minutes'), onKeyDown: (event) => onSegmentKey('minutes', event), children: pad(minute) }), hourFormat === 12 ? (_jsxs("div", { className: "kpt-clock__ampm", role: "group", children: [_jsx("button", { type: "button", className: cn(ampm === 'AM' && 'is-active'), "aria-pressed": ampm === 'AM', onClick: () => emit(from12h(hour12, 'AM'), minute), children: periods.am }), _jsx("button", { type: "button", className: cn(ampm === 'PM' && 'is-active'), "aria-pressed": ampm === 'PM', onClick: () => emit(from12h(hour12, 'PM'), minute), children: periods.pm })] })) : null] }), _jsxs("div", { ref: faceRef, className: "kpt-clock__face", role: "group", "aria-label": phase === 'hours' ? t('clock.hours') : t('clock.minutes'), onPointerDown: onDialPointer, onPointerMove: onDialPointer, onPointerUp: () => phase === 'hours' && setPhase('minutes'), children: [_jsx("span", { className: "kpt-clock__center" }), _jsx("span", { className: cn('kpt-clock__hand', handIsInner(hour, hourFormat, phase) && 'kpt-clock__hand--inner'), style: { transform: `rotate(${handAngle(hour, minute, phase)}deg)` } }), marks.map((mark) => (_jsx("button", { type: "button", className: cn('kpt-clock__num', mark.inner && 'kpt-clock__num--inner', mark.selected && 'kpt-clock__num--selected'), "aria-pressed": mark.selected, style: { left: `${mark.x}%`, top: `${mark.y}%` }, onClick: () => {
                                 if (phase === 'hours') {
                                     emit(mark.value, minute);
                                     setPhase('minutes');

package/dist/clock/llms.txt

@@ -1,6 +1,6 @@
 # KptClock (@konce-pt/react)
 
-A clock dial — two stages: hours → minutes, by click or by drag. Used by `KptDatepicker` and
+A clock dial - two stages: hours -> minutes, by click or by drag. Used by `KptDatepicker` and
 `KptDateRange`, and available on its own.
 Import: `import { KptClock } from '@konce-pt/react';`
 
@@ -9,19 +9,19 @@ Import: `import { KptClock } from '@konce-pt/react';`
       <div class="kpt-clock">
         <div class="kpt-clock__time">
           <button class="kpt-clock__seg is-active">15</button>:<button class="kpt-clock__seg">30</button>
-          <div class="kpt-clock__ampm">…12h only…</div>
+          <div class="kpt-clock__ampm">...12h only...</div>
         </div>
         <div class="kpt-clock__face">
           <span class="kpt-clock__hand"></span>
-          <button class="kpt-clock__num kpt-clock__num--inner">15</button>…
+          <button class="kpt-clock__num kpt-clock__num--inner">15</button>...
         </div>
       </div>
     </div>
 
 ## Props
-- `value` / `onValueChange` — 'HH:mm', always 24h regardless of `hourFormat`
+- `value` / `onValueChange` - 'HH:mm', always 24h regardless of `hourFormat`
 - `hourFormat`: 12 | 24 (default 24)
-- `minuteStep`: number (default 1) — minute snapping while dragging
+- `minuteStep`: number (default 1) - minute snapping while dragging
 - `className`, `ref` and every other `<div>` prop go to the host
 
 ## The value is the only state
@@ -29,7 +29,7 @@ Hours and minutes are derived from `value` on every render, so replacing it from
 synchronisation. The component keeps one piece of state of its own: which stage the dial is on.
 
 ## Two rings in 24h
-12 and 1–11 sit on the outer ring, 00 and 13–23 on the inner one, because 24 numbers on one circle
+12 and 1-11 sit on the outer ring, 00 and 13-23 on the inner one, because 24 numbers on one circle
 are unreadable. While dragging, the click radius decides the ring; in 12h the AM/PM toggle decides
 the half-day instead.
 
@@ -46,5 +46,9 @@ The dial `--kpt-color-surface-raised`, the hand and the selection `--kpt-color-p
 the numbers `--kpt-color-on-surface`.
 
 ## Accessibility
-Every mark is a real `<button>`, so the dial can be used without a pointer; the hour and minute
-segments are buttons too and switch the stage.
+Every mark is a real `<button>` with `aria-pressed`, inside a group named "Hours"/"Minutes". The hour and
+minute segments are `role="spinbutton"`: Tab to them, `ArrowUp`/`ArrowDown` step by one (minutes by `minuteStep`),
+`PageUp`/`PageDown` by five, `Home`/`End` to the bounds - so every minute is reachable, not only the
+five-minute marks. Focusing a segment switches the stage. AM/PM labels come from `Intl` for the active
+language and the hour's `aria-valuetext` includes the period ("9 PM"). `locale`/`dictionary` override the
+language for this component.

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

@@ -1,6 +1,6 @@
 import { type ComponentPropsWithRef } from 'react';
 import { type KptI18nOverrides } from '../i18n/i18n-context.tsx';
-/** Gotowy kolor z nazwą — nazwa trafia do `aria-label` próbki. */
+/** Gotowy kolor z nazwą - nazwa trafia do `aria-label` próbki. */
 export interface KptColorPreset {
     value: string;
     label: string;
@@ -12,14 +12,18 @@ export interface KptColorPickerProps extends Omit<ComponentPropsWithRef<'div'>,
     onValueChange?: (value: string) => void;
     /**
      * 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.
+     * 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 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;
+    /** Tylko do odczytu - kolor widać, nie da się go zmienić. */
+    readOnly?: boolean;
+    /** Pole wymagane - `aria-required` na polu kodu. */
+    required?: boolean;
     invalid?: boolean;
     touched?: boolean;
     onTouch?: () => void;
@@ -27,10 +31,10 @@ export interface KptColorPickerProps extends Omit<ComponentPropsWithRef<'div'>,
 /**
  * Wybór koloru: próbka, pole hex i presety. Wartością jest hex.
  *
- * Próbka to natywny `<input type="color">` schowany pod kolorowym kwadratem — paletę systemową
+ * Próbka to natywny `<input type="color">` schowany pod kolorowym kwadratem - paletę systemową
  * otwiera przeglądarka, więc działa też na telefonie i nie duplikujemy jej własnym kodem.
  *
  * @example
  * <KptColorPicker value={color} onValueChange={setColor} />
  */
-export declare function KptColorPicker({ value, defaultValue, onValueChange, presets, id, ariaLabel, disabled, invalid, touched, onTouch, locale, dictionary, className, ...rest }: Readonly<KptColorPickerProps>): import("react").JSX.Element;
+export declare function KptColorPicker({ value, defaultValue, onValueChange, presets, id, ariaLabel, disabled, readOnly, required, invalid, touched, onTouch, locale, dictionary, className, ...rest }: Readonly<KptColorPickerProps>): import("react").JSX.Element;

package/dist/color-picker/color-picker.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { cn } from "../internal/cn.js";
@@ -16,22 +17,35 @@ const DEFAULT_NAMES = {
     '#111827': 'black',
     '#ffffff': 'white',
 };
-const HEX = /^#[0-9a-f]{6}$/i;
+/**
+ * Kod z pola tekstowego jako `#rrggbb` albo `null`. Przyjmuje zapis bez `#` i skrót `#rgb`
+ * (`#fff` -> `#ffffff`). Bliźniak w porcie Angulara (`color-picker.component.ts`) - zmiana w obu.
+ */
+function parseHex(text) {
+    const raw = text.trim().replace(/^#/, '').toLowerCase();
+    if (/^[0-9a-f]{3}$/.test(raw))
+        return `#${[...raw].map((c) => c + c).join('')}`;
+    return /^[0-9a-f]{6}$/.test(raw) ? `#${raw}` : null;
+}
 /**
  * Wybór koloru: próbka, pole hex i presety. Wartością jest hex.
  *
- * Próbka to natywny `<input type="color">` schowany pod kolorowym kwadratem — paletę systemową
+ * Próbka to natywny `<input type="color">` schowany pod kolorowym kwadratem - paletę systemową
  * otwiera przeglądarka, więc działa też na telefonie i nie duplikujemy jej własnym kodem.
  *
  * @example
  * <KptColorPicker value={color} onValueChange={setColor} />
  */
-export function KptColorPicker({ value, defaultValue = '#3b82f6', onValueChange, presets = DEFAULT_PRESETS, id, ariaLabel = null, disabled = false, invalid = false, touched, onTouch, locale, dictionary, className, ...rest }) {
+export function KptColorPicker({ value, defaultValue = '#3b82f6', onValueChange, presets = DEFAULT_PRESETS, id, ariaLabel = null, disabled = false, readOnly = false, required = false, invalid = false, touched, onTouch, locale, dictionary, className, ...rest }) {
     const { t } = useKptMessages({ locale, dictionary });
     const field = useKptFieldA11y(id, 'kpt-color-picker');
-    /** Tekst w polu hex, dopóki nie jest poprawnym kodem — wartość zmienia się dopiero na `#rrggbb`. */
+    /**
+     * Tekst w polu hex dokładnie tak, jak go wpisano, do wyjścia z pola. Wartość zmienia się, gdy tekst
+     * staje się poprawnym kodem, ale pole nie jest przepisywane w trakcie pisania (doklejenie `#`
+     * przenosiło kursor na koniec przy edycji w środku).
+     */
     const [hexDraft, setHexDraft] = useState(null);
-    const hexInvalid = hexDraft !== null && !HEX.test(hexDraft);
+    const hexInvalid = hexDraft !== null && hexDraft.trim() !== '' && parseHex(hexDraft) === null;
     const presetList = presets.map((preset) => {
         const item = typeof preset === 'string' ? { value: preset, label: '' } : preset;
         const named = DEFAULT_NAMES[item.value.toLowerCase()];
@@ -39,24 +53,29 @@ export function KptColorPicker({ value, defaultValue = '#3b82f6', onValueChange,
     });
     const isActive = (color) => color.toLowerCase() === current.toLowerCase();
     const [current, setCurrent] = useControllableState({ value, defaultValue, onChange: onValueChange });
-    return (_jsx("div", { className: cn('kpt-color-picker-host', className), ...rest, children: _jsxs("div", { className: "kpt-color-picker", children: [_jsx("label", { className: "kpt-color-picker__swatch", style: { backgroundColor: current }, children: _jsx("input", { type: "color", value: current, disabled: disabled, "aria-label": t('colorPicker.picker'), onChange: (event) => setCurrent(event.target.value), onBlur: () => onTouch?.() }) }), _jsx("input", { type: "text", className: "kpt-color-picker__hex", id: field.id, "aria-label": field.labelledBy ? undefined : (ariaLabel ?? t('colorPicker.hex')), "aria-describedby": field.describedBy, value: hexDraft ?? current, disabled: disabled, maxLength: 7, "aria-invalid": (invalid && (touched ?? true)) || hexInvalid || undefined, onChange: (event) => {
-                        let text = event.target.value.trim();
-                        if (text && !text.startsWith('#'))
-                            text = `#${text}`;
-                        if (HEX.test(text)) {
+    return (_jsx("div", { className: cn('kpt-color-picker-host', className), ...rest, children: _jsxs("div", { className: "kpt-color-picker", children: [_jsx("label", { className: "kpt-color-picker__swatch", style: { backgroundColor: current }, children: _jsx("input", { type: "color", value: current, disabled: disabled, "aria-label": t('colorPicker.picker'), "aria-readonly": readOnly || undefined, onClick: (event) => {
+                            if (readOnly)
+                                event.preventDefault();
+                        }, onChange: (event) => {
+                            if (readOnly)
+                                return;
                             setHexDraft(null);
-                            setCurrent(text.toLowerCase());
-                        }
-                        else {
-                            setHexDraft(text);
-                        }
+                            setCurrent(event.target.value);
+                        }, onBlur: () => onTouch?.() }) }), _jsx("input", { type: "text", className: "kpt-color-picker__hex", id: field.id, "aria-label": field.labelledBy ? undefined : (ariaLabel ?? t('colorPicker.hex')), "aria-describedby": field.describedBy, value: hexDraft ?? current, disabled: disabled, readOnly: readOnly, "aria-required": required || undefined, maxLength: 7, "aria-invalid": (invalid && (touched ?? true)) || hexInvalid || undefined, onChange: (event) => {
+                        const text = event.target.value;
+                        setHexDraft(text);
+                        const hex = parseHex(text);
+                        if (hex)
+                            setCurrent(hex);
                     }, onBlur: () => {
-                        // Wyjście z pola z niepełnym kodem zostawia go widocznym i oznaczonym `aria-invalid`.
-                        if (hexDraft === '')
+                        // Poprawny albo pusty kod chowa szkic; niepełny zostaje widoczny z `aria-invalid`.
+                        if (hexDraft !== null && (hexDraft.trim() === '' || parseHex(hexDraft)))
                             setHexDraft(null);
                         onTouch?.();
-                    } }), _jsx("div", { className: "kpt-color-picker__presets", children: presetList.map((preset) => (_jsx("button", { type: "button", className: cn('kpt-color-picker__preset', isActive(preset.value) && 'is-active'), style: { backgroundColor: preset.value }, disabled: disabled, "aria-pressed": isActive(preset.value), onClick: () => {
+                    } }), _jsx("div", { className: "kpt-color-picker__presets", children: presetList.map((preset) => (_jsx("button", { type: "button", className: cn('kpt-color-picker__preset', isActive(preset.value) && 'is-active'), style: { backgroundColor: preset.value }, disabled: disabled || readOnly, "aria-pressed": isActive(preset.value), onClick: () => {
                             setHexDraft(null);
                             setCurrent(preset.value);
+                            // Wybór presetem to też dotknięcie pola - inaczej błąd walidacji nigdy by się nie pokazał.
+                            onTouch?.();
                         }, "aria-label": preset.label }, preset.value))) })] }) }));
 }

package/dist/color-picker/llms.txt

@@ -11,20 +11,20 @@ Import: `import { KptColorPicker } from '@konce-pt/react';`
         </label>
         <input type="text" class="kpt-color-picker__hex" maxlength="7" value="#3b82f6">
         <div class="kpt-color-picker__presets">
-          <button class="kpt-color-picker__preset is-active" aria-label="#3b82f6"></button>…
+          <button class="kpt-color-picker__preset is-active" aria-label="#3b82f6"></button>...
         </div>
       </div>
     </div>
 
 ## Props
-- `value` / `defaultValue` / `onValueChange` — the hex colour (default `'#3b82f6'`)
-- `presets`: string[] — the quick-pick palette (8 colours by default; `[]` hides the row)
+- `value` / `defaultValue` / `onValueChange` - the hex colour (default `'#3b82f6'`)
+- `presets`: string[] - the quick-pick palette (8 colours by default; `[]` hides the row)
 - `disabled`, `invalid`, `touched`, `onTouch()`
 - `className`, `ref` and every other `<div>` prop go to the host
 
 ## The swatch is a native colour input
 `<input type="color">` sits transparent under the coloured square, so the system palette is the
-browser's — it works on a phone and there is no picker of ours to maintain. The hex field edits the
+browser's - it works on a phone and there is no picker of ours to maintain. The hex field edits the
 same value as text, and the presets write it directly.
 
 ## Examples
@@ -34,7 +34,7 @@ same value as text, and the presets write it directly.
 ## Screen reader and keyboard
 `presets` accepts codes or `{ value, label }` (the `KptColorPreset` type): the label names the
 swatch, because a hex code says little to a screen reader; the default palette is named from i18n
-(`colorPicker.red`…). The active swatch has `aria-pressed`. The hex field changes the value only on
+(`colorPicker.red`...). The active swatch has `aria-pressed`. The hex field changes the value only on
 a full `#rrggbb` code (a missing `#` is added); an incomplete code stays visible with
 `aria-invalid`.
 
@@ -52,3 +52,6 @@ preset `--kpt-color-focus-ring`.
 ## Accessibility
 Every preset is a `<button>` labelled with its hex value; the hex field carries `aria-invalid` once
 the field is touched.
+
+## Read-only and required
+`readOnly` blocks the picker, the code field and the presets; `required` sets `aria-required` on the code field. Picking a preset or a colour counts as a touch. The code field takes `fff`, `#fff` and `#ffffff` and is not rewritten while typing, so the caret does not jump.

package/dist/confirm/confirm-container.d.ts

@@ -3,15 +3,15 @@ import { type KptI18nOverrides } from '../i18n/i18n-context.tsx';
 export interface KptConfirmContainerProps extends ComponentPropsWithRef<'div'>, KptI18nOverrides {
 }
 /**
- * Kontener potwierdzeń — renderuje żądanie z `kptConfirm()` na `KptDialog`. Umieść raz
+ * Kontener potwierdzeń - renderuje żądanie z `kptConfirm()` na `KptDialog`. Umieść raz
  * w aplikacji, obok `<KptToastContainer />`.
  *
  * Okno to `role="alertdialog"` z treścią pytania w `aria-describedby`, więc czytnik odczytuje
- * je od razu po otwarciu. Fokus startuje na przycisku odmowy — bezpieczniejszej odpowiedzi,
+ * je od razu po otwarciu. Fokus startuje na przycisku odmowy - bezpieczniejszej odpowiedzi,
  * której przypadkowy `Enter` niczego nie usunie.
  *
  * @example
  * <KptConfirmContainer />
- * // gdziekolwiek: if (await kptConfirm({ message: 'Usunąć?' })) { … }
+ * // gdziekolwiek: if (await kptConfirm({ message: 'Usunąć?' })) { ... }
  */
 export declare function KptConfirmContainer({ locale, dictionary, className, ...rest }: Readonly<KptConfirmContainerProps>): import("react").JSX.Element;

package/dist/confirm/confirm-container.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef } from 'react';
 import { cn } from "../internal/cn.js";
@@ -8,30 +9,30 @@ import { KptDialog } from "../dialog/dialog.js";
 import { KptIcon } from "../icon/icon.js";
 import { acceptKptConfirm, rejectKptConfirm, useKptConfirmRequest } from "./confirm-store.js";
 /**
- * Kontener potwierdzeń — renderuje żądanie z `kptConfirm()` na `KptDialog`. Umieść raz
+ * Kontener potwierdzeń - renderuje żądanie z `kptConfirm()` na `KptDialog`. Umieść raz
  * w aplikacji, obok `<KptToastContainer />`.
  *
  * Okno to `role="alertdialog"` z treścią pytania w `aria-describedby`, więc czytnik odczytuje
- * je od razu po otwarciu. Fokus startuje na przycisku odmowy — bezpieczniejszej odpowiedzi,
+ * je od razu po otwarciu. Fokus startuje na przycisku odmowy - bezpieczniejszej odpowiedzi,
  * której przypadkowy `Enter` niczego nie usunie.
  *
  * @example
  * <KptConfirmContainer />
- * // gdziekolwiek: if (await kptConfirm({ message: 'Usunąć?' })) { … }
+ * // gdziekolwiek: if (await kptConfirm({ message: 'Usunąć?' })) { ... }
  */
 export function KptConfirmContainer({ locale, dictionary, className, ...rest }) {
     const { t } = useKptMessages({ locale, dictionary });
     const request = useKptConfirmRequest();
     const messageId = useKptId(undefined, 'kpt-confirm-message');
     const rejectRef = useRef(null);
-    // `showModal()` skupia pierwszy element okna, czyli „×” w nagłówku. Efekt dziecka (`KptDialog`)
+    // `showModal()` skupia pierwszy element okna, czyli "x" w nagłówku. Efekt dziecka (`KptDialog`)
     // biegnie przed efektem rodzica, więc tu okno jest już otwarte i fokus można przenieść.
     useEffect(() => {
         if (request)
             rejectRef.current?.focus();
     }, [request]);
     return (_jsx("div", { className: cn('kpt-confirm-container-host', className), ...rest, children: _jsxs(KptDialog, { open: request !== null, 
-            // Escape i × zamykają okno bez odpowiedzi — traktujemy to jak odmowę, żeby czekający
+            // Escape i x zamykają okno bez odpowiedzi - traktujemy to jak odmowę, żeby czekający
             // `await` zawsze coś dostał.
             onOpenChange: (open) => {
                 if (!open)

package/dist/confirm/confirm-store.d.ts

@@ -15,15 +15,15 @@ export interface KptConfirmRequest extends KptConfirmOptions {
  * Pyta użytkownika o potwierdzenie. Wymaga `<KptConfirmContainer />` w aplikacji.
  *
  * Jedno żądanie naraz: kolejne wywołanie przy otwartym oknie odrzuca poprzednie, żeby jego
- * Promise nigdy nie został nierozstrzygnięty — czekający `await` zostałby inaczej na zawsze.
+ * Promise nigdy nie został nierozstrzygnięty - czekający `await` zostałby inaczej na zawsze.
  *
  * @example
- * if (await kptConfirm({ message: 'Usunąć rekord?', variant: 'danger' })) { … }
+ * if (await kptConfirm({ message: 'Usunąć rekord?', variant: 'danger' })) { ... }
  */
 export declare function kptConfirm(options: KptConfirmOptions): Promise<boolean>;
-/** Zamyka bieżące potwierdzenie odpowiedzią „tak". Używane przez kontener. */
+/** Zamyka bieżące potwierdzenie odpowiedzią "tak". Używane przez kontener. */
 export declare function acceptKptConfirm(): void;
-/** Zamyka bieżące potwierdzenie odpowiedzią „nie" — także przy Escape i kliknięciu w tło. */
+/** Zamyka bieżące potwierdzenie odpowiedzią "nie" - także przy Escape i kliknięciu w tło. */
 export declare function rejectKptConfirm(): void;
 /** Bieżące żądanie potwierdzenia albo `null`. */
 export declare function useKptConfirmRequest(): KptConfirmRequest | null;

package/dist/confirm/confirm-store.js

@@ -1,6 +1,7 @@
 import { useSyncExternalStore } from 'react';
+import { isDevBuild } from "../internal/dev.js";
 /*
- * Magazyn potwierdzeń jako moduł-singleton — odpowiednik serwisu `providedIn: 'root'` z Angulara,
+ * Magazyn potwierdzeń jako moduł-singleton - odpowiednik serwisu `providedIn: 'root'` z Angulara,
  * ten sam wzorzec co `kptToast`. Dzięki temu `await kptConfirm(...)` woła się także spoza drzewa
  * Reacta (warstwa danych, guard nawigacji), bez owijania aplikacji providerem.
  */
@@ -15,12 +16,17 @@ function emit() {
  * Pyta użytkownika o potwierdzenie. Wymaga `<KptConfirmContainer />` w aplikacji.
  *
  * Jedno żądanie naraz: kolejne wywołanie przy otwartym oknie odrzuca poprzednie, żeby jego
- * Promise nigdy nie został nierozstrzygnięty — czekający `await` zostałby inaczej na zawsze.
+ * Promise nigdy nie został nierozstrzygnięty - czekający `await` zostałby inaczej na zawsze.
  *
  * @example
- * if (await kptConfirm({ message: 'Usunąć rekord?', variant: 'danger' })) { … }
+ * if (await kptConfirm({ message: 'Usunąć rekord?', variant: 'danger' })) { ... }
  */
 export function kptConfirm(options) {
+    // Kontener subskrybuje magazyn - bez subskrybentów nikt nie pokaże okna ani nie rozstrzygnie obietnicy.
+    if (isDevBuild() && listeners.size === 0) {
+        console.warn('kptConfirm: brak <KptConfirmContainer /> w aplikacji - okno się nie pokaże, ' +
+            'a obietnica nie rozstrzygnie się, dopóki kontener nie zostanie dodany.');
+    }
     return new Promise((resolve) => {
         current?.resolve(false);
         current = { id: ++seq, ...options, resolve };
@@ -32,11 +38,11 @@ function settle(accepted) {
     current = null;
     emit();
 }
-/** Zamyka bieżące potwierdzenie odpowiedzią „tak". Używane przez kontener. */
+/** Zamyka bieżące potwierdzenie odpowiedzią "tak". Używane przez kontener. */
 export function acceptKptConfirm() {
     settle(true);
 }
-/** Zamyka bieżące potwierdzenie odpowiedzią „nie" — także przy Escape i kliknięciu w tło. */
+/** Zamyka bieżące potwierdzenie odpowiedzią "nie" - także przy Escape i kliknięciu w tło. */
 export function rejectKptConfirm() {
     settle(false);
 }

package/dist/confirm/llms.txt

@@ -6,23 +6,24 @@ Import: `import { kptConfirm, KptConfirmContainer } from '@konce-pt/react';`
 
 ## Usage
 1. Render `<KptConfirmContainer />` once in the app, next to `<KptToastContainer />`.
-2. `await kptConfirm(options)` from anywhere — it resolves to `true` or `false`.
+2. `await kptConfirm(options)` from anywhere - it resolves to `true` or `false`.
 
 ## KptConfirmOptions
 - `message`: string (required); `header?`: string
 - `acceptLabel?`, `rejectLabel?`: string
-- `variant?`: `'filled'` | `'danger'` — the accept button and the icon colour
+- `variant?`: `'filled'` | `'danger'` - the accept button and the icon colour
 - `icon?`: an icon name from the registry
 
 ## A store, not a hook
-The state is a module singleton, so `kptConfirm()` works outside the React tree too — a data layer,
-a navigation guard — without wrapping the app in a provider. `useKptConfirmRequest()` exposes the
+The state is a module singleton, so `kptConfirm()` works outside the React tree too - a data layer,
+a navigation guard - without wrapping the app in a provider. `useKptConfirmRequest()` exposes the
 current request through `useSyncExternalStore` for anyone rendering their own container.
 
 ## The promise always settles
-Escape and the × close the dialog through `onOpenChange`, which resolves `false` — an awaiting
+Escape and the x close the dialog through `onOpenChange`, which resolves `false` - an awaiting
 caller is never left hanging. A second `kptConfirm()` while one is open rejects the previous
-request for the same reason: one request at a time, and nothing is dropped silently.
+request for the same reason: one request at a time, and nothing is dropped silently. Without a
+mounted `<KptConfirmContainer />` nobody can show the dialog, so a dev build warns in the console.
 
 ## Examples
     <KptConfirmContainer />
@@ -43,4 +44,4 @@ Inherited from `KptDialog`; the icon follows the variant (`--kpt-color-danger` /
 Built on `KptDialog`, so the focus trap, Escape and the backdrop are the native `<dialog>`'s.
 The window is `role="alertdialog"` named by its header, with the message tied to it through
 `aria-describedby`, so a screen reader reads the question as soon as it opens. Focus starts on the
-reject button — the safe answer, so a stray `Enter` deletes nothing. Escape and × reject.
+reject button - the safe answer, so a stray `Enter` deletes nothing. Escape and x reject.

package/dist/context-menu/context-menu.d.ts

@@ -14,7 +14,7 @@ export interface KptContextMenuProps<T> extends Omit<ComponentPropsWithRef<'div'
  * gdzie był. `Shift+F10` i klawisz Menu na skupionym elemencie obszaru też otwierają menu
  * (panel staje wtedy przy tym elemencie). Panel jest dociskany do krawędzi okna.
  *
- * W odróżnieniu od `KptMenu` panel nie idzie przez `KptOverlay` — nie ma tu wyzwalacza,
+ * W odróżnieniu od `KptMenu` panel nie idzie przez `KptOverlay` - nie ma tu wyzwalacza,
  * względem którego dałoby się go przypiąć; pozycję wyznaczają współrzędne kliknięcia,
  * a wygląd i warstwę niesie wspólny SCSS (`.kpt-context-menu__panel`).
  *

package/dist/context-menu/context-menu.js

@@ -1,5 +1,6 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from 'react';
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useEffectEvent, useLayoutEffect, useRef, useState } from 'react';
 import { cn } from "../internal/cn.js";
 import { MenuRows } from "../menu/menu-rows.js";
 import { focusMenuEdge, handleMenuKeydown } from "../menu/menu-keys.js";
@@ -13,7 +14,7 @@ const EDGE = 8;
  * gdzie był. `Shift+F10` i klawisz Menu na skupionym elemencie obszaru też otwierają menu
  * (panel staje wtedy przy tym elemencie). Panel jest dociskany do krawędzi okna.
  *
- * W odróżnieniu od `KptMenu` panel nie idzie przez `KptOverlay` — nie ma tu wyzwalacza,
+ * W odróżnieniu od `KptMenu` panel nie idzie przez `KptOverlay` - nie ma tu wyzwalacza,
  * względem którego dałoby się go przypiąć; pozycję wyznaczają współrzędne kliknięcia,
  * a wygląd i warstwę niesie wspólny SCSS (`.kpt-context-menu__panel`).
  *
@@ -26,7 +27,10 @@ export function KptContextMenu({ items = [], children, onSelect, className, ...r
     const [open, setOpen] = useState(false);
     const [point, setPoint] = useState({ x: 0, y: 0 });
     const panelRef = useRef(null);
-    /** Element, który miał fokus przed otwarciem — tam fokus wraca po zamknięciu. */
+    const layerRef = useRef(null);
+    /** Licznik otwarć - każde PPM (także przy otwartym menu) dociska panel i ustawia fokus od nowa. */
+    const [openSeq, setOpenSeq] = useState(0);
+    /** Element, który miał fokus przed otwarciem - tam fokus wraca po zamknięciu. */
     const returnTo = useRef(null);
     const onContextMenu = (event) => {
         event.preventDefault();
@@ -41,21 +45,27 @@ export function KptContextMenu({ items = [], children, onSelect, className, ...r
             setPoint({ x: event.clientX, y: event.clientY });
         }
         setOpen(true);
+        setOpenSeq((n) => n + 1);
     };
-    // Po otwarciu: dociśnięcie do okna i fokus na pierwszej pozycji.
-    useEffect(() => {
+    // Po każdym otwarciu: warstwa w top layer, dociśnięcie do okna i fokus na pierwszej pozycji.
+    // Przed malowaniem (`useLayoutEffect`), żeby panel nie mignął w niedociśniętym miejscu. Docisk
+    // idzie wprost w styl elementu - stan `point` zostaje, więc React go nie nadpisze.
+    useLayoutEffect(() => {
         const panel = panelRef.current;
-        if (!open || !panel)
+        if (openSeq === 0 || !panel)
             return;
+        const layer = layerRef.current;
+        if (layer && typeof layer.showPopover === 'function' && !layer.matches(':popover-open'))
+            layer.showPopover();
         const r = panel.getBoundingClientRect();
         const maxX = window.innerWidth - r.width - EDGE;
         const maxY = window.innerHeight - r.height - EDGE;
-        if (point.x > maxX || point.y > maxY) {
-            setPoint({ x: Math.max(EDGE, Math.min(point.x, maxX)), y: Math.max(EDGE, Math.min(point.y, maxY)) });
-        }
+        if (r.left > maxX)
+            panel.style.left = `${Math.max(EDGE, maxX)}px`;
+        if (r.top > maxY)
+            panel.style.top = `${Math.max(EDGE, maxY)}px`;
         focusMenuEdge(panel, 'first');
-        // Celowo tylko `open`: dociśnięcie zmienia `point`, a ponowne uruchomienie przeniosłoby fokus.
-    }, [open]);
+    }, [openSeq]);
     const close = () => {
         setOpen(false);
         const target = returnTo.current;
@@ -63,6 +73,19 @@ export function KptContextMenu({ items = [], children, onSelect, className, ...r
         if (target?.isConnected)
             target.focus();
     };
+    // Przewinięcie albo zmiana rozmiaru okna odrywa panel od miejsca kliknięcia - zamykamy go.
+    const closeOnMove = useEffectEvent(() => close());
+    useEffect(() => {
+        if (!open)
+            return;
+        const onMove = () => closeOnMove();
+        window.addEventListener('scroll', onMove, true);
+        window.addEventListener('resize', onMove);
+        return () => {
+            window.removeEventListener('scroll', onMove, true);
+            window.removeEventListener('resize', onMove);
+        };
+    }, [open]);
     const onPanelKeyDown = (event) => {
         if (panelRef.current && handleMenuKeydown(panelRef.current, event.nativeEvent) === 'close')
             close();
@@ -73,8 +96,8 @@ export function KptContextMenu({ items = [], children, onSelect, className, ...r
         onSelect?.(item);
         close();
     };
-    return (_jsxs("div", { className: cn('kpt-context-menu-host', className), ...rest, children: [_jsx("div", { className: "kpt-context-menu__area", onContextMenu: onContextMenu, children: children }), open ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "kpt-context-menu__backdrop", onClick: close, onContextMenu: (event) => {
+    return (_jsxs("div", { className: cn('kpt-context-menu-host', className), ...rest, children: [_jsx("div", { className: "kpt-context-menu__area", onContextMenu: onContextMenu, children: children }), open ? (_jsxs("div", { ref: layerRef, className: "kpt-context-menu__layer", popover: "manual", children: [_jsx("div", { className: "kpt-context-menu__backdrop", onClick: close, onContextMenu: (event) => {
                             event.preventDefault();
                             close();
-                        } }), _jsx("div", { ref: panelRef, className: "kpt-context-menu__panel", role: "menu", style: { left: point.x, top: point.y }, onKeyDown: onPanelKeyDown, children: _jsx(MenuRows, { items: items, block: "kpt-context-menu", onPick: pick }) })] })) : null] }));
+                        } }), _jsx("div", { ref: panelRef, className: "kpt-context-menu__panel", role: "menu", tabIndex: -1, style: { left: point.x, top: point.y }, onKeyDown: onPanelKeyDown, children: _jsx(MenuRows, { items: items, block: "kpt-context-menu", onPick: pick }) })] })) : null] }));
 }