@konce-pt/styles 0.11.2 → 0.14.0

package/index.css

@@ -1,16 +1,16 @@
 @charset "UTF-8";
 /*
- * @konce-pt/styles — bazowy CSS Koncept UI (źródło SCSS -> index.css).
+ * @konce-pt/styles - bazowy CSS Koncept UI (źródło SCSS -> index.css).
  * Kolejność warstw kaskady: reset < base < components < utilities.
  * Komponenty (@konce-pt/angular) deklarują style w warstwie `kpt.components`,
  * dzięki czemu aplikacja łatwo je nadpisuje bez wojny specyficzności.
  *
  * Wymaga wcześniejszego załadowania tokenów (custom properties --kpt-*).
- * Angular CLI — angular.json → styles[] (kolejność: tokeny, potem ten plik):
+ * Angular CLI - angular.json -> styles[] (kolejność: tokeny, potem ten plik):
  *   node_modules/@konce-pt/tokens/dist/css/tokens.css
  *   node_modules/@konce-pt/tokens/dist/css/tokens.dark.css
  *   node_modules/@konce-pt/styles/index.css
- * Vite/webpack — import '@konce-pt/tokens/css'; import '@konce-pt/tokens/css/dark'; import '@konce-pt/styles';
+ * Vite/webpack - import '@konce-pt/tokens/css'; import '@konce-pt/tokens/css/dark'; import '@konce-pt/styles';
  */
 @layer kpt.reset, kpt.base, kpt.components, kpt.utilities;
 @layer kpt.reset {
@@ -143,6 +143,30 @@
   }
 }
 @layer kpt.components {
+  .kpt-tooltip {
+    position: fixed;
+    z-index: var(--kpt-z-tooltip, 1400);
+    max-width: 16rem;
+    margin: 0;
+    padding: 0.35rem 0.6rem;
+    border: 0;
+    border-radius: var(--kpt-radius-sm, 0.25rem);
+    font-size: var(--kpt-font-size-xs, 0.75rem);
+    line-height: 1.4;
+    background: var(--kpt-color-on-surface);
+    color: var(--kpt-color-surface);
+    box-shadow: var(--kpt-elevation-2);
+    opacity: 0;
+    transition: opacity var(--kpt-motion-duration-fast, 120ms) var(--kpt-motion-easing-standard, ease);
+  }
+  .kpt-tooltip[data-visible] {
+    opacity: 1;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .kpt-tooltip {
+      transition: none;
+    }
+  }
   .kpt-rich-content ul,
   .kpt-rich-content ol {
     padding-inline-start: 1.5rem;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@konce-pt/styles",
-  "version": "0.11.2",
-  "description": "Base CSS for Koncept UI — reset, cascade @layer ordering and neutral light/dark theme (SCSS source).",
+  "version": "0.14.0",
+  "description": "Base CSS for Koncept UI - reset, cascade @layer ordering and neutral light/dark theme (SCSS source).",
   "license": "MIT",
   "author": "konce.pt",
   "homepage": "https://ui.konce.pt/",
@@ -52,13 +52,14 @@
     "src"
   ],
   "peerDependencies": {
-    "@konce-pt/tokens": "0.11.2"
+    "@konce-pt/tokens": "0.14.0"
   },
   "devDependencies": {
     "sass": "^1.77.0"
   },
   "scripts": {
     "build": "sass src/index.scss:index.css --no-source-map --style=expanded && node scripts/build-components.mjs",
+    "lint": "eslint .",
     "clean": "node -e \"require('fs').rmSync('index.css',{force:true});require('fs').rmSync('components.css',{force:true})\""
   }
 }

package/src/index.scss

@@ -1,15 +1,15 @@
 /*
- * @konce-pt/styles — bazowy CSS Koncept UI (źródło SCSS -> index.css).
+ * @konce-pt/styles - bazowy CSS Koncept UI (źródło SCSS -> index.css).
  * Kolejność warstw kaskady: reset < base < components < utilities.
  * Komponenty (@konce-pt/angular) deklarują style w warstwie `kpt.components`,
  * dzięki czemu aplikacja łatwo je nadpisuje bez wojny specyficzności.
  *
  * Wymaga wcześniejszego załadowania tokenów (custom properties --kpt-*).
- * Angular CLI — angular.json → styles[] (kolejność: tokeny, potem ten plik):
+ * Angular CLI - angular.json -> styles[] (kolejność: tokeny, potem ten plik):
  *   node_modules/@konce-pt/tokens/dist/css/tokens.css
  *   node_modules/@konce-pt/tokens/dist/css/tokens.dark.css
  *   node_modules/@konce-pt/styles/index.css
- * Vite/webpack — import '@konce-pt/tokens/css'; import '@konce-pt/tokens/css/dark'; import '@konce-pt/styles';
+ * Vite/webpack - import '@konce-pt/tokens/css'; import '@konce-pt/tokens/css/dark'; import '@konce-pt/styles';
  */
 @use 'sass:list';
 
@@ -101,21 +101,21 @@
     border-radius: var(--kpt-radius-sm, 0.25rem);
   }
 
-  // ── Paski przewijania ──
+  // -- 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,
+  // (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
+  // `::-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.
+  // 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).
@@ -153,7 +153,7 @@
 
   // 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
+  // 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 {
@@ -175,7 +175,7 @@
       width: var(--kpt-scrollbar-button-size);
     }
 
-    // Po jednej strzałce na koniec — bez par „góra+dół” przy każdej krawędzi, które
+    // 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,
@@ -203,9 +203,33 @@
 }
 
 @layer kpt.components {
-  // Treść zapisana w `kpt-rich-text` i renderowana poza edytorem — HTML z `value` nie niesie klas,
+  // Dymek `kptTooltip` / `KptTooltip` (oba porty). Element powstaje w JS poza drzewem komponentu,
+  // więc jego styl mieszka tutaj, w warstwie - aplikacja nadpisuje go bez `!important`. Inline
+  // zostają tylko `position: fixed` i współrzędne, bez których dymek nie stanąłby przy hoście.
+  .kpt-tooltip {
+    position: fixed;
+    z-index: var(--kpt-z-tooltip, 1400);
+    max-width: 16rem;
+    margin: 0;
+    padding: 0.35rem 0.6rem;
+    border: 0;
+    border-radius: var(--kpt-radius-sm, 0.25rem);
+    font-size: var(--kpt-font-size-xs, 0.75rem);
+    line-height: 1.4;
+    background: var(--kpt-color-on-surface);
+    color: var(--kpt-color-surface);
+    box-shadow: var(--kpt-elevation-2);
+    opacity: 0;
+    transition: opacity var(--kpt-motion-duration-fast, 120ms) var(--kpt-motion-easing-standard, ease);
+
+    &[data-visible] { opacity: 1; }
+
+    @media (prefers-reduced-motion: reduce) { transition: none; }
+  }
+
+  // Treść zapisana w `kpt-rich-text` i renderowana poza edytorem - HTML z `value` nie niesie klas,
   // więc opakuj go w `.kpt-rich-content`, żeby listy wyglądały tak samo jak w edytorze.
-  // Znaczniki cyklują co 3 poziomy (przeglądarka robi to sama tylko dla `ul`), do 6. poziomu —
+  // Znaczniki cyklują co 3 poziomy (przeglądarka robi to sama tylko dla `ul`), do 6. poziomu -
   // tyle pozwala domyślny `maxListLevel`. Trzymaj zgodnie z `rich-text.component.scss`.
   .kpt-rich-content {
     ul,