@smwb/ui-styles 2.2.0 → 2.4.0

package/less/components/bottomBar/bottomBar.less

@@ -13,7 +13,7 @@
     display: flex;
     align-items: stretch;
     width: 100%;
-    min-height: 56px;
+    min-height: @bottomBarHeight;
   }
 
   &__item {

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/sheet/sheet.less

@@ -3,6 +3,10 @@
   // sets it from its `offsetTop` prop and `AppLayout` publishes its sticky header's height as the
   // page default, so a panel starts below the header; with neither it is 0 and nothing moves.
   @sheetOffsetTop: var(--smui-sheet-offset-top, 0px);
+  // Gap between the bottom edge of the window and the bottom of the sheet and of its modal scrim. `BottomBar`
+  // publishes its height (with the safe-area inset) as the page default, so a panel stops above the bar; with the
+  // bar absent it is 0 and nothing moves.
+  @sheetOffsetBottom: var(--smui-bottom-bar-offset, 0px);
 
   background-color: var(--smui-surfaceBackground);
   position: fixed;
@@ -20,6 +24,11 @@
   display: flex;
   max-width: 100vw;
 
+  // A finger is dragging the panel (swipe to dismiss): it follows without easing.
+  &[data-smwb-swiping] {
+    transition: none;
+  }
+
   &__header {
     display: flex;
     justify-content: space-between;
@@ -121,10 +130,12 @@
 
   &.smwb-bottom {
     border-radius: @sheetBorderRadius @sheetBorderRadius 0 0;
-    bottom: 0;
+    bottom: @sheetOffsetBottom;
     left: 0;
     width: 100%;
     height: var(--sizeProp);
+    // A tall panel stops at the top of the window (below any offset) instead of running past it by the bar's height.
+    max-height: calc(100% - @sheetOffsetTop - @sheetOffsetBottom);
     transform: translateY(100%);
     flex-direction: column;
     .smwb-sheet__header {
@@ -139,7 +150,7 @@
     width: 100%;
     height: var(--sizeProp);
     // A tall panel stops at the bottom of the window instead of running past it by the offset.
-    max-height: calc(100% - @sheetOffsetTop);
+    max-height: calc(100% - @sheetOffsetTop - @sheetOffsetBottom);
     transform: translateY(-100%);
     flex-direction: column;
     .smwb-sheet__header {
@@ -151,7 +162,7 @@
     border-radius: 0 @sheetBorderRadius @sheetBorderRadius 0;
     top: @sheetOffsetTop;
     left: 0;
-    height: calc(100% - @sheetOffsetTop);
+    height: calc(100% - @sheetOffsetTop - @sheetOffsetBottom);
     width: var(--sizeProp);
     transform: translateX(-100%);
     flex-direction: row-reverse;
@@ -166,7 +177,7 @@
     border-radius: @sheetBorderRadius 0 0 @sheetBorderRadius;
     top: @sheetOffsetTop;
     right: 0;
-    height: calc(100% - @sheetOffsetTop);
+    height: calc(100% - @sheetOffsetTop - @sheetOffsetBottom);
     width: var(--sizeProp);
     transform: translateX(100%);
     .smwb-sheet__header {
@@ -180,7 +191,7 @@
     top: @sheetOffsetTop;
     left: 0;
     width: 100%;
-    height: calc(100% - @sheetOffsetTop);
+    height: calc(100% - @sheetOffsetTop - @sheetOffsetBottom);
     display: flex;
     flex-direction: column;
     z-index: 100;
@@ -203,7 +214,7 @@
       .smwb-sheet {
         opacity: 1;
         &.smwb-bottom {
-          transform: translateY(0);
+          transform: translateY(var(--smwb-sheet-swipe, 0px));
           &.smwb-expanded {
             height: 90%;
           }
@@ -221,7 +232,7 @@
           }
         }
         &.smwb-left {
-          transform: translateX(0);
+          transform: translateX(var(--smwb-sheet-swipe, 0px));
           &.smwb-expanded {
             width: 90%;
           }
@@ -230,7 +241,7 @@
           }
         }
         &.smwb-right {
-          transform: translateX(0);
+          transform: translateX(var(--smwb-sheet-swipe, 0px));
           &.smwb-expanded {
             width: 90%;
           }

package/less/components/snackbar/snackbar.less

@@ -4,6 +4,9 @@
   gap: @snackbarGap;
   position: fixed;
   z-index: 777;
+  // Gap above the window's bottom edge for a stack drawn at the bottom: `BottomBar` publishes its height as
+  // --smui-bottom-bar-offset, so the snackbars sit above the bar. With the variable unset it is 0 and nothing moves.
+  @snackbarsBottomOffset: var(--smui-bottom-bar-offset, 0px);
   &.smwb-top {
     top: 1rem;
     left: 50%;
@@ -18,17 +21,17 @@
     top: 1rem;
   }
   &.smwb-bottom {
-    bottom: 1rem;
+    bottom: calc(1rem + @snackbarsBottomOffset);
     left: 50%;
     transform: translateX(-50%);
   }
   &.smwb-bottom-right {
     right: 1rem;
-    bottom: 1rem;
+    bottom: calc(1rem + @snackbarsBottomOffset);
   }
   &.smwb-bottom-left {
     left: 1rem;
-    bottom: 1rem;
+    bottom: calc(1rem + @snackbarsBottomOffset);
   }
 }
 

package/less/components/stack/stack.less

@@ -1,7 +1,34 @@
+@stackDirections: row, row-reverse, column, column-reverse;
+
+// `direction` given per breakpoint: one class per breakpoint and direction, base first and then
+// the breakpoints in ascending order, so a wider one wins at the same specificity.
+.stack-direction(@bp) {
+  each(@stackDirections, {
+    &--direction-@{bp}-@{value} {
+      flex-direction: @value;
+    }
+  });
+}
+
 .smwb-stack {
   // layout is driven by inline flex props; this hook is for overrides
   min-width: 0;
 
+  .stack-direction(base);
+
+  .smui-media-up(sm; {
+    .stack-direction(sm);
+  });
+  .smui-media-up(md; {
+    .stack-direction(md);
+  });
+  .smui-media-up(lg; {
+    .stack-direction(lg);
+  });
+  .smui-media-up(xl; {
+    .stack-direction(xl);
+  });
+
   &__divider {
     display: flex;
     align-items: center;

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/default/globals/default.variables.less

@@ -142,6 +142,10 @@
 // this one carries dark ink instead of @onWarningColor. 5.5:1 on @warningColor.
 @badgeWarningColor: #1c1b1f;
 
+// Height of the `BottomBar` row, without the safe-area inset it adds below; the bar publishes the sum as
+// --smui-bottom-bar-offset.
+@bottomBarHeight: 56px;
+
 @buttonGap: @smui-space-sm;
 @buttonPaddingSmall: @smui-space-xs 10px; // 10 off-grid
 @buttonPaddingMedium: 6px 14px; // off-grid

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.4.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": [