@sonic-equipment/ui 210.0.0 → 211.0.0

package/dist/styles.css

@@ -1762,11 +1762,12 @@ html {
 .form-field-layout-module-6lieX {
   display: grid;
   gap: 0;
-  grid-template: repeat(3, min-content) / 1fr auto;
   grid-template-areas:
     'label .'
     'field info'
     'error .';
+  grid-template-columns: auto;
+  grid-template-rows: repeat(3, min-content);
 }
 
   .form-field-layout-module-6lieX .form-field-layout-module-3CQx4 {
@@ -3085,12 +3086,6 @@ html {
   padding: var(--space-16);
   background-color: var(--color-white);
   gap: 0 var(--space-16);
-  grid-template:
-    143px var(--space-12) repeat(3, minmax(0, min-content)) minmax(
-      var(--space-8),
-      1fr
-    )
-    repeat(2, minmax(0, min-content)) / 1fr auto;
   grid-template-areas:
     'image image'
     '. .'
@@ -3100,6 +3095,13 @@ html {
     '. .'
     'amount price'
     'info info';
+  grid-template-columns: 1fr auto;
+  grid-template-rows:
+    143px var(--space-12) repeat(3, minmax(0, min-content)) minmax(
+      var(--space-8),
+      1fr
+    )
+    repeat(2, minmax(0, min-content));
   inline-size: 100%;
   transition: scale 0.2s ease;
 }
@@ -3204,16 +3206,17 @@ html {
 
   @container (inline-size >= 576px) {.orderline-card-module-AMTMm {
     padding: 32px 64px 32px 0;
-    grid-template:
-      repeat(3, minmax(0, min-content)) minmax(8px, 1fr)
-      repeat(2, minmax(0, min-content)) / 143px 1fr auto;
     grid-template-areas:
       'image tags tags'
       'image title title'
       'image sku sku'
       'image . .'
       'image amount price'
-      'image info info'
+      'image info info';
+    grid-template-columns: 143px 1fr auto;
+    grid-template-rows:
+      repeat(3, minmax(0, min-content)) minmax(8px, 1fr)
+      repeat(2, minmax(0, min-content))
 }
 
     .orderline-card-module-AMTMm .orderline-card-module-TlhUg {
@@ -3457,32 +3460,34 @@ html {
   display: grid;
   container-type: inline-size;
   gap: var(--gap-row) var(--gap-col);
-  grid-template:
-    [card-start bar-start] repeat(2, minmax(0, min-content))
-    [bar-end] auto minmax(0, min-content)
-    [card-end] /
-    [card-start bar-start] 1fr [card-end bar-end];
   grid-template-areas:
     'title'
     'actions'
     'data'
     'paging';
+  grid-template-columns: [card-start bar-start] 1fr [card-end bar-end];
+  grid-template-rows:
+    [card-start bar-start] repeat(2, minmax(0, min-content))
+    [bar-end] auto minmax(0, min-content)
+    [card-end];
 }
 
   @container (min-width: 636px) {.table-card-module-8spto {
     --sticky-actions-top: calc(var(--sticky-top, 0px) + var(--gap-row));
 
-    grid-template:
+    grid-template-areas:
+      'title actions'
+      'data data'
+      'paging paging';
+    grid-template-columns:
+      [card-start bar-start] 1fr minmax(0, max-content)
+      [card-end bar-end];
+    grid-template-rows:
       [card-start bar-start] minmax(0, min-content) [bar-end] auto minmax(
         0,
         min-content
       )
-      [card-end] /
-      [card-start bar-start] 1fr minmax(0, max-content) [card-end bar-end];
-    grid-template-areas:
-      'title actions'
-      'data data'
-      'paging paging'
+      [card-end]
 }
   }
 
@@ -4880,10 +4885,9 @@ button.swiper-pagination-bullet {
     padding: var(--space-4);
     cursor: pointer;
     gap: var(--space-2);
-    grid-template: minmax(24px, min-content) / var(--space-24) 1fr var(
-        --space-24
-      );
     grid-template-areas: 'icon label .';
+    grid-template-columns: (--space-24) 1fr var(--space-24);
+    grid-template-rows: minmax(24px, min-content);
     line-height: 1;
     outline: none;
     overflow-wrap: break-word;
@@ -5760,10 +5764,11 @@ button.swiper-pagination-bullet {
   display: grid;
   align-items: center;
   gap: var(--gap);
-  grid-template:
-    var(--clear-button-size) / var(--icon-size)
-    minmax(0, min-content) auto var(--clear-button-size);
   grid-template-areas: '. . . clear';
+  grid-template-columns:
+    var(--icon-size)
+    minmax(0, min-content) auto var(--clear-button-size);
+  grid-template-rows: var(--clear-button-size);
 }
 
   .search-list-item-module-WXp77 .search-list-item-module-CPrhz {
@@ -6040,7 +6045,8 @@ button.swiper-pagination-bullet {
     box-sizing: border-box;
     aspect-ratio: 1;
     cursor: pointer;
-    grid-template: repeat(3, 1fr) / 1fr;
+    grid-template-columns: 1fr;
+    grid-template-rows: repeat(3, 1fr);
     inline-size: var(--size);
     padding-inline: 1px;
     place-items: center stretch;
@@ -6114,10 +6120,11 @@ button.swiper-pagination-bullet {
   color: currentcolor;
   container-type: inline-size;
   font-size: var(--ml-font-size);
-  grid-template: auto 1fr / 1fr;
   grid-template-areas:
     'back-button'
     'scroll-area';
+  grid-template-columns: 1fr;
+  grid-template-rows: auto 1fr;
   min-inline-size: var(--ml-min-size);
   -webkit-user-select: none;
      -moz-user-select: none;
@@ -6293,12 +6300,11 @@ button.swiper-pagination-bullet {
   align-items: center;
   padding: var(--space-8) 0;
   margin: 0;
-  grid-template:
-    minmax(var(--ml-item-minimal-height, 48px), min-content) / var(
-      --mli-outer-spacing
-    )
-    max-content 1fr var(--mli-outer-spacing);
   grid-template-areas: '. imagebadge label .';
+  grid-template-columns:
+    var(--mli-outer-spacing)
+    max-content 1fr var(--mli-outer-spacing);
+  grid-template-rows: minmax(var(--ml-item-minimal-height, 48px), min-content);
 
   /* children icon */
 }
@@ -6585,13 +6591,13 @@ button.swiper-pagination-bullet {
   display: grid;
   overflow: hidden;
   block-size: 100%;
-  grid-template:
-    var(--height) 1fr /
-    var(--gutter) var(--button-size) 1fr var(--button-size)
-    var(--gutter);
   grid-template-areas:
     '. hamburger logo . .'
     'p p p p p';
+  grid-template-columns:
+    var(--gutter) var(--button-size) 1fr var(--button-size)
+    var(--gutter);
+  grid-template-rows: var(--height) 1fr;
 }
 
   @media (width >= 576px) {.mobile-navigation-module-rMdS- {
@@ -6674,11 +6680,11 @@ button.swiper-pagination-bullet {
   align-items: center;
   background-color: var(--color-white);
   border-block-end: 1px solid transparent;
-  grid-template:
-    var(--height) /
+  grid-template-areas: '. hamburger search . logo actions .';
+  grid-template-columns:
     var(--gutter) var(--button-size) var(--button-size) var(--button-size)
     1fr auto var(--gutter);
-  grid-template-areas: '. hamburger search . logo actions .';
+  grid-template-rows: var(--height);
   transition: border-block-end-color 0s var(--transition-duration);
 }
 
@@ -7275,7 +7281,7 @@ button.swiper-pagination-bullet {
   .announcement-module-Xi0L5 .announcement-module-4XVjD {
     display: grid;
     align-items: center;
-    grid-template: 'icon content close';
+    grid-template-areas: 'icon content close';
     grid-template-columns: var(--close-button-size) 1fr var(--close-button-size);
     grid-template-rows: minmax(var(--close-button-size), min-content);
     inline-size: 100%;
@@ -7284,7 +7290,7 @@ button.swiper-pagination-bullet {
   @media (width >= 576px) {
 
   .announcement-module-Xi0L5 .announcement-module-4XVjD {
-      grid-template: '. . icon . content . close';
+      grid-template-areas: '. . icon . content . close';
       grid-template-columns:
         var(--close-button-size) 1fr var(--space-24) var(--space-8)
         minmax(0, max-content) 1fr var(--close-button-size)
@@ -7622,11 +7628,12 @@ button.swiper-pagination-bullet {
 
   display: grid;
   overflow: clip;
-  grid-template: minmax(0, min-content) 1fr minmax(0, min-content) / 100%;
   grid-template-areas:
     'page-header'
     'page-main'
     'page-footer';
+  grid-template-columns: 100%;
+  grid-template-rows: minmax(0, min-content) 1fr minmax(0, min-content);
 }
 
   /* main area, between page header and footer */
@@ -7636,11 +7643,12 @@ button.swiper-pagination-bullet {
     box-sizing: border-box;
     margin: 0 auto;
     grid-area: page-main;
-    grid-template: minmax(0, max-content) minmax(0, max-content) 1fr / 100%;
     grid-template-areas:
       'breadcrumbs'
       'title'
       'content';
+    grid-template-columns: 100%;
+    grid-template-rows: minmax(0, max-content) minmax(0, max-content) 1fr;
     inline-size: 100%;
     max-inline-size: var(--page-container-max-width);
     padding-inline: var(--page-container-padding-inline);
@@ -8591,14 +8599,13 @@ button.swiper-pagination-bullet {
 
   display: grid;
   gap: var(--gap-row) var(--gap-col);
-  grid-template:
-    [bar-start] auto [bar-end] repeat(3, auto)
-    / [bar-start] 1fr [bar-end];
   grid-template-areas:
     'search'
     'filter'
     'results'
     'paging';
+  grid-template-columns: [bar-start] 1fr [bar-end];
+  grid-template-rows: [bar-start] auto [bar-end] repeat(3, auto);
   scroll-margin-block: calc(var(--sticky-top) + var(--gap-row));
 }
 
@@ -8949,10 +8956,11 @@ button.swiper-pagination-bullet {
     z-index: calc(var(--sidebar-layer) + 1);
     display: grid;
     background: var(--color-white);
-    grid-template: 46px 1fr / 1fr;
     grid-template-areas:
       'header'
       'content';
+    grid-template-columns: 1fr;
+    grid-template-rows: 46px 1fr;
     inline-size: min(382px, 100%);
     inset: 0 auto 0 0;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sonic-equipment/ui",
-  "version": "210.0.0",
+  "version": "211.0.0",
   "type": "module",
   "license": "MIT",
   "engines": {