@sc-360-v2/storefront-cms-library 0.5.64 → 0.5.66

package/dist/product-highlights.scss

@@ -103,63 +103,61 @@
         .item {
           width: prepareMediaVariable(--_ctm-lt-im-wh);
           height: prepareMediaVariable(--_ctm-lt-im-ht);
-          padding: var(--_ctm-mob-lt-im-pg, var(--_ctm-tab-lt-im-pg, var(--_ctm-lt-im-pg)));
 
-          background-color: var(
-            --_ctm-mob-dn-im-se-bd-cr,
-            var(--_ctm-tab-dn-im-se-bd-cr, var(--_ctm-dn-im-se-bd-cr))
-          );
+          position: relative;
+          img {
+            object-fit: cover;
+            display: block;
+            height: 100%;
+            width: 100%;
+            box-sizing: border-box;
 
-          border-color: var(
-            --_ctm-mob-dn-im-se-br-cr,
-            var(--_ctm-tab-dn-im-se-br-cr, var(--_ctm-dn-im-se-br-cr))
-          );
+            padding: var(--_ctm-mob-lt-im-pg, var(--_ctm-tab-lt-im-pg, var(--_ctm-lt-im-pg)));
 
-          border-style: var(
-            --_ctm-mob-dn-im-se-br-se,
-            var(--_ctm-tab-dn-im-se-br-se, var(--_ctm-dn-im-se-br-se))
-          );
+            background-color: var(
+              --_ctm-mob-dn-im-se-bd-cr,
+              var(--_ctm-tab-dn-im-se-bd-cr, var(--_ctm-dn-im-se-bd-cr))
+            );
 
-          border-width: var(
-            --_ctm-mob-dn-im-se-br-wh,
-            var(--_ctm-tab-dn-im-se-br-wh, var(--_ctm-dn-im-se-br-wh))
-          );
+            border-color: var(
+              --_ctm-mob-dn-im-se-br-cr,
+              var(--_ctm-tab-dn-im-se-br-cr, var(--_ctm-dn-im-se-br-cr))
+            );
 
-          border-radius: var(
-            --_ctm-mob-dn-im-se-br-rs,
-            var(--_ctm-tab-dn-im-se-br-rs, var(--_ctm-dn-im-se-br-rs))
-          );
+            border-style: var(
+              --_ctm-mob-dn-im-se-br-se,
+              var(--_ctm-tab-dn-im-se-br-se, var(--_ctm-dn-im-se-br-se))
+            );
 
-          box-shadow: var(
-            --_show-shadow,
-            var(
-                --_ctm-mob-dn-im-se-sw-ae,
-                var(--_ctm-tab-dn-im-se-sw-ae, var(--_ctm-dn-im-se-sw-ae))
-              )
-              var(
-                --_ctm-mob-dn-im-se-sw-br,
-                var(--_ctm-tab-dn-im-se-sw-br, var(--_ctm-dn-im-se-sw-br))
-              )
-              var(
-                --_ctm-mob-dn-im-se-sw-sd,
-                var(--_ctm-tab-dn-im-se-sw-sd, var(--_ctm-dn-im-se-sw-sd))
-              )
-              var(
-                --_ctm-mob-dn-im-se-sw-cr,
-                var(--_ctm-tab-dn-im-se-sw-cr, var(--_ctm-dn-im-se-sw-cr))
-              )
-          );
+            border-width: var(
+              --_ctm-mob-dn-im-se-br-wh,
+              var(--_ctm-tab-dn-im-se-br-wh, var(--_ctm-dn-im-se-br-wh))
+            );
 
-          position: relative;
-          img {
-            object-fit: cover;
-            height: 100%;
-            width: 100%;
-            // Item Style > Border Radius rounds the item box, but the image is painted
-            // over its corners. `overflow: hidden` on the item would clip it, except the
-            // divider ::before sits outside the box (see dividerGapOffset) and would go
-            // with it — so round the image itself instead.
-            border-radius: inherit;
+            border-radius: var(
+              --_ctm-mob-dn-im-se-br-rs,
+              var(--_ctm-tab-dn-im-se-br-rs, var(--_ctm-dn-im-se-br-rs))
+            );
+
+            box-shadow: var(
+              --_show-shadow,
+              var(
+                  --_ctm-mob-dn-im-se-sw-ae,
+                  var(--_ctm-tab-dn-im-se-sw-ae, var(--_ctm-dn-im-se-sw-ae))
+                )
+                var(
+                  --_ctm-mob-dn-im-se-sw-br,
+                  var(--_ctm-tab-dn-im-se-sw-br, var(--_ctm-dn-im-se-sw-br))
+                )
+                var(
+                  --_ctm-mob-dn-im-se-sw-sd,
+                  var(--_ctm-tab-dn-im-se-sw-sd, var(--_ctm-dn-im-se-sw-sd))
+                )
+                var(
+                  --_ctm-mob-dn-im-se-sw-cr,
+                  var(--_ctm-tab-dn-im-se-sw-cr, var(--_ctm-dn-im-se-sw-cr))
+                )
+            );
           }
         }
         .items__container {

package/dist/product-image-allocation.scss

@@ -512,23 +512,20 @@
         margin-top: 10px;
       }
     }
-    &[data-control-type="Side"] {
-      .left-button,
-      .right-button {
-        background-color: transparent;
+    // Background Shape, exactly as the Gallery Slider element does it: the button is
+    // a circle by default, "None" squares it off and "Square" gives it the 4px
+    // rounding. Keyed off the BUTTON rather than the `.embla` container, because
+    // that is the one place both carousel components publish the attribute.
+    .left-button,
+    .right-button {
+      &[data-background-shape="None"] {
+        border-radius: 0;
       }
-    }
-    &[data-background-shape="Round"] {
-      .left-button,
-      .right-button {
-        // background-color: var(
-        //   --_ctm-mob-dn-ie-pn-as-bd-cr,
-        //   var(--_ctm-tab-dn-ie-pn-as-bd-cr, var(--_ctm-dn-ie-pn-as-bd-cr))
-        // );
-        &:not(:disabled):hover {
-          @include BgColorLighter(var(--_thm-py-bs-hr-se-bd-cr), 5%);
-        }
-        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+      &[data-background-shape="Round"] {
+        border-radius: 50%;
+      }
+      &[data-background-shape="Square"] {
+        border-radius: 4px;
       }
     }
 
@@ -638,37 +635,16 @@
         }
       }
     }
-    // Image > Pagination Arrows: the button's own box. Until now the arrows carried
-    // only a glyph, a size and a colour, so the Border and Radius tabs of that panel
-    // had nothing to write to and the box below was hardcoded. Declared once for both
-    // buttons and placed after them so it wins on source order — each still sets its
-    // own margin and disabled state above.
-    //
-    // Every fallback is the value that was hardcoded here before (10px padding, a
-    // 50% radius, no border), so an arrow nobody has styled looks exactly as it did.
-    .left-button,
-    .right-button {
-      padding: prepareMediaVariable(--_ctm-dn-ie-pn-as-pg, 10px);
-      background-color: prepareMediaVariable(--_ctm-dn-ie-pn-as-bd-cr, transparent);
-      border-color: prepareMediaVariable(--_ctm-dn-ie-pn-as-br-cr, transparent);
-      border-style: prepareMediaVariable(--_ctm-dn-ie-pn-as-br-se, solid);
-      border-width: prepareMediaVariable(--_ctm-dn-ie-pn-as-br-wh, 0);
-      // Falls back to 50%, NOT prepareMediaVariable's `inherit` tail — an arrow with
-      // no configured radius has always been a circle.
-      border-radius: prepareMediaVariable(--_ctm-dn-ie-pn-as-br-rs, 50%);
-      // Shadow is opt-in: these arrows have never cast one, so it only appears once
-      // Show Shadow is switched on.
-      box-shadow: none;
-
-      &[data-show-shadow="true"] {
-        box-shadow: prepareMediaVariable(--_ctm-dn-ie-pn-as-sw-ae, 0 0)
-          prepareMediaVariable(--_ctm-dn-ie-pn-as-sw-br, 0)
-          prepareMediaVariable(--_ctm-dn-ie-pn-as-sw-sd, 0)
-          prepareMediaVariable(--_ctm-dn-ie-pn-as-sw-cr, transparent);
-      }
-
-      &[data-show-border="false"] {
-        border: none;
+    // Image > Pagination Arrows. Only what the panel offers: Background Color and
+    // Arrow Color (Background Shape is handled on the container above, Arrow Size by
+    // the two rules before this one). Same treatment the Gallery Slider element uses
+    // — the chosen fill is mixed down to 10%, lifting to 20% on hover, so a solid
+    // colour reads as a tint behind the glyph rather than a hard disc.
+    :is(.left-button, .right-button) {
+      @include BgColorLighter(var(--_ctm-dn-ie-pn-as-bd-cr), 10%);
+
+      &:not(:disabled):hover {
+        @include BgColorLighter(var(--_ctm-dn-ie-pn-as-bd-cr), 20%);
       }
 
       // Arrow Color. Applied to the svg itself and to any descendant that carries a
@@ -686,15 +662,6 @@
           fill: prepareMediaVariable(--_ctm-dn-ie-pn-as-aw-cr, var(--_gray-500));
         }
       }
-
-      // Background Shape overrides the configured radius when it is set to something
-      // definite; "None" leaves the radius alone.
-      &[data-background-shape="Round"] {
-        border-radius: 50%;
-      }
-      &[data-background-shape="Square"] {
-        border-radius: 0;
-      }
     }
 
     .icon {
@@ -976,15 +943,24 @@
 
     border-color: var(
       --_show-im-border,
-      var(--_ctm-mob-dn-ie-im-se-br-cr, var(--_ctm-tab-dn-ie-im-se-br-cr, var(--_ctm-dn-ie-im-se-br-cr)))
+      var(
+        --_ctm-mob-dn-ie-im-se-br-cr,
+        var(--_ctm-tab-dn-ie-im-se-br-cr, var(--_ctm-dn-ie-im-se-br-cr))
+      )
     );
     border-style: var(
       --_show-im-border,
-      var(--_ctm-mob-dn-ie-im-se-br-se, var(--_ctm-tab-dn-ie-im-se-br-se, var(--_ctm-dn-ie-im-se-br-se)))
+      var(
+        --_ctm-mob-dn-ie-im-se-br-se,
+        var(--_ctm-tab-dn-ie-im-se-br-se, var(--_ctm-dn-ie-im-se-br-se))
+      )
     );
     border-width: var(
       --_show-im-border,
-      var(--_ctm-mob-dn-ie-im-se-br-wh, var(--_ctm-tab-dn-ie-im-se-br-wh, var(--_ctm-dn-ie-im-se-br-wh)))
+      var(
+        --_ctm-mob-dn-ie-im-se-br-wh,
+        var(--_ctm-tab-dn-ie-im-se-br-wh, var(--_ctm-dn-ie-im-se-br-wh))
+      )
     );
     border-radius: var(
       --_ctm-mob-dn-ie-im-se-br-rs,

package/dist/product-options.scss

@@ -11,6 +11,18 @@
   @return prepareMediaVariable($newVar, prepareMediaVariable($legacyVar));
 }
 
+// The value text's typography is not state-aware — the Option Value Text Style panel has
+// no Default / Hover / Selected picker — so its keys sit flat on optionValueTextStyle
+// rather than under defaultState. Three shapes can be on disk, so resolve in order: the
+// flat variable, then the defaultState-nested one saved while the section still had the
+// picker, then the pre-split optionValueStyle.defaultState one.
+@function optionValueTextDefaultVar($flatVar, $stateVar, $legacyVar) {
+  @return prepareMediaVariable(
+    $flatVar,
+    prepareMediaVariable($stateVar, prepareMediaVariable($legacyVar))
+  );
+}
+
 [data-div-type="element"] {
   &[data-element-type="productOptions"] {
     width: var(
@@ -558,46 +570,83 @@
         .option__value__text {
           color: var(
             --_sf-hr-cr,
-            #{optionValueTextVar(--_ctm-dn-on-ve-tt-se-dt-se-cr, --_ctm-dn-on-ve-se-dt-se-cr)}
+            #{optionValueTextDefaultVar(
+                --_ctm-dn-on-ve-tt-se-cr,
+                --_ctm-dn-on-ve-tt-se-dt-se-cr,
+                --_ctm-dn-on-ve-se-dt-se-cr
+              )}
           );
           font-family: var(
             --_sf-hr-ft-fy,
-            #{optionValueTextVar(--_ctm-dn-on-ve-tt-se-dt-se-ft-fy, --_ctm-dn-on-ve-se-dt-se-ft-fy)}
+            #{optionValueTextDefaultVar(
+                --_ctm-dn-on-ve-tt-se-ft-fy,
+                --_ctm-dn-on-ve-tt-se-dt-se-ft-fy,
+                --_ctm-dn-on-ve-se-dt-se-ft-fy
+              )}
           );
           text-transform: var(
             --_sf-hr-tt-tm,
-            #{optionValueTextVar(--_ctm-dn-on-ve-tt-se-dt-se-tt-tm, --_ctm-dn-on-ve-se-dt-se-tt-tm)}
+            #{optionValueTextDefaultVar(
+                --_ctm-dn-on-ve-tt-se-tt-tm,
+                --_ctm-dn-on-ve-tt-se-dt-se-tt-tm,
+                --_ctm-dn-on-ve-se-dt-se-tt-tm
+              )}
           );
           word-wrap: var(
             --_sf-hr-wd-wp,
-            #{optionValueTextVar(--_ctm-dn-on-ve-tt-se-dt-se-wd-wp, --_ctm-dn-on-ve-se-dt-se-wd-wp)}
+            #{optionValueTextDefaultVar(
+                --_ctm-dn-on-ve-tt-se-wd-wp,
+                --_ctm-dn-on-ve-tt-se-dt-se-wd-wp,
+                --_ctm-dn-on-ve-se-dt-se-wd-wp
+              )}
           );
           word-break: var(
             --_sf-hr-wd-bk,
-            #{optionValueTextVar(--_ctm-dn-on-ve-tt-se-dt-se-wd-bk, --_ctm-dn-on-ve-se-dt-se-wd-bk)}
+            #{optionValueTextDefaultVar(
+                --_ctm-dn-on-ve-tt-se-wd-bk,
+                --_ctm-dn-on-ve-tt-se-dt-se-wd-bk,
+                --_ctm-dn-on-ve-se-dt-se-wd-bk
+              )}
           );
           font-size: var(
             --_sf-hr-ft-se,
-            #{optionValueTextVar(--_ctm-dn-on-ve-tt-se-dt-se-ft-se, --_ctm-dn-on-ve-se-dt-se-ft-se)}
+            #{optionValueTextDefaultVar(
+                --_ctm-dn-on-ve-tt-se-ft-se,
+                --_ctm-dn-on-ve-tt-se-dt-se-ft-se,
+                --_ctm-dn-on-ve-se-dt-se-ft-se
+              )}
           );
           font-weight: var(
             --_sf-hr-ft-wt,
-            #{optionValueTextVar(--_ctm-dn-on-ve-tt-se-dt-se-ft-wt, --_ctm-dn-on-ve-se-dt-se-ft-wt)}
+            #{optionValueTextDefaultVar(
+                --_ctm-dn-on-ve-tt-se-ft-wt,
+                --_ctm-dn-on-ve-tt-se-dt-se-ft-wt,
+                --_ctm-dn-on-ve-se-dt-se-ft-wt
+              )}
           );
           font-style: var(
             --_sf-hr-ft-se-ic,
-            #{optionValueTextVar(
+            #{optionValueTextDefaultVar(
+                --_ctm-dn-on-ve-tt-se-ft-se-ic,
                 --_ctm-dn-on-ve-tt-se-dt-se-ft-se-ic,
                 --_ctm-dn-on-ve-se-dt-se-ft-se-ic
               )}
           );
           text-align: var(
             --_sf-hr-tt-an,
-            #{optionValueTextVar(--_ctm-dn-on-ve-tt-se-dt-se-tt-an, --_ctm-dn-on-ve-se-dt-se-tt-an)}
+            #{optionValueTextDefaultVar(
+                --_ctm-dn-on-ve-tt-se-tt-an,
+                --_ctm-dn-on-ve-tt-se-dt-se-tt-an,
+                --_ctm-dn-on-ve-se-dt-se-tt-an
+              )}
           );
           letter-spacing: var(
             --_sf-hr-lr-sg,
-            #{optionValueTextVar(--_ctm-dn-on-ve-tt-se-dt-se-lr-sg, --_ctm-dn-on-ve-se-dt-se-lr-sg)}
+            #{optionValueTextDefaultVar(
+                --_ctm-dn-on-ve-tt-se-lr-sg,
+                --_ctm-dn-on-ve-tt-se-dt-se-lr-sg,
+                --_ctm-dn-on-ve-se-dt-se-lr-sg
+              )}
           );
           // The pre-split key is `le-ht-dc`; the new section is read under both spellings
           // so whichever one the converter writes resolves.
@@ -605,7 +654,8 @@
             --_sf-hr-le-ht,
             prepareMediaVariable(
               --_ctm-dn-on-ve-tt-se-dt-se-le-ht,
-              #{optionValueTextVar(
+              #{optionValueTextDefaultVar(
+                  --_ctm-dn-on-ve-tt-se-le-ht-dc,
                   --_ctm-dn-on-ve-tt-se-dt-se-le-ht-dc,
                   --_ctm-dn-on-ve-se-dt-se-le-ht-dc
                 )}
@@ -613,7 +663,11 @@
           );
           text-decoration: var(
             --_sf-hr-ue,
-            #{optionValueTextVar(--_ctm-dn-on-ve-tt-se-dt-se-ue, --_ctm-dn-on-ve-se-dt-se-ue)}
+            #{optionValueTextDefaultVar(
+                --_ctm-dn-on-ve-tt-se-ue,
+                --_ctm-dn-on-ve-tt-se-dt-se-ue,
+                --_ctm-dn-on-ve-se-dt-se-ue
+              )}
           );
           // The swatch item is a fixed box (Swatch Item Size), so a value like "Small"
           // broke onto a second line inside it. Keep it on one line.
@@ -677,46 +731,83 @@
       .option__value__text {
         color: var(
           --_sf-hr-cr,
-          #{optionValueTextVar(--_ctm-dn-on-ve-tt-se-dt-se-cr, --_ctm-dn-on-ve-se-dt-se-cr)}
+          #{optionValueTextDefaultVar(
+              --_ctm-dn-on-ve-tt-se-cr,
+              --_ctm-dn-on-ve-tt-se-dt-se-cr,
+              --_ctm-dn-on-ve-se-dt-se-cr
+            )}
         );
         font-family: var(
           --_sf-hr-ft-fy,
-          #{optionValueTextVar(--_ctm-dn-on-ve-tt-se-dt-se-ft-fy, --_ctm-dn-on-ve-se-dt-se-ft-fy)}
+          #{optionValueTextDefaultVar(
+              --_ctm-dn-on-ve-tt-se-ft-fy,
+              --_ctm-dn-on-ve-tt-se-dt-se-ft-fy,
+              --_ctm-dn-on-ve-se-dt-se-ft-fy
+            )}
         );
         text-transform: var(
           --_sf-hr-tt-tm,
-          #{optionValueTextVar(--_ctm-dn-on-ve-tt-se-dt-se-tt-tm, --_ctm-dn-on-ve-se-dt-se-tt-tm)}
+          #{optionValueTextDefaultVar(
+              --_ctm-dn-on-ve-tt-se-tt-tm,
+              --_ctm-dn-on-ve-tt-se-dt-se-tt-tm,
+              --_ctm-dn-on-ve-se-dt-se-tt-tm
+            )}
         );
         word-wrap: var(
           --_sf-hr-wd-wp,
-          #{optionValueTextVar(--_ctm-dn-on-ve-tt-se-dt-se-wd-wp, --_ctm-dn-on-ve-se-dt-se-wd-wp)}
+          #{optionValueTextDefaultVar(
+              --_ctm-dn-on-ve-tt-se-wd-wp,
+              --_ctm-dn-on-ve-tt-se-dt-se-wd-wp,
+              --_ctm-dn-on-ve-se-dt-se-wd-wp
+            )}
         );
         word-break: var(
           --_sf-hr-wd-bk,
-          #{optionValueTextVar(--_ctm-dn-on-ve-tt-se-dt-se-wd-bk, --_ctm-dn-on-ve-se-dt-se-wd-bk)}
+          #{optionValueTextDefaultVar(
+              --_ctm-dn-on-ve-tt-se-wd-bk,
+              --_ctm-dn-on-ve-tt-se-dt-se-wd-bk,
+              --_ctm-dn-on-ve-se-dt-se-wd-bk
+            )}
         );
         font-size: var(
           --_sf-hr-ft-se,
-          #{optionValueTextVar(--_ctm-dn-on-ve-tt-se-dt-se-ft-se, --_ctm-dn-on-ve-se-dt-se-ft-se)}
+          #{optionValueTextDefaultVar(
+              --_ctm-dn-on-ve-tt-se-ft-se,
+              --_ctm-dn-on-ve-tt-se-dt-se-ft-se,
+              --_ctm-dn-on-ve-se-dt-se-ft-se
+            )}
         );
         font-weight: var(
           --_sf-hr-ft-wt,
-          #{optionValueTextVar(--_ctm-dn-on-ve-tt-se-dt-se-ft-wt, --_ctm-dn-on-ve-se-dt-se-ft-wt)}
+          #{optionValueTextDefaultVar(
+              --_ctm-dn-on-ve-tt-se-ft-wt,
+              --_ctm-dn-on-ve-tt-se-dt-se-ft-wt,
+              --_ctm-dn-on-ve-se-dt-se-ft-wt
+            )}
         );
         font-style: var(
           --_sf-hr-ft-se-ic,
-          #{optionValueTextVar(
+          #{optionValueTextDefaultVar(
+              --_ctm-dn-on-ve-tt-se-ft-se-ic,
               --_ctm-dn-on-ve-tt-se-dt-se-ft-se-ic,
               --_ctm-dn-on-ve-se-dt-se-ft-se-ic
             )}
         );
         text-align: var(
           --_sf-hr-tt-an,
-          #{optionValueTextVar(--_ctm-dn-on-ve-tt-se-dt-se-tt-an, --_ctm-dn-on-ve-se-dt-se-tt-an)}
+          #{optionValueTextDefaultVar(
+              --_ctm-dn-on-ve-tt-se-tt-an,
+              --_ctm-dn-on-ve-tt-se-dt-se-tt-an,
+              --_ctm-dn-on-ve-se-dt-se-tt-an
+            )}
         );
         letter-spacing: var(
           --_sf-hr-lr-sg,
-          #{optionValueTextVar(--_ctm-dn-on-ve-tt-se-dt-se-lr-sg, --_ctm-dn-on-ve-se-dt-se-lr-sg)}
+          #{optionValueTextDefaultVar(
+              --_ctm-dn-on-ve-tt-se-lr-sg,
+              --_ctm-dn-on-ve-tt-se-dt-se-lr-sg,
+              --_ctm-dn-on-ve-se-dt-se-lr-sg
+            )}
         );
         // The pre-split key is `le-ht-dc`; the new section is read under both spellings
         // so whichever one the converter writes resolves.
@@ -724,7 +815,8 @@
           --_sf-hr-le-ht,
           prepareMediaVariable(
             --_ctm-dn-on-ve-tt-se-dt-se-le-ht,
-            #{optionValueTextVar(
+            #{optionValueTextDefaultVar(
+                --_ctm-dn-on-ve-tt-se-le-ht-dc,
                 --_ctm-dn-on-ve-tt-se-dt-se-le-ht-dc,
                 --_ctm-dn-on-ve-se-dt-se-le-ht-dc
               )}
@@ -732,7 +824,11 @@
         );
         text-decoration: var(
           --_sf-hr-ue,
-          #{optionValueTextVar(--_ctm-dn-on-ve-tt-se-dt-se-ue, --_ctm-dn-on-ve-se-dt-se-ue)}
+          #{optionValueTextDefaultVar(
+              --_ctm-dn-on-ve-tt-se-ue,
+              --_ctm-dn-on-ve-tt-se-dt-se-ue,
+              --_ctm-dn-on-ve-se-dt-se-ue
+            )}
         );
         // The swatch item is a fixed box (Swatch Item Size), so a value like "Small"
         // broke onto a second line inside it. Keep it on one line.

package/dist/quotes.scss

@@ -4,6 +4,17 @@
 
 $resizerId: "[data-cms-tool='cms-element-resizer']";
 $resizeActive: '[data-cms-element-resizer="true"]';
+
+// Design > Icon Actions: the CSS-variable scope of each quick action's sub-section,
+// keyed by the class its span carries. `splitCamelCaseAndJoin` turns the schema's
+// selector keys into these codes, e.g. `sendMessageIcon` -> `sd-me-in`.
+$quote-action-icons: (
+  "quotes_send": "sd-me-in",
+  "quotes_download": "dd-in",
+  "quotes_print": "pt-in",
+  "quotes_view": "vw-in",
+  "quotes_cancel": "cl-in",
+);
 [data-div-type="element"] {
   &[data-element-type="quotes"] {
     width: var(
@@ -20,7 +31,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
 
     & > div {
       &.wrapper {
-        width: 100%;
+        width: prepareMediaVariable(--_ctm-lt-wh);
         padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
         &[data-divider-type="true"] .metric_item {
           border: 0px !important;
@@ -291,6 +302,34 @@ $resizeActive: '[data-cms-element-resizer="true"]';
               flex: 1 0 0;
               align-self: stretch;
               font-size: 14px;
+              & > span {
+                display: inline-flex;
+                align-items: center;
+                cursor: pointer;
+              }
+
+              // Design > Icons gives each action a tab of its own, so each reads its
+              // own size / color / stroke width rather than one shared set. The
+              // suffixes match the tabs in quotes-element-data.ts: Send, Download,
+              // Print, View, Cancel.
+              // Design > Icon Actions gives each action a sub-section of its own, so
+              // each reads its own size / color / stroke width rather than one shared
+              // set. The codes are what `splitCamelCaseAndJoin` makes of those
+              // sub-sections: sendMessageIcon -> sd-me-in, downloadIcon -> dd-in, and
+              // so on. The fallbacks keep quotes saved before this section looking as
+              // they always have.
+              @each $class, $scope in $quote-action-icons {
+                .#{$class} span svg {
+                  width: prepareMediaVariable(--_ctm-dn-in-as-#{$scope}-in-se, 20px);
+                  height: prepareMediaVariable(--_ctm-dn-in-as-#{$scope}-in-se, 20px);
+
+                  path {
+                    stroke: prepareMediaVariable(--_ctm-dn-in-as-#{$scope}-in-cr, #667085);
+                    // Overrides the stroke-width presentation attribute baked into the icon markup.
+                    stroke-width: prepareMediaVariable(--_ctm-dn-in-as-#{$scope}-se-wh, 1.67);
+                  }
+                }
+              }
             }
           }
         }
@@ -475,8 +514,43 @@ $resizeActive: '[data-cms-element-resizer="true"]';
         &[data-background-shape="Round"] {
           .left-button,
           .right-button {
-            background-color: #f2f5f5;
-            box-sizing: 0 4px 8px rgba(0, 0, 0, 0.1);
+            // Pagination Arrows > Background Color, tinted rather than applied flat:
+            // 10% of the picked color at rest and 20% on hover, so the arrow reads as
+            // a soft chip over the card and the hover is a visible step up. Falls back
+            // to the grey these buttons have always used when no color is picked.
+            @include BgColorLighter(prepareMediaVariable(--_ctm-dn-pn-as-bd-cr, #f2f5f5), 10%);
+
+            // Disabled arrows keep the resting tint — a hover response there would
+            // suggest a slide that cannot be reached.
+            &:not(:disabled):hover {
+              @include BgColorLighter(prepareMediaVariable(--_ctm-dn-pn-as-bd-cr, #f2f5f5), 20%);
+            }
+          }
+        }
+        // Square and None carry the same tint; only the corners differ. The 50% radius
+        // that rounds these buttons is set on `.left-button` / `.right-button` below,
+        // so both shapes have to state their own — 6px for Square, square corners for
+        // None.
+        &[data-background-shape="Square"] {
+          .left-button,
+          .right-button {
+            border-radius: 4px;
+            @include BgColorLighter(prepareMediaVariable(--_ctm-dn-pn-as-bd-cr, #f2f5f5), 10%);
+
+            &:not(:disabled):hover {
+              @include BgColorLighter(prepareMediaVariable(--_ctm-dn-pn-as-bd-cr, #f2f5f5), 20%);
+            }
+          }
+        }
+        &[data-background-shape="None"] {
+          .left-button,
+          .right-button {
+            border-radius: 0;
+            @include BgColorLighter(prepareMediaVariable(--_ctm-dn-pn-as-bd-cr, #f2f5f5), 10%);
+
+            &:not(:disabled):hover {
+              @include BgColorLighter(prepareMediaVariable(--_ctm-dn-pn-as-bd-cr, #f2f5f5), 20%);
+            }
           }
         }
         &[data-control-type="Bottom-Overflow"] {
@@ -487,6 +561,13 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           top: unset;
           bottom: 6px;
         }
+        // Side-Overflow keeps the cards full width and lays an arrow over each edge,
+        // which is what the base rules above already do. Stated as its own block so the
+        // option is anchored to a rule rather than working by falling through — the
+        // reason the "Left" and "Right" it replaces were indistinguishable.
+        &[data-control-type="Side-Overflow"] {
+          justify-content: space-between;
+        }
         &[data-control-type="Bottom"] {
           transform: unset;
           position: static;

package/dist/search-results-heading.scss

@@ -83,10 +83,6 @@
             --_ctm-mob-dn-sh-rs-nr-ue,
             var(--_ctm-tab-dn-sh-rs-nr-ue, var(--_ctm-dn-sh-rs-nr-ue))
           );
-          border: var(
-            --_ctm-mob-dn-sh-rs-nr-bd-cr,
-            var(--_ctm-tab-dn-sh-rs-nr-bd-cr, var(--_ctm-dn-sh-rs-nr-bd-cr))
-          );
           border-color: var(
             --_ctm-mob-dn-sh-rs-nr-br-cr,
             var(--_ctm-tab-dn-sh-rs-nr-br-cr, var(--_ctm-dn-sh-rs-nr-br-cr))
@@ -304,12 +300,10 @@
       }
     }
 
-    &[data-widget-shadow="false"] {
-      --_show-shadow: none;
-    }
-
-    &[data-show-shadow="false"] {
-      --_show-shadow: none;
+    .search__results__count[data-show-shadow="false"],
+    .search__other__text[data-show-shadow="false"],
+    .search__keyword__text[data-show-shadow="false"] {
+      --_show-text-content-shadow: none;
     }
   }
 }