@smwb/ui-styles 2.2.0 → 2.3.0

package/less/components/chip/chip.less

@@ -134,6 +134,17 @@
     min-height: 24px;
     padding: 0 @smui-space-sm;
     font-size: 0.75rem;
+
+    // On a coarse pointer a small chip that is a button or a link is as tall as the sm step
+    // (44px there): its content is the button (the link is the box itself), and the box is
+    // what a finger has to hit. A small chip that only labels, or only deletes, stays 24px.
+    @media (pointer: coarse) {
+      &:is(a[href]),
+      &:has(> .smwb-chip__content[role="button"]) {
+        height: var(--smui-control-h-sm, @smui-control-h-sm-coarse);
+        min-height: var(--smui-control-h-sm, @smui-control-h-sm-coarse);
+      }
+    }
   }
 
   // A color repaints the neutral filled/outlined rules above. The guard mirrors

package/less/components/list/list.less

@@ -62,6 +62,9 @@
       min-height: 36px;
       padding-top: @smui-space-xs;
       padding-bottom: @smui-space-xs;
+      @media (pointer: coarse) {
+        min-height: max(36px, var(--smui-control-h-sm, @smui-control-h-sm-coarse));
+      }
     }
 
     &_divider {
@@ -73,6 +76,10 @@
     min-height: 36px;
     padding-top: @smui-space-xs;
     padding-bottom: @smui-space-xs;
+    // On a coarse pointer a dense row is the sm step (44px there) at least.
+    @media (pointer: coarse) {
+      min-height: max(36px, var(--smui-control-h-sm, @smui-control-h-sm-coarse));
+    }
   }
 
   // A row that is a link: the anchor takes the padding, so the whole row is the link.

package/less/components/menu/menu.less

@@ -50,6 +50,11 @@
 
     &--dense {
       height: 32px;
+
+      // On a coarse pointer a dense item is the sm step (44px there) at least.
+      @media (pointer: coarse) {
+        height: max(32px, var(--smui-control-h-sm, @smui-control-h-sm-coarse));
+      }
     }
 
     &--disabled {

package/less/components/tabGroups/tabGroups.less

@@ -61,19 +61,45 @@
     align-self: center;
   }
 
-  // The group's actions button: the box of Tabs' overflow trigger, which it sits beside.
+  // The group's actions button is an icon-only control: it carries the `smwb-button_icon-only` marker
+  // that `Button` writes for `iconOnly`, and its box is a square of the row's control height - the
+  // height the tabs beside it are. The side is a component variable, not Tabs' fixed 40px trigger
+  // width: that width, stretched over a dense row, drew a 40x36 rectangle where the mockups draw a
+  // square. A dense row is `@tabDenseHeight`, off the `--smui-control-h-*` grid, and marks itself.
+  // `min-width` and the horizontal padding are gone with it, so the icon sits in the middle.
   &__actions-trigger {
+    --smwb-tab-groups-actions-size: var(--smui-control-h-lg, @smui-control-h-lg);
+
     display: inline-flex;
     align-items: center;
     justify-content: center;
+    box-sizing: border-box;
     flex: 0 0 auto;
-    width: @tabsOverflowTriggerWidth;
+    // Its own height is the square now, not the row's stretch, so a row that grows past it (a tab
+    // with a two-line label) still keeps the button in the middle of the row.
+    align-self: center;
+    min-width: 0;
+    width: var(--smwb-tab-groups-actions-size);
+    height: var(--smwb-tab-groups-actions-size);
     padding: 0;
     border: none;
     background: none;
     color: var(--smui-onSurfaceVariant);
     cursor: pointer;
 
+    // Compact tab rows (`TabGroups` `dense`): the square follows the shorter row.
+    &--dense {
+      --smwb-tab-groups-actions-size: var(--smui-tabDenseHeight, @tabDenseHeight);
+
+      // The tabs beside it are the sm step (44px) at least on a coarse pointer, so it is too.
+      @media (pointer: coarse) {
+        --smwb-tab-groups-actions-size: max(
+          var(--smui-tabDenseHeight, @tabDenseHeight),
+          var(--smui-control-h-sm, @smui-control-h-sm-coarse)
+        );
+      }
+    }
+
     &:hover:not(:disabled) {
       background-color: var(--smui-onSurfaceHover);
     }

package/less/components/tabs/tab/tab.less

@@ -211,6 +211,11 @@
   font-weight: 500;
   letter-spacing: normal;
   text-transform: none;
+
+  // On a coarse pointer the row is never shorter than the sm step (44px there).
+  @media (pointer: coarse) {
+    min-height: max(var(--smui-tabDenseHeight, @tabDenseHeight), var(--smui-control-h-sm, @smui-control-h-sm-coarse));
+  }
 }
 
 // Content-width tabs (Tabs `fit`): a tab is as wide as what it holds — marker, label, close button —

package/less/components/tabs/tabs.less

@@ -69,6 +69,11 @@
       opacity: 0.38;
       cursor: default;
     }
+
+    // On a coarse pointer the button is at least as wide as the sm step (44px there).
+    @media (pointer: coarse) {
+      width: max(@tabsScrollButtonWidth, var(--smui-control-h-sm, @smui-control-h-sm-coarse));
+    }
   }
 
   // The overflow-menu trigger (Tabs `overflowMenu`) renders beside the scroller in the
@@ -95,6 +100,11 @@
       opacity: 0.38;
       cursor: default;
     }
+
+    // On a coarse pointer the button is at least as wide as the sm step (44px there).
+    @media (pointer: coarse) {
+      width: max(@tabsOverflowTriggerWidth, var(--smui-control-h-sm, @smui-control-h-sm-coarse));
+    }
   }
 
   &__indicator {

package/less/foundation/sizing.less

@@ -43,6 +43,23 @@
 //      Button, so they inherit the tokens
 //
 //  Override one step from theme.config, e.g.  @smui-control-h-md: 44px;
+//
+//  Touch density: on a coarse pointer (finger, stylus) the three steps are
+//  replaced by @smui-control-h-*-coarse, so every control above is at least
+//  @smui-touch-target (44px) tall. variables.less remaps the runtime tokens in
+//  an `@media (pointer: coarse)` block, which is why most components need no
+//  rule of their own; only what sits off the scale has one (small clickable
+//  or link Chip, Tabs dense and its scroll buttons, TabGroups dense actions button,
+//  Menu dense items, List dense rows). A mouse keeps the sizes above.
+//  Still exempt on touch: the --filled and --inline fields, the compact Toggle
+//  (capped at @toggleCompactMaxHeight) and a small Chip that is neither a button
+//  nor a link.
+//  The -coarse steps never drop below the matching fine step, so a theme that
+//  raises a step is not shrunk on touch. Override one from theme.config
+//  (@smui-control-h-md-coarse: 48px;) or at runtime (--smui-control-h-md-coarse).
+//  A runtime override of --smui-control-h-* on :root, loaded after the library,
+//  also applies on a coarse pointer (the token layer always loses to it); set
+//  the -coarse token too, or scope the override to @media (pointer: fine).
 //=====================================================================
 
 // Control height (form fields, buttons, chips)
@@ -50,6 +67,14 @@
 @smui-control-h-md: 40px;
 @smui-control-h-lg: 48px;
 
+// Smallest touch target (Material and WCAG 2.5.5 call for 44-48px)
+@smui-touch-target: 44px;
+
+// Control height on a coarse pointer (finger, stylus): the fine step, raised to the touch target
+@smui-control-h-sm-coarse: max(@smui-touch-target, @smui-control-h-sm);
+@smui-control-h-md-coarse: max(@smui-touch-target, @smui-control-h-md);
+@smui-control-h-lg-coarse: max(@smui-touch-target, @smui-control-h-lg);
+
 // Horizontal padding inside controls
 @smui-control-px-sm: @smui-space-md; // 12
 @smui-control-px-md: @smui-space-lg; // 16

package/less/tokens.entry.less

@@ -14,6 +14,13 @@
   .smui-tokens-light();
 }
 
+// A coarse pointer swaps the control heights for the -coarse steps (foundation/sizing.less).
+@media (pointer: coarse) {
+  :where(:root) {
+    .smui-tokens-coarse();
+  }
+}
+
 :where(:root[data-theme="dark"]) {
   .smui-tokens-dark();
 }

package/less/variables.less

@@ -153,6 +153,10 @@
   --smui-control-h-sm: @smui-control-h-sm;
   --smui-control-h-md: @smui-control-h-md;
   --smui-control-h-lg: @smui-control-h-lg;
+  // Their values on a coarse pointer (see .smui-tokens-coarse below)
+  --smui-control-h-sm-coarse: @smui-control-h-sm-coarse;
+  --smui-control-h-md-coarse: @smui-control-h-md-coarse;
+  --smui-control-h-lg-coarse: @smui-control-h-lg-coarse;
 
   /* Border-radius scale */
   --smui-radius-xs: @smui-radius-xs;
@@ -279,10 +283,24 @@
   --smui-messageBackground: @messageBgDark;
 }
 
+// Touch density: on a coarse pointer the control heights are the -coarse steps. Not part of
+// the light/dark mixins for the same reason the heights are light-only: mode-independent.
+.smui-tokens-coarse() {
+  --smui-control-h-sm: var(--smui-control-h-sm-coarse, @smui-control-h-sm-coarse);
+  --smui-control-h-md: var(--smui-control-h-md-coarse, @smui-control-h-md-coarse);
+  --smui-control-h-lg: var(--smui-control-h-lg-coarse, @smui-control-h-lg-coarse);
+}
+
 :root {
   .smui-tokens-light();
 }
 
+@media (pointer: coarse) {
+  :root {
+    .smui-tokens-coarse();
+  }
+}
+
 :root[data-theme="dark"] {
   .smui-tokens-dark();
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smwb/ui-styles",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "description": "Framework-agnostic LESS design tokens and component styles (smwb-*) shared by the @smwb UI libraries. Prebuilt aggregate CSS lives in @smwb/ui-css.",
   "license": "MIT",
   "sideEffects": [