@phillips/seldon 1.245.0 → 1.247.0

package/dist/scss/components/Navigation/NavigationItemWithSubmenu/_navigationItemWithSubmenu.scss

@@ -0,0 +1,114 @@
+@use '../../../allPartials' as *;
+
+.#{$px}-navigation-item-with-submenu {
+  flex-direction: column;
+  justify-content: center;
+
+  & > button {
+    color: $pure-black;
+    display: flex;
+    justify-content: flex-start;
+    position: relative;
+    width: 100%;
+
+    @include isHeaderDesktop {
+      color: unset;
+      display: block;
+      text-align: center;
+
+      // Match .nav__item .nav__link--linkStylised typography so trigger label aligns with link labels
+      @include text($linkStylised);
+
+      &:focus-visible {
+        @include focus-ring($border-radius: $radius-xs);
+      }
+    }
+  }
+
+  @include isHeaderDesktop {
+    // Underline on button (full-width like .nav__item .nav__link--linkStylised) when open, hover or focus
+    &[data-state='open'] > button::after,
+    &--hovered > button::after,
+    & > button:hover::after,
+    & > button:focus-visible::after {
+      background-color: $pure-black;
+      bottom: -1px;
+      content: '';
+      height: 1px;
+      left: 0;
+      position: absolute;
+      right: 0;
+    }
+
+    // Radix: submenu content is rendered in viewport; these styles apply when content is in viewport
+    &__submenu[data-state='open'] {
+      box-sizing: border-box;
+      cursor: default;
+      left: 0;
+      max-height: calc(90vh - #{$header-height} + var(--banner-height));
+      min-width: 100%;
+      -ms-overflow-style: none;
+      overflow-y: auto;
+      padding: 0;
+      scrollbar-width: none;
+      width: 100%;
+
+      &::-webkit-scrollbar {
+        display: none;
+      }
+
+      .#{$px}-nav__list__section {
+        opacity: 1;
+      }
+    }
+
+    // When submenu is rendered inside nav viewport: panel and link styles (@at-root so selector is viewport → submenu)
+    @at-root .#{$px}-nav__radix-viewport .#{$px}-navigation-item-with-submenu__submenu {
+      background-color: $pure-white;
+      box-sizing: border-box;
+
+      .#{$px}-nav__list {
+        align-items: flex-start;
+        box-sizing: border-box;
+        padding: $spacing-md;
+        width: 100%;
+      }
+
+      .#{$px}-nav__list .#{$px}-link--linkStylised {
+        padding: $snowflake-menu-padding 0;
+      }
+
+      // Single underline on hover/focus for submenu links
+      .#{$px}-nav__list .#{$px}-nav__item {
+        .#{$px}-link--linkStylised,
+        .#{$px}-link--linkMedium,
+        .#{$px}-link--linkLarge {
+          text-decoration: none;
+
+          &:hover,
+          &:focus-visible {
+            text-decoration: underline;
+            text-decoration-thickness: 1px;
+            text-underline-offset: 1px;
+          }
+        }
+
+        // View all link: always underlined
+        .#{$px}-nav__item--view-all {
+          text-decoration: underline;
+          text-decoration-thickness: 1px;
+          text-underline-offset: 1px;
+        }
+      }
+
+      .#{$px}-nav__list .#{$px}-link--linkMedium,
+      .#{$px}-nav__list .#{$px}-link--linkLarge {
+        padding: 0;
+      }
+    }
+  }
+
+  &__submenu--mobile.#{$px}-nav__list {
+    padding: 0 0 $snowflake-menu-padding;
+  }
+}

package/dist/scss/components/Navigation/NavigationList/_navigationList.scss

@@ -8,7 +8,8 @@ $top-transition: top 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   justify-content: left;
   opacity: 1;
 
-  &:focus {
+  // Remove default outline only for mouse focus; keep it for keyboard (:focus-visible)
+  &:focus:not(:focus-visible) {
     outline: none;
   }
 
@@ -28,16 +29,27 @@ $top-transition: top 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     padding: 0;
     position: relative;
     top: 0;
+    transform: translateY(0);
     transition:
       $top-transition,
+      transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
       opacity 0.5s cubic-bezier(0.65, 0, 0.35, 1);
+    z-index: 5;
 
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
+
+    // Offscreen state (transform/opacity) driven by .nav__list-container--search-expanded in _navigation.scss
     &--offscreen {
-      top: -100%;
       transition:
         $top-transition,
+        transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
         opacity 0.2s cubic-bezier(0.65, 0, 0.35, 1);
-      z-index: 5;
+
+      @media (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
     }
 
     &__section {

package/dist/scss/components/Navigation/_navigation.scss

@@ -32,7 +32,22 @@
 
     @include isHeaderDesktop {
       flex-direction: row;
+      overflow: visible; // allow nav list to slide up/down when search opens/closes
       padding-right: $search-size;
+
+      // When search is open, slide nav list up and fade out (transform so slide is visible; list keeps position relative)
+      &--search-expanded .#{$px}-nav__list {
+        opacity: 0;
+        pointer-events: none;
+        transform: translateY(-100%);
+        transition:
+          transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+          opacity 0.2s cubic-bezier(0.65, 0, 0.35, 1);
+
+        @media (prefers-reduced-motion: reduce) {
+          transition: none;
+        }
+      }
     }
   }
 
@@ -50,4 +65,98 @@
   &__close-btn:focus {
     background-color: $grey-50;
   }
+
+  // Mobile: list has horizontal padding (original behaviour). Use descendant selector so it
+  // still applies when list is wrapped by SSRMediaQuery. Links and accordion labels get vertical padding.
+  @include isHeaderMobile {
+    &__list-container .#{$px}-nav__list {
+      padding: 0 $spacing-md;
+    }
+
+    &__list-container .#{$px}-nav__list .#{$px}-link--linkStylised {
+      padding: $snowflake-menu-padding 0;
+    }
+
+    // linkMedium and linkLarge: same compact padding as linkLarge had (no snowflake padding)
+    &__list-container .#{$px}-nav__list .#{$px}-link--linkMedium,
+    &__list-container .#{$px}-nav__list .#{$px}-link--linkLarge {
+      padding: 0;
+    }
+
+    &__list-container .#{$px}-nav__list .#{$px}-accordion-item-label {
+      padding: $snowflake-menu-padding 0;
+    }
+  }
+
+  // Radix Navigation Menu (desktop only) – viewport hosts submenu content
+  @include isHeaderDesktop {
+    &__radix-root {
+      display: flex;
+      flex-direction: column;
+      overflow: visible; // allow nav list to slide up/down when search opens/closes
+      position: relative;
+
+      // Keep fit-content so search button stays next to nav list (position: absolute relative to list-container)
+      width: fit-content;
+    }
+
+    &__radix-viewport {
+      height: 0;
+      left: 0;
+      overflow: hidden;
+      pointer-events: none; // allow clicks to reach search when viewport is closed or when search is open
+      position: fixed;
+      right: 0;
+      top: calc(var(--banner-height, 0px) + var(--header-height));
+      transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+
+      @media (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
+
+      &[data-state='open'] {
+        animation: nav-viewport-enter 0.3s cubic-bezier(0.33, 1, 0.68, 1);
+        height: var(--radix-navigation-menu-viewport-height, auto);
+        pointer-events: auto; // submenu content must receive clicks when open
+
+        @media (prefers-reduced-motion: reduce) {
+          animation: none;
+        }
+      }
+
+      &[data-state='closed'] {
+        animation: nav-viewport-exit 0.2s cubic-bezier(0.65, 0, 0.35, 1);
+
+        @media (prefers-reduced-motion: reduce) {
+          animation: none;
+        }
+      }
+    }
+  }
+}
+
+@include isHeaderDesktop {
+  @keyframes nav-viewport-enter {
+    from {
+      opacity: 0;
+      transform: translateY(-16px);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes nav-viewport-exit {
+    from {
+      opacity: 1;
+      transform: translateY(0);
+    }
+
+    to {
+      opacity: 0;
+      transform: translateY(-16px);
+    }
+  }
 }

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

@@ -33,6 +33,7 @@
   &--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
 
     &::after {
       transition: width 0.25s ease-in 0.2s;

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

@@ -11,6 +11,23 @@
   width: 100%;
   z-index: 10;
 
+  // Skip link: visually hidden until focused so keyboard users can skip to main content
+  &__skip-link {
+    left: -9999px;
+    position: absolute;
+    z-index: 100;
+
+    &:focus {
+      @include focus-ring($border-radius: $radius-xs);
+
+      background-color: $white-100;
+      box-shadow: 0 0 0 4px $white-100; // fills outline-offset gap so content behind doesn’t show through
+      left: $spacing-sm;
+      padding: $spacing-micro $spacing-sm;
+      top: $spacing-sm;
+    }
+  }
+
   &__toggle-btn {
     align-items: center;
     background: none;
@@ -74,13 +91,19 @@
 
   &__logo {
     align-self: center;
+    display: inline-block; // so focus ring has a clear box to wrap
     margin: 0;
+    outline: none;
+    vertical-align: middle; // keep aligned with top-row flex items
 
+    &:focus,
     &:focus-visible {
       @include focus-ring($border-radius: $radius-xs);
     }
 
+    img,
     svg {
+      display: block; // avoid baseline gap so logo doesn’t slide up
       height: 20.58px; // 20.58px is the height of the logo's container to make logo 16px
       width: 100%;
     }
@@ -88,6 +111,7 @@
     @include isHeaderDesktop {
       padding-top: 0;
 
+      img,
       svg {
         height: 25.73px; // 25.73px is the height of the logo's container to make logo 20px
         width: 100%;

package/dist/site-furniture/Header/Header.d.ts

@@ -28,6 +28,14 @@ export interface HeaderProps extends ComponentProps<'header'> {
      * Reference to the notification banner
      */
     bannerRef?: React.MutableRefObject<HTMLDivElement | null>;
+    /**
+     * ID of the main content element for the skip link target (e.g. "main"). When set, a "Skip to main content" link is rendered for keyboard users.
+     */
+    skipToContentId?: string | null;
+    /**
+     * Accessible label for the skip link. Defaults to "Skip to main content".
+     */
+    skipLinkLabel?: string;
 }
 export type HeaderContextType = {
     /**
@@ -54,10 +62,6 @@ export type HeaderContextType = {
      * Set the active submenu ID
      */
     setActiveSubmenuId: (id: string | null) => void;
-    /**
-     * Reference to timeout for submenu closing
-     */
-    closeTimeoutRef: React.MutableRefObject<NodeJS.Timeout | null>;
 };
 export declare const HeaderContext: React.Context<HeaderContextType>;
 /**

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

@@ -1,74 +1,80 @@
 import { jsxs as l, jsx as r } from "react/jsx-runtime";
 import c from "../../_virtual/index.js";
-import t, { createContext as D, forwardRef as F, useState as u, useEffect as C } from "react";
-import G from "../../components/Icon/Icon.js";
-import H from "../../components/Navigation/Navigation.js";
+import t, { createContext as F, forwardRef as G, useState as h, useEffect as $ } from "react";
+import J from "../../components/Icon/Icon.js";
+import C from "../../components/Navigation/Navigation.js";
 import M from "../../patterns/LanguageSelector/LanguageSelector.js";
-import $ from "../../patterns/UserManagement/UserManagement.js";
-import { SSRMediaQuery as J } from "../../providers/SeldonProvider/utils.js";
-import { findChildrenOfType as h, findChildrenExcludingTypes as K, px as n } from "../../utils/index.js";
-import { useMobileMenu as W } from "./hooks.js";
-import { defaultHeaderContext as X } from "./utils.js";
-const Y = D(X), Z = F(
+import S from "../../patterns/UserManagement/UserManagement.js";
+import { SSRMediaQuery as K } from "../../providers/SeldonProvider/utils.js";
+import { findChildrenOfType as u, findChildrenExcludingTypes as W, px as n } from "../../utils/index.js";
+import { useMobileMenu as X } from "./hooks.js";
+import { defaultHeaderContext as Y } from "./utils.js";
+const Z = F(Y), ee = G(
   ({
-    logo: d = /* @__PURE__ */ r(G, { icon: "PhillipsLogo" }),
-    logoHref: S = "/",
+    logo: d = /* @__PURE__ */ r(J, { icon: "PhillipsLogo" }),
+    logoHref: N = "/",
     className: w,
-    children: s,
-    toggleOpenText: N = "Open Menu",
-    toggleCloseText: O = "Close Menu",
-    logoText: R = "Home Page",
+    children: i,
+    toggleOpenText: O = "Open Menu",
+    toggleCloseText: k = "Close Menu",
+    logoText: P = "Home Page",
     disabled: g,
-    bannerRef: i,
-    ...T
+    bannerRef: s,
+    skipToContentId: p = "main",
+    skipLinkLabel: R = "Skip to main content",
+    ...z
   }, a) => {
-    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 = i?.current;
+    const f = u(i, S), T = t.isValidElement(f?.[0]) ? t.cloneElement(f[0], { disabled: g }) : "", v = u(i, M), _ = t.isValidElement(v?.[0]) ? t.cloneElement(v[0], { disabled: g }) : "", [b, j] = h(!1), I = u(i, C), V = W(i, [C, S, M]), { closeMenu: A, handleMenuToggle: L, isMenuOpen: m, toggleText: q } = X({
+      toggleOpenText: O,
+      toggleCloseText: k
+    }), [B, Q] = h(null), [E, x] = h(s?.current ? s.current.clientHeight : 0), y = t.useRef(null);
+    $(() => {
+      const e = s?.current;
       if (!e) return;
-      E(e.clientHeight);
+      x(e.clientHeight);
       const o = new window.ResizeObserver(() => {
-        E(e.clientHeight);
+        x(e.clientHeight);
       });
       return o.observe(e), () => {
         o.disconnect();
       };
-    }, [i, _]), C(() => {
-      const e = x.current;
+    }, [s, E]), $(() => {
+      const e = y.current;
       if (!e) return;
       const o = () => {
-        const U = e.offsetHeight;
-        document.documentElement.style.setProperty("--header-height", `${U}px`);
+        const D = e.offsetHeight;
+        document.documentElement.style.setProperty("--header-height", `${D}px`);
       };
       o();
-      const y = new window.ResizeObserver(o);
-      return y.observe(e), () => {
-        y.disconnect();
+      const H = new window.ResizeObserver(o);
+      return H.observe(e), () => {
+        H.disconnect();
       };
     }, []);
-    const Q = t.useCallback(
+    const U = t.useCallback(
       (e) => {
-        x.current = e, typeof a == "function" ? a(e) : a && (a.current = e);
+        y.current = e, typeof a == "function" ? a(e) : a && (a.current = e);
       },
       [a]
     );
     return /* @__PURE__ */ l(
       "header",
       {
-        ...T,
+        ...z,
         className: c(`${n}-header`, w),
-        ref: Q,
-        style: { "--banner-height": `${_}px` },
+        ref: U,
+        style: { "--banner-height": `${E}px` },
         children: [
+          p && /* @__PURE__ */ r("a", { href: `#${p}`, className: `${n}-header__skip-link`, "data-testid": "skip-to-content", children: R }),
           /* @__PURE__ */ l("div", { className: `${n}-header__top-row`, children: [
-            /* @__PURE__ */ r(J.Media, { greaterThanOrEqual: "md", children: v }),
+            /* @__PURE__ */ r(K.Media, { greaterThanOrEqual: "md", children: _ }),
             /* @__PURE__ */ l(
               "button",
               {
-                "aria-label": A,
+                "aria-label": q,
                 "data-testid": "mobile-menu-toggle",
                 type: "button",
-                onClick: k,
+                onClick: L,
                 className: c(`${n}-header__toggle-btn`, {
                   [`${n}-header__toggle-btn--open`]: m
                 }),
@@ -78,20 +84,19 @@ const Y = D(X), Z = F(
                 ]
               }
             ),
-            /* @__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("a", { href: N, "aria-label": P, "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 }) }),
+            T
           ] }),
           /* @__PURE__ */ r("div", { className: c(`${n}-header__nav`, { [`${n}-header__nav--closed`]: !m }), children: /* @__PURE__ */ l(
-            Y.Provider,
+            Z.Provider,
             {
               value: {
-                activeSubmenuId: L,
-                setActiveSubmenuId: q,
-                closeTimeoutRef: B,
+                activeSubmenuId: B,
+                setActiveSubmenuId: Q,
                 isMenuOpen: m,
                 isSearchExpanded: b,
-                setIsSearchExpanded: z,
-                closeMenu: V
+                setIsSearchExpanded: j,
+                closeMenu: A
               },
               children: [
                 t.Children.map(
@@ -99,11 +104,11 @@ const Y = D(X), Z = F(
                   (e) => t.isValidElement(e) ? t.cloneElement(e, {
                     children: [
                       ...t.Children.toArray(e.props.children),
-                      v
+                      _
                     ]
                   }) : e
                 ),
-                j
+                V
               ]
             }
           ) }),
@@ -120,8 +125,8 @@ const Y = D(X), Z = F(
     );
   }
 );
-Z.displayName = "Header";
+ee.displayName = "Header";
 export {
-  Y as HeaderContext,
-  Z as default
+  Z as HeaderContext,
+  ee as default
 };