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

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))