karnstack · karngyan · Aug 27, 2026
diff --git a/.changeset/small-forms-fit.md b/.changeset/small-forms-fit.md
@@ -0,0 +1,6 @@
+---
+"@karnstack/dowel": patch
+---
+
+Match dense desktop menus and pickers to the documented control scale while
+expanding labels and hit targets for touch input.
diff --git a/apps/docs/src/docs.css b/apps/docs/src/docs.css
@@ -1285,7 +1285,7 @@ body {
 .docs-gallery-item {
   display: flex;
   min-inline-size: 0;
-  min-block-size: 10rem;
+  min-block-size: 8.5rem;
   flex-direction: column;
   gap: var(--dowel-space-7);
   overflow: hidden;
@@ -1333,7 +1333,7 @@ body {
 }
 
 .docs-gallery-item[data-layout="wide"] {
-  min-block-size: 18rem;
+  min-block-size: 16rem;
 }
 
 .docs-gallery-item[data-layout="wide"] .docs-gallery-preview {
@@ -1396,13 +1396,13 @@ body {
   }
 
   .docs-gallery-item {
-    min-block-size: 10.5rem;
+    min-block-size: 9rem;
     padding: var(--dowel-space-7);
   }
 
   .docs-gallery-item[data-layout="wide"] {
     grid-column: 1 / -1;
-    min-block-size: 18rem;
+    min-block-size: 16rem;
   }
 }
 

diff --git a/packages/dowel/src/components/_shared/selection-control.stylex.ts b/packages/dowel/src/components/_shared/selection-control.stylex.ts
@@ -2,8 +2,14 @@ import * as stylex from "@stylexjs/stylex";
 
 import { tokens } from "../../theme/tokens.stylex";
 
+const COARSE = "@media (pointer: coarse)";
+
 export const control = stylex.create({
   root: {
+    "--dowel-selection-hit-size": {
+      default: "calc(100% + 0.75rem)",
+      [COARSE]: "3rem",
+    },
     alignItems: "center",
     appearance: "none",
     backgroundColor: tokens["--dowel-bg-surface-1"],
@@ -24,8 +30,12 @@ export const control = stylex.create({
     verticalAlign: "middle",
     "::before": {
       content: '""',
-      inset: "-0.375rem",
+      height: "var(--dowel-selection-hit-size)",
+      left: "50%",
       position: "absolute",
+      top: "50%",
+      transform: "translate(-50%, -50%)",
+      width: "var(--dowel-selection-hit-size)",
     },
     ":hover:not([data-disabled])": {
       backgroundColor: tokens["--dowel-bg-hover"],

diff --git a/packages/dowel/src/components/checkbox/checkbox.stylex.ts b/packages/dowel/src/components/checkbox/checkbox.stylex.ts
@@ -2,11 +2,13 @@ import * as stylex from "@stylexjs/stylex";
 
 import { tokens } from "../../theme/tokens.stylex";
 
+const COARSE = "@media (pointer: coarse)";
+
 export const checkbox = stylex.create({
   root: {
     borderRadius: tokens["--dowel-radius-sm"],
-    height: "1rem",
-    width: "1rem",
+    height: { default: "1rem", [COARSE]: "1.25rem" },
+    width: { default: "1rem", [COARSE]: "1.25rem" },
     "[data-indeterminate]": {
       backgroundColor: tokens["--dowel-accent"],
       borderColor: tokens["--dowel-accent"],

diff --git a/packages/dowel/src/components/command-menu/command-menu.stylex.ts b/packages/dowel/src/components/command-menu/command-menu.stylex.ts
@@ -74,7 +74,7 @@ export const command = stylex.create({
     borderBottomWidth: tokens["--dowel-hairline"],
     display: "flex",
     gap: "0.625rem",
-    minHeight: "3rem",
+    minHeight: { default: "2.5rem", [MOBILE]: "3rem" },
     paddingInline: "0.875rem",
   },
   searchIcon: { color: tokens["--dowel-text-tertiary"], flexShrink: 0 },
@@ -85,7 +85,7 @@ export const command = stylex.create({
     flex: 1,
     fontFamily: tokens["--dowel-font-sans"],
     fontSize: { default: "0.9375rem", [MOBILE]: "1rem" },
-    height: "3rem",
+    height: { default: "2.5rem", [MOBILE]: "3rem" },
     minWidth: 0,
     outline: "none",
     padding: 0,
@@ -106,12 +106,16 @@ export const command = stylex.create({
     cursor: "default",
     display: "flex",
     gap: "0.625rem",
-    minHeight: "2.5rem",
+    minHeight: { default: "2rem", [MOBILE]: "2.75rem" },
     outline: "none",
-    padding: "0.375rem 0.5rem",
+    paddingInline: "0.5rem",
     "[data-highlighted]": { backgroundColor: tokens["--dowel-bg-hover"] },
     "[data-disabled]": { color: tokens["--dowel-text-disabled"] },
   },
+  itemWithDescription: {
+    minHeight: { default: "2.5rem", [MOBILE]: "3.25rem" },
+    paddingBlock: "0.125rem",
+  },
   itemIcon: {
     alignItems: "center",
     color: tokens["--dowel-text-tertiary"],
@@ -121,7 +125,7 @@ export const command = stylex.create({
   itemCopy: { display: "flex", flex: 1, flexDirection: "column", minWidth: 0 },
   itemLabel: {
     fontFamily: tokens["--dowel-font-sans"],
-    fontSize: "0.8125rem",
+    fontSize: { default: "0.8125rem", [MOBILE]: "1rem" },
     lineHeight: 1.4,
     overflow: "hidden",
     textOverflow: "ellipsis",
@@ -130,7 +134,7 @@ export const command = stylex.create({
   itemDescription: {
     color: tokens["--dowel-text-tertiary"],
     fontFamily: tokens["--dowel-font-sans"],
-    fontSize: "0.75rem",
+    fontSize: { default: "0.75rem", [MOBILE]: "0.875rem" },
     lineHeight: 1.4,
     overflow: "hidden",
     textOverflow: "ellipsis",

diff --git a/packages/dowel/src/components/command-menu/index.tsx b/packages/dowel/src/components/command-menu/index.tsx
@@ -149,7 +149,11 @@ export function CommandMenu({
                         value={item}
                         disabled={item.disabled}
                         onClick={() => select(item)}
-                        {...sx(styles.command.item)}
+                        {...sx(
+                          styles.command.item,
+                          Boolean(item.description) &&
+                            styles.command.itemWithDescription,
+                        )}
                       >
                         {item.icon ? (
                           <span

diff --git a/packages/dowel/src/components/filter-picker/filter-picker.stylex.ts b/packages/dowel/src/components/filter-picker/filter-picker.stylex.ts
@@ -49,7 +49,7 @@ export const picker = stylex.create({
     borderBlockEndStyle: "solid",
     borderBlockEndWidth: tokens["--dowel-hairline"],
     display: "flex",
-    minHeight: "2.75rem",
+    minHeight: { default: "2.5rem", [MOBILE]: "3rem" },
     paddingInline: "0.75rem",
   },
   list: {
@@ -67,10 +67,10 @@ export const picker = stylex.create({
     cursor: "pointer",
     display: "flex",
     fontFamily: tokens["--dowel-font-sans"],
-    fontSize: "0.8125rem",
+    fontSize: { default: "0.8125rem", [MOBILE]: "1rem" },
     fontWeight: 500,
     gap: "0.5rem",
-    minHeight: "2rem",
+    minHeight: { default: "2rem", [MOBILE]: "2.75rem" },
     marginInline: "0.375rem",
     outline: "none",
     paddingInline: "0.625rem",

diff --git a/packages/dowel/src/components/radio-group/radio-group.stylex.ts b/packages/dowel/src/components/radio-group/radio-group.stylex.ts
@@ -2,16 +2,18 @@ import * as stylex from "@stylexjs/stylex";
 
 import { tokens } from "../../theme/tokens.stylex";
 
+const COARSE = "@media (pointer: coarse)";
+
 export const radio = stylex.create({
   root: {
     borderRadius: tokens["--dowel-radius-pill"],
-    height: "1rem",
-    width: "1rem",
+    height: { default: "1rem", [COARSE]: "1.25rem" },
+    width: { default: "1rem", [COARSE]: "1.25rem" },
   },
   indicator: {
     backgroundColor: "currentColor",
     borderRadius: tokens["--dowel-radius-pill"],
-    height: "0.375rem",
-    width: "0.375rem",
+    height: { default: "0.375rem", [COARSE]: "0.5rem" },
+    width: { default: "0.375rem", [COARSE]: "0.5rem" },
   },
 });
diff --git a/packages/dowel/src/components/select/index.tsx b/packages/dowel/src/components/select/index.tsx
@@ -135,7 +135,11 @@ export function Select({
                       value={option.value}
                       label={option.label}
                       disabled={option.disabled}
-                      {...stylex.props(styles.item.root)}
+                      {...stylex.props(
+                        styles.item.root,
+                        Boolean(option.description) &&
+                          styles.item.withDescription,
+                      )}
                     >
                       <span {...stylex.props(styles.item.copy)}>
                         <BaseSelect.ItemText

diff --git a/packages/dowel/src/components/select/select.stylex.ts b/packages/dowel/src/components/select/select.stylex.ts
@@ -118,7 +118,7 @@ export const item = stylex.create({
     display: "flex",
     gap: "0.5rem",
     marginInline: "0.25rem",
-    minHeight: "2.25rem",
+    minHeight: { default: "2rem", [MOBILE]: "2.75rem" },
     outline: "none",
     padding: "0.375rem 2rem 0.375rem 0.5rem",
     position: "relative",
@@ -135,21 +135,25 @@ export const item = stylex.create({
       opacity: 0.45,
     },
   },
+  withDescription: {
+    minHeight: { default: "2.75rem", [MOBILE]: "3.5rem" },
+    paddingBlock: "0.25rem",
+  },
   copy: {
     display: "flex",
     flexDirection: "column",
     gap: "0.125rem",
     minWidth: 0,
   },
   label: {
-    fontSize: "0.8125rem",
+    fontSize: { default: "0.8125rem", [MOBILE]: "1rem" },
     fontWeight: 500,
     letterSpacing: "-0.0125rem",
     lineHeight: 1.25,
   },
   description: {
     color: tokens["--dowel-text-tertiary"],
-    fontSize: "0.75rem",
+    fontSize: { default: "0.75rem", [MOBILE]: "0.875rem" },
     letterSpacing: "-0.0125rem",
     lineHeight: 1.25,
   },

diff --git a/packages/dowel/src/components/switch/switch.stylex.ts b/packages/dowel/src/components/switch/switch.stylex.ts
@@ -2,8 +2,14 @@ import * as stylex from "@stylexjs/stylex";
 
 import { tokens } from "../../theme/tokens.stylex";
 
+const COARSE = "@media (pointer: coarse)";
+
 export const control = stylex.create({
   root: {
+    "--dowel-switch-hit-size": {
+      default: "calc(100% + 0.75rem)",
+      [COARSE]: "3rem",
+    },
     alignItems: "center",
     appearance: "none",
     backgroundColor: tokens["--dowel-bg-surface-3"],
@@ -15,20 +21,24 @@ export const control = stylex.create({
     cursor: "default",
     display: "inline-flex",
     flexShrink: 0,
-    height: "1rem",
+    height: { default: "1rem", [COARSE]: "1.25rem" },
     justifyContent: "flex-start",
     outline: "none",
-    padding: "1.5px",
+    padding: { default: "1.5px", [COARSE]: "2px" },
     position: "relative",
     transitionDuration: tokens["--dowel-duration-fast"],
     transitionProperty: "border-color, background-color, color, opacity",
     transitionTimingFunction: tokens["--dowel-ease-out"],
     verticalAlign: "middle",
-    width: "1.75rem",
+    width: { default: "1.75rem", [COARSE]: "2.75rem" },
     "::before": {
       content: '""',
-      inset: "-0.375rem",
+      height: "var(--dowel-switch-hit-size)",
+      left: "50%",
       position: "absolute",
+      top: "50%",
+      transform: "translate(-50%, -50%)",
+      width: "var(--dowel-switch-hit-size)",
     },
     ":hover:not([data-disabled])": {
       backgroundColor: tokens["--dowel-border-strong"],
@@ -62,7 +72,7 @@ export const control = stylex.create({
     boxShadow: tokens["--dowel-shadow-control"],
     boxSizing: "border-box",
     display: "block",
-    height: "0.6875rem",
-    width: "0.6875rem",
+    height: { default: "0.6875rem", [COARSE]: "0.9375rem" },
+    width: { default: "0.6875rem", [COARSE]: "0.9375rem" },
   },
 });