@rokkit/themes 1.1.9 → 1.1.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/themes",
-  "version": "1.1.9",
+  "version": "1.1.11",
   "description": "Theme styles for @rokkit/ui components",
   "repository": {
     "type": "git",
@@ -103,10 +103,10 @@
   "build": "bun run build.mjs"
 },
 "dependencies": {
-  "@rokkit/core": "1.1.9"
+  "@rokkit/core": "1.1.11"
 },
 "devDependencies": {
-  "@rokkit/unocss": "1.1.9",
+  "@rokkit/unocss": "1.1.11",
   "magic-string": "^0.30.21",
   "unocss": "^66.5.1"
 },

package/src/base/button.css

@@ -67,14 +67,14 @@
 
 /* Small */
 [data-button][data-size='sm'] {
-  height: 1.75rem;
+  height: var(--control-h-sm);
   padding-inline: 0.625rem;
   font-size: 0.75rem;
   gap: 0.375rem;
 }
 
 [data-button][data-size='sm'][data-icon-only] {
-  width: 1.75rem;
+  width: var(--control-h-sm);
 }
 
 [data-button][data-size='sm'] [data-item-icon],
@@ -85,7 +85,7 @@
 /* Medium (default) — responds to density */
 [data-button][data-size='md'],
 [data-button]:not([data-size]) {
-  height: calc(var(--density-icon-size) + var(--density-spacing-sm) * 2);
+  height: var(--control-h-md);
   padding-inline: var(--density-spacing-lg);
   font-size: 0.875rem;
   gap: var(--density-spacing-sm);
@@ -93,7 +93,7 @@
 
 [data-button][data-size='md'][data-icon-only],
 [data-button]:not([data-size])[data-icon-only] {
-  width: calc(var(--density-icon-size) + var(--density-spacing-sm) * 2);
+  width: var(--control-h-md);
 }
 
 [data-button][data-size='md'] [data-item-icon],
@@ -105,14 +105,14 @@
 
 /* Large */
 [data-button][data-size='lg'] {
-  height: 2.75rem;
+  height: var(--control-h-lg);
   padding-inline: 1.5rem;
   font-size: 1rem;
   gap: 0.625rem;
 }
 
 [data-button][data-size='lg'][data-icon-only] {
-  width: 2.75rem;
+  width: var(--control-h-lg);
 }
 
 [data-button][data-size='lg'] [data-item-icon],

package/src/base/density.css

@@ -7,6 +7,15 @@
  * Axes: compact → comfortable (default) → cozy
  */
 
+/* Control heights — fixed scale (rem, so they track font-size). Density drives
+   internal spacing/padding/typography, NOT the control height, so same-size
+   controls (button, select, dropdown, menu, toggle, input) always align. */
+:root {
+  --control-h-sm: 1.75rem;
+  --control-h-md: 2.25rem;
+  --control-h-lg: 2.75rem;
+}
+
 :root,
 [data-density='comfortable'] {
   --density-spacing-base: 1rem;

package/src/base/dropdown.css

@@ -47,20 +47,20 @@
 
 /* Size variants */
 [data-dropdown][data-size='sm'] [data-dropdown-trigger] {
-  height: 1.5rem;
+  height: var(--control-h-sm);
   padding-inline: 0.5rem;
   font-size: 0.75rem;
 }
 
 [data-dropdown][data-size='md'] [data-dropdown-trigger],
 [data-dropdown]:not([data-size]) [data-dropdown-trigger] {
-  height: calc(var(--density-icon-size) + var(--density-spacing-xs) * 2);
+  height: var(--control-h-md);
   padding-inline: var(--density-spacing-md);
   font-size: 0.875rem;
 }
 
 [data-dropdown][data-size='lg'] [data-dropdown-trigger] {
-  height: 2.5rem;
+  height: var(--control-h-lg);
   padding-inline: 0.75rem;
   font-size: 1rem;
 }

package/src/base/input.css

@@ -169,6 +169,11 @@ button[data-form-reset]:disabled {
 [data-input-root] [data-select] [data-select-trigger] {
   @apply flex-1 self-stretch;
   min-width: 0;
+  /* Fill the field (via self-stretch) instead of imposing the standalone control
+     height — so a control embedded in a form field is the same height as a plain
+     field (the wrapper owns the height). Any control embedded in [data-input-root]
+     should follow this contract. */
+  height: auto;
 }
 
 /* Checkbox icon */
@@ -201,6 +206,10 @@ button[data-form-reset]:disabled {
 /* Input wrapper: horizontal for input + icon */
 [data-input-root] {
   @apply flex flex-row items-center;
+  /* Align to the shared control-height scale so a text field lines up with
+     buttons/selects/etc. at the default (md) size. min-height (not height) so
+     a textarea still grows past one line. */
+  min-height: var(--control-h-md);
 }
 
 /* Input elements fill available width */

package/src/base/menu.css

@@ -48,20 +48,20 @@
 
 /* Size variants */
 [data-menu][data-size='sm'] [data-menu-trigger] {
-  height: 1.5rem;
+  height: var(--control-h-sm);
   padding-inline: 0.5rem;
   font-size: 0.75rem;
 }
 
 [data-menu][data-size='md'] [data-menu-trigger],
 [data-menu]:not([data-size]) [data-menu-trigger] {
-  height: calc(var(--density-icon-size) + var(--density-spacing-xs) * 2);
+  height: var(--control-h-md);
   padding-inline: var(--density-spacing-md);
   font-size: 0.875rem;
 }
 
 [data-menu][data-size='lg'] [data-menu-trigger] {
-  height: 2.5rem;
+  height: var(--control-h-lg);
   padding-inline: 0.75rem;
   font-size: 1rem;
 }

package/src/base/pill.css

@@ -11,6 +11,9 @@
   white-space: nowrap;
   outline: none;
   vertical-align: middle;
+  /* Align to the smallest control rung (pills are the compact end of the family);
+     min-height so content can still grow. */
+  min-height: var(--control-h-sm);
 }
 
 [data-pill-icon] {

package/src/base/range.css

@@ -13,7 +13,8 @@
   position: relative;
   display: grid;
   grid-template-rows: auto auto;
-  height: 2.5rem;
+  /* Align to the shared control-height scale (no size prop → md). */
+  height: var(--control-h-md);
   user-select: none;
 }
 

package/src/base/select.css

@@ -49,20 +49,20 @@
 
 /* Size variants */
 [data-select][data-size='sm'] [data-select-trigger] {
-  height: 1.75rem;
+  height: var(--control-h-sm);
   padding-inline: 0.5rem;
   font-size: 0.75rem;
 }
 
 [data-select][data-size='md'] [data-select-trigger],
 [data-select]:not([data-size]) [data-select-trigger] {
-  height: 2.25rem;
+  height: var(--control-h-md);
   padding-inline: 0.75rem;
   font-size: 0.875rem;
 }
 
 [data-select][data-size='lg'] [data-select-trigger] {
-  height: 2.75rem;
+  height: var(--control-h-lg);
   padding-inline: 1rem;
   font-size: 1rem;
 }

package/src/base/switch.css

@@ -30,6 +30,22 @@
   cursor: not-allowed;
 }
 
+/* Bounding height aligns to the shared control scale (so a switch lines up with
+   buttons/inputs/etc. in a row); the track/thumb keep their geometry, centered
+   via align-items: center. */
+[data-switch][data-switch-size='sm'] {
+  min-height: var(--control-h-sm);
+}
+
+[data-switch][data-switch-size='md'],
+[data-switch]:not([data-switch-size]) {
+  min-height: var(--control-h-md);
+}
+
+[data-switch][data-switch-size='lg'] {
+  min-height: var(--control-h-lg);
+}
+
 /* =============================================================================
    Track
    ============================================================================= */

package/src/base/toggle.css

@@ -65,7 +65,7 @@
 
 /* Small */
 [data-toggle][data-toggle-size='sm'] [data-toggle-option] {
-  height: 1.5rem;
+  height: var(--control-h-sm);
   font-size: 0.75rem;
   gap: 0.25rem;
 }
@@ -85,7 +85,7 @@
 /* Medium (default) */
 [data-toggle][data-toggle-size='md'] [data-toggle-option],
 [data-toggle]:not([data-toggle-size]) [data-toggle-option] {
-  height: 2rem;
+  height: var(--control-h-md);
   font-size: 0.875rem;
   gap: 0.375rem;
 }
@@ -107,7 +107,7 @@
 
 /* Large */
 [data-toggle][data-toggle-size='lg'] [data-toggle-option] {
-  height: 2.5rem;
+  height: var(--control-h-lg);
   font-size: 1rem;
   gap: 0.5rem;
 }
@@ -169,17 +169,17 @@
 
 /* Square control sized to match the option height scale */
 [data-toggle][data-toggle-variant='button'][data-toggle-size='sm'] {
-  height: 1.5rem;
-  min-width: 1.5rem;
+  height: var(--control-h-sm);
+  min-width: var(--control-h-sm);
 }
 
 [data-toggle][data-toggle-variant='button'][data-toggle-size='md'],
 [data-toggle][data-toggle-variant='button']:not([data-toggle-size]) {
-  height: 2rem;
-  min-width: 2rem;
+  height: var(--control-h-md);
+  min-width: var(--control-h-md);
 }
 
 [data-toggle][data-toggle-variant='button'][data-toggle-size='lg'] {
-  height: 2.5rem;
-  min-width: 2.5rem;
+  height: var(--control-h-lg);
+  min-width: var(--control-h-lg);
 }