@konce-pt/styles 0.11.2 → 0.12.0

package/components.css

@@ -1552,6 +1552,9 @@
     overflow: hidden;
     background: var(--kpt-color-surface);
   }
+  .kpt-button-group--invalid {
+    border-color: var(--kpt-form-field-border-error, var(--kpt-color-danger));
+  }
   .kpt-button-group__item {
     appearance: none;
     border: 0;
@@ -2102,6 +2105,18 @@
   .kpt-context-menu__area {
     display: contents;
   }
+  .kpt-context-menu__layer {
+    position: fixed;
+    inset: 0;
+    width: auto;
+    height: auto;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    overflow: visible;
+    color: inherit;
+  }
   .kpt-context-menu__backdrop {
     position: fixed;
     inset: 0;
@@ -2322,12 +2337,43 @@
     font-size: var(--kpt-font-size-xs, 0.75rem);
     color: var(--kpt-color-on-surface-muted);
   }
-  .kpt-data-table__th--sortable {
+  .kpt-data-table__th--sortable:hover {
+    color: var(--kpt-color-on-surface);
+  }
+  .kpt-data-table__sort-btn {
+    display: inline-flex;
+    align-items: center;
+    padding: 0;
+    border: 0;
+    background: none;
+    font: inherit;
+    color: inherit;
+    text-align: inherit;
     cursor: pointer;
+    border-radius: var(--kpt-radius-sm, 0.25rem);
   }
-  .kpt-data-table__th--sortable:hover {
+  .kpt-data-table__sort-btn:focus-visible {
+    outline: var(--kpt-border-width-medium, 2px) solid var(--kpt-color-focus-ring);
+    outline-offset: 2px;
+  }
+  .kpt-data-table__caption {
+    caption-side: top;
+    padding-block: var(--kpt-space-2, 0.5rem);
+    text-align: start;
+    font-weight: var(--kpt-font-weight-semibold, 600);
     color: var(--kpt-color-on-surface);
   }
+  .kpt-data-table__live {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
   .kpt-data-table__cell--editable {
     cursor: pointer;
   }
@@ -2365,15 +2411,31 @@
     box-shadow: inset 2px 0 0 0 var(--kpt-color-primary);
   }
   .kpt-data-table__grip {
+    display: inline-flex;
+    align-items: center;
     margin-inline-end: 0.4em;
+    padding: 0;
+    border: 0;
+    background: none;
+    color: inherit;
     opacity: 0.45;
+    cursor: inherit;
+    border-radius: var(--kpt-radius-sm, 0.25rem);
+  }
+  .kpt-data-table__grip:hover, .kpt-data-table__grip:focus-visible {
+    opacity: 1;
+  }
+  .kpt-data-table__grip:focus-visible {
+    outline: var(--kpt-border-width-medium, 2px) solid var(--kpt-color-focus-ring);
+    outline-offset: 1px;
   }
   .kpt-data-table__checkbox {
     width: 1px;
     white-space: nowrap;
     text-align: center;
   }
-  .kpt-data-table__checkbox input[type=checkbox] {
+  .kpt-data-table__checkbox input[type=checkbox],
+  .kpt-data-table__checkbox input[type=radio] {
     appearance: none;
     -webkit-appearance: none;
     position: relative;
@@ -2388,7 +2450,8 @@
     background: var(--kpt-form-field-bg);
     transition: background-color var(--kpt-motion-duration-fast, 120ms) var(--kpt-motion-easing-standard), border-color var(--kpt-motion-duration-fast, 120ms) var(--kpt-motion-easing-standard);
   }
-  .kpt-data-table__checkbox input[type=checkbox]::after {
+  .kpt-data-table__checkbox input[type=checkbox]::after,
+  .kpt-data-table__checkbox input[type=radio]::after {
     content: "";
     position: absolute;
     inset: 0;
@@ -2398,24 +2461,38 @@
     -webkit-mask: no-repeat center/0.85rem;
     mask: no-repeat center/0.85rem;
   }
-  .kpt-data-table__checkbox input[type=checkbox]:checked, .kpt-data-table__checkbox input[type=checkbox]:indeterminate {
+  .kpt-data-table__checkbox input[type=checkbox]:checked, .kpt-data-table__checkbox input[type=checkbox]:indeterminate,
+  .kpt-data-table__checkbox input[type=radio]:checked,
+  .kpt-data-table__checkbox input[type=radio]:indeterminate {
     background: var(--kpt-color-primary);
     border-color: var(--kpt-color-primary);
   }
-  .kpt-data-table__checkbox input[type=checkbox]:checked::after {
+  .kpt-data-table__checkbox input[type=checkbox]:checked::after,
+  .kpt-data-table__checkbox input[type=radio]:checked::after {
     opacity: 1;
     -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13 4.5 6.5 11 3 7.5' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
     mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13 4.5 6.5 11 3 7.5' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
   }
-  .kpt-data-table__checkbox input[type=checkbox]:indeterminate::after {
+  .kpt-data-table__checkbox input[type=checkbox]:indeterminate::after,
+  .kpt-data-table__checkbox input[type=radio]:indeterminate::after {
     opacity: 1;
     -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8h9' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round'/%3E%3C/svg%3E");
     mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8h9' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round'/%3E%3C/svg%3E");
   }
-  .kpt-data-table__checkbox input[type=checkbox]:focus-visible {
+  .kpt-data-table__checkbox input[type=checkbox]:focus-visible,
+  .kpt-data-table__checkbox input[type=radio]:focus-visible {
     outline: var(--kpt-border-width-medium, 2px) solid var(--kpt-color-focus-ring);
     outline-offset: 2px;
   }
+  .kpt-data-table__checkbox input[type=radio] {
+    border-radius: 50%;
+  }
+  .kpt-data-table__checkbox input[type=radio]:checked::after {
+    -webkit-mask-image: none;
+    mask-image: none;
+    inset: 25%;
+    border-radius: 50%;
+  }
   .kpt-data-table__expander {
     width: 2.5rem;
     min-width: 2.5rem;
@@ -2472,6 +2549,13 @@
   .kpt-data-table__row--selected {
     background: var(--kpt-table-row-selected) !important;
   }
+  .kpt-data-table__row--clickable {
+    cursor: pointer;
+  }
+  .kpt-data-table__row--clickable:focus-visible {
+    outline: var(--kpt-border-width-medium, 2px) solid var(--kpt-color-focus-ring);
+    outline-offset: -2px;
+  }
   .kpt-data-table__row--expanded {
     background: var(--kpt-table-row-hover);
   }
@@ -2645,6 +2729,9 @@
     opacity: 0.6;
     background: var(--kpt-color-surface-variant);
   }
+  .kpt-date-range.kpt-date-range--readonly {
+    cursor: default;
+  }
   .kpt-date-range__placeholder {
     color: var(--kpt-form-field-placeholder);
   }
@@ -2862,6 +2949,8 @@
     font-variant-numeric: tabular-nums;
   }
   .kpt-clock__seg {
+    display: inline-block;
+    user-select: none;
     border: 0;
     background: none;
     padding: 0.1rem 0.4rem;
@@ -2875,6 +2964,10 @@
     color: var(--kpt-color-primary);
     background: var(--kpt-color-muted);
   }
+  .kpt-clock__seg:focus-visible {
+    outline: var(--kpt-border-width-medium, 2px) solid var(--kpt-color-focus-ring);
+    outline-offset: 2px;
+  }
   .kpt-clock__colon {
     font-size: var(--kpt-font-size-2xl, 1.5rem);
     font-weight: var(--kpt-font-weight-semibold, 600);
@@ -3015,6 +3108,9 @@
     opacity: 0.6;
     background: var(--kpt-color-surface-variant);
   }
+  .kpt-datepicker.kpt-datepicker--readonly {
+    cursor: default;
+  }
   .kpt-datepicker__placeholder {
     color: var(--kpt-form-field-placeholder);
   }
@@ -3045,6 +3141,17 @@
     color: var(--kpt-color-on-surface);
     font-size: var(--kpt-font-size-sm, 0.875rem);
   }
+  .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__header {
     display: flex;
     align-items: center;
@@ -4226,6 +4333,12 @@
   .kpt-input-otp--invalid .kpt-input-otp__cell {
     border-color: var(--kpt-form-field-border-error);
   }
+  .kpt-input-otp__sep {
+    align-self: center;
+    color: var(--kpt-color-text-muted);
+    font-size: var(--kpt-font-size-lg, 1.125rem);
+    user-select: none;
+  }
 }
 
 /* src/lib/knob/knob.component.scss */
@@ -5080,9 +5193,13 @@
     color: var(--kpt-color-on-surface);
     cursor: pointer;
   }
-  .kpt-pick-list__controls button:hover {
+  .kpt-pick-list__controls button:hover:not([aria-disabled=true]) {
     background: var(--kpt-color-muted);
   }
+  .kpt-pick-list__controls button[aria-disabled=true] {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
   .kpt-pick-list__controls button .kpt-icon-host + .kpt-icon-host {
     margin-left: -0.5rem;
   }
@@ -5662,6 +5779,13 @@
     max-height: 20rem;
     overflow-y: auto;
   }
+  .kpt-rich-text__style-panel:focus {
+    outline: none;
+  }
+  .kpt-rich-text__style-panel:focus-visible .kpt-rich-text__style-opt.is-active {
+    outline: var(--kpt-border-width-medium, 2px) solid var(--kpt-color-focus-ring);
+    outline-offset: -2px;
+  }
   .kpt-rich-text__style-opt {
     padding: 0.35rem 0.6rem;
     border-radius: var(--kpt-radius-sm, 0.25rem);
@@ -5796,6 +5920,10 @@
     border-radius: var(--kpt-radius-md, 0.5rem);
     box-shadow: var(--kpt-elevation-3);
   }
+  .kpt-rt-grid:focus-visible {
+    outline: var(--kpt-border-width-medium, 2px) solid var(--kpt-color-focus-ring);
+    outline-offset: 2px;
+  }
   .kpt-rt-grid {
     display: flex;
     flex-direction: column;
@@ -6033,6 +6161,9 @@
   .kpt-select.kpt-select--invalid {
     border-color: var(--kpt-form-field-border-error);
   }
+  .kpt-select.kpt-select--readonly {
+    cursor: default;
+  }
   .kpt-select.kpt-select--disabled {
     cursor: not-allowed;
     opacity: 0.6;
@@ -7648,6 +7779,17 @@
       stroke-dashoffset: 0;
     }
   }
+  .kpt-chart__sr {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
 }
 
 /* chat/src/lib/chat-composer.component.scss */

package/index.css

@@ -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,6 +1,6 @@
 {
   "name": "@konce-pt/styles",
-  "version": "0.11.2",
+  "version": "0.12.0",
   "description": "Base CSS for Koncept UI — reset, cascade @layer ordering and neutral light/dark theme (SCSS source).",
   "license": "MIT",
   "author": "konce.pt",
@@ -52,13 +52,14 @@
     "src"
   ],
   "peerDependencies": {
-    "@konce-pt/tokens": "0.11.2"
+    "@konce-pt/tokens": "0.12.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

@@ -203,6 +203,30 @@
 }
 
 @layer kpt.components {
+  // 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 —