@kolkrabbi/kol-component 0.25.0 → 0.26.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.25.0",
+  "version": "0.26.1",
   "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 → atoms}/ColorSwatch.jsx

@@ -34,7 +34,7 @@
  *   onClick         — if provided, renders as <button>; else <span>.
  *   title           — passes through.
  */
-import TransparentX from '../atoms/TransparentX'
+import TransparentX from './TransparentX'
 
 const SIZE_CLASSES = {
   fill:    'w-full aspect-square',

package/src/{molecules → atoms}/Image.jsx

@@ -6,7 +6,7 @@
  * visible at its intended size (aspect-ratio preserved).
  */
 import { useState } from 'react'
-import AssetPlaceholder from '../atoms/AssetPlaceholder'
+import AssetPlaceholder from './AssetPlaceholder'
 
 export default function Image({
   src,

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

@@ -25,28 +25,28 @@ export { default as Button } from './atoms/Button.jsx'
 export { default as CopyButton } from './atoms/CopyButton.jsx'
 export { default as CurveOverlay } from './atoms/CurveOverlay.jsx'
 export { default as Divider } from './atoms/Divider.jsx'
-export { default as DocsToc } from './atoms/DocsToc.jsx'
-export { default as DropdownTagFilter } from './atoms/DropdownTagFilter.jsx'
+export { default as DocsToc } from './molecules/DocsToc.jsx'
+export { default as DropdownTagFilter } from './molecules/DropdownTagFilter.jsx'
 export { default as EmptyState } from './atoms/EmptyState.jsx'
 export { default as IconFrame } from './atoms/IconFrame.jsx'
 export { default as ExitPreview } from './atoms/ExitPreview.jsx'
 export { default as Figure } from './atoms/Figure.jsx'
-export { default as FullscreenOverlay } from './atoms/FullscreenOverlay.jsx'
+export { default as FullscreenOverlay } from './molecules/FullscreenOverlay.jsx'
 export { default as HlsVideo } from './atoms/HlsVideo.jsx'
 export { default as Input } from './atoms/Input.jsx'
 export { default as Label } from './atoms/Label.jsx'
-export { default as LabeledControl } from './atoms/LabeledControl.jsx'
+export { default as LabeledControl } from './molecules/LabeledControl.jsx'
 export { default as OverlayGlassPanel } from './atoms/OverlayGlassPanel.jsx'
 export { default as Pill } from './atoms/Pill.jsx'
 export { usePopover, PopoverPanel, Tooltip } from './atoms/Popover.jsx'
 export { default as ProsePreview } from './atoms/ProsePreview.jsx'
-export { default as QuantityInput } from './atoms/QuantityInput.jsx'
+export { default as QuantityInput } from './molecules/QuantityInput.jsx'
 export { default as RotaryDial } from './atoms/RotaryDial.jsx'
-export { default as SearchInput } from './atoms/SearchInput.jsx'
-export { default as Section } from './atoms/Section.jsx'
+export { default as SearchInput } from './molecules/SearchInput.jsx'
+export { default as Section } from './molecules/Section.jsx'
 export { default as SectionLabel } from './atoms/SectionLabel.jsx'
 export { default as SegmentedToggle } from './atoms/SegmentedToggle.jsx'
-export { default as Stepper } from './atoms/Stepper.jsx'
+export { default as Stepper } from './molecules/Stepper.jsx'
 export { default as Tag } from './atoms/Tag.jsx'
 export { default as Textarea } from './atoms/Textarea.jsx'
 export { default as ToggleBracket } from './atoms/ToggleBracket.jsx'
@@ -63,30 +63,30 @@ export { default as ButtonGroup } from './molecules/ButtonGroup.jsx'
 export { default as AlignmentGrid } from './molecules/AlignmentGrid.jsx'
 export { default as ImageBlock } from './molecules/ImageBlock.jsx'
 export { default as InteractiveImage } from './atoms/InteractiveImage.jsx'
-export { default as SelectionOverlay } from './molecules/SelectionOverlay.jsx'
+export { default as SelectionOverlay } from './atoms/SelectionOverlay.jsx'
 export { default as VideoBlock, getEmbedUrl } from './molecules/VideoBlock.jsx'
 export { default as CardFeatureItem } from './molecules/CardFeatureItem.jsx'
 export { default as CodeBlock } from './molecules/CodeBlock.jsx'
 export { default as ColorInputRow } from './molecules/ColorInputRow.jsx'
 export { default as ColorRamp } from './molecules/ColorRamp.jsx'
-export { default as ColorSwatch } from './molecules/ColorSwatch.jsx'
+export { default as ColorSwatch } from './atoms/ColorSwatch.jsx'
 export { default as Dropdown } from './molecules/Dropdown.jsx'
 export { default as FieldRow, StatusChip } from './molecules/FieldRow.jsx'
-export { default as FramedMediaBand } from './molecules/FramedMediaBand.jsx'
-export { default as Image } from './molecules/Image.jsx'
+export { default as FramedMediaBand } from './organisms/FramedMediaBand.jsx'
+export { default as Image } from './atoms/Image.jsx'
 export { default as MediaCard } from './molecules/MediaCard.jsx'
 export { default as MediaRow } from './molecules/MediaRow.jsx'
 export { MenuItem, MenuDropdownItem, MenuDropdownDivider, MenuDropdownNest } from './molecules/MenuItem.jsx'
 export { MenuPopover } from './molecules/MenuPopover.jsx'
 export { ModalProvider, useModal } from './molecules/Modal.jsx'
-export { default as PaletteHarmonyWheel } from './molecules/PaletteHarmonyWheel.jsx'
+export { default as PaletteHarmonyWheel } from './atoms/PaletteHarmonyWheel.jsx'
 export { default as PropertyInput } from './molecules/PropertyInput.jsx'
 export { default as ShapeDropdown } from './molecules/ShapeDropdown.jsx'
 export { default as ShellDrawer } from './molecules/ShellDrawer.jsx'
-export { default as ShellSearchOverlay } from './molecules/ShellSearchOverlay.jsx'
+export { default as ShellSearchOverlay } from './organisms/ShellSearchOverlay.jsx'
 export { default as Slider } from './molecules/Slider.jsx'
 export { default as SpecList } from './molecules/SpecList.jsx'
-export { default as SpectrumControls, HueStrip, SBSquare, WheelTriangle } from './molecules/SpectrumControls.jsx'
+export { default as SpectrumControls, HueStrip, SBSquare, WheelTriangle } from './organisms/SpectrumControls.jsx'
 export { default as SplitToolButton } from './molecules/SplitToolButton.jsx'
 export { default as SwatchControls, SwatchStack, EyedropPick } from './molecules/SwatchControls.jsx'
 export { default as TabsRow } from './molecules/TabsRow.jsx'
@@ -98,18 +98,18 @@ export { default as TabsRow } from './molecules/TabsRow.jsx'
 export { default as Canvas, CanvasFrame, PanViewport, CANVAS_VIRTUAL_W, DEFAULT_ASPECTS, CANVAS_DEFAULTS } from './organisms/Canvas.jsx'
 export { default as EditorShell } from './organisms/EditorShell.jsx'
 export { default as GalleryCarousel } from './organisms/GalleryCarousel.jsx'
-export { default as AsciiCursor } from './organisms/AsciiCursor.jsx'
-export { default as BentoCard } from './organisms/BentoCard.jsx'
-export { default as Carousel } from './organisms/Carousel.jsx'
+export { default as AsciiCursor } from './atoms/AsciiCursor.jsx'
+export { default as BentoCard } from './molecules/BentoCard.jsx'
+export { default as Carousel } from './molecules/Carousel.jsx'
 export { default as ContentFilters } from './organisms/ContentFilters.jsx'
 export { default as CtaGlobal } from './organisms/CtaGlobal.jsx'
-export { default as ErrorBoundary } from './organisms/ErrorBoundary.jsx'
+export { default as ErrorBoundary } from './molecules/ErrorBoundary.jsx'
 export { default as FeatureSplit } from './organisms/FeatureSplit.jsx'
 export { default as FeaturedCarousel } from './organisms/FeaturedCarousel.jsx'
 export { default as FeaturesCardSection } from './organisms/FeaturesCardSection.jsx'
 export { default as FoundryCTA } from './organisms/FoundryCTA.jsx'
 export { default as FullBleedHero } from './organisms/FullBleedHero.jsx'
-export { default as LoaderOverlay } from './organisms/LoaderOverlay.jsx'
+export { default as LoaderOverlay } from './molecules/LoaderOverlay.jsx'
 export { default as MediaLibrary, MediaLibraryProvider, useMediaLibrary, MediaPicker, MediaBrowser } from './organisms/MediaLibrary.jsx'
 export { default as MediaTileGallery } from './organisms/MediaTileGallery.jsx'
 export { default as MediaViewer } from './organisms/MediaViewer.jsx'
@@ -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/Accordion.jsx

@@ -1,9 +1,6 @@
 /**
  * Accordion — collapsible panel group.
  *
- * taxonomy-ok: molecule — Accordion nests AccordionPanel in this same file,
- * which the import-based validator can't see.
- *
  * Composition-based: <Accordion> wraps <AccordionPanel> children. Each panel
  * owns its open/closed state independently (additive — multiple can be open).
  * For single-open behavior, manage state from the parent and pass controlled

package/src/{organisms → molecules}/BentoCard.jsx

@@ -3,7 +3,7 @@ import { motion } from 'framer-motion'
 import HlsVideo from '../atoms/HlsVideo.jsx'
 import AssetPlaceholder from '../atoms/AssetPlaceholder.jsx'
 import Button from '../atoms/Button.jsx'
-import Image from '../molecules/Image.jsx'
+import Image from '../atoms/Image.jsx'
 import useTilt from '../hooks/useTilt.js'
 import usePrefersReducedMotion from '../hooks/usePrefersReducedMotion.js'
 

package/src/molecules/ButtonGroup.jsx

@@ -1,5 +1,3 @@
-/* taxonomy-ok: composes consumer-passed Buttons via children — nesting happens at the call site */
-
 /**
  * ButtonGroup — responsive layout wrapper for a group of Buttons: stacked
  * full-width on mobile, horizontal row from `sm` up, aligned left / center /

package/src/molecules/CodeBlock.jsx

@@ -3,10 +3,6 @@ import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
 import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism'
 import { Icon } from '@kolkrabbi/kol-icons'
 
-/* taxonomy-ok: molecule — nests <Icon> from @kolkrabbi/kol-icons (the copy
- * affordance). The gate only counts kol-component nesting, so a molecule whose
- * only KOL child lives in a sibling package reads as an atom to it. */
-
 /**
  * CodeBlock — REPLICATED from the elder reference
  * (kol-website/packages/ui/src/molecules/CodeBlock.jsx, 2026-07-28 user

package/src/molecules/ColorInputRow.jsx

@@ -1,6 +1,6 @@
 import { useState } from 'react'
 import { Icon } from '@kolkrabbi/kol-icons'
-import ColorSwatch from './ColorSwatch'
+import ColorSwatch from '../atoms/ColorSwatch'
 import Input from '../atoms/Input'
 import { usePopover, PopoverPanel } from '../atoms/Popover'
 

package/src/molecules/ColorRamp.jsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react'
-import ColorSwatch from './ColorSwatch.jsx'
+import ColorSwatch from '../atoms/ColorSwatch.jsx'
 import { resolveCssVar, isLight } from '../hooks/cssVar.js'
 
 /**

package/src/{atoms → molecules}/DocsToc.jsx

@@ -1,9 +1,5 @@
 import useScrollSpy from '../hooks/useScrollSpy.js'
 
-/* taxonomy-ok: atoms despite being interactive — it composes only the
- * useScrollSpy hook, and hooks don't count as nesting; no KOL component
- * is rendered (nav + anchors only). */
-
 /**
  * DocsToc — on-page table of contents for long docs pages: a flat list of
  * anchor links that highlights the heading currently in view. The scroll

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/{atoms → molecules}/FullscreenOverlay.jsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef } from 'react'
-import Button from './Button.jsx'
+import Button from '../atoms/Button.jsx'
 
 /**
  * FullscreenOverlay — the scrim + centred sheet every overlay in the repo

package/src/molecules/ImageBlock.jsx

@@ -1,5 +1,5 @@
 import Figure from '../atoms/Figure.jsx'
-import Image from './Image.jsx'
+import Image from '../atoms/Image.jsx'
 
 /**
  * ImageBlock — a captioned prose image: the DS Figure shell (optional label,

package/src/{organisms → molecules}/LoaderOverlay.jsx

@@ -1,4 +1,4 @@
-import FullscreenOverlay from '../atoms/FullscreenOverlay.jsx'
+import FullscreenOverlay from './FullscreenOverlay.jsx'
 
 /**
  * LoaderOverlay — mounts a loading curtain over everything, dead center. A thin

package/src/molecules/PropertyInput.jsx

@@ -7,7 +7,7 @@
  */
 import Label from '../atoms/Label'
 import Input from '../atoms/Input.jsx'
-import Stepper from '../atoms/Stepper'
+import Stepper from './Stepper'
 
 export default function PropertyInput({
   label,

package/src/molecules/SwatchControls.jsx

@@ -1,11 +1,6 @@
 import { useEffect, useState } from 'react'
 import { Icon } from '@kolkrabbi/kol-icons'
-import ColorSwatch from './ColorSwatch.jsx'
-
-/* taxonomy-ok: the default composed control nests the same-file SwatchStack
- * and EyedropPick (KOL named exports the relative-import check can't see);
- * both collapse the source's internal FramedSwatch onto the sibling molecule
- * ColorSwatch (a same-tier relative import). */
+import ColorSwatch from '../atoms/ColorSwatch.jsx'
 
 /*
  * SwatchControls — the Photoshop-style top row of the colour panel, in two

package/src/organisms/FeaturedCarousel.jsx

@@ -1,6 +1,6 @@
 import { isValidElement, useCallback, useEffect, useState } from 'react'
 import useEmblaCarousel from 'embla-carousel-react'
-import Image from '../molecules/Image.jsx'
+import Image from '../atoms/Image.jsx'
 import HlsVideo from '../atoms/HlsVideo.jsx'
 import OverlayGlassPanel from '../atoms/OverlayGlassPanel.jsx'
 

package/src/{molecules → organisms}/FramedMediaBand.jsx

@@ -1,4 +1,4 @@
-import Image from './Image'
+import Image from '../atoms/Image'
 
 /**
  * FramedMediaBand — full-width media breather band: a centered, aspect-locked

package/src/organisms/FullBleedHero.jsx

@@ -1,6 +1,6 @@
 import { isValidElement } from 'react'
 import HlsVideo from '../atoms/HlsVideo.jsx'
-import Image from '../molecules/Image.jsx'
+import Image from '../atoms/Image.jsx'
 
 /** Height presets; anything else is passed through as a class string. */
 const HEIGHTS = {

package/src/organisms/GalleryCarousel.jsx

@@ -1,5 +1,5 @@
 import { useRef, useState } from 'react'
-import Carousel from './Carousel.jsx'
+import Carousel from '../molecules/Carousel.jsx'
 import MediaViewer from './MediaViewer.jsx'
 
 /* Drag-vs-click guard: DS Carousel owns Embla's drag physics but does NOT

package/src/organisms/MediaLibrary.jsx

@@ -2,7 +2,7 @@ import { createContext, useContext, useEffect, useMemo, useState } from 'react'
 import { Icon } from '@kolkrabbi/kol-icons'
 import Button from '../atoms/Button.jsx'
 import SegmentedToggle from '../atoms/SegmentedToggle.jsx'
-import FullscreenOverlay from '../atoms/FullscreenOverlay.jsx'
+import FullscreenOverlay from '../molecules/FullscreenOverlay.jsx'
 import MediaCard from '../molecules/MediaCard.jsx'
 import MediaRow from '../molecules/MediaRow.jsx'
 import ContentFilters from './ContentFilters.jsx'

package/src/organisms/MediaViewer.jsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react'
 import useEmblaCarousel from 'embla-carousel-react'
 import { Icon } from '@kolkrabbi/kol-icons'
-import FullscreenOverlay from '../atoms/FullscreenOverlay.jsx'
+import FullscreenOverlay from '../molecules/FullscreenOverlay.jsx'
 
 /**
  * MediaViewer — THE fullscreen paged media viewer. One viewer for every

package/src/organisms/RecordManager.jsx

@@ -2,7 +2,7 @@ import { useMemo, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
 import { Icon } from '@kolkrabbi/kol-icons'
 import Button from '../atoms/Button'
-import SearchInput from '../atoms/SearchInput'
+import SearchInput from '../molecules/SearchInput'
 import ToggleCheckbox from '../atoms/ToggleCheckbox'
 import ShellDrawer from '../molecules/ShellDrawer'
 import Dropdown from '../molecules/Dropdown'

package/src/{molecules → organisms}/ShellSearchOverlay.jsx

@@ -1,5 +1,5 @@
 import { useEffect, useId, useRef, useState } from 'react'
-import SearchInput from '../atoms/SearchInput.jsx'
+import SearchInput from '../molecules/SearchInput.jsx'
 import Tag from '../atoms/Tag.jsx'
 
 /**

package/src/organisms/SpectrumGrid.jsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react'
-import ColorSwatch from '../molecules/ColorSwatch.jsx'
+import ColorSwatch from '../atoms/ColorSwatch.jsx'
 import { resolveCssVar, resolveCssColor, isLight } from '../hooks/cssVar.js'
 
 /**

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>