@kolkrabbi/kol-component 0.5.0 → 0.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "KOL design-system components — atoms through organisms, emitting canonical kol-* classes. Pairs with @kolkrabbi/kol-theme for styling.",
   "license": "MIT",
   "type": "module",
@@ -24,7 +24,7 @@
   "dependencies": {
     "@floating-ui/react": "^0.27.19",
     "embla-carousel-react": "^8.6.0",
-    "@kolkrabbi/kol-icons": "0.4.0"
+    "@kolkrabbi/kol-icons": "0.5.0"
   },
   "peerDependencies": {
     "react": "^18.3.0 || ^19.0.0",

package/src/atoms/Button.jsx

@@ -82,11 +82,15 @@ const Button = ({
 
   // Add kol-btn-animate class if animateIcon is true to disable default hover states
   const animateClass = animateIcon ? 'kol-btn-animate' : ''
-  const quietClass    = quiet && !pressed ? 'kol-btn-quiet' : ''
-  const selectedClass = selected ? 'kol-btn-selected' : ''
-  const pressedClass  = pressed ? 'kol-btn-pressed' : ''
-
-  const combinedClass = `kol-btn ${variantClass} ${sizeClass} ${animateClass} ${quietClass} ${selectedClass} ${pressedClass} ${className}`.trim().replace(/\s+/g, ' ')
+  // `selected` is a legacy alias of `pressed` — both express the aria-pressed
+  // toggle-on state and render through .kol-btn-pressed. (The old
+  // .kol-btn-selected class never had a CSS rule, so `selected` was a no-op.)
+  // Resolve to one flag so the quiet-drop and the pressed fill agree.
+  const isPressed     = pressed !== undefined ? pressed : selected
+  const quietClass    = quiet && !isPressed ? 'kol-btn-quiet' : ''
+  const pressedClass  = isPressed ? 'kol-btn-pressed' : ''
+
+  const combinedClass = `kol-btn ${variantClass} ${sizeClass} ${animateClass} ${quietClass} ${pressedClass} ${className}`.trim().replace(/\s+/g, ' ')
 
   // Render icon with optional hover state
   const renderIcon = (iconName, iconHoverName) => {

package/src/atoms/Input.jsx

@@ -3,11 +3,11 @@ import { Icon } from '@kolkrabbi/kol-icons'
 /**
  * Input — single-input atom built on the .kol-control shell.
  *
- *   variant="filled" (default) — persistent solid bg
- *   variant="ghost"            — borderless at rest, reveals on hover/focus
- *   variant="outline"          — bordered, transparent bg (also: the
- *                                forced-reveal / "is-edited" state of a
- *                                ghost field — flip variant to outline)
+ *   variant="filled" (default) — persistent solid bg (= button primary chrome)
+ *   variant="outline"          — bordered, transparent bg — THE secondary
+ *                                treatment (2026-07-08 chrome law: one
+ *                                secondary, always subordinate to filled)
+ *   variant="ghost"            — legacy alias, resolves to outline
  *
  *   size="sm" / "md" (default) / "lg" — matched padding + type class
  *
@@ -57,9 +57,12 @@ export default function Input({
   const fixedChars = typeof chars === 'number'
   const resolvedIconSize = iconSize ?? ICON_SIZE[size] ?? 14
 
+  // ghost folds into outline (2026-07-08 chrome law): one secondary treatment.
+  const resolvedVariant = variant === 'ghost' ? 'outline' : variant
+
   const shellCls = [
     'kol-control',
-    `kol-control--${variant}`,
+    `kol-control--${resolvedVariant}`,
     `kol-control-${size}`,
     SIZE_TYPE[size],
     'cursor-text',

package/src/atoms/Textarea.jsx

@@ -1,3 +1,4 @@
+
 import { Icon } from '@kolkrabbi/kol-icons'
 
 /**
@@ -11,8 +12,10 @@ import { Icon } from '@kolkrabbi/kol-icons'
  *   size="sm" / "md" (default) / "lg" — padding + type class
  *
  * Default rows = 3 (kept short — long content gets scrollbars instead of
- * dominating the panel). No native resize handle — fixed size, scrollable
- * overflow. The kol resize-corner icon in the bottom-right is decorative.
+ * dominating the panel). Resize is real (2026-07-08): native resize is
+ * OFF (Firefox's built-in grip cannot be hidden any other way) and the
+ * kol-icon-set-v1 `resize-grip` icon IS the drag handle — corner drag,
+ * both axes, min 120×40. One grip, every browser.
  *
  * Controlled OR uncontrolled:
  *   - pass `value` + `onChange` for controlled,
@@ -34,9 +37,12 @@ export default function Textarea({
   className = '',
   ...props
 }) {
+  // ghost folds into outline (2026-07-08 chrome law): one secondary treatment.
+  const resolvedVariant = variant === 'ghost' ? 'outline' : variant
+
   const wrapperCls = [
     'kol-control',
-    `kol-control--${variant}`,
+    `kol-control--${resolvedVariant}`,
     'kol-control--textarea',
     `kol-control-${size}`,
     SIZE_TYPE[size],
@@ -62,8 +68,33 @@ export default function Textarea({
         style={{ resize: 'none' }}
         {...props}
       />
-      <span aria-hidden="true" className="kol-textarea-resize-icon text-meta pointer-events-none">
-        <Icon name="resize-corner" size={12} />
+      <span
+        aria-hidden="true"
+        className="kol-textarea-resize-icon"
+        onPointerDown={(e) => {
+          // The grip IS the resize handle — corner drag, both axes
+          // (min 120×40). Width lands on the shell, height on the textarea.
+          const shell = e.currentTarget.parentElement
+          const ta = shell?.querySelector('textarea')
+          if (!shell || !ta) return
+          e.preventDefault()
+          const startX = e.clientX
+          const startY = e.clientY
+          const startW = shell.offsetWidth
+          const startH = ta.offsetHeight
+          const move = (ev) => {
+            shell.style.width = `${Math.max(startW + ev.clientX - startX, 120)}px`
+            ta.style.height = `${Math.max(startH + ev.clientY - startY, 40)}px`
+          }
+          const up = () => {
+            window.removeEventListener('pointermove', move)
+            window.removeEventListener('pointerup', up)
+          }
+          window.addEventListener('pointermove', move)
+          window.addEventListener('pointerup', up)
+        }}
+      >
+        <Icon name="resize-grip" size={12} />
       </span>
     </label>
   )

package/src/atoms/ToggleSwitch.jsx

@@ -1,11 +1,30 @@
 import React from 'react'
 
+/**
+ * ToggleSwitch — bare by default (2026-07-08 chrome law rewrite).
+ *
+ *   variant="bare" (default) — label + track, no box
+ *   variant="primary"        — filled shell (surface-secondary), button geometry
+ *   variant="outline"        — bordered shell (border-oq-16), button geometry
+ *
+ *   size="sm" / "md" (default) / "lg" — shells match button heights
+ *     (26/32/40); the track scales with size in all variants.
+ *
+ * Legacy aliases: 'plain' → bare · 'default' (the old boxed look) → outline.
+ * Type via kol-mono-{12,14,16}; no auto-uppercase — casing is authored at
+ * the call site (KOL no-auto-casing rule).
+ */
+
+const SIZE_TYPE = { sm: 'kol-mono-12', md: 'kol-mono-14', lg: 'kol-mono-16' }
+const LEGACY_VARIANTS = { plain: 'bare', default: 'outline' }
+
 const ToggleSwitch = ({
   label,
   checked = false,
   onChange,
   onToggle,
-  variant = 'default',
+  variant = 'bare',
+  size = 'md',
   className = '',
   hint,
   ...props
@@ -15,12 +34,20 @@ const ToggleSwitch = ({
     if (onChange) onChange(!checked)
   }
 
-  const variantClass = variant === 'plain' ? 'toggle-switch--plain' : ''
+  const resolvedVariant = LEGACY_VARIANTS[variant] || variant
+
+  const cls = [
+    'toggle-switch',
+    `toggle-switch--${resolvedVariant}`,
+    `toggle-switch--${size}`,
+    SIZE_TYPE[size],
+    className,
+  ].filter(Boolean).join(' ')
 
   return (
     <button
       type="button"
-      className={`toggle-switch ${variantClass} ${className}`.trim()}
+      className={cls}
       data-state={checked ? 'on' : 'off'}
       onClick={handleClick}
       aria-pressed={checked}
@@ -29,7 +56,7 @@ const ToggleSwitch = ({
       <span className="toggle-switch-label">
         {label}
         {hint ? (
-          <span className="ml-2 opacity-60 normal-case tracking-normal kol-helper-10">
+          <span className="ml-2 opacity-60 kol-helper-10">
             {hint}
           </span>
         ) : null}

package/src/molecules/Dropdown.jsx

@@ -3,20 +3,34 @@ import { Icon } from '@kolkrabbi/kol-icons'
 import { MenuDropdownItem } from './MenuItem.jsx'
 import { PopoverPanel, usePopover } from '../atoms/Popover.jsx'
 
-const SIZE_MAP = {
-  sm: { fontSize: 12, paddingY: 4, paddingX: 12, radius: 14, panelRadius: 14, icon: 10 },
-  md: { fontSize: 12, paddingY: 6, paddingX: 16, radius: 22, panelRadius: 22, icon: 12 },
-  lg: { fontSize: 14, paddingY: 8, paddingX: 20, radius: 24, panelRadius: 24, icon: 14 }
-}
-
-const SIZE_TYPE = { sm: 'kol-mono-12', md: 'kol-mono-12', lg: 'kol-mono-14' }
+/**
+ * Dropdown — trigger IS button chrome (2026-07-08 chrome law).
+ *
+ * The trigger emits `kol-btn kol-btn-{variant} kol-btn-{size}` so it renders
+ * pixel-identical to a Button of the same variant/size — fills, hover,
+ * active, focus ring all come from the button rules in kol-theme.
+ * `.kol-dd-*` classes only add trigger layout + the open/panel fusion.
+ *
+ *   variant="primary" (default) — filled trigger; open panel continues the
+ *     same fill (one piece: no border, no gap, hairline divider inside)
+ *   variant="outline"           — bordered trigger; open panel carries the
+ *     same border, trigger's bottom edge acts as the divider
+ *
+ * Legacy aliases (pre-law variants, kept so call-sites don't break):
+ *   default → primary · subtle → primary · minimal → outline
+ */
+
+const SIZE_TYPE = { sm: 'kol-mono-12', md: 'kol-mono-14', lg: 'kol-mono-16' }
+const ICON_SIZE = { sm: 14, md: 16, lg: 18 }
+
+const LEGACY_VARIANTS = { default: 'primary', subtle: 'primary', minimal: 'outline' }
 
 const Dropdown = ({
   options = [],
   value,
   onChange,
   size,
-  variant = 'default',
+  variant = 'primary',
   defaultOpen = false,
   className = ''
 }) => {
@@ -24,15 +38,17 @@ const Dropdown = ({
   const [resolvedSize, setResolvedSize] = useState('md')
   const [dropdownWidth, setDropdownWidth] = useState('100px')
 
+  const resolvedVariant = LEGACY_VARIANTS[variant] || variant
+
   /* Floating-ui popover. `flip: false` keeps the panel below the button
-   * — the seamless border-radius edge between button and panel assumes
-   * the panel sits below; flipping above would visually disconnect them.
+   * — the seamless fused edge between trigger and panel assumes the panel
+   * sits below; flipping above would visually disconnect them.
    * `matchReferenceWidth: true` pins panel min-width to the button. */
   const popover = usePopover({
     open: isOpen,
     onOpenChange: setIsOpen,
     placement: 'bottom-start',
-    offset: variant === 'minimal' ? 0 : -1,
+    offset: -1,
     flip: false,
     matchReferenceWidth: true,
     role: 'listbox',
@@ -67,63 +83,23 @@ const Dropdown = ({
     }
   }, [size])
 
-  // Width management for variants
+  // Width management — 100px mobile, 140px tablet, 180px desktop
   useEffect(() => {
     const updateWidth = () => {
       if (typeof window === 'undefined') return
 
-      if (variant === 'minimal' || variant === 'subtle') {
-        // Minimal/subtle: 100px mobile, 140px tablet+
-        setDropdownWidth(window.innerWidth >= 768 ? '140px' : '100px')
-      } else if (variant === 'default') {
-        // Default: 100px mobile, 140px tablet, 180px desktop
-        if (window.innerWidth >= 1024) {
-          setDropdownWidth('180px')
-        } else if (window.innerWidth >= 768) {
-          setDropdownWidth('140px')
-        } else {
-          setDropdownWidth('100px')
-        }
+      if (window.innerWidth >= 1024) {
+        setDropdownWidth('180px')
+      } else if (window.innerWidth >= 768) {
+        setDropdownWidth('140px')
+      } else {
+        setDropdownWidth('100px')
       }
     }
     updateWidth()
     window.addEventListener('resize', updateWidth)
     return () => window.removeEventListener('resize', updateWidth)
-  }, [variant])
-
-  const metrics = SIZE_MAP[resolvedSize] || SIZE_MAP.md
-
-  // Variant-specific styles
-  const variantStyles = {
-    default: {
-      border: '1px solid var(--kol-border-default)',
-      borderRadius: isOpen
-        ? `${metrics.radius}px ${metrics.radius}px 0 0`
-        : `${metrics.radius}px`,
-      backgroundColor: 'var(--kol-surface-primary)',
-      padding: `${metrics.paddingY}px ${metrics.paddingX}px`
-    },
-    minimal: {
-      border: 'none',
-      borderRadius: '0',
-      backgroundColor: 'transparent',
-      padding: '0',
-      height: '24px',
-      display: 'flex',
-      alignItems: 'center'
-    },
-    subtle: {
-      /* 1px transparent border so total height matches Button + Input + the
-       * other shared-control atoms (which have a transparent 1px border for
-       * hover/focus consistency). Without this, subtle is 2px shorter. */
-      border: '1px solid transparent',
-      borderRadius: isOpen ? '4px 4px 0 0' : '4px',
-      backgroundColor: 'var(--kol-surface-secondary)',
-      padding: `${metrics.paddingY}px ${metrics.paddingX}px`
-    }
-  }
-
-  const styles = variantStyles[variant] || variantStyles.default
+  }, [])
 
   const handleSelect = (option) => {
     onChange?.(option.value)
@@ -132,11 +108,20 @@ const Dropdown = ({
 
   const currentOption = options.find((opt) => opt.value === value) || options[0]
 
+  const triggerCls = [
+    'kol-btn',
+    `kol-btn-${resolvedVariant}`,
+    `kol-btn-${resolvedSize}`,
+    SIZE_TYPE[resolvedSize],
+    'kol-dd-trigger',
+    isOpen && 'kol-dd-trigger--open',
+  ].filter(Boolean).join(' ')
+
   return (
     <div
       className={`relative block ${className}`}
       style={{
-        ...((variant === 'minimal' || variant === 'default' || variant === 'subtle') && dropdownWidth && !className.includes('w-full') && {
+        ...(dropdownWidth && !className.includes('w-full') && {
           width: dropdownWidth,
           minWidth: dropdownWidth
         })
@@ -146,26 +131,15 @@ const Dropdown = ({
         ref={popover.refs.setReference}
         {...popover.getReferenceProps()}
         type="button"
-        className={`w-full flex items-center justify-between transition-colors duration-200 ${SIZE_TYPE[resolvedSize]}`}
-        style={{
-          border: styles.border,
-          borderRadius: styles.borderRadius,
-          backgroundColor: styles.backgroundColor,
-          color: 'var(--kol-surface-on-primary)',
-          padding: styles.padding,
-          transition: 'background-color 0.2s, color 0.2s, border-color 0.2s',
-          ...(variant === 'minimal' && {
-            height: styles.height,
-          }),
-        }}
+        className={triggerCls}
         aria-haspopup="listbox"
         aria-expanded={isOpen}
         data-state={isOpen ? 'open' : 'closed'}
       >
-        <span className="opacity-100">{currentOption?.label}</span>
+        <span>{currentOption?.label}</span>
         <Icon
           name="chevron-down"
-          size={metrics.icon}
+          size={ICON_SIZE[resolvedSize]}
           className="ml-auto"
           style={{
             transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)',
@@ -178,29 +152,9 @@ const Dropdown = ({
         popover={popover}
         panel={false}
         focus={false}
-        style={{
-          backgroundColor: variant === 'minimal'
-            ? 'var(--kol-surface-primary)'
-            : styles.backgroundColor,
-          color: 'var(--kol-surface-on-primary)',
-          border: variant === 'subtle' ? 'none' : styles.border,
-          borderRadius: variant === 'minimal'
-            ? '0'
-            : (variant === 'subtle'
-                ? '0 0 4px 4px'
-                : `0 0 ${metrics.panelRadius}px ${metrics.panelRadius}px`),
-        }}
+        className={`kol-dd-panel kol-dd-panel--${resolvedVariant}`}
       >
-        {variant !== 'minimal' && (
-          <div style={{ padding: `0 ${metrics.paddingX}px` }}>
-            <div
-              style={{
-                height: '1px',
-                backgroundColor: 'var(--kol-border-default)'
-              }}
-            />
-          </div>
-        )}
+        {resolvedVariant === 'primary' && <div className="kol-dd-div" />}
 
         <div className="flex max-h-[300px] flex-col items-stretch overflow-y-auto" role="listbox">
           {options.map((option) => {

package/src/molecules/Slider.jsx

@@ -4,11 +4,9 @@ import Input from '../atoms/Input.jsx'
 /**
  * Slider — range slider with label and an editable value readout.
  *
- * Variants (track/shell styling):
- *   default — bordered track + boxed value.
- *   minimal — bare track + boxed value. 99% of real usage (foundry previews,
- *             inline controls). PRESERVED from web.
- *   subtle  — filled rounded chip; for inspector-style controls.
+ * One bare inline row: label · track · editable readout. (Bordered
+ * `default` and chip `subtle` variants retired 2026-07-08 — minimal is
+ * the only slider.)
  *
  * The value readout is an editable <Input> (type a value, commit on
  * blur / Enter, revert on Escape). Track color is exposed as the
@@ -21,7 +19,6 @@ import Input from '../atoms/Input.jsx'
  * @param {number} props.max - Maximum value
  * @param {number} props.value - Current value
  * @param {Function} props.onChange - Change handler
- * @param {'default'|'minimal'|'subtle'} props.variant - Visual variant (default: 'default')
  * @param {string} props.className - Additional wrapper classes
  * @param {number} props.displayWidth - Width of the value readout, in characters (default: 6)
  * @param {string} props.fontSize - Font size for label/value (e.g., '11px')
@@ -34,7 +31,6 @@ const Slider = ({
   max = 100,
   value = 0,
   onChange,
-  variant = 'default',
   className = '',
   displayWidth = 6,
   fontSize,
@@ -47,12 +43,6 @@ const Slider = ({
     }
   }
 
-  const variantClass = variant === 'minimal'
-    ? 'control-slider-minimal'
-    : variant === 'subtle'
-    ? 'control-slider-subtle'
-    : 'control-slider'
-
   const decimals = useMemo(() => {
     if (formatValue) return null
     if (!Number.isFinite(step)) return 0
@@ -94,7 +84,7 @@ const Slider = ({
   }
 
   return (
-    <div className={`${variantClass} gap-3 shadow-none ${className}`}>
+    <div className={`control-slider gap-3 shadow-none ${className}`}>
       {label && (
         <label className="kol-helper-12 whitespace-nowrap shrink-0 w-fit" style={fontSize ? { fontSize } : undefined}>
           {label}