@konce-pt/styles 0.9.1 → 0.11.0

package/components.css

@@ -974,6 +974,17 @@
   .kpt-autocomplete-host {
     display: block;
   }
+  .kpt-autocomplete__live {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
   .kpt-autocomplete__input {
     display: block;
     width: 100%;
@@ -1087,7 +1098,7 @@
     box-shadow: 0 0 0 2px var(--kpt-color-surface);
   }
   .kpt-avatar-group__item:not(:first-child) {
-    margin-left: -0.6rem;
+    margin-inline-start: -0.6rem;
   }
   .kpt-avatar-group__more {
     align-items: center;
@@ -1110,8 +1121,8 @@
     height: 3rem;
   }
   .kpt-avatar-group__more[data-size=xl] {
-    width: 3.5rem;
-    height: 3.5rem;
+    width: 4rem;
+    height: 4rem;
   }
 }
 
@@ -1193,19 +1204,19 @@
   }
   .kpt-badge[data-variant=success] {
     --_bg: var(--kpt-color-success);
-    --_fg: var(--kpt-color-surface);
+    --_fg: var(--kpt-color-success-contrast);
   }
   .kpt-badge[data-variant=danger] {
     --_bg: var(--kpt-color-danger);
-    --_fg: var(--kpt-color-on-danger);
+    --_fg: var(--kpt-color-danger-contrast);
   }
   .kpt-badge[data-variant=warning] {
     --_bg: var(--kpt-color-warning);
-    --_fg: var(--kpt-color-surface);
+    --_fg: var(--kpt-color-warning-contrast);
   }
   .kpt-badge[data-variant=info] {
     --_bg: var(--kpt-color-info);
-    --_fg: var(--kpt-color-surface);
+    --_fg: var(--kpt-color-info-contrast);
   }
   .kpt-badge--dot {
     min-width: 0;
@@ -1220,6 +1231,17 @@
     transform: translate(35%, -35%);
     box-shadow: 0 0 0 2px var(--kpt-color-surface);
   }
+  .kpt-badge__label {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
 }
 
 /* src/lib/bottom-sheet/bottom-sheet.component.scss */
@@ -1231,7 +1253,7 @@
     position: fixed;
     inset: 0;
     z-index: var(--kpt-z-overlay, 1000);
-    background: color-mix(in oklch, black 45%, transparent);
+    background: var(--kpt-color-overlay-scrim);
     opacity: 0;
     visibility: hidden;
     transition: opacity 0.2s, visibility 0.2s;
@@ -1294,11 +1316,21 @@
     display: block;
   }
   .kpt-breadcrumb {
+    font-size: var(--kpt-font-size-sm, 0.875rem);
+  }
+  .kpt-breadcrumb__list {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     gap: 0.4rem;
-    font-size: var(--kpt-font-size-sm, 0.875rem);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .kpt-breadcrumb__item {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
   }
   .kpt-breadcrumb__link {
     color: var(--kpt-color-on-surface-muted);
@@ -1673,6 +1705,7 @@
     display: block;
   }
   .kpt-carousel {
+    --_kpt-carousel-dir: 1;
     position: relative;
     border-radius: var(--kpt-radius-lg, 0.75rem);
     overflow: hidden;
@@ -1710,32 +1743,52 @@
   .kpt-carousel__nav--next {
     inset-inline-end: 0.5rem;
   }
-  .kpt-carousel__nav:hover:not(:disabled) {
+  .kpt-carousel__nav:hover:not([aria-disabled=true]) {
     background: var(--kpt-color-surface);
   }
-  .kpt-carousel__nav:disabled {
+  .kpt-carousel__nav[aria-disabled=true] {
     opacity: 0.4;
     cursor: not-allowed;
   }
   .kpt-carousel__dots {
     position: absolute;
-    inset-block-end: 0.6rem;
+    inset-block-end: 0.1rem;
     inset-inline: 0;
     display: flex;
     justify-content: center;
-    gap: 0.4rem;
   }
   .kpt-carousel__dot {
+    display: grid;
+    place-items: center;
+    width: 1.5rem;
+    height: 1.5rem;
+    padding: 0;
+    border: 0;
+    border-radius: 50%;
+    background: none;
+    cursor: pointer;
+  }
+  .kpt-carousel__dot::before {
+    content: "";
     width: 0.5rem;
     height: 0.5rem;
-    border: 0;
     border-radius: 50%;
     background: color-mix(in oklch, var(--kpt-color-on-surface) 40%, transparent);
-    cursor: pointer;
   }
-  .kpt-carousel__dot.is-active {
+  .kpt-carousel__dot.is-active::before {
     background: var(--kpt-color-primary);
   }
+  .kpt-carousel:dir(rtl) {
+    --_kpt-carousel-dir: -1;
+  }
+  .kpt-carousel:dir(rtl) .kpt-carousel__nav .kpt-icon-host {
+    transform: scaleX(-1);
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .kpt-carousel__track {
+      transition: none;
+    }
+  }
 }
 
 /* src/lib/checkbox/checkbox.component.scss */
@@ -1782,13 +1835,28 @@
     opacity: 0;
     transition: opacity var(--kpt-motion-duration-fast, 120ms) var(--kpt-motion-easing-standard);
   }
-  .kpt-checkbox__input:checked + .kpt-checkbox__box {
+  .kpt-checkbox__dash {
+    display: none;
+    width: 0.9rem;
+    height: 0.9rem;
+    fill: none;
+    stroke: var(--kpt-color-on-primary);
+    stroke-width: 2.25;
+    stroke-linecap: round;
+  }
+  .kpt-checkbox__input:checked + .kpt-checkbox__box, .kpt-checkbox__input:indeterminate + .kpt-checkbox__box {
     background: var(--kpt-color-primary);
     border-color: var(--kpt-color-primary);
   }
   .kpt-checkbox__input:checked + .kpt-checkbox__box .kpt-checkbox__check {
     opacity: 1;
   }
+  .kpt-checkbox__input:indeterminate + .kpt-checkbox__box .kpt-checkbox__check {
+    display: none;
+  }
+  .kpt-checkbox__input:indeterminate + .kpt-checkbox__box .kpt-checkbox__dash {
+    display: block;
+  }
   .kpt-checkbox__input:focus-visible + .kpt-checkbox__box {
     outline: var(--kpt-border-width-medium, 2px) solid var(--kpt-color-focus-ring);
     outline-offset: 2px;
@@ -1878,6 +1946,21 @@
 
 /* src/lib/chips-input/chips-input.component.scss */
 @layer kpt.components {
+  .kpt-chips-input__list,
+  .kpt-chips-input__item {
+    display: contents;
+  }
+  .kpt-chips-input__live {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
   .kpt-chips-input-host {
     display: block;
   }
@@ -2582,6 +2665,17 @@
   .kpt-date-range__clear:hover {
     color: var(--kpt-color-on-surface);
   }
+  .kpt-calendar__live {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
   .kpt-calendar {
     width: 17rem;
     padding: var(--kpt-space-3, 0.75rem);
@@ -2655,6 +2749,10 @@
   .kpt-calendar__day:hover:not(:disabled) {
     background: var(--kpt-color-muted);
   }
+  .kpt-calendar__day:disabled {
+    opacity: 0.3;
+    cursor: not-allowed;
+  }
   .kpt-calendar__day--muted {
     color: var(--kpt-color-on-surface-muted);
     opacity: 0.5;
@@ -3229,7 +3327,7 @@
     position: fixed;
     inset: 0;
     z-index: var(--kpt-z-overlay, 1100);
-    background: color-mix(in oklch, black 45%, transparent);
+    background: var(--kpt-color-overlay-scrim);
     opacity: 0;
     visibility: hidden;
     transition: opacity 0.2s, visibility 0.2s;
@@ -3507,6 +3605,13 @@
     opacity: 0.6;
     cursor: not-allowed;
   }
+  .kpt-file-upload__zone[data-invalid] {
+    border-color: var(--kpt-color-danger);
+  }
+  .kpt-file-upload__zone:focus-visible {
+    outline: var(--kpt-border-width-medium, 2px) solid var(--kpt-color-focus-ring);
+    outline-offset: 2px;
+  }
   .kpt-file-upload__icon {
     font-size: 1.75rem;
     color: var(--kpt-color-on-surface-muted);
@@ -3683,20 +3788,21 @@
     height: 2.25rem;
     border: 0;
     border-radius: 999px;
-    background: color-mix(in oklch, black 45%, transparent);
-    color: #fff;
+    background: color-mix(in oklch, var(--kpt-color-surface) 85%, transparent);
+    color: var(--kpt-color-on-surface);
+    box-shadow: var(--kpt-elevation-2);
     cursor: pointer;
   }
   .kpt-galleria__nav--prev {
-    left: var(--kpt-space-2, 0.5rem);
+    inset-inline-start: var(--kpt-space-2, 0.5rem);
   }
   .kpt-galleria__nav--next {
-    right: var(--kpt-space-2, 0.5rem);
+    inset-inline-end: var(--kpt-space-2, 0.5rem);
   }
-  .kpt-galleria__nav:hover:not(:disabled) {
-    background: color-mix(in oklch, black 65%, transparent);
+  .kpt-galleria__nav:hover:not([aria-disabled=true]) {
+    background: var(--kpt-color-surface);
   }
-  .kpt-galleria__nav:disabled {
+  .kpt-galleria__nav[aria-disabled=true] {
     opacity: 0.4;
     cursor: default;
   }
@@ -3733,6 +3839,20 @@
     opacity: 1;
     border-color: var(--kpt-color-primary);
   }
+  .kpt-galleria:dir(rtl) .kpt-galleria__nav .kpt-icon-host {
+    transform: scaleX(-1);
+  }
+  .kpt-galleria__live {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
 }
 
 /* src/lib/icon/icon.component.scss */
@@ -3855,6 +3975,11 @@
     display: block;
   }
   .kpt-image--preview {
+    padding: 0;
+    border: 0;
+    background: none;
+    font: inherit;
+    color: inherit;
     cursor: zoom-in;
   }
   .kpt-image__mask {
@@ -3863,35 +3988,52 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    color: #fff;
-    font-size: 1.5rem;
-    background: color-mix(in oklch, black 40%, transparent);
+    font-size: 1.25rem;
+    background: var(--kpt-color-overlay-scrim);
     opacity: 0;
     transition: opacity 0.2s;
   }
-  .kpt-image--preview:hover .kpt-image__mask {
+  .kpt-image__mask .kpt-icon-host {
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 999px;
+    background: var(--kpt-color-surface);
+    color: var(--kpt-color-on-surface);
+    box-shadow: var(--kpt-elevation-2);
+  }
+  .kpt-image--preview:hover .kpt-image__mask, .kpt-image--preview:focus-visible .kpt-image__mask {
     opacity: 1;
   }
   .kpt-image__overlay {
-    position: fixed;
-    inset: 0;
-    z-index: calc(var(--kpt-z-overlay, 1000) + 5);
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    max-width: none;
+    max-height: none;
+    margin: 0;
+    padding: var(--kpt-space-6, 1.5rem);
+    border: 0;
+    background: transparent;
+    cursor: zoom-out;
+  }
+  .kpt-image__overlay[open] {
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: var(--kpt-space-6, 1.5rem);
-    background: color-mix(in oklch, black 80%, transparent);
-    cursor: zoom-out;
+  }
+  .kpt-image__overlay::backdrop {
+    background: var(--kpt-color-overlay-scrim);
   }
   .kpt-image__full {
     max-width: 90vw;
     max-height: 90vh;
     border-radius: var(--kpt-radius-md, 0.5rem);
+    cursor: default;
   }
   .kpt-image__close {
     position: absolute;
-    top: var(--kpt-space-4, 1rem);
-    right: var(--kpt-space-4, 1rem);
+    inset-block-start: var(--kpt-space-4, 1rem);
+    inset-inline-end: var(--kpt-space-4, 1rem);
     display: inline-flex;
     width: 2.5rem;
     height: 2.5rem;
@@ -3899,12 +4041,13 @@
     justify-content: center;
     border: 0;
     border-radius: 999px;
-    background: color-mix(in oklch, white 15%, transparent);
-    color: #fff;
+    background: var(--kpt-color-surface);
+    color: var(--kpt-color-on-surface);
+    box-shadow: var(--kpt-elevation-2);
     cursor: pointer;
   }
   .kpt-image__close:hover {
-    background: color-mix(in oklch, white 25%, transparent);
+    background: var(--kpt-color-muted);
   }
 }
 
@@ -4094,6 +4237,8 @@
     display: inline-flex;
     cursor: pointer;
     touch-action: none;
+    user-select: none;
+    -webkit-user-select: none;
     outline: none;
     border-radius: 50%;
   }
@@ -4109,12 +4254,12 @@
   }
   .kpt-knob__value {
     stroke: var(--kpt-color-primary);
-    transition: stroke-dashoffset 0.1s;
   }
   .kpt-knob__text {
     fill: var(--kpt-color-on-surface);
     font-size: var(--kpt-font-size-lg, 1.125rem);
     font-weight: var(--kpt-font-weight-semibold, 600);
+    font-variant-numeric: tabular-nums;
   }
 }
 
@@ -4132,6 +4277,13 @@
   .kpt-listbox--invalid {
     border-color: var(--kpt-form-field-border-error);
   }
+  .kpt-listbox--disabled {
+    opacity: 0.6;
+  }
+  .kpt-listbox:has(.kpt-listbox__items:focus-visible) {
+    border-color: var(--kpt-form-field-border-focus);
+    box-shadow: 0 0 0 2px color-mix(in oklch, var(--kpt-form-field-border-focus) 30%, transparent);
+  }
   .kpt-listbox__filter {
     display: flex;
     align-items: center;
@@ -4155,6 +4307,9 @@
     overflow-y: auto;
     padding: var(--kpt-space-1, 0.25rem);
   }
+  .kpt-listbox__items:focus {
+    outline: none;
+  }
   .kpt-listbox__item {
     display: flex;
     align-items: center;
@@ -4170,15 +4325,18 @@
     text-align: left;
     cursor: pointer;
   }
-  .kpt-listbox__item:hover:not(:disabled) {
+  .kpt-listbox__item:hover:not([aria-disabled=true]) {
     background: var(--kpt-color-muted);
   }
+  .kpt-listbox__items:focus-visible .kpt-listbox__item.is-active {
+    box-shadow: inset 0 0 0 2px var(--kpt-form-field-border-focus);
+  }
   .kpt-listbox__item.is-selected {
     background: color-mix(in oklch, var(--kpt-color-primary) 12%, transparent);
     color: var(--kpt-color-primary);
     font-weight: var(--kpt-font-weight-medium, 500);
   }
-  .kpt-listbox__item:disabled {
+  .kpt-listbox__item[aria-disabled=true] {
     opacity: 0.5;
     cursor: not-allowed;
   }
@@ -4206,6 +4364,8 @@
     border-radius: var(--kpt-radius-md, 0.5rem);
   }
   .kpt-megamenu__top {
+    box-sizing: border-box;
+    text-decoration: none;
     display: inline-flex;
     align-items: center;
     gap: var(--kpt-space-2, 0.5rem);
@@ -4245,6 +4405,8 @@
     color: var(--kpt-color-on-surface-muted);
   }
   .kpt-megamenu__link {
+    box-sizing: border-box;
+    text-decoration: none;
     display: flex;
     align-items: center;
     gap: var(--kpt-space-2, 0.5rem);
@@ -4429,6 +4591,8 @@
     display: inline-flex;
   }
   .kpt-menubar__top {
+    box-sizing: border-box;
+    text-decoration: none;
     display: inline-flex;
     align-items: center;
     gap: var(--kpt-space-2, 0.5rem);
@@ -4459,6 +4623,8 @@
     box-shadow: var(--kpt-elevation-3);
   }
   .kpt-menubar__item {
+    box-sizing: border-box;
+    text-decoration: none;
     display: flex;
     align-items: center;
     gap: var(--kpt-space-2, 0.5rem);
@@ -5130,6 +5296,11 @@
     flex-direction: column;
     gap: var(--kpt-space-2, 0.5rem);
   }
+  .kpt-radio-group--horizontal {
+    flex-direction: row;
+    flex-wrap: wrap;
+    column-gap: var(--kpt-space-4, 1rem);
+  }
   .kpt-radio {
     display: inline-flex;
     position: relative;
@@ -5194,23 +5365,66 @@
     font-size: 1.4rem;
   }
   .kpt-rating__star {
+    position: relative;
     display: inline-flex;
-    border: 0;
-    background: none;
     padding: 0.1rem;
-    cursor: pointer;
     color: var(--kpt-color-border-strong);
     transition: color var(--kpt-motion-duration-fast, 120ms) var(--kpt-motion-easing-standard);
   }
-  .kpt-rating__star.is-filled {
+  .kpt-rating__star[data-fill=full] {
     color: var(--kpt-color-warning);
   }
-  .kpt-rating__star.is-filled svg {
+  .kpt-rating__star[data-fill=full] svg {
     fill: currentColor;
   }
-  .kpt-rating__star:disabled {
+  .kpt-rating__fill {
+    position: absolute;
+    inset: 0;
+    display: none;
+    padding: inherit;
+    color: var(--kpt-color-warning);
+    clip-path: inset(0 50% 0 0);
+    pointer-events: none;
+  }
+  .kpt-rating__fill svg {
+    fill: currentColor;
+  }
+  .kpt-rating__star[data-fill=half] > .kpt-rating__fill {
+    display: inline-flex;
+  }
+  .kpt-rating__fill:dir(rtl) {
+    clip-path: inset(0 0 0 50%);
+  }
+  .kpt-rating__hit {
+    position: absolute;
+    inset-block: 0;
+    padding: 0;
+    border: 0;
+    background: none;
+    cursor: pointer;
+  }
+  .kpt-rating__hit--full {
+    inset-inline: 0;
+  }
+  .kpt-rating__hit--start {
+    inset-inline-start: 0;
+    width: 50%;
+  }
+  .kpt-rating__hit--end {
+    inset-inline-end: 0;
+    width: 50%;
+  }
+  .kpt-rating__hit[aria-disabled=true] {
     cursor: default;
   }
+  .kpt-rating__hit:focus-visible {
+    outline: var(--kpt-border-width-medium, 2px) solid var(--kpt-form-field-border-focus);
+    outline-offset: 1px;
+    border-radius: var(--kpt-radius-sm, 0.25rem);
+  }
+  .kpt-rating--disabled {
+    opacity: 0.6;
+  }
 }
 
 /* src/lib/rich-text/rich-text.component.scss */
@@ -5498,6 +5712,50 @@
     border-radius: var(--kpt-radius-md, 0.5rem);
     box-shadow: var(--kpt-elevation-3);
   }
+  .kpt-rt-link {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    gap: var(--kpt-space-2, 0.5rem);
+    width: min(22rem, 90vw);
+    padding: var(--kpt-space-3, 0.75rem);
+    background: var(--kpt-color-surface-raised);
+    border: var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);
+    border-radius: var(--kpt-radius-md, 0.5rem);
+    box-shadow: var(--kpt-elevation-3);
+    font-size: var(--kpt-font-size-sm, 0.875rem);
+  }
+  .kpt-rt-link__label {
+    grid-column: 1/-1;
+    color: var(--kpt-color-on-surface-muted);
+  }
+  .kpt-rt-link__input {
+    min-width: 0;
+    height: 2rem;
+    padding-inline: var(--kpt-space-2, 0.5rem);
+    border: var(--kpt-border-width-thin, 1px) solid var(--kpt-form-field-border);
+    border-radius: var(--kpt-radius-sm, 0.25rem);
+    background: var(--kpt-form-field-bg);
+    color: var(--kpt-form-field-text);
+    font: inherit;
+  }
+  .kpt-rt-link__input:focus-visible {
+    outline: none;
+    border-color: var(--kpt-form-field-border-focus);
+  }
+  .kpt-rt-link__apply {
+    height: 2rem;
+    padding-inline: var(--kpt-space-3, 0.75rem);
+    border: 0;
+    border-radius: var(--kpt-radius-sm, 0.25rem);
+    background: var(--kpt-color-primary);
+    color: var(--kpt-color-on-primary);
+    font: inherit;
+    cursor: pointer;
+  }
+  .kpt-rt-link__apply:focus-visible {
+    outline: var(--kpt-border-width-medium, 2px) solid var(--kpt-color-focus-ring);
+    outline-offset: 2px;
+  }
   .kpt-rich-text__swatches {
     display: grid;
     grid-template-columns: repeat(7, 1fr);
@@ -5709,8 +5967,8 @@
   }
   .kpt-scroll-top {
     position: fixed;
-    right: var(--kpt-space-6, 1.5rem);
-    bottom: var(--kpt-space-6, 1.5rem);
+    inset-inline-end: var(--kpt-space-6, 1.5rem);
+    inset-block-end: var(--kpt-space-6, 1.5rem);
     z-index: var(--kpt-z-overlay, 1000);
     display: inline-flex;
     align-items: center;
@@ -5736,6 +5994,12 @@
   .kpt-scroll-top:hover {
     background: var(--kpt-color-primary-hover, var(--kpt-color-primary));
   }
+  @media (prefers-reduced-motion: reduce) {
+    .kpt-scroll-top {
+      transition: none;
+      transform: none;
+    }
+  }
 }
 
 /* src/lib/select/select.component.scss */
@@ -5820,6 +6084,7 @@
     transform: rotate(180deg);
   }
   .kpt-select__panel {
+    max-width: calc(100vw - 2 * var(--kpt-space-4, 1rem));
     background: var(--kpt-color-surface-raised);
     border: var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);
     border-radius: var(--kpt-radius-md, 0.5rem);
@@ -5877,8 +6142,11 @@
   .kpt-select__option-label {
     flex: 1;
     min-width: 0;
+    overflow-wrap: anywhere;
   }
   .kpt-select__option-tick {
+    flex-shrink: 0;
+    margin-inline-start: var(--kpt-space-2, 0.5rem);
     color: var(--kpt-color-primary);
   }
   .kpt-select__check {
@@ -5936,16 +6204,21 @@
     overflow-y: auto;
   }
   .kpt-sidenav__scroll a {
-    display: block;
+    display: flex;
+    align-items: center;
+    gap: var(--kpt-space-3, 0.75rem);
     padding: var(--kpt-space-2, 0.5rem) var(--kpt-space-3, 0.75rem);
     border-radius: var(--kpt-radius-md, 0.5rem);
     color: inherit;
     text-decoration: none;
     font-size: var(--kpt-font-size-sm, 0.875rem);
   }
-  .kpt-sidenav__scroll a:hover {
+  .kpt-sidenav__scroll a:hover, .kpt-sidenav__scroll a[aria-current=page] {
     background: var(--kpt-color-muted);
   }
+  .kpt-sidenav__scroll a[aria-current=page] {
+    font-weight: var(--kpt-font-weight-medium, 500);
+  }
   .kpt-sidenav [kptSidenavFooter] {
     flex: 0 0 auto;
     box-sizing: border-box;
@@ -5961,7 +6234,7 @@
   }
   .kpt-skeleton {
     display: block;
-    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: linear-gradient(90deg, var(--kpt-color-muted) 25%, color-mix(in oklab, var(--kpt-color-muted) 45%, var(--kpt-color-surface)) 50%, var(--kpt-color-muted) 75%);
     background-size: 200% 100%;
     border-radius: var(--kpt-radius-md, 0.5rem);
     animation: kpt-skeleton-shimmer 1.4s ease-in-out infinite;
@@ -6049,6 +6322,17 @@
     opacity: 0.5;
     cursor: not-allowed;
   }
+  .kpt-slider__sr {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
   .kpt-slider__value {
     min-width: 2.5rem;
     text-align: end;
@@ -6156,11 +6440,14 @@
     gap: var(--kpt-space-2, 0.5rem);
     opacity: 0;
     pointer-events: none;
-    transition: opacity 0.15s ease;
+    visibility: hidden;
+    transition: opacity 0.15s ease, visibility 0s linear 0.15s;
   }
   .kpt-speed-dial.is-open .kpt-speed-dial__actions {
     opacity: 1;
     pointer-events: auto;
+    visibility: visible;
+    transition: opacity 0.15s ease, visibility 0s;
   }
   .kpt-speed-dial[data-direction=up] .kpt-speed-dial__actions {
     flex-direction: column-reverse;
@@ -6241,6 +6528,17 @@
       animation-duration: 1.4s;
     }
   }
+  .kpt-spinner__label {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
 }
 
 /* src/lib/split-button/split-button.component.scss */
@@ -6262,6 +6560,22 @@
     --_fg: var(--kpt-color-on-muted);
     --_bg-hover: var(--kpt-color-muted-hover);
   }
+  .kpt-split-button[data-variant=outline] {
+    --_bg: transparent;
+    --_fg: var(--kpt-button-outline-fg);
+    --_bg-hover: var(--kpt-button-outline-bg-hover);
+    --_divider: var(--kpt-button-outline-border);
+    border: var(--kpt-border-width-thin, 1px) solid var(--kpt-button-outline-border);
+  }
+  .kpt-split-button[data-variant=outline] .kpt-split-button__main,
+  .kpt-split-button[data-variant=outline] .kpt-split-button__toggle {
+    height: calc(2.5rem - 2 * var(--kpt-border-width-thin, 1px));
+  }
+  .kpt-split-button[data-variant=text] {
+    --_bg: transparent;
+    --_fg: var(--kpt-button-text-fg);
+    --_bg-hover: var(--kpt-button-text-bg-hover);
+  }
   .kpt-split-button__main, .kpt-split-button__toggle {
     border: 0;
     background: var(--_bg);
@@ -6304,7 +6618,7 @@
     align-items: center;
     justify-content: center;
     width: 2.25rem;
-    border-inline-start: 1px solid color-mix(in oklch, var(--_fg) 25%, transparent);
+    border-inline-start: 1px solid var(--_divider, color-mix(in oklch, var(--_fg) 25%, transparent));
   }
   .kpt-split-button__panel {
     min-width: 11rem;
@@ -6387,6 +6701,7 @@
 @layer kpt.components {
   .kpt-splitter-host {
     display: block;
+    height: 100%;
   }
   .kpt-splitter {
     display: flex;
@@ -6704,6 +7019,14 @@
     opacity: 0.6;
     background: var(--kpt-color-surface-variant);
   }
+  .kpt-textarea__counter {
+    display: block;
+    margin-top: var(--kpt-space-1, 0.25rem);
+    text-align: end;
+    font-size: var(--kpt-font-size-xs, 0.75rem);
+    font-variant-numeric: tabular-nums;
+    color: var(--kpt-color-on-surface-muted);
+  }
 }
 
 /* src/lib/timeline/timeline.component.scss */
@@ -6842,6 +7165,21 @@
     font-weight: var(--kpt-font-weight-semibold, 600);
     margin-bottom: 0.1rem;
   }
+  .kpt-toast__action {
+    flex: none;
+    align-self: center;
+    padding: var(--kpt-space-1, 0.25rem) var(--kpt-space-2, 0.5rem);
+    border: 0;
+    border-radius: var(--kpt-radius-sm, 0.25rem);
+    background: none;
+    color: var(--kpt-color-primary);
+    font: inherit;
+    font-weight: var(--kpt-font-weight-semibold, 600);
+    cursor: pointer;
+  }
+  .kpt-toast__action:hover {
+    background: var(--kpt-color-muted);
+  }
   .kpt-toast__close {
     background: none;
     border: 0;
@@ -6854,6 +7192,19 @@
   .kpt-toast__close:hover {
     color: var(--kpt-color-on-surface);
   }
+  .kpt-toast-container__live {
+    position: fixed;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
   @keyframes kpt-toast-in {
     from {
       opacity: 0;
@@ -6919,6 +7270,13 @@
     margin: 0;
     padding: 0;
   }
+  .kpt-tree__node {
+    outline: none;
+  }
+  .kpt-tree__node:focus-visible > .kpt-tree__row {
+    outline: var(--kpt-border-width-medium, 2px) solid var(--kpt-color-focus-ring);
+    outline-offset: -2px;
+  }
   .kpt-tree__row {
     display: flex;
     align-items: center;

package/index.css

@@ -85,6 +85,62 @@
     outline-offset: 2px;
     border-radius: var(--kpt-radius-sm, 0.25rem);
   }
+  @supports not selector(::-webkit-scrollbar) {
+    * {
+      scrollbar-color: color-mix(in oklch, var(--kpt-scrollbar-thumb) var(--kpt-scrollbar-thumb-opacity), transparent) var(--kpt-scrollbar-track);
+      scrollbar-width: var(--kpt-scrollbar-width-keyword);
+    }
+  }
+  ::-webkit-scrollbar {
+    width: var(--kpt-scrollbar-size);
+    height: var(--kpt-scrollbar-size);
+    background: var(--kpt-scrollbar-track);
+  }
+  ::-webkit-scrollbar-track,
+  ::-webkit-scrollbar-corner {
+    background: var(--kpt-scrollbar-track);
+  }
+  ::-webkit-scrollbar-thumb {
+    background: color-mix(in oklch, var(--kpt-scrollbar-thumb) var(--kpt-scrollbar-thumb-opacity), transparent);
+    border-radius: var(--kpt-scrollbar-radius);
+  }
+  ::-webkit-scrollbar-thumb:hover {
+    background: color-mix(in oklch, var(--kpt-scrollbar-thumb-hover) var(--kpt-scrollbar-thumb-hover-opacity), transparent);
+  }
+  ::-webkit-scrollbar-thumb:active {
+    background: var(--kpt-scrollbar-thumb-hover);
+  }
+  ::-webkit-scrollbar-button {
+    --_kpt-scrollbar-arrow: color-mix(in oklch, var(--kpt-scrollbar-thumb) var(--kpt-scrollbar-thumb-opacity), transparent);
+    background-color: transparent;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: 60% 60%;
+  }
+  ::-webkit-scrollbar-button:hover {
+    --_kpt-scrollbar-arrow: color-mix(in oklch, var(--kpt-scrollbar-thumb-hover) var(--kpt-scrollbar-thumb-hover-opacity), transparent);
+  }
+  ::-webkit-scrollbar-button:vertical {
+    height: var(--kpt-scrollbar-button-size);
+  }
+  ::-webkit-scrollbar-button:horizontal {
+    width: var(--kpt-scrollbar-button-size);
+  }
+  ::-webkit-scrollbar-button:vertical:start:increment, ::-webkit-scrollbar-button:vertical:end:decrement, ::-webkit-scrollbar-button:horizontal:start:increment, ::-webkit-scrollbar-button:horizontal:end:decrement {
+    display: none;
+  }
+  ::-webkit-scrollbar-button:vertical:decrement {
+    background-image: conic-gradient(from 150deg at 50% 10%, var(--_kpt-scrollbar-arrow) 60deg, transparent 0);
+  }
+  ::-webkit-scrollbar-button:vertical:increment {
+    background-image: conic-gradient(from -30deg at 50% 90%, var(--_kpt-scrollbar-arrow) 60deg, transparent 0);
+  }
+  ::-webkit-scrollbar-button:horizontal:decrement {
+    background-image: conic-gradient(from 60deg at 10% 50%, var(--_kpt-scrollbar-arrow) 60deg, transparent 0);
+  }
+  ::-webkit-scrollbar-button:horizontal:increment {
+    background-image: conic-gradient(from 240deg at 90% 50%, var(--_kpt-scrollbar-arrow) 60deg, transparent 0);
+  }
 }
 @layer kpt.components {
   .kpt-rich-content ul,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@konce-pt/styles",
-  "version": "0.9.1",
+  "version": "0.11.0",
   "description": "Base CSS for Koncept UI — reset, cascade @layer ordering and neutral light/dark theme (SCSS source).",
   "license": "MIT",
   "author": "konce.pt",
@@ -52,7 +52,7 @@
     "src"
   ],
   "peerDependencies": {
-    "@konce-pt/tokens": "0.9.1"
+    "@konce-pt/tokens": "0.11.0"
   },
   "devDependencies": {
     "sass": "^1.77.0"

package/src/index.scss

@@ -100,6 +100,106 @@
     outline-offset: 2px;
     border-radius: var(--kpt-radius-sm, 0.25rem);
   }
+
+  // ── Paski przewijania ──
+  // Wygląd z tokenów `--kpt-scrollbar-*`: uchwyt w kolorze wiodącym (więc sam idzie za motywem
+  // ciemnym i za kolorem marki), tor bez tła, grubość 8px, strzałki wyłączone.
+  //
+  // Uchwyt nie ma pełnego koloru w spoczynku: w stockowej palecie kolor wiodący to prawie czerń
+  // (w ciemnym — biel) i pasek wyglądał jak przycisk główny. Mieszamy go z przezroczystością
+  // (40% spoczynek, 65% pod kursorem, pełny przy przeciąganiu) — przezroczystość składa się z tłem,
+  // więc ten sam token daje szarość w stocku, odcień marki z kolorem marki i dobrą jasność
+  // w obu motywach bez osobnych wartości dla ciemnego.
+  //
+  // Dwie drogi, bo przeglądarki nie mają jednej. Chromium i Safari stylują pseudoelementy
+  // `::-webkit-scrollbar*` — tylko tam da się ustawić grubość w pikselach i strzałki. Firefox zna
+  // wyłącznie standard: `scrollbar-color` i `scrollbar-width` (auto/thin/none). Standard trzeba
+  // podać TYLKO tam, gdzie pseudoelementów nie ma: Chromium od wersji 121 też go rozumie i wtedy
+  // całkowicie ignoruje `::-webkit-scrollbar` — grubość i strzałki znikałyby po cichu.
+  //
+  // Reguła żyje w `kpt.base`, więc aplikacja nadpisuje ją bez wojny specyficzności: albo tokenami,
+  // albo własnym CSS-em (ten spoza warstw wygrywa z każdą regułą w warstwie).
+  @supports not selector(::-webkit-scrollbar) {
+    * {
+      scrollbar-color: color-mix(in oklch, var(--kpt-scrollbar-thumb) var(--kpt-scrollbar-thumb-opacity), transparent)
+        var(--kpt-scrollbar-track);
+      scrollbar-width: var(--kpt-scrollbar-width-keyword);
+    }
+  }
+
+  ::-webkit-scrollbar {
+    width: var(--kpt-scrollbar-size);
+    height: var(--kpt-scrollbar-size);
+    background: var(--kpt-scrollbar-track);
+  }
+
+  ::-webkit-scrollbar-track,
+  ::-webkit-scrollbar-corner {
+    background: var(--kpt-scrollbar-track);
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: color-mix(in oklch, var(--kpt-scrollbar-thumb) var(--kpt-scrollbar-thumb-opacity), transparent);
+    border-radius: var(--kpt-scrollbar-radius);
+
+    &:hover {
+      background: color-mix(in oklch, var(--kpt-scrollbar-thumb-hover) var(--kpt-scrollbar-thumb-hover-opacity), transparent);
+    }
+
+    &:active {
+      background: var(--kpt-scrollbar-thumb-hover);
+    }
+  }
+
+  // Strzałki: rozmiar `--kpt-scrollbar-button-size` (0 = brak), trójkąt w kolorze uchwytu.
+  //
+  // Trójkąt to `conic-gradient` — wycinek koła o kącie 60° z wierzchołkiem przy krawędzi, przycięty
+  // do pola tła. Nie maska i nie obrazek SVG: Chromium nie stosuje `mask` na pseudoelementach paska
+  // (strzałka wychodziła pełnym kwadratem), a obrazek nie wziąłby barwy z tokenu.
+  ::-webkit-scrollbar-button {
+    --_kpt-scrollbar-arrow: color-mix(in oklch, var(--kpt-scrollbar-thumb) var(--kpt-scrollbar-thumb-opacity), transparent);
+    background-color: transparent;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: 60% 60%;
+
+    &:hover {
+      --_kpt-scrollbar-arrow: color-mix(in oklch, var(--kpt-scrollbar-thumb-hover) var(--kpt-scrollbar-thumb-hover-opacity), transparent);
+    }
+
+    &:vertical {
+      height: var(--kpt-scrollbar-button-size);
+    }
+
+    &:horizontal {
+      width: var(--kpt-scrollbar-button-size);
+    }
+
+    // Po jednej strzałce na koniec — bez par „góra+dół” przy każdej krawędzi, które
+    // Chromium dokłada, gdy styl strzałek w ogóle istnieje.
+    &:vertical:start:increment,
+    &:vertical:end:decrement,
+    &:horizontal:start:increment,
+    &:horizontal:end:decrement {
+      display: none;
+    }
+
+    &:vertical:decrement {
+      background-image: conic-gradient(from 150deg at 50% 10%, var(--_kpt-scrollbar-arrow) 60deg, transparent 0);
+    }
+
+    &:vertical:increment {
+      background-image: conic-gradient(from -30deg at 50% 90%, var(--_kpt-scrollbar-arrow) 60deg, transparent 0);
+    }
+
+    &:horizontal:decrement {
+      background-image: conic-gradient(from 60deg at 10% 50%, var(--_kpt-scrollbar-arrow) 60deg, transparent 0);
+    }
+
+    &:horizontal:increment {
+      background-image: conic-gradient(from 240deg at 90% 50%, var(--_kpt-scrollbar-arrow) 60deg, transparent 0);
+    }
+  }
 }
 
 @layer kpt.components {