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

package/dist/allocationDetails.scss

@@ -540,11 +540,9 @@ $ad-slider-arrows: "--_ctm-dn-sr-pn-as"; // design.slider.paginationArrows
           // so the rules come from a rebound copy of the card stylesheet rather than
           // being written out again here.
           .showcase__title {
-            // A row now, because the view switcher sits in this header beside the
-            // name and quota rather than up in `.main__header`. `flex-start` lets the
-            // switcher's own Vertical Alignment decide where it sits against the
-            // taller text column — in a row, align-self IS the vertical axis, which
-            // is what Top / Center / Bottom means.
+            // Name and quota only — the view switcher moved back up to
+            // `.main__header`, where it is drawn once for the whole element instead
+            // of once per allocation.
             display: flex;
             align-items: flex-start;
             justify-content: space-between;
@@ -719,9 +717,9 @@ $ad-slider-arrows: "--_ctm-dn-sr-pn-as"; // design.slider.paginationArrows
           }
         }
 
-        // The view switcher lives in the allocation header (`.showcase__title`), not
-        // in `.main__header` where it started, so its rules sit at showcase level and
-        // reach it wherever it is nested.
+        // The view switcher sits in `.main__header`, once for the whole element.
+        // These rules stay at showcase level rather than nested under that header, so
+        // they keep reaching it wherever it ends up.
         .button__group {
           display: flex;
           gap: 12px;
@@ -2152,48 +2150,44 @@ $ad-slider-arrows: "--_ctm-dn-sr-pn-as"; // design.slider.paginationArrows
             margin-top: 10px;
           }
         }
-        // Profiles Slider > Pagination Arrows. These rules used to read
+        // Profiles Slider > Pagination Arrows, styled the way the Gallery Slider
+        // element styles its own: the button is a plain 10px-padded circle, sized by
+        // Arrow Size, and the only fill it carries is the chosen Background Color
+        // mixed down to 10% (20% on hover). These rules used to read
         // `--_ctm-dn-pn-as-*`, a `design.paginationArrows` node that does not exist
-        // on this element — so every one of them fell through to its hardcoded
-        // default and the panel could not reach the strip's arrows at all. They now
-        // read design.slider.paginationArrows, and each fallback is the value that
-        // was hardcoded, so an untouched strip renders exactly as before.
-        &[data-control-type="Side"] {
-          .left-button,
-          .right-button {
-            background-color: prepareMediaVariable(#{$ad-slider-arrows}-bd-cr, transparent);
-          }
-        }
-        &[data-background-shape="Round"] {
-          .left-button,
-          .right-button {
-            background-color: prepareMediaVariable(#{$ad-slider-arrows}-bd-cr, #f2f5f5);
-            box-sizing: 0 4px 8px rgba(0, 0, 0, 0.1);
+        // on this element, so the panel could not reach the strip's arrows at all;
+        // they now read design.slider.paginationArrows.
+        :is(.left-button, .right-button) {
+          @include BgColorLighter(var(#{$ad-slider-arrows}-bd-cr), 10%);
+
+          &:not(:disabled):hover {
+            @include BgColorLighter(var(#{$ad-slider-arrows}-bd-cr), 20%);
           }
         }
         .left-button,
         .right-button {
-          padding: prepareMediaVariable(#{$ad-slider-arrows}-pg, 10px);
-          border-color: prepareMediaVariable(#{$ad-slider-arrows}-br-cr, transparent);
-          border-style: prepareMediaVariable(#{$ad-slider-arrows}-br-se, solid);
-          border-width: prepareMediaVariable(#{$ad-slider-arrows}-br-wh, 0);
-          // 50%, not prepareMediaVariable's `inherit` tail: an arrow with no
-          // configured radius has always been a circle.
-          border-radius: prepareMediaVariable(#{$ad-slider-arrows}-br-rs, 50%);
+          padding: 10px;
+          border: none;
+          border-radius: 50%;
+
+          // Background Shape: a circle by default, squared off by "None" and given
+          // the gallery's 4px rounding by "Square". Keyed off the BUTTON, not the
+          // `.embla` container — EmblaCarouselBasic, which renders this strip, only
+          // publishes the attribute on the buttons.
+          &[data-background-shape="None"] {
+            border-radius: 0;
+          }
+          &[data-background-shape="Round"] {
+            border-radius: 50%;
+          }
+          &[data-background-shape="Square"] {
+            border-radius: 4px;
+          }
           // 20px, not prepareMediaVariable's `inherit` tail — inheriting the strip's
           // width here would blow the buttons out. 20 is also the schema default, so
           // a strip saved before this node existed matches a fresh one.
           width: prepareMediaVariable(#{$ad-slider-arrows}-aw-se, 20px);
           height: prepareMediaVariable(#{$ad-slider-arrows}-aw-se, 20px);
-          // Opt-in, like the gallery's: these arrows have never cast a shadow.
-          box-shadow: none;
-
-          &[data-show-shadow="true"] {
-            box-shadow: prepareMediaVariable(#{$ad-slider-arrows}-sw-ae, 0 0)
-              prepareMediaVariable(#{$ad-slider-arrows}-sw-br, 0)
-              prepareMediaVariable(#{$ad-slider-arrows}-sw-sd, 0)
-              prepareMediaVariable(#{$ad-slider-arrows}-sw-cr, transparent);
-          }
 
           display: flex;
           align-items: center;
@@ -2201,19 +2195,6 @@ $ad-slider-arrows: "--_ctm-dn-sr-pn-as"; // design.slider.paginationArrows
           cursor: pointer;
           outline: none;
 
-          &[data-show-border="false"] {
-            border: none;
-          }
-
-          // Background Shape overrides the configured radius when it names one;
-          // "None" leaves the radius alone.
-          &[data-background-shape="Round"] {
-            border-radius: 50%;
-          }
-          &[data-background-shape="Square"] {
-            border-radius: 0;
-          }
-
           &:disabled {
             & svg {
               path {