@smwb/ui-css 2.3.0 → 2.5.0

package/dist/ui.css

@@ -2039,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;
@@ -3297,6 +3297,27 @@
   white-space: nowrap;
   opacity: 0.7;
 }
+@media (pointer: coarse) {
+  .smwb-slider {
+    padding-top: max(13px, calc((var(--smui-control-h-sm, 44px) - 4px) / 2));
+    padding-bottom: max(13px, calc((var(--smui-control-h-sm, 44px) - 4px) / 2));
+  }
+  .smwb-slider_size-small {
+    padding-top: max(13px, calc((var(--smui-control-h-sm, 44px) - 2px) / 2));
+    padding-bottom: max(13px, calc((var(--smui-control-h-sm, 44px) - 2px) / 2));
+  }
+  .smwb-slider_size-large {
+    padding-top: max(13px, calc((var(--smui-control-h-sm, 44px) - 6px) / 2));
+    padding-bottom: max(13px, calc((var(--smui-control-h-sm, 44px) - 6px) / 2));
+  }
+  .smwb-slider--vertical {
+    padding: 0 max(13px, calc((var(--smui-control-h-sm, 44px) - 4px) / 2));
+  }
+  .smwb-slider__thumb:after {
+    width: max(42px, var(--smui-control-h-sm, 44px));
+    height: max(42px, var(--smui-control-h-sm, 44px));
+  }
+}
 .smwb-value-slider {
   display: flex;
   flex-direction: column;
@@ -3416,6 +3437,28 @@
   font: inherit;
   cursor: pointer;
 }
+@media (pointer: coarse) {
+  .smwb-select-field__clear {
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    width: var(--smui-control-h-sm, 44px);
+    height: var(--smui-control-h-sm, 44px);
+    margin: calc((16px - var(--smui-control-h-sm, 44px)) / 2) 0;
+  }
+  .smwb-select-field .smwb-chip__delete-icon {
+    position: relative;
+  }
+  .smwb-select-field .smwb-chip__delete-icon::after {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 0;
+    width: var(--smui-control-h-sm, 44px);
+    height: var(--smui-control-h-sm, 44px);
+    transform: translateY(-50%);
+  }
+}
 .smwb-select-field__values {
   white-space: nowrap;
   font: inherit;
@@ -5099,6 +5142,9 @@
   display: flex;
   max-width: 100vw;
 }
+.smwb-sheet[data-smwb-swiping] {
+  transition: none;
+}
 .smwb-sheet__header {
   display: flex;
   justify-content: space-between;
@@ -5110,6 +5156,11 @@
 .smwb-sheet__header .smwb-button {
   min-width: 0;
 }
+@media (pointer: coarse) {
+  .smwb-sheet__header .smwb-button {
+    min-width: var(--smui-control-h-sm, 44px);
+  }
+}
 .smwb-sheet__drag-handle {
   position: absolute;
   display: flex;
@@ -5191,10 +5242,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;
 }
@@ -5207,7 +5259,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;
 }
@@ -5218,7 +5270,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;
@@ -5232,7 +5284,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%);
 }
@@ -5245,7 +5297,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;
@@ -5265,7 +5317,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 {
@@ -5289,7 +5341,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 {
@@ -5301,7 +5353,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 {
@@ -6860,6 +6912,12 @@
   outline: 2px solid var(--smui-primaryColor);
   outline-offset: 2px;
 }
+@media (pointer: coarse) {
+  .smwb-head-cell_sortable .smwb-head-cell__content {
+    min-width: var(--smui-control-h-sm, 44px);
+    min-height: var(--smui-control-h-sm, 44px);
+  }
+}
 .smwb-table__row_selected {
   background-color: var(--smui-onSurfaceHover);
 }
@@ -7437,6 +7495,15 @@
 .smwb-date-picker__icon-button--small {
   padding: 5px;
 }
+@media (pointer: coarse) {
+  .smwb-date-picker__icon-button:not(.smwb-date-picker__icon-button--small) {
+    box-sizing: border-box;
+    align-items: center;
+    justify-content: center;
+    min-width: var(--smui-control-h-sm, 44px);
+    min-height: var(--smui-control-h-sm, 44px);
+  }
+}
 .smwb-date-picker__icon-button--edge-start {
   margin-left: -12px;
 }
@@ -8229,6 +8296,12 @@
 .smwb-breadcrumbs__expand:hover {
   background-color: var(--smui-onSurfaceActive);
 }
+@media (pointer: coarse) {
+  .smwb-breadcrumbs__expand {
+    min-width: var(--smui-control-h-sm, 44px);
+    min-height: var(--smui-control-h-sm, 44px);
+  }
+}
 .smwb-breadcrumbs--no-wrap {
   min-width: 0;
 }
@@ -8806,6 +8879,12 @@
   color: var(--smui-onSurfaceVariant);
   cursor: pointer;
 }
+@media (pointer: coarse) {
+  .smwb-dag-view__control {
+    width: max(32px, var(--smui-control-h-sm, 44px));
+    height: max(32px, var(--smui-control-h-sm, 44px));
+  }
+}
 .smwb-dag-view__control svg {
   width: 18px;
   height: 18px;
@@ -8930,6 +9009,12 @@
   background-color: var(--smui-surfaceBackground);
   color: var(--smui-onSurfaceColor);
 }
+@media (pointer: coarse) {
+  .smwb-composer {
+    --smwb-composer-icon-button-size: max(36px, var(--smui-control-h-sm, 44px));
+    --smwb-composer-field-padding-y: calc((var(--smwb-composer-icon-button-size) - 1.5rem) / 2);
+  }
+}
 .smwb-composer__attachments {
   grid-area: attachments;
   min-width: 0;
@@ -8944,13 +9029,13 @@
   box-sizing: border-box;
   margin: 0;
   border: 0;
-  padding: 6px 8px;
+  padding: var(--smwb-composer-field-padding-y, 6px) 8px;
   font: inherit;
   letter-spacing: inherit;
   line-height: 1.5rem;
   overflow-wrap: anywhere;
-  min-height: calc(var(--smwb-composer-min-rows, 1) * 1.5rem + 2 * 6px);
-  max-height: calc(var(--smwb-composer-max-rows, 8) * 1.5rem + 2 * 6px);
+  min-height: calc(var(--smwb-composer-min-rows, 1) * 1.5rem + 2 * var(--smwb-composer-field-padding-y, 6px));
+  max-height: calc(var(--smwb-composer-max-rows, 8) * 1.5rem + 2 * var(--smwb-composer-field-padding-y, 6px));
   content: attr(data-value) " ";
   grid-area: 1 / 1;
   visibility: hidden;
@@ -8962,13 +9047,13 @@
   box-sizing: border-box;
   margin: 0;
   border: 0;
-  padding: 6px 8px;
+  padding: var(--smwb-composer-field-padding-y, 6px) 8px;
   font: inherit;
   letter-spacing: inherit;
   line-height: 1.5rem;
   overflow-wrap: anywhere;
-  min-height: calc(var(--smwb-composer-min-rows, 1) * 1.5rem + 2 * 6px);
-  max-height: calc(var(--smwb-composer-max-rows, 8) * 1.5rem + 2 * 6px);
+  min-height: calc(var(--smwb-composer-min-rows, 1) * 1.5rem + 2 * var(--smwb-composer-field-padding-y, 6px));
+  max-height: calc(var(--smwb-composer-max-rows, 8) * 1.5rem + 2 * var(--smwb-composer-field-padding-y, 6px));
   grid-area: 1 / 1;
   display: block;
   width: 100%;
@@ -8989,8 +9074,8 @@
   justify-content: center;
   box-sizing: border-box;
   flex: none;
-  width: 36px;
-  height: 36px;
+  width: var(--smwb-composer-icon-button-size, 36px);
+  height: var(--smwb-composer-icon-button-size, 36px);
   margin: 0;
   padding: 0;
   border: 0;
@@ -9106,7 +9191,7 @@
 }
 .smwb-composer_inline .smwb-composer__counter {
   align-self: end;
-  padding-bottom: calc((36px - 1rem) / 2);
+  padding-bottom: calc((var(--smwb-composer-icon-button-size, 36px) - 1rem) / 2);
 }
 .smwb-composer_inline .smwb-composer__attach ~ .smwb-composer__toolbar {
   margin-inline-start: 0;
@@ -9718,6 +9803,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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smwb/ui-css",
-  "version": "2.3.0",
+  "version": "2.5.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.3.0",
+    "@smwb/ui-styles": "^2.5.0",
     "less": "^4.6.4"
   },
   "homepage": "https://sourcecraft.dev/elfenmail/ui",