@kolkrabbi/kol-component 0.169.0 → 0.170.0

package/package.json

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

@@ -38,6 +38,7 @@ const FOCUSABLE =
  * @param {number|string} height    panel height (px number or CSS length); omit for a content-sized sheet — `bottom` only
  * @param {ReactNode}     header    header-row content beside the close button (replaces the source's baked-in wordmark)
  * @param {boolean}       backdrop  render the dimming scrim (default true); false = panel alone, no darken/blur, close via × / Esc
+ * @param {'xs'|'sm'|'md'|'lg'} closeSize  the close control's rung (default 'sm' — match the controls in the panel)
  * @param {ReactNode}     children  scrollable panel body
  * @param {string}        className extra classes on the panel
  */
@@ -50,6 +51,14 @@ export default function ShellDrawer({
   header,
   closeSide = 'end',
   backdrop = true,
+  /* THE CLOSE SITS ON THE ROW'S RUNG (user 2026-09-03, on the settings drawer:
+   * *"does this button follow the size ladder?"*). It was pinned `md` (32) while
+   * every control in the panel below it — the switches, the dropdowns, the reset
+   * frame — is `sm` (26), so the one control that is not a setting was the
+   * largest thing on the surface. A size is a height and a row is one height;
+   * `sm` is the default because a drawer header sits over its own controls.
+   * Named `closeSize`, not `size` — `size` is already the panel's own box. */
+  closeSize = 'sm',
   children,
   className = '',
   /* SettingsPanelApproved (2026-08-27): the settings drawer has neither */
@@ -207,7 +216,7 @@ export default function ShellDrawer({
           {closeSide !== 'start' && (
             <Button
               variant="nav"
-              size="md"
+              size={closeSize}
               iconOnly="x"
               onClick={onClose}
               aria-label="Close"

package/src/utilities/FullscreenOverlay.jsx

@@ -6,8 +6,11 @@ import Button from '../atoms/Button.jsx'
  * wears. Owns dismissal (Escape, backdrop, close button), scroll lock and
  * stacking; the consumer supplies the panel.
  *
- * The close control is the DS `Button` (quiet, icon-only, the `x` glyph) —
- * the same idiom as ShellLayout's. It was a hand-rolled <button> printing a
+ * The close control is the DS `Button` (icon-only, the `x` glyph) — the estate's
+ * ONE close idiom, and therefore ONE SIZE: `sm` (26), matching `ShellDrawer`'s
+ * (2026-09-03). It took Button's `md` default while the drawer's went to `sm`,
+ * which is two sizes for one idiom — the thing the single-idiom ruling exists to
+ * stop. It was a hand-rolled <button> printing a
  * literal `×` TEXT CHARACTER until 2026-08-01: no icon, no states, and a
  * typographic multiplication sign standing in for a glyph the icon set has
  * always shipped.
@@ -69,10 +72,11 @@ export default function FullscreenOverlay({ open, onClose, closeButton = true, c
            * user ruling): the estate's close X is the drawer trigger's bare
            * `nav` glyph — the boxed outline treatment was a second design one
            * tap away from the first, and had he kept a box it would have worn
-           * `primary`, never `outline`. Same variant, same default square as
-           * the trigger. */
+           * `primary`, never `outline`. Same variant as the trigger; the SQUARE
+           * is `sm` since 2026-09-03, one size for the one idiom. */
           <Button
             variant="nav"
+            size="sm"
             iconOnly="x"
             className="kol-overlay-close"
             onClick={onClose}