@cloudscape-design/components-themeable 3.0.1344 → 3.0.1346

package/lib/internal/template/select/parts/styles.selectors.js

@@ -2,26 +2,26 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "placeholder": "awsui_placeholder_dwuol_k65rd_145",
-  "disabled": "awsui_disabled_dwuol_k65rd_150",
-  "item": "awsui_item_dwuol_k65rd_154",
-  "checkbox": "awsui_checkbox_dwuol_k65rd_158",
-  "option-group": "awsui_option-group_dwuol_k65rd_167",
-  "filter": "awsui_filter_dwuol_k65rd_171",
-  "trigger": "awsui_trigger_dwuol_k65rd_176",
-  "layout-strut": "awsui_layout-strut_dwuol_k65rd_182",
-  "list-bottom": "awsui_list-bottom_dwuol_k65rd_188",
-  "selected-icon": "awsui_selected-icon_dwuol_k65rd_192",
-  "show-label-tag": "awsui_show-label-tag_dwuol_k65rd_197",
-  "inline-token-trigger": "awsui_inline-token-trigger_dwuol_k65rd_201",
-  "inline-token-list": "awsui_inline-token-list_dwuol_k65rd_208",
-  "inline-token-hidden-placeholder": "awsui_inline-token-hidden-placeholder_dwuol_k65rd_222",
-  "inline-token-counter": "awsui_inline-token-counter_dwuol_k65rd_228",
-  "inline-label-trigger-wrapper": "awsui_inline-label-trigger-wrapper_dwuol_k65rd_232",
-  "inline-label-wrapper": "awsui_inline-label-wrapper_dwuol_k65rd_236",
-  "inline-label": "awsui_inline-label_dwuol_k65rd_232",
-  "inline-label-disabled": "awsui_inline-label-disabled_dwuol_k65rd_261",
-  "inline-label-inline-tokens": "awsui_inline-label-inline-tokens_dwuol_k65rd_265",
-  "disabled-reason-tooltip": "awsui_disabled-reason-tooltip_dwuol_k65rd_270"
+  "placeholder": "awsui_placeholder_dwuol_1vi38_145",
+  "disabled": "awsui_disabled_dwuol_1vi38_150",
+  "item": "awsui_item_dwuol_1vi38_154",
+  "checkbox": "awsui_checkbox_dwuol_1vi38_158",
+  "option-group": "awsui_option-group_dwuol_1vi38_167",
+  "filter": "awsui_filter_dwuol_1vi38_171",
+  "trigger": "awsui_trigger_dwuol_1vi38_176",
+  "layout-strut": "awsui_layout-strut_dwuol_1vi38_182",
+  "list-bottom": "awsui_list-bottom_dwuol_1vi38_188",
+  "selected-icon": "awsui_selected-icon_dwuol_1vi38_192",
+  "show-label-tag": "awsui_show-label-tag_dwuol_1vi38_197",
+  "inline-token-trigger": "awsui_inline-token-trigger_dwuol_1vi38_201",
+  "inline-token-list": "awsui_inline-token-list_dwuol_1vi38_208",
+  "inline-token-hidden-placeholder": "awsui_inline-token-hidden-placeholder_dwuol_1vi38_222",
+  "inline-token-counter": "awsui_inline-token-counter_dwuol_1vi38_228",
+  "inline-label-trigger-wrapper": "awsui_inline-label-trigger-wrapper_dwuol_1vi38_232",
+  "inline-label-wrapper": "awsui_inline-label-wrapper_dwuol_1vi38_236",
+  "inline-label": "awsui_inline-label_dwuol_1vi38_232",
+  "inline-label-disabled": "awsui_inline-label-disabled_dwuol_1vi38_261",
+  "inline-label-inline-tokens": "awsui_inline-label-inline-tokens_dwuol_1vi38_265",
+  "disabled-reason-tooltip": "awsui_disabled-reason-tooltip_dwuol_1vi38_270"
 };
   

package/lib/internal/template/select/styles.css.js

@@ -1,8 +1,8 @@
 
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_r2vco_j50y0_145",
-  "dropdown-header": "awsui_dropdown-header_r2vco_j50y0_177",
-  "dropdown-footer": "awsui_dropdown-footer_r2vco_j50y0_183"
+  "root": "awsui_root_r2vco_u5nua_145",
+  "dropdown-header": "awsui_dropdown-header_r2vco_u5nua_177",
+  "dropdown-footer": "awsui_dropdown-footer_r2vco_u5nua_183"
 };
   

package/lib/internal/template/select/styles.scoped.css

@@ -142,7 +142,7 @@
 */
 /* Style used for links in slots/components that are text heavy, to help links stand out among
 surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
-.awsui_root_r2vco_j50y0_145:not(#\9) {
+.awsui_root_r2vco_u5nua_145:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -167,19 +167,19 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   word-spacing: normal;
   font-size: var(--font-size-body-m-tq5a14, 14px);
   line-height: var(--line-height-body-m-5xw6xo, 22px);
-  color: var(--color-text-body-default-kbrad2, #16191f);
+  color: var(--color-text-body-default-b2us04, #16191f);
   font-weight: var(--font-weight-normal-fr92v6, 400);
   font-family: var(--font-family-base-c9u5cr, "Noto Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
   -webkit-font-smoothing: auto;
   -moz-osx-font-smoothing: auto;
 }
 
-.awsui_dropdown-header_r2vco_j50y0_177:not(#\9) {
+.awsui_dropdown-header_r2vco_u5nua_177:not(#\9) {
   inline-size: 100%;
   position: relative;
   z-index: 4;
 }
 
-.awsui_dropdown-footer_r2vco_j50y0_183:not(#\9) {
+.awsui_dropdown-footer_r2vco_u5nua_183:not(#\9) {
   inline-size: 100%;
 }

package/lib/internal/template/select/styles.selectors.js

@@ -2,8 +2,8 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "root": "awsui_root_r2vco_j50y0_145",
-  "dropdown-header": "awsui_dropdown-header_r2vco_j50y0_177",
-  "dropdown-footer": "awsui_dropdown-footer_r2vco_j50y0_183"
+  "root": "awsui_root_r2vco_u5nua_145",
+  "dropdown-header": "awsui_dropdown-header_r2vco_u5nua_177",
+  "dropdown-footer": "awsui_dropdown-footer_r2vco_u5nua_183"
 };
   

package/lib/internal/template/side-navigation/implementation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"implementation.d.ts","sourceRoot":"","sources":["../../../src/side-navigation/implementation.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAGlF,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAMnD,KAAK,2BAA2B,GAAG,mBAAmB,GAAG,0BAA0B,CAAC;AAEpF,wBAAgB,4BAA4B,CAAC,EAC3C,MAAM,EACN,YAAY,EACZ,UAAU,EACV,KAAU,EACV,QAAQ,EACR,QAAQ,EACR,SAAiB,EACjB,iBAAiB,EACjB,GAAG,KAAK,EACT,EAAE,2BAA2B,eAyE7B;AAED,eAAO,MAAM,8BAA8B,mGAA0D,CAAC"}
+{"version":3,"file":"implementation.d.ts","sourceRoot":"","sources":["../../../src/side-navigation/implementation.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAGlF,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAWnD,KAAK,2BAA2B,GAAG,mBAAmB,GAAG,0BAA0B,CAAC;AAEpF,wBAAgB,4BAA4B,CAAC,EAC3C,MAAM,EACN,YAAY,EACZ,UAAU,EACV,KAAU,EACV,QAAQ,EACR,QAAQ,EACR,SAAiB,EACjB,iBAAiB,EACjB,GAAG,KAAK,EACT,EAAE,2BAA2B,eA6E7B;AAED,eAAO,MAAM,8BAA8B,mGAA0D,CAAC"}

package/lib/internal/template/side-navigation/implementation.js

@@ -1,6 +1,6 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import clsx from 'clsx';
 import { useAppLayoutToolbarDesignEnabled } from '../app-layout/utils/feature-flags';
 import { getBaseProps } from '../internal/base-component';
@@ -8,7 +8,7 @@ import { fireCancelableEvent, fireNonCancelableEvent } from '../internal/events'
 import { isDevelopment } from '../internal/is-development';
 import { createWidgetizedComponent } from '../internal/widgets';
 import { Header, NavigationItemsList } from './parts';
-import { checkDuplicateHrefs, generateExpandableItemsMapping, hasNavigationIcons } from './util';
+import { checkCollapsedIconSupport, checkDuplicateHrefs, generateExpandableItemsMapping, hasNavigationIcons, } from './util';
 import styles from './styles.css.js';
 export function SideNavigationImplementation({ header, itemsControl, activeHref, items = [], onFollow, onChange, collapsed = false, __internalRootRef, ...props }) {
     const baseProps = getBaseProps(props);
@@ -16,10 +16,13 @@ export function SideNavigationImplementation({ header, itemsControl, activeHref,
     const parentMap = useMemo(() => generateExpandableItemsMapping(items), [items]);
     const withIcons = useMemo(() => hasNavigationIcons(items), [items]);
     const [activeTooltip, setActiveTooltip] = useState(null);
+    const listContainerRef = useRef(null);
     if (isDevelopment) {
         // This code should be wiped in production anyway.
         // eslint-disable-next-line react-hooks/rules-of-hooks
         useEffect(() => checkDuplicateHrefs(items), [items]);
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        useEffect(() => checkCollapsedIconSupport(items, collapsed), [items, collapsed]);
     }
     const onChangeHandler = useCallback((item, expanded) => {
         // generateExpandableItemsMapping walks through the entire tree, so we're certain about getting a value.
@@ -31,7 +34,7 @@ export function SideNavigationImplementation({ header, itemsControl, activeHref,
     return (React.createElement("div", { ...baseProps, className: clsx(styles.root, baseProps.className, isToolbar && styles['with-toolbar'], collapsed && styles['root--collapsed']), ref: __internalRootRef },
         header && (React.createElement(Header, { definition: header, activeHref: activeHref, fireChange: onChangeHandler, fireFollow: onFollowHandler, collapsed: collapsed })),
         !collapsed && itemsControl && React.createElement("div", { className: styles['items-control'] }, itemsControl),
-        items && (React.createElement("div", { className: styles['list-container'] },
+        items && (React.createElement("div", { ref: listContainerRef, className: styles['list-container'] },
             React.createElement(NavigationItemsList, { variant: "root", items: items, fireFollow: onFollowHandler, fireChange: onChangeHandler, activeHref: activeHref, collapsed: collapsed, withIcons: withIcons, activeTooltip: activeTooltip, setActiveTooltip: setActiveTooltip })))));
 }
 export const createWidgetizedSideNavigation = createWidgetizedComponent(SideNavigationImplementation);

package/lib/internal/template/side-navigation/implementation.js.map

@@ -1 +1 @@
-{"version":3,"file":"implementation.js","sourceRoot":"","sources":["../../../src/side-navigation/implementation.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useCallback, useEffect, useMemo, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { useAppLayoutToolbarDesignEnabled } from '../app-layout/utils/feature-flags';\nimport { getBaseProps } from '../internal/base-component';\nimport { fireCancelableEvent, fireNonCancelableEvent } from '../internal/events';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { isDevelopment } from '../internal/is-development';\nimport { createWidgetizedComponent } from '../internal/widgets';\nimport { SideNavigationProps } from './interfaces';\nimport { Header, NavigationItemsList } from './parts';\nimport { checkDuplicateHrefs, generateExpandableItemsMapping, hasNavigationIcons } from './util';\n\nimport styles from './styles.css.js';\n\ntype SideNavigationInternalProps = SideNavigationProps & InternalBaseComponentProps;\n\nexport function SideNavigationImplementation({\n  header,\n  itemsControl,\n  activeHref,\n  items = [],\n  onFollow,\n  onChange,\n  collapsed = false,\n  __internalRootRef,\n  ...props\n}: SideNavigationInternalProps) {\n  const baseProps = getBaseProps(props);\n  const isToolbar = useAppLayoutToolbarDesignEnabled();\n  const parentMap = useMemo(() => generateExpandableItemsMapping(items), [items]);\n  const withIcons = useMemo(() => hasNavigationIcons(items), [items]);\n  const [activeTooltip, setActiveTooltip] = useState<string | null>(null);\n\n  if (isDevelopment) {\n    // This code should be wiped in production anyway.\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    useEffect(() => checkDuplicateHrefs(items), [items]);\n  }\n\n  const onChangeHandler = useCallback(\n    (item: SideNavigationProps.Section | SideNavigationProps.ExpandableLinkGroup, expanded: boolean) => {\n      // generateExpandableItemsMapping walks through the entire tree, so we're certain about getting a value.\n      fireNonCancelableEvent(onChange, { item, expanded: expanded, expandableParents: parentMap.get(item)! });\n    },\n    [onChange, parentMap]\n  );\n\n  const onFollowHandler = useCallback(\n    (\n      item:\n        | SideNavigationProps.Link\n        | SideNavigationProps.Header\n        | SideNavigationProps.LinkGroup\n        | SideNavigationProps.ExpandableLinkGroup,\n      sourceEvent: React.SyntheticEvent | Event\n    ) => {\n      fireCancelableEvent(onFollow, item, sourceEvent);\n    },\n    [onFollow]\n  );\n\n  return (\n    <div\n      {...baseProps}\n      className={clsx(\n        styles.root,\n        baseProps.className,\n        isToolbar && styles['with-toolbar'],\n        collapsed && styles['root--collapsed']\n      )}\n      ref={__internalRootRef}\n    >\n      {header && (\n        <Header\n          definition={header}\n          activeHref={activeHref}\n          fireChange={onChangeHandler}\n          fireFollow={onFollowHandler}\n          collapsed={collapsed}\n        />\n      )}\n      {!collapsed && itemsControl && <div className={styles['items-control']}>{itemsControl}</div>}\n      {items && (\n        <div className={styles['list-container']}>\n          <NavigationItemsList\n            variant=\"root\"\n            items={items}\n            fireFollow={onFollowHandler}\n            fireChange={onChangeHandler}\n            activeHref={activeHref}\n            collapsed={collapsed}\n            withIcons={withIcons}\n            activeTooltip={activeTooltip}\n            setActiveTooltip={setActiveTooltip}\n          />\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport const createWidgetizedSideNavigation = createWidgetizedComponent(SideNavigationImplementation);\n"]}
+{"version":3,"file":"implementation.js","sourceRoot":"","sources":["../../../src/side-navigation/implementation.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { useAppLayoutToolbarDesignEnabled } from '../app-layout/utils/feature-flags';\nimport { getBaseProps } from '../internal/base-component';\nimport { fireCancelableEvent, fireNonCancelableEvent } from '../internal/events';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { isDevelopment } from '../internal/is-development';\nimport { createWidgetizedComponent } from '../internal/widgets';\nimport { SideNavigationProps } from './interfaces';\nimport { Header, NavigationItemsList } from './parts';\nimport {\n  checkCollapsedIconSupport,\n  checkDuplicateHrefs,\n  generateExpandableItemsMapping,\n  hasNavigationIcons,\n} from './util';\n\nimport styles from './styles.css.js';\n\ntype SideNavigationInternalProps = SideNavigationProps & InternalBaseComponentProps;\n\nexport function SideNavigationImplementation({\n  header,\n  itemsControl,\n  activeHref,\n  items = [],\n  onFollow,\n  onChange,\n  collapsed = false,\n  __internalRootRef,\n  ...props\n}: SideNavigationInternalProps) {\n  const baseProps = getBaseProps(props);\n  const isToolbar = useAppLayoutToolbarDesignEnabled();\n  const parentMap = useMemo(() => generateExpandableItemsMapping(items), [items]);\n  const withIcons = useMemo(() => hasNavigationIcons(items), [items]);\n  const [activeTooltip, setActiveTooltip] = useState<string | null>(null);\n\n  const listContainerRef = useRef<HTMLDivElement>(null);\n\n  if (isDevelopment) {\n    // This code should be wiped in production anyway.\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    useEffect(() => checkDuplicateHrefs(items), [items]);\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    useEffect(() => checkCollapsedIconSupport(items, collapsed), [items, collapsed]);\n  }\n\n  const onChangeHandler = useCallback(\n    (item: SideNavigationProps.Section | SideNavigationProps.ExpandableLinkGroup, expanded: boolean) => {\n      // generateExpandableItemsMapping walks through the entire tree, so we're certain about getting a value.\n      fireNonCancelableEvent(onChange, { item, expanded: expanded, expandableParents: parentMap.get(item)! });\n    },\n    [onChange, parentMap]\n  );\n\n  const onFollowHandler = useCallback(\n    (\n      item:\n        | SideNavigationProps.Link\n        | SideNavigationProps.Header\n        | SideNavigationProps.LinkGroup\n        | SideNavigationProps.ExpandableLinkGroup,\n      sourceEvent: React.SyntheticEvent | Event\n    ) => {\n      fireCancelableEvent(onFollow, item, sourceEvent);\n    },\n    [onFollow]\n  );\n\n  return (\n    <div\n      {...baseProps}\n      className={clsx(\n        styles.root,\n        baseProps.className,\n        isToolbar && styles['with-toolbar'],\n        collapsed && styles['root--collapsed']\n      )}\n      ref={__internalRootRef}\n    >\n      {header && (\n        <Header\n          definition={header}\n          activeHref={activeHref}\n          fireChange={onChangeHandler}\n          fireFollow={onFollowHandler}\n          collapsed={collapsed}\n        />\n      )}\n      {!collapsed && itemsControl && <div className={styles['items-control']}>{itemsControl}</div>}\n      {items && (\n        <div ref={listContainerRef} className={styles['list-container']}>\n          <NavigationItemsList\n            variant=\"root\"\n            items={items}\n            fireFollow={onFollowHandler}\n            fireChange={onChangeHandler}\n            activeHref={activeHref}\n            collapsed={collapsed}\n            withIcons={withIcons}\n            activeTooltip={activeTooltip}\n            setActiveTooltip={setActiveTooltip}\n          />\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport const createWidgetizedSideNavigation = createWidgetizedComponent(SideNavigationImplementation);\n"]}

package/lib/internal/template/side-navigation/parts.d.ts

@@ -17,7 +17,8 @@ interface NavigationItemsListProps extends BaseItemComponentProps {
     items: ReadonlyArray<SideNavigationProps.Item>;
     variant: 'section' | 'section-group' | 'link-group' | 'expandable-link-group' | 'root';
     withIcons?: boolean;
+    ariaLabel?: string;
 }
-export declare function NavigationItemsList({ items, variant, activeHref, fireChange, fireFollow, position, collapsed, withIcons, activeTooltip, setActiveTooltip, }: NavigationItemsListProps): JSX.Element;
+export declare function NavigationItemsList({ items, variant, activeHref, fireChange, fireFollow, position, collapsed, withIcons, ariaLabel, activeTooltip, setActiveTooltip, }: NavigationItemsListProps): JSX.Element;
 export {};
 //# sourceMappingURL=parts.d.ts.map

package/lib/internal/template/side-navigation/parts.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"parts.d.ts","sourceRoot":"","sources":["../../../src/side-navigation/parts.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAuE,MAAM,OAAO,CAAC;AAgB5F,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAOnD,UAAU,sBAAsB;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,CAAC,IAAI,EAAE,mBAAmB,CAAC,OAAO,GAAG,mBAAmB,CAAC,mBAAmB,EAAE,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACrH,UAAU,EAAE,CACV,IAAI,EACA,mBAAmB,CAAC,IAAI,GACxB,mBAAmB,CAAC,MAAM,GAC1B,mBAAmB,CAAC,SAAS,GAC7B,mBAAmB,CAAC,mBAAmB,EAC3C,KAAK,EAAE,KAAK,CAAC,cAAc,GAAG,KAAK,KAChC,IAAI,CAAC;IACV,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CACtD;AAED,UAAU,WAAY,SAAQ,sBAAsB;IAClD,UAAU,EAAE,mBAAmB,CAAC,MAAM,CAAC;CACxC;AAED,wBAAgB,MAAM,CAAC,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,EAAE,WAAW,eA2DpF;AAED,UAAU,wBAAyB,SAAQ,sBAAsB;IAC/D,KAAK,EAAE,aAAa,CAAC,mBAAmB,CAAC,IAAI,CAAC,CAAC;IAC/C,OAAO,EAAE,SAAS,GAAG,eAAe,GAAG,YAAY,GAAG,uBAAuB,GAAG,MAAM,CAAC;IACvF,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAQD,wBAAgB,mBAAmB,CAAC,EAClC,KAAK,EACL,OAAO,EACP,UAAU,EACV,UAAU,EACV,UAAU,EACV,QAAa,EACb,SAAS,EACT,SAAS,EACT,aAAa,EACb,gBAAgB,GACjB,EAAE,wBAAwB,eAgS1B"}
+{"version":3,"file":"parts.d.ts","sourceRoot":"","sources":["../../../src/side-navigation/parts.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAuE,MAAM,OAAO,CAAC;AAiB5F,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAOnD,UAAU,sBAAsB;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,CAAC,IAAI,EAAE,mBAAmB,CAAC,OAAO,GAAG,mBAAmB,CAAC,mBAAmB,EAAE,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACrH,UAAU,EAAE,CACV,IAAI,EACA,mBAAmB,CAAC,IAAI,GACxB,mBAAmB,CAAC,MAAM,GAC1B,mBAAmB,CAAC,SAAS,GAC7B,mBAAmB,CAAC,mBAAmB,EAC3C,KAAK,EAAE,KAAK,CAAC,cAAc,GAAG,KAAK,KAChC,IAAI,CAAC;IACV,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CACtD;AAED,UAAU,WAAY,SAAQ,sBAAsB;IAClD,UAAU,EAAE,mBAAmB,CAAC,MAAM,CAAC;CACxC;AAED,wBAAgB,MAAM,CAAC,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,EAAE,WAAW,eA2DpF;AAED,UAAU,wBAAyB,SAAQ,sBAAsB;IAC/D,KAAK,EAAE,aAAa,CAAC,mBAAmB,CAAC,IAAI,CAAC,CAAC;IAC/C,OAAO,EAAE,SAAS,GAAG,eAAe,GAAG,YAAY,GAAG,uBAAuB,GAAG,MAAM,CAAC;IACvF,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAQD,wBAAgB,mBAAmB,CAAC,EAClC,KAAK,EACL,OAAO,EACP,UAAU,EACV,UAAU,EACV,UAAU,EACV,QAAa,EACb,SAAS,EACT,SAAS,EACT,SAAS,EACT,aAAa,EACb,gBAAgB,GACjB,EAAE,wBAAwB,eAgP1B"}

package/lib/internal/template/side-navigation/parts.js

@@ -7,6 +7,7 @@ import InternalBox from '../box/internal';
 import InternalExpandableSection from '../expandable-section/internal';
 import { useInternalI18n } from '../i18n/context';
 import InternalIcon from '../icon/internal';
+import { Transition } from '../internal/components/transition';
 import { isPlainLeftClick } from '../internal/events';
 import { useOneTheme, useVisualRefresh } from '../internal/hooks/use-visual-mode';
 import { checkSafeUrl } from '../internal/utils/check-safe-url';
@@ -43,7 +44,7 @@ export function Header({ definition, activeHref, fireFollow, collapsed }) {
                 React.createElement("span", { className: clsx(styles['header-link-text'], analyticsSelectors['header-link-text']) }, definition.text)))),
         !collapsed && React.createElement(Divider, { isPresentational: true, variant: "header" })));
 }
-export function NavigationItemsList({ items, variant, activeHref, fireChange, fireFollow, position = '', collapsed, withIcons, activeTooltip, setActiveTooltip, }) {
+export function NavigationItemsList({ items, variant, activeHref, fireChange, fireFollow, position = '', collapsed, withIcons, ariaLabel, activeTooltip, setActiveTooltip, }) {
     const lists = [];
     let currentListIndex = 0;
     lists[currentListIndex] = {
@@ -58,7 +59,7 @@ export function NavigationItemsList({ items, variant, activeHref, fireChange, fi
         function pushDivider() {
             lists.push({
                 listVariant: variant,
-                element: (React.createElement("div", { "data-itemid": `item-${itemid}` },
+                element: (React.createElement("div", { "data-itemid": `item-${itemid}`, className: clsx(collapsed && styles['list-item--group']) },
                     React.createElement(Divider, { variant: "default", collapsed: collapsed }))),
             });
             currentListIndex =
@@ -67,49 +68,14 @@ export function NavigationItemsList({ items, variant, activeHref, fireChange, fi
                     items: [],
                 }) - 1;
         }
-        // Renders icon-bearing children of a container item as a collapsed group.
-        // The inner <ul> carries the group label so list semantics are preserved
-        // for screen readers even when the visual header is hidden.
-        function pushCollapsedGroup(children, label, { leadingDivider = false } = {}) {
-            var _a;
-            const iconChildren = children.filter(child => child.icon);
-            if (iconChildren.length === 0) {
-                return;
-            }
-            // A section's title is hidden when collapsed; render a divider in its place
-            if (leadingDivider) {
-                pushDivider();
-            }
-            const groupElements = iconChildren.map((child, childIndex) => {
-                const childPosition = `${position ? `${position},` : ''}${itemid},${childIndex + 1}`;
-                return (React.createElement("li", { key: childPosition, className: clsx(styles['list-item'], styles['list-item--collapsed']) },
-                    React.createElement(Link, { definition: child, activeHref: activeHref, fireFollow: fireFollow, fireChange: fireChange, position: childPosition, collapsed: collapsed, activeTooltip: activeTooltip, setActiveTooltip: setActiveTooltip })));
-            });
-            const prevItem = index > 0 ? items[index - 1] : null;
-            const nextItem = index < items.length - 1 ? items[index + 1] : null;
-            (_a = lists[currentListIndex].items) === null || _a === void 0 ? void 0 : _a.push({
-                element: (React.createElement("li", { key: `group-${itemid}`, className: clsx(styles['list-item--group'], (leadingDivider || (prevItem === null || prevItem === void 0 ? void 0 : prevItem.type) === 'divider') && styles['list-item--group-no-padding-start'], (nextItem === null || nextItem === void 0 ? void 0 : nextItem.type) === 'divider' && styles['list-item--group-no-padding-end']) },
-                    React.createElement("ul", { className: styles['list--collapsed-group'], "aria-label": label }, groupElements))),
-            });
-        }
-        // In collapsed mode, flatten container items to show only icon-bearing children.
-        if (collapsed && (item.type === 'expandable-link-group' || item.type === 'link-group') && !item.icon) {
-            const group = item;
-            pushCollapsedGroup(group.items, group.text);
-            return;
-        }
-        if (collapsed && (item.type === 'section' || item.type === 'section-group')) {
-            const sectionLabel = item.type === 'section'
-                ? item.text
-                : item.title;
-            // Section-groups may contain nested sections — flatten one level.
-            const childItems = item.type === 'section'
-                ? item.items
-                : item.items.flatMap(child => child.type === 'section' ? child.items : [child]);
-            pushCollapsedGroup(childItems, sectionLabel, { leadingDivider: true });
-            return;
-        }
-        if (collapsed && item.type !== 'divider' && !item.icon) {
+        // In collapsed mode, hide plain links without icons (they have no visual representation).
+        // Exception: link-group / expandable-link-group children must stay rendered so
+        // the grid-template-rows collapse animation has content to transition.
+        if (collapsed &&
+            item.type === 'link' &&
+            !item.icon &&
+            variant !== 'link-group' &&
+            variant !== 'expandable-link-group') {
             return;
         }
         switch (item.type) {
@@ -126,28 +92,28 @@ export function NavigationItemsList({ items, variant, activeHref, fireChange, fi
             }
             case 'section': {
                 (_b = lists[currentListIndex].items) === null || _b === void 0 ? void 0 : _b.push({
-                    element: (React.createElement("li", { key: index, "data-itemid": `item-${itemid}`, className: clsx(styles['list-item'], collapsed && styles['list-item--collapsed']) },
+                    element: (React.createElement("li", { key: index, "data-itemid": `item-${itemid}`, className: clsx(styles['list-item'], collapsed && styles['list-item--collapsed'], collapsed && styles['list-item--group']) },
                         React.createElement(Section, { definition: item, activeHref: activeHref, variant: variant, fireChange: fireChange, fireFollow: fireFollow, position: itemPosition, collapsed: collapsed, withIcons: withIcons, activeTooltip: activeTooltip, setActiveTooltip: setActiveTooltip }))),
                 });
                 return;
             }
             case 'section-group': {
                 (_c = lists[currentListIndex].items) === null || _c === void 0 ? void 0 : _c.push({
-                    element: (React.createElement("li", { key: index, "data-itemid": `item-${itemid}`, className: clsx(styles['list-item'], collapsed && styles['list-item--collapsed']) },
+                    element: (React.createElement("li", { key: index, "data-itemid": `item-${itemid}`, className: clsx(styles['list-item'], collapsed && styles['list-item--collapsed'], collapsed && styles['list-item--group']) },
                         React.createElement(SectionGroup, { definition: item, activeHref: activeHref, fireChange: fireChange, fireFollow: fireFollow, position: itemPosition, collapsed: collapsed, withIcons: withIcons, activeTooltip: activeTooltip, setActiveTooltip: setActiveTooltip }))),
                 });
                 return;
             }
             case 'link-group': {
                 (_d = lists[currentListIndex].items) === null || _d === void 0 ? void 0 : _d.push({
-                    element: (React.createElement("li", { key: index, "data-itemid": `item-${itemid}`, className: clsx(styles['list-item'], collapsed && styles['list-item--collapsed']) },
+                    element: (React.createElement("li", { key: index, "data-itemid": `item-${itemid}`, className: clsx(styles['list-item'], collapsed && styles['list-item--collapsed'], collapsed && styles['list-item--group']) },
                         React.createElement(LinkGroup, { definition: item, activeHref: activeHref, fireChange: fireChange, fireFollow: fireFollow, position: itemPosition, collapsed: collapsed, withIcons: withIcons, activeTooltip: activeTooltip, setActiveTooltip: setActiveTooltip }))),
                 });
                 return;
             }
             case 'expandable-link-group': {
                 (_e = lists[currentListIndex].items) === null || _e === void 0 ? void 0 : _e.push({
-                    element: (React.createElement("li", { key: index, "data-itemid": `item-${itemid}`, className: clsx(styles['list-item'], collapsed && styles['list-item--collapsed']) },
+                    element: (React.createElement("li", { key: index, "data-itemid": `item-${itemid}`, className: clsx(styles['list-item'], collapsed && styles['list-item--collapsed'], collapsed && styles['list-item--group']) },
                         React.createElement(ExpandableLinkGroup, { definition: item, activeHref: activeHref, fireChange: fireChange, fireFollow: fireFollow, variant: variant, position: itemPosition, collapsed: collapsed, withIcons: withIcons, activeTooltip: activeTooltip, setActiveTooltip: setActiveTooltip }))),
                 });
                 return;
@@ -175,16 +141,16 @@ export function NavigationItemsList({ items, variant, activeHref, fireChange, fi
         if (!list.items || list.items.length === 0) {
             return (React.createElement("div", { key: `hr-${index}`, className: clsx(styles.list, styles[`list-variant-${variant}`], {
                     [styles['list-variant-root--first']]: list.listVariant === 'root' && index === 0,
-                    [styles['list-variant-root--collapsed']]: list.listVariant === 'root' && collapsed,
+                    [styles[`list-variant-${list.listVariant}--collapsed`]]: collapsed,
                     [styles['list--with-icons']]: withIcons,
                 }) }, list.element));
         }
         else {
             return (React.createElement("ul", { key: `list-${index}`, className: clsx(styles.list, styles[`list-variant-${list.listVariant}`], {
                     [styles['list-variant-root--first']]: list.listVariant === 'root' && index === 0,
-                    [styles['list-variant-root--collapsed']]: list.listVariant === 'root' && collapsed,
+                    [styles[`list-variant-${list.listVariant}--collapsed`]]: collapsed,
                     [styles['list--with-icons']]: withIcons,
-                }) }, list.items.map(item => item.element)));
+                }), "aria-label": ariaLabel }, list.items.map(item => item.element)));
         }
     })));
 }
@@ -224,12 +190,28 @@ function Link({ definition, activeHref, fireFollow, position, collapsed, activeT
     checkSafeUrl('SideNavigation', definition.href);
     const isActive = definition.href === activeHref;
     const i18n = useInternalI18n('link');
+    const linkRef = useRef(null);
     const collapsedTooltip = useCollapsedTooltip({
         label: definition.text,
         position,
         activeTooltip,
         setActiveTooltip,
     });
+    // Make icon-less collapsed links inert (they collapse to 0×0 and must
+    // not be focusable or visible to assistive technology).
+    const isIconLess = !definition.icon;
+    useEffect(() => {
+        if (linkRef.current) {
+            linkRef.current.inert = !!(collapsed && isIconLess);
+        }
+    }, [collapsed, isIconLess]);
+    // Merge linkRef with collapsedTooltip.triggerRef so both can track the <a>.
+    const mergedRef = useCallback((node) => {
+        linkRef.current = node;
+        if (collapsed) {
+            collapsedTooltip.triggerRef.current = node;
+        }
+    }, [collapsed, collapsedTooltip.triggerRef]);
     const onClick = useCallback((event) => {
         if (isPlainLeftClick(event)) {
             fireFollow(definition, event);
@@ -246,24 +228,26 @@ function Link({ definition, activeHref, fireFollow, position, collapsed, activeT
     };
     const renderedExternalIconAriaLabel = i18n('externalIconAriaLabel', definition.externalIconAriaLabel);
     const showInfo = !collapsed && definition.info;
-    const internalLink = (React.createElement("a", { ref: collapsed ? collapsedTooltip.triggerRef : undefined, href: definition.href, className: clsx(styles.link, {
+    const internalLink = (React.createElement("a", { ref: mergedRef, href: definition.href, className: clsx(styles.link, {
             [styles['link-active']]: isActive,
             [styles['link--collapsed']]: collapsed,
         }), target: definition.external ? '_blank' : undefined, rel: definition.external ? 'noopener noreferrer' : undefined, "aria-current": definition.href === activeHref ? 'page' : undefined, "aria-label": collapsed ? definition.text : undefined, onClick: onClick, ...(collapsed ? collapsedTooltip.triggerProps : {}), ...getAnalyticsMetadataAttribute(clickActionAnalyticsMetadata) },
         React.createElement(ItemIcon, { icon: definition.icon, collapsed: collapsed, "aria-hidden": collapsed ? true : undefined }),
-        !collapsed && (React.createElement("span", { className: styles['link-text-wrapper'] },
-            React.createElement("span", { className: analyticsSelectors['link-text'] }, definition.text),
-            definition.external && (React.createElement("span", { "aria-label": renderedExternalIconAriaLabel, role: renderedExternalIconAriaLabel ? 'img' : undefined },
-                React.createElement(InternalIcon, { name: "external", className: styles['external-icon'] }))))),
+        React.createElement("span", { className: clsx(styles['link-text-wrapper'], collapsed && styles['link-text-wrapper--collapsed']), "aria-hidden": collapsed ? true : undefined },
+            React.createElement("span", { className: clsx(styles['link-text-wrapper-content']) },
+                React.createElement("span", { className: analyticsSelectors['link-text'] }, definition.text),
+                definition.external && (React.createElement("span", { "aria-label": renderedExternalIconAriaLabel, role: renderedExternalIconAriaLabel ? 'img' : undefined },
+                    React.createElement(InternalIcon, { name: "external", className: styles['external-icon'] }))))),
         collapsed && collapsedTooltip.tooltip));
     return showInfo ? (React.createElement("div", { className: styles['list-item--link-with-info'] },
         internalLink,
         React.createElement("span", { className: clsx(styles.info, testUtilStyles.info) }, definition.info))) : (internalLink);
 }
-function Section({ definition, activeHref, fireFollow, fireChange, variant, position, collapsed, withIcons, }) {
+function Section({ definition, activeHref, fireFollow, fireChange, variant, position, collapsed, withIcons, activeTooltip, setActiveTooltip, }) {
     var _a;
     const [expanded, setExpanded] = useState((_a = definition.defaultExpanded) !== null && _a !== void 0 ? _a : true);
     const isVisualRefresh = useVisualRefresh();
+    const sectionRef = useRef(null);
     const onExpandedChange = useCallback((e) => {
         fireChange(definition, e.detail.expanded);
         setExpanded(e.detail.expanded);
@@ -272,24 +256,48 @@ function Section({ definition, activeHref, fireFollow, fireChange, variant, posi
         var _a;
         setExpanded((_a = definition.defaultExpanded) !== null && _a !== void 0 ? _a : true);
     }, [definition]);
-    if (collapsed) {
-        return null;
-    }
+    // Sections are transparent in the collapsed rail — only the header is made inert
+    // so child links remain focusable. The header hosts the expand toggle that must
+    // leave the tab order when collapsed.
+    useEffect(() => {
+        const el = sectionRef.current;
+        if (el) {
+            el.inert = false;
+            const header = el.firstElementChild;
+            if (header) {
+                header.inert = !!collapsed;
+            }
+        }
+    }, [collapsed]);
     const isInSectionGroup = variant === 'section-group';
-    return (React.createElement(InternalExpandableSection, { variant: "footer", expanded: expanded, onChange: onExpandedChange, disableContentPaddings: true, className: clsx(styles.section, isInSectionGroup && styles['section--no-ident'], withIcons && styles['section--expand-icon-end'], isVisualRefresh && styles.refresh), headerText: React.createElement("span", { className: styles['section-header'] }, definition.text), __expandIconPosition: withIcons ? 'end' : 'start' },
-        React.createElement(NavigationItemsList, { variant: "section", items: definition.items, fireFollow: fireFollow, fireChange: fireChange, activeHref: activeHref, position: position, withIcons: withIcons })));
+    return (React.createElement(InternalExpandableSection, { variant: "footer", expanded: collapsed ? true : expanded, onChange: onExpandedChange, disableContentPaddings: true, __internalRootRef: sectionRef, className: clsx(styles.section, isInSectionGroup && styles['section--no-ident'], withIcons && styles['section--expand-icon-end'], isVisualRefresh && styles.refresh, collapsed && styles['section--collapsed']), headerText: React.createElement("span", { className: clsx(styles['section-header'], styles['label-text'], collapsed && styles['label-text--collapsed']), "aria-hidden": collapsed ? true : undefined }, definition.text), __expandIconPosition: withIcons ? 'end' : 'start' },
+        React.createElement(NavigationItemsList, { variant: "section", items: definition.items, fireFollow: fireFollow, fireChange: fireChange, activeHref: activeHref, position: position, collapsed: collapsed, withIcons: withIcons, ariaLabel: collapsed ? definition.text : undefined, activeTooltip: activeTooltip, setActiveTooltip: setActiveTooltip })));
 }
-function SectionGroup({ definition, activeHref, fireFollow, fireChange, position, collapsed, withIcons, }) {
+function SectionGroup({ definition, activeHref, fireFollow, fireChange, position, collapsed, withIcons, activeTooltip, setActiveTooltip, }) {
     const isOneTheme = useOneTheme();
-    if (collapsed) {
-        return null;
-    }
-    return (React.createElement("div", { className: styles['section-group'] },
-        React.createElement(InternalBox, { className: styles['section-group-title'], variant: "h3", fontSize: isOneTheme ? 'heading-s' : undefined }, definition.title),
-        React.createElement(NavigationItemsList, { variant: "section-group", items: definition.items, fireFollow: fireFollow, fireChange: fireChange, activeHref: activeHref, position: position, withIcons: withIcons })));
+    const sectionGroupRef = useRef(null);
+    // Section-groups are transparent — children are always promoted in the collapsed rail.
+    useEffect(() => {
+        if (sectionGroupRef.current) {
+            sectionGroupRef.current.inert = false;
+        }
+    }, [collapsed]);
+    return (React.createElement("div", { ref: sectionGroupRef, className: styles['section-group'] },
+        React.createElement(InternalBox, { className: clsx(styles['section-group-title'], collapsed && styles['section-group-title--collapsed']), variant: "h3", fontSize: isOneTheme ? 'heading-s' : undefined },
+            React.createElement("span", { className: clsx(styles['label-text'], collapsed && styles['label-text--collapsed']), "aria-hidden": collapsed ? true : undefined }, definition.title)),
+        React.createElement(NavigationItemsList, { variant: "section-group", items: definition.items, fireFollow: fireFollow, fireChange: fireChange, activeHref: activeHref, position: position, collapsed: collapsed, withIcons: withIcons, ariaLabel: collapsed ? definition.title : undefined, activeTooltip: activeTooltip, setActiveTooltip: setActiveTooltip })));
 }
 function LinkGroup({ definition, activeHref, fireFollow, fireChange, position, collapsed, withIcons, activeTooltip, setActiveTooltip, }) {
     checkSafeUrl('SideNavigation', definition.href);
+    const childrenRef = useRef(null);
+    const isOneTheme = useOneTheme();
+    // Set inert on the children container when collapsed so they leave
+    // the tab order and assistive technology.
+    useEffect(() => {
+        if (childrenRef.current) {
+            childrenRef.current.inert = !!collapsed;
+        }
+    }, [collapsed]);
     return (React.createElement(React.Fragment, null,
         React.createElement(Link, { definition: {
                 type: 'link',
@@ -298,7 +306,12 @@ function LinkGroup({ definition, activeHref, fireFollow, fireChange, position, c
                 info: definition.info,
                 icon: definition.icon,
             }, fireFollow: (_, event) => fireFollow(definition, event), fireChange: fireChange, activeHref: activeHref, position: position, collapsed: collapsed, activeTooltip: activeTooltip, setActiveTooltip: setActiveTooltip }),
-        !collapsed && (React.createElement(NavigationItemsList, { variant: "link-group", items: definition.items, fireFollow: fireFollow, fireChange: fireChange, activeHref: activeHref, position: position, withIcons: withIcons }))));
+        React.createElement(Transition, { in: !collapsed, disabled: !isOneTheme }, (transitionState, transitionEventsRef, motionDisabled) => {
+            const childrenSettled = !collapsed && (motionDisabled || transitionState === 'entered');
+            return (React.createElement("div", { ref: transitionEventsRef, className: clsx(styles['link-group-children'], collapsed && styles['link-group-children--collapsed']) },
+                React.createElement("div", { ref: childrenRef, className: clsx(styles['link-group-children-inner'], !collapsed && styles['link-group-children-inner--expanded'], childrenSettled && styles['link-group-children-inner--settled']) },
+                    React.createElement(NavigationItemsList, { variant: "link-group", items: definition.items, fireFollow: fireFollow, fireChange: fireChange, activeHref: activeHref, position: position, collapsed: collapsed, withIcons: withIcons, ariaLabel: collapsed ? definition.text : undefined, activeTooltip: activeTooltip, setActiveTooltip: setActiveTooltip }))));
+        })));
 }
 function ExpandableLinkGroup({ definition, fireFollow, fireChange, activeHref, variant, position, collapsed, withIcons, activeTooltip, setActiveTooltip, }) {
     // Check whether the definition contains an active link and memoize it to avoid
@@ -334,10 +347,7 @@ function ExpandableLinkGroup({ definition, fireFollow, fireChange, activeHref, v
             fireChange(definition, true);
         }
     };
-    if (collapsed) {
-        return (React.createElement(Link, { definition: { type: 'link', href: definition.href, text: definition.text, icon: definition.icon }, fireFollow: onHeaderFollow, fireChange: fireChange, activeHref: activeHref, position: position, collapsed: collapsed, activeTooltip: activeTooltip, setActiveTooltip: setActiveTooltip }));
-    }
-    return (React.createElement(InternalExpandableSection, { className: clsx(styles['expandable-link-group'], variant === 'section-group' && styles['expandable-link-group--no-ident'], withIcons && styles['expandable-link-group--expand-icon-end'], definition.href === activeHref && styles['expandable-link-group--active']), variant: "navigation", expanded: userExpanded !== null && userExpanded !== void 0 ? userExpanded : expanded, onChange: onExpandedChange, disableContentPaddings: true, __disableHeaderPaddings: true, __expandIconPosition: withIcons ? 'end' : 'start', headerText: React.createElement(Link, { definition: { type: 'link', href: definition.href, text: definition.text, icon: definition.icon }, fireFollow: onHeaderFollow, fireChange: fireChange, activeHref: activeHref, position: position }) },
-        React.createElement(NavigationItemsList, { variant: "expandable-link-group", items: definition.items, fireFollow: fireFollow, fireChange: fireChange, activeHref: activeHref, position: position, withIcons: withIcons })));
+    return (React.createElement(InternalExpandableSection, { className: clsx(styles['expandable-link-group'], variant === 'section-group' && styles['expandable-link-group--no-ident'], withIcons && styles['expandable-link-group--expand-icon-end'], definition.href === activeHref && styles['expandable-link-group--active'], collapsed && styles['expandable-link-group--collapsed']), variant: "navigation", expanded: collapsed ? false : (userExpanded !== null && userExpanded !== void 0 ? userExpanded : expanded), onChange: onExpandedChange, disableContentPaddings: true, __disableHeaderPaddings: true, __expandIconPosition: withIcons ? 'end' : 'start', __hideExpandIcon: !!collapsed, headerText: React.createElement(Link, { definition: { type: 'link', href: definition.href, text: definition.text, icon: definition.icon }, fireFollow: onHeaderFollow, fireChange: fireChange, activeHref: activeHref, position: position, collapsed: collapsed, activeTooltip: activeTooltip, setActiveTooltip: setActiveTooltip }) },
+        React.createElement(NavigationItemsList, { variant: "expandable-link-group", items: definition.items, fireFollow: fireFollow, fireChange: fireChange, activeHref: activeHref, position: position, collapsed: collapsed, withIcons: withIcons, activeTooltip: activeTooltip, setActiveTooltip: setActiveTooltip })));
 }
 //# sourceMappingURL=parts.js.map