@kolkrabbi/kol-component 0.9.0 → 0.10.0

package/package.json

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

package/src/atoms/Button.jsx

@@ -10,7 +10,7 @@ import { Icon } from '@kolkrabbi/kol-icons'
  *
  * @param {Object} props
  * @param {ReactNode} props.children - Button content
- * @param {'primary'|'secondary'|'accent'|'outline'|'ghost'|'control'} props.variant - Visual variant. `control` is an alias for `ghost` (legacy call-sites).
+ * @param {'primary'|'secondary'|'accent'|'outline'|'ghost'|'danger'|'grey'|'control'} props.variant - Visual variant. `danger` is the destructive treatment (--ui-error fill); `control` is an alias for `ghost` (legacy call-sites).
  * @param {'sm'|'md'|'lg'} props.size - Button size (default: 'md')
  * @param {string} props.iconLeft - Icon name to display on the left
  * @param {string} props.iconRight - Icon name to display on the right
@@ -71,6 +71,10 @@ const Button = ({
     ? 'kol-btn-outline'
     : resolvedVariant === 'ghost'
     ? 'kol-btn-ghost'
+    : resolvedVariant === 'danger'
+    ? 'kol-btn-danger'
+    : resolvedVariant === 'grey'
+    ? 'kol-btn-grey'
     : 'kol-btn-secondary'
 
   // Add size class — pairs the padding rule with its mono type class.

package/src/atoms/FullscreenOverlay.jsx

@@ -1,6 +1,6 @@
 import { useEffect, useRef } from 'react'
 
-export default function FullscreenOverlay({ open, onClose, children }) {
+export default function FullscreenOverlay({ open, onClose, closeButton = true, children }) {
   const sheetRef = useRef(null)
 
   useEffect(() => {
@@ -24,14 +24,16 @@ export default function FullscreenOverlay({ open, onClose, children }) {
   return (
     <div className="kol-overlay" role="dialog" aria-modal="true" onMouseDown={onBackdropClick}>
       <div ref={sheetRef} className="kol-overlay-sheet">
-        <button
-          type="button"
-          className="kol-overlay-close"
-          onClick={onClose}
-          aria-label="Close"
-        >
-          ×
-        </button>
+        {closeButton && (
+          <button
+            type="button"
+            className="kol-overlay-close"
+            onClick={onClose}
+            aria-label="Close"
+          >
+            ×
+          </button>
+        )}
         {children}
       </div>
     </div>

package/src/atoms/SearchInput.jsx

@@ -1,3 +1,4 @@
+import { useEffect, useRef, useState } from 'react'
 import { Icon } from '@kolkrabbi/kol-icons'
 
 /**
@@ -7,6 +8,14 @@ import { Icon } from '@kolkrabbi/kol-icons'
  * icon, then two mutually exclusive trailing affordances: a caller-authored
  * shortcut kbd chip while the value is empty, a clear × while it isn't.
  *
+ * `expanding` is the third body plan (after the shell and `bare`): a round
+ * icon-button pill that animates open into an inline field — the /work
+ * navbar pattern, extracted from kol-content's WorkViewToggle (2026-07-15).
+ * `open` is controllable so a parent can choreograph siblings around it
+ * (collapse a toggle, reveal a close button); uncontrolled works too.
+ * Escape reports `onOpenChange(false)` — clearing on close stays the
+ * parent's call.
+ *
  * Always controlled (`value` defaults to ''). Controlled + no onChange =
  * deliberate display-only → readOnly, same convention as Input. Extra props
  * (onKeyDown, autoFocus, role, aria-*) spread onto the inner <input> —
@@ -23,13 +32,19 @@ import { Icon } from '@kolkrabbi/kol-icons'
  * @param {string}   shortcutHint caller-authored kbd chip (e.g. "⌘K"); shown while the value is empty
  * @param {Function} onFocus      (event) => void — input focus
  * @param {string}   size         'sm' | 'md' — kol-control size + matched mono type class
- * @param {string}   variant      'filled' | 'ghost' | 'outline' — kol-control variant, same chrome as Input (ignored when bare)
+ * @param {string}   variant      'filled' | 'ghost' | 'outline' — kol-control variant, same chrome as Input (ignored when bare/expanding)
  * @param {boolean}  bare         borderless inline field for overlay panels (full width, no shell chrome; keeps icon/clear/chip slots)
+ * @param {boolean}  expanding    round icon-button pill that animates open into an inline field
+ * @param {boolean}  open         (expanding) controlled open state; omit for internal state
+ * @param {Function} onOpenChange (expanding) (bool) => void — trigger click / Escape
+ * @param {number}   expandedWidth (expanding) open pill width in px (default 280)
+ * @param {string}   triggerLabel (expanding) aria-label on the icon trigger (default 'Open search')
  * @param {string}   className    extra classes on the shell
  */
 
 const SIZE_TYPE = { sm: 'kol-mono-12', md: 'kol-mono-14' }
 const ICON_SIZE = { sm: 14, md: 14 }
+const CUBIC_EASE = 'cubic-bezier(0.16, 1, 0.3, 1)'
 
 export default function SearchInput({
   value = '',
@@ -41,9 +56,59 @@ export default function SearchInput({
   size = 'md',
   variant = 'filled',
   bare = false,
+  expanding = false,
+  open,
+  onOpenChange,
+  expandedWidth = 280,
+  triggerLabel = 'Open search',
   className = '',
   ...inputProps
 }) {
+  /* expanding body plan — hooks stay unconditional (expanding never flips at runtime) */
+  const [internalOpen, setInternalOpen] = useState(false)
+  const inputRef = useRef(null)
+  const isOpen = open !== undefined ? open : internalOpen
+  const setOpen = (next) => {
+    if (open === undefined) setInternalOpen(next)
+    onOpenChange?.(next)
+  }
+
+  useEffect(() => {
+    if (expanding && isOpen) inputRef.current?.focus()
+  }, [expanding, isOpen])
+
+  if (expanding) {
+    return (
+      <div
+        className={`flex items-center bg-fg-04 rounded-full h-9 ${className}`.trim()}
+        style={{ width: isOpen ? expandedWidth : 36, transition: `width 600ms ${CUBIC_EASE}` }}
+      >
+        <button
+          type="button"
+          className={`flex items-center justify-center w-9 h-9 rounded-full text-auto flex-shrink-0 border border-transparent ${isOpen ? '' : 'transition-colors hover:border-fg-12'}`}
+          onClick={() => !isOpen && setOpen(true)}
+          aria-label={triggerLabel}
+          aria-expanded={isOpen}
+        >
+          <Icon name="search" size={16} className="text-fg-80" />
+        </button>
+        {isOpen && (
+          <input
+            ref={inputRef}
+            type="search"
+            value={value ?? ''}
+            onChange={onChange}
+            readOnly={!onChange || undefined}
+            placeholder={placeholder}
+            spellCheck={false}
+            className="bg-transparent outline-none kol-helper-14 flex-1 text-fg-80 caret-current pr-4 min-w-0 appearance-none [&::-webkit-search-cancel-button]:hidden"
+            onKeyDown={(e) => { if (e.key === 'Escape') setOpen(false) }}
+            {...inputProps}
+          />
+        )}
+      </div>
+    )
+  }
   const shellCls = [
     bare
       ? 'flex w-full gap-2.5 px-4 py-3'

package/src/molecules/Accordion.jsx

@@ -38,8 +38,10 @@ export function AccordionPanel({
         onClick={toggle}
         aria-expanded={open}
       >
-        <span className="kol-accordion-title kol-helper-12 uppercase tracking-widest">{title}</span>
-        {meta && <span className="kol-accordion-meta kol-helper-12 uppercase tracking-widest text-fg-48 ml-auto mr-3">{meta}</span>}
+        {/* no text-transform (casing law 2026-07-15): titles render as authored —
+          * kol-helper-12 already carries the tracked-caps letterspacing */}
+        <span className="kol-accordion-title kol-helper-12">{title}</span>
+        {meta && <span className="kol-accordion-meta kol-helper-12 text-fg-48 ml-auto mr-3">{meta}</span>}
         <span className="kol-accordion-chevron kol-helper-16 text-fg-48 min-w-3 transition-colors duration-[120ms] ml-auto" aria-hidden="true">{open ? '−' : '+'}</span>
       </button>
       {open && <div className="kol-accordion-body pt-2 pb-6">{children}</div>}

package/src/molecules/Dropdown.jsx

@@ -13,6 +13,8 @@ import { PopoverPanel, usePopover } from '../atoms/Popover.jsx'
  *
  *   variant="primary" (default) — filled trigger; open panel continues the
  *     same fill (one piece: no border, no gap, hairline divider inside)
+ *   variant="grey"              — oq-12 filled trigger (opaque per the fill
+ *                                 law); panel continues it
  *   variant="outline"           — bordered trigger; open panel carries the
  *     same border, trigger's bottom edge acts as the divider
  *
@@ -110,7 +112,9 @@ const Dropdown = ({
 
   const triggerCls = [
     'kol-btn',
-    `kol-btn-${resolvedVariant}`,
+    /* grey is dropdown-only chrome (2026-07-15) — no kol-btn-* class so it
+     * never leaks into Button's variant set */
+    resolvedVariant === 'grey' ? 'kol-dd-trigger--grey' : `kol-btn-${resolvedVariant}`,
     `kol-btn-${resolvedSize}`,
     SIZE_TYPE[resolvedSize],
     'kol-dd-trigger',
@@ -154,7 +158,7 @@ const Dropdown = ({
         focus={false}
         className={`kol-dd-panel kol-dd-panel--${resolvedVariant}`}
       >
-        {resolvedVariant === 'primary' && <div className="kol-dd-div" />}
+        {(resolvedVariant === 'primary' || resolvedVariant === 'grey') && <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/MenuItem.jsx

@@ -95,7 +95,7 @@ export function MenuDropdownItem({ onClick, disabled, prefix, iconLeft, shortcut
       onClick={onClick}
       disabled={disabled}
       role="menuitem"
-      className="w-full kol-helper-12 px-3 h-8 inline-flex items-center gap-2 text-body hover:text-emphasis disabled:opacity-40 disabled:cursor-not-allowed text-left"
+      className="w-full kol-helper-12 px-3 h-8 shrink-0 inline-flex items-center gap-2 text-body hover:text-emphasis disabled:opacity-40 disabled:cursor-not-allowed text-left"
     >
       {prefix && <span className="shrink-0 inline-flex items-center">{prefix}</span>}
       {iconLeft && <span className="shrink-0 w-4 inline-flex items-center justify-center">{iconLeft}</span>}