@konce-pt/styles 0.10.0 → 0.11.0

package/components.css

@@ -4237,6 +4237,8 @@
     display: inline-flex;
     cursor: pointer;
     touch-action: none;
+    user-select: none;
+    -webkit-user-select: none;
     outline: none;
     border-radius: 50%;
   }
@@ -4252,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;
   }
 }
 
@@ -6082,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);
@@ -6139,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 {
@@ -7187,7 +7193,9 @@
     color: var(--kpt-color-on-surface);
   }
   .kpt-toast-container__live {
-    position: absolute;
+    position: fixed;
+    inset-block-start: 0;
+    inset-inline-start: 0;
     width: 1px;
     height: 1px;
     margin: -1px;

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.10.0",
+  "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.10.0"
+    "@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 {