@sc-360-v2/storefront-cms-library 0.5.63 → 0.5.65

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/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/table.scss

@@ -26,9 +26,10 @@
     & > .wrapper {
       width: 100%;
 
-      .pagination:hover {
-        --_sf-bd-cr: var(--_ctm-dn-pn-hr-se-bd-cr, var(--_tst-dn-pn-hr-se-bd-cr));
-      }
+      // No `.pagination:hover` fill rule: hovering anywhere on the strip used to
+      // recolour the whole thing from the hover background key. The row's colour comes
+      // from Default Page Style now, and Hover State colours the page chip under the
+      // pointer rather than the entire bar.
 
       .pagination .active:hover {
         cursor: pointer;
@@ -46,9 +47,24 @@
         --_sf-hr-lh: var(--_ctm-dn-pn-hr-se-le-ht, var(--_tst-dn-pn-hr-se-le-ht));
       }
     }
-    &[data-widget-shadow="false"] {
+    // Table Widget > Box Shadow, as an opt-in on the attribute rather than through the
+    // inherited `--_show-shadow` sentinel it used to use.
+    //
+    // `--_show-shadow` is a custom property, so it INHERITS. 69 element stylesheets
+    // set it to `none` on themselves when their own shadow is off, and any one of them
+    // wrapping a Table passed that `none` straight down — `var(--_show-shadow, …)`
+    // then resolved to `none` and never reached its fallback, so the Table's own Box
+    // Shadow did nothing. Keying off the element's own attribute cannot be inherited
+    // into. This is the same shape the Load More button in this file already uses.
+    &[data-widget-shadow="true"] {
       .table__wrapper {
-        --_show-shadow: none;
+        box-shadow: var(
+            --_ctm-mob-dn-te-wt-sw-ae,
+            var(--_ctm-tab-dn-te-wt-sw-ae, var(--_ctm-dn-te-wt-sw-ae))
+          )
+          var(--_ctm-mob-dn-te-wt-sw-br, var(--_ctm-tab-dn-te-wt-sw-br, var(--_ctm-dn-te-wt-sw-br)))
+          var(--_ctm-mob-dn-te-wt-sw-sd, var(--_ctm-tab-dn-te-wt-sw-sd, var(--_ctm-dn-te-wt-sw-sd)))
+          var(--_ctm-mob-dn-te-wt-sw-cr, var(--_ctm-tab-dn-te-wt-sw-cr, var(--_ctm-dn-te-wt-sw-cr)));
       }
     }
     &[data-widget-border="true"] {
@@ -241,13 +257,8 @@
         var(--_ctm-tab-dn-te-wt-br-rs, var(--_ctm-dn-te-wt-br-rs, var(--_tst-dn-te-wt-br-rs)))
       );
 
-      box-shadow: var(
-        --_show-shadow,
-        var(--_ctm-mob-dn-te-wt-sw-ae, var(--_ctm-tab-dn-te-wt-sw-ae, var(--_ctm-dn-te-wt-sw-ae)))
-          var(--_ctm-mob-dn-te-wt-sw-br, var(--_ctm-tab-dn-te-wt-sw-br, var(--_ctm-dn-te-wt-sw-br)))
-          var(--_ctm-mob-dn-te-wt-sw-sd, var(--_ctm-tab-dn-te-wt-sw-sd, var(--_ctm-dn-te-wt-sw-sd)))
-          var(--_ctm-mob-dn-te-wt-sw-cr, var(--_ctm-tab-dn-te-wt-sw-cr, var(--_ctm-dn-te-wt-sw-cr)))
-      );
+      // Off by default; the `[data-widget-shadow="true"]` rule above turns it on.
+      box-shadow: none;
 
       width: 100%;
 
@@ -375,11 +386,26 @@
         }
         tbody {
           .tbody__row__divider {
-            background-color: var(
-              --_ctm-mob-dn-te-rw-bd-cr,
-              var(--_ctm-tab-dn-te-rw-bd-cr, var(--_ctm-dn-te-rw-bd-cr))
+            // Table Rows carries Default / Hover states now. The default state falls
+            // back to the old flat `te-rw-bd-cr`, which is what tables saved before
+            // the split still paint from.
+            background-color: prepareMediaVariable(
+              --_ctm-dn-te-rw-dt-se-bd-cr,
+              prepareMediaVariable(--_ctm-dn-te-rw-bd-cr)
             );
 
+            // Hover falls back to the default state, so a row with no hover colour
+            // set simply keeps its own.
+            &:hover {
+              background-color: prepareMediaVariable(
+                --_ctm-dn-te-rw-hr-se-bd-cr,
+                prepareMediaVariable(
+                  --_ctm-dn-te-rw-dt-se-bd-cr,
+                  prepareMediaVariable(--_ctm-dn-te-rw-bd-cr)
+                )
+              );
+            }
+
             height: var(--_ctm-mob-lt-rw-ht, var(--_ctm-tab-lt-rw-ht, var(--_ctm-lt-rw-ht)));
 
             .td__col__divider {
@@ -484,33 +510,112 @@
         align-items: var(--_align-center);
         justify-content: var(--_ctm-mob-lt-pn-at, var(--_ctm-tab-lt-pn-at, var(--_ctm-lt-pn-at)));
         margin-top: 10px;
-        background-color: var(
-          --_sf-bd-cr,
-          var(
-            --_ctm-mob-dn-pn-dt-se-bd-cr,
-            var(--_ctm-tab-dn-pn-dt-se-bd-cr, var(--_ctm-dn-pn-dt-se-bd-cr))
-          )
-        );
+        // Default Page Style > Background Color fills the whole pagination row.
+        // Note this is the PAGE key, not the arrows' `pn-dt-se-bd-cr` — the bar used
+        // to read that one, which is why colouring the arrows flooded the strip.
+        background-color: prepareMediaVariable(--_ctm-dn-pn-dt-se-pe-bd-cr, transparent);
+        gap: 12px;
         &.pagination__center {
           justify-content: var(justify-center);
         }
 
+        // Pagination arrows, styled the way the Gallery Slider and Allocation Details
+        // elements style theirs: a plain 10px-padded button sized by Arrow Size, whose
+        // only fill is the chosen Background Color mixed down to 10% (20% on hover),
+        // with Background Shape deciding the corner.
         button {
+          padding: 10px;
+          border: none;
+          border-radius: 50%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          cursor: pointer;
+          outline: none;
+          width: prepareMediaVariable(--_ctm-dn-pn-dt-se-aw-se, 20px);
+          height: prepareMediaVariable(--_ctm-dn-pn-dt-se-aw-se, 20px);
+
+          @include BgColorLighter(var(--_ctm-dn-pn-dt-se-bd-cr), 10%);
+          // Hover. Pagination offers a Default state only, so there are no hover-state
+          // variables to read — the button simply lifts its own fill, which is what it
+          // did before the state existed.
+          &:not(:disabled):hover {
+            @include BgColorLighter(var(--_ctm-dn-pn-dt-se-bd-cr), 20%);
+          }
+
+          // Background Shape. Keyed off the button, which is where the renderer
+          // publishes the attribute alongside the copy on the container.
+          &[data-background-shape="None"] {
+            border-radius: 0;
+          }
+          &[data-background-shape="Round"] {
+            border-radius: 50%;
+          }
+          &[data-background-shape="Square"] {
+            border-radius: 4px;
+          }
+
           svg {
-            width: var(--_width-18);
-            height: var(--_height-18);
-            path {
-              stroke: var(--_gray-500);
-              // stroke: var(--_ctm-dn-pn-in-c1, var(--_tst-dn-pn-in-c1));
-  // Overrides the stroke-width presentation attribute baked into the icon markup.
-  stroke-width: prepareMediaVariable(--_ctm-dn-pn-se-wh, 1.25);
+            width: calc(#{prepareMediaVariable(--_ctm-dn-pn-dt-se-aw-se, 20px)} * 0.5);
+            height: calc(#{prepareMediaVariable(--_ctm-dn-pn-dt-se-aw-se, 20px)} * 0.5);
+
+            // Arrow Color. A library glyph paints with `stroke` on its paths while an
+            // uploaded one may use `fill`, or set either on the root.
+            &[stroke]:not([stroke="none"]),
+            [stroke]:not([stroke="none"]) {
+              stroke: prepareMediaVariable(--_ctm-dn-pn-dt-se-aw-cr, var(--_gray-500));
+            }
+            &[fill]:not([fill="none"]),
+            [fill]:not([fill="none"]) {
+              fill: prepareMediaVariable(--_ctm-dn-pn-dt-se-aw-cr, var(--_gray-500));
             }
           }
         }
-        span {
+        // The page chip. `> span` deliberately, not a bare `span`: the page markup is
+        // an outer span wrapping an inner one that holds the number, so a descendant
+        // selector matched BOTH — the inner span picked up the padding and the fill
+        // and painted a tight box around the digits instead of the chip being filled.
+        & > span {
           float: left;
           padding: var(--_pd-8) var(--_pd-16);
           text-decoration: none;
+
+          // inline-flex so the fill covers the whole padded chip, and so the number
+          // sits centred in it once Background Shape rounds the corners.
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          box-sizing: border-box;
+
+          // No fill of its own: Default Page Style > Background Color paints the whole
+          // row (see `.pagination` above), so repeating it here would draw a second,
+          // tighter block of the same colour on top of it. The chip contributes its
+          // Shape, and takes the Hover state's colour while pointed at.
+          background-color: transparent;
+          &[data-page-shape="rectangle"] {
+            border-radius: 0;
+          }
+          &[data-page-shape="rounded"] {
+            border-radius: 4px;
+          }
+          &[data-page-shape="circle"] {
+            border-radius: 50%;
+            // A circle needs equal sides, so the chip is at least as wide as it is
+            // tall however few digits the number has.
+            aspect-ratio: 1;
+            padding: var(--_pd-8);
+          }
+          // No hover fill: Pagination offers a Default state only, so there is no
+          // hover-state colour to read. The chip's shape and the row's fill are the
+          // whole of Default Page Style.
+
+          // The inner span is the number itself — it carries the typography, never the
+          // chip's box, so it must not repeat the fill or the padding.
+          & > span {
+            float: none;
+            padding: 0;
+            background-color: transparent;
+          }
           span {
             // color: var(--_sf-hr-fc, var(--_ctm-dn-pn-bn-cr, var(--_tst-dn-pn-bn-cr)));
             // font-size: var(--_sf-hr-fs, var(--_ctm-dn-pn-ft-se, var(--_tst-dn-pn-ft-se)));
@@ -632,16 +737,13 @@
             );
           }
         }
+        // Arrow Color / Arrow Size for anything drawn as text in this button; the SVG
+        // itself is sized and coloured by the `button svg` rules above. These read the
+        // shared arrow keys now, not the `iconSize` / `iconColor` the section carried
+        // before it moved to the Slider Arrows shape.
         .pagination__arrows {
-          color: var(
-            --_sf-hr-fc,
-            var(--_ctm-mob-dn-pn-in-c1, var(--_ctm-tab-dn-pn-in-c1, var(--_ctm-dn-pn-in-c1)))
-          );
-
-          font-size: var(
-            --_sf-hr-fs,
-            var(--_ctm-mob-dn-pn-in-se, var(--_ctm-tab-dn-pn-in-se, var(--_ctm-dn-pn-in-se)))
-          );
+          color: prepareMediaVariable(--_ctm-dn-pn-dt-se-aw-cr);
+          font-size: prepareMediaVariable(--_ctm-dn-pn-dt-se-aw-se);
         }
       }
 

package/dist/types/builder/elements/bundle-categories/index.d.ts

@@ -0,0 +1,35 @@
+import { CommonStyleProperties } from "../../../global/style-properties";
+import { CMSHTMLAttributes } from "../../../global/attributes";
+import { AlignSelfValue, BoxSizingValue, GlobalImageAttributes, GridAreaValue, HeightValue, ImageBuilderAttributes, JustifySelfValue, MarginValue, MaxHeightValue, MaxWidthValue, MinHeightValue, MinWidthValue, PaddingValue } from "../../../global/types";
+import { BuilderAttributes, CMSElementInterface } from "../common";
+export interface BundleCategoriesStyleProperties extends CommonStyleProperties {
+    minHeight?: MinHeightValue;
+    height?: HeightValue;
+    minWidth?: MinWidthValue;
+    maxWidth?: MaxWidthValue;
+    maxHeight?: MaxHeightValue;
+    gridArea?: GridAreaValue;
+    boxSizing?: BoxSizingValue;
+    padding?: PaddingValue;
+    marginLeft?: MarginValue;
+    marginTop?: MarginValue;
+    marginBottom?: MarginValue;
+    marginRight?: MarginValue;
+    justifySelf?: JustifySelfValue;
+    alignSelf?: AlignSelfValue;
+}
+/**
+ * Matches Bundle Details, the element this strip was pulled out of — a section
+ * composed from elements has to line up with the monolithic one it replaces.
+ * Height is auto because the strip is a single row of chips that sizes to them.
+ */
+export declare const getDefaultStyles: () => BundleCategoriesStyleProperties;
+export interface CMSBundleCategoriesInterface extends Omit<CMSElementInterface, "attributes"> {
+    attributes: {
+        HTML: Pick<CMSHTMLAttributes, GlobalImageAttributes>;
+        BUILDER: Pick<BuilderAttributes, ImageBuilderAttributes>;
+        CUSTOM: any;
+    };
+    styles: BundleCategoriesStyleProperties;
+    childrenStyles?: CommonStyleProperties;
+}

package/dist/types/builder/index.d.ts

@@ -48,6 +48,7 @@ import * as brandSchema from "./elements/brand/index";
 import * as brandImageSchema from "./elements/brand-image/index";
 import * as bundleSchema from "./elements/bundle/index";
 import * as bundleDetailsSchema from "./elements/bundle-details/index";
+import * as bundleCategoriesSchema from "./elements/bundle-categories/index";
 import * as lightBoxV2Schema from "./elements/light-box-v2/index";
 import * as searchSchema from "./elements/search/index";
 import * as layouterSchema from "./elements/layouter/index";
@@ -96,4 +97,4 @@ import embroideryVectors from "./embroidery-icons/index";
 import * as pageSchema from "./elements/page";
 import * as kitDetails from "./elements/kit-details";
 import * as kitsSchema from "./elements/kits";
-export { ElementEditSchema, amountEstimatorSchema, bulkVariantPickerSchema, buttonSchema, cmsTypes, codeSchema, commonFunctions, containerSchema, countdownSchema, embedSchema, enums, faqSchema, gallerySliderSchema, gridSchema, imageHotspotSchema, imageSchema, interfaces, mapSchema, paymentMethodsSchema, pickupLocationsSchema, priceSchema, productActionsSchema, productHighlightsSchema, productImageSchema, productInventorySchema, productPromotionsSchema, quantitySelectorSchema, scrollSchema, sectionSchema, shippingEstimatorSchema, socialIconsSchema, stackSchema, storeLocationsSchema, tabSchema, tableSchema, textSchema, uomSelectorSchema, variantPickerSchema, videoSChema, volumePricingSchema, lightboxSchema, cartSchema, profileSchema, productSchema, repeaterSchema, brandSchema, bundleSchema, bundleDetailsSchema, brandImageSchema, lightBoxV2Schema, searchSchema, layouterSchema, layouterItemSchema, categoryDetailsSchema, contactUsSchema, loginSchema, createFormSchema, resetPasswordSchema, searchResultsHeadingSchema, itemStockSchema, lineItemSchema, tabsV2Schema, tabsContainerSchema, marchandiserSetsSchema, formBuilder, quickLinksSchema, addOrderSchema, buyForTabsSchema, buyForTabsContainerSchema, checkoutSchema, cartSummarySchema, toasterSchema, spotlightSchema, productCustomizationsSchema, iconListSchema, orderStatusSchema, menuV2Schema, menuItemSchema, layouterProSchema, layouterProItemSchema, userElementsSchema, filterResultsSchema, productSizeChartSchema, badgeSchema, cartAttributesSchema, loaderSchema, addProductsTabSchema, shippingPaymentsSchema, couponSchema, megaMenuSchema, megaMenuContainerSchema, simpleListSchema, cartWrapperSchema, embroiderySchema, embroideryVectors, pageSchema, kitDetails, kitsSchema, };
+export { ElementEditSchema, amountEstimatorSchema, bulkVariantPickerSchema, buttonSchema, cmsTypes, codeSchema, commonFunctions, containerSchema, countdownSchema, embedSchema, enums, faqSchema, gallerySliderSchema, gridSchema, imageHotspotSchema, imageSchema, interfaces, mapSchema, paymentMethodsSchema, pickupLocationsSchema, priceSchema, productActionsSchema, productHighlightsSchema, productImageSchema, productInventorySchema, productPromotionsSchema, quantitySelectorSchema, scrollSchema, sectionSchema, shippingEstimatorSchema, socialIconsSchema, stackSchema, storeLocationsSchema, tabSchema, tableSchema, textSchema, uomSelectorSchema, variantPickerSchema, videoSChema, volumePricingSchema, lightboxSchema, cartSchema, profileSchema, productSchema, repeaterSchema, brandSchema, bundleSchema, bundleDetailsSchema, bundleCategoriesSchema, brandImageSchema, lightBoxV2Schema, searchSchema, layouterSchema, layouterItemSchema, categoryDetailsSchema, contactUsSchema, loginSchema, createFormSchema, resetPasswordSchema, searchResultsHeadingSchema, itemStockSchema, lineItemSchema, tabsV2Schema, tabsContainerSchema, marchandiserSetsSchema, formBuilder, quickLinksSchema, addOrderSchema, buyForTabsSchema, buyForTabsContainerSchema, checkoutSchema, cartSummarySchema, toasterSchema, spotlightSchema, productCustomizationsSchema, iconListSchema, orderStatusSchema, menuV2Schema, menuItemSchema, layouterProSchema, layouterProItemSchema, userElementsSchema, filterResultsSchema, productSizeChartSchema, badgeSchema, cartAttributesSchema, loaderSchema, addProductsTabSchema, shippingPaymentsSchema, couponSchema, megaMenuSchema, megaMenuContainerSchema, simpleListSchema, cartWrapperSchema, embroiderySchema, embroideryVectors, pageSchema, kitDetails, kitsSchema, };