@phillips/seldon 1.279.2 → 1.280.0

package/dist/scss/components/Search/_search.scss

@@ -1,171 +1,174 @@
 @use '../../allPartials' as *;
+@use '../../layers';
 
-.#{$px}-search {
-  bottom: 0;
-  display: flex;
-  gap: $spacing-md;
-  height: $search-size;
-  left: calc(100% - $search-size);
-  min-width: $search-size;
-  position: absolute;
-  right: 0;
-  transition: left 0.25s ease-in;
-
-  &::after {
-    border-bottom: 1px solid $black-100;
+@layer seldon.components {
+  .#{$px}-search {
     bottom: 0;
-    content: '';
     display: flex;
-    margin-bottom: -1px;
+    gap: $spacing-md;
+    height: $search-size;
+    left: calc(100% - $search-size);
+    min-width: $search-size;
     position: absolute;
     right: 0;
-    transition: width 0.25s ease-in;
-    width: 0;
-  }
-
-  @include isHeaderMobile {
-    bottom: 1px;
-    height: calc($search-size - 1px);
-    left: calc(100% - $search-size - $spacing-md);
-    right: $spacing-md;
-  }
-
-  &--active {
-    left: 0;
-    transition: left 0.25s ease-in 0.2s;
-    z-index: 11; // above nav (Radix viewport) and overlay when open so input receives clicks
+    transition: left 0.25s ease-in;
 
     &::after {
-      transition: width 0.25s ease-in 0.2s;
-      width: 100%;
+      border-bottom: 1px solid $black-100;
+      bottom: 0;
+      content: '';
+      display: flex;
+      margin-bottom: -1px;
+      position: absolute;
+      right: 0;
+      transition: width 0.25s ease-in;
+      width: 0;
     }
-  }
-
-  &__input-status-icon {
-    height: $search-size;
-    width: $search-size;
 
-    svg {
-      height: 100%;
-      width: 100%;
+    @include isHeaderMobile {
+      bottom: 1px;
+      height: calc($search-size - 1px);
+      left: calc(100% - $search-size - $spacing-md);
+      right: $spacing-md;
     }
-  }
-
-  &__form {
-    display: flex;
-    overflow: hidden;
-    width: 100%;
 
     &--active {
-      overflow: visible;
+      left: 0;
+      transition: left 0.25s ease-in 0.2s;
+      z-index: 11; // above nav (Radix viewport) and overlay when open so input receives clicks
 
-      .#{$px}-search__results {
-        display: flex;
-        flex-direction: column;
+      &::after {
+        transition: width 0.25s ease-in 0.2s;
+        width: 100%;
       }
     }
-  }
 
-  &__content-wrapper {
-    color: $soft-black;
-    display: flex;
-    justify-content: flex-end;
-    width: 100%;
+    &__input-status-icon {
+      height: $search-size;
+      width: $search-size;
 
-    .#{$px}-input {
-      width: 100%;
-
-      &__validation {
-        display: none;
+      svg {
+        height: 100%;
+        width: 100%;
       }
+    }
+
+    &__form {
+      display: flex;
+      overflow: hidden;
+      width: 100%;
 
-      &-enter-active input {
-        background: $white-100;
+      &--active {
+        overflow: visible;
 
-        &::placeholder {
-          opacity: 1;
-          transition: opacity 0.75s ease-in;
+        .#{$px}-search__results {
+          display: flex;
+          flex-direction: column;
         }
       }
+    }
 
-      &__input {
-        background: transparent;
-        border: 0;
-        border-radius: unset;
-        font-variation-settings: 'wght' 600;
-        height: $search-size;
-        margin: 0;
-        padding: $spacing-xsm 0 $spacing-xsm $spacing-sm;
+    &__content-wrapper {
+      color: $soft-black;
+      display: flex;
+      justify-content: flex-end;
+      width: 100%;
 
-        @include text($bodyLarge);
+      .#{$px}-input {
+        width: 100%;
 
-        @include isHeaderMobile {
-          height: calc(var(--spacing-md) + var(--search-size));
-          line-height: calc(var(--spacing-md) + var(--search-size));
-          padding: $spacing-md 0;
-          position: relative;
-          top: calc($spacing-md * -1);
+        &__validation {
+          display: none;
         }
 
-        @include media($size-xl) {
-          height: 2.875rem;
-        }
+        &-enter-active input {
+          background: $white-100;
 
-        &:focus {
-          outline: none;
+          &::placeholder {
+            opacity: 1;
+            transition: opacity 0.75s ease-in;
+          }
         }
 
-        &::placeholder {
-          opacity: 0;
+        &__input {
+          background: transparent;
+          border: 0;
+          border-radius: unset;
+          font-variation-settings: 'wght' 600;
+          height: $search-size;
+          margin: 0;
+          padding: $spacing-xsm 0 $spacing-xsm $spacing-sm;
+
+          @include text($bodyLarge);
+
+          @include isHeaderMobile {
+            height: calc(var(--spacing-md) + var(--search-size));
+            line-height: calc(var(--spacing-md) + var(--search-size));
+            padding: $spacing-md 0;
+            position: relative;
+            top: calc($spacing-md * -1);
+          }
+
+          @include media($size-xl) {
+            height: 2.875rem;
+          }
+
+          &:focus {
+            outline: none;
+          }
+
+          &::placeholder {
+            opacity: 0;
+          }
         }
       }
     }
   }
-}
-
-.#{$px}-search__container {
-  @include isHeaderMobile {
-    border-bottom: 1px solid $light-gray;
-    margin-right: $spacing-md;
-    padding-left: $spacing-md;
-    position: relative;
-    width: 100%;
-  }
-
-  &__inner {
-    cursor: pointer;
-    display: flex;
-    justify-content: space-between;
-    padding: 0;
-    pointer-events: all;
-
-    @include isHeaderDesktop {
-      cursor: default;
-    }
 
+  .#{$px}-search__container {
     @include isHeaderMobile {
-      align-items: center;
-      height: calc(var(--spacing-md) + var(--search-size));
+      border-bottom: 1px solid $light-gray;
+      margin-right: $spacing-md;
+      padding-left: $spacing-md;
       position: relative;
+      width: 100%;
     }
 
-    .#{$px}-text {
-      margin-bottom: 0;
-      padding-left: 0;
-    }
+    &__inner {
+      cursor: pointer;
+      display: flex;
+      justify-content: space-between;
+      padding: 0;
+      pointer-events: all;
 
-    &__label {
-      display: none;
+      @include isHeaderDesktop {
+        cursor: default;
+      }
 
       @include isHeaderMobile {
         align-items: center;
-        cursor: pointer;
-        display: flex;
-        flex-wrap: wrap;
-        height: $search-size;
-        margin: 0;
-        padding: 0 $spacing-sm;
-        pointer-events: all;
+        height: calc(var(--spacing-md) + var(--search-size));
+        position: relative;
+      }
+
+      .#{$px}-text {
+        margin-bottom: 0;
+        padding-left: 0;
+      }
+
+      &__label {
+        display: none;
+
+        @include isHeaderMobile {
+          align-items: center;
+          cursor: pointer;
+          display: flex;
+          flex-wrap: wrap;
+          height: $search-size;
+          margin: 0;
+          padding: 0 $spacing-sm;
+          pointer-events: all;
+        }
       }
     }
   }

package/dist/scss/components/Search/_searchButton.scss

@@ -1,63 +1,66 @@
 @use '../../allPartials' as *;
+@use '../../layers';
 
-.#{$px}-search__button {
-  align-items: center;
-  background: $pure-white;
-  border: none;
-  border-bottom: 1px solid transparent;
-  cursor: pointer;
-  display: flex;
-  height: $search-size;
-  justify-content: center;
-  padding: 0;
-  position: absolute;
-  right: 0;
-  top: 0;
-  width: $search-size;
-
-  @include isHeaderMobile {
-    height: calc($spacing-md + $search-size);
-    justify-content: flex-end;
-    top: calc($spacing-md * -1);
-  }
+@layer seldon.components {
+  .#{$px}-search__button {
+    align-items: center;
+    background: $pure-white;
+    border: none;
+    border-bottom: 1px solid transparent;
+    cursor: pointer;
+    display: flex;
+    height: $search-size;
+    justify-content: center;
+    padding: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: $search-size;
 
-  @include media($size-xl) {
-    padding: 0 0 0.125rem;
-  }
+    @include isHeaderMobile {
+      height: calc($spacing-md + $search-size);
+      justify-content: flex-end;
+      top: calc($spacing-md * -1);
+    }
 
-  svg {
-    height: 1.5rem;
-    width: 1.5rem;
-  }
+    @include media($size-xl) {
+      padding: 0 0 0.125rem;
+    }
 
-  &:focus-visible {
-    @include focus-ring($border-radius: $radius-xs);
-  }
+    svg {
+      height: 1.5rem;
+      width: 1.5rem;
+    }
+
+    &:focus-visible {
+      @include focus-ring($border-radius: $radius-xs);
+    }
 
-  &:hover,
-  &:active {
-    &::after {
-      border-bottom: 1px solid $black-100;
-      bottom: 0;
-      content: '';
-      display: flex;
-      margin-bottom: -2px;
-      position: absolute;
-      right: 0;
-      width: 102%;
-
-      @include isHeaderMobile {
-        margin-bottom: -1px;
-        width: 52%;
+    &:hover,
+    &:active {
+      &::after {
+        border-bottom: 1px solid $black-100;
+        bottom: 0;
+        content: '';
+        display: flex;
+        margin-bottom: -2px;
+        position: absolute;
+        right: 0;
+        width: 102%;
+
+        @include isHeaderMobile {
+          margin-bottom: -1px;
+          width: 52%;
+        }
       }
     }
-  }
 
-  &__icon {
-    pointer-events: none;
+    &__icon {
+      pointer-events: none;
 
-    path {
-      fill: $pure-black;
+      path {
+        fill: $pure-black;
+      }
     }
   }
 }

package/dist/scss/components/SeldonImage/_seldonImage.scss

@@ -1,111 +1,114 @@
 @use '../../allPartials' as *;
-
-.#{$px}-seldon-image {
-  // Propagate an ancestor `max-height` down to the wrapper so the img can inherit it too (percentages resolve to `none` when parent height is auto; `inherit` doesn't).
-  max-height: inherit;
-  overflow: hidden;
-  position: relative;
-
-  &--aspect-ratio-16-9 {
-    img {
-      aspect-ratio: 16 / 9;
+@use '../../layers';
+
+@layer seldon.components {
+  .#{$px}-seldon-image {
+    // Propagate an ancestor `max-height` down to the wrapper so the img can inherit it too (percentages resolve to `none` when parent height is auto; `inherit` doesn't).
+    max-height: inherit;
+    overflow: hidden;
+    position: relative;
+
+    &--aspect-ratio-16-9 {
+      img {
+        aspect-ratio: 16 / 9;
+      }
+
+      &.#{$px}-seldon-image--error-image {
+        aspect-ratio: 16 / 9;
+      }
     }
 
-    &.#{$px}-seldon-image--error-image {
-      aspect-ratio: 16 / 9;
+    // Portrait/square can overflow vertically; auto dims + max caps let the img respect parent max-height, not just width.
+    &--aspect-ratio-3-4 {
+      img {
+        aspect-ratio: 3 / 4;
+        height: auto;
+        max-height: inherit;
+        max-width: 100%;
+        width: auto;
+      }
+
+      &.#{$px}-seldon-image--error-image {
+        aspect-ratio: 3 / 4;
+      }
     }
-  }
 
-  // Portrait/square can overflow vertically; auto dims + max caps let the img respect parent max-height, not just width.
-  &--aspect-ratio-3-4 {
-    img {
-      aspect-ratio: 3 / 4;
-      height: auto;
-      max-height: inherit;
-      max-width: 100%;
-      width: auto;
+    &--aspect-ratio-1-1 {
+      img {
+        aspect-ratio: 1 / 1;
+        height: auto;
+        max-height: inherit;
+        max-width: 100%;
+        width: auto;
+      }
+
+      &.#{$px}-seldon-image--error-image {
+        aspect-ratio: 1 / 1;
+      }
     }
 
-    &.#{$px}-seldon-image--error-image {
-      aspect-ratio: 3 / 4;
+    &--error {
+      width: 100%;
+
+      &-image {
+        background-color: $bg-soft;
+      }
+
+      .phillips-logo {
+        fill: $medium-gray;
+      }
+
+      svg {
+        fill: $medium-gray;
+        left: 50%;
+        max-width: 50%;
+        position: absolute;
+        top: 50%;
+        transform: translate(-50%, -50%);
+      }
     }
-  }
 
-  &--aspect-ratio-1-1 {
-    img {
-      aspect-ratio: 1 / 1;
+    &-img {
       height: auto;
-      max-height: inherit;
-      max-width: 100%;
-      width: auto;
-    }
-
-    &.#{$px}-seldon-image--error-image {
-      aspect-ratio: 1 / 1;
-    }
-  }
-
-  &--error {
-    width: 100%;
-
-    &-image {
-      background-color: $bg-soft;
-    }
-
-    .phillips-logo {
-      fill: $medium-gray;
-    }
+      object-fit: contain;
+      width: 100%;
 
-    svg {
-      fill: $medium-gray;
-      left: 50%;
-      max-width: 50%;
-      position: absolute;
-      top: 50%;
-      transform: translate(-50%, -50%);
-    }
-  }
+      &--object-fit-contain {
+        object-fit: contain;
+      }
 
-  &-img {
-    height: auto;
-    object-fit: contain;
-    width: 100%;
+      &--object-fit-cover {
+        object-fit: cover;
+      }
 
-    &--object-fit-contain {
-      object-fit: contain;
-    }
+      &--object-fit-fill {
+        object-fit: fill;
+      }
 
-    &--object-fit-cover {
-      object-fit: cover;
-    }
-
-    &--object-fit-fill {
-      object-fit: fill;
-    }
+      &--object-fit-scale-down {
+        object-fit: scale-down;
+      }
 
-    &--object-fit-scale-down {
-      object-fit: scale-down;
+      &--hidden {
+        visibility: hidden;
+      }
     }
 
-    &--hidden {
-      visibility: hidden;
-    }
-  }
+    &-blur {
+      background-position: center;
+      background-size: cover;
+      filter: blur(10px);
+      height: 100%;
+      left: 0;
+      opacity: 0.5;
+      position: absolute;
+      top: 0;
+      width: 100%;
+      z-index: -1;
 
-  &-blur {
-    background-position: center;
-    background-size: cover;
-    filter: blur(10px);
-    height: 100%;
-    left: 0;
-    opacity: 0.5;
-    position: absolute;
-    top: 0;
-    width: 100%;
-    z-index: -1;
-
-    &--hidden {
-      visibility: hidden;
+      &--hidden {
+        visibility: hidden;
+      }
     }
   }
 }