@progressiveui/styles 11.0.11 → 11.2.0

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [11.2.0](https://github.com/Polyxo/pui/compare/@progressiveui/styles@11.1.0...@progressiveui/styles@11.2.0) (2026-01-18)
+
+
+### Features
+
+* **Modal:** alignment updated ([e1d636f](https://github.com/Polyxo/pui/commit/e1d636febb5a506d6a400a72aedb2e5d432c570a))
+
+
+
+
+
+# [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.2.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": "26175b5523aab4e29d22228345e797f03f73f477"
 }

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;
     }
@@ -227,7 +225,7 @@ $modal-footer-background-color: $layer-primary !default; //TODO use $layer token
 
   .#{$prefix}--modal-close {
     position: absolute;
-    top: calcRem(8px);
+    top: calcRem(2px);
     right: calcRem(6px);
     padding: 0;
     overflow: hidden;
@@ -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;
-
+    width: 1.7rem;
+    height: 1.7rem;
   }
 
   .#{$prefix}--modal--background-image {
@@ -265,8 +261,8 @@ $modal-footer-background-color: $layer-primary !default; //TODO use $layer token
   .#{$prefix}--modal-container {
     @include breakpoint-down("md") {
       min-width: 50%;
-      width: 90%;
-      max-width: 90%;
+      width: 95%;
+      max-width: 95%;
       height: auto;
     }
   }
@@ -310,10 +306,10 @@ $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));
+      top: calc(var(--safe-area-inset-top) + calcRem(2px));
     }
 
     .#{$prefix}--modal-inner {
@@ -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);
+      }
     }
   }
 }