@kolkrabbi/kol-component 0.64.0 → 0.66.0

package/package.json

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

@@ -10,15 +10,24 @@ import React from 'react'
  * @param {Object} props
  * @param {string} props.variant - 'horizontal' or 'vertical' (default: 'horizontal')
  * @param {string} props.className - Additional classes
+ * @param {number} props.height - vertical variant only: the rule's height in px
+ *   (default 16 — sized to the type it separates, not to the row)
  * @param {string} props.opacity - Opacity level (01, 02, 04, 08, 12, 16, 24, 32, 48, 64, 80, 88, 96) (default: '08')
  */
-const Divider = ({ variant = 'horizontal', className = '', opacity = '08', inverse = false }) => {
+const Divider = ({ variant = 'horizontal', className = '', opacity = '08', inverse = false, height = 16 }) => {
   const isVertical = variant === 'vertical'
   const opacityClass = inverse ? `bg-fg-inverse-${opacity}` : `bg-fg-${opacity}`
 
   if (isVertical) {
+    /* THE RULE IS CENTRED ON WHAT IT SEPARATES, not stretched to the row.
+     *
+     * This hardcoded `self-stretch` AHEAD of `className`, so the wrapper always
+     * filled the flex line — a row whose height comes from 32px icon buttons
+     * gave a rule taller than the 18px type beside it, and any `self-*` passed
+     * from a call site lost to the hardcoded one. `align-self: center` with an
+     * explicit height puts it back on the type; `height` stays overridable. */
     return (
-      <div className={`self-stretch flex justify-center items-center ${className}`.trim()}>
+      <div className={`flex self-center items-center justify-center ${className}`.trim()} style={{ height }}>
         <div className={opacityClass} style={{ width: '1px', height: '100%' }} />
       </div>
     )

package/src/molecules/SearchInput.jsx

@@ -111,6 +111,20 @@ export default function SearchInput({
    * served the second case and silently broke the first. */
   const fieldH = fieldHeight ?? square
 
+  /* THE GLYPH WAITS FOR THE COLLAPSE. Mounting it the instant `isOpen` flips
+   * put a search icon inside a 200px pill that was still shrinking around it —
+   * the one frame of the animation that looks like a bug. It reappears at
+   * 520ms, just under the 600ms `.kol-expand` width transition, so it lands as
+   * the pill arrives rather than riding it down. Opening hides it immediately:
+   * the field should take the space at once. */
+  const [glyphIn, setGlyphIn] = useState(!open)
+  useEffect(() => {
+    if (!expanding) return undefined
+    if (isOpen) { setGlyphIn(false); return undefined }
+    const t = setTimeout(() => setGlyphIn(true), 520)
+    return () => clearTimeout(t)
+  }, [expanding, isOpen])
+
   /* Escape closes, and so does clicking away — a field that can only be closed
    * by emptying it and blurring is a trap, and this one had neither wired. The
    * listener only exists while open. */
@@ -147,7 +161,7 @@ export default function SearchInput({
             2026-08-15). Once the field is open the caret is the affordance;
             keeping the magnifier there spends the widest part of the pill
             restating what the blinking cursor already says. */}
-        {!isOpen && (
+        {glyphIn && !isOpen && (
           <button
             type="button"
             className="flex items-center justify-center rounded-full text-auto flex-shrink-0 border border-transparent transition-colors hover:border-oq-08"

package/src/organisms/ContentFilters.jsx

@@ -81,12 +81,12 @@ const ContentFilters = ({
   /* THE LOOK SEAMS. Every one defaults to what the component shipped, so
    * passing nothing renders exactly as before — these exist because the
    * hardcoded values were the wrong call for every consumer but one. */
-  /* SENTENCE CASE (user ruling 2026-08-15, reversing the uppercase pass an
-   * hour earlier). The title is a NAME, not a label — the strips are chrome and
-   * wear caps; the thing being filtered keeps its own casing. Same rung as
-   * RECENT/SAVED, different casing, and that difference is the point. */
+  /* HELPER + UPPERCASE. The title is part of the header STRIP — same chrome as
+   * RECENT/SAVED beside it — and helper is the single-line ramp that strip
+   * runs on. Casing and ramp are separate props precisely so a consumer whose
+   * titles wrap can move to `kol-mono-14` without losing the casing. */
   titleClassName = 'kol-helper-14',
-  titleUppercase = false,
+  titleUppercase = true,
   labelClassName = 'kol-helper-12 text-fg-96',
   labelUppercase = true,
   tagVariant = 'primary',
@@ -276,7 +276,7 @@ const ContentFilters = ({
             {titleIcon && <IconFrame name={titleIcon} variant="secondary" size="md" />}
             <span className={titleClassName} style={titleUppercase ? { textTransform: 'uppercase', letterSpacing: 1 } : undefined}>{title}</span>
           </h2>
-          <Divider variant="vertical" className="self-stretch py-1" />
+          <Divider variant="vertical" />
           <div className="flex items-center gap-1">
             {/* IconFrame, not a kol-btn with its chrome cancelled inline.
               * 05-control-chrome.md:109 — "any icon-only control in chrome is