@genesislcap/foundation-ui 14.336.0 → 14.336.2-alpha-7eb86ca.0

package/dist/dts/base-components.d.ts

@@ -324,6 +324,17 @@ export declare const baseComponents: {
     foundationTreeItem: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").TreeItemOptions>) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").TreeItemOptions, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;
     foundationTreeView: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition>) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof import("./tree-view").TreeView>;
     foundationUrlInput: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition>) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof import("./url-input").UrlInput>;
+    foundationSectionNavigator: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{
+        baseName: string;
+        template: import("@microsoft/fast-element").ViewTemplate<import("./section-navigator").SectionNavigator, any>;
+        styles: import("@microsoft/fast-element").ElementStyles;
+        shadowOptions: ShadowRootInit;
+    }>) => import("@microsoft/fast-foundation").FoundationElementRegistry<{
+        baseName: string;
+        template: import("@microsoft/fast-element").ViewTemplate<import("./section-navigator").SectionNavigator, any>;
+        styles: import("@microsoft/fast-element").ElementStyles;
+        shadowOptions: ShadowRootInit;
+    }, typeof import("./section-navigator").SectionNavigator>;
     register(container?: Container, ...rest: any[]): void;
 };
 //# sourceMappingURL=base-components.d.ts.map

package/dist/dts/base-components.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"base-components.d.ts","sourceRoot":"","sources":["../../src/base-components.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAmF5D,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yBAmFJ,SAAS,WAAW,GAAG,EAAE;CAe/C,CAAC"}
+{"version":3,"file":"base-components.d.ts","sourceRoot":"","sources":["../../src/base-components.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAoF5D,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yBAoFJ,SAAS,WAAW,GAAG,EAAE;CAe/C,CAAC"}

package/dist/dts/index.d.ts

@@ -69,6 +69,7 @@ export * from './scheduler';
 export * from './scheduler-cron-builder';
 export * from './scheduler-timezone';
 export * from './search-bar';
+export * from './section-navigator';
 export * from './segmented-control';
 export * from './segmented-item';
 export * from './select';

package/dist/dts/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"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"}

package/dist/dts/section-navigator/index.d.ts

@@ -0,0 +1,4 @@
+export * from './section-navigator';
+export * from './section-navigator.styles';
+export * from './section-navigator.template';
+//# sourceMappingURL=index.d.ts.map

package/dist/dts/section-navigator/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/section-navigator/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,8BAA8B,CAAC"}

package/dist/dts/section-navigator/section-navigator.d.ts

@@ -0,0 +1,120 @@
+import { FoundationElement } from '@microsoft/fast-foundation';
+export type SectionItemStateName = 'active' | 'inactive' | 'pending' | 'disabled' | 'error' | 'completed';
+export type SectionItemStateIcon = {
+    name: string;
+    variant: 'solid' | 'regular' | 'light' | 'thin';
+};
+export type SectionItemState = {
+    name: SectionItemStateName;
+    tooltip?: string;
+};
+export interface SectionItem {
+    name: string;
+    label: string;
+    states: SectionItemStateName[];
+}
+export interface SetStateEventDetail {
+    sectionName: string;
+    stateName: SectionItemStateName;
+}
+export interface SetStatesEventDetail {
+    sectionName: string;
+    stateNames: SectionItemStateName[];
+}
+export interface ClearStateEventDetail {
+    sectionName: string;
+    stateName: SectionItemStateName;
+}
+export interface ClearAllStatesEventDetail {
+    sectionName?: string;
+}
+/**
+ * Section Navigator Component
+ *
+ * A component that provides navigation between different sections with support for state management.
+ * Each section can have multiple states that are displayed as icons next to the section label.
+ *
+ * @tagname %%prefix%%-section-navigator
+ *
+ * @attr sections - Array of section items to display
+ * @attr scroll-behavior - Scroll behavior: 'view' or 'top' (default: 'top')
+ * @attr state-tooltips - Custom tooltips for state icons
+ * @attr state-icons - Custom icons for state types
+ *
+ * @listens set-state - Adds a single state to a section
+ *   Detail: { sectionName: string, stateName: SectionItemStateName }
+ *
+ * @listens set-states - Adds multiple states to a section
+ *   Detail: { sectionName: string, stateNames: SectionItemStateName[] }
+ *
+ * @listens clear-state - Removes a specific state from a section
+ *   Detail: { sectionName: string, stateName: SectionItemStateName }
+ *
+ * @listens clear-all-states - Clears all states from a section or all sections
+ *   Detail: { sectionName?: string } - If sectionName not provided, clears all sections
+ *
+ * @slot {sectionName} - Content for each section (slot name matches section name)
+ *
+ * @example
+ * ```html
+ * <foundation-section-navigator .sections=${sections}>
+ *   <div slot="section1">Section 1 content</div>
+ *   <div slot="section2">Section 2 content</div>
+ * </foundation-section-navigator>
+ * ```
+ */
+export declare class SectionNavigator extends FoundationElement {
+    sections: SectionItem[];
+    scrollBehavior: 'view' | 'top';
+    stateTooltips: Record<SectionItemStateName, string>;
+    stateIcons: Record<SectionItemStateName, SectionItemStateIcon>;
+    private handleSetStateRef?;
+    private handleSetStatesRef?;
+    private handleClearStateRef?;
+    private handleClearAllStatesRef?;
+    sectionsChanged(): void;
+    scrollBehaviorChanged(): void;
+    sectionItems: SectionItem[];
+    activeSection: string;
+    sectionNavigatorContainer: HTMLElement;
+    sectionContent: HTMLElement;
+    spacerElement: HTMLElement;
+    connectedCallback(): void;
+    private setSectionItems;
+    private setActiveSection;
+    handleSectionClick(sectionName: string): void;
+    private updateSpacer;
+    private scrollToSection;
+    private setupStateEventListeners;
+    private updateSectionStates;
+    private addState;
+    private addStates;
+    private clearState;
+    private clearAllStates;
+    private clearAllStatesInAllSections;
+    getStateTooltip(stateName: SectionItemStateName): string;
+    getSectionStateClass(section: SectionItem): string;
+    getStateIcon(stateName: SectionItemStateName): SectionItemStateIcon;
+    disconnectedCallback(): void;
+}
+export declare const foundationSectionNavigatorShadowOptions: ShadowRootInit;
+export declare const defaultSectionNavigatorConfig: {};
+/**
+ * The Foundation SectionNavigator
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<foundation-section-navigator\>
+ */
+export declare const foundationSectionNavigator: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{
+    baseName: string;
+    template: import("@microsoft/fast-element").ViewTemplate<SectionNavigator, any>;
+    styles: import("@microsoft/fast-element").ElementStyles;
+    shadowOptions: ShadowRootInit;
+}>) => import("@microsoft/fast-foundation").FoundationElementRegistry<{
+    baseName: string;
+    template: import("@microsoft/fast-element").ViewTemplate<SectionNavigator, any>;
+    styles: import("@microsoft/fast-element").ElementStyles;
+    shadowOptions: ShadowRootInit;
+}, typeof SectionNavigator>;
+//# sourceMappingURL=section-navigator.d.ts.map

package/dist/dts/section-navigator/section-navigator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"section-navigator.d.ts","sourceRoot":"","sources":["../../../src/section-navigator/section-navigator.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAI/D,MAAM,MAAM,oBAAoB,GAC5B,QAAQ,GACR,UAAU,GACV,SAAS,GACT,UAAU,GACV,OAAO,GACP,WAAW,CAAC;AAEhB,MAAM,MAAM,oBAAoB,GAAG;IACjC,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,OAAO,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;CACjD,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,IAAI,EAAE,oBAAoB,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,oBAAoB,EAAE,CAAC;CAChC;AAGD,MAAM,WAAW,mBAAmB;IAClC,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,oBAAoB,CAAC;CACjC;AAED,MAAM,WAAW,oBAAoB;IACnC,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,oBAAoB,EAAE,CAAC;CACpC;AAED,MAAM,WAAW,qBAAqB;IACpC,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,oBAAoB,CAAC;CACjC;AAED,MAAM,WAAW,yBAAyB;IACxC,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAsCD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,qBAAa,gBAAiB,SAAQ,iBAAiB;IAErD,QAAQ,EAAE,WAAW,EAAE,CAAM;IAG7B,cAAc,EAAE,MAAM,GAAG,KAAK,CAAS;IAGvC,aAAa,EAAE,MAAM,CAAC,oBAAoB,EAAE,MAAM,CAAC,CAAmC;IAGtF,UAAU,EAAE,MAAM,CAAC,oBAAoB,EAAE,oBAAoB,CAAC,CAAgC;IAG9F,OAAO,CAAC,iBAAiB,CAAC,CAAoD;IAC9E,OAAO,CAAC,kBAAkB,CAAC,CAAqD;IAChF,OAAO,CAAC,mBAAmB,CAAC,CAAsD;IAClF,OAAO,CAAC,uBAAuB,CAAC,CAA0D;IAE1F,eAAe;IAKf,qBAAqB;IAKrB,YAAY,EAAE,WAAW,EAAE,CAAM;IAGjC,aAAa,EAAE,MAAM,CAAM;IAE3B,yBAAyB,EAAG,WAAW,CAAC;IACxC,cAAc,EAAG,WAAW,CAAC;IAC7B,aAAa,EAAG,WAAW,CAAC;IAE5B,iBAAiB;IAQjB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,gBAAgB;IAMjB,kBAAkB,CAAC,WAAW,EAAE,MAAM;IAK7C,OAAO,CAAC,YAAY;IA4BpB,OAAO,CAAC,eAAe;IAgBvB,OAAO,CAAC,wBAAwB;IAiChC,OAAO,CAAC,mBAAmB;IAiB3B,OAAO,CAAC,QAAQ;IAQhB,OAAO,CAAC,SAAS;IAgBjB,OAAO,CAAC,UAAU;IAYlB,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,2BAA2B;IAQ5B,eAAe,CAAC,SAAS,EAAE,oBAAoB,GAAG,MAAM;IAIxD,oBAAoB,CAAC,OAAO,EAAE,WAAW,GAAG,MAAM;IAalD,YAAY,CAAC,SAAS,EAAE,oBAAoB,GAAG,oBAAoB;IAI1E,oBAAoB;CAgBrB;AAED,eAAO,MAAM,uCAAuC,EAAE,cAErD,CAAC;AAEF,eAAO,MAAM,6BAA6B,IAAK,CAAC;AAEhD;;;;;;GAMG;AACH,eAAO,MAAM,0BAA0B;;;;;;;;;;2BAMrC,CAAC"}

package/dist/dts/section-navigator/section-navigator.styles.d.ts

@@ -0,0 +1,3 @@
+import { ElementStyles } from '@microsoft/fast-element';
+export declare const foundationSectionNavigatorStyles: ElementStyles;
+//# sourceMappingURL=section-navigator.styles.d.ts.map

package/dist/dts/section-navigator/section-navigator.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"section-navigator.styles.d.ts","sourceRoot":"","sources":["../../../src/section-navigator/section-navigator.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAE7D,eAAO,MAAM,gCAAgC,EAAE,aAiL9C,CAAC"}

package/dist/dts/section-navigator/section-navigator.template.d.ts

@@ -0,0 +1,4 @@
+import type { ViewTemplate } from '@microsoft/fast-element';
+import type { SectionNavigator } from './section-navigator';
+export declare const foundationSectionNavigatorTemplate: ViewTemplate<SectionNavigator>;
+//# sourceMappingURL=section-navigator.template.d.ts.map

package/dist/dts/section-navigator/section-navigator.template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"section-navigator.template.d.ts","sourceRoot":"","sources":["../../../src/section-navigator/section-navigator.template.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAE5D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAE5D,eAAO,MAAM,kCAAkC,EAAE,YAAY,CAAC,gBAAgB,CAiD7E,CAAC"}

package/dist/esm/base-components.js

@@ -57,6 +57,7 @@ import { foundationScheduler } from './scheduler';
 import { foundationSchedulerCronBuilder } from './scheduler-cron-builder';
 import { foundationSchedulerTimezone } from './scheduler-timezone';
 import { foundationSearchBar, foundationSearchBarCombobox } from './search-bar';
+import { foundationSectionNavigator } from './section-navigator';
 import { foundationSegmentedControl } from './segmented-control';
 import { foundationSegmentedItem } from './segmented-item';
 import { foundationSelect } from './select';
@@ -163,6 +164,7 @@ export const baseComponents = {
     foundationTreeItem,
     foundationTreeView,
     foundationUrlInput,
+    foundationSectionNavigator,
     register(container, ...rest) {
         if (!container) {
             // preserve backward compatibility with code that loops through

package/dist/esm/index.js

@@ -69,6 +69,7 @@ export * from './scheduler';
 export * from './scheduler-cron-builder';
 export * from './scheduler-timezone';
 export * from './search-bar';
+export * from './section-navigator';
 export * from './segmented-control';
 export * from './segmented-item';
 export * from './select';

package/dist/esm/section-navigator/index.js

@@ -0,0 +1,3 @@
+export * from './section-navigator';
+export * from './section-navigator.styles';
+export * from './section-navigator.template';

package/dist/esm/section-navigator/section-navigator.js

@@ -0,0 +1,289 @@
+import { __decorate } from "tslib";
+import { attr, observable } from '@microsoft/fast-element';
+import { FoundationElement } from '@microsoft/fast-foundation';
+import { foundationSectionNavigatorStyles as styles } from './section-navigator.styles';
+import { foundationSectionNavigatorTemplate as template } from './section-navigator.template';
+const DEFAULT_SECTION_STATES_TOOLTIPS = {
+    active: 'Active',
+    inactive: 'Inactive',
+    pending: 'Pending',
+    disabled: 'Disabled',
+    error: 'Error',
+    completed: 'Completed',
+};
+const DEFAULT_SECTION_STATES_ICONS = {
+    active: {
+        name: 'circle-dot',
+        variant: 'solid',
+    },
+    inactive: {
+        name: 'times-circle',
+        variant: 'regular',
+    },
+    pending: {
+        name: 'clock',
+        variant: 'solid',
+    },
+    disabled: {
+        name: 'ban',
+        variant: 'solid',
+    },
+    error: {
+        name: 'times',
+        variant: 'solid',
+    },
+    completed: {
+        name: 'check',
+        variant: 'solid',
+    },
+};
+/**
+ * Section Navigator Component
+ *
+ * A component that provides navigation between different sections with support for state management.
+ * Each section can have multiple states that are displayed as icons next to the section label.
+ *
+ * @tagname %%prefix%%-section-navigator
+ *
+ * @attr sections - Array of section items to display
+ * @attr scroll-behavior - Scroll behavior: 'view' or 'top' (default: 'top')
+ * @attr state-tooltips - Custom tooltips for state icons
+ * @attr state-icons - Custom icons for state types
+ *
+ * @listens set-state - Adds a single state to a section
+ *   Detail: { sectionName: string, stateName: SectionItemStateName }
+ *
+ * @listens set-states - Adds multiple states to a section
+ *   Detail: { sectionName: string, stateNames: SectionItemStateName[] }
+ *
+ * @listens clear-state - Removes a specific state from a section
+ *   Detail: { sectionName: string, stateName: SectionItemStateName }
+ *
+ * @listens clear-all-states - Clears all states from a section or all sections
+ *   Detail: { sectionName?: string } - If sectionName not provided, clears all sections
+ *
+ * @slot {sectionName} - Content for each section (slot name matches section name)
+ *
+ * @example
+ * ```html
+ * <foundation-section-navigator .sections=${sections}>
+ *   <div slot="section1">Section 1 content</div>
+ *   <div slot="section2">Section 2 content</div>
+ * </foundation-section-navigator>
+ * ```
+ */
+export class SectionNavigator extends FoundationElement {
+    constructor() {
+        super(...arguments);
+        this.sections = [];
+        this.scrollBehavior = 'top';
+        this.stateTooltips = DEFAULT_SECTION_STATES_TOOLTIPS;
+        this.stateIcons = DEFAULT_SECTION_STATES_ICONS;
+        this.sectionItems = [];
+        this.activeSection = '';
+    }
+    sectionsChanged() {
+        this.setSectionItems();
+        this.setActiveSection();
+    }
+    scrollBehaviorChanged() {
+        this.updateSpacer();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.setSectionItems();
+        this.setActiveSection();
+        this.updateSpacer();
+        this.setupStateEventListeners();
+    }
+    setSectionItems() {
+        this.sectionItems = this.sections || [];
+    }
+    setActiveSection() {
+        if (this.sectionItems.length > 0 && !this.activeSection) {
+            this.activeSection = this.sectionItems[0].name;
+        }
+    }
+    handleSectionClick(sectionName) {
+        this.activeSection = sectionName;
+        this.scrollToSection(sectionName);
+    }
+    updateSpacer() {
+        if (!this.sectionContent)
+            return;
+        const existingSpacer = this.sectionContent.querySelector('.scroll-spacer');
+        if (existingSpacer) {
+            existingSpacer.remove();
+        }
+        if (this.scrollBehavior === 'top') {
+            const containerHeight = this.sectionContent.clientHeight;
+            const lastSection = this.sectionContent.querySelector('.content-section:last-child');
+            if (lastSection) {
+                const lastSectionHeight = lastSection.offsetHeight;
+                const spacerPadding = 20;
+                const spacerHeight = Math.max(0, containerHeight - lastSectionHeight - spacerPadding);
+                const spacer = document.createElement('div');
+                spacer.className = 'scroll-spacer';
+                spacer.style.height = `${spacerHeight}px`;
+                spacer.style.pointerEvents = 'none';
+                this.sectionContent.appendChild(spacer);
+            }
+        }
+    }
+    scrollToSection(sectionName) {
+        if (!this.sectionContent)
+            return;
+        const targetElement = this.sectionContent.querySelector(`[data-section="${sectionName}"]`);
+        if (targetElement) {
+            // Always use internal scrolling to prevent parent container from scrolling
+            const scrollTop = targetElement.offsetTop - this.sectionContent.offsetTop;
+            this.sectionContent.scrollTo({
+                top: scrollTop,
+                behavior: 'smooth',
+            });
+        }
+    }
+    setupStateEventListeners() {
+        // Create event handler references for proper cleanup
+        this.handleSetStateRef = (event) => {
+            const { sectionName, stateName } = event.detail;
+            this.addState(sectionName, stateName);
+        };
+        this.handleSetStatesRef = (event) => {
+            const { sectionName, stateNames } = event.detail;
+            this.addStates(sectionName, stateNames);
+        };
+        this.handleClearStateRef = (event) => {
+            const { sectionName, stateName } = event.detail;
+            this.clearState(sectionName, stateName);
+        };
+        this.handleClearAllStatesRef = (event) => {
+            const { sectionName } = event.detail;
+            if (sectionName) {
+                this.clearAllStates(sectionName);
+            }
+            else {
+                this.clearAllStatesInAllSections();
+            }
+        };
+        // Add event listeners with the stored references
+        this.addEventListener('set-state', this.handleSetStateRef);
+        this.addEventListener('set-states', this.handleSetStatesRef);
+        this.addEventListener('clear-state', this.handleClearStateRef);
+        this.addEventListener('clear-all-states', this.handleClearAllStatesRef);
+    }
+    updateSectionStates(sectionName, newStates) {
+        const sectionIndex = this.sectionItems.findIndex((item) => item.name === sectionName);
+        if (sectionIndex !== -1) {
+            // Create new section object with updated states
+            const updatedSection = Object.assign(Object.assign({}, this.sectionItems[sectionIndex]), { states: newStates });
+            // Replace the section in the array
+            this.sectionItems = [
+                ...this.sectionItems.slice(0, sectionIndex),
+                updatedSection,
+                ...this.sectionItems.slice(sectionIndex + 1),
+            ];
+        }
+    }
+    addState(sectionName, stateName) {
+        const sectionIndex = this.sectionItems.findIndex((item) => item.name === sectionName);
+        if (sectionIndex !== -1 && !this.sectionItems[sectionIndex].states.includes(stateName)) {
+            const newStates = [...this.sectionItems[sectionIndex].states, stateName];
+            this.updateSectionStates(sectionName, newStates);
+        }
+    }
+    addStates(sectionName, stateNames) {
+        const sectionIndex = this.sectionItems.findIndex((item) => item.name === sectionName);
+        if (sectionIndex !== -1) {
+            const currentStates = this.sectionItems[sectionIndex].states;
+            const newStates = [...currentStates];
+            stateNames.forEach((stateName) => {
+                if (!newStates.includes(stateName)) {
+                    newStates.push(stateName);
+                }
+            });
+            this.updateSectionStates(sectionName, newStates);
+        }
+    }
+    clearState(sectionName, stateName) {
+        const sectionIndex = this.sectionItems.findIndex((item) => item.name === sectionName);
+        if (sectionIndex !== -1) {
+            const currentStates = this.sectionItems[sectionIndex].states;
+            const stateIndex = currentStates.indexOf(stateName);
+            if (stateIndex > -1) {
+                const newStates = currentStates.filter((_, index) => index !== stateIndex);
+                this.updateSectionStates(sectionName, newStates);
+            }
+        }
+    }
+    clearAllStates(sectionName) {
+        this.updateSectionStates(sectionName, []);
+    }
+    clearAllStatesInAllSections() {
+        // Create new sectionItems array with all sections having empty states
+        this.sectionItems = this.sectionItems.map((section) => (Object.assign(Object.assign({}, section), { states: [] })));
+    }
+    getStateTooltip(stateName) {
+        return this.stateTooltips[stateName];
+    }
+    getSectionStateClass(section) {
+        if (section.states.length === 0) {
+            return 'state-none';
+        }
+        if (section.states.length > 1) {
+            return 'state-multiple';
+        }
+        const state = section.states[0];
+        return `state-${state}`;
+    }
+    getStateIcon(stateName) {
+        return this.stateIcons[stateName] || DEFAULT_SECTION_STATES_ICONS[stateName];
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        // Clean up event listeners using stored references
+        if (this.handleSetStateRef) {
+            this.removeEventListener('set-state', this.handleSetStateRef);
+        }
+        if (this.handleSetStatesRef) {
+            this.removeEventListener('set-states', this.handleSetStatesRef);
+        }
+        if (this.handleClearStateRef) {
+            this.removeEventListener('clear-state', this.handleClearStateRef);
+        }
+        if (this.handleClearAllStatesRef) {
+            this.removeEventListener('clear-all-states', this.handleClearAllStatesRef);
+        }
+    }
+}
+__decorate([
+    observable
+], SectionNavigator.prototype, "sections", void 0);
+__decorate([
+    attr({ attribute: 'scroll-behavior' })
+], SectionNavigator.prototype, "scrollBehavior", void 0);
+__decorate([
+    attr({ attribute: 'state-tooltips' })
+], SectionNavigator.prototype, "stateTooltips", void 0);
+__decorate([
+    attr({ attribute: 'state-icons' })
+], SectionNavigator.prototype, "stateIcons", void 0);
+__decorate([
+    observable
+], SectionNavigator.prototype, "sectionItems", void 0);
+__decorate([
+    observable
+], SectionNavigator.prototype, "activeSection", void 0);
+export const foundationSectionNavigatorShadowOptions = {
+    mode: 'open',
+};
+export const defaultSectionNavigatorConfig = {};
+/**
+ * The Foundation SectionNavigator
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<foundation-section-navigator\>
+ */
+export const foundationSectionNavigator = SectionNavigator.compose(Object.assign({ baseName: 'foundation-section-navigator', template,
+    styles, shadowOptions: foundationSectionNavigatorShadowOptions }, defaultSectionNavigatorConfig));