@kolkrabbi/kol-component 0.9.0 → 0.10.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.9.0",
+  "version": "0.10.1",
   "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.1"
   },
   "peerDependencies": {
     "react": "^18.3.0 || ^19.0.0",

package/src/atoms/AssetPlaceholder.jsx

@@ -10,7 +10,7 @@ export default function AssetPlaceholder({
   category,
   name,
   aspectRatio = '16 / 9',
-  note = 'missing',
+  note = 'MISSING',
   className = '',
 }) {
   const label = [category, name].filter(Boolean).join(' · ')
@@ -23,7 +23,8 @@ export default function AssetPlaceholder({
     >
       {/* note is single-line → helper scale; label can wrap (category · name
         * in a narrow tile) → line-height-bearing mono scale */}
-      <span className="kol-asset-placeholder-note kol-helper-12 uppercase [letter-spacing:0.12em] text-fg-48">{note}</span>
+      {/* no text-transform (casing law) — note is authored in-case */}
+      <span className="kol-asset-placeholder-note kol-helper-12 [letter-spacing:0.12em] text-fg-48">{note}</span>
       {label && <span className="kol-asset-placeholder-label kol-mono-12 text-fg-40 [letter-spacing:0.04em]">{label}</span>}
     </div>
   )

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/Input.jsx

@@ -25,7 +25,6 @@ import { Icon } from '@kolkrabbi/kol-icons'
  *     the shell at text-meta. aria-hidden — affordances, not labels.
  *   iconLeft — name of a leading icon rendered inside the shell (e.g.
  *     "search-16"). iconSize overrides the size-derived default.
- *   uppercase — adds Tailwind `uppercase` to the input element only.
  *
  * Chrome (bg/border/padding/transition/disabled) comes from .kol-control;
  * Input owns prefix/suffix/icon layout + the inner <input> styling.
@@ -47,7 +46,6 @@ export default function Input({
   iconSize = null,
   placeholder,
   disabled = false,
-  uppercase = false,
   width,
   className = '',
   inputClassName = '',
@@ -86,7 +84,6 @@ export default function Input({
      * the affordance than to the empty edge, reads off-balance. */
     prefix !== undefined && 'pr-1',
     suffix !== undefined && 'pl-1',
-    uppercase && 'uppercase',
     isNumber && 'hide-number-spinners',
     inputClassName,
   ].filter(Boolean).join(' ')

package/src/atoms/LabeledControl.jsx

@@ -44,7 +44,7 @@ export default function LabeledControl({
       <div className={`flex items-center gap-3 ${className}`}>
         {showLabel && (
           <span
-            className="kol-helper-10 uppercase tracking-widest text-meta shrink-0"
+            className="kol-helper-10 tracking-widest text-meta shrink-0"
             style={{ width: labelWidth }}
           >
             {labelInner}
@@ -58,7 +58,7 @@ export default function LabeledControl({
   return (
     <div className={`flex flex-col gap-2 ${className}`}>
       {showLabel && (
-        <span className="kol-helper-10 uppercase tracking-widest text-meta">{labelInner}</span>
+        <span className="kol-helper-10 tracking-widest text-meta">{labelInner}</span>
       )}
       {children}
     </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/atoms/Section.jsx

@@ -8,7 +8,7 @@ export default function Section({ label, children, className = '' }) {
   return (
     <div className={`flex flex-col gap-2 ${className}`}>
       {label && (
-        <p className="kol-helper-10 uppercase tracking-widest text-meta">{label}</p>
+        <p className="kol-helper-10 tracking-widest text-meta">{label}</p>
       )}
       {children}
     </div>

package/src/atoms/Tag.jsx

@@ -71,7 +71,7 @@ export default function Tag({
           className="tag-dismiss"
           onClick={handleRemove}
         >
-          <Icon name="cross" size={iconSize} />
+          <Icon name="x" size={iconSize} />
         </span>
       )}
     </Element>

package/src/atoms/Textarea.jsx

@@ -6,7 +6,7 @@ import { Icon } from '@kolkrabbi/kol-icons'
  * `--textarea` modifier (display: block).
  *
  *   variant="filled" (default) — persistent solid bg
- *   variant="ghost"            — borderless at rest, reveals on hover/focus
+ *   variant="ghost"            — legacy alias, resolves to outline
  *   variant="outline"          — bordered, transparent bg
  *
  *   size="sm" / "md" (default) / "lg" — padding + type class

package/src/atoms/ToggleBracket.jsx

@@ -25,8 +25,8 @@ const ToggleBracket = ({
   const isPlain = variant === 'plain'
 
   const cls = isPlain
-    ? `inline-flex items-center gap-3 kol-mono-12 uppercase text-meta hover:text-emphasis transition-colors bg-transparent border-0 p-0 cursor-pointer ${className}`
-    : `kol-control kol-control--filled kol-control-md kol-mono-12 uppercase justify-between gap-3 ${value ? 'toggle-bracket--active' : ''} ${className}`
+    ? `inline-flex items-center gap-3 kol-mono-12 text-meta hover:text-emphasis transition-colors bg-transparent border-0 p-0 cursor-pointer ${className}`
+    : `kol-control kol-control--filled kol-control-md kol-mono-12 justify-between gap-3 ${value ? 'toggle-bracket--active' : ''} ${className}`
 
   return (
     <button

package/src/atoms/ToggleCheckbox.jsx

@@ -29,9 +29,9 @@ const ToggleCheckbox = ({
           <polyline points="1 5 4 8 11 1" fill="none" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
         </svg>
       </span>
-      <span className="toggle-checkbox-label kol-helper-12 uppercase tracking-[0.08em]">
+      <span className="toggle-checkbox-label kol-helper-12 tracking-[0.08em]">
         {label}
-        {hint ? <span className="ml-2 opacity-60 normal-case tracking-normal kol-helper-10">{hint}</span> : null}
+        {hint ? <span className="ml-2 opacity-60 tracking-normal kol-helper-10">{hint}</span> : null}
       </span>
     </label>
   )

package/src/atoms/ViewToggle.jsx

@@ -13,7 +13,7 @@ import { Icon } from '@kolkrabbi/kol-icons'
  *                      inactive = off (bare text). Use for compact on/off
  *                      where a segmented two-button toggle is overkill.
  *
- * Built on the .kol-control shell. Default options use grid-06 / list-01
+ * Built on the .kol-control shell. Default options use grid / view-list
  * icons; consumers can pass `options` to override. `iconVariant` picks the
  * icon cut for variant="icon" ('stroke' default; 'solid' reads better at
  * 14px). For `variant="single"`, the FIRST option in `options` is the "off"
@@ -25,8 +25,8 @@ const ViewToggle = ({
   variant = 'text',
   iconVariant = 'stroke',
   options = [
-    { value: 'grid', label: 'Grid view', icon: 'grid-06' },
-    { value: 'list', label: 'List view', icon: 'list-01' }
+    { value: 'grid', label: 'Grid view', icon: 'grid' },
+    { value: 'list', label: 'List view', icon: 'view-list' }
   ],
   className = ''
 }) => {

package/src/index.js

@@ -117,6 +117,7 @@ export { Icon } from '@kolkrabbi/kol-icons'
 
 // graphics (SVG illustration loader — globs its own ./graphics/svg/**)
 export { default as Graphic, GRAPHICS } from './graphics/Graphic.jsx'
+export { GRAPHIC_RAW } from './graphics/graphicData.js'
 
 // hooks
 export { default as usePrefersReducedMotion } from './hooks/usePrefersReducedMotion.js'

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/CodeBlock.jsx

@@ -1,11 +1,27 @@
 import CopyButton from '../atoms/CopyButton.jsx'
 
-export default function CodeBlock({ children, language }) {
+/**
+ * CodeBlock — a chrome'd code block with language chip, filename chip, and copy.
+ *
+ * Accepts three input shapes (first match wins per field):
+ *   • Portable Text: `value={{ code, language, filename }}` — the Sanity code-block
+ *     object can be passed straight through from a portable-text map.
+ *   • Direct props: `code` / `language` / `filename`.
+ *   • Children: `<CodeBlock language="js">{'…'}</CodeBlock>` (the original API).
+ *
+ * DOM order is copy → filename → lang → pre so the `.kol-codeblock-*` + pre
+ * adjacency rules in the chrome CSS can pad the pre when chips are present.
+ */
+export default function CodeBlock({ children, code, language, filename, value }) {
+  const src = code ?? value?.code ?? children
+  const lang = language ?? value?.language
+  const file = filename ?? value?.filename
   return (
     <div className="kol-codeblock">
-      {language && <span className="kol-codeblock-lang">{language}</span>}
-      <CopyButton text={String(children)} className="kol-codeblock-copy" />
-      <pre><code>{children}</code></pre>
+      <CopyButton text={String(src ?? '')} className="kol-codeblock-copy" />
+      {file && <span className="kol-codeblock-filename">{file}</span>}
+      {lang && <span className="kol-codeblock-lang">{lang}</span>}
+      <pre><code>{src}</code></pre>
     </div>
   )
 }

package/src/molecules/ColorInputRow.jsx

@@ -136,7 +136,6 @@ export default function ColorInputRow({
       prefix="#"
       chars={6}
       maxLength={6}
-      uppercase
       value={digits}
       onChange={(e) => onChange?.('#' + e.target.value.replace(/^#/, '').toUpperCase())}
       disabled={disabled}

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>}

package/src/molecules/TabsRow.jsx

@@ -43,7 +43,7 @@ export default function TabsRow({ tabs = [], value, onChange, onClose, onMinimis
           className="text-meta hover:text-emphasis self-center"
           style={{ lineHeight: 0 }}
         >
-          <Icon name="close" size={12} />
+          <Icon name="x" size={12} />
         </button>
       )}