@konce-pt/styles 0.16.1 → 0.18.0

package/README.md

@@ -4,7 +4,7 @@
 
 # Koncept UI - Base Styles
 
-**Base CSS for Koncept UI - reset, cascade layers and neutral light/dark theme.**
+**Base CSS for Koncept UI - reset, cascade layers and light/dark `color-scheme` switching.**
 
 [![npm version](https://img.shields.io/npm/v/@konce-pt/styles?color=%233b82f6&label=npm)](https://www.npmjs.com/package/@konce-pt/styles)
 [![minzipped size](https://img.shields.io/bundlephobia/minzip/@konce-pt/styles)](https://bundlephobia.com/package/@konce-pt/styles)
@@ -14,7 +14,9 @@
 
 ---
 
-The base stylesheet for [Koncept UI](https://www.npmjs.com/package/@konce-pt/angular): a modern reset, typography, and CSS **`@layer`** ordering (`kpt.reset, kpt.base, kpt.components, kpt.utilities`) so consumers can override styles without specificity wars. Built on top of [`@konce-pt/tokens`](https://www.npmjs.com/package/@konce-pt/tokens).
+The base stylesheet for [Koncept UI](https://www.npmjs.com/package/@konce-pt/angular): a modern reset, typography, and CSS **`@layer`** ordering (`kpt.reset, kpt.base, kpt.components, kpt.utilities`) so consumers can override styles without specificity wars. Built on top of [`@konce-pt/tokens`](https://www.npmjs.com/package/@konce-pt/tokens) - the colours of the light and dark theme come from there; this sheet switches `color-scheme` under `[data-theme="dark"]` and paints `body` from the tokens.
+
+It also ships a `:focus-visible` ring, token-driven scrollbars (`--kpt-scrollbar-*`), `.kpt-tooltip` and `.kpt-rich-content` (in `kpt.components`) and the utilities `.kpt-elevation-1..4` and `.kpt-visually-hidden` (in `kpt.utilities`).
 
 ## Installation
 
@@ -45,12 +47,23 @@ import '@konce-pt/tokens/css/dark';
 import '@konce-pt/styles';
 ```
 
-Or compose the SCSS source into your own build:
+Or compose the SCSS source into your own build (`pkg:` resolves the package `exports`; the Sass CLI
+needs `--pkg-importer=node`):
 
 ```scss
-@use '@konce-pt/styles/scss';
+@use 'pkg:@konce-pt/styles/scss';
 ```
 
+**Component styles for the React port** - `@konce-pt/react` renders the same `kpt-*` classes and
+needs their stylesheet:
+
+```ts
+import '@konce-pt/styles/components';
+```
+
+`components.css` is generated from the Angular component SCSS. The Angular package injects its
+component styles itself and does not need it.
+
 ## Layout
 
 Layout is a separate, optional package: [`@konce-pt/grid`](https://www.npmjs.com/package/@konce-pt/grid)
@@ -76,7 +89,7 @@ MIT © konce.pt
 
 ## Wersja polska
 
-Bazowy arkusz stylów [Koncept UI](https://www.npmjs.com/package/@konce-pt/angular): nowoczesny reset, typografia i warstwy CSS **`@layer`** (`kpt.reset, kpt.base, kpt.components, kpt.utilities`) - łatwe nadpisywanie bez wojen specyficzności. Bazuje na [`@konce-pt/tokens`](https://www.npmjs.com/package/@konce-pt/tokens); ładuj **po** tokenach.
+Bazowy arkusz stylów [Koncept UI](https://www.npmjs.com/package/@konce-pt/angular): nowoczesny reset, typografia i warstwy CSS **`@layer`** (`kpt.reset, kpt.base, kpt.components, kpt.utilities`) - łatwe nadpisywanie bez wojen specyficzności. Bazuje na [`@konce-pt/tokens`](https://www.npmjs.com/package/@konce-pt/tokens) (stamtąd pochodzą kolory motywu jasnego i ciemnego; ten arkusz przełącza `color-scheme` pod `[data-theme="dark"]`); ładuj **po** tokenach. W pakiecie są też pierścień `:focus-visible`, paski przewijania z tokenów `--kpt-scrollbar-*`, `.kpt-tooltip`, `.kpt-rich-content` oraz utility `.kpt-elevation-1..4` i `.kpt-visually-hidden`.
 
 **Angular CLI** - `angular.json -> styles[]` (najpierw tokeny, potem ten plik, na końcu Twój `src/styles.scss`):
 
@@ -91,6 +104,9 @@ Bazowy arkusz stylów [Koncept UI](https://www.npmjs.com/package/@konce-pt/angul
 
 **Vite/webpack** - `import '@konce-pt/tokens/css'; import '@konce-pt/tokens/css/dark'; import '@konce-pt/styles';`
 
+**Style komponentów dla portu React** - `import '@konce-pt/styles/components';` (`components.css`
+generowany z SCSS komponentów Angulara; paczka Angulara wstrzykuje swoje style sama i go nie potrzebuje).
+
 **Układ** to osobna, opcjonalna paczka [`@konce-pt/grid`](https://www.npmjs.com/package/@konce-pt/grid)
 (siatka mobile-first, flexbox, gap, order) - ładuj ją zaraz po tym arkuszu. Pisze do tej samej
 warstwy `kpt.utilities` i powtarza deklarację kolejności warstw, więc działa też bez tej paczki.

package/components.css

@@ -1858,6 +1858,7 @@
   }
   .kpt-carousel__viewport {
     overflow: hidden;
+    contain: inline-size;
   }
   .kpt-carousel__track {
     display: flex;
@@ -2484,6 +2485,9 @@
   .kpt-data-table__table thead tr:nth-child(2) th {
     top: var(--kpt-thead-offset, 0px);
   }
+  .kpt-data-table__table thead tr:nth-child(3) th {
+    top: var(--kpt-thead-offset-2, 0px);
+  }
   .kpt-data-table__table tfoot th,
   .kpt-data-table__table tfoot td {
     position: sticky;
@@ -2845,6 +2849,20 @@
   .kpt-data-table thead tr:nth-child(2) .kpt-data-table__hspacer {
     top: var(--kpt-thead-offset, 0px);
   }
+  .kpt-data-table thead tr:nth-child(3) .kpt-data-table__hspacer {
+    top: var(--kpt-thead-offset-2, 0px);
+  }
+  .kpt-data-table__group {
+    padding-block: var(--kpt-space-2, 0.5rem) !important;
+    text-align: center !important;
+    font-size: var(--kpt-font-size-xs, 0.75rem);
+    letter-spacing: 0.02em;
+    color: var(--kpt-color-on-surface-muted);
+    box-shadow: inset 0 calc(-1 * var(--kpt-border-width-thick, 2px)) 0 var(--kpt-color-border);
+  }
+  .kpt-data-table__group--empty {
+    box-shadow: none;
+  }
   .kpt-data-table tbody tr:last-child td {
     border-bottom: 0;
   }
@@ -4286,17 +4304,32 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    aspect-ratio: var(--kpt-galleria-aspect-ratio, 16/9);
     background: var(--kpt-color-muted);
     border-radius: var(--kpt-radius-md, 0.5rem);
     overflow: hidden;
+    isolation: isolate;
   }
   .kpt-galleria__image {
-    max-width: 100%;
-    max-height: 20rem;
+    position: relative;
+    z-index: 1;
     display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: var(--kpt-galleria-fit, cover);
+  }
+  .kpt-galleria__ghost {
+    position: absolute;
+    inset: 0;
+    z-index: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: var(--kpt-galleria-fit, cover);
+    pointer-events: none;
   }
   .kpt-galleria__nav {
     position: absolute;
+    z-index: 2;
     top: 50%;
     transform: translateY(-50%);
     display: inline-flex;
@@ -4324,12 +4357,41 @@
     opacity: 0.4;
     cursor: default;
   }
+  .kpt-galleria__strip {
+    --_fade-start: 0px;
+    --_fade-end: 0px;
+    position: relative;
+    margin-top: var(--kpt-space-2, 0.5rem);
+  }
+  .kpt-galleria__strip[data-scroll-start] {
+    --_fade-start: 2.5rem;
+  }
+  .kpt-galleria__strip[data-scroll-end] {
+    --_fade-end: 2.5rem;
+  }
   .kpt-galleria__thumbs {
     display: flex;
     gap: var(--kpt-space-2, 0.5rem);
-    margin-top: var(--kpt-space-2, 0.5rem);
     overflow-x: auto;
-    padding-bottom: var(--kpt-space-1, 0.25rem);
+    contain: inline-size;
+    padding-block: var(--kpt-space-1, 0.25rem);
+    scrollbar-width: none;
+    overscroll-behavior-x: contain;
+    cursor: grab;
+    mask-image: linear-gradient(to right, transparent, var(--kpt-color-text) var(--_fade-start), var(--kpt-color-text) calc(100% - var(--_fade-end)), transparent);
+  }
+  .kpt-galleria__thumbs::-webkit-scrollbar {
+    display: none;
+  }
+  .kpt-galleria__thumbs.is-dragging {
+    cursor: grabbing;
+    user-select: none;
+  }
+  .kpt-galleria__thumbs.is-dragging .kpt-galleria__thumb {
+    pointer-events: none;
+  }
+  .kpt-galleria:dir(rtl) .kpt-galleria__thumbs {
+    mask-image: linear-gradient(to left, transparent, var(--kpt-color-text) var(--_fade-start), var(--kpt-color-text) calc(100% - var(--_fade-end)), transparent);
   }
   .kpt-galleria__thumb {
     flex: none;
@@ -4349,6 +4411,7 @@
     height: 100%;
     object-fit: cover;
     display: block;
+    -webkit-user-drag: none;
   }
   .kpt-galleria__thumb:hover {
     opacity: 1;
@@ -4357,9 +4420,51 @@
     opacity: 1;
     border-color: var(--kpt-color-primary);
   }
-  .kpt-galleria:dir(rtl) .kpt-galleria__nav .kpt-icon-host {
+  .kpt-galleria__scroll {
+    position: absolute;
+    z-index: 1;
+    top: 50%;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.75rem;
+    height: 1.75rem;
+    padding: 0;
+    border: 0;
+    border-radius: 999px;
+    background: var(--kpt-color-surface);
+    color: var(--kpt-color-on-surface);
+    box-shadow: var(--kpt-elevation-2);
+    cursor: pointer;
+    opacity: 0;
+    pointer-events: none;
+    translate: 0 -50%;
+    scale: 0.7;
+    transition: opacity var(--kpt-motion-duration-base, 200ms) var(--kpt-motion-easing-standard), scale var(--kpt-motion-duration-base, 200ms) var(--kpt-motion-easing-standard);
+  }
+  .kpt-galleria__scroll--back {
+    inset-inline-start: calc(var(--kpt-space-1, 0.25rem) * -1);
+  }
+  .kpt-galleria__scroll--forward {
+    inset-inline-end: calc(var(--kpt-space-1, 0.25rem) * -1);
+  }
+  .kpt-galleria__scroll:hover {
+    background: var(--kpt-color-muted);
+  }
+  .kpt-galleria__strip[data-scroll-start] .kpt-galleria__scroll--back,
+  .kpt-galleria__strip[data-scroll-end] .kpt-galleria__scroll--forward {
+    opacity: 1;
+    pointer-events: auto;
+    scale: 1;
+  }
+  .kpt-galleria:dir(rtl) :is(.kpt-galleria__nav, .kpt-galleria__scroll) .kpt-icon-host {
     transform: scaleX(-1);
   }
+  @media (prefers-reduced-motion: reduce) {
+    .kpt-galleria__scroll {
+      transition: none;
+    }
+  }
   .kpt-galleria__live {
     position: absolute;
     width: 1px;
@@ -4563,8 +4668,8 @@
     background: var(--kpt-color-overlay-scrim);
   }
   .kpt-image__full {
-    max-width: 90vw;
-    max-height: 90vh;
+    max-width: var(--kpt-image-preview-max-width, 90vw);
+    max-height: var(--kpt-image-preview-max-height, 80vh);
     border-radius: var(--kpt-radius-md, 0.5rem);
     cursor: default;
   }
@@ -4630,6 +4735,27 @@
     opacity: 0.6;
     background-color: var(--kpt-color-surface-variant);
   }
+  .kpt-input-host[data-icon] {
+    position: relative;
+  }
+  .kpt-input-host[data-icon] .kpt-input__field {
+    padding-inline-start: calc(var(--kpt-space-3, 0.75rem) * 2 + 1rem);
+  }
+  .kpt-input__icon {
+    position: absolute;
+    z-index: 1;
+    inset-block: 0;
+    inset-inline-start: var(--kpt-space-3, 0.75rem);
+    display: flex;
+    height: 1rem;
+    margin-block: auto;
+    color: var(--kpt-form-field-placeholder);
+    font-size: 1rem;
+    pointer-events: none;
+  }
+  .kpt-input-host[data-icon]:has(.kpt-input__field:disabled) .kpt-input__icon {
+    opacity: 0.6;
+  }
   .kpt-input-host[data-speech] {
     position: relative;
   }
@@ -4646,6 +4772,57 @@
     inset-inline-end: var(--kpt-space-1, 0.25rem);
     gap: var(--kpt-space-1, 0.25rem);
   }
+  .kpt-input__field::-webkit-search-cancel-button {
+    appearance: none;
+    display: none;
+  }
+  .kpt-input-host[data-clear] {
+    position: relative;
+    --_clear-end: var(--kpt-space-1, 0.25rem);
+  }
+  .kpt-input-host[data-clear][data-speech] {
+    --_clear-end: 2.25rem;
+  }
+  .kpt-input-host[data-clear][data-speech=listening] {
+    --_clear-end: 4.25rem;
+  }
+  .kpt-input-host[data-clear] .kpt-input__field {
+    padding-inline-end: calc(var(--_clear-end) + 2rem);
+    transition-property: border-color, box-shadow, padding-inline-end;
+  }
+  .kpt-input__clear {
+    position: absolute;
+    inset-block: 0;
+    inset-inline-end: var(--_clear-end);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.75rem;
+    height: 1.75rem;
+    margin-block: auto;
+    padding: 0;
+    border: 0;
+    border-radius: var(--kpt-radius-full, 9999px);
+    background: transparent;
+    color: var(--kpt-form-field-placeholder);
+    font-size: 1rem;
+    cursor: pointer;
+    transition: color var(--kpt-motion-duration-fast, 120ms) var(--kpt-motion-easing-standard), background-color var(--kpt-motion-duration-fast, 120ms) var(--kpt-motion-easing-standard), scale calc(var(--_press-t, 0.45s) * var(--kpt-motion-scale, 1)) var(--_press-e, linear(0, 0.0884, 0.2807, 0.4973, 0.692, 0.8441, 0.9493, 1.013, 1.0446, 1.0542, 1.0506, 1.0406, 1.0288, 1.018, 1.0094, 1.0034, 0.9996, 0.9977, 0.9971, 0.9972, 0.9977, 0.9984, 0.999, 0.9994, 0.9998, 1, 1.0001, 1.0002, 1.0002, 1.0001, 1));
+  }
+  .kpt-input__clear:active:not(:disabled):not([aria-disabled=true]) {
+    --_press-t: 0.08s;
+    --_press-e: ease-out;
+    scale: 0.9;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .kpt-input__clear:active:not(:disabled):not([aria-disabled=true]) {
+      scale: none;
+    }
+  }
+  .kpt-input__clear:hover {
+    color: var(--kpt-form-field-text);
+    background: var(--kpt-color-surface-variant);
+  }
 }
 
 /* src/lib/input-mask/input-mask.component.scss */
@@ -8304,13 +8481,23 @@
     display: block;
   }
   .kpt-tabs__header {
-    position: relative;
     display: flex;
     gap: 0.25rem;
     border-bottom: var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);
   }
+  .kpt-tabs__list,
+  .kpt-tabs__links {
+    display: flex;
+    gap: 0.25rem;
+  }
+  .kpt-tabs__list {
+    position: relative;
+  }
   .kpt-tabs__tab {
     appearance: none;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--kpt-space-2, 0.5rem);
     border: 0;
     background: none;
     padding: 0.65rem 1rem;
@@ -8321,7 +8508,7 @@
     cursor: pointer;
     transition: color var(--kpt-motion-duration-fast, 120ms) var(--kpt-motion-easing-standard);
   }
-  .kpt-tabs__tab:hover:not(:disabled):not(.is-active) {
+  .kpt-tabs__tab:hover:not(:disabled, [aria-disabled=true], .is-active) {
     color: var(--kpt-color-on-surface);
   }
   .kpt-tabs__tab.is-active {
@@ -8331,6 +8518,32 @@
     opacity: 0.45;
     cursor: not-allowed;
   }
+  .kpt-tabs__link {
+    text-decoration: none;
+  }
+  .kpt-tabs__link[aria-disabled=true] {
+    opacity: 0.45;
+    cursor: not-allowed;
+  }
+  .kpt-tabs__icon {
+    font-size: 1.125em;
+    color: var(--_icon-color, currentColor);
+  }
+  .kpt-tabs__icon[data-color=primary] {
+    --_icon-color: var(--kpt-color-primary);
+  }
+  .kpt-tabs__icon[data-color=success] {
+    --_icon-color: var(--kpt-color-success);
+  }
+  .kpt-tabs__icon[data-color=warning] {
+    --_icon-color: var(--kpt-color-warning);
+  }
+  .kpt-tabs__icon[data-color=danger] {
+    --_icon-color: var(--kpt-color-danger);
+  }
+  .kpt-tabs__icon[data-color=info] {
+    --_icon-color: var(--kpt-color-info);
+  }
   .kpt-tabs__ink {
     position: absolute;
     bottom: -1px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@konce-pt/styles",
-  "version": "0.16.1",
+  "version": "0.18.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.16.1"
+    "@konce-pt/tokens": "0.18.0"
   },
   "devDependencies": {
     "sass": "^1.77.0"