@synergy-design-system/components 1.14.0 → 1.15.0

package/dist/components/prio-nav/prio-nav.component.d.ts

@@ -0,0 +1,110 @@
+import type { CSSResultGroup } from 'lit';
+import SynergyElement from '../../internal/synergy-element.js';
+import SynDropdown from '../dropdown/dropdown.component.js';
+import SynIcon from '../icon/icon.component.js';
+import SynMenu from '../menu/menu.component.js';
+import SynNavItem from '../nav-item/nav-item.component.js';
+/**
+ * @summary The `<syn-prio-nav />` element provides a generic navigation bar
+ * that can be used to group multiple navigation items  (usually horizontal `<syn-nav-item />`s)
+ * together. It will automatically group all items not visible in the viewport into a custom
+ * priority menu.
+ *
+ * @example
+ * <syn-prio-nav>
+ *  <syn-nav-item current horizontal>Item 1</syn-nav-item>
+ *  <button role="menuitem">Item 2 (custom)</button>
+ *  <syn-nav-item horizontal>Item 3</syn-nav-item>
+ * </syn-prio-nav>
+ *
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-prio-nav--docs
+ * @status stable
+ * @since 1.14.0
+ *
+ * @dependency syn-dropdown
+ * @dependency syn-icon
+ * @dependency syn-menu
+ * @dependency syn-nav-item
+ *
+ * @slot - The given navigation items. Must be horizontal `<syn-nav-item>`s
+ *    or have a role of "menuitem"
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart priority-menu - The wrapper around the priority menu
+ * @csspart priority-menu-nav-item - The navigation item for the priority menu
+ * @csspart priority-menu-label - The label for the priority menu
+ * @csspart priority-menu-icon - The icon for the priority menu
+ * @csspart priority-menu-container - The container for the shifted navigation items,
+ *    if there is not enough space.
+ *
+ */
+export default class SynPrioNav extends SynergyElement {
+    static styles: CSSResultGroup;
+    static dependencies: {
+        'syn-dropdown': typeof SynDropdown;
+        'syn-icon': typeof SynIcon;
+        'syn-menu': typeof SynMenu;
+        'syn-nav-item': typeof SynNavItem;
+    };
+    /**
+     * Internal resize observer
+     */
+    private resizeObserver;
+    /**
+     * Reference to the rendered children slot
+     */
+    private defaultSlot;
+    /**
+     * Reference to the slot where priority menu items are placed
+     */
+    private menuSlot;
+    /**
+     * The wrapper that holds the horizontal navigation items
+     */
+    private horizontalNav;
+    /**
+     * The priority menu dropdown
+     */
+    private priorityMenu;
+    /**
+     * The components priority menu label.
+     * This will be shown after the priority menu 3 dots link
+     */
+    priorityMenuLabel: string;
+    /**
+     * Internal state reflecting if the item positions have been cached
+     */
+    private itemPositionsCached;
+    /**
+     * The amount of nav items that are currently slotted
+     */
+    private amountOfNavItems;
+    /**
+     * The amount of items that are currently visible
+     */
+    private amountOfVisibleItems;
+    /**
+     * Internal state reflecting if there are items in the priority menu
+     */
+    private hasItemsInDropdown;
+    /**
+     * Get a list of all slotted `<syn-nav-item />` elements
+     * that are either in the main slot or the priority menu slot
+     */
+    private getSlottedNavItems;
+    /**
+     * Cache the items right offset position to make faster checks placement into priority menu
+     * @param items The items to cache the position for
+     */
+    private cacheItemPositions;
+    /**
+     * Determines which items should be shown or hidden, depending on the current width
+     */
+    private handlePriorityMenu;
+    private renderPriorityMenu;
+    private slotChange;
+    protected firstUpdated(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): import("lit").TemplateResult;
+}

package/dist/components/prio-nav/prio-nav.component.js

@@ -0,0 +1,38 @@
+import {
+  SynPrioNav
+} from "../../chunks/chunk.IYGOMLU7.js";
+import "../../chunks/chunk.74N5WLM5.js";
+import "../../chunks/chunk.XNP4OTUB.js";
+import "../../chunks/chunk.MJYZDU37.js";
+import "../../chunks/chunk.L4UUXVRZ.js";
+import "../../chunks/chunk.XSVH753L.js";
+import "../../chunks/chunk.PILX7LVU.js";
+import "../../chunks/chunk.RSSY7KPD.js";
+import "../../chunks/chunk.NBHBC5FQ.js";
+import "../../chunks/chunk.4TWUWTOI.js";
+import "../../chunks/chunk.MIMALEWP.js";
+import "../../chunks/chunk.2KYFCKCK.js";
+import "../../chunks/chunk.SLCYXMHB.js";
+import "../../chunks/chunk.YBPWZ4QI.js";
+import "../../chunks/chunk.FA6V2WD6.js";
+import "../../chunks/chunk.ACTJFDNK.js";
+import "../../chunks/chunk.2QOQY4ZG.js";
+import "../../chunks/chunk.7BEVGRQ2.js";
+import "../../chunks/chunk.QAUTITK3.js";
+import "../../chunks/chunk.66WXVGAW.js";
+import "../../chunks/chunk.WHYX7AY4.js";
+import "../../chunks/chunk.PJO6TM3T.js";
+import "../../chunks/chunk.2RF7KO5I.js";
+import "../../chunks/chunk.66MOXMDP.js";
+import "../../chunks/chunk.6C4JXZZN.js";
+import "../../chunks/chunk.VTKIDI7N.js";
+import "../../chunks/chunk.AVTU2BGE.js";
+import "../../chunks/chunk.C7624ITA.js";
+import "../../chunks/chunk.GEHO4WRP.js";
+import "../../chunks/chunk.QY3GFWGZ.js";
+import "../../chunks/chunk.MCJTXOVV.js";
+import "../../chunks/chunk.QNDC5KWA.js";
+export {
+  SynPrioNav as default
+};
+//# sourceMappingURL=prio-nav.component.js.map

package/dist/components/prio-nav/prio-nav.component.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/components/prio-nav/prio-nav.d.ts

@@ -0,0 +1,8 @@
+import SynPrioNav from './prio-nav.component.js';
+export * from './prio-nav.component.js';
+export default SynPrioNav;
+declare global {
+    interface HTMLElementTagNameMap {
+        'syn-prio-nav': SynPrioNav;
+    }
+}

package/dist/components/prio-nav/prio-nav.js

@@ -0,0 +1,39 @@
+import {
+  prio_nav_default
+} from "../../chunks/chunk.IJCD3LMC.js";
+import "../../chunks/chunk.IYGOMLU7.js";
+import "../../chunks/chunk.74N5WLM5.js";
+import "../../chunks/chunk.XNP4OTUB.js";
+import "../../chunks/chunk.MJYZDU37.js";
+import "../../chunks/chunk.L4UUXVRZ.js";
+import "../../chunks/chunk.XSVH753L.js";
+import "../../chunks/chunk.PILX7LVU.js";
+import "../../chunks/chunk.RSSY7KPD.js";
+import "../../chunks/chunk.NBHBC5FQ.js";
+import "../../chunks/chunk.4TWUWTOI.js";
+import "../../chunks/chunk.MIMALEWP.js";
+import "../../chunks/chunk.2KYFCKCK.js";
+import "../../chunks/chunk.SLCYXMHB.js";
+import "../../chunks/chunk.YBPWZ4QI.js";
+import "../../chunks/chunk.FA6V2WD6.js";
+import "../../chunks/chunk.ACTJFDNK.js";
+import "../../chunks/chunk.2QOQY4ZG.js";
+import "../../chunks/chunk.7BEVGRQ2.js";
+import "../../chunks/chunk.QAUTITK3.js";
+import "../../chunks/chunk.66WXVGAW.js";
+import "../../chunks/chunk.WHYX7AY4.js";
+import "../../chunks/chunk.PJO6TM3T.js";
+import "../../chunks/chunk.2RF7KO5I.js";
+import "../../chunks/chunk.66MOXMDP.js";
+import "../../chunks/chunk.6C4JXZZN.js";
+import "../../chunks/chunk.VTKIDI7N.js";
+import "../../chunks/chunk.AVTU2BGE.js";
+import "../../chunks/chunk.C7624ITA.js";
+import "../../chunks/chunk.GEHO4WRP.js";
+import "../../chunks/chunk.QY3GFWGZ.js";
+import "../../chunks/chunk.MCJTXOVV.js";
+import "../../chunks/chunk.QNDC5KWA.js";
+export {
+  prio_nav_default as default
+};
+//# sourceMappingURL=prio-nav.js.map

package/dist/components/prio-nav/prio-nav.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/components/prio-nav/prio-nav.styles.d.ts

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

package/dist/components/prio-nav/prio-nav.styles.js

@@ -0,0 +1,8 @@
+import {
+  prio_nav_styles_default
+} from "../../chunks/chunk.74N5WLM5.js";
+import "../../chunks/chunk.QNDC5KWA.js";
+export {
+  prio_nav_styles_default as default
+};
+//# sourceMappingURL=prio-nav.styles.js.map

package/dist/components/prio-nav/prio-nav.styles.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/components/prio-nav/utils.d.ts

@@ -0,0 +1,20 @@
+import type SynNavItem from '../nav-item/nav-item.component.js';
+/**
+ * Get a list of all assigned elements for a given slot
+ * @param slot The slot to query
+ * @returns Flattened list of assigned elements
+ */
+export declare const getAssignedElementsForSlot: (slot: HTMLSlotElement) => HTMLElement[];
+/**
+ * Check if an item is a SynNavItem or otherwise an item that has a role of menuitem.
+ * Note we always treat all items as SynNavItems here
+ * @param item The item to check for
+ * @returns True if the item is a SynNavItem, false otherwise
+ */
+export declare const isNavItem: (item: HTMLElement) => item is SynNavItem;
+/**
+ * Get a list of only SynNavItem elements
+ * @param items List of items to check for
+ * @returns New array of all found syn-nav-items
+ */
+export declare const filterOnlyNavItems: (items: HTMLElement[]) => SynNavItem[];

package/dist/components/prio-nav/utils.js

@@ -0,0 +1,12 @@
+import {
+  filterOnlyNavItems,
+  getAssignedElementsForSlot,
+  isNavItem
+} from "../../chunks/chunk.XNP4OTUB.js";
+import "../../chunks/chunk.QNDC5KWA.js";
+export {
+  filterOnlyNavItems,
+  getAssignedElementsForSlot,
+  isNavItem
+};
+//# sourceMappingURL=utils.js.map

package/dist/components/prio-nav/utils.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/components/radio/radio.component.js

@@ -1,17 +1,17 @@
 import {
   SynRadio
-} from "../../chunks/chunk.OLM7IVHA.js";
-import "../../chunks/chunk.PKO6FEOM.js";
+} from "../../chunks/chunk.T43ZXJKG.js";
 import "../../chunks/chunk.V6VND4OF.js";
-import "../../chunks/chunk.4LMFTSOM.js";
+import "../../chunks/chunk.PKO6FEOM.js";
+import "../../chunks/chunk.WHYX7AY4.js";
 import "../../chunks/chunk.PJO6TM3T.js";
 import "../../chunks/chunk.2RF7KO5I.js";
-import "../../chunks/chunk.7UVCYUNR.js";
+import "../../chunks/chunk.66MOXMDP.js";
 import "../../chunks/chunk.6C4JXZZN.js";
-import "../../chunks/chunk.N4VSEIRQ.js";
+import "../../chunks/chunk.VTKIDI7N.js";
 import "../../chunks/chunk.AVTU2BGE.js";
 import "../../chunks/chunk.C7624ITA.js";
-import "../../chunks/chunk.5TOD3QS2.js";
+import "../../chunks/chunk.MCJTXOVV.js";
 import "../../chunks/chunk.QNDC5KWA.js";
 export {
   SynRadio as default

package/dist/components/radio/radio.js

@@ -1,18 +1,18 @@
 import {
   radio_default
-} from "../../chunks/chunk.VDYPXC2H.js";
-import "../../chunks/chunk.OLM7IVHA.js";
-import "../../chunks/chunk.PKO6FEOM.js";
+} from "../../chunks/chunk.VPW6WZNZ.js";
+import "../../chunks/chunk.T43ZXJKG.js";
 import "../../chunks/chunk.V6VND4OF.js";
-import "../../chunks/chunk.4LMFTSOM.js";
+import "../../chunks/chunk.PKO6FEOM.js";
+import "../../chunks/chunk.WHYX7AY4.js";
 import "../../chunks/chunk.PJO6TM3T.js";
 import "../../chunks/chunk.2RF7KO5I.js";
-import "../../chunks/chunk.7UVCYUNR.js";
+import "../../chunks/chunk.66MOXMDP.js";
 import "../../chunks/chunk.6C4JXZZN.js";
-import "../../chunks/chunk.N4VSEIRQ.js";
+import "../../chunks/chunk.VTKIDI7N.js";
 import "../../chunks/chunk.AVTU2BGE.js";
 import "../../chunks/chunk.C7624ITA.js";
-import "../../chunks/chunk.5TOD3QS2.js";
+import "../../chunks/chunk.MCJTXOVV.js";
 import "../../chunks/chunk.QNDC5KWA.js";
 export {
   radio_default as default

package/dist/components/radio-button/radio-button.component.js

@@ -1,11 +1,11 @@
 import {
   SynRadioButton
-} from "../../chunks/chunk.VSEAHAW7.js";
+} from "../../chunks/chunk.WCIAL36G.js";
 import "../../chunks/chunk.ZIQXX272.js";
 import "../../chunks/chunk.SJMMPKWP.js";
 import "../../chunks/chunk.66WXVGAW.js";
 import "../../chunks/chunk.AVTU2BGE.js";
-import "../../chunks/chunk.5TOD3QS2.js";
+import "../../chunks/chunk.MCJTXOVV.js";
 import "../../chunks/chunk.QNDC5KWA.js";
 export {
   SynRadioButton as default

package/dist/components/radio-button/radio-button.js

@@ -1,12 +1,12 @@
 import {
   radio_button_default
-} from "../../chunks/chunk.PSTO5STZ.js";
-import "../../chunks/chunk.VSEAHAW7.js";
+} from "../../chunks/chunk.TFWNKCFJ.js";
+import "../../chunks/chunk.WCIAL36G.js";
 import "../../chunks/chunk.ZIQXX272.js";
 import "../../chunks/chunk.SJMMPKWP.js";
 import "../../chunks/chunk.66WXVGAW.js";
 import "../../chunks/chunk.AVTU2BGE.js";
-import "../../chunks/chunk.5TOD3QS2.js";
+import "../../chunks/chunk.MCJTXOVV.js";
 import "../../chunks/chunk.QNDC5KWA.js";
 export {
   radio_button_default as default

package/dist/components/radio-group/radio-group.component.js

@@ -1,15 +1,15 @@
 import {
   SynRadioGroup
-} from "../../chunks/chunk.P2D7PUR2.js";
+} from "../../chunks/chunk.FYN26TFO.js";
 import "../../chunks/chunk.F4MRQLNL.js";
 import "../../chunks/chunk.XIUSSERX.js";
-import "../../chunks/chunk.H33SDUY3.js";
+import "../../chunks/chunk.SE4NF6AN.js";
 import "../../chunks/chunk.A7IIJ2LL.js";
 import "../../chunks/chunk.TTL762VF.js";
 import "../../chunks/chunk.SZCGMXW5.js";
 import "../../chunks/chunk.66WXVGAW.js";
 import "../../chunks/chunk.AVTU2BGE.js";
-import "../../chunks/chunk.5TOD3QS2.js";
+import "../../chunks/chunk.MCJTXOVV.js";
 import "../../chunks/chunk.QNDC5KWA.js";
 export {
   SynRadioGroup as default

package/dist/components/radio-group/radio-group.js

@@ -1,16 +1,16 @@
 import {
   radio_group_default
-} from "../../chunks/chunk.CG753OYA.js";
-import "../../chunks/chunk.P2D7PUR2.js";
+} from "../../chunks/chunk.JCFKRHGM.js";
+import "../../chunks/chunk.FYN26TFO.js";
 import "../../chunks/chunk.F4MRQLNL.js";
 import "../../chunks/chunk.XIUSSERX.js";
-import "../../chunks/chunk.H33SDUY3.js";
+import "../../chunks/chunk.SE4NF6AN.js";
 import "../../chunks/chunk.A7IIJ2LL.js";
 import "../../chunks/chunk.TTL762VF.js";
 import "../../chunks/chunk.SZCGMXW5.js";
 import "../../chunks/chunk.66WXVGAW.js";
 import "../../chunks/chunk.AVTU2BGE.js";
-import "../../chunks/chunk.5TOD3QS2.js";
+import "../../chunks/chunk.MCJTXOVV.js";
 import "../../chunks/chunk.QNDC5KWA.js";
 export {
   radio_group_default as default

package/dist/components/select/select.component.js

@@ -1,15 +1,15 @@
 import {
   SynSelect
-} from "../../chunks/chunk.A6S4OYWD.js";
-import "../../chunks/chunk.KEEDSK2V.js";
+} from "../../chunks/chunk.GCHIBXQT.js";
+import "../../chunks/chunk.WV2VTAP2.js";
 import "../../chunks/chunk.B6R3IVGO.js";
 import "../../chunks/chunk.BGHK4NQA.js";
 import "../../chunks/chunk.OWMT6OL2.js";
 import "../../chunks/chunk.QNQNR3RY.js";
-import "../../chunks/chunk.GGY5VQYA.js";
+import "../../chunks/chunk.4TWUWTOI.js";
 import "../../chunks/chunk.MIMALEWP.js";
 import "../../chunks/chunk.2QYALZBT.js";
-import "../../chunks/chunk.7UUZ5ISH.js";
+import "../../chunks/chunk.H7APDHTS.js";
 import "../../chunks/chunk.ZHH2AHOZ.js";
 import "../../chunks/chunk.LJQ7LEPV.js";
 import "../../chunks/chunk.7BEVGRQ2.js";
@@ -18,17 +18,17 @@ import "../../chunks/chunk.WFAJR3FN.js";
 import "../../chunks/chunk.TTL762VF.js";
 import "../../chunks/chunk.SZCGMXW5.js";
 import "../../chunks/chunk.66WXVGAW.js";
-import "../../chunks/chunk.4LMFTSOM.js";
+import "../../chunks/chunk.WHYX7AY4.js";
 import "../../chunks/chunk.PJO6TM3T.js";
 import "../../chunks/chunk.2RF7KO5I.js";
-import "../../chunks/chunk.7UVCYUNR.js";
+import "../../chunks/chunk.66MOXMDP.js";
 import "../../chunks/chunk.6C4JXZZN.js";
-import "../../chunks/chunk.N4VSEIRQ.js";
+import "../../chunks/chunk.VTKIDI7N.js";
 import "../../chunks/chunk.AVTU2BGE.js";
 import "../../chunks/chunk.C7624ITA.js";
-import "../../chunks/chunk.RK7OBPZ5.js";
-import "../../chunks/chunk.V53WYKEU.js";
-import "../../chunks/chunk.5TOD3QS2.js";
+import "../../chunks/chunk.GEHO4WRP.js";
+import "../../chunks/chunk.QY3GFWGZ.js";
+import "../../chunks/chunk.MCJTXOVV.js";
 import "../../chunks/chunk.QNDC5KWA.js";
 export {
   SynSelect as default

package/dist/components/select/select.js

@@ -1,16 +1,16 @@
 import {
   select_default
-} from "../../chunks/chunk.4MRXASVT.js";
-import "../../chunks/chunk.A6S4OYWD.js";
-import "../../chunks/chunk.KEEDSK2V.js";
+} from "../../chunks/chunk.OVUVBTHH.js";
+import "../../chunks/chunk.GCHIBXQT.js";
+import "../../chunks/chunk.WV2VTAP2.js";
 import "../../chunks/chunk.B6R3IVGO.js";
 import "../../chunks/chunk.BGHK4NQA.js";
 import "../../chunks/chunk.OWMT6OL2.js";
 import "../../chunks/chunk.QNQNR3RY.js";
-import "../../chunks/chunk.GGY5VQYA.js";
+import "../../chunks/chunk.4TWUWTOI.js";
 import "../../chunks/chunk.MIMALEWP.js";
 import "../../chunks/chunk.2QYALZBT.js";
-import "../../chunks/chunk.7UUZ5ISH.js";
+import "../../chunks/chunk.H7APDHTS.js";
 import "../../chunks/chunk.ZHH2AHOZ.js";
 import "../../chunks/chunk.LJQ7LEPV.js";
 import "../../chunks/chunk.7BEVGRQ2.js";
@@ -19,17 +19,17 @@ import "../../chunks/chunk.WFAJR3FN.js";
 import "../../chunks/chunk.TTL762VF.js";
 import "../../chunks/chunk.SZCGMXW5.js";
 import "../../chunks/chunk.66WXVGAW.js";
-import "../../chunks/chunk.4LMFTSOM.js";
+import "../../chunks/chunk.WHYX7AY4.js";
 import "../../chunks/chunk.PJO6TM3T.js";
 import "../../chunks/chunk.2RF7KO5I.js";
-import "../../chunks/chunk.7UVCYUNR.js";
+import "../../chunks/chunk.66MOXMDP.js";
 import "../../chunks/chunk.6C4JXZZN.js";
-import "../../chunks/chunk.N4VSEIRQ.js";
+import "../../chunks/chunk.VTKIDI7N.js";
 import "../../chunks/chunk.AVTU2BGE.js";
 import "../../chunks/chunk.C7624ITA.js";
-import "../../chunks/chunk.RK7OBPZ5.js";
-import "../../chunks/chunk.V53WYKEU.js";
-import "../../chunks/chunk.5TOD3QS2.js";
+import "../../chunks/chunk.GEHO4WRP.js";
+import "../../chunks/chunk.QY3GFWGZ.js";
+import "../../chunks/chunk.MCJTXOVV.js";
 import "../../chunks/chunk.QNDC5KWA.js";
 export {
   select_default as default

package/dist/components/side-nav/side-nav.component.d.ts

@@ -0,0 +1,122 @@
+import type { CSSResultGroup } from 'lit';
+import SynergyElement from '../../internal/synergy-element.js';
+import SynDrawer from '../drawer/drawer.component.js';
+import SynDivider from '../divider/divider.component.js';
+/**
+ * @summary The <syn-side-nav /> element contains secondary navigation and fits below the header.
+ * It can be used to group multiple navigation items (<syn-nav-item />s) together.
+ *
+ * @example
+ * <syn-side-nav open>
+ *  <syn-nav-item >Item 1</syn-nav-item>
+ *  <syn-nav-item divider>Item 2</syn-nav-item>
+ * </syn-side-nav>
+ *
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-side-nav--docs
+ * @status stable
+ * @since 1.14.0
+ *
+ * @dependency syn-divider
+ * @dependency syn-drawer
+ *
+ * @slot - The main content of the side-nav. Used for <syn-nav-item /> elements.
+ * @slot footer - The footer content of the side-nav. Used for <syn-nav-item /> elements.
+ *    Please avoid having to many nav-items as it can massively influence the user experience.
+ *
+ * @event syn-show - Emitted when the side-nav opens.
+ * @event syn-after-show - Emitted after the side-nav opens and all animations are complete.
+ * @event syn-hide - Emitted when the side-nav closes.
+ * @event syn-after-hide - Emitted after the side-nav closes and all animations are complete.
+ *
+ * @csspart base - The components base wrapper
+ * @csspart drawer - The drawer that is used under the hood for creating the side-nav
+ * @csspart content-container - The components main content container
+ * @csspart content - The components main content
+ * @csspart footer-container - The components footer content container
+ * @csspart footer-divider - The components footer divider
+ * @csspart footer - The components footer content
+ * @csspart overlay - The overlay that covers the screen behind the side-nav.
+ *
+ * @cssproperty  --side-nav-open-width - The width of the side-nav if in open state
+ * @cssproperty  --side-nav-rail-width - The width of the side-nav if in rail mode without open
+ *
+ * @animation sideNav.showNonRail - The animation to use when showing the side-nav in non-rail mode.
+ * @animation sideNav.showRail - The animation to use when showing the side-nav in rail mode.
+ * @animation sideNav.hideNonRail - The animation to use when hiding the side-nav in non-rail mode.
+ * @animation sideNav.hideRail - The animation to use when hiding the side-nav in rail mode.
+ * @animation sideNav.overlay.show - The animation to use when showing the side-nav's overlay.
+ * @animation sideNav.overlay.hide - The animation to use when hiding the side-nav's overlay.
+ */
+export default class SynSideNav extends SynergyElement {
+    static styles: CSSResultGroup;
+    static dependencies: {
+        'syn-divider': typeof SynDivider;
+        'syn-drawer': typeof SynDrawer;
+    };
+    private readonly hasSlotController;
+    private readonly localize;
+    private timeout;
+    /**
+     * Current animation active state
+     */
+    private isAnimationActive;
+    /**
+     * Reference to the drawer
+     */
+    private drawer;
+    /**
+     * Indicates whether or not the side-nav is open.
+     * You can toggle this attribute to show and hide the side-nav, or you can use the `show()` and
+     * `hide()` methods and this attribute will reflect the side-nav's open state.
+     *
+     * Depending if the rail attribute is set or not, the behavior will differ.
+     *
+     * __Non rail__:
+     * With `open` will show the side-nav.
+     * Without `open`, the side-nav will be hidden.
+     *
+     * __Rail__:
+     * With `open` will show the whole side-nav with an overlay for touch devices
+     * or without an overlay for non-touch devices.
+     * Without `open`, the side-nav will only show the prefix of nav-item's.
+     *
+     */
+    open: boolean;
+    /**
+     * Use the rail attribute to only show the prefix of navigation items in closed state.
+     * This will open on hover on the rail navigation.
+     * On touch devices the navigation opens on click and shows an overlay.
+     *
+     * Note: The Rail is only an option if all Navigation Items on the first level have an Icon.
+     * If this is not the case you should use a burger navigation.
+     */
+    rail: boolean;
+    /**
+     * By default, the side-nav traps the focus if in non-rail mode and open.
+     * To disable the focus trapping, set this attribute.
+     */
+    noFocusTrapping: boolean;
+    private setDelayedCallback;
+    private handleMouseEnter;
+    private handleMouseLeave;
+    private handleRequestClose;
+    private addMouseListener;
+    private removeMouseListener;
+    private setDrawerVisibility;
+    private forceDrawerVisibilityForRailMode;
+    private setDrawerAnimations;
+    handleModeChange(): void;
+    handleOpenChange(): void;
+    handleFocusTrapping(): void;
+    /** Shows the side-nav. */
+    show(): Promise<void>;
+    /** Hides the side-nav */
+    hide(): Promise<void>;
+    constructor();
+    /**
+     * Initial setup for first render like special rail mode handling and drawer animations.
+     * */
+    firstUpdated(): void;
+    disconnectedCallback(): void;
+    render(): import("lit").TemplateResult;
+}