@konce-pt/styles 0.8.3 → 0.9.0

package/components.css

@@ -92,7 +92,7 @@
     border: var(--kpt-border-width-thin, 1px) solid color-mix(in oklch, var(--_accent) 35%, transparent);
     border-inline-start: 3px solid var(--_accent);
     border-radius: var(--kpt-radius-md, 0.5rem);
-    background: color-mix(in oklch, var(--_accent) 10%, var(--kpt-color-surface));
+    background: color-mix(in oklab, var(--_accent) 10%, var(--kpt-color-surface));
     color: var(--kpt-color-on-surface);
     font-size: var(--kpt-font-size-sm, 0.875rem);
   }
@@ -1115,6 +1115,38 @@
   }
 }
 
+/* src/lib/backdrop/backdrop.component.scss */
+@charset "UTF-8";
+@layer kpt.components {
+  .kpt-backdrop-host {
+    /* Kolor kwadratów czyta z tej własności TypeScript — canvas nie rozwija `var()` sam. */
+    --_dot: var(--kpt-backdrop-color, var(--kpt-color-primary));
+    position: relative;
+    display: block;
+    /* Siatka celowo wychodzi poza obszar, żeby nie kończyć się przed krawędzią — tu się ją ucina. */
+    overflow: hidden;
+    /* Własny kontekst nakładania: `z-index` treści nie ma się o co bić z resztą strony. */
+    isolation: isolate;
+    background: var(--kpt-backdrop-surface, var(--kpt-color-surface));
+    color: var(--kpt-color-on-surface);
+  }
+  .kpt-backdrop__canvas {
+    position: absolute;
+    inset: 0;
+    z-index: 0;
+    display: block;
+    inline-size: 100%;
+    block-size: 100%;
+    /* Tło nie łapie kliknięć ani zaznaczenia — pod spodem nie ma czego dotykać. */
+    pointer-events: none;
+  }
+  .kpt-backdrop__content {
+    position: relative;
+    z-index: 1;
+    block-size: 100%;
+  }
+}
+
 /* src/lib/badge/badge.component.scss */
 @charset "UTF-8";
 @layer kpt.components {
@@ -1322,6 +1354,7 @@
     cursor: pointer;
     background-color: var(--_bg);
     color: var(--_fg);
+    text-decoration: none;
     transition: opacity var(--kpt-motion-duration-fast, 120ms) var(--kpt-motion-easing-standard);
   }
   .kpt-button::after {
@@ -1335,33 +1368,65 @@
     pointer-events: none;
     transition: opacity var(--kpt-motion-duration-fast, 120ms) var(--kpt-motion-easing-standard), background-color var(--kpt-motion-duration-fast, 120ms) var(--kpt-motion-easing-standard);
   }
-  .kpt-button:hover:not(:disabled) {
+  .kpt-button:hover:not(:disabled):not([aria-disabled=true]) {
     --_state: var(--_bg-hover);
   }
-  .kpt-button:hover:not(:disabled)::after {
+  .kpt-button:hover:not(:disabled):not([aria-disabled=true])::after {
     opacity: 1;
   }
-  .kpt-button:active:not(:disabled) {
+  .kpt-button:active:not(:disabled):not([aria-disabled=true]) {
     --_state: var(--_bg-active, var(--_bg-hover));
   }
-  .kpt-button:disabled {
+  .kpt-button:is(:disabled, [aria-disabled=true]) {
     cursor: not-allowed;
     opacity: 0.5;
   }
+  .kpt-button__content {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--kpt-button-gap, 0.5rem);
+  }
+  .kpt-button :is(.kpt-button__icon, .kpt-button__content .kpt-icon-host) {
+    font-size: var(--_icon, 1.125rem);
+  }
+  .kpt-button[data-size=xs] {
+    --_h: 1.75rem;
+    --_px: 0.5rem;
+    --_fs: 0.75rem;
+    --_icon: 0.875rem;
+  }
   .kpt-button[data-size=sm] {
     --_h: 2rem;
     --_px: 0.75rem;
     --_fs: 0.8125rem;
+    --_icon: 1rem;
   }
   .kpt-button[data-size=md] {
     --_h: 2.5rem;
     --_px: 1rem;
     --_fs: 0.875rem;
+    --_icon: 1.125rem;
   }
   .kpt-button[data-size=lg] {
     --_h: 3rem;
     --_px: 1.5rem;
     --_fs: 1rem;
+    --_icon: 1.25rem;
+  }
+  .kpt-button[data-size=xl] {
+    --_h: 3.5rem;
+    --_px: 2rem;
+    --_fs: 1.125rem;
+    --_icon: 1.5rem;
+  }
+  .kpt-button[data-variant=elevated] {
+    --_bg: var(--kpt-button-elevated-bg);
+    --_fg: var(--kpt-button-elevated-fg);
+    --_bg-hover: var(--kpt-button-elevated-bg-hover);
+    box-shadow: var(--kpt-shadow-sm);
+  }
+  .kpt-button[data-variant=elevated]:hover:not(:disabled):not([aria-disabled=true]) {
+    box-shadow: var(--kpt-shadow-md);
   }
   .kpt-button[data-variant=tonal] {
     --_bg: var(--kpt-button-tonal-bg);
@@ -1382,18 +1447,44 @@
     --_bg-hover: var(--kpt-button-text-bg-hover);
     --_bg-active: var(--kpt-button-text-bg-hover);
   }
+  .kpt-button[data-variant=link] {
+    --_bg: transparent;
+    --_fg: var(--kpt-button-link-fg);
+    --_bg-hover: transparent;
+    --_px: 0;
+    text-decoration: underline;
+    text-underline-offset: 0.2em;
+  }
+  .kpt-button[data-variant=link]:hover:not(:disabled):not([aria-disabled=true]) {
+    --_fg: var(--kpt-button-link-fg-hover);
+  }
   .kpt-button[data-variant=danger] {
-    --_bg: var(--kpt-color-danger);
-    --_fg: var(--kpt-color-on-danger);
-    --_bg-hover: color-mix(in oklch, var(--kpt-color-danger) 88%, black);
-    --_bg-active: color-mix(in oklch, var(--kpt-color-danger) 78%, black);
+    --_bg: var(--kpt-button-danger-bg);
+    --_fg: var(--kpt-button-danger-fg);
+    --_bg-hover: var(--kpt-button-danger-bg-hover);
+  }
+  .kpt-button[data-variant=success] {
+    --_bg: var(--kpt-button-success-bg);
+    --_fg: var(--kpt-button-success-fg);
+    --_bg-hover: var(--kpt-button-success-bg-hover);
+  }
+  .kpt-button[data-variant=warning] {
+    --_bg: var(--kpt-button-warning-bg);
+    --_fg: var(--kpt-button-warning-fg);
+    --_bg-hover: var(--kpt-button-warning-bg-hover);
+  }
+  .kpt-button[data-variant=info] {
+    --_bg: var(--kpt-button-info-bg);
+    --_fg: var(--kpt-button-info-fg);
+    --_bg-hover: var(--kpt-button-info-bg-hover);
   }
   .kpt-button--loading .kpt-button__content {
     opacity: 0.75;
   }
   .kpt-button__spinner {
-    width: 1em;
-    height: 1em;
+    width: var(--_icon, 1.125rem);
+    height: var(--_icon, 1.125rem);
+    flex: none;
     border: 2px solid currentColor;
     border-right-color: transparent;
     border-radius: 50%;
@@ -1435,10 +1526,14 @@
     border-inline-start: var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);
     background: none;
     color: var(--kpt-color-on-surface);
-    padding: 0 var(--kpt-space-4, 1rem);
-    height: 2.5rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--kpt-button-gap, 0.5rem);
+    padding: 0 var(--_px, 1rem);
+    height: var(--_h, 2.5rem);
     font: inherit;
-    font-size: var(--kpt-font-size-sm, 0.875rem);
+    font-size: var(--_fs, 0.875rem);
     font-weight: var(--kpt-font-weight-medium, 500);
     cursor: pointer;
     transition: background-color var(--kpt-motion-duration-fast, 120ms) var(--kpt-motion-easing-standard);
@@ -1457,15 +1552,30 @@
     opacity: 0.5;
     cursor: not-allowed;
   }
-  .kpt-button-group[data-size=sm] .kpt-button-group__item {
-    height: 2rem;
-    padding-inline: 0.75rem;
-    font-size: 0.8125rem;
+  .kpt-button-group__icon {
+    font-size: var(--_icon, 1.125rem);
   }
-  .kpt-button-group[data-size=lg] .kpt-button-group__item {
-    height: 3rem;
-    padding-inline: 1.5rem;
-    font-size: 1rem;
+  .kpt-button-group {
+    --_h: 2.5rem;
+    --_px: 1rem;
+    --_fs: 0.875rem;
+    --_icon: 1.125rem;
+  }
+  .kpt-button-group[data-size=sm] {
+    --_h: 2rem;
+    --_px: 0.75rem;
+    --_fs: 0.8125rem;
+    --_icon: 1rem;
+  }
+  .kpt-button-group[data-size=lg] {
+    --_h: 3rem;
+    --_px: 1.5rem;
+    --_fs: 1rem;
+    --_icon: 1.25rem;
+  }
+  .kpt-button-group[data-icon-only] .kpt-button-group__item {
+    --_px: 0;
+    width: var(--_h);
   }
 }
 
@@ -1710,7 +1820,7 @@
     white-space: nowrap;
   }
   .kpt-chip[data-variant=primary] {
-    --_bg: color-mix(in oklch, var(--kpt-color-primary) 14%, var(--kpt-color-surface));
+    --_bg: color-mix(in oklab, var(--kpt-color-primary) 14%, var(--kpt-color-surface));
     --_fg: var(--kpt-color-primary);
   }
   .kpt-chip[data-variant=success] {
@@ -1729,6 +1839,21 @@
     --_bg: color-mix(in oklch, var(--kpt-color-info) 16%, transparent);
     --_fg: var(--kpt-color-info);
   }
+  .kpt-chip[data-text-transform=capitalize] {
+    text-transform: capitalize;
+    font-size: var(--kpt-font-size-sm, 0.85rem);
+    font-weight: var(--kpt-font-weight-light, 100);
+  }
+  .kpt-chip[data-text-transform=uppercase] {
+    text-transform: uppercase;
+    font-size: var(--kpt-font-size-sm, 0.85rem);
+    font-weight: var(--kpt-font-weight-light, 100);
+  }
+  .kpt-chip[data-text-transform=lowercase] {
+    text-transform: lowercase;
+    font-size: var(--kpt-font-size-sm, 0.75rem);
+    font-weight: var(--kpt-font-weight-light, 100);
+  }
   .kpt-chip--disabled {
     opacity: 0.55;
   }
@@ -2332,13 +2457,20 @@
     color: var(--kpt-color-on-surface-muted);
     font-size: var(--kpt-font-size-sm, 0.875rem);
   }
-  .kpt-data-view__switch {
+  .kpt-data-view__controls {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--kpt-space-2, 0.5rem);
+  }
+  .kpt-data-view__switch,
+  .kpt-data-view__columns {
     display: inline-flex;
     border: var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);
     border-radius: var(--kpt-radius-md, 0.5rem);
     overflow: hidden;
   }
-  .kpt-data-view__switch button {
+  .kpt-data-view__switch button,
+  .kpt-data-view__columns button {
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -2349,10 +2481,21 @@
     color: var(--kpt-color-on-surface-muted);
     cursor: pointer;
   }
-  .kpt-data-view__switch button.is-active {
+  .kpt-data-view__switch button.is-active,
+  .kpt-data-view__columns button.is-active {
     background: var(--kpt-color-primary);
     color: var(--kpt-color-on-primary);
   }
+  .kpt-data-view__columns button {
+    gap: var(--kpt-space-1, 0.25rem);
+    width: auto;
+    padding-inline: var(--kpt-space-2, 0.5rem);
+    font-size: var(--kpt-font-size-sm, 0.875rem);
+    font-weight: var(--kpt-font-weight-medium, 500);
+  }
+  .kpt-data-view__content {
+    --_gap: var(--kpt-space-3, 0.75rem);
+  }
   .kpt-data-view__content[data-layout=list] {
     display: flex;
     flex-direction: column;
@@ -2360,8 +2503,11 @@
   }
   .kpt-data-view__content[data-layout=grid] {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
-    gap: var(--kpt-space-3, 0.75rem);
+    gap: var(--_gap);
+    grid-template-columns: repeat(auto-fill, minmax(var(--_min, 10rem), 1fr));
+  }
+  .kpt-data-view__content[data-layout=grid][data-columns] {
+    grid-template-columns: repeat(auto-fill, minmax(max(var(--_min, 10rem), (100% - (var(--_cols) - 1) * var(--_gap)) / var(--_cols)), 1fr));
   }
   .kpt-data-view__item {
     border: var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);
@@ -2376,7 +2522,7 @@
   }
   .kpt-data-view .kpt-paginator {
     margin-top: var(--kpt-space-3, 0.75rem);
-    display: block;
+    flex-wrap: wrap;
   }
 }
 
@@ -2961,7 +3107,8 @@
 @layer kpt.components {
   .kpt-dialog {
     margin: auto;
-    width: min(32rem, 100vw - 2rem);
+    --_width: 32rem;
+    width: min(var(--_width), 100vw - 2rem);
     max-height: calc(100vh - 4rem);
     padding: 0;
     border: var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);
@@ -2970,6 +3117,12 @@
     color: var(--kpt-color-on-surface);
     box-shadow: var(--kpt-elevation-4);
   }
+  .kpt-dialog[data-size=sm] {
+    --_width: 24rem;
+  }
+  .kpt-dialog[data-size=lg] {
+    --_width: 48rem;
+  }
   .kpt-dialog::backdrop {
     background: var(--kpt-color-overlay-scrim);
   }
@@ -3027,6 +3180,13 @@
   .kpt-dialog [kptDialogFooter] {
     flex: none;
     display: flex;
+    /*
+     * Zawijanie jest obowiązkowe, nie kosmetyczne. `<dialog>` dostaje z arkusza przeglądarki
+     * `overflow: auto`, więc stopka, która nie mieści się w szerokości okna, nie wystaje —
+     * zostaje **ucięta**. Cztery przyciski w oknie `sm` wystarczą, żeby pierwszy z nich
+     * przestał być czytelny, a użytkownik nie ma jak się do niego dostać.
+     */
+    flex-wrap: wrap;
     justify-content: flex-end;
     gap: var(--kpt-space-3, 0.75rem);
     padding: var(--kpt-space-4, 1rem) var(--kpt-space-6, 1.5rem);
@@ -3341,7 +3501,7 @@
   }
   .kpt-file-upload__zone:hover:not(.is-disabled), .kpt-file-upload__zone.is-dragover {
     border-color: var(--kpt-color-primary);
-    background: color-mix(in oklch, var(--kpt-color-primary) 6%, var(--kpt-color-surface));
+    background: color-mix(in oklab, var(--kpt-color-primary) 6%, var(--kpt-color-surface));
   }
   .kpt-file-upload__zone.is-disabled {
     opacity: 0.6;
@@ -3660,7 +3820,7 @@
   .kpt-icon-button[data-variant=danger] {
     --_bg: var(--kpt-color-danger);
     --_fg: var(--kpt-color-on-danger);
-    --_bg-hover: color-mix(in oklch, var(--kpt-color-danger) 88%, black);
+    --_bg-hover: color-mix(in oklab, var(--kpt-color-danger) 88%, black);
   }
   @media (prefers-reduced-motion: reduce) {
     .kpt-icon-button::after {
@@ -4107,6 +4267,61 @@
   }
 }
 
+/* src/lib/mention/mention.component.scss */
+@charset "UTF-8";
+@layer kpt.components {
+  /* Wzmianka żyje w zdaniu, więc host jest `inline` — `inline-block` nie łamałby się razem
+     z wierszem i długi akapit rozjeżdżałby się na wąskim ekranie. */
+  .kpt-mention-host,
+  .kpt-mentions-host,
+  .kpt-mentions__text {
+    display: inline;
+  }
+  /* Trigger jest `<button>` albo `<a>`, więc zdejmujemy z niego wygląd kontrolki: w akapicie ma
+     czytać się jak wyróżnione słowo, a nie jak przycisk wciśnięty w zdanie. */
+  .kpt-mention {
+    display: inline;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    border-radius: var(--kpt-radius-sm, 0.25rem);
+    background: transparent;
+    color: var(--kpt-color-primary);
+    font: inherit;
+    /* Kropkowana linia mówi „tu coś jest do podejrzenia", zanim ktokolwiek najedzie — ciągłe
+       podkreślenie znaczyłoby link, a wzmianka zwykle nigdzie nie prowadzi, tylko otwiera kartę.
+       W spoczynku jest jasna, żeby nie rozbijała akapitu; pod kursorem i przy otwartej karcie
+       ciemnieje do koloru samej wzmianki. */
+    text-decoration: underline dotted var(--kpt-color-primary-border);
+    text-decoration-thickness: 1px;
+    text-underline-offset: 0.2em;
+    cursor: pointer;
+    transition: text-decoration-color var(--kpt-motion-duration-fast, 120ms) var(--kpt-motion-easing-standard, ease);
+  }
+  .kpt-mention:hover, .kpt-mention[aria-expanded=true] {
+    text-decoration-color: var(--kpt-color-primary);
+  }
+  .kpt-mention:focus-visible {
+    outline: 2px solid var(--kpt-color-focus-ring);
+    outline-offset: 2px;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .kpt-mention {
+      transition: none;
+    }
+  }
+  .kpt-mention {
+    /* Wzmianka bez karty: wyróżniona, ale bez obietnicy, że coś się pod nią kryje — więc także
+       bez kropkowanej linii, która tę obietnicę składa. */
+  }
+  .kpt-mention[data-plain] {
+    color: var(--kpt-color-text);
+    font-weight: var(--kpt-font-weight-medium, 500);
+    text-decoration: none;
+    cursor: inherit;
+  }
+}
+
 /* src/lib/menu/menu.component.scss */
 @charset "UTF-8";
 @layer kpt.components {
@@ -4371,6 +4586,9 @@
     max-height: 16rem;
     overflow-y: auto;
   }
+  .kpt-order-list__items.is-dragover {
+    background: var(--kpt-color-muted);
+  }
   .kpt-order-list__item {
     padding: var(--kpt-space-2, 0.5rem) var(--kpt-space-3, 0.75rem);
     border-radius: var(--kpt-radius-sm, 0.25rem);
@@ -4384,6 +4602,19 @@
     background: color-mix(in oklch, var(--kpt-color-primary) 16%, transparent);
     color: var(--kpt-color-primary);
   }
+  .kpt-order-list__item--draggable {
+    cursor: grab;
+    user-select: none;
+  }
+  .kpt-order-list__item--draggable:active {
+    cursor: grabbing;
+  }
+  .kpt-order-list__item--dragover {
+    box-shadow: inset 0 2px 0 0 var(--kpt-color-primary);
+  }
+  .kpt-order-list__item.is-dragging {
+    opacity: 0.5;
+  }
 }
 
 /* src/lib/paginator/paginator.component.scss */
@@ -4570,6 +4801,36 @@
   }
 }
 
+/* src/lib/peek/peek.component.scss */
+@charset "UTF-8";
+@layer kpt.components {
+  /* Host i zaczepienie są `inline`, nie `inline-flex`: karta wisi najczęściej na wzmiance w środku
+     akapitu, a element flex nie łamie się razem z wierszem tekstu. */
+  .kpt-peek-host,
+  .kpt-peek__origin {
+    display: inline;
+  }
+  .kpt-peek__panel {
+    max-inline-size: 22rem;
+    padding: var(--kpt-space-4, 1rem);
+    border: var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);
+    border-radius: var(--kpt-radius-md, 0.5rem);
+    background: var(--kpt-color-surface-raised);
+    color: var(--kpt-color-on-surface);
+    font-size: var(--kpt-font-size-sm, 0.875rem);
+    box-shadow: var(--kpt-elevation-3);
+    /* Karta otwarta hoverem nie pokazuje obwódki fokusu — dostaje ją dopiero przypięta, bo wtedy
+       naprawdę trzyma fokus i użytkownik musi wiedzieć, gdzie jest. */
+  }
+  .kpt-peek__panel:focus {
+    outline: none;
+  }
+  .kpt-peek__panel[data-pinned]:focus-visible {
+    outline: 2px solid var(--kpt-color-focus-ring);
+    outline-offset: 2px;
+  }
+}
+
 /* src/lib/pick-list/pick-list.component.scss */
 @layer kpt.components {
   .kpt-pick-list-host {
@@ -4605,6 +4866,9 @@
     overflow-y: auto;
     flex: 1;
   }
+  .kpt-pick-list__items.is-dragover {
+    background: var(--kpt-color-muted);
+  }
   .kpt-pick-list__item {
     padding: var(--kpt-space-2, 0.5rem) var(--kpt-space-3, 0.75rem);
     border-radius: var(--kpt-radius-sm, 0.25rem);
@@ -4618,6 +4882,19 @@
     background: color-mix(in oklch, var(--kpt-color-primary) 16%, transparent);
     color: var(--kpt-color-primary);
   }
+  .kpt-pick-list__item--draggable {
+    cursor: grab;
+    user-select: none;
+  }
+  .kpt-pick-list__item--draggable:active {
+    cursor: grabbing;
+  }
+  .kpt-pick-list__item--dragover {
+    box-shadow: inset 0 2px 0 0 var(--kpt-color-primary);
+  }
+  .kpt-pick-list__item.is-dragging {
+    opacity: 0.5;
+  }
   .kpt-pick-list__controls {
     display: flex;
     flex-direction: column;
@@ -4669,66 +4946,179 @@
 /* src/lib/progress/progress.component.scss */
 @layer kpt.components {
   .kpt-progress-host {
-    display: block;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    column-gap: var(--kpt-progress-gap, 0.5rem);
+    row-gap: 0.25rem;
     --_color: var(--kpt-color-primary);
+    --_thickness: var(--kpt-progress-thickness-md, 0.5rem);
+    --_stroke: 4;
   }
-  .kpt-progress__linear[data-variant=success],
-  .kpt-progress__circular[data-variant=success] {
+  .kpt-progress-host[data-variant=success] {
     --_color: var(--kpt-color-success);
   }
-  .kpt-progress__linear[data-variant=danger],
-  .kpt-progress__circular[data-variant=danger] {
+  .kpt-progress-host[data-variant=danger] {
     --_color: var(--kpt-color-danger);
   }
-  .kpt-progress__linear[data-variant=warning],
-  .kpt-progress__circular[data-variant=warning] {
+  .kpt-progress-host[data-variant=warning] {
     --_color: var(--kpt-color-warning);
   }
-  .kpt-progress__linear[data-variant=info],
-  .kpt-progress__circular[data-variant=info] {
+  .kpt-progress-host[data-variant=info] {
     --_color: var(--kpt-color-info);
   }
+  .kpt-progress-host[data-size=sm] {
+    --_thickness: var(--kpt-progress-thickness-sm, 0.25rem);
+    --_stroke: 3;
+  }
+  .kpt-progress-host[data-size=lg] {
+    --_thickness: var(--kpt-progress-thickness-lg, 0.75rem);
+    --_stroke: 6;
+  }
+  .kpt-progress-host[data-type=linear][data-label-position=top] .kpt-progress__label {
+    order: 1;
+  }
+  .kpt-progress-host[data-type=linear][data-label-position=top] .kpt-progress__value {
+    order: 2;
+    margin-inline-start: auto;
+  }
+  .kpt-progress-host[data-type=linear][data-label-position=top] .kpt-progress__linear {
+    order: 3;
+    flex: 1 1 100%;
+  }
+  .kpt-progress-host[data-type=linear][data-label-position=bottom] .kpt-progress__linear {
+    order: 1;
+    flex: 1 1 100%;
+  }
+  .kpt-progress-host[data-type=linear][data-label-position=bottom] .kpt-progress__label {
+    order: 2;
+  }
+  .kpt-progress-host[data-type=linear][data-label-position=bottom] .kpt-progress__value {
+    order: 3;
+    margin-inline-start: auto;
+  }
+  .kpt-progress-host[data-type=linear][data-label-position=end] .kpt-progress__label {
+    order: 1;
+    flex: 1 1 100%;
+  }
+  .kpt-progress-host[data-type=linear][data-label-position=end] .kpt-progress__linear {
+    order: 2;
+    flex: 1 1 0;
+  }
+  .kpt-progress-host[data-type=linear][data-label-position=end] .kpt-progress__value {
+    order: 3;
+    flex: 0 0 auto;
+  }
+  .kpt-progress__label {
+    color: var(--kpt-progress-label-fg, var(--kpt-color-on-surface-muted));
+    font-size: var(--kpt-font-size-sm);
+  }
+  .kpt-progress__value {
+    color: var(--kpt-progress-value-fg, var(--kpt-color-on-surface));
+    font-size: var(--kpt-font-size-sm);
+    font-variant-numeric: tabular-nums;
+    text-align: center;
+    line-height: 1.2;
+  }
   .kpt-progress__linear {
-    height: 0.5rem;
+    position: relative;
+    height: var(--_thickness);
     width: 100%;
     border-radius: var(--kpt-radius-full, 9999px);
-    background: var(--kpt-color-surface-variant);
+    background: var(--kpt-progress-track-bg, var(--kpt-color-surface-variant));
     overflow: hidden;
   }
+  .kpt-progress__linear .kpt-progress__buffer,
   .kpt-progress__linear .kpt-progress__bar {
-    height: 100%;
-    background: var(--_color);
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 0;
     border-radius: inherit;
+    background: var(--_color);
     transition: width var(--kpt-motion-duration-base, 200ms) var(--kpt-motion-easing-standard);
   }
-  .kpt-progress__linear .kpt-progress--indeterminate {
-    width: 40% !important;
-    animation: kpt-progress-slide 1.2s ease-in-out infinite;
+  .kpt-progress__linear .kpt-progress__buffer {
+    opacity: var(--kpt-progress-buffer-opacity, 0.32);
+  }
+  .kpt-progress__linear .kpt-progress__bar.kpt-progress--indeterminate {
+    width: 40%;
+    transition: none;
+    animation: kpt-progress-slide 1.6s var(--kpt-motion-easing-standard, ease-in-out) infinite;
+  }
+  .kpt-progress-host[data-type=circular] {
+    display: inline-grid;
+    place-items: center;
+    column-gap: 0;
+    row-gap: 0;
+  }
+  .kpt-progress-host[data-type=circular] > * {
+    grid-area: 1/1;
   }
   .kpt-progress__circular {
     transform: rotate(-90deg);
   }
   .kpt-progress__circular .kpt-progress__track {
     fill: none;
-    stroke: var(--kpt-color-surface-variant);
-    stroke-width: 4;
+    stroke: var(--kpt-progress-track-bg, var(--kpt-color-surface-variant));
+    stroke-width: var(--_stroke);
   }
   .kpt-progress__circular .kpt-progress__bar {
     fill: none;
     stroke: var(--_color);
-    stroke-width: 4;
+    stroke-width: var(--_stroke);
     stroke-linecap: round;
     transition: stroke-dashoffset var(--kpt-motion-duration-base, 200ms) var(--kpt-motion-easing-standard);
   }
   .kpt-progress__circular.kpt-progress--indeterminate {
-    animation: kpt-spinner-rotate 1s linear infinite;
+    animation: kpt-progress-rotate 1.6s linear infinite;
+  }
+  .kpt-progress__circular.kpt-progress--indeterminate .kpt-progress__bar {
+    transition: none;
+    animation: kpt-progress-dash 1.4s ease-in-out infinite;
   }
   @keyframes kpt-progress-slide {
     0% {
-      transform: translateX(-100%);
+      transform: translateX(-110%) scaleX(0.6);
+    }
+    50% {
+      transform: translateX(90%) scaleX(1.6);
+    }
+    100% {
+      transform: translateX(280%) scaleX(0.6);
+    }
+  }
+  @keyframes kpt-progress-rotate {
+    from {
+      transform: rotate(-90deg);
+    }
+    to {
+      transform: rotate(270deg);
+    }
+  }
+  @keyframes kpt-progress-dash {
+    0% {
+      stroke-dasharray: 1 100.5;
+      stroke-dashoffset: 0;
+    }
+    50% {
+      stroke-dasharray: 70 100.5;
+      stroke-dashoffset: -15;
     }
     100% {
-      transform: translateX(350%);
+      stroke-dasharray: 1 100.5;
+      stroke-dashoffset: -99;
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .kpt-progress__linear .kpt-progress__bar.kpt-progress--indeterminate,
+    .kpt-progress__circular.kpt-progress--indeterminate,
+    .kpt-progress__circular.kpt-progress--indeterminate .kpt-progress__bar {
+      animation-duration: 3.2s;
+    }
+    .kpt-progress__linear .kpt-progress__buffer,
+    .kpt-progress__linear .kpt-progress__bar,
+    .kpt-progress__circular .kpt-progress__bar {
+      transition: none;
     }
   }
 }
@@ -4824,6 +5214,7 @@
 }
 
 /* src/lib/rich-text/rich-text.component.scss */
+@charset "UTF-8";
 @layer kpt.components {
   .kpt-rich-text-host {
     display: block;
@@ -5173,6 +5564,38 @@
     font-size: var(--kpt-font-size-xs, 0.75rem);
     color: var(--kpt-color-on-surface-muted);
   }
+  /* Lista podpowiedzi wzmianek — ten sam wygląd co menu kontekstowe tabeli, bo obie wychodzą
+     spod kursora w środku treści i mają się czytać jak jedna rodzina. */
+  .kpt-rt-mentions {
+    min-inline-size: 12rem;
+    max-inline-size: 20rem;
+    margin: 0;
+    padding: 0.25rem;
+    border: var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);
+    border-radius: var(--kpt-radius-md, 0.5rem);
+    background: var(--kpt-color-surface-raised);
+    list-style: none;
+    box-shadow: var(--kpt-elevation-3);
+  }
+  .kpt-rt-mentions__item {
+    display: flex;
+    align-items: baseline;
+    gap: var(--kpt-space-2, 0.5rem);
+    padding: var(--kpt-space-1, 0.25rem) var(--kpt-space-2, 0.5rem);
+    border-radius: var(--kpt-radius-sm, 0.25rem);
+    font-size: var(--kpt-font-size-sm, 0.875rem);
+    cursor: pointer;
+    /* Podświetlenie idzie z klawiatury i z kursora tym samym atrybutem: lista ma jedną
+       aktywną pozycję, więc Enter zawsze wstawia to, co widać jako wybrane. */
+  }
+  .kpt-rt-mentions__item[data-active] {
+    background: var(--kpt-color-surface-hover);
+  }
+  .kpt-rt-mentions__kind {
+    margin-inline-start: auto;
+    color: var(--kpt-color-text-muted);
+    font-size: var(--kpt-font-size-xs, 0.75rem);
+  }
   .kpt-rt-menu {
     min-width: 12rem;
     padding: 0.25rem;
@@ -5538,7 +5961,7 @@
   }
   .kpt-skeleton {
     display: block;
-    background: linear-gradient(90deg, var(--kpt-color-surface-variant) 25%, color-mix(in oklch, var(--kpt-color-surface-variant) 60%, var(--kpt-color-surface)) 50%, var(--kpt-color-surface-variant) 75%);
+    background: linear-gradient(90deg, var(--kpt-color-surface-variant) 25%, color-mix(in oklab, var(--kpt-color-surface-variant) 60%, var(--kpt-color-surface)) 50%, var(--kpt-color-surface-variant) 75%);
     background-size: 200% 100%;
     border-radius: var(--kpt-radius-md, 0.5rem);
     animation: kpt-skeleton-shimmer 1.4s ease-in-out infinite;
@@ -6869,6 +7292,810 @@
   }
 }
 
+/* chat/src/lib/chat-composer.component.scss */
+@charset "UTF-8";
+@layer kpt.components {
+  .kpt-chat-composer-host {
+    display: block;
+    border-block-start: var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);
+    background: var(--kpt-color-surface);
+  }
+  .kpt-chat-composer {
+    display: flex;
+    align-items: flex-end;
+    gap: var(--kpt-space-2, 0.5rem);
+    padding: var(--kpt-space-2, 0.5rem) var(--kpt-space-3, 0.75rem);
+  }
+  .kpt-chat-composer__field {
+    --_max-rows: 6;
+    --_line: 1.5em;
+    flex: 1 1 auto;
+    min-width: 0;
+    /* Wysokość ustawia skrypt od treści; ten limit zamienia dalszy wzrost na przewijanie. */
+    max-block-size: calc(var(--_max-rows) * var(--_line) + var(--kpt-space-2, 0.5rem));
+    padding: var(--kpt-space-2, 0.5rem) var(--kpt-space-3, 0.75rem);
+    border: var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);
+    border-radius: var(--kpt-radius-lg, 0.75rem);
+    background: var(--kpt-color-surface-variant);
+    color: var(--kpt-color-text);
+    font: inherit;
+    font-size: var(--kpt-font-size-sm, 0.875rem);
+    line-height: 1.5;
+    /* Zmiana rozmiaru myszą kłóciłaby się z autorośnięciem — wysokość liczy komponent. */
+    resize: none;
+    overflow-y: auto;
+  }
+  .kpt-chat-composer__field::placeholder {
+    color: var(--kpt-color-text-subtle);
+  }
+  .kpt-chat-composer__field:focus-visible {
+    outline: 2px solid var(--kpt-color-focus-ring);
+    outline-offset: -1px;
+  }
+  .kpt-chat-composer__field:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+  /* Pole pliku jest sterowane przyciskiem; natywny widget nie da się ostylować. */
+  .kpt-chat-composer__picker {
+    display: none;
+  }
+  .kpt-chat-composer__reply {
+    display: flex;
+    align-items: center;
+    gap: var(--kpt-space-2, 0.5rem);
+    padding: var(--kpt-space-2, 0.5rem) var(--kpt-space-3, 0.75rem);
+    border-inline-start: 2px solid var(--kpt-color-primary);
+    background: var(--kpt-color-surface-variant);
+  }
+  .kpt-chat-composer__reply-body {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    min-width: 0;
+    font-size: var(--kpt-font-size-xs, 0.75rem);
+  }
+  .kpt-chat-composer__reply-author {
+    color: var(--kpt-color-primary);
+    font-weight: var(--kpt-font-weight-semibold, 600);
+  }
+  .kpt-chat-composer__reply-text {
+    color: var(--kpt-color-text-muted);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .kpt-chat-composer__files {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--kpt-space-2, 0.5rem);
+    margin: 0;
+    padding: var(--kpt-space-2, 0.5rem) var(--kpt-space-3, 0.75rem) 0;
+    list-style: none;
+  }
+  .kpt-chat-composer__file {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    max-inline-size: 14rem;
+    padding-inline-start: var(--kpt-space-2, 0.5rem);
+    border: var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);
+    border-radius: var(--kpt-radius-full, 9999px);
+    background: var(--kpt-color-surface-variant);
+    font-size: var(--kpt-font-size-xs, 0.75rem);
+  }
+  .kpt-chat-composer__file-name {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+/* chat/src/lib/chat-dock.component.scss */
+@charset "UTF-8";
+@layer kpt.components {
+  /* Host nie może tworzyć własnego pudełka: FAB i panel są `fixed`, a host wstawiony
+     w środek layoutu aplikacji zajmowałby miejsce w przepływie. */
+  .kpt-chat-dock-host {
+    display: contents;
+  }
+  .kpt-chat-dock__trigger {
+    --_offset: var(--kpt-space-6, 1.5rem);
+    position: fixed;
+    inset-block-end: var(--_offset);
+    z-index: var(--kpt-z-overlay, 1000);
+  }
+  .kpt-chat-dock__panel {
+    --_width: 22.5rem;
+    --_offset: var(--kpt-space-6, 1.5rem);
+    /* Opóźnienie ukrycia: przy zamykaniu panel ma najpierw zjechać, przy otwieraniu
+       pojawia się natychmiast. Ta sama sztuczka co w kpt-drawer. */
+    --_vis-delay: var(--kpt-motion-duration-base, 200ms);
+    position: fixed;
+    /* 4,5rem to wysokość FAB-a plus prześwit — panel stoi nad przyciskiem. */
+    inset-block-end: calc(var(--_offset) + 4.5rem);
+    z-index: var(--kpt-z-overlay, 1000);
+    display: flex;
+    flex-direction: column;
+    inline-size: var(--_width);
+    max-inline-size: calc(100vw - 2 * var(--_offset));
+    block-size: min(32rem, 100dvh - 9rem);
+    border: var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);
+    border-radius: var(--kpt-radius-lg, 0.75rem);
+    background: var(--kpt-color-surface);
+    color: var(--kpt-color-text);
+    overflow: hidden;
+    box-shadow: var(--kpt-elevation-3);
+    /* Stan zamknięty siedzi w regule bazowej, nie pod `[data-position]`: Angular ustawia
+       atrybuty o klatkę za późno, więc panel mrugnąłby otwarty przy pierwszym renderze.
+       `visibility` zamiast `display: none` — przejścia nie da się zanimować z `none`. */
+    visibility: hidden;
+    opacity: 0;
+    transform: translateY(var(--kpt-space-4, 1rem)) scale(0.98);
+    transform-origin: bottom center;
+    transition: opacity var(--kpt-motion-duration-base, 200ms) var(--kpt-motion-easing-standard, ease), transform var(--kpt-motion-duration-base, 200ms) var(--kpt-motion-easing-emphasized, ease), visibility 0s linear var(--_vis-delay);
+  }
+  .kpt-chat-dock__panel.is-open {
+    visibility: visible;
+    opacity: 1;
+    transform: none;
+    transition-delay: 0s;
+  }
+  .kpt-chat-dock__header {
+    display: flex;
+    flex: 0 0 auto;
+    align-items: center;
+    gap: var(--kpt-space-2, 0.5rem);
+    padding: var(--kpt-space-2, 0.5rem) var(--kpt-space-2, 0.5rem) var(--kpt-space-2, 0.5rem) var(--kpt-space-4, 1rem);
+    border-block-end: var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);
+  }
+  .kpt-chat-dock__title {
+    flex: 1 1 auto;
+    font-weight: var(--kpt-font-weight-semibold, 600);
+  }
+  .kpt-chat-dock__content {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    min-height: 0;
+  }
+  /* Pozycja pozioma — logiczne własności, więc RTL odwraca róg bez osobnej reguły.
+     Odsunięcie od rogu jest wspólne dla obu osi i steruje nim input `offset`: aplikacja
+     z drugim widgetem w rogu (np. kpt-scroll-top) odsuwa dock, zamiast walczyć ze stylami. */
+  .kpt-chat-dock__trigger,
+  .kpt-chat-dock__panel {
+    inset-inline-end: var(--_offset);
+  }
+  .kpt-chat-dock__trigger[data-position=bottom-start],
+  .kpt-chat-dock__panel[data-position=bottom-start] {
+    inset-inline: var(--_offset) auto;
+  }
+  /*
+   * Współdzielony róg. `kpt-scroll-top` przykleja się dokładnie w to samo miejsce, z tym samym
+   * `--kpt-z-overlay`, więc bez tej reguły FAB czatu znika pod nim w całości — wystaje sama
+   * plakietka nieprzeczytanych, a przycisku nie da się kliknąć.
+   *
+   * Ustępuje przycisk powrotu na górę, bo czat jest akcją główną i większym celem. Odsuwamy go
+   * W BOK, nie do góry: nad FAB-em stoi panel rozmowy, więc przesunięcie w pionie zamieniłoby
+   * jedną kolizję na drugą, gorszą — przycisk lądowałby na treści wiadomości.
+   *
+   * `:has()` na korzeniu dokumentu jest tu jedyną drogą: oba komponenty są `position: fixed`
+   * i nic ich nie łączy w drzewie DOM. Reguła stoi w arkuszu czatu, nie scroll-topu, bo zależność
+   * ma iść w stronę grafu paczek — subpath zna rdzeń, rdzeń nie zna subpathu.
+   *
+   * Dotyczy wyłącznie `bottom-end`: dock po lewej i tak nie koliduje. Gdy aplikacja przestawi
+   * `offset`, sama odpowiada też za ustawienie scroll-topu — ta reguła liczy od wartości domyślnej.
+   */
+  :root:has(.kpt-chat-dock__trigger[data-position=bottom-end]) .kpt-scroll-top {
+    /* 3,5rem to szerokość FAB-a, 0,75rem prześwit między przyciskami. */
+    right: calc(var(--kpt-space-6, 1.5rem) + 4.25rem);
+  }
+  /* Na telefonie panel wchodzi na pełny ekran: 22,5 rem w oknie szerokim na 20 rem
+     to nie panel, tylko szpara. FAB zostaje na wierzchu jako przycisk zamknięcia. */
+  @media (width < 640px) {
+    .kpt-chat-dock__panel {
+      inset: 0;
+      inline-size: auto;
+      max-inline-size: none;
+      block-size: auto;
+      border: 0;
+      border-radius: 0;
+      transform: translateY(var(--kpt-space-6, 1.5rem));
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .kpt-chat-dock__panel {
+      transition: opacity var(--kpt-motion-duration-fast, 120ms) linear, visibility 0s linear var(--_vis-delay);
+      transform: none;
+    }
+  }
+}
+
+/* chat/src/lib/chat-message.component.scss */
+@charset "UTF-8";
+@layer kpt.components {
+  .kpt-chat-message-host {
+    display: block;
+  }
+  /* Komunikat systemowy nie jest wypowiedzią — nie dostaje bąbla ani kolumny awatara. */
+  .kpt-chat-message__system {
+    margin: var(--kpt-space-2, 0.5rem) 0;
+    text-align: center;
+    color: var(--kpt-color-text-muted);
+    font-size: var(--kpt-font-size-xs, 0.75rem);
+  }
+  .kpt-chat-message__row {
+    display: flex;
+    align-items: flex-end;
+    gap: var(--kpt-space-2, 0.5rem);
+    /* Własna wiadomość: odwrócony kierunek dosuwa stos do prawej krawędzi, a kolumnę
+       akcji (strzałka ponowienia) wypycha na zewnątrz bąbla — po stronie treści. */
+  }
+  .kpt-chat-message__row[data-align=end] {
+    flex-direction: row-reverse;
+  }
+  /* Stała szerokość także wtedy, gdy awatara nie ma: bąble w grupie nie skaczą w poziomie. */
+  .kpt-chat-message__avatar {
+    flex: 0 0 2rem;
+    align-self: flex-end;
+  }
+  .kpt-chat-message__stack {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    max-inline-size: min(42rem, 78%);
+  }
+  .kpt-chat-message__author {
+    margin-inline-start: var(--kpt-space-3, 0.75rem);
+    margin-block-end: var(--kpt-space-1, 0.25rem);
+    color: var(--kpt-color-text-muted);
+    font-size: var(--kpt-font-size-xs, 0.75rem);
+    font-weight: var(--kpt-font-weight-medium, 500);
+  }
+  .kpt-chat-message__bubble {
+    /* Motyw jest monochromatyczny — różnicę między bąblami robi jasność, nie odcień.
+       Wariant przychodzący siada na `muted`, bo `surface-variant` dzieli od tła listy
+       1,5% jasności i w jasnym motywie bąbel po prostu znika. */
+    --_bg: var(--kpt-color-muted);
+    --_fg: var(--kpt-color-on-muted);
+    --_radius: var(--kpt-radius-lg, 0.75rem);
+    --_radius-tight: var(--kpt-radius-sm, 0.25rem);
+    position: relative;
+    padding: var(--kpt-space-2, 0.5rem) var(--kpt-space-3, 0.75rem);
+    border-radius: var(--_radius);
+    background: var(--_bg);
+    color: var(--_fg);
+    font-size: var(--kpt-font-size-sm, 0.875rem);
+    line-height: var(--kpt-font-lineHeight-normal, 1.5);
+    /* Cichszy wariant własnej wiadomości — dla rozmów, w których pełny kolor po prawej
+       stronie jest za mocny. */
+  }
+  .kpt-chat-message__bubble[data-variant=primary] {
+    --_bg: var(--kpt-color-primary-subtle);
+    --_fg: var(--kpt-color-text);
+  }
+  .kpt-chat-message__bubble[data-variant=solid] {
+    --_bg: var(--kpt-color-primary);
+    --_fg: var(--kpt-color-on-primary);
+  }
+  .kpt-chat-message__bubble[data-variant=ghost] {
+    --_bg: transparent;
+    --_fg: var(--kpt-color-text);
+    padding-inline: 0;
+  }
+  .kpt-chat-message__bubble {
+    /* Nieudana wysyłka. Obwódka wewnętrznym cieniem, nie `border` — ramka przesunęłaby
+       treść o piksel w chwili, w której status się zmienia. */
+  }
+  .kpt-chat-message__bubble[data-status=failed] {
+    --_bg: var(--kpt-color-danger-subtle);
+    /* Kolor tekstu też musi wrócić: własna wiadomość jest domyślnie `solid`, więc bez
+       tego biały napis zostałby na bladoróżowym tle błędu. */
+    --_fg: var(--kpt-color-text);
+    box-shadow: inset 0 0 0 var(--kpt-border-width-thin, 1px) var(--kpt-color-danger-border);
+  }
+  .kpt-chat-message__bubble {
+    /* Zapadnięty narożnik od strony nadawcy scala bąble w jedną kolumnę wypowiedzi. */
+  }
+  .kpt-chat-message__bubble[data-align=end][data-position=first] {
+    border-end-end-radius: var(--_radius-tight);
+  }
+  .kpt-chat-message__bubble[data-align=end][data-position=middle] {
+    border-start-end-radius: var(--_radius-tight);
+    border-end-end-radius: var(--_radius-tight);
+  }
+  .kpt-chat-message__bubble[data-align=end][data-position=last] {
+    border-start-end-radius: var(--_radius-tight);
+  }
+  .kpt-chat-message__bubble[data-align=start][data-position=first] {
+    border-end-start-radius: var(--_radius-tight);
+  }
+  .kpt-chat-message__bubble[data-align=start][data-position=middle] {
+    border-start-start-radius: var(--_radius-tight);
+    border-end-start-radius: var(--_radius-tight);
+  }
+  .kpt-chat-message__bubble[data-align=start][data-position=last] {
+    border-start-start-radius: var(--_radius-tight);
+  }
+  .kpt-chat-message__bubble {
+    /* Narożnik pod ogonkiem jest prosty. Zaokrąglony odsuwał się od ogonka łukiem i między
+       nimi prześwitywało tło listy — ogonek czytał się jak osobna strzałka doklejona obok
+       bąbla, a nie jak jego przedłużenie. Bramka na `[data-tail]`: bąble bez ogonka (środek
+       grupy, `ghost`, `system`, `[tail]="false"`) mają zostać zaokrąglone. */
+  }
+  .kpt-chat-message__bubble[data-tail][data-align=end] {
+    border-end-end-radius: 0;
+  }
+  .kpt-chat-message__bubble[data-tail][data-align=start] {
+    border-end-start-radius: 0;
+  }
+  .kpt-chat-message__bubble {
+    /* Ogonek wycięty maską, nie obróconym kwadratem: obrót zostawia widoczny szew
+       na półprzezroczystym tle i nie daje wklęsłego łuku. */
+  }
+  .kpt-chat-message__bubble[data-tail]::after {
+    content: "";
+    position: absolute;
+    inset-block-end: 0;
+    inline-size: 0.75rem;
+    block-size: 0.75rem;
+    background: var(--_bg);
+    mask: radial-gradient(circle at 100% 0, transparent 0 0.75rem, #000 0.75rem);
+  }
+  .kpt-chat-message__bubble[data-tail][data-align=end]::after {
+    inset-inline-end: -0.5rem;
+  }
+  .kpt-chat-message__bubble {
+    /* Odbicie zamiast drugiej maski — obraca się razem z `inset-inline`, więc RTL
+       nie wymaga osobnej reguły. */
+  }
+  .kpt-chat-message__bubble[data-tail][data-align=start]::after {
+    inset-inline-start: -0.5rem;
+    transform: scaleX(-1);
+  }
+  .kpt-chat-message__bubble {
+    /* Reakcje wychodzą poza dolną krawędź, więc bąbel musi im zostawić miejsce. */
+  }
+  .kpt-chat-message__bubble:has(.kpt-chat-message__reactions) {
+    margin-block-end: 0.875rem;
+  }
+  .kpt-chat-message__quote {
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+    width: 100%;
+    margin-block-end: var(--kpt-space-1, 0.25rem);
+    padding: var(--kpt-space-1, 0.25rem) var(--kpt-space-2, 0.5rem);
+    border: 0;
+    border-inline-start: 2px solid var(--kpt-color-primary);
+    border-radius: var(--kpt-radius-sm, 0.25rem);
+    background: color-mix(in oklch, currentColor 8%, transparent);
+    color: inherit;
+    font: inherit;
+    text-align: start;
+    cursor: pointer;
+  }
+  .kpt-chat-message__quote-author {
+    font-size: var(--kpt-font-size-xs, 0.75rem);
+    font-weight: var(--kpt-font-weight-semibold, 600);
+  }
+  .kpt-chat-message__quote-text {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+    font-size: var(--kpt-font-size-xs, 0.75rem);
+    opacity: 0.8;
+  }
+  .kpt-chat-message__text {
+    margin: 0;
+    /* Kompozytor łamie linie na Shift+Enter — bez `pre-wrap` zlepiłyby się w akapit. */
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+  }
+  .kpt-chat-message__files {
+    display: flex;
+    flex-direction: column;
+    gap: var(--kpt-space-1, 0.25rem);
+    margin: var(--kpt-space-2, 0.5rem) 0 0;
+    padding: 0;
+    list-style: none;
+  }
+  .kpt-chat-message__file {
+    display: flex;
+    align-items: center;
+    gap: var(--kpt-space-2, 0.5rem);
+    font-size: var(--kpt-font-size-xs, 0.75rem);
+  }
+  .kpt-chat-message__file-thumb {
+    width: 2rem;
+    height: 2rem;
+    border-radius: var(--kpt-radius-sm, 0.25rem);
+    object-fit: cover;
+  }
+  .kpt-chat-message__file-name {
+    color: inherit;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .kpt-chat-message__file-size {
+    color: inherit;
+    opacity: 0.6;
+  }
+  .kpt-chat-message__meta {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 0.25rem;
+    margin-block-start: 0.125rem;
+    font-size: var(--kpt-font-size-xs, 0.75rem);
+    opacity: 0.7;
+  }
+  .kpt-chat-message__status {
+    /* Ikona ma 1em, a wiersz meta jest już zmniejszony — bez tego status ginie. */
+    font-size: 0.875rem;
+  }
+  /* Kolor statusu schodzi z `data-status` bąbla, a nie z drugiego takiego atrybutu na ikonie:
+     jeden stan w DOM znaczy, że oba porty nie mają czego rozjechać. */
+  .kpt-chat-message__bubble[data-status=read] .kpt-chat-message__status {
+    color: var(--kpt-color-primary);
+    opacity: 1;
+  }
+  /* Na bąblu `solid` akcent jest kolorem TŁA, więc „przeczytano" zniknęłoby w nim
+     bez śladu. Tam wyróżnia je pełne krycie własnego koloru tekstu. */
+  .kpt-chat-message__bubble[data-variant=solid][data-status=read] .kpt-chat-message__status {
+    color: currentcolor;
+  }
+  .kpt-chat-message__bubble[data-status=failed] .kpt-chat-message__status {
+    color: var(--kpt-color-danger);
+    opacity: 1;
+  }
+  .kpt-chat-message__reactions {
+    position: absolute;
+    inset-block-end: -0.75rem;
+    display: flex;
+    gap: 0.25rem;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .kpt-chat-message__reactions[data-align=end] {
+    inset-inline-end: var(--kpt-space-2, 0.5rem);
+  }
+  .kpt-chat-message__reactions[data-align=start] {
+    inset-inline-start: var(--kpt-space-2, 0.5rem);
+  }
+  .kpt-chat-message__reaction {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.125rem;
+    padding: 0.0625rem 0.375rem;
+    border: var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);
+    border-radius: var(--kpt-radius-full, 9999px);
+    background: var(--kpt-color-surface-raised);
+    color: var(--kpt-color-text);
+    font-size: var(--kpt-font-size-xs, 0.75rem);
+    line-height: 1.25;
+    box-shadow: var(--kpt-elevation-1);
+  }
+  .kpt-chat-message__reaction[data-reacted] {
+    border-color: var(--kpt-color-primary-border);
+    background: var(--kpt-color-primary-subtle);
+  }
+  .kpt-chat-message__reaction-count {
+    opacity: 0.7;
+  }
+  .kpt-chat-message__actions {
+    display: flex;
+    flex: 0 0 auto;
+    align-items: center;
+    gap: 0.125rem;
+    /* Odpowiedz i zareaguj wchodzą pod kursorem oraz przy fokusie — inaczej lista
+       wyglądałaby jak panel sterowania. Ponowienie jest wyjątkiem: musi być widoczne
+       zawsze, bo bez niego nieudana wiadomość nie ma czym o sobie powiedzieć. */
+  }
+  .kpt-chat-message__actions .kpt-icon-button-host {
+    opacity: 0;
+    transition: opacity var(--kpt-motion-duration-fast, 120ms) var(--kpt-motion-easing-standard, ease);
+  }
+  .kpt-chat-message__actions .kpt-chat-message__retry {
+    opacity: 1;
+    color: var(--kpt-color-danger);
+  }
+  .kpt-chat-message__row:hover .kpt-chat-message__actions .kpt-icon-button-host,
+  .kpt-chat-message__row:focus-within .kpt-chat-message__actions .kpt-icon-button-host,
+  .kpt-chat-message__actions[data-open] .kpt-icon-button-host {
+    opacity: 1;
+  }
+  /* Kotwica wybieraka — pozycjonuje go względem przycisku „zareaguj". */
+  .kpt-chat-message__react {
+    position: relative;
+    display: inline-flex;
+  }
+  /* Wybierak reakcji: rząd emoji nad przyciskiem. Rozwija się w stronę bąbla, nie od niego:
+     akcje stoją przy zewnętrznej krawędzi listy, więc wybierak wyśrodkowany na przycisku
+     wychodziłby poza viewport (a ten ma `overflow-y: auto`, czyli przycina też w poziomie)
+     — w wąskim docku ucięłoby połowę reakcji. */
+  .kpt-chat-message__picker {
+    position: absolute;
+    inset-block-end: calc(100% + var(--kpt-space-1, 0.25rem));
+    inset-inline-end: 0;
+    z-index: var(--kpt-z-raised, 1);
+    display: flex;
+    gap: 0.125rem;
+    padding: 0.1875rem;
+    border: var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);
+    border-radius: var(--kpt-radius-full, 9999px);
+    background: var(--kpt-color-surface-raised);
+    box-shadow: var(--kpt-elevation-2);
+  }
+  /* Własna wiadomość ma odwrócony wiersz — akcje lądują z lewej, więc wybierak idzie w prawo. */
+  .kpt-chat-message__row[data-align=end] .kpt-chat-message__picker {
+    inset-inline: 0 auto;
+  }
+  .kpt-chat-message__pick {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: 1.75rem;
+    block-size: 1.75rem;
+    padding: 0;
+    border: 0;
+    border-radius: var(--kpt-radius-full, 9999px);
+    background: transparent;
+    font: inherit;
+    font-size: var(--kpt-font-size-md, 1rem);
+    line-height: 1;
+    cursor: pointer;
+    transition: transform var(--kpt-motion-duration-fast, 120ms) var(--kpt-motion-easing-standard, ease);
+  }
+  .kpt-chat-message__pick:hover {
+    background: var(--kpt-color-surface-hover);
+    transform: scale(1.15);
+  }
+  .kpt-chat-message__pick:focus-visible {
+    outline: 2px solid var(--kpt-color-focus-ring);
+    outline-offset: 1px;
+  }
+  .kpt-chat-message__pick {
+    /* Reakcja już dana: ta sama plakietka co pod bąblem, żeby było widać, co się zdejmie. */
+  }
+  .kpt-chat-message__pick[aria-pressed=true] {
+    background: var(--kpt-color-primary-subtle);
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .kpt-chat-message__actions .kpt-icon-button-host,
+    .kpt-chat-message__pick {
+      transition: none;
+    }
+    .kpt-chat-message__pick:hover {
+      transform: none;
+    }
+  }
+}
+
+/* chat/src/lib/chat-typing.component.scss */
+@charset "UTF-8";
+@layer kpt.components {
+  .kpt-chat-typing-host {
+    display: block;
+  }
+  .kpt-chat-typing {
+    display: flex;
+    align-items: center;
+    gap: var(--kpt-space-2, 0.5rem);
+    /* Wcięcie równe kolumnie awatara — wskaźnik staje tam, gdzie stanie bąbel. */
+    padding-inline-start: calc(2rem + var(--kpt-space-2, 0.5rem));
+  }
+  .kpt-chat-typing__bubble {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.1875rem;
+    padding: var(--kpt-space-2, 0.5rem) var(--kpt-space-3, 0.75rem);
+    border-radius: var(--kpt-radius-lg, 0.75rem);
+    border-end-start-radius: var(--kpt-radius-sm, 0.25rem);
+    background: var(--kpt-color-surface-variant);
+  }
+  .kpt-chat-typing__dot {
+    width: 0.375rem;
+    height: 0.375rem;
+    border-radius: var(--kpt-radius-full, 9999px);
+    background: var(--kpt-color-text-muted);
+    animation: kpt-chat-typing-bounce 1.2s infinite ease-in-out;
+  }
+  .kpt-chat-typing__dot:nth-child(2) {
+    animation-delay: 150ms;
+  }
+  .kpt-chat-typing__dot:nth-child(3) {
+    animation-delay: 300ms;
+  }
+  .kpt-chat-typing__label {
+    color: var(--kpt-color-text-muted);
+    font-size: var(--kpt-font-size-xs, 0.75rem);
+  }
+  @keyframes kpt-chat-typing-bounce {
+    0%, 60%, 100% {
+      transform: translateY(0);
+      opacity: 0.5;
+    }
+    30% {
+      transform: translateY(-0.1875rem);
+      opacity: 1;
+    }
+  }
+  @keyframes kpt-chat-typing-pulse {
+    0%, 100% {
+      opacity: 0.35;
+    }
+    50% {
+      opacity: 1;
+    }
+  }
+  /* Skok zamieniamy na pulsowanie, a nie wyłączamy animację: kropki są jedynym
+     nośnikiem informacji „ktoś pisze" i nieruchome nie odróżniają się od ozdoby. */
+  @media (prefers-reduced-motion: reduce) {
+    .kpt-chat-typing__dot {
+      animation-name: kpt-chat-typing-pulse;
+      animation-duration: 1.8s;
+    }
+  }
+}
+
+/* chat/src/lib/chat.component.scss */
+@charset "UTF-8";
+@layer kpt.components {
+  .kpt-chat-host {
+    --_gap: var(--kpt-space-1, 0.25rem);
+    --_group-gap: var(--kpt-space-4, 1rem);
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    background: var(--kpt-color-surface);
+    color: var(--kpt-color-text);
+  }
+  /* Pasek offline. `role="status"` bez `aria-live="assertive"` — utrata sieci ma być
+     zauważona, ale nie przerywać czytania wiadomości w połowie zdania. */
+  .kpt-chat__offline {
+    display: flex;
+    align-items: center;
+    gap: var(--kpt-space-2, 0.5rem);
+    margin: 0;
+    padding: var(--kpt-space-2, 0.5rem) var(--kpt-space-3, 0.75rem);
+    border-block-end: var(--kpt-border-width-thin, 1px) solid var(--kpt-color-warning-border);
+    background: var(--kpt-color-warning-subtle);
+    color: var(--kpt-color-text);
+    font-size: var(--kpt-font-size-sm, 0.875rem);
+  }
+  .kpt-chat__offline-count {
+    margin-inline-start: auto;
+    color: var(--kpt-color-text-muted);
+    font-size: var(--kpt-font-size-xs, 0.75rem);
+  }
+  /* Kontener pozycjonujący dla pigułki „nowe wiadomości" — pigułka ma pływać nad listą,
+     a nie nad całą stroną, więc nie jest `fixed` jak kpt-scroll-top. */
+  .kpt-chat__body {
+    position: relative;
+    display: flex;
+    flex: 1 1 auto;
+    min-height: 0;
+  }
+  .kpt-chat__viewport {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    gap: var(--_gap);
+    min-height: 0;
+    padding: var(--kpt-space-4, 1rem);
+    overflow-y: auto;
+    overscroll-behavior: contain;
+  }
+  /* Przerwa między grupami: wiadomość otwierająca grupę odsuwa się od poprzedniej.
+     Wewnątrz grupy zostaje ciasny `--_gap`, dzięki czemu bąble czytają się jako jedna
+     wypowiedź, a zapadnięte narożniki mają się do czego przykleić. */
+  .kpt-chat__viewport > .kpt-chat-message-host:has(.kpt-chat-message__bubble[data-position=first]),
+  .kpt-chat__viewport > .kpt-chat-message-host:has(.kpt-chat-message__bubble[data-position=single]) {
+    margin-block-start: var(--_group-gap);
+  }
+  .kpt-chat__viewport > .kpt-chat-message-host:first-child {
+    margin-block-start: 0;
+  }
+  .kpt-chat__empty {
+    margin: auto;
+    padding: var(--kpt-space-8, 2rem);
+    color: var(--kpt-color-text-muted);
+    font-size: var(--kpt-font-size-sm, 0.875rem);
+    text-align: center;
+  }
+  /* Separator dnia w liście i pływająca pigułka to ta sama etykieta w dwóch rolach, więc
+     wygląd mają wspólny. */
+  .kpt-chat__date,
+  .kpt-chat__day {
+    padding: 0.125rem var(--kpt-space-3, 0.75rem);
+    border: var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);
+    border-radius: var(--kpt-radius-full, 9999px);
+    background: var(--kpt-color-surface-raised);
+    color: var(--kpt-color-text-muted);
+    font-size: var(--kpt-font-size-xs, 0.75rem);
+    box-shadow: var(--kpt-elevation-1);
+  }
+  /* Separator jedzie z treścią i nie jest `sticky`: przyklejony zostawał na górze, więc przy
+     dłuższej rozmowie rósł tam stos ramek, a że pigułki różnią się szerokością, starsze
+     wystawały zza najnowszej. Rolę „w jakim dniu jestem" przejęła jedna pływająca pigułka. */
+  .kpt-chat__date {
+    align-self: center;
+    margin: var(--kpt-space-4, 1rem) 0 var(--kpt-space-2, 0.5rem);
+  }
+  /* Pływająca pigułka dnia: jedna na całą listę, z tekstem podmienianym przy przewijaniu.
+     Wisi nad listą, a nie w niej, więc `absolute` względem `.kpt-chat__body` — tak samo jak
+     pigułka „nowe wiadomości" przy dolnej krawędzi. Gaśnie przez `visibility`, nie
+     `display: none`, bo skrypt musi móc zmierzyć jej pas także wtedy, gdy jej nie widać. */
+  .kpt-chat__day {
+    position: absolute;
+    inset-block-start: var(--kpt-space-2, 0.5rem);
+    /* Prawy odstęp kompensuje pasek przewijania: lista oddaje mu kawałek swojej szerokości,
+       więc pigułka wyśrodkowana względem całego pola stałaby odrobinę za bardzo w prawo
+       względem samego tekstu. Logicznie, nie przez `right` — w RTL pasek jest po drugiej
+       stronie i przesunięcie musi iść za nim. */
+    inset-inline: 0 var(--kpt-space-3, 0.75rem);
+    z-index: var(--kpt-z-raised, 1);
+    width: fit-content;
+    /* Margines bloku na zero: to `<p>`, a domyślny margines UA zepchnąłby pigułkę spod
+       swojego `inset-block-start`. */
+    margin: 0 auto;
+    pointer-events: none;
+    /* Pusta pigułka musi mieć tę samą wysokość co pełna: skrypt mierzy jej pas również wtedy,
+       gdy jest zgaszona, a zapadnięty wiersz tekstu dałby za wąski pas i pigułka zapaliłaby się
+       nad etykietą, która właśnie pod nią wjeżdża. Spacja zerowej szerokości trzyma linię. */
+  }
+  .kpt-chat__day::before {
+    content: "​";
+  }
+  .kpt-chat__day[data-hidden] {
+    visibility: hidden;
+  }
+  .kpt-chat__unread {
+    display: flex;
+    align-items: center;
+    gap: var(--kpt-space-3, 0.75rem);
+    margin: var(--kpt-space-4, 1rem) 0 var(--kpt-space-2, 0.5rem);
+    color: var(--kpt-color-primary);
+    font-size: var(--kpt-font-size-xs, 0.75rem);
+  }
+  .kpt-chat__unread::before, .kpt-chat__unread::after {
+    content: "";
+    flex: 1 1 auto;
+    block-size: var(--kpt-border-width-thin, 1px);
+    background: var(--kpt-color-primary-border);
+  }
+  .kpt-chat__jump {
+    position: absolute;
+    inset-block-end: var(--kpt-space-3, 0.75rem);
+    inset-inline: 0;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--kpt-space-1, 0.25rem);
+    width: fit-content;
+    margin-inline: auto;
+    padding: var(--kpt-space-1, 0.25rem) var(--kpt-space-3, 0.75rem);
+    border: var(--kpt-border-width-thin, 1px) solid var(--kpt-color-primary-border);
+    border-radius: var(--kpt-radius-full, 9999px);
+    background: var(--kpt-color-surface-raised);
+    color: var(--kpt-color-primary);
+    font: inherit;
+    font-size: var(--kpt-font-size-xs, 0.75rem);
+    cursor: pointer;
+    box-shadow: var(--kpt-elevation-2);
+  }
+  .kpt-chat__jump:hover {
+    background: var(--kpt-color-surface-hover);
+  }
+  .kpt-chat__jump:focus-visible {
+    outline: 2px solid var(--kpt-color-focus-ring);
+    outline-offset: 2px;
+  }
+}
+
 /* roadmap/src/lib/roadmap.component.scss */
 @layer kpt.components {
   .kpt-roadmap {
@@ -7077,7 +8304,7 @@
     background: color-mix(in oklch, var(--kpt-color-primary) 10%, transparent);
   }
   .kpt-roadmap__row:hover .kpt-roadmap__label {
-    background: color-mix(in oklch, var(--kpt-color-primary) 10%, var(--kpt-color-surface));
+    background: color-mix(in oklab, var(--kpt-color-primary) 10%, var(--kpt-color-surface));
   }
   .kpt-roadmap__row--group {
     background: var(--kpt-color-surface-variant, var(--kpt-color-surface));
@@ -7086,7 +8313,7 @@
     background: var(--kpt-color-surface-variant, var(--kpt-color-surface));
   }
   .kpt-roadmap__row--group:hover, .kpt-roadmap__row--group:hover .kpt-roadmap__label {
-    background: color-mix(in oklch, var(--kpt-color-primary) 10%, var(--kpt-color-surface-variant, var(--kpt-color-surface)));
+    background: color-mix(in oklab, var(--kpt-color-primary) 10%, var(--kpt-color-surface-variant, var(--kpt-color-surface)));
   }
   .kpt-roadmap__label {
     position: sticky;