@phillips/seldon 1.246.0 → 1.247.0

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
 };

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

@@ -7,6 +7,284 @@ declare const meta: {
     subcomponents: {
         Search: React.ComponentType<unknown>;
     };
+    decorators: ((Story: import('storybook/internal/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
+        id?: string | undefined;
+        disabled?: boolean | undefined;
+        slot?: string | undefined;
+        style?: React.CSSProperties | undefined;
+        title?: string | undefined;
+        children?: React.ReactNode | undefined;
+        className?: string | undefined;
+        key?: React.Key | null | undefined;
+        rel?: string | undefined;
+        defaultChecked?: boolean | undefined;
+        defaultValue?: string | number | readonly string[] | undefined;
+        suppressContentEditableWarning?: boolean | undefined;
+        suppressHydrationWarning?: boolean | undefined;
+        accessKey?: string | undefined;
+        autoFocus?: boolean | undefined;
+        contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
+        contextMenu?: string | undefined;
+        dir?: string | undefined;
+        draggable?: (boolean | "true" | "false") | undefined;
+        hidden?: boolean | undefined;
+        lang?: string | undefined;
+        nonce?: string | undefined;
+        spellCheck?: (boolean | "true" | "false") | undefined;
+        tabIndex?: number | undefined;
+        translate?: "yes" | "no" | undefined;
+        radioGroup?: string | undefined;
+        role?: React.AriaRole | undefined;
+        about?: string | undefined;
+        content?: string | undefined;
+        datatype?: string | undefined;
+        inlist?: any;
+        prefix?: string | undefined;
+        property?: string | undefined;
+        resource?: string | undefined;
+        rev?: string | undefined;
+        typeof?: string | undefined;
+        vocab?: string | undefined;
+        autoCapitalize?: string | undefined;
+        autoCorrect?: string | undefined;
+        autoSave?: string | undefined;
+        color?: string | undefined;
+        itemProp?: string | undefined;
+        itemScope?: boolean | undefined;
+        itemType?: string | undefined;
+        itemID?: string | undefined;
+        itemRef?: string | undefined;
+        results?: number | undefined;
+        security?: string | undefined;
+        unselectable?: "on" | "off" | undefined;
+        inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
+        is?: string | undefined;
+        "aria-activedescendant"?: string | undefined;
+        "aria-atomic"?: (boolean | "true" | "false") | undefined;
+        "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
+        "aria-braillelabel"?: string | undefined;
+        "aria-brailleroledescription"?: string | undefined;
+        "aria-busy"?: (boolean | "true" | "false") | undefined;
+        "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined;
+        "aria-colcount"?: number | undefined;
+        "aria-colindex"?: number | undefined;
+        "aria-colindextext"?: string | undefined;
+        "aria-colspan"?: number | undefined;
+        "aria-controls"?: string | undefined;
+        "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined;
+        "aria-describedby"?: string | undefined;
+        "aria-description"?: string | undefined;
+        "aria-details"?: string | undefined;
+        "aria-disabled"?: (boolean | "true" | "false") | undefined;
+        "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined;
+        "aria-errormessage"?: string | undefined;
+        "aria-expanded"?: (boolean | "true" | "false") | undefined;
+        "aria-flowto"?: string | undefined;
+        "aria-grabbed"?: (boolean | "true" | "false") | undefined;
+        "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
+        "aria-hidden"?: (boolean | "true" | "false") | undefined;
+        "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
+        "aria-keyshortcuts"?: string | undefined;
+        "aria-label"?: string | undefined;
+        "aria-labelledby"?: string | undefined;
+        "aria-level"?: number | undefined;
+        "aria-live"?: "off" | "assertive" | "polite" | undefined;
+        "aria-modal"?: (boolean | "true" | "false") | undefined;
+        "aria-multiline"?: (boolean | "true" | "false") | undefined;
+        "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
+        "aria-orientation"?: "horizontal" | "vertical" | undefined;
+        "aria-owns"?: string | undefined;
+        "aria-placeholder"?: string | undefined;
+        "aria-posinset"?: number | undefined;
+        "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined;
+        "aria-readonly"?: (boolean | "true" | "false") | undefined;
+        "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined;
+        "aria-required"?: (boolean | "true" | "false") | undefined;
+        "aria-roledescription"?: string | undefined;
+        "aria-rowcount"?: number | undefined;
+        "aria-rowindex"?: number | undefined;
+        "aria-rowindextext"?: string | undefined;
+        "aria-rowspan"?: number | undefined;
+        "aria-selected"?: (boolean | "true" | "false") | undefined;
+        "aria-setsize"?: number | undefined;
+        "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
+        "aria-valuemax"?: number | undefined;
+        "aria-valuemin"?: number | undefined;
+        "aria-valuenow"?: number | undefined;
+        "aria-valuetext"?: string | undefined;
+        dangerouslySetInnerHTML?: {
+            __html: string | TrustedHTML;
+        } | undefined;
+        onCopy?: React.ClipboardEventHandler<HTMLElement> | undefined;
+        onCopyCapture?: React.ClipboardEventHandler<HTMLElement> | undefined;
+        onCut?: React.ClipboardEventHandler<HTMLElement> | undefined;
+        onCutCapture?: React.ClipboardEventHandler<HTMLElement> | undefined;
+        onPaste?: React.ClipboardEventHandler<HTMLElement> | undefined;
+        onPasteCapture?: React.ClipboardEventHandler<HTMLElement> | undefined;
+        onCompositionEnd?: React.CompositionEventHandler<HTMLElement> | undefined;
+        onCompositionEndCapture?: React.CompositionEventHandler<HTMLElement> | undefined;
+        onCompositionStart?: React.CompositionEventHandler<HTMLElement> | undefined;
+        onCompositionStartCapture?: React.CompositionEventHandler<HTMLElement> | undefined;
+        onCompositionUpdate?: React.CompositionEventHandler<HTMLElement> | undefined;
+        onCompositionUpdateCapture?: React.CompositionEventHandler<HTMLElement> | undefined;
+        onFocus?: React.FocusEventHandler<HTMLElement> | undefined;
+        onFocusCapture?: React.FocusEventHandler<HTMLElement> | undefined;
+        onBlur?: React.FocusEventHandler<HTMLElement> | undefined;
+        onBlurCapture?: React.FocusEventHandler<HTMLElement> | undefined;
+        onChange?: React.FormEventHandler<HTMLElement> | undefined;
+        onChangeCapture?: React.FormEventHandler<HTMLElement> | undefined;
+        onBeforeInput?: React.FormEventHandler<HTMLElement> | undefined;
+        onBeforeInputCapture?: React.FormEventHandler<HTMLElement> | undefined;
+        onInput?: React.FormEventHandler<HTMLElement> | undefined;
+        onInputCapture?: React.FormEventHandler<HTMLElement> | undefined;
+        onReset?: React.FormEventHandler<HTMLElement> | undefined;
+        onResetCapture?: React.FormEventHandler<HTMLElement> | undefined;
+        onSubmit?: React.FormEventHandler<HTMLElement> | undefined;
+        onSubmitCapture?: React.FormEventHandler<HTMLElement> | undefined;
+        onInvalid?: React.FormEventHandler<HTMLElement> | undefined;
+        onInvalidCapture?: React.FormEventHandler<HTMLElement> | undefined;
+        onLoad?: React.ReactEventHandler<HTMLElement> | undefined;
+        onLoadCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+        onError?: React.ReactEventHandler<HTMLElement> | undefined;
+        onErrorCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+        onKeyDown?: React.KeyboardEventHandler<HTMLElement> | undefined;
+        onKeyDownCapture?: React.KeyboardEventHandler<HTMLElement> | undefined;
+        onKeyPress?: React.KeyboardEventHandler<HTMLElement> | undefined;
+        onKeyPressCapture?: React.KeyboardEventHandler<HTMLElement> | undefined;
+        onKeyUp?: React.KeyboardEventHandler<HTMLElement> | undefined;
+        onKeyUpCapture?: React.KeyboardEventHandler<HTMLElement> | undefined;
+        onAbort?: React.ReactEventHandler<HTMLElement> | undefined;
+        onAbortCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+        onCanPlay?: React.ReactEventHandler<HTMLElement> | undefined;
+        onCanPlayCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+        onCanPlayThrough?: React.ReactEventHandler<HTMLElement> | undefined;
+        onCanPlayThroughCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+        onDurationChange?: React.ReactEventHandler<HTMLElement> | undefined;
+        onDurationChangeCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+        onEmptied?: React.ReactEventHandler<HTMLElement> | undefined;
+        onEmptiedCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+        onEncrypted?: React.ReactEventHandler<HTMLElement> | undefined;
+        onEncryptedCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+        onEnded?: React.ReactEventHandler<HTMLElement> | undefined;
+        onEndedCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+        onLoadedData?: React.ReactEventHandler<HTMLElement> | undefined;
+        onLoadedDataCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+        onLoadedMetadata?: React.ReactEventHandler<HTMLElement> | undefined;
+        onLoadedMetadataCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+        onLoadStart?: React.ReactEventHandler<HTMLElement> | undefined;
+        onLoadStartCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+        onPause?: React.ReactEventHandler<HTMLElement> | undefined;
+        onPauseCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+        onPlay?: React.ReactEventHandler<HTMLElement> | undefined;
+        onPlayCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+        onPlaying?: React.ReactEventHandler<HTMLElement> | undefined;
+        onPlayingCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+        onProgress?: React.ReactEventHandler<HTMLElement> | undefined;
+        onProgressCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+        onRateChange?: React.ReactEventHandler<HTMLElement> | undefined;
+        onRateChangeCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+        onResize?: React.ReactEventHandler<HTMLElement> | undefined;
+        onResizeCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+        onSeeked?: React.ReactEventHandler<HTMLElement> | undefined;
+        onSeekedCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+        onSeeking?: React.ReactEventHandler<HTMLElement> | undefined;
+        onSeekingCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+        onStalled?: React.ReactEventHandler<HTMLElement> | undefined;
+        onStalledCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+        onSuspend?: React.ReactEventHandler<HTMLElement> | undefined;
+        onSuspendCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+        onTimeUpdate?: React.ReactEventHandler<HTMLElement> | undefined;
+        onTimeUpdateCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+        onVolumeChange?: React.ReactEventHandler<HTMLElement> | undefined;
+        onVolumeChangeCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+        onWaiting?: React.ReactEventHandler<HTMLElement> | undefined;
+        onWaitingCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+        onAuxClick?: React.MouseEventHandler<HTMLElement> | undefined;
+        onAuxClickCapture?: React.MouseEventHandler<HTMLElement> | undefined;
+        onClick?: React.MouseEventHandler<HTMLElement> | undefined;
+        onClickCapture?: React.MouseEventHandler<HTMLElement> | undefined;
+        onContextMenu?: React.MouseEventHandler<HTMLElement> | undefined;
+        onContextMenuCapture?: React.MouseEventHandler<HTMLElement> | undefined;
+        onDoubleClick?: React.MouseEventHandler<HTMLElement> | undefined;
+        onDoubleClickCapture?: React.MouseEventHandler<HTMLElement> | undefined;
+        onDrag?: React.DragEventHandler<HTMLElement> | undefined;
+        onDragCapture?: React.DragEventHandler<HTMLElement> | undefined;
+        onDragEnd?: React.DragEventHandler<HTMLElement> | undefined;
+        onDragEndCapture?: React.DragEventHandler<HTMLElement> | undefined;
+        onDragEnter?: React.DragEventHandler<HTMLElement> | undefined;
+        onDragEnterCapture?: React.DragEventHandler<HTMLElement> | undefined;
+        onDragExit?: React.DragEventHandler<HTMLElement> | undefined;
+        onDragExitCapture?: React.DragEventHandler<HTMLElement> | undefined;
+        onDragLeave?: React.DragEventHandler<HTMLElement> | undefined;
+        onDragLeaveCapture?: React.DragEventHandler<HTMLElement> | undefined;
+        onDragOver?: React.DragEventHandler<HTMLElement> | undefined;
+        onDragOverCapture?: React.DragEventHandler<HTMLElement> | undefined;
+        onDragStart?: React.DragEventHandler<HTMLElement> | undefined;
+        onDragStartCapture?: React.DragEventHandler<HTMLElement> | undefined;
+        onDrop?: React.DragEventHandler<HTMLElement> | undefined;
+        onDropCapture?: React.DragEventHandler<HTMLElement> | undefined;
+        onMouseDown?: React.MouseEventHandler<HTMLElement> | undefined;
+        onMouseDownCapture?: React.MouseEventHandler<HTMLElement> | undefined;
+        onMouseEnter?: React.MouseEventHandler<HTMLElement> | undefined;
+        onMouseLeave?: React.MouseEventHandler<HTMLElement> | undefined;
+        onMouseMove?: React.MouseEventHandler<HTMLElement> | undefined;
+        onMouseMoveCapture?: React.MouseEventHandler<HTMLElement> | undefined;
+        onMouseOut?: React.MouseEventHandler<HTMLElement> | undefined;
+        onMouseOutCapture?: React.MouseEventHandler<HTMLElement> | undefined;
+        onMouseOver?: React.MouseEventHandler<HTMLElement> | undefined;
+        onMouseOverCapture?: React.MouseEventHandler<HTMLElement> | undefined;
+        onMouseUp?: React.MouseEventHandler<HTMLElement> | undefined;
+        onMouseUpCapture?: React.MouseEventHandler<HTMLElement> | undefined;
+        onSelect?: React.ReactEventHandler<HTMLElement> | undefined;
+        onSelectCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+        onTouchCancel?: React.TouchEventHandler<HTMLElement> | undefined;
+        onTouchCancelCapture?: React.TouchEventHandler<HTMLElement> | undefined;
+        onTouchEnd?: React.TouchEventHandler<HTMLElement> | undefined;
+        onTouchEndCapture?: React.TouchEventHandler<HTMLElement> | undefined;
+        onTouchMove?: React.TouchEventHandler<HTMLElement> | undefined;
+        onTouchMoveCapture?: React.TouchEventHandler<HTMLElement> | undefined;
+        onTouchStart?: React.TouchEventHandler<HTMLElement> | undefined;
+        onTouchStartCapture?: React.TouchEventHandler<HTMLElement> | undefined;
+        onPointerDown?: React.PointerEventHandler<HTMLElement> | undefined;
+        onPointerDownCapture?: React.PointerEventHandler<HTMLElement> | undefined;
+        onPointerMove?: React.PointerEventHandler<HTMLElement> | undefined;
+        onPointerMoveCapture?: React.PointerEventHandler<HTMLElement> | undefined;
+        onPointerUp?: React.PointerEventHandler<HTMLElement> | undefined;
+        onPointerUpCapture?: React.PointerEventHandler<HTMLElement> | undefined;
+        onPointerCancel?: React.PointerEventHandler<HTMLElement> | undefined;
+        onPointerCancelCapture?: React.PointerEventHandler<HTMLElement> | undefined;
+        onPointerEnter?: React.PointerEventHandler<HTMLElement> | undefined;
+        onPointerLeave?: React.PointerEventHandler<HTMLElement> | undefined;
+        onPointerOver?: React.PointerEventHandler<HTMLElement> | undefined;
+        onPointerOverCapture?: React.PointerEventHandler<HTMLElement> | undefined;
+        onPointerOut?: React.PointerEventHandler<HTMLElement> | undefined;
+        onPointerOutCapture?: React.PointerEventHandler<HTMLElement> | undefined;
+        onGotPointerCapture?: React.PointerEventHandler<HTMLElement> | undefined;
+        onGotPointerCaptureCapture?: React.PointerEventHandler<HTMLElement> | undefined;
+        onLostPointerCapture?: React.PointerEventHandler<HTMLElement> | undefined;
+        onLostPointerCaptureCapture?: React.PointerEventHandler<HTMLElement> | undefined;
+        onScroll?: React.UIEventHandler<HTMLElement> | undefined;
+        onScrollCapture?: React.UIEventHandler<HTMLElement> | undefined;
+        onWheel?: React.WheelEventHandler<HTMLElement> | undefined;
+        onWheelCapture?: React.WheelEventHandler<HTMLElement> | undefined;
+        onAnimationStart?: React.AnimationEventHandler<HTMLElement> | undefined;
+        onAnimationStartCapture?: React.AnimationEventHandler<HTMLElement> | undefined;
+        onAnimationEnd?: React.AnimationEventHandler<HTMLElement> | undefined;
+        onAnimationEndCapture?: React.AnimationEventHandler<HTMLElement> | undefined;
+        onAnimationIteration?: React.AnimationEventHandler<HTMLElement> | undefined;
+        onAnimationIterationCapture?: React.AnimationEventHandler<HTMLElement> | undefined;
+        onTransitionEnd?: React.TransitionEventHandler<HTMLElement> | undefined;
+        onTransitionEndCapture?: React.TransitionEventHandler<HTMLElement> | undefined;
+        toggleCloseText?: string | undefined;
+        toggleOpenText?: string | undefined;
+        logo?: (React.ReactElement<React.Component> | string) | undefined;
+        logoHref?: string | undefined;
+        logoText?: string | undefined;
+        bannerRef?: React.MutableRefObject<HTMLDivElement | null> | undefined;
+        skipToContentId?: (string | null) | undefined;
+        skipLinkLabel?: string | undefined;
+        ref?: React.LegacyRef<HTMLElement> | undefined;
+    }>) => import("react/jsx-runtime").JSX.Element)[];
     parameters: {
         docs: {
             story: {