@momentum-design/components 0.80.3 → 0.80.5

package/dist/components/navitemlist/navitemlist.component.d.ts

@@ -0,0 +1,51 @@
+import type { CSSResult } from 'lit';
+import MenuBar from '../menubar/menubar.component';
+declare const NavItemList_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/MenuMixin").MenuMixinInterface> & typeof MenuBar;
+/**
+ * `mdc-navitemlist` is a container component used to group multiple mdc-navitem elements into a navigation list.
+ * It provides the structural foundation for organizing vertical nav items and
+ * ensures consistent behavior and layout within side navigation patterns.
+ *
+ * Note: mdc-navitemlist is typically used within the sidenavigation component.
+ * @tagname mdc-navitemlist
+ *
+ * @slot default - Slot for projecting one or more navigation items, optional section headers and dividers.
+ */
+declare class NavItemList extends NavItemList_base {
+    /**
+     * Determines whether the navItemList is expanded or not.
+     *
+     * @internal
+     */
+    showLabel?: boolean;
+    /**
+     * Aria-label attribute to be set for accessibility
+     */
+    ariaLabel: string | null;
+    /**
+     * @internal
+     */
+    private readonly sideNavigationContext;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(): void;
+    /**
+     * Handle the navItem active change event fired from the nested navItem.
+     * @internal
+     * @param event - Custom Event fired from the nested navItem.
+     */
+    private handleNestedNavItemActiveChange;
+    /**
+     * Matches new navItem with navId.
+     * @param NavItem - The new active navItem.
+     *
+     * @internal
+     */
+    private findNav;
+    /**
+     * Returns all nested, non-disabled mdc-navitem elements inside this component.
+     */
+    private get navItems();
+    static styles: Array<CSSResult>;
+}
+export default NavItemList;

package/dist/components/navitemlist/navitemlist.component.js

@@ -0,0 +1,92 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { property } from 'lit/decorators.js';
+import styles from './navitemlist.styles';
+import MenuBar from '../menubar/menubar.component';
+import { MenuMixin } from '../../utils/mixins/MenuMixin';
+import { ORIENTATION } from '../menubar/menubar.constants';
+import providerUtils from '../../utils/provider';
+import { TAG_NAME as NAVITEM_TAGNAME } from '../navitem/navitem.constants';
+import SideNavigation from '../sidenavigation/sidenavigation.component';
+/**
+ * `mdc-navitemlist` is a container component used to group multiple mdc-navitem elements into a navigation list.
+ * It provides the structural foundation for organizing vertical nav items and
+ * ensures consistent behavior and layout within side navigation patterns.
+ *
+ * Note: mdc-navitemlist is typically used within the sidenavigation component.
+ * @tagname mdc-navitemlist
+ *
+ * @slot default - Slot for projecting one or more navigation items, optional section headers and dividers.
+ */
+class NavItemList extends MenuMixin(MenuBar) {
+    constructor() {
+        super(...arguments);
+        /**
+         * Aria-label attribute to be set for accessibility
+         */
+        this.ariaLabel = null;
+        /**
+         * @internal
+         */
+        this.sideNavigationContext = providerUtils.consume({ host: this, context: SideNavigation.Context });
+        /**
+         * Handle the navItem active change event fired from the nested navItem.
+         * @internal
+         * @param event - Custom Event fired from the nested navItem.
+         */
+        this.handleNestedNavItemActiveChange = (event) => {
+            var _a;
+            const newNavItem = this.findNav(this.navItems || [], event.detail.navId);
+            if ((_a = this.sideNavigationContext) === null || _a === void 0 ? void 0 : _a.value) {
+                this.sideNavigationContext.value.setCurrentActiveNavItem(newNavItem);
+            }
+        };
+        /**
+         * Matches new navItem with navId.
+         * @param NavItem - The new active navItem.
+         *
+         * @internal
+         */
+        this.findNav = (navs, navId) => navs.find((nav) => nav.navId === navId);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.ariaOrientation = ORIENTATION.VERTICAL;
+        this.addEventListener('activechange', this.handleNestedNavItemActiveChange);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('activechange', this.handleNestedNavItemActiveChange);
+    }
+    updated() {
+        var _a;
+        const context = (_a = this.sideNavigationContext) === null || _a === void 0 ? void 0 : _a.value;
+        if (!context)
+            return;
+        const { expanded } = context;
+        this.showLabel = expanded;
+    }
+    /**
+     * Returns all nested, non-disabled mdc-navitem elements inside this component.
+     */
+    get navItems() {
+        return Array.from(this.querySelectorAll(`${NAVITEM_TAGNAME}:not([disabled])`));
+    }
+}
+NavItemList.styles = [...MenuBar.styles, ...styles];
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'show-label' }),
+    __metadata("design:type", Boolean)
+], NavItemList.prototype, "showLabel", void 0);
+__decorate([
+    property({ type: String, attribute: 'aria-label' }),
+    __metadata("design:type", Object)
+], NavItemList.prototype, "ariaLabel", void 0);
+export default NavItemList;

package/dist/components/navitemlist/navitemlist.constants.d.ts

@@ -0,0 +1,2 @@
+declare const TAG_NAME: "mdc-navitemlist";
+export { TAG_NAME };

package/dist/components/navitemlist/navitemlist.constants.js

@@ -0,0 +1,3 @@
+import utils from '../../utils/tag-name';
+const TAG_NAME = utils.constructTagName('navitemlist');
+export { TAG_NAME };

package/dist/components/navitemlist/navitemlist.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult[];
+export default _default;

package/dist/components/navitemlist/navitemlist.styles.js

@@ -0,0 +1,23 @@
+import { css } from 'lit';
+const styles = css `
+  :host {
+    gap: 0.25rem;
+  }
+
+  :host(:not([show-label])) ::slotted(mdc-text) {
+    display: none;
+  }
+
+  :host(:dir(ltr)) ::slotted(mdc-text) {
+    padding-left: 1.75rem;
+  }
+
+  :host(:dir(rtl)) ::slotted(mdc-text) {
+    padding-right: 1.75rem;
+  }
+
+  ::slotted(mdc-divider) {
+    margin: 0.75rem 0;
+  }
+`;
+export default [styles];

package/dist/components/sidenavigation/index.d.ts

@@ -0,0 +1,10 @@
+import SideNavigation from './sidenavigation.component';
+import '../text';
+import '../button';
+import '../divider';
+declare global {
+    interface HTMLElementTagNameMap {
+        ['mdc-sidenavigation']: SideNavigation;
+    }
+}
+export default SideNavigation;

package/dist/components/sidenavigation/index.js

@@ -0,0 +1,7 @@
+import SideNavigation from './sidenavigation.component';
+import { TAG_NAME } from './sidenavigation.constants';
+import '../text';
+import '../button';
+import '../divider';
+SideNavigation.register(TAG_NAME);
+export default SideNavigation;

package/dist/components/sidenavigation/sidenavigation.component.d.ts

@@ -0,0 +1,144 @@
+import { CSSResult } from 'lit';
+import { Provider } from '../../models';
+import SideNavigationContext from './sidenavigation.context';
+import type { SideNavigationVariant } from './sidenavigation.types';
+/**
+ * The `mdc-sidenavigation` component provides a vertically stacked navigation experience,
+ * typically used in layouts with persistent or collapsible sidebars.
+ *
+ * ## Features:
+ * - Supports four layout variants: `fixed-collapsed`, `fixed-expanded`, `flexible`, and `hidden`
+ * - Toggleable expand/collapse behavior
+ * - Displays brand logo and customer name
+ * - Serves as a context provider for descendant components - `mdc-navitemlist` and `mdc-navitem`
+ *
+ * ### Usage:
+ * In a sidenavigation, navitems can be used in the following ways:
+ *
+ * 1. **Simple navitem** – No submenu or interaction beyond selection.
+ *
+ * 2. **Navitem with submenu**:
+ *    - Provide an `id` on the `mdc-navitem`
+ *    - Set the `triggerId` on the corresponding `mdc-menupopover` to match the navitem's `id`
+ *    - Set `parent-nav-tooltip-text` with appropriate text that will display when a child menu item
+ *      inside the nested menupopover is active, conveying which submenu item is currently selected
+ *
+ * 3. **Actionable navitem (no submenu)**:
+ *    - Performs an action such as navigation or alert trigger
+ *    - Set `disable-aria-current="true"` to maintain visual active state without navigation behavior
+ *
+ * ### Recommendations:
+ * - Use `mdc-text` for section headers
+ * - Use `mdc-divider` with the attribute `variant="gradient"` for section dividers
+ * - For the brand logo, use an informative icon. Refer to `Momentum Informative Icons`
+ *
+ * #### Accessibility Notes:
+ * - Always provide meaningful `aria-label` attributes for both `mdc-navitem` and `mdc-navitemlist`
+ * to ensure screen reader support
+ * - Set `grabber-btn-aria-label` to provide accessible labels for the expand/collapse grabber button
+ *
+ * @dependency mdc-text
+ * @dependency mdc-button
+ * @dependency mdc-divider
+ *
+ * @event activechange - (React: onActiveChange) Dispatched when the active state of the navitem changes.
+ *
+ * @tagname mdc-sidenavigation
+ *
+ * @slot scrollable-section - Slot for the scrollable content area of the side navigation.
+ * @slot fixed-section - Slot for the fixed content area of the side navigation.
+ * @slot brand-logo - Slot for the brand logo (e.g., icon or img).
+ *
+ * @cssproperty --mdc-sidenavigation-expanded-width - width of the sideNavigation when expanded
+ * @cssproperty --mdc-sidenavigation-collapsed-width - width of the sideNavigation when collpased
+ */
+declare class SideNavigation extends Provider<SideNavigationContext> {
+    constructor();
+    connectedCallback(): void;
+    static get Context(): {
+        __context__: SideNavigationContext;
+    };
+    /**
+     * Four variants of the sideNavigation
+     * - **fixed-collapsed**: Shows icons without labels and has fixed width, 4.5rem.
+     * - **fixed-expanded**: Shows icons with labels and has fixed width, 15rem.
+     * - **flexible**: Toggles between collapsed/expanded states.
+     * - **hidden**: Removes the sidenavigation from the DOM.
+     * @default flexible
+     */
+    variant: SideNavigationVariant;
+    /**
+     * Name of the customer. This is displayed in the bottom section of the side-navigation component.
+     * @default ''
+     */
+    customerName: string;
+    /**
+     * Determines whether the sideNavigation is expanded or not.
+     *
+     * @internal
+     */
+    expanded?: boolean;
+    /**
+     * Provides an accessible label for the grabber button.
+     * This value is used to set the `aria-label` attribute for the button.
+     *
+     * @default ''
+     */
+    grabberBtnAriaLabel?: string;
+    /**
+     * Tooltip text shown on parent nav items when a child is active.
+     */
+    parentNavTooltipText?: string;
+    /**
+    * Toggles between true and false when it's variant is flexible.
+    * @default true
+    *
+    * @internal
+    */
+    private flexibleExpanded;
+    /**
+     * Direction of the arrow icon, if applicable.
+     * - **positive**
+     * - **negative**
+     *
+     * Note: Positive and Negative directions are defined based on Cartesian plane.
+     * @default 'negative'
+     *
+     * @internal
+     */
+    private arrowDirection;
+    protected updated(changedProperties: Map<string, any>): void;
+    /**
+     * Update all observing components of this
+     * provider to update the values
+     *
+     * Is called on every re-render, see Provider class
+     */
+    protected updateContext(): void;
+    /**
+     * Syncs `expanded` and `aria-expanded` based on `variant` and `flexibleExpanded`.
+     *
+     * @internal
+     */
+    private updateExpansionState;
+    /**
+     * Sets the variant attribute for the sideNavigation component.
+     * If the provided variant is not included in the variant,
+     * it defaults to the value specified in DEFAULTS.VARIANT.
+     *
+     * @param variant - The variant to set.
+     *
+     * @internal
+     */
+    private setVariant;
+    /**
+     * Toggles navigation state for the flexible variant.
+     * Updates `flexibleExpanded`, `ariaExpanded`, and `arrowDirection`.
+     *
+     * @internal
+     */
+    private toggleSideNavigation;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: Array<CSSResult>;
+}
+export default SideNavigation;

package/dist/components/sidenavigation/sidenavigation.component.js

@@ -0,0 +1,244 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { html, nothing } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import styles from './sidenavigation.styles';
+import { Component, Provider } from '../../models';
+import SideNavigationContext from './sidenavigation.context';
+import { DEFAULTS, VARIANTS } from './sidenavigation.constants';
+import { TYPE, VALID_TEXT_TAGS } from '../text/text.constants';
+import { DIRECTIONS, DIVIDER_VARIANT, DIVIDER_ORIENTATION } from '../divider/divider.constants';
+import { ROLE } from '../../utils/roles';
+/**
+ * The `mdc-sidenavigation` component provides a vertically stacked navigation experience,
+ * typically used in layouts with persistent or collapsible sidebars.
+ *
+ * ## Features:
+ * - Supports four layout variants: `fixed-collapsed`, `fixed-expanded`, `flexible`, and `hidden`
+ * - Toggleable expand/collapse behavior
+ * - Displays brand logo and customer name
+ * - Serves as a context provider for descendant components - `mdc-navitemlist` and `mdc-navitem`
+ *
+ * ### Usage:
+ * In a sidenavigation, navitems can be used in the following ways:
+ *
+ * 1. **Simple navitem** – No submenu or interaction beyond selection.
+ *
+ * 2. **Navitem with submenu**:
+ *    - Provide an `id` on the `mdc-navitem`
+ *    - Set the `triggerId` on the corresponding `mdc-menupopover` to match the navitem's `id`
+ *    - Set `parent-nav-tooltip-text` with appropriate text that will display when a child menu item
+ *      inside the nested menupopover is active, conveying which submenu item is currently selected
+ *
+ * 3. **Actionable navitem (no submenu)**:
+ *    - Performs an action such as navigation or alert trigger
+ *    - Set `disable-aria-current="true"` to maintain visual active state without navigation behavior
+ *
+ * ### Recommendations:
+ * - Use `mdc-text` for section headers
+ * - Use `mdc-divider` with the attribute `variant="gradient"` for section dividers
+ * - For the brand logo, use an informative icon. Refer to `Momentum Informative Icons`
+ *
+ * #### Accessibility Notes:
+ * - Always provide meaningful `aria-label` attributes for both `mdc-navitem` and `mdc-navitemlist`
+ * to ensure screen reader support
+ * - Set `grabber-btn-aria-label` to provide accessible labels for the expand/collapse grabber button
+ *
+ * @dependency mdc-text
+ * @dependency mdc-button
+ * @dependency mdc-divider
+ *
+ * @event activechange - (React: onActiveChange) Dispatched when the active state of the navitem changes.
+ *
+ * @tagname mdc-sidenavigation
+ *
+ * @slot scrollable-section - Slot for the scrollable content area of the side navigation.
+ * @slot fixed-section - Slot for the fixed content area of the side navigation.
+ * @slot brand-logo - Slot for the brand logo (e.g., icon or img).
+ *
+ * @cssproperty --mdc-sidenavigation-expanded-width - width of the sideNavigation when expanded
+ * @cssproperty --mdc-sidenavigation-collapsed-width - width of the sideNavigation when collpased
+ */
+class SideNavigation extends Provider {
+    constructor() {
+        super({
+            context: SideNavigationContext.context,
+            initialValue: new SideNavigationContext(DEFAULTS.VARIANT, true),
+        });
+        /**
+         * Four variants of the sideNavigation
+         * - **fixed-collapsed**: Shows icons without labels and has fixed width, 4.5rem.
+         * - **fixed-expanded**: Shows icons with labels and has fixed width, 15rem.
+         * - **flexible**: Toggles between collapsed/expanded states.
+         * - **hidden**: Removes the sidenavigation from the DOM.
+         * @default flexible
+         */
+        this.variant = DEFAULTS.VARIANT;
+        /**
+         * Name of the customer. This is displayed in the bottom section of the side-navigation component.
+         * @default ''
+         */
+        this.customerName = '';
+        /**
+        * Toggles between true and false when it's variant is flexible.
+        * @default true
+        *
+        * @internal
+        */
+        this.flexibleExpanded = this.variant === DEFAULTS.VARIANT;
+        /**
+         * Direction of the arrow icon, if applicable.
+         * - **positive**
+         * - **negative**
+         *
+         * Note: Positive and Negative directions are defined based on Cartesian plane.
+         * @default 'negative'
+         *
+         * @internal
+         */
+        this.arrowDirection = this.flexibleExpanded ? DIRECTIONS.NEGATIVE : DIRECTIONS.POSITIVE;
+        /**
+         * Syncs `expanded` and `aria-expanded` based on `variant` and `flexibleExpanded`.
+         *
+         * @internal
+         */
+        this.updateExpansionState = () => {
+            switch (this.variant) {
+                case VARIANTS.FLEXIBLE:
+                    this.expanded = this.flexibleExpanded;
+                    break;
+                case VARIANTS.FIXED_EXPANDED:
+                    this.expanded = true;
+                    break;
+                case VARIANTS.FIXED_COLLAPSED:
+                    this.expanded = false;
+                    break;
+                default:
+            }
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.role = ROLE.NAVIGATION;
+    }
+    static get Context() {
+        return SideNavigationContext.context;
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('variant')) {
+            this.setVariant(this.variant);
+            this.updateExpansionState();
+        }
+        if (changedProperties.has('variant') || changedProperties.has('expanded')) {
+            this.updateContext();
+        }
+    }
+    /**
+     * Update all observing components of this
+     * provider to update the values
+     *
+     * Is called on every re-render, see Provider class
+     */
+    updateContext() {
+        if (this.context.value.variant !== this.variant
+            || this.context.value.expanded !== this.expanded
+            || this.context.value.parentNavTooltipText !== this.parentNavTooltipText) {
+            this.context.value.variant = this.variant;
+            this.context.value.expanded = this.expanded;
+            this.context.value.parentNavTooltipText = this.parentNavTooltipText;
+            this.context.updateObservers();
+        }
+    }
+    /**
+     * Sets the variant attribute for the sideNavigation component.
+     * If the provided variant is not included in the variant,
+     * it defaults to the value specified in DEFAULTS.VARIANT.
+     *
+     * @param variant - The variant to set.
+     *
+     * @internal
+     */
+    setVariant(variant) {
+        this.setAttribute('variant', Object.values(VARIANTS).includes(variant) ? variant : DEFAULTS.VARIANT);
+    }
+    /**
+     * Toggles navigation state for the flexible variant.
+     * Updates `flexibleExpanded`, `ariaExpanded`, and `arrowDirection`.
+     *
+     * @internal
+     */
+    toggleSideNavigation() {
+        this.flexibleExpanded = !this.flexibleExpanded;
+        this.arrowDirection = this.arrowDirection === DIRECTIONS.NEGATIVE ? DIRECTIONS.POSITIVE : DIRECTIONS.NEGATIVE;
+        this.updateExpansionState();
+    }
+    render() {
+        var _a;
+        if (this.variant === VARIANTS.HIDDEN) {
+            return html ``;
+        }
+        return html `
+        <div part="side-navigation-container" id='side-nav-container'>
+          <div part="scrollable-section">
+            <slot name="scrollable-section"></slot>
+          </div>
+          <mdc-divider variant="gradient" part="separator"></mdc-divider>
+          <div part="fixed-section">
+              <slot name="fixed-section"></slot>
+              <div part="brand-logo-container">
+                <slot name="brand-logo"></slot>
+                ${this.expanded ? html `<mdc-text type=${TYPE.BODY_MIDSIZE_MEDIUM} tagname=${VALID_TEXT_TAGS.SPAN} 
+                part="label">${this.customerName}</mdc-text>` : nothing}
+              </div>
+          </div>
+        </div>
+        ${this.variant === VARIANTS.FLEXIBLE ? html `<mdc-divider
+            orientation=${DIVIDER_ORIENTATION.VERTICAL}
+            variant=${DIVIDER_VARIANT.GRADIENT}
+            arrow-direction=${this.arrowDirection}
+            button-position=${DIRECTIONS.POSITIVE}
+          > <mdc-button aria-label=${(_a = this.grabberBtnAriaLabel) !== null && _a !== void 0 ? _a : ''} @click=${this.toggleSideNavigation}   
+                        aria-expanded="${!!this.expanded}" aria-controls='side-nav-container' 
+                        part="grabber-btn"></mdc-button>
+        </mdc-divider>` : nothing}
+  `;
+    }
+}
+SideNavigation.styles = [...Component.styles, ...styles];
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], SideNavigation.prototype, "variant", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'customer-name' }),
+    __metadata("design:type", String)
+], SideNavigation.prototype, "customerName", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Boolean)
+], SideNavigation.prototype, "expanded", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'grabber-btn-aria-label' }),
+    __metadata("design:type", String)
+], SideNavigation.prototype, "grabberBtnAriaLabel", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'parent-nav-tooltip-text' }),
+    __metadata("design:type", String)
+], SideNavigation.prototype, "parentNavTooltipText", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], SideNavigation.prototype, "flexibleExpanded", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], SideNavigation.prototype, "arrowDirection", void 0);
+export default SideNavigation;

package/dist/components/sidenavigation/sidenavigation.constants.d.ts

@@ -0,0 +1,11 @@
+declare const TAG_NAME: "mdc-sidenavigation";
+declare const VARIANTS: {
+    FIXED_EXPANDED: string;
+    FIXED_COLLAPSED: string;
+    FLEXIBLE: string;
+    HIDDEN: string;
+};
+declare const DEFAULTS: {
+    readonly VARIANT: string;
+};
+export { DEFAULTS, VARIANTS, TAG_NAME };

package/dist/components/sidenavigation/sidenavigation.constants.js

@@ -0,0 +1,12 @@
+import utils from '../../utils/tag-name';
+const TAG_NAME = utils.constructTagName('sidenavigation');
+const VARIANTS = {
+    FIXED_EXPANDED: 'fixed-expanded',
+    FIXED_COLLAPSED: 'fixed-collapsed',
+    FLEXIBLE: 'flexible',
+    HIDDEN: 'hidden',
+};
+const DEFAULTS = {
+    VARIANT: VARIANTS.FLEXIBLE,
+};
+export { DEFAULTS, VARIANTS, TAG_NAME };

package/dist/components/sidenavigation/sidenavigation.context.d.ts

@@ -0,0 +1,15 @@
+import type NavItem from '../navitem/navitem.component';
+declare class SideNavigationContext {
+    variant?: string;
+    expanded?: boolean;
+    private currentActiveNavItem?;
+    parentNavTooltipText?: string;
+    static context: {
+        __context__: SideNavigationContext;
+    };
+    constructor(defaultVariant?: string, defaultExpanded?: boolean, defaultParentNavTooltipText?: string);
+    hasSiblingWithTriggerId(navItem: NavItem | undefined): boolean;
+    private getParentNavItems;
+    setCurrentActiveNavItem(navItem: NavItem | undefined): void;
+}
+export default SideNavigationContext;