@phillips/seldon 1.241.0 → 1.243.0

package/dist/scss/components/Button/_button.scss

@@ -98,8 +98,7 @@ $destructive-hover-disabled: color.adjust($warning-default, $alpha: -0.5);
   }
 
   &:focus-visible {
-    outline: 0.5px solid $pure-white;
-    outline-offset: -4.5px;
+    @include focus-ring($border-radius: $radius-3xl);
 
     svg {
       fill: $pure-white;
@@ -110,13 +109,19 @@ $destructive-hover-disabled: color.adjust($warning-default, $alpha: -0.5);
     background-color: transparent;
     border: 0;
     color: $pure-black;
+    font-variation-settings: 'wght' 400;
     height: auto;
     padding: 0;
     text-decoration: underline;
+
     .#{$px}-text {
       font-variation-settings: 'wght' 400;
     }
 
+    &:focus-visible {
+      @include focus-ring($border-radius: $radius-xs);
+    }
+
     &:hover {
       background-color: transparent;
       color: $pure-black;
@@ -149,8 +154,9 @@ $destructive-hover-disabled: color.adjust($warning-default, $alpha: -0.5);
     }
 
     &:focus-visible {
+      @include focus-ring($border-radius: $radius-3xl);
+
       background-color: $pure-white;
-      outline-color: $soft-black;
     }
 
     svg {
@@ -246,10 +252,9 @@ $destructive-hover-disabled: color.adjust($warning-default, $alpha: -0.5);
     }
 
     &:focus-visible {
+      @include focus-ring($border-radius: $radius-3xl);
+
       background-color: $pure-white;
-      outline-color: $soft-black;
-      outline-offset: 4.5px;
-      padding: 0 4px;
     }
   }
 

package/dist/scss/components/Carousel/_carousel.scss

@@ -34,10 +34,20 @@
       display: none;
     }
 
-    &:hover {
+    &:hover,
+    &:focus-visible {
       opacity: 1;
     }
 
+    &:focus-visible {
+      outline: none;
+
+      .#{$px}-carousel-arrows-next-btn__icon,
+      .#{$px}-carousel-arrows-prev-btn__icon {
+        @include focus-ring($border-radius: $radius-3xl);
+      }
+    }
+
     &__icon {
       background-color: $pure-white;
       border-radius: $radius-3xl;
@@ -161,8 +171,7 @@
     width: 10px;
 
     &:focus-visible {
-      border-radius: $radius-3xl;
-      outline: 0.5px solid $black-100;
+      @include focus-ring($border-radius: $radius-3xl, $outline-offset: 0, $outline-width: 0.5px);
 
       &-dot {
         &:hover {

package/dist/scss/components/ComboBox/_combobox.scss

@@ -43,7 +43,7 @@
 
     &:focus-visible,
     &:focus {
-      outline: 1px solid $primary-black;
+      @include focus-ring($border-radius: $radius-xs);
     }
 
     &--invalid {
@@ -51,7 +51,7 @@
       box-shadow: inset 0 0 3px 3px $error-pink;
 
       &:focus {
-        outline-color: $error-red;
+        @include focus-ring($border-radius: $radius-xs, $outline-color: $error-red);
       }
 
       &:hover {

package/dist/scss/components/ComposedModal/_composedModal.scss

@@ -49,7 +49,6 @@ $breakpoint-mobile-small: 450px;
 
   &__btns-group > * {
     flex: 1 1 50%;
-    margin: $spacing-xsm 0 0;
 
     @media (max-width: $breakpoint-mobile-small) {
       flex: 1 1 auto;

package/dist/scss/components/DatePicker/_datePicker.scss

@@ -26,6 +26,10 @@
     color: $pure-white;
   }
 
+  .flatpickr-day:focus {
+    @include focus-ring($border-radius: $radius-xs);
+  }
+
   .flatpickr-day.today {
     border-color: transparent;
     font-variation-settings: 'wght' 700;

package/dist/scss/components/DescriptiveRadioButton/_descriptiveRadioButton.scss

@@ -10,10 +10,13 @@
     display: flex;
     padding: $spacing-sm;
 
-    &--selected,
-    &:has(input:focus-visible) {
+    &--selected {
       border: 1.5px solid $pure-black;
     }
+
+    &:has(input:focus-visible) {
+      @include focus-ring($border-radius: $radius-xs);
+    }
   }
 
   &__input {
@@ -27,6 +30,11 @@
     @media (min-width: $breakpoint-md) {
       margin-top: $spacing-micro;
     }
+
+    &:focus,
+    &:focus-visible {
+      outline: none;
+    }
   }
 
   &__input:checked {

package/dist/scss/components/Dropdown/_dropdown.scss

@@ -37,8 +37,7 @@
     }
 
     &:focus-within:not(:disabled) {
-      box-shadow: 0 0 0 1px $light-gray;
-      outline: 1px solid $pure-black;
+      @include focus-ring($border-radius: $radius-xs);
     }
   }
 

package/dist/scss/components/ExitGateCard/_exitGateCard.scss

@@ -58,6 +58,11 @@
         font-size: $body-size2;
       }
     }
+
+    // Match button focus state when the link (wrapper) is focused
+    > a:focus-visible {
+      @include focus-ring($border-radius: $radius-3xl);
+    }
   }
 }
 

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

@@ -19,13 +19,10 @@
   }
 
   &:focus-visible {
-    &:focus-visible {
-      outline: 0.5px solid $soft-black;
-      outline-offset: 0;
+    @include focus-ring($border-radius: $radius-3xl);
 
-      svg {
-        fill: $pure-white;
-      }
+    svg {
+      fill: $pure-white;
     }
   }
 
@@ -78,7 +75,7 @@
   &--secondary,
   &--tertiary.#{$px}-icon-button {
     &:focus-visible {
-      border-radius: $radius-3xl;
+      @include focus-ring($border-radius: $radius-3xl);
     }
 
     & > svg {
@@ -94,7 +91,7 @@
 
   &--tertiary {
     &:focus-visible {
-      border-radius: $radius-3xl;
+      @include focus-ring($border-radius: $radius-3xl);
     }
 
     @include hoverOrActive {

package/dist/scss/components/Input/_input.scss

@@ -40,7 +40,7 @@ $lg: #{$px}-input--lg;
 
     &:focus-visible,
     &:focus-within {
-      outline: 1px solid $pure-black;
+      @include focus-ring($border-radius: $radius-xs);
     }
 
     .#{$px}-input__wrapper__input,
@@ -81,7 +81,7 @@ $lg: #{$px}-input--lg;
     }
 
     &:focus-visible {
-      outline: 1px solid $pure-black;
+      @include focus-ring($border-radius: $radius-xs);
     }
 
     &:hover {
@@ -166,7 +166,7 @@ $lg: #{$px}-input--lg;
       box-shadow: inset 0 0 3px 3px $error-pink;
 
       &:focus-within {
-        outline: 1px solid $error-red;
+        @include focus-ring($border-radius: $radius-xs, $outline-color: $error-red);
       }
     }
 
@@ -217,6 +217,22 @@ $lg: #{$px}-input--lg;
   }
 }
 
+.#{$px}-radio-input .#{$px}-input__input {
+  &:focus-visible {
+    outline: none;
+    position: relative;
+
+    &::before {
+      border: 2px solid $focus-default;
+      border-radius: $radius-3xl;
+      content: '';
+      inset: -6px;
+      pointer-events: none;
+      position: absolute;
+    }
+  }
+}
+
 .#{$px}-input--inline.#{$px}-radio-input,
 .#{$px}-input--inline.#{$px}-checkbox-input,
 .#{$px}-input--inline.#{$px}-toggle-input {

package/dist/scss/components/Link/_link.scss

@@ -4,6 +4,10 @@
   color: $pure-black;
   text-decoration: none;
 
+  &:focus-visible {
+    @include focus-ring($border-radius: $radius-xs);
+  }
+
   &--email.#{$px}-link--email,
   &--link.#{$px}-link--link,
   &--linkSmall,

package/dist/scss/components/Navigation/NavigationItemTrigger/_navigationItemTrigger.scss

@@ -18,6 +18,10 @@
     @include isHeaderDesktop {
       color: unset;
       justify-content: center;
+
+      &:focus-visible {
+        @include focus-ring($border-radius: $radius-xs);
+      }
     }
   }
 

package/dist/scss/components/Pagination/_pagination.scss

@@ -52,7 +52,7 @@
 
     appearance: none;
     border: none;
-    border-bottom: 1px solid $pure-black;
+    border-bottom: 1px solid $black-100;
     border-radius: 0;
     font-variation-settings: 'wght' 600;
     margin-bottom: 0;
@@ -73,7 +73,7 @@
     }
 
     &:focus-visible {
-      outline: 1px solid $medium-gray;
+      border-radius: 0;
     }
   }
 

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

@@ -30,8 +30,11 @@
     width: 1.5rem;
   }
 
+  &:focus-visible {
+    @include focus-ring($border-radius: $radius-xs);
+  }
+
   &:hover,
-  &:focus-visible,
   &:active {
     &::after {
       border-bottom: 1px solid $black-100;

package/dist/scss/components/Select/_select.scss

@@ -67,10 +67,9 @@
         }
 
         &:focus-visible {
+          @include focus-ring($border-radius: $radius-3xl);
+
           background-color: $pure-white;
-          border-radius: $radius-3xl;
-          box-shadow: 0 0 0 0.5px $black-100;
-          outline: none;
         }
 
         svg {

package/dist/scss/components/Tabs/_tabs.scss

@@ -6,7 +6,7 @@
   &__tabs-list {
     display: flex;
     gap: 1rem;
-    overflow: hidden; /* Prevent overflow */
+    overflow: visible;
     position: relative;
   }
 
@@ -16,14 +16,24 @@
     border-bottom: 2px solid transparent;
     padding-bottom: $spacing-sm;
     padding-inline: 0;
+    position: relative;
     transition:
       background 0.2s ease,
       font-weight 0.2s ease-out,
       border-bottom 0.2s ease-out;
 
     &:focus-visible {
-      box-shadow: rgba($pure-black, 1) 0 0 0 1px inset;
       outline: none;
+
+      &::after {
+        border: 2px solid $focus-default;
+        border-radius: $radius-xs;
+        content: '';
+        inset: -4px -4px -6px;
+        pointer-events: none;
+        position: absolute;
+        z-index: 1;
+      }
     }
 
     .#{$px}-text {
@@ -42,8 +52,17 @@
     color: $pure-black;
 
     &:focus-visible {
-      box-shadow: rgba($pure-black, 1) 0 0 0 1px inset;
       outline: none;
+
+      &::after {
+        border: 2px solid $focus-default;
+        border-radius: $radius-xs;
+        content: '';
+        inset: -6px -6px -8px;
+        pointer-events: none;
+        position: absolute;
+        z-index: 1;
+      }
     }
     .#{$px}-text {
       color: $pure-black;

package/dist/scss/components/Tags/_tags.scss

@@ -6,12 +6,6 @@
   flex-flow: row wrap;
   gap: $spacing-sm;
 
-  &:focus-visible {
-    border: unset;
-    outline: 1px solid $black-100;
-    outline-offset: 1px;
-  }
-
   .#{$px}-tag {
     border: 1px solid $black-100;
     border-radius: $radius-3xl;
@@ -89,12 +83,8 @@
     }
 
     &:focus-visible {
-      border-color: $black-100;
-      border-radius: $radius-2xl;
-      border-style: solid;
-      border-width: 1px;
-      outline-color: transparent;
-      outline-offset: unset;
+      @include focus-ring($border-radius: $radius-3xl);
+
       padding: 0 $spacing-sm;
 
       @include media($breakpoint-xl) {

package/dist/scss/components/TextArea/_textArea.scss

@@ -34,7 +34,7 @@
   }
 
   &:focus-visible {
-    outline: 1px solid $pure-black;
+    @include focus-ring($border-radius: $radius-xs);
   }
 
   &__label {
@@ -87,7 +87,7 @@
       box-shadow: inset 0 0 3px 3px $error-pink;
 
       &:focus-within {
-        outline: 1px solid $error-red;
+        @include focus-ring($border-radius: $radius-xs, $outline-color: $error-red);
       }
     }
   }

package/dist/scss/patterns/CountryPicker/_countryPickerOption.scss

@@ -28,8 +28,8 @@
     }
 
     &--is-phone:focus-within {
-      outline: 1px solid $soft-black;
-      outline-offset: 1px;
+      box-shadow: inset 0 0 0 2px $focus-default;
+      outline: none;
     }
 
     &-content {
@@ -78,12 +78,10 @@
   }
 }
 
-// Override focus within styles when phone option is clicked
-// TODO: align with design on focus states since the radio input is hidden
+// When both selected and focused, show both the border and focus ring
 .#{$px}-country-picker__option--is-phone.#{$px}-country-picker__option--selected {
-  border: 1px solid $pure-black;
-
   &:focus-within {
+    box-shadow: inset 0 0 0 2px $focus-default;
     outline: none;
   }
 }

package/dist/scss/patterns/CountryPicker/_countryPickerTrigger.scss

@@ -34,9 +34,7 @@
       width: 100%;
 
       &:focus-visible {
-        border-color: $pure-black;
-        box-shadow: 0 0 0 2px rgba($pure-black, 0.08);
-        outline: none;
+        @include focus-ring($border-radius: $radius-xs);
       }
 
       &--error {

package/dist/scss/patterns/FavoritesCollectionTile/_favoritesCollectionTile.scss

@@ -108,6 +108,10 @@
     &.#{$px}-link {
       text-transform: none;
     }
+
+    &:focus-visible {
+      @include focus-ring;
+    }
   }
 
   &__media-container {
@@ -130,6 +134,10 @@
     display: block;
     position: relative;
 
+    &:focus-visible {
+      @include focus-ring;
+    }
+
     &--bg {
       background-color: $soft-gray;
     }
@@ -186,7 +194,7 @@
     width: 100%;
 
     &:focus-visible {
-      outline: 1px solid $pure-black;
+      @include focus-ring;
     }
   }
 }

package/dist/scss/patterns/FiltersInline/_filterButton.scss

@@ -12,16 +12,14 @@
   }
 
   &:focus-visible {
-    box-shadow: 0 0 0 0.5px $bg-border;
-    outline: none;
+    @include focus-ring($border-radius: $radius-3xl);
   }
 
   &--selected {
     border: 2px solid $black-100;
 
     &:focus-visible {
-      box-shadow: 0 0 0 0.5px $black-100;
-      outline: none;
+      @include focus-ring($border-radius: $radius-3xl);
     }
   }
 

package/dist/scss/patterns/SaleCard/_saleCard.scss

@@ -1,5 +1,17 @@
 @use '../../allPartials' as *;
 
+// Focus ring when the entire card acts as a link (wrapped in <a>)
+a:focus-visible > .#{$px}-sale-card {
+  @include focus-ring($border-radius: $radius-xs);
+}
+
+// Remove default browser outline from the link so only the card focus ring shows
+a:has(> .#{$px}-sale-card) {
+  &:focus {
+    outline: none;
+  }
+}
+
 .#{$px}-sale-card {
   align-items: center;
   display: flex;
@@ -87,6 +99,10 @@
     }
   }
 
+  &__modal-link .#{$px}-button {
+    @include text($linkSmall);
+  }
+
   &__badge {
     border: 1px solid $badge-blue;
     color: $badge-blue;

package/dist/scss/patterns/Social/_social.scss

@@ -33,9 +33,12 @@ $num_icons: 5;
   }
 
   &__button {
-    @include labelText('link');
+    @include text($linkMedium);
 
-    color: $pure-black;
+    border: 0;
+    height: auto;
+    margin-bottom: $spacing-sm;
+    margin-top: $spacing-xsm;
     padding: 0;
     text-align: left;
     text-decoration: underline;
@@ -49,9 +52,9 @@ $num_icons: 5;
       color: unset;
     }
 
-    &:focus {
-      background-color: unset;
-      color: unset;
+    &:focus-visible {
+      border-radius: $radius-xs;
+      padding: 0;
     }
   }
 

package/dist/scss/patterns/UserManagement/_userManagement.scss

@@ -26,8 +26,8 @@
     display: flex;
     gap: 0 $spacing-xsm;
     justify-content: center;
+    margin-bottom: $padding-xsm;
     padding: 0;
-    padding-bottom: $padding-xsm;
 
     &:disabled {
       cursor: default;
@@ -35,6 +35,10 @@
       pointer-events: none;
     }
 
+    &:focus-visible {
+      @include focus-ring($border-radius: $radius-xs);
+    }
+
     &:hover:not(:disabled) {
       @include underline;
     }

package/dist/scss/site-furniture/Footer/_footer.scss

@@ -124,6 +124,15 @@
     }
   }
 
+  &__logo {
+    margin-bottom: $spacing-sm;
+    margin-top: $spacing-md;
+
+    &:focus-visible {
+      @include focus-ring($border-radius: $radius-xs);
+    }
+  }
+
   &__copyright {
     align-items: center;
     background-color: $white-100;

package/dist/scss/site-furniture/Header/_header.scss

@@ -76,6 +76,10 @@
     align-self: center;
     margin: 0;
 
+    &:focus-visible {
+      @include focus-ring($border-radius: $radius-xs);
+    }
+
     svg {
       height: 20.58px; // 20.58px is the height of the logo's container to make logo 16px
       width: 100%;

package/dist/site-furniture/Footer/Footer.js

@@ -12,7 +12,7 @@ const $ = ({
 }) => /* @__PURE__ */ e("footer", { "data-testid": t || "footer", id: t, className: s(`${r}-footer`, { className: i }), children: [
   /* @__PURE__ */ o("div", { className: `${r}-footer__links`, children: a }),
   /* @__PURE__ */ e("div", { className: `${r}-footer__copyright`, children: [
-    /* @__PURE__ */ o("h3", { "data-testid": "footer-logo", className: `${r}-footer__logo`, children: /* @__PURE__ */ o("a", { href: "/", "aria-label": "logo", children: /* @__PURE__ */ o(n, { icon: "PhillipsLogo", width: "94px" }) }) }),
+    /* @__PURE__ */ o("a", { href: "/", "aria-label": "logo", "data-testid": "footer-logo", className: `${r}-footer__logo`, children: /* @__PURE__ */ o(n, { icon: "PhillipsLogo", width: "94px" }) }),
     /* @__PURE__ */ o(c, { variant: f.bodySmall, children: l })
   ] })
 ] });

package/dist/site-furniture/Header/Header.js

@@ -14,17 +14,17 @@ const Y = D(X), Z = F(
     logo: d = /* @__PURE__ */ r(G, { icon: "PhillipsLogo" }),
     logoHref: S = "/",
     className: w,
-    children: i,
+    children: s,
     toggleOpenText: N = "Open Menu",
     toggleCloseText: O = "Close Menu",
     logoText: R = "Home Page",
     disabled: g,
-    bannerRef: s,
+    bannerRef: i,
     ...T
   }, a) => {
-    const p = h(i, $), P = t.isValidElement(p?.[0]) ? t.cloneElement(p[0], { disabled: g }) : "", f = h(i, M), v = t.isValidElement(f?.[0]) ? t.cloneElement(f[0], { disabled: g }) : "", [b, z] = u(!1), I = h(i, H), j = K(i, [H, $, M]), { closeMenu: V, handleMenuToggle: k, isMenuOpen: m, toggleText: A } = W({ toggleOpenText: N, toggleCloseText: O }), [L, q] = u(null), B = t.useRef(null), [_, E] = u(s?.current ? s.current.clientHeight : 0), x = t.useRef(null);
+    const p = h(s, $), P = t.isValidElement(p?.[0]) ? t.cloneElement(p[0], { disabled: g }) : "", f = h(s, M), v = t.isValidElement(f?.[0]) ? t.cloneElement(f[0], { disabled: g }) : "", [b, z] = u(!1), I = h(s, H), j = K(s, [H, $, M]), { closeMenu: V, handleMenuToggle: k, isMenuOpen: m, toggleText: A } = W({ toggleOpenText: N, toggleCloseText: O }), [L, q] = u(null), B = t.useRef(null), [_, E] = u(i?.current ? i.current.clientHeight : 0), x = t.useRef(null);
     C(() => {
-      const e = s?.current;
+      const e = i?.current;
       if (!e) return;
       E(e.clientHeight);
       const o = new window.ResizeObserver(() => {
@@ -33,7 +33,7 @@ const Y = D(X), Z = F(
       return o.observe(e), () => {
         o.disconnect();
       };
-    }, [s, _]), C(() => {
+    }, [i, _]), C(() => {
       const e = x.current;
       if (!e) return;
       const o = () => {
@@ -78,7 +78,7 @@ const Y = D(X), Z = F(
                 ]
               }
             ),
-            /* @__PURE__ */ r("h1", { "data-testid": "header-logo", className: `${n}-header__logo`, children: /* @__PURE__ */ r("a", { href: S, "aria-label": R, children: typeof d == "object" ? d : /* @__PURE__ */ r("img", { alt: "Phillips", "data-testid": "header-logo-img", src: d }) }) }),
+            /* @__PURE__ */ r("a", { href: S, "aria-label": R, "data-testid": "header-logo", className: `${n}-header__logo`, children: typeof d == "object" ? d : /* @__PURE__ */ r("img", { alt: "Phillips", "data-testid": "header-logo-img", src: d }) }),
             P
           ] }),
           /* @__PURE__ */ r("div", { className: c(`${n}-header__nav`, { [`${n}-header__nav--closed`]: !m }), children: /* @__PURE__ */ l(