@smwb/ui-css 2.2.0 → 2.4.0

package/dist/ui.css

@@ -641,6 +641,13 @@
   padding: 0 8px;
   font-size: 0.75rem;
 }
+@media (pointer: coarse) {
+  .smwb-chip_size-small:is(a[href]),
+  .smwb-chip_size-small:has(> .smwb-chip__content[role="button"]) {
+    height: var(--smui-control-h-sm, 44px);
+    min-height: var(--smui-control-h-sm, 44px);
+  }
+}
 .smwb-chip.smwb-chip_color-primary:not(.smwb-chip.smwb-disabled).smwb-filled {
   background-color: var(--smui-primaryColor);
   color: var(--smui-onPrimaryColor);
@@ -2032,17 +2039,17 @@
   top: 1rem;
 }
 .smwb-snackbars.smwb-bottom {
-  bottom: 1rem;
+  bottom: calc(1rem + var(--smui-bottom-bar-offset, 0px));
   left: 50%;
   transform: translateX(-50%);
 }
 .smwb-snackbars.smwb-bottom-right {
   right: 1rem;
-  bottom: 1rem;
+  bottom: calc(1rem + var(--smui-bottom-bar-offset, 0px));
 }
 .smwb-snackbars.smwb-bottom-left {
   left: 1rem;
-  bottom: 1rem;
+  bottom: calc(1rem + var(--smui-bottom-bar-offset, 0px));
 }
 .smwb-snackbar {
   box-sizing: border-box;
@@ -2639,6 +2646,11 @@
 .smwb-menu__item--dense {
   height: 32px;
 }
+@media (pointer: coarse) {
+  .smwb-menu__item--dense {
+    height: max(32px, var(--smui-control-h-sm, 44px));
+  }
+}
 .smwb-menu__item--disabled {
   color: var(--smui-menuDisabledTextColor);
   pointer-events: none;
@@ -2765,6 +2777,11 @@
   opacity: 0.38;
   cursor: default;
 }
+@media (pointer: coarse) {
+  .smwb-tabs__scroll-button {
+    width: max(40px, var(--smui-control-h-sm, 44px));
+  }
+}
 .smwb-tabs__overflow-trigger {
   display: inline-flex;
   align-items: center;
@@ -2788,6 +2805,11 @@
   opacity: 0.38;
   cursor: default;
 }
+@media (pointer: coarse) {
+  .smwb-tabs__overflow-trigger {
+    width: max(40px, var(--smui-control-h-sm, 44px));
+  }
+}
 .smwb-tabs__indicator {
   display: flex;
   justify-content: center;
@@ -2974,6 +2996,11 @@
   letter-spacing: normal;
   text-transform: none;
 }
+@media (pointer: coarse) {
+  .smwb-tabs--dense .smwb-tab {
+    min-height: max(var(--smui-tabDenseHeight, 36px), var(--smui-control-h-sm, 44px));
+  }
+}
 .smwb-tabs--fit .smwb-tab,
 .smwb-tabs--fit .smwb-tab-item {
   flex: 0 0 auto;
@@ -3617,6 +3644,11 @@
   padding-top: 4px;
   padding-bottom: 4px;
 }
+@media (pointer: coarse) {
+  .smwb-list__item_dense {
+    min-height: max(36px, var(--smui-control-h-sm, 44px));
+  }
+}
 .smwb-list__item_divider {
   border-bottom: 1px solid var(--smui-dividerColor);
 }
@@ -3625,6 +3657,11 @@
   padding-top: 4px;
   padding-bottom: 4px;
 }
+@media (pointer: coarse) {
+  .smwb-list_dense .smwb-list__item {
+    min-height: max(36px, var(--smui-control-h-sm, 44px));
+  }
+}
 .smwb-list__item.smwb-list__item_link,
 .smwb-list_dense .smwb-list__item.smwb-list__item_link {
   padding: 0;
@@ -5062,6 +5099,9 @@
   display: flex;
   max-width: 100vw;
 }
+.smwb-sheet[data-smwb-swiping] {
+  transition: none;
+}
 .smwb-sheet__header {
   display: flex;
   justify-content: space-between;
@@ -5154,10 +5194,11 @@
 }
 .smwb-sheet.smwb-bottom {
   border-radius: 28px 28px 0 0;
-  bottom: 0;
+  bottom: var(--smui-bottom-bar-offset, 0px);
   left: 0;
   width: 100%;
   height: var(--sizeProp);
+  max-height: calc(100% - var(--smui-sheet-offset-top, 0px) - var(--smui-bottom-bar-offset, 0px));
   transform: translateY(100%);
   flex-direction: column;
 }
@@ -5170,7 +5211,7 @@
   left: 0;
   width: 100%;
   height: var(--sizeProp);
-  max-height: calc(100% - var(--smui-sheet-offset-top, 0px));
+  max-height: calc(100% - var(--smui-sheet-offset-top, 0px) - var(--smui-bottom-bar-offset, 0px));
   transform: translateY(-100%);
   flex-direction: column;
 }
@@ -5181,7 +5222,7 @@
   border-radius: 0 28px 28px 0;
   top: var(--smui-sheet-offset-top, 0px);
   left: 0;
-  height: calc(100% - var(--smui-sheet-offset-top, 0px));
+  height: calc(100% - var(--smui-sheet-offset-top, 0px) - var(--smui-bottom-bar-offset, 0px));
   width: var(--sizeProp);
   transform: translateX(-100%);
   flex-direction: row-reverse;
@@ -5195,7 +5236,7 @@
   border-radius: 28px 0 0 28px;
   top: var(--smui-sheet-offset-top, 0px);
   right: 0;
-  height: calc(100% - var(--smui-sheet-offset-top, 0px));
+  height: calc(100% - var(--smui-sheet-offset-top, 0px) - var(--smui-bottom-bar-offset, 0px));
   width: var(--sizeProp);
   transform: translateX(100%);
 }
@@ -5208,7 +5249,7 @@
   top: var(--smui-sheet-offset-top, 0px);
   left: 0;
   width: 100%;
-  height: calc(100% - var(--smui-sheet-offset-top, 0px));
+  height: calc(100% - var(--smui-sheet-offset-top, 0px) - var(--smui-bottom-bar-offset, 0px));
   display: flex;
   flex-direction: column;
   z-index: 100;
@@ -5228,7 +5269,7 @@
 }
 .smwb-sheet__default.smwb-entered .smwb-sheet.smwb-bottom,
 .smwb-sheet__overlay.smwb-entered .smwb-sheet.smwb-bottom {
-  transform: translateY(0);
+  transform: translateY(var(--smwb-sheet-swipe, 0px));
 }
 .smwb-sheet__default.smwb-entered .smwb-sheet.smwb-bottom.smwb-expanded,
 .smwb-sheet__overlay.smwb-entered .smwb-sheet.smwb-bottom.smwb-expanded {
@@ -5252,7 +5293,7 @@
 }
 .smwb-sheet__default.smwb-entered .smwb-sheet.smwb-left,
 .smwb-sheet__overlay.smwb-entered .smwb-sheet.smwb-left {
-  transform: translateX(0);
+  transform: translateX(var(--smwb-sheet-swipe, 0px));
 }
 .smwb-sheet__default.smwb-entered .smwb-sheet.smwb-left.smwb-expanded,
 .smwb-sheet__overlay.smwb-entered .smwb-sheet.smwb-left.smwb-expanded {
@@ -5264,7 +5305,7 @@
 }
 .smwb-sheet__default.smwb-entered .smwb-sheet.smwb-right,
 .smwb-sheet__overlay.smwb-entered .smwb-sheet.smwb-right {
-  transform: translateX(0);
+  transform: translateX(var(--smwb-sheet-swipe, 0px));
 }
 .smwb-sheet__default.smwb-entered .smwb-sheet.smwb-right.smwb-expanded,
 .smwb-sheet__overlay.smwb-entered .smwb-sheet.smwb-right.smwb-expanded {
@@ -7165,17 +7206,30 @@
   align-self: center;
 }
 .smwb-tab-groups__actions-trigger {
+  --smwb-tab-groups-actions-size: var(--smui-control-h-lg, 48px);
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  box-sizing: border-box;
   flex: 0 0 auto;
-  width: 40px;
+  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;
 }
+.smwb-tab-groups__actions-trigger--dense {
+  --smwb-tab-groups-actions-size: var(--smui-tabDenseHeight, 36px);
+}
+@media (pointer: coarse) {
+  .smwb-tab-groups__actions-trigger--dense {
+    --smwb-tab-groups-actions-size: max(var(--smui-tabDenseHeight, 36px), var(--smui-control-h-sm, 44px));
+  }
+}
 .smwb-tab-groups__actions-trigger:hover:not(:disabled) {
   background-color: var(--smui-onSurfaceHover);
 }
@@ -9668,6 +9722,74 @@
 .smwb-stack {
   min-width: 0;
 }
+.smwb-stack--direction-base-row {
+  flex-direction: row;
+}
+.smwb-stack--direction-base-row-reverse {
+  flex-direction: row-reverse;
+}
+.smwb-stack--direction-base-column {
+  flex-direction: column;
+}
+.smwb-stack--direction-base-column-reverse {
+  flex-direction: column-reverse;
+}
+@media (min-width: 420px) {
+  .smwb-stack--direction-sm-row {
+    flex-direction: row;
+  }
+  .smwb-stack--direction-sm-row-reverse {
+    flex-direction: row-reverse;
+  }
+  .smwb-stack--direction-sm-column {
+    flex-direction: column;
+  }
+  .smwb-stack--direction-sm-column-reverse {
+    flex-direction: column-reverse;
+  }
+}
+@media (min-width: 768px) {
+  .smwb-stack--direction-md-row {
+    flex-direction: row;
+  }
+  .smwb-stack--direction-md-row-reverse {
+    flex-direction: row-reverse;
+  }
+  .smwb-stack--direction-md-column {
+    flex-direction: column;
+  }
+  .smwb-stack--direction-md-column-reverse {
+    flex-direction: column-reverse;
+  }
+}
+@media (min-width: 1024px) {
+  .smwb-stack--direction-lg-row {
+    flex-direction: row;
+  }
+  .smwb-stack--direction-lg-row-reverse {
+    flex-direction: row-reverse;
+  }
+  .smwb-stack--direction-lg-column {
+    flex-direction: column;
+  }
+  .smwb-stack--direction-lg-column-reverse {
+    flex-direction: column-reverse;
+  }
+}
+@media (min-width: 1200px) {
+  .smwb-stack--direction-xl-row {
+    flex-direction: row;
+  }
+  .smwb-stack--direction-xl-row-reverse {
+    flex-direction: row-reverse;
+  }
+  .smwb-stack--direction-xl-column {
+    flex-direction: column;
+  }
+  .smwb-stack--direction-xl-column-reverse {
+    flex-direction: column-reverse;
+  }
+}
 .smwb-stack__divider {
   display: flex;
   align-items: center;
@@ -10339,6 +10461,9 @@
   --smui-control-h-sm: 32px;
   --smui-control-h-md: 40px;
   --smui-control-h-lg: 48px;
+  --smui-control-h-sm-coarse: 44px;
+  --smui-control-h-md-coarse: 44px;
+  --smui-control-h-lg-coarse: 48px;
   /* Border-radius scale */
   --smui-radius-xs: 2px;
   --smui-radius-sm: 4px;
@@ -10360,6 +10485,13 @@
   --smui-bp-lg: 1024px;
   --smui-bp-xl: 1200px;
 }
+@media (pointer: coarse) {
+  :root {
+    --smui-control-h-sm: var(--smui-control-h-sm-coarse, 44px);
+    --smui-control-h-md: var(--smui-control-h-md-coarse, 44px);
+    --smui-control-h-lg: var(--smui-control-h-lg-coarse, 48px);
+  }
+}
 :root[data-theme="dark"] {
   --smui-onSurfaceVariant: #cac4d0;
   --smui-onSurfaceColor: #e6e1e5;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smwb/ui-css",
-  "version": "2.2.0",
+  "version": "2.4.0",
   "description": "Prebuilt aggregate stylesheet for the @smwb design system (compiled from @smwb/ui-styles). Framework-agnostic — shared by the React and SolidJS libraries.",
   "license": "MIT",
   "sideEffects": [
@@ -19,7 +19,7 @@
     "build": "lessc -rp=/ ../styles/less/components.less ./dist/ui.css"
   },
   "devDependencies": {
-    "@smwb/ui-styles": "^2.2.0",
+    "@smwb/ui-styles": "^2.4.0",
     "less": "^4.6.4"
   },
   "homepage": "https://sourcecraft.dev/elfenmail/ui",