@konce-pt/angular 0.8.5 → 0.9.0

package/package.json

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

package/src/lib/button/llms.txt

@@ -1,33 +1,76 @@
 # KptButton (kpt-button)
 
-The Koncept UI button. It renders a native `<button>` (semantics + form submit).
-Standalone, OnPush, signals. Import: `import { KptButton } from '@konce-pt/angular';`
+The Koncept UI button. It renders a native `<button>` (semantics + form submit), or an `<a>` when
+you pass `href`. Standalone, OnPush, signals. Import: `import { KptButton } from '@konce-pt/angular';`
 
 ## Selector
 `kpt-button`
 
+## DOM
+    <kpt-button class="kpt-button-host">
+      <button class="kpt-button" type="button" data-variant="filled" data-size="md">
+        <kpt-icon class="kpt-button__icon kpt-icon-host">…</kpt-icon>
+        <span class="kpt-button__content">…</span>
+        <kpt-icon class="kpt-button__icon kpt-button__icon--end kpt-icon-host">…</kpt-icon>
+      </button>
+    </kpt-button>
+
 ## Inputs (input signals)
-- `variant`: 'filled' | 'tonal' | 'outline' | 'text' | 'danger' (default 'filled')
-- `size`: 'sm' | 'md' | 'lg' (default 'md')
+- `variant`: 'filled' | 'elevated' | 'tonal' | 'outline' | 'text' | 'link' | 'danger' | 'success' | 'warning' | 'info' (default 'filled')
+- `size`: 'xs' | 'sm' | 'md' | 'lg' | 'xl' (default 'md')
 - `type`: 'button' | 'submit' | 'reset' (default 'button')
 - `disabled`: boolean (booleanAttribute)
 - `loading`: boolean — a spinner + blocked interaction, sets aria-busy
 - `fullWidth`: boolean — the full width of the container
+- `icon` / `iconEnd`: string — a name from the icon registry
+- `iconClass` / `iconEndClass`: string — an extra class on that icon
+- `href`: string — renders an `<a>` instead of a `<button>`
+- `target` / `rel`: string — only meaningful together with `href`
 
 ## Events
 None of its own — the native `click` bubbles out of the inner `<button>`; bind `(click)` on `<kpt-button>`.
 
+## Icons
+Two ways in, one result. `icon` and `iconEnd` take a name from the icon registry and the component
+renders it; anything put in the slot is laid out the same way. Both get the gap from
+`--kpt-button-gap` and a size that follows `size` (0.875rem at `xs` up to 1.5rem at `xl`) — the
+content box is a flex container, so an icon sits on the centre line rather than on the text baseline.
+
+`loading` replaces the leading icon with the spinner instead of standing next to it, and the
+spinner takes that icon's size, so the label does not jump when loading starts. The trailing icon
+stays put — it usually marks direction rather than the action.
+
+`iconClass` / `iconEndClass` add a class next to the permanent `.kpt-button__icon` hook, for the
+cases where one instance needs a different colour or a rotation.
+
+## Link and the `link` variant
+Two different things. `variant="link"` only changes the looks — underline, transparent background,
+no side padding, so it sits inside a sentence. `href` changes the element: the component renders
+`<a class="kpt-button">` instead of `<button>`, and the two combine freely (a filled button can be
+a link, a `link` variant can be a plain button).
+
+A disabled link loses its `href` rather than just gaining an attribute — otherwise it would stay
+clickable and reachable with the keyboard; it also gets `aria-disabled="true"` and `tabindex="-1"`.
+`target="_blank"` without an explicit `rel` gets `rel="noopener noreferrer"`.
+
 ## Examples
     <kpt-button (click)="save()">Save</kpt-button>
-    <kpt-button variant="outline" size="sm">Cancel</kpt-button>
+    <kpt-button icon="device-floppy" (click)="save()">Save</kpt-button>
+    <kpt-button iconEnd="chevron-right" variant="outline">Next</kpt-button>
+    <kpt-button icon="printer" variant="text" size="sm">Print</kpt-button>
+    <kpt-button variant="success">Approve</kpt-button>
+    <kpt-button variant="link" href="/docs">Documentation</kpt-button>
     <kpt-button variant="danger" [loading]="deleting()">Delete</kpt-button>
+    <kpt-button variant="outline"><kpt-icon name="printer" />Print</kpt-button>
     <form (submit)="onSubmit()"><kpt-button type="submit">Send</kpt-button></form>
 
 ## Tokens (styling)
-`--kpt-button-radius`, `--kpt-button-font-weight`, `--kpt-button-gap`,
-`--kpt-button-filled-{bg,fg,bg-hover,bg-active}`, `--kpt-button-tonal-{bg,fg,bg-hover}`,
-`--kpt-button-outline-{border,fg,bg-hover}`, `--kpt-button-text-{fg,bg-hover}`.
-The 'danger' variant uses `--kpt-color-danger` / `--kpt-color-on-danger`.
+`--kpt-button-radius`, `--kpt-button-font-weight`, `--kpt-button-gap`, and one group per variant:
+`--kpt-button-filled-{bg,fg,bg-hover,bg-active}`, `--kpt-button-elevated-{bg,fg,bg-hover}`,
+`--kpt-button-tonal-{bg,fg,bg-hover}`, `--kpt-button-outline-{border,fg,bg-hover}`,
+`--kpt-button-text-{fg,bg-hover}`, `--kpt-button-link-{fg,fg-hover}`,
+`--kpt-button-danger-{bg,fg,bg-hover}` and the same triplet for success, warning and info.
+The elevated variant also reaches for `--kpt-shadow-sm` and `--kpt-shadow-md`.
 
 ## The state layer (hover / active)
 Hover and active feedback is carried by an `::after` pseudo-element (`opacity` 0 → 1),
@@ -43,4 +86,5 @@ invisible. That is why the button carries `position: relative` and `isolation: i
 ## Accessibility
 - A native `<button>` — full keyboard and screen reader support.
 - `loading` sets `aria-busy="true"` and disables the button (`disabled`).
+- An `<a>` matches no `:disabled`, so the disabled look keys off `[aria-disabled='true']` as well.
 - The focus ring comes from `@konce-pt/styles` (`--kpt-color-focus-ring`).

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

@@ -5,10 +5,26 @@ Import: `import { KptButtonGroup, KptOption } from '@konce-pt/angular';`
 
 ## Inputs
 - `options`: KptOption<T>[]; `value`: model<T>; `size`: 'sm'|'md'|'lg'; `disabled`/`invalid`/`touched`; `touch`
+- `iconOnly`: boolean — hides the labels and leaves the icons alone
+
+## Icons
+An option carries its icon by name: `KptOption.icon` is a key from the icon registry, and the group
+renders it before the label. The item is a flex box, so the icon gets the `--kpt-button-gap` spacing
+and a size that follows `size` (1rem at `sm` up to 1.25rem at `lg`) — the same scale as `kpt-button`,
+so a group standing next to a button matches it.
+
+`iconOnly` drops the label from the page but keeps it as the accessible name: the item gets both
+`aria-label` and `title`, so a screen reader still says "Grid" and a mouse user gets a tooltip.
+Each item also becomes a square, because a lone icon inside a 1rem side padding looks adrift.
+
+The icon takes its colour from `currentColor`, so the active item — filled with
+`--kpt-color-primary` — flips the icon to `--kpt-color-on-primary` with no extra rule.
 
 ## Examples
     <kpt-button-group [(value)]="view" [options]="[{label:'List',value:'list'},{label:'Grid',value:'grid'}]" />
+    <kpt-button-group [(value)]="view" [options]="[{icon:'list',label:'List',value:'list'}]" />
+    <kpt-button-group [(value)]="align" [options]="alignOptions" iconOnly />
     <kpt-button-group [formField]="f.period" [options]="periods" />
 
 ## Tokens
-`--kpt-color-primary`, `--kpt-color-border-strong`, `--kpt-color-muted`.
+`--kpt-color-primary`, `--kpt-color-border-strong`, `--kpt-color-muted`, `--kpt-button-gap`.

package/src/lib/dialog/llms.txt

@@ -9,6 +9,9 @@ Import: `import { KptDialog } from '@konce-pt/angular';`
 ## Inputs
 - `open`: model<boolean> — two-way `[(open)]`
 - `header`: string; `dismissible`: boolean (Esc/× closes it; default true)
+- `size`: 'sm' | 'md' | 'lg' (default 'md') — 24rem / 32rem / 48rem, always capped at the viewport
+  (`min(var(--_width), calc(100vw - 2rem))`). Reach for `lg` when the content cannot sensibly be
+  narrowed: code, a table, two columns side by side.
 
 ## Slots
 - the default content → the body; an element with the `kptDialogFooter` attribute → the footer
@@ -60,6 +63,13 @@ moved inside the `<dialog>` (see the section above), so clipping the dialog woul
 panels of `kpt-select` or `kpt-datepicker`. It is not needed for scrolling either:
 once it is a flex column, nothing sticks out of the dialog.
 
+## The footer wraps
+
+`[kptDialogFooter]` is a flex row with `flex-wrap: wrap`, and the wrapping is not cosmetic.
+A dialog that does not fit its buttons does not let them stick out — they get **clipped**, because
+the browser gives `<dialog>` its own scrolling box. Four buttons in an `sm` dialog are enough for
+the first one to become unreadable with no way to reach it. Wrapping turns that into a second row.
+
 A pinned action bar inside the content (say "Cancel / Save" in `kpt-map-create-dialog`)
 is done with `position: sticky` — the scrolling container is `.kpt-dialog__body`.
 The negative side margins have to match its padding (`--kpt-space-6`),

package/src/lib/progress/llms.txt

@@ -1,16 +1,92 @@
 # KptProgress (kpt-progress)
 
-A progress indicator — linear or circular, determinate (0–100) or indeterminate (`value`=null).
+A progress indicator — linear or circular, determinate (`min`–`max`) or indeterminate (`value` = null).
 Import: `import { KptProgress } from '@konce-pt/angular';`
 
+## DOM
+    <!-- linear, with a label, a buffer and a value -->
+    <kpt-progress class="kpt-progress-host" data-type="linear" data-size="md" data-variant="primary" data-label-position="top">
+      <span class="kpt-progress__label">Loading…</span>
+      <div class="kpt-progress__linear" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="80">
+        <div class="kpt-progress__buffer" style="width: 92%"></div>
+        <div class="kpt-progress__bar" style="width: 80%"></div>
+      </div>
+      <span class="kpt-progress__value" aria-hidden="true">80%</span>
+    </kpt-progress>
+
+    <!-- circular -->
+    <kpt-progress class="kpt-progress-host" data-type="circular" data-size="md" data-variant="success">
+      <svg class="kpt-progress__circular" viewBox="0 0 40 40" role="progressbar" aria-valuenow="75">
+        <circle class="kpt-progress__track" cx="20" cy="20" r="16"></circle>
+        <circle class="kpt-progress__bar" cx="20" cy="20" r="16" style="stroke-dasharray: 100.531; stroke-dashoffset: 25.1327"></circle>
+      </svg>
+      <span class="kpt-progress__value" aria-hidden="true">75%</span>
+    </kpt-progress>
+
+The label, the track and the value are siblings straight under the host — there is no wrapper element.
+`data-variant`, `data-type`, `data-size` and `data-label-position` all sit on the host, which is also
+where the private `--_color` and `--_thickness` are resolved.
+
 ## Inputs
-- `value`: number|null (null = indeterminate); `type`: 'linear'|'circular'
-- `variant`: 'primary'|'success'|'danger'|'warning'|'info'; `diameter`: number (circular)
+- `value`: number|null (default null) — a value on the `min`–`max` scale, or null for indeterminate
+- `min`: number (default 0); `max`: number (default 100)
+- `variant`: 'primary'|'success'|'danger'|'warning'|'info' (default 'primary')
+- `type`: 'linear'|'circular' (default 'linear')
+- `size`: 'sm'|'md'|'lg' (default 'md') — track thickness, and arc width on the circular variant
+- `diameter`: number (default 40) — the circular variant's size in pixels
+- `bufferValue`: number|null (default null) — a second, dimmed bar behind the main one; linear only
+- `showValue`: boolean (default false) — turns the value area on; projected content needs it too
+- `valueFormat`: 'percent'|'fraction'|'none' (default 'percent')
+- `label`: string — descriptive text next to the bar; it also becomes the `aria-label`
+- `labelPosition`: 'top'|'bottom'|'end' (default 'top') — ignored by the circular variant
+
+## Value label
+`showValue` opens the value area; `valueFormat` decides what goes in it — `percent` renders `80%`,
+`fraction` renders `152 / 160` from `value` and `max`, `none` leaves it empty. Both strings come from
+the `KptMessages` dictionary (`progress.percent`, `progress.fraction`), so a new locale can reshape them.
+
+Projected content replaces the formatted value instead of adding to it, which is how a circle shows
+a headline number over a caption. Projection still requires `showValue`, because that input is what
+renders the element the content lands in.
+
+The circular variant always centres the value over the arc; `label` is not drawn there, it only feeds
+the accessible name.
+
+## How the arc is drawn
+The circle lives in a fixed `viewBox="0 0 40 40"` with `r=16`, so the circumference is computed from
+that radius, not from `diameter` — the SVG scales, the maths does not change. The arc is the dash
+offset: full circumference means empty, zero means complete. `size` only changes `stroke-width`, and
+the widest step still fits inside the box, so no arc is ever clipped.
+
+Values outside the range are clamped rather than rejected, `max` ≤ `min` collapses to zero, and the
+buffer is never allowed behind the main bar — a computed percentage that briefly overshoots cannot
+break the drawing.
 
 ## Examples
     <kpt-progress [value]="60" />
-    <kpt-progress type="circular" [value]="75" variant="success" />
+    <kpt-progress [value]="80" label="Loading…" showValue />
+    <kpt-progress [value]="152" [max]="160" size="lg" showValue valueFormat="fraction" labelPosition="bottom" />
+    <kpt-progress [value]="65" showValue labelPosition="end" />
+    <kpt-progress [value]="38" [bufferValue]="62" />
+    <kpt-progress type="circular" [value]="80" showValue />
+    <kpt-progress type="circular" [value]="72" [diameter]="140" size="lg" showValue>
+      <strong>29</strong>
+      <small>Excellent</small>
+    </kpt-progress>
     <kpt-progress [value]="null" />
 
 ## Tokens
-`--kpt-color-{primary,success,danger,warning,info}`, the track `--kpt-color-surface-variant`.
+The semantic colour of each variant (`--kpt-color-primary` / `-success` / `-danger` / `-warning` /
+`-info`), plus the component layer: `--kpt-progress-track-bg`, `--kpt-progress-thickness-sm`,
+`--kpt-progress-thickness-md`, `--kpt-progress-thickness-lg`, `--kpt-progress-buffer-opacity`,
+`--kpt-progress-label-fg`, `--kpt-progress-value-fg`, `--kpt-progress-gap`.
+
+## Accessibility
+`role="progressbar"` with `aria-valuemin`, `aria-valuemax` and `aria-valuenow`; an indeterminate bar
+leaves the value out, which is how a screen reader learns the progress is unknown rather than zero.
+`valueFormat="fraction"` also sets `aria-valuetext`, so the reader says "152 / 160" instead of
+announcing the raw number as a percentage. The visible value is `aria-hidden`, so it is never read
+twice. The accessible name comes from `label`, or from the dictionary when there is none.
+
+Under `prefers-reduced-motion: reduce` the indeterminate animation slows down instead of stopping —
+a frozen progress indicator reads as a hung application.

package/types/konce-pt-angular.d.ts

@@ -17,32 +17,50 @@ import { KptColumnFilter, KptColumnSummary } from '@konce-pt/table';
 export { KptColumnFilter, KptColumnFilterType, KptColumnSummary, KptSummaryFn } from '@konce-pt/table';
 import * as _konce_pt_angular from '@konce-pt/angular';
 
-type KptButtonVariant = 'filled' | 'tonal' | 'outline' | 'text' | 'danger';
-type KptButtonSize = 'sm' | 'md' | 'lg';
+type KptButtonVariant = 'filled' | 'elevated' | 'tonal' | 'outline' | 'text' | 'link' | 'danger' | 'success' | 'warning' | 'info';
+type KptButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 /**
- * Przycisk Koncept UI. Renderuje natywny `<button>` (zachowana semantyka i submit
- * formularza). Wygląd sterowany tokenami `--kpt-button-*`.
+ * Przycisk Koncept UI. Renderuje natywny `<button>` (semantyka + submit formularza)
+ * albo `<a>`, gdy podasz `href`.
+ *
+ * Ikonę można podać nazwą (`icon`/`iconEnd`) albo wstawić do slotu — oba sposoby dostają
+ * ten sam odstęp i tę samą skalę. Przy `loading` spinner zajmuje miejsce ikony wiodącej.
  *
  * @example
- * <kpt-button variant="filled" (click)="save()">Zapisz</kpt-button>
- * <kpt-button variant="outline" size="sm" [disabled]="busy()">Anuluj</kpt-button>
+ * <kpt-button (click)="save()">Zapisz</kpt-button>
+ * <kpt-button icon="device-floppy" (click)="save()">Zapisz</kpt-button>
+ * <kpt-button iconEnd="chevron-right" variant="outline">Dalej</kpt-button>
+ * <kpt-button variant="link" href="/docs">Dokumentacja</kpt-button>
+ * <kpt-button variant="danger" [loading]="deleting()">Usuń</kpt-button>
  */
 declare class KptButton {
-    /** Wariant wizualny. */
     readonly variant: _angular_core.InputSignal<KptButtonVariant>;
-    /** Rozmiar. */
     readonly size: _angular_core.InputSignal<KptButtonSize>;
-    /** Typ natywnego przycisku (istotne w formularzach). */
     readonly type: _angular_core.InputSignal<"button" | "submit" | "reset">;
-    /** Wyłączony. */
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    /** Stan ładowania — pokazuje spinner i blokuje interakcję. */
     readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    /** Rozciągnięcie na całą szerokość kontenera. */
     readonly fullWidth: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Nazwa ikony wiodącej z rejestru (`KptIconRegistry`). */
+    readonly icon: _angular_core.InputSignal<string | undefined>;
+    /** Nazwa ikony zamykającej — zwykle znacznik kierunku, nie akcja. */
+    readonly iconEnd: _angular_core.InputSignal<string | undefined>;
+    /** Klasa dokładana do ikony wiodącej; obok stałego haka `.kpt-button__icon`. */
+    readonly iconClass: _angular_core.InputSignal<string | undefined>;
+    readonly iconEndClass: _angular_core.InputSignal<string | undefined>;
+    /** Podany adres zamienia `<button>` na `<a>`. */
+    readonly href: _angular_core.InputSignal<string | undefined>;
+    readonly target: _angular_core.InputSignal<string | undefined>;
+    readonly rel: _angular_core.InputSignal<string | undefined>;
     protected readonly isDisabled: _angular_core.Signal<boolean>;
+    /** Spinner zajmuje miejsce ikony wiodącej, więc przy ładowaniu jej nie renderujemy. */
+    protected readonly showLeadingIcon: _angular_core.Signal<boolean>;
+    protected readonly leadingIconClass: _angular_core.Signal<string>;
+    protected readonly trailingIconClass: _angular_core.Signal<string>;
+    /** `target="_blank"` bez `rel` to wektor na `window.opener` — dokładamy domyślne. */
+    protected readonly effectiveRel: _angular_core.Signal<string | null>;
+    private iconClasses;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<KptButton, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KptButton, "kpt-button", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "fullWidth": { "alias": "fullWidth"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KptButton, "kpt-button", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "fullWidth": { "alias": "fullWidth"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconEnd": { "alias": "iconEnd"; "required": false; "isSignal": true; }; "iconClass": { "alias": "iconClass"; "required": false; "isSignal": true; }; "iconEndClass": { "alias": "iconEndClass"; "required": false; "isSignal": true; }; "href": { "alias": "href"; "required": false; "isSignal": true; }; "target": { "alias": "target"; "required": false; "isSignal": true; }; "rel": { "alias": "rel"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
 /**
@@ -84,13 +102,19 @@ interface KptOption<T = unknown> {
     label: string;
     value: T;
     disabled?: boolean;
+    /** Nazwa ikony z rejestru. Renderuje ją dziś wyłącznie `kpt-button-group`. */
+    icon?: string;
 }
 
 /**
  * Segmentowana grupa przycisków (toggle) — pojedynczy wybór z opcji. Signal Forms.
  *
+ * Pozycja może mieć ikonę (`KptOption.icon`); `iconOnly` chowa etykietę, ale zostawia ją
+ * w nazwie dostępnej, więc czytnik ekranu dalej wie, co wybiera.
+ *
  * @example
  * <kpt-button-group [(value)]="view" [options]="[{label:'Lista',value:'list'},{label:'Siatka',value:'grid'}]" />
+ * <kpt-button-group [(value)]="view" [options]="[{icon:'list',label:'Lista',value:'list'}]" iconOnly />
  * <kpt-button-group [formField]="f.period" [options]="periods" />
  */
 declare class KptButtonGroup<T = unknown> implements FormValueControl<T> {
@@ -100,10 +124,12 @@ declare class KptButtonGroup<T = unknown> implements FormValueControl<T> {
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly touched: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Chowa etykiety — zostaje sama ikona, a `label` zasila `aria-label` i `title`. */
+    readonly iconOnly: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly touch: _angular_core.OutputEmitterRef<void>;
     protected select(opt: KptOption<T>): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<KptButtonGroup<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KptButtonGroup<any>, "kpt-button-group", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touch": "touch"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KptButtonGroup<any>, "kpt-button-group", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "iconOnly": { "alias": "iconOnly"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touch": "touch"; }, never, never, true, never>;
 }
 
 /**
@@ -469,24 +495,66 @@ declare class KptSpinner {
 }
 
 type KptProgressVariant = 'primary' | 'success' | 'danger' | 'warning' | 'info';
+type KptProgressType = 'linear' | 'circular';
+type KptProgressSize = 'sm' | 'md' | 'lg';
+/** Postać etykiety wartości: procent, „ile z ilu" albo brak. */
+type KptProgressValueFormat = 'percent' | 'fraction' | 'none';
+/** Gdzie siada wiersz etykiety względem paska (tylko `type="linear"`). */
+type KptProgressLabelPosition = 'top' | 'bottom' | 'end';
 /**
- * Wskaźnik postępu — liniowy lub kołowy, określony (0–100) lub nieokreślony (`value` = null).
+ * Wskaźnik postępu — liniowy lub kołowy, określony (`min`–`max`) lub nieokreślony (`value` = null).
+ *
+ * Etykietę wartości włącza `showValue`; rzutowana treść zastępuje sformatowaną wartość,
+ * więc w środku koła można pokazać cokolwiek.
  *
  * @example
  * <kpt-progress [value]="60" />
- * <kpt-progress type="circular" [value]="75" variant="success" />
+ * <kpt-progress [value]="80" label="Ładowanie…" showValue />
+ * <kpt-progress [value]="152" [max]="160" showValue valueFormat="fraction" labelPosition="bottom" />
+ * <kpt-progress [value]="38" [bufferValue]="62" />
+ * <kpt-progress type="circular" [value]="75" variant="success" showValue />
  * <kpt-progress [value]="null" />  <!-- indeterminate -->
  */
 declare class KptProgress {
-    /** 0–100 lub null = nieokreślony. */
+    /** Wartość w skali `min`–`max` albo null = postęp nieokreślony. */
     readonly value: _angular_core.InputSignal<number | null>;
+    readonly min: _angular_core.InputSignal<number>;
+    readonly max: _angular_core.InputSignal<number>;
     readonly variant: _angular_core.InputSignal<KptProgressVariant>;
-    readonly type: _angular_core.InputSignal<"linear" | "circular">;
+    readonly type: _angular_core.InputSignal<KptProgressType>;
+    /** Grubość toru: `sm` 0.25rem, `md` 0.5rem, `lg` 0.75rem. */
+    readonly size: _angular_core.InputSignal<KptProgressSize>;
+    /** Średnica wariantu kołowego w pikselach. */
     readonly diameter: _angular_core.InputSignal<number>;
+    /** Postęp buforowania — drugi, przygaszony pasek pod głównym (tylko liniowy). */
+    readonly bufferValue: _angular_core.InputSignal<number | null>;
+    /** Włącza obszar etykiety wartości — razem z nim renderuje się rzutowana treść. */
+    readonly showValue: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly valueFormat: _angular_core.InputSignal<KptProgressValueFormat>;
+    /** Tekst opisowy obok paska; służy też za `aria-label`. */
+    readonly label: _angular_core.InputSignal<string | undefined>;
+    readonly labelPosition: _angular_core.InputSignal<KptProgressLabelPosition>;
+    private readonly i18n;
     protected readonly circumference: number;
+    protected readonly indeterminate: _angular_core.Signal<boolean>;
+    /** Ułamek 0–1. Odporny na `max` ≤ `min` i na wartości spoza zakresu. */
+    protected readonly ratio: _angular_core.Signal<number>;
+    protected readonly percent: _angular_core.Signal<number>;
+    /** Bufor nigdy nie cofa się za pasek główny — inaczej wyglądałby jak błąd renderowania. */
+    protected readonly bufferRatio: _angular_core.Signal<number>;
     protected readonly offset: _angular_core.Signal<number>;
+    /** Tekst widoczny w etykiecie; pusty dla postępu nieokreślonego i `valueFormat="none"`. */
+    protected readonly valueText: _angular_core.Signal<string>;
+    /**
+     * Czytnik ekranu domyślnie odczytuje `aria-valuenow` jako procent, więc przy formacie „ile z ilu"
+     * podajemy mu ten sam napis, który widzi użytkownik.
+     */
+    protected readonly ariaValueText: _angular_core.Signal<string | null>;
+    protected readonly ariaLabel: _angular_core.Signal<string>;
+    private toRatio;
+    private fractionText;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<KptProgress, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KptProgress, "kpt-progress", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "diameter": { "alias": "diameter"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KptProgress, "kpt-progress", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "diameter": { "alias": "diameter"; "required": false; "isSignal": true; }; "bufferValue": { "alias": "bufferValue"; "required": false; "isSignal": true; }; "showValue": { "alias": "showValue"; "required": false; "isSignal": true; }; "valueFormat": { "alias": "valueFormat"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "labelPosition": { "alias": "labelPosition"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
 type KptSkeletonVariant = 'text' | 'circle' | 'rect';
@@ -3060,6 +3128,8 @@ declare class KptAlert {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<KptAlert, "kpt-alert", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "dismissible": { "alias": "dismissible"; "required": false; "isSignal": true; }; }, { "closed": "closed"; }, never, ["*"], true, never>;
 }
 
+/** Szerokość okna. `md` to wartość domyślna i zarazem jedyna, jaką okno miało wcześniej. */
+type KptDialogSize = 'sm' | 'md' | 'lg';
 /**
  * Okno modalne na natywnym `<dialog>` (focus trap, ESC, backdrop w standardzie).
  * Sterowane sygnałem `open` (dwukierunkowe). Stopkę wstaw z atrybutem `kptDialogFooter`.
@@ -3077,6 +3147,12 @@ declare class KptDialog {
     /** Otwarcie okna (dwukierunkowe). */
     readonly open: _angular_core.ModelSignal<boolean>;
     readonly header: _angular_core.InputSignal<string>;
+    /**
+     * 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.
+     */
+    readonly size: _angular_core.InputSignal<KptDialogSize>;
     /** Pozwala zamknąć klawiszem Esc / przyciskiem ×. */
     readonly dismissible: _angular_core.InputSignalWithTransform<boolean, unknown>;
     protected readonly i18n: KptI18n;
@@ -3097,7 +3173,7 @@ declare class KptDialog {
     private releaseOverlayContainer;
     protected onCancel(event: Event): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<KptDialog, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KptDialog, "kpt-dialog", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "header": { "alias": "header"; "required": false; "isSignal": true; }; "dismissible": { "alias": "dismissible"; "required": false; "isSignal": true; }; }, { "open": "openChange"; }, never, ["*", "[kptDialogFooter]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KptDialog, "kpt-dialog", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "header": { "alias": "header"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "dismissible": { "alias": "dismissible"; "required": false; "isSignal": true; }; }, { "open": "openChange"; }, never, ["*", "[kptDialogFooter]"], true, never>;
 }
 
 interface KptToast {
@@ -3562,5 +3638,5 @@ declare class KptSpeedDial<T = unknown> {
 }
 
 export { KPT_BREAKPOINTS, KPT_FORM_FIELD_CONTROL, KPT_I18N_CONFIG, KptAccordion, KptAccordionPanel, KptAlert, KptAppShell, KptAuth, KptAuthProviderDef, KptAutocomplete, KptAvatar, KptAvatarGroup, KptBackdrop, KptBadge, KptBottomSheet, KptBreadcrumb, KptBreakpointObserver, KptButton, KptButtonGroup, KptCard, KptCarousel, KptCellDef, KptCellEditDef, KptCheckbox, KptChip, KptChipsInput, KptClock, KptColorPicker, KptConfirmContainer, KptConfirmService, KptContextMenu, KptDataTable, KptDataView, KptDateRange, KptDatepicker, KptDialog, KptDivider, KptDrawer, KptEmpty, KptFab, KptFieldset, KptFileUpload, KptFormField, KptGalleria, KptI18n, KptIcon, KptIconButton, KptIconRegistry, KptImage, KptInput, KptInputMask, KptInputNumber, KptInputOtp, KptKnob, KptListbox, KptMegamenu, KptMention, KptMentions, KptMenu, KptMenubar, KptMeterGroup, KptOrderList, KptPaginator, KptPanel, KptPassword, KptPeek, KptPeekTrigger, KptPickList, KptPopover, KptProgress, KptRadioGroup, KptRating, KptRichText, KptRowDetailDef, KptScrollTop, KptSelect, KptShellNavToggle, KptSidenav, KptSkeleton, KptSlider, KptSpeedDial, KptSpinner, KptSplitButton, KptSplitter, KptStep, KptStepper, KptSwitch, KptSwitchGroup, KptTab, KptTabs, KptTextarea, KptTimeline, KptToastContainer, KptToastService, KptToolbar, KptTooltip, KptTree, provideKptI18n, provideKptIcons };
-export type { KptAlertVariant, KptAuthLayout, KptAuthMode, KptAuthProvider, KptAuthProviderLayout, KptAuthResetValue, KptAuthSignInValue, KptAuthSignUpValue, KptAvatarItem, KptAvatarShape, KptAvatarSize, KptBadgeSize, KptBadgeVariant, KptBreadcrumbItem, KptBreakpoint, KptButtonSize, KptButtonVariant, KptCardVariant, KptCellEditEvent, KptChipTextTransform, KptChipVariant, KptColumn, KptColumnEdit, KptColumnEditType, KptConfirmOptions, KptConfirmRequest, KptDatepickerMode, KptDatepickerView, KptDividerOrientation, KptDrawerPosition, KptFormFieldControl, KptGalleriaItem, KptInputType, KptMenuItem, KptMeterItem, KptOption, KptPeekPlacement, KptProgressVariant, KptRichTool, KptRichToolbar, KptSidenavMode, KptSkeletonVariant, KptSliderValue, KptSpeedDialDirection, KptSplitterOrientation, KptTableLazyState, KptTimelineItem, KptToast, KptToastOptions, KptTooltipPosition, KptTreeNode };
+export type { KptAlertVariant, KptAuthLayout, KptAuthMode, KptAuthProvider, KptAuthProviderLayout, KptAuthResetValue, KptAuthSignInValue, KptAuthSignUpValue, KptAvatarItem, KptAvatarShape, KptAvatarSize, KptBadgeSize, KptBadgeVariant, KptBreadcrumbItem, KptBreakpoint, KptButtonSize, KptButtonVariant, KptCardVariant, KptCellEditEvent, KptChipTextTransform, KptChipVariant, KptColumn, KptColumnEdit, KptColumnEditType, KptConfirmOptions, KptConfirmRequest, KptDatepickerMode, KptDatepickerView, KptDialogSize, KptDividerOrientation, KptDrawerPosition, KptFormFieldControl, KptGalleriaItem, KptInputType, KptMenuItem, KptMeterItem, KptOption, KptPeekPlacement, KptProgressLabelPosition, KptProgressSize, KptProgressType, KptProgressValueFormat, KptProgressVariant, KptRichTool, KptRichToolbar, KptSidenavMode, KptSkeletonVariant, KptSliderValue, KptSpeedDialDirection, KptSplitterOrientation, KptTableLazyState, KptTimelineItem, KptToast, KptToastOptions, KptTooltipPosition, KptTreeNode };
 //# sourceMappingURL=konce-pt-angular.d.ts.map