@phillips/seldon 1.279.2 → 1.280.0

package/dist/scss/components/GridItem/_gridItem.scss

@@ -1,49 +1,52 @@
 @use 'sass:math';
 @use '../../allPartials' as *;
+@use '../../layers';
 
-@mixin gridItemColumnSpan($span: 1, $total-cols: 12) {
-  grid-column: span $span;
+@layer seldon.components {
+  @mixin gridItemColumnSpan($span: 1, $total-cols: 12) {
+    grid-column: span $span;
 
-  &-align-right {
-    grid-column-end: $total-cols + 1;
-    justify-self: end;
-  }
-
-  &-align-center {
-    grid-column: math.ceil(math.div($total-cols + 1 - $span, 2)) / span #{$span};
-  }
-}
-
-.#{$px}-grid-item {
-  justify-self: center;
-  width: 100%;
+    &-align-right {
+      grid-column-end: $total-cols + 1;
+      justify-self: end;
+    }
 
-  @for $i from 1 through 2 {
-    &--span-xs-#{$i} {
-      @include gridItemColumnSpan($i, 2);
+    &-align-center {
+      grid-column: math.ceil(math.div($total-cols + 1 - $span, 2)) / span #{$span};
     }
   }
 
-  @include media($size-sm) {
+  .#{$px}-grid-item {
+    justify-self: center;
+    width: 100%;
+
     @for $i from 1 through 2 {
-      &--span-sm-#{$i} {
+      &--span-xs-#{$i} {
         @include gridItemColumnSpan($i, 2);
       }
     }
-  }
 
-  @include media($size-md) {
-    @for $i from 1 through 6 {
-      &--span-md-#{$i} {
-        @include gridItemColumnSpan($i, 6);
+    @include media($size-sm) {
+      @for $i from 1 through 2 {
+        &--span-sm-#{$i} {
+          @include gridItemColumnSpan($i, 2);
+        }
+      }
+    }
+
+    @include media($size-md) {
+      @for $i from 1 through 6 {
+        &--span-md-#{$i} {
+          @include gridItemColumnSpan($i, 6);
+        }
       }
     }
-  }
 
-  @include media($size-lg) {
-    @for $i from 1 through 12 {
-      &--span-lg-#{$i} {
-        @include gridItemColumnSpan($i, 12);
+    @include media($size-lg) {
+      @for $i from 1 through 12 {
+        &--span-lg-#{$i} {
+          @include gridItemColumnSpan($i, 12);
+        }
       }
     }
   }

package/dist/scss/components/Icon/_icon.scss

@@ -1,11 +1,14 @@
 @use '../../allPartials' as *;
+@use '../../layers';
 
-.#{$px}-icon {
-  align-items: center; /* for alignment of svg */
-  display: flex; /* for alignment of svg */
-  justify-content: center; /* for alignment of svg */
-  svg {
-    max-height: 100%;
-    max-width: 100%;
+@layer seldon.components {
+  .#{$px}-icon {
+    align-items: center; /* for alignment of svg */
+    display: flex; /* for alignment of svg */
+    justify-content: center; /* for alignment of svg */
+    svg {
+      max-height: 100%;
+      max-width: 100%;
+    }
   }
 }

package/dist/scss/components/IconButton/_iconButton.scss

@@ -1,121 +1,212 @@
 @use '../../allPartials' as *;
+@use '../../layers';
 
-.#{$px}-icon-button {
-  align-items: center;
-  display: flex;
-  height: $spacing-md;
-  justify-content: center;
-  padding: 0;
-  width: $spacing-md;
-
-  & svg {
-    height: $button-label-line-height;
-    pointer-events: none;
-    width: $button-label-line-height;
-
-    @include hoverOrActive {
-      color: $white-100;
-    }
-  }
+@layer seldon.components {
+  .#{$px}-icon-button {
+    align-items: center;
+    display: flex;
+    height: $spacing-md;
+    justify-content: center;
+    padding: 0;
+    width: $spacing-md;
 
-  &:focus-visible {
-    @include focus-ring($border-radius: $radius-3xl);
+    & svg {
+      height: $button-label-line-height;
+      pointer-events: none;
+      width: $button-label-line-height;
 
-    svg {
-      fill: $pure-white;
+      @include hoverOrActive {
+        color: $white-100;
+      }
     }
-  }
 
-  &--primary,
-  &--ghost {
-    background: $pure-white;
-    color: $pure-black;
+    &:focus-visible {
+      @include focus-ring($border-radius: $radius-3xl);
 
-    & svg {
+      svg {
+        fill: $pure-white;
+      }
+    }
+
+    &--primary,
+    &--ghost {
+      background: $pure-white;
       color: $pure-black;
-      height: calc($button-label-line-height * 1.5); // design-cheats-for-button-large
-      margin-inline-end: unset;
-      width: calc($button-label-line-height * 1.5); // design-cheats-for-button-large
 
-      path {
-        fill: $pure-black;
+      & svg {
+        color: $pure-black;
+        height: calc($button-label-line-height * 1.5); // design-cheats-for-button-large
+        margin-inline-end: unset;
+        width: calc($button-label-line-height * 1.5); // design-cheats-for-button-large
+
+        path {
+          fill: $pure-black;
+        }
+      }
+
+      @include hoverOrActive {
+        svg {
+          color: $pure-white;
+
+          path {
+            color: $pure-white;
+            fill: $pure-white;
+          }
+        }
       }
     }
 
-    @include hoverOrActive {
+    &--ghost {
+      border: 1px solid transparent;
+
       svg {
-        color: $pure-white;
+        color: $keyline-gray;
 
         path {
-          color: $pure-white;
-          fill: $pure-white;
+          color: $keyline-gray;
         }
       }
     }
-  }
 
-  &--ghost {
-    border: 1px solid transparent;
-    border-color: transparent;
+    &--secondary {
+      height: $spacing-lg;
+      width: $spacing-lg;
+    }
 
-    svg {
-      color: $keyline-gray;
+    &--secondary,
+    &--tertiary.#{$px}-icon-button {
+      &:focus-visible {
+        @include focus-ring($border-radius: $radius-3xl);
+      }
 
-      path {
-        color: $keyline-gray;
+      & > svg {
+        fill: $pure-black;
+        margin-inline-end: unset;
+        position: absolute;
+
+        path {
+          fill: $pure-black;
+        }
       }
     }
-  }
 
-  &--secondary {
-    height: $spacing-lg;
-    width: $spacing-lg;
-  }
+    &--tertiary {
+      &:focus-visible {
+        @include focus-ring($border-radius: $radius-3xl);
+      }
 
-  &--secondary,
-  &--tertiary.#{$px}-icon-button {
-    &:focus-visible {
-      @include focus-ring($border-radius: $radius-3xl);
+      @include hoverOrActive {
+        & svg {
+          color: $cta-hover;
+          fill: $cta-hover;
+          margin-inline-end: unset;
+
+          path {
+            fill: $cta-hover;
+          }
+        }
+      }
     }
 
-    & > svg {
-      fill: $pure-black;
-      margin-inline-end: unset;
-      position: absolute;
+    &:disabled {
+      background-color: $white-100;
+      border: 1px solid $light-gray;
 
-      path {
-        fill: $pure-black;
+      svg {
+        fill: $light-gray;
+
+        path {
+          fill: $light-gray;
+        }
       }
     }
-  }
 
-  &--tertiary {
-    &:focus-visible {
-      @include focus-ring($border-radius: $radius-3xl);
+    // Dual-BEM tie-break: IconButton wraps Button, so both roots share a node.
+    // Compound selectors beat `.seldon-button` regardless of sheet order.
+    // Prefer not wrapping Button — delete this block when IconButton owns its node.
+    &.#{$px}-button {
+      display: flex;
+      height: $spacing-md;
+      padding: 0;
+      width: $spacing-md;
+
+      svg {
+        height: $button-label-line-height;
+        width: $button-label-line-height;
+      }
+
+      &:focus-visible {
+        @include focus-ring($border-radius: $radius-3xl);
+      }
+
+      &:disabled {
+        background-color: $white-100;
+        border: 1px solid $light-gray;
+
+        svg {
+          fill: $light-gray;
+
+          path {
+            fill: $light-gray;
+          }
+        }
+      }
     }
 
-    @include hoverOrActive {
-      & svg {
-        color: $cta-hover;
-        fill: $cta-hover;
-        margin-inline-end: unset;
+    &--primary.#{$px}-button,
+    &--ghost.#{$px}-button {
+      background: $pure-white;
+      color: $pure-black;
+
+      svg {
+        color: $pure-black;
+        height: calc($button-label-line-height * 1.5); // design-cheats-for-button-large
+        width: calc($button-label-line-height * 1.5); // design-cheats-for-button-large
 
         path {
-          fill: $cta-hover;
+          fill: $pure-black;
+        }
+      }
+
+      @include hoverOrActive {
+        svg {
+          color: $pure-white;
+
+          path {
+            color: $pure-white;
+            fill: $pure-white;
+          }
         }
       }
     }
-  }
 
-  &:disabled {
-    background-color: $white-100;
-    border: 1px solid $light-gray;
+    &--ghost.#{$px}-button {
+      border: 1px solid transparent;
+
+      svg {
+        color: $keyline-gray;
+
+        path {
+          color: $keyline-gray;
+        }
+      }
+    }
 
-    svg {
-      fill: $light-gray;
+    &--secondary.#{$px}-button {
+      height: $spacing-lg;
+      width: $spacing-lg;
+    }
 
-      path {
-        fill: $light-gray;
+    &--tertiary.#{$px}-button {
+      @include hoverOrActive {
+        svg {
+          color: $cta-hover;
+          fill: $cta-hover;
+
+          path {
+            fill: $cta-hover;
+          }
+        }
       }
     }
   }