@progressiveui/styles 11.0.11 → 11.1.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [11.1.0](https://github.com/Polyxo/pui/compare/@progressiveui/styles@11.0.11...@progressiveui/styles@11.1.0) (2026-01-18)
+
+
+### Features
+
+* **Modal:** updated alignments ([c82980b](https://github.com/Polyxo/pui/commit/c82980bcbe651dc9e1671914afe367ab594b34a6))
+
+
+
+
+
 ## [11.0.11](https://github.com/Polyxo/pui/compare/@progressiveui/styles@11.0.10...@progressiveui/styles@11.0.11) (2026-01-18)
 
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progressiveui/styles",
   "description": "Styles for the Progressive UI Design System",
-  "version": "11.0.11",
+  "version": "11.1.0",
   "license": "Apache-2.0",
   "author": "Robert Gühne <polyxo.de>",
   "homepage": "https://www.polyxo.de",
@@ -35,5 +35,5 @@
     "@carbon/test-utils": "^10.3.0",
     "css": "^3.0.0"
   },
-  "gitHead": "a99c63996bdce5473c35de5a0fdb8bb09f6c6fbc"
+  "gitHead": "c2eeb90a79cd0628ef2780eb3b37202ee8548804"
 }

package/scss/components/modal/_modal.scss

@@ -192,14 +192,12 @@ $modal-footer-background-color: $layer-primary !default; //TODO use $layer token
     //overflow-y: auto;
     padding: $spacing-05;
     padding-top: $spacing-05;
-        color: $text-body-default;
+    color: $text-body-default;
     @include breakpoint-up("md") {
       padding: $spacing-07;
       padding-top: $spacing-05;
     }
 
-
-
     > * {
       @include reset;
     }
@@ -241,19 +239,17 @@ $modal-footer-background-color: $layer-primary !default; //TODO use $layer token
       right: calcRem(18px);
     }
 
-
     &:focus {
       @include focus-outline("border");
     }
   }
 
   .#{$prefix}--modal-close__icon {
-       color: $text-body-default;
+    color: $text-body-default;
     transition: 200ms;
     // fill: var(--ui-05); // TODO change $field-border
     width: 1.5rem;
     height: 1.5rem;
-
   }
 
   .#{$prefix}--modal--background-image {
@@ -310,7 +306,7 @@ $modal-footer-background-color: $layer-primary !default; //TODO use $layer token
 .#{$prefix}--modal--mobile-fullscreen {
   @include breakpoint-down("md") {
     .#{$prefix}--modal-header {
-      padding-bottom: calc(var(--safe-area-inset-top) + $spacing-05);
+      padding-top: calc(var(--safe-area-inset-top) + $spacing-05);
     }
     .#{$prefix}--modal-close {
       top: calc(var(--safe-area-inset-top) + calcRem(8px));
@@ -334,8 +330,10 @@ $modal-footer-background-color: $layer-primary !default; //TODO use $layer token
     .#{$prefix}--modal-footer {
       padding-bottom: calc(var(--safe-area-inset-bottom) + $spacing-05);
     }
-    &.#{$prefix}--modal-passive {
-      .#{$prefix}--modal-content {
+  }
+  &.#{$prefix}--modal-passive {
+    .#{$prefix}--modal-content {
+      @include breakpoint-down("md") {
         padding-bottom: calc(var(--safe-area-inset-bottom) + $spacing-05);
       }
     }
@@ -344,6 +342,9 @@ $modal-footer-background-color: $layer-primary !default; //TODO use $layer token
 
 .#{$prefix}--modal--mobile-bottomsheet {
   @include breakpoint-down("md") {
+    .#{$prefix}--modal-container {
+      max-height: 90vh;
+    }
     .#{$prefix}--modal-inner {
       align-self: flex-end;
       width: 100%;
@@ -356,7 +357,9 @@ $modal-footer-background-color: $layer-primary !default; //TODO use $layer token
   }
   &.#{$prefix}--modal-passive {
     .#{$prefix}--modal-content {
-      padding-bottom: calc(var(--safe-area-inset-bottom) + $spacing-05);
+      @include breakpoint-down("md") {
+        padding-bottom: calc(var(--safe-area-inset-bottom) + $spacing-05);
+      }
     }
   }
 }