@sc-360-v2/storefront-cms-library 0.5.51 → 0.5.52

package/dist/add-order.scss

@@ -6,34 +6,35 @@
   &[data-show-shadow="false"] {
     --_show-shadow: none;
   }
-  &[data-icon-position="left"] {
-    .add_order_button {
-      flex-direction: row;
+  // Icon Position. These used to target `.add_order_button`, which no longer exists —
+  // the button is rendered by the shared ButtonComponent as `.btn__with__text`, so none
+  // of these rules matched and the control did nothing. `.btn__with__text` resolves its
+  // direction through `--_sf-jc`, which nothing was setting either, so it fell back to
+  // the initial `row` whatever the control said.
+  &[data-icon-position="left"],
+  &[data-icon-position="center"] {
+    .btn__with__text {
+      --_sf-jc: row;
     }
   }
   &[data-icon-position="right"] {
-    .add_order_button {
-      flex-direction: row-reverse;
-    }
-  }
-  &[data-icon-position="center"] {
-    .add_order_button {
-      flex-direction: row;
+    .btn__with__text {
+      --_sf-jc: row-reverse;
     }
   }
   &[data-element-style="Icon"] {
     &[data-icon-position="left"] {
-      .add_order_button {
+      .btn__with__text {
         justify-content: start;
       }
     }
     &[data-icon-position="right"] {
-      .add_order_button {
+      .btn__with__text {
         justify-content: end;
       }
     }
     &[data-icon-position="center"] {
-      .add_order_button {
+      .btn__with__text {
         justify-content: center;
       }
     }
@@ -144,10 +145,58 @@
           --_ctm-mob-dn-dt-se-in-c1,
           var(--_ctm-tab-dn-dt-se-in-c1, var(--_ctm-dn-dt-se-in-c1))
         );
+        // Overrides the stroke-width presentation attribute baked into the icon markup.
+        // `--_sf-hr-se-wh` is published by the :hover block so the hover state can carry
+        // its own width; it is unset otherwise and the default state's value applies.
+        stroke-width: var(--_sf-hr-se-wh, prepareMediaVariable(--_ctm-dn-dt-se-se-wh, 1));
       }
     }
 
     &:hover {
+      // The label lives in a child (`.txt`, from ButtonComponent) which sets its own
+      // typography as `var(--_sf-hr-*, <default state>)`. Declaring color/font directly
+      // on the button below therefore never reached it — the child always won with the
+      // default-state values, which is why the Hover state's text properties appeared
+      // dead. Publishing the hover values as those custom properties is what `.txt`
+      // is written to consume, and matches how product-actions.scss does it.
+      --_sf-hr-cr: var(
+        --_ctm-mob-dn-hr-se-cr,
+        var(--_ctm-tab-dn-hr-se-cr, var(--_ctm-dn-hr-se-cr))
+      );
+      --_sf-hr-ft-fy: var(
+        --_ctm-mob-dn-hr-se-ft-fy,
+        var(--_ctm-tab-dn-hr-se-ft-fy, var(--_ctm-dn-hr-se-ft-fy))
+      );
+      --_sf-hr-ft-se: var(
+        --_ctm-mob-dn-hr-se-ft-se,
+        var(--_ctm-tab-dn-hr-se-ft-se, var(--_ctm-dn-hr-se-ft-se))
+      );
+      --_sf-hr-ft-wt: var(
+        --_ctm-mob-dn-hr-se-ft-wt,
+        var(--_ctm-tab-dn-hr-se-ft-wt, var(--_ctm-dn-hr-se-ft-wt))
+      );
+      --_sf-hr-ft-se-ic: var(
+        --_ctm-mob-dn-hr-se-ft-se-ic,
+        var(--_ctm-tab-dn-hr-se-ft-se-ic, var(--_ctm-dn-hr-se-ft-se-ic))
+      );
+      --_sf-hr-tt-an: var(
+        --_ctm-mob-dn-hr-se-tt-an,
+        var(--_ctm-tab-dn-hr-se-tt-an, var(--_ctm-dn-hr-se-tt-an))
+      );
+      --_sf-hr-lr-sg: var(
+        --_ctm-mob-dn-hr-se-lr-sg,
+        var(--_ctm-tab-dn-hr-se-lr-sg, var(--_ctm-dn-hr-se-lr-sg))
+      );
+      --_sf-hr-le-ht: var(
+        --_ctm-mob-dn-hr-se-le-ht,
+        var(--_ctm-tab-dn-hr-se-le-ht, var(--_ctm-dn-hr-se-le-ht))
+      );
+      --_sf-hr-ue: var(
+        --_ctm-mob-dn-hr-se-ue,
+        var(--_ctm-tab-dn-hr-se-ue, var(--_ctm-dn-hr-se-ue))
+      );
+      --_sf-hr-se-wh: prepareMediaVariable(--_ctm-dn-hr-se-se-wh, 1);
+
       background-color: var(
         --_ctm-mob-dn-hr-se-bd-cr,
         var(--_ctm-tab-dn-hr-se-bd-cr, var(--_ctm-dn-hr-se-bd-cr))

package/dist/breadcrumbs.scss

@@ -843,6 +843,11 @@ $resizeActive: '[data-cms-element-resizer="true"]';
         }
       }
 
+      // The Collapsed layout's expand/collapse toggle had no rules at all, so the Expand
+      // Icon design section had nothing to paint and the toggle rendered as an unsized,
+      // uncoloured, non-clickable box. It takes the same `ed-in` (expand icon) variables
+      // the Show More button already uses.
+      .collapse_btn,
       .show_more_btn {
         white-space: nowrap;
         background-color: var(
@@ -850,6 +855,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           var(--_ctm-tab-dn-ed-in-bd-cr, var(--_ctm-dn-ed-in-bd-cr))
         );
         .icon {
+          display: flex;
           svg {
             width: var(
               --_ctm-mob-dn-ed-in-in-se,
@@ -868,6 +874,13 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           }
         }
       }
+
+      .collapse_btn {
+        display: flex;
+        align-items: center;
+        flex-shrink: 0;
+        cursor: pointer;
+      }
     }
 
     // "Show Border" switches. Each design section paints its border from CSS variables,