@kolkrabbi/kol-component 0.25.0 → 0.26.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.25.0",
+  "version": "0.26.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/Popover.jsx

@@ -68,8 +68,11 @@ export function usePopover({
     middleware.push(
       sizeMw({
         apply({ rects, elements }) {
+          /* EXACT width, not a floor (2026-08-09) — "one piece means one
+           * width": with minWidth alone, a wide row let the panel outgrow the
+           * trigger it claims to continue. Sole consumer is Dropdown. */
           Object.assign(elements.floating.style, {
-            minWidth: `${rects.reference.width}px`,
+            width: `${rects.reference.width}px`,
           })
         },
       })

package/src/hooks/glyphLadders.js

@@ -29,6 +29,16 @@ export const SOLO = { sm: 16, md: 20, lg: 24 }
 /** Icon beside a label, inside the rung's line box. */
 export const ADJACENT = { sm: 14, md: 16, lg: 18 }
 
+/**
+ * Indicator glyph — a caret/chevron that DECORATES a control rather than
+ * naming it (a dropdown caret, a sort arrow). Pairs 1:1 with the control's
+ * mono text rung, one step under ADJACENT: an indicator never outweighs the
+ * label it points at. Promoted 2026-08-09 — Table's sort chevron and
+ * Dropdown's caret each hand-typed their number (Dropdown took the ADJACENT
+ * rung, the oversize the user called): two transcriptions, the folklore
+ * threshold. */
+export const INDICATOR = { sm: 12, md: 14, lg: 16 }
+
 /**
  * Resolve a glyph size. `solo` picks the ladder; `size` indexes it.
  * Falls back to the md rung so an unknown size never yields undefined.
@@ -37,3 +47,8 @@ export function glyphSize(size, solo = false) {
   const ladder = solo ? SOLO : ADJACENT
   return ladder[size] ?? ladder.md
 }
+
+/** Resolve an indicator size. Separate helper — `solo` never applies. */
+export function indicatorSize(size) {
+  return INDICATOR[size] ?? INDICATOR.md
+}

package/src/index.js

@@ -131,7 +131,7 @@ export { GRAPHIC_RAW } from './graphics/graphicData.js'
  * took `20`, and neither could reference the rule it was meant to follow.
  * Cross-package imports go through the `@kolkrabbi/*` specifier (ARCHITECTURE
  * §3), so an export is the only way another package can obey the ladder. */
-export { SOLO, ADJACENT, glyphSize } from './hooks/glyphLadders.js'
+export { SOLO, ADJACENT, INDICATOR, glyphSize, indicatorSize } from './hooks/glyphLadders.js'
 
 // hooks
 export { default as usePrefersReducedMotion } from './hooks/usePrefersReducedMotion.js'

package/src/molecules/Dropdown.jsx

@@ -1,7 +1,8 @@
-import { useEffect, useState } from 'react'
+import { useState } from 'react'
 import { Icon } from '@kolkrabbi/kol-icons'
 import { MenuDropdownItem } from './MenuItem.jsx'
 import { PopoverPanel, usePopover } from '../atoms/Popover.jsx'
+import { indicatorSize } from '../hooks/glyphLadders.js'
 
 /**
  * Dropdown — trigger IS button chrome (2026-07-08 chrome law).
@@ -28,7 +29,10 @@ import { PopoverPanel, usePopover } from '../atoms/Popover.jsx'
  */
 
 const SIZE_TYPE = { sm: 'kol-mono-12', md: 'kol-mono-14', lg: 'kol-mono-16' }
-const ICON_SIZE = { sm: 14, md: 16, lg: 18 }
+/* Caret size comes from the INDICATOR ladder (glyphLadders.js) — the private
+ * map that lived here was a transcription of ADJACENT, which is the wrong
+ * ladder for a decoration: it put a caret one rung HEAVIER than the label
+ * beside it (2026-08-09 user call). */
 
 const LEGACY_VARIANTS = { default: 'primary', subtle: 'primary', minimal: 'outline' }
 
@@ -42,7 +46,6 @@ const Dropdown = ({
   className = ''
 }) => {
   const [isOpen, setIsOpen] = useState(defaultOpen)
-  const [dropdownWidth, setDropdownWidth] = useState('100px')
 
   // sm everywhere unless explicitly overridden (see docblock size law).
   const resolvedSize = size || 'sm'
@@ -63,23 +66,11 @@ const Dropdown = ({
     role: 'listbox',
   })
 
-  // Width management — 100px mobile, 140px tablet, 180px desktop
-  useEffect(() => {
-    const updateWidth = () => {
-      if (typeof window === 'undefined') return
-
-      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)
-  }, [])
+  /* Width belongs to the CALL SITE (2026-08-09 user call — "width without any
+   * regard to context"). The viewport-keyed resize listener that handed every
+   * dropdown a fixed width by window size is gone: default is hug-content,
+   * and the consumer sizes it through className exactly as on Input. The open
+   * panel follows the trigger via matchReferenceWidth either way. */
 
   const handleSelect = (option) => {
     onChange?.(option.value)
@@ -100,15 +91,7 @@ const Dropdown = ({
   ].filter(Boolean).join(' ')
 
   return (
-    <div
-      className={`relative block ${className}`}
-      style={{
-        ...(dropdownWidth && !className.includes('w-full') && {
-          width: dropdownWidth,
-          minWidth: dropdownWidth
-        })
-      }}
-    >
+    <div className={`relative inline-block align-middle ${className}`}>
       <button
         ref={popover.refs.setReference}
         {...popover.getReferenceProps()}
@@ -118,10 +101,20 @@ const Dropdown = ({
         aria-expanded={isOpen}
         data-state={isOpen ? 'open' : 'closed'}
       >
-        <span>{currentOption?.label}</span>
+        {/* every option's label rides along hidden so the trigger is as wide
+          * as its widest value — the panel matches the trigger's width, so
+          * trigger and list stay one piece at every selection */}
+        <span className="kol-dd-label">
+          <span>{currentOption?.label}</span>
+          {options.map((option) => (
+            <span key={option.value} className="kol-dd-ghost" aria-hidden="true">
+              {option.label}
+            </span>
+          ))}
+        </span>
         {/* chrome lives in .kol-dd-caret (trailing edge + open-state flip) —
           * keyed off the trigger's data-state, no inline styles */}
-        <Icon name="chevron-down" size={ICON_SIZE[resolvedSize]} className="kol-dd-caret" />
+        <Icon name="chevron-down" size={indicatorSize(resolvedSize)} className="kol-dd-caret" />
       </button>
 
       <PopoverPanel

package/src/organisms/Table.jsx

@@ -1,5 +1,6 @@
 import { useMemo, useState } from 'react'
 import { Icon } from '@kolkrabbi/kol-icons'
+import { INDICATOR } from '../hooks/glyphLadders.js'
 
 /**
  * Table — data table.
@@ -79,7 +80,7 @@ const Table = ({ caption, columns, rows, variant = 'default', className = '', wi
                   {column.header}
                   <Icon
                     name={sort.key === column.accessor && sort.dir === 'desc' ? 'chevron-down' : 'chevron-up'}
-                    size={12}
+                    size={INDICATOR.sm}
                     className={sort.key === column.accessor ? 'opacity-100' : 'opacity-0 group-hover:opacity-40'}
                   />
                 </button>