@kolkrabbi/kol-component 0.12.6 → 0.12.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.12.6",
+  "version": "0.12.8",
   "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/molecules/Dropdown.jsx

@@ -20,6 +20,11 @@ import { PopoverPanel, usePopover } from '../atoms/Popover.jsx'
  *
  * Legacy aliases (pre-law variants, kept so call-sites don't break):
  *   default → primary · subtle → primary · minimal → outline
+ *
+ * Size: dropdowns are `sm` at EVERY viewport unless the consumer passes an
+ * explicit `size` prop (user law 2026-07-28 — desktop is sm, always, and
+ * smaller viewports never resolve larger than desktop). The old auto-ramp
+ * (lg ≥1024 / md ≥768 / sm below) is gone.
  */
 
 const SIZE_TYPE = { sm: 'kol-mono-12', md: 'kol-mono-14', lg: 'kol-mono-16' }
@@ -37,9 +42,11 @@ const Dropdown = ({
   className = ''
 }) => {
   const [isOpen, setIsOpen] = useState(defaultOpen)
-  const [resolvedSize, setResolvedSize] = useState('md')
   const [dropdownWidth, setDropdownWidth] = useState('100px')
 
+  // sm everywhere unless explicitly overridden (see docblock size law).
+  const resolvedSize = size || 'sm'
+
   const resolvedVariant = LEGACY_VARIANTS[variant] || variant
 
   /* Floating-ui popover. `flip: false` keeps the panel below the button
@@ -56,35 +63,6 @@ const Dropdown = ({
     role: 'listbox',
   })
 
-  useEffect(() => {
-    const determineSize = () => {
-      if (size) {
-        setResolvedSize(size)
-        return
-      }
-
-      if (typeof window === 'undefined') {
-        setResolvedSize('md')
-        return
-      }
-
-      if (window.innerWidth >= 1024) {
-        setResolvedSize('lg')
-      } else if (window.innerWidth >= 768) {
-        setResolvedSize('md')
-      } else {
-        setResolvedSize('sm')
-      }
-    }
-
-    determineSize()
-    window.addEventListener('resize', determineSize)
-
-    return () => {
-      window.removeEventListener('resize', determineSize)
-    }
-  }, [size])
-
   // Width management — 100px mobile, 140px tablet, 180px desktop
   useEffect(() => {
     const updateWidth = () => {

package/src/organisms/ContentFilters.jsx

@@ -150,7 +150,8 @@ const ContentFilters = ({
               style={{
                 height: 28,
                 width: searchOpen ? 200 : 28,
-                background: searchOpen ? 'var(--kol-opacity-hex-04, rgba(255,255,255,0.04))' : 'transparent',
+                background: searchOpen ? 'var(--kol-fg-04)' : 'transparent',
+                border: searchOpen ? '1px solid var(--kol-fg-08)' : '1px solid transparent',
                 transition: 'width 600ms cubic-bezier(0.16, 1, 0.3, 1), background 400ms cubic-bezier(0.16, 1, 0.3, 1)',
                 overflow: 'hidden',
               }}
@@ -203,19 +204,15 @@ const ContentFilters = ({
               {filteredItems.length} of {totalCount}
             </span>
           )}
+          {/* View-mode toggle — active = filled chip, inactive = bare text
+            * (user ruling 2026-07-28, live look). ViewToggle's text variant IS
+            * that pattern (kol-control--filled active / bare inactive). */}
           {viewModeOptions && (
-            <div className="flex gap-6">
-              {viewModeOptions.map((opt) => (
-                <span
-                  key={opt.value}
-                  onClick={() => handleViewModeChange(opt.value)}
-                  className={`kol-helper-14 cursor-pointer select-none ${viewMode === opt.value ? 'text-fg-96' : 'text-fg-32 hover:text-fg-48'}`}
-                  style={{ letterSpacing: 1 }}
-                >
-                  {opt.label}
-                </span>
-              ))}
-            </div>
+            <ViewToggle
+              viewMode={viewMode}
+              onViewChange={handleViewModeChange}
+              options={viewModeOptions}
+            />
           )}
         </div>
       </div>