@kolkrabbi/kol-component 0.178.0 → 0.180.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.178.0",
+  "version": "0.180.0",
   "description": "KOL design-system components — atoms through organisms, emitting canonical kol-* classes. Pairs with @kolkrabbi/kol-theme for styling.",
   "license": "MIT",
   "type": "module",

package/src/atoms/SegmentedToggle.jsx

@@ -43,10 +43,18 @@
  *               mono-16, 8/20 pad). Same cell padding + mono type as the
  *               matching `.kol-btn-{sm,md,lg}`, so a segmented strip lines
  *               up with a Button of the same size.
+ *   tone      — the ground (segmented-toggle-sunken-tone, kol-client-olina 2026-09-03: the one
+ *               control ControlToneSunken skipped; kol-fxr and olina carried the same three CSS
+ *               lines to fake it). `sunken` (alias `inverse`): shell border transparent, the
+ *               selected cell on `--kol-surface-sunken` / `fg-96`, rest cells as the default paints
+ *               them; `filled` and `tonal` keep their own selected law. Through `toneClass`, so a
+ *               `kol-tone-sunken` wrapper reaches it too. Unset = inherit.
  *   ariaLabel — accessible name for the group
  *   className — additional classes on the outer shell
  */
-export default function SegmentedToggle({ value, onChange, options = [], variant = 'default', size = 'md', ariaLabel, className = '' }) {
+import { toneClass } from '../utilities/tone.js'
+
+export default function SegmentedToggle({ value, onChange, options = [], variant = 'default', size = 'md', tone = 'default', ariaLabel, className = '' }) {
   const cellType = { xs: 'kol-mono-8', sm: 'kol-mono-12', md: 'kol-mono-14', lg: 'kol-mono-16' }[size]
   const stateless = value == null
   const focusIdx = Math.max(0, options.findIndex((opt) => opt.value === value))
@@ -71,6 +79,7 @@ export default function SegmentedToggle({ value, onChange, options = [], variant
         (variant === 'filled' || variant === 'tonal') && 'kol-seg--filled',
         variant === 'tonal' && 'kol-seg--tonal',
         size !== 'md' && `kol-seg--${size}`,
+        toneClass(tone),
         className,
       ].filter(Boolean).join(' ')}
     >

package/src/atoms/SelectionOverlay.jsx

@@ -93,7 +93,7 @@ export default function SelectionOverlay({
             fontSize: 10,
             letterSpacing: '0.04em',
             color: accentColor,
-            background: 'rgba(0,0,0,0.6)',
+            background: 'rgba(0,0,0,0.6)', /* a label chip on a canvas, not a scrim (sweep 2026-09-03) */
             padding: '2px 6px',
             borderRadius: 2,
             whiteSpace: 'nowrap',

package/src/molecules/Modal.jsx

@@ -76,9 +76,12 @@ function ModalView({ state, closeWith }) {
   return (
     <div
       onMouseDown={cancel}
+      /* THE scrim (overlay-scrim-outliers sweep, 2026-09-03): the docs said Modal
+         wore `.kol-overlay-scrim`; the source drew a raw `rgba(0,0,0,0.5)`. The
+         z stays above the drawers it can open from. */
+      className="kol-overlay-scrim"
       style={{
         position: 'fixed', inset: 0, zIndex: 1000,
-        background: 'rgba(0,0,0,0.5)',
         display: 'flex', alignItems: 'center', justifyContent: 'center',
       }}
     >

package/src/molecules/TiltBento.jsx

@@ -182,6 +182,7 @@ export default function TiltBento({
           {overlayOpacity > 0 && (
             <div
               className={`absolute -inset-1 rounded ${coarse ? (coarseOpen ? 'opacity-60' : 'opacity-0') : 'opacity-0 group-hover:opacity-100'} ${fade} pointer-events-none`.trim()}
+              /* a tile's hover veil at the consumer's opacity — not a scrim (sweep 2026-09-03) */
               style={{ backgroundColor: `rgba(0, 0, 0, ${overlayOpacity / 100})` }}
             />
           )}

package/src/utilities/OverlayGlassPanel.jsx

@@ -34,6 +34,9 @@ export default function OverlayGlassPanel({
       className={`flex flex-col ${alignCls} ${gap} rounded-[var(--kol-radius-xs)] ${padding} ${maxWidth ? `${maxWidth} mx-auto` : ''} ${className}`.trim()}
       style={{
         backgroundColor: `color-mix(in srgb, var(--kol-surface-primary) ${surfaceOpacity}%, transparent)`,
+        /* a PANEL, not a scrim: the blur is this surface's whole point and the
+           no-blur ruling (OverlayScrimBlur, 2026-09-01) is about scrims — kept on
+           purpose (overlay-scrim-outliers sweep, 2026-09-03) */
         backdropFilter: `blur(${blur})`,
       }}
     >