@smwb/ui-styles 2.3.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/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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smwb/ui-styles",
-  "version": "2.3.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": [