@synergy-design-system/components 1.14.0 → 1.16.0

package/dist/chunks/{chunk.MQCFDVLW.js → chunk.SAHA7Z3T.js}

@@ -1,6 +1,6 @@
 import {
   SynTextarea
-} from "./chunk.H7XP6JAS.js";
+} from "./chunk.LOUVN7OA.js";
 
 // src/components/textarea/textarea.ts
 var textarea_default = SynTextarea;
@@ -9,4 +9,4 @@ SynTextarea.define("syn-textarea");
 export {
   textarea_default
 };
-//# sourceMappingURL=chunk.MQCFDVLW.js.map
+//# sourceMappingURL=chunk.SAHA7Z3T.js.map

package/dist/chunks/chunk.SHOXPF5L.js

@@ -0,0 +1,12 @@
+import {
+  SynPrioNav
+} from "./chunk.U2H36O5J.js";
+
+// src/components/prio-nav/prio-nav.ts
+var prio_nav_default = SynPrioNav;
+SynPrioNav.define("syn-prio-nav");
+
+export {
+  prio_nav_default
+};
+//# sourceMappingURL=chunk.SHOXPF5L.js.map

package/dist/chunks/chunk.SHOXPF5L.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/prio-nav/prio-nav.ts"],
+  "sourcesContent": ["import SynPrioNav from './prio-nav.component.js';\n\nexport * from './prio-nav.component.js';\nexport default SynPrioNav;\n\nSynPrioNav.define('syn-prio-nav');\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'syn-prio-nav': SynPrioNav;\n  }\n}\n"],
+  "mappings": ";;;;;AAGA,IAAO,mBAAQ;AAEf,WAAW,OAAO,cAAc;",
+  "names": []
+}

package/dist/chunks/{chunk.VDYPXC2H.js → chunk.SOAZXMVH.js}

@@ -1,6 +1,6 @@
 import {
   SynRadio
-} from "./chunk.OLM7IVHA.js";
+} from "./chunk.OEMIM5RD.js";
 
 // src/components/radio/radio.ts
 var radio_default = SynRadio;
@@ -9,4 +9,4 @@ SynRadio.define("syn-radio");
 export {
   radio_default
 };
-//# sourceMappingURL=chunk.VDYPXC2H.js.map
+//# sourceMappingURL=chunk.SOAZXMVH.js.map

package/dist/chunks/{chunk.ADRKUQGR.js → chunk.TAO5QIIQ.js}

@@ -156,6 +156,7 @@ var switch_styles_default = css`
 
   :host([required]) .switch__label::after {
     content: var(--syn-input-required-content);
+    color: var(--syn-input-required-content-color);
     margin-inline-start: var(--syn-input-required-content-offset);
   }
 
@@ -170,4 +171,4 @@ var switch_styles_default = css`
 export {
   switch_styles_default
 };
-//# sourceMappingURL=chunk.ADRKUQGR.js.map
+//# sourceMappingURL=chunk.TAO5QIIQ.js.map

package/dist/chunks/{chunk.ADRKUQGR.js.map → chunk.TAO5QIIQ.js.map}

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/components/switch/switch.styles.ts"],
-  "sourcesContent": ["// ---------------------------------------------------------------------\n// \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n// Removing this comment will prevent it from being managed by it.\n// ---------------------------------------------------------------------\n\n/* eslint-disable */\nimport { css } from 'lit';\n\nexport default css`\n\t/* stylelint-disable */\n  :host {\n    display: inline-block;\n  }\n\n  :host([size='small']) {\n    --height: var(--syn-toggle-size-small);\n    --thumb-size: calc(var(--syn-toggle-size-small) + 4px);\n    --width: calc(var(--height) * 2);\n\n    font-size: var(--syn-input-font-size-small);\n  }\n\n  :host([size='medium']) {\n    --height: var(--syn-toggle-size-medium);\n    --thumb-size: calc(var(--syn-toggle-size-medium) + 4px);\n    --width: calc(var(--height) * 2);\n\n    font-size: var(--syn-input-font-size-medium);\n  }\n\n  :host([size='large']) {\n    --height: var(--syn-toggle-size-large);\n    --thumb-size: calc(var(--syn-toggle-size-large) + 4px);\n    --width: calc(var(--height) * 2);\n\n    font-size: var(--syn-input-font-size-large);\n  }\n\n  .switch {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    font-family: var(--syn-input-font-family);\n    font-size: inherit;\n    font-weight: var(--syn-input-font-weight);\n    color: var(--syn-input-label-color);\n    vertical-align: middle;\n    cursor: pointer;\n  }\n\n  .switch__control {\n    flex: 0 0 auto;\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--width);\n    height: var(--height);\n    background-color: var(--syn-color-neutral-400);\n    border: solid var(--syn-input-border-width) var(--syn-color-neutral-400);\n    border-radius: var(--height);\n    transition:\n      var(--syn-transition-fast) border-color,\n      var(--syn-transition-fast) background-color;\n  }\n\n  .switch__control .switch__thumb {\n    width: var(--thumb-size);\n    height: var(--thumb-size);\n    background-color: var(--syn-color-neutral-0);\n    border-radius: 50%;\n    border: solid var(--syn-input-border-width) var(--syn-color-neutral-400);\n    translate: calc((var(--width) - var(--height)) / -2);\n    transition:\n      var(--syn-transition-fast) translate ease,\n      var(--syn-transition-fast) background-color,\n      var(--syn-transition-fast) border-color,\n      var(--syn-transition-fast) box-shadow;\n  }\n\n  .switch__input {\n    position: absolute;\n    opacity: 0;\n    padding: 0;\n    margin: 0;\n    pointer-events: none;\n  }\n\n  /* Hover */\n  .switch:not(.switch--checked):not(.switch--disabled) .switch__control:hover {\n    background-color: var(--syn-color-neutral-400);\n    border-color: var(--syn-color-neutral-400);\n  }\n\n  .switch:not(.switch--checked):not(.switch--disabled) .switch__control:hover .switch__thumb {\n    background-color: var(--syn-color-neutral-0);\n    border-color: var(--syn-color-neutral-400);\n  }\n\n  /* Focus */\n  .switch:not(.switch--checked):not(.switch--disabled) .switch__input:focus-visible ~ .switch__control {\n    background-color: var(--syn-color-neutral-400);\n    border-color: var(--syn-color-neutral-400);\n  }\n\n  .switch:not(.switch--checked):not(.switch--disabled) .switch__input:focus-visible ~ .switch__control .switch__thumb {\n    background-color: var(--syn-color-neutral-0);\n    border-color: var(--syn-color-primary-600);\n    outline: var(--syn-focus-ring);\n    outline-offset: var(--syn-focus-ring-offset);\n  }\n\n  /* Checked */\n  .switch--checked .switch__control {\n    background-color: var(--syn-color-primary-600);\n    border-color: var(--syn-color-primary-600);\n  }\n\n  .switch--checked .switch__control .switch__thumb {\n    background-color: var(--syn-color-neutral-0);\n    border-color: var(--syn-color-primary-600);\n    translate: calc((var(--width) - var(--height)) / 2);\n  }\n\n  /* Checked + hover */\n  .switch.switch--checked:not(.switch--disabled) .switch__control:hover {\n    background-color: var(--syn-color-primary-600);\n    border-color: var(--syn-color-primary-600);\n  }\n\n  .switch.switch--checked:not(.switch--disabled) .switch__control:hover .switch__thumb {\n    background-color: var(--syn-color-neutral-0);\n    border-color: var(--syn-color-primary-600);\n  }\n\n  /* Checked + focus */\n  .switch.switch--checked:not(.switch--disabled) .switch__input:focus-visible ~ .switch__control {\n    background-color: var(--syn-color-primary-600);\n    border-color: var(--syn-color-primary-600);\n  }\n\n  .switch.switch--checked:not(.switch--disabled) .switch__input:focus-visible ~ .switch__control .switch__thumb {\n    background-color: var(--syn-color-neutral-0);\n    border-color: var(--syn-color-primary-600);\n    outline: var(--syn-focus-ring);\n    outline-offset: var(--syn-focus-ring-offset);\n  }\n\n  /* Disabled */\n  .switch--disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .switch__label {\n    display: inline-block;\n    line-height: var(--height);\n    margin-inline-start: 0.5em;\n    user-select: none;\n    -webkit-user-select: none;\n  }\n\n  :host([required]) .switch__label::after {\n    content: var(--syn-input-required-content);\n    margin-inline-start: var(--syn-input-required-content-offset);\n  }\n\n  @media (forced-colors: active) {\n    .switch.switch--checked:not(.switch--disabled) .switch__control:hover .switch__thumb,\n    .switch--checked .switch__control .switch__thumb {\n      background-color: ButtonText;\n    }\n  }\n`;\n"],
-  "mappings": ";AAMA,SAAS,WAAW;AAEpB,IAAO,wBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "sourcesContent": ["// ---------------------------------------------------------------------\n// \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n// Removing this comment will prevent it from being managed by it.\n// ---------------------------------------------------------------------\n\n/* eslint-disable */\nimport { css } from 'lit';\n\nexport default css`\n\t/* stylelint-disable */\n  :host {\n    display: inline-block;\n  }\n\n  :host([size='small']) {\n    --height: var(--syn-toggle-size-small);\n    --thumb-size: calc(var(--syn-toggle-size-small) + 4px);\n    --width: calc(var(--height) * 2);\n\n    font-size: var(--syn-input-font-size-small);\n  }\n\n  :host([size='medium']) {\n    --height: var(--syn-toggle-size-medium);\n    --thumb-size: calc(var(--syn-toggle-size-medium) + 4px);\n    --width: calc(var(--height) * 2);\n\n    font-size: var(--syn-input-font-size-medium);\n  }\n\n  :host([size='large']) {\n    --height: var(--syn-toggle-size-large);\n    --thumb-size: calc(var(--syn-toggle-size-large) + 4px);\n    --width: calc(var(--height) * 2);\n\n    font-size: var(--syn-input-font-size-large);\n  }\n\n  .switch {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    font-family: var(--syn-input-font-family);\n    font-size: inherit;\n    font-weight: var(--syn-input-font-weight);\n    color: var(--syn-input-label-color);\n    vertical-align: middle;\n    cursor: pointer;\n  }\n\n  .switch__control {\n    flex: 0 0 auto;\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--width);\n    height: var(--height);\n    background-color: var(--syn-color-neutral-400);\n    border: solid var(--syn-input-border-width) var(--syn-color-neutral-400);\n    border-radius: var(--height);\n    transition:\n      var(--syn-transition-fast) border-color,\n      var(--syn-transition-fast) background-color;\n  }\n\n  .switch__control .switch__thumb {\n    width: var(--thumb-size);\n    height: var(--thumb-size);\n    background-color: var(--syn-color-neutral-0);\n    border-radius: 50%;\n    border: solid var(--syn-input-border-width) var(--syn-color-neutral-400);\n    translate: calc((var(--width) - var(--height)) / -2);\n    transition:\n      var(--syn-transition-fast) translate ease,\n      var(--syn-transition-fast) background-color,\n      var(--syn-transition-fast) border-color,\n      var(--syn-transition-fast) box-shadow;\n  }\n\n  .switch__input {\n    position: absolute;\n    opacity: 0;\n    padding: 0;\n    margin: 0;\n    pointer-events: none;\n  }\n\n  /* Hover */\n  .switch:not(.switch--checked):not(.switch--disabled) .switch__control:hover {\n    background-color: var(--syn-color-neutral-400);\n    border-color: var(--syn-color-neutral-400);\n  }\n\n  .switch:not(.switch--checked):not(.switch--disabled) .switch__control:hover .switch__thumb {\n    background-color: var(--syn-color-neutral-0);\n    border-color: var(--syn-color-neutral-400);\n  }\n\n  /* Focus */\n  .switch:not(.switch--checked):not(.switch--disabled) .switch__input:focus-visible ~ .switch__control {\n    background-color: var(--syn-color-neutral-400);\n    border-color: var(--syn-color-neutral-400);\n  }\n\n  .switch:not(.switch--checked):not(.switch--disabled) .switch__input:focus-visible ~ .switch__control .switch__thumb {\n    background-color: var(--syn-color-neutral-0);\n    border-color: var(--syn-color-primary-600);\n    outline: var(--syn-focus-ring);\n    outline-offset: var(--syn-focus-ring-offset);\n  }\n\n  /* Checked */\n  .switch--checked .switch__control {\n    background-color: var(--syn-color-primary-600);\n    border-color: var(--syn-color-primary-600);\n  }\n\n  .switch--checked .switch__control .switch__thumb {\n    background-color: var(--syn-color-neutral-0);\n    border-color: var(--syn-color-primary-600);\n    translate: calc((var(--width) - var(--height)) / 2);\n  }\n\n  /* Checked + hover */\n  .switch.switch--checked:not(.switch--disabled) .switch__control:hover {\n    background-color: var(--syn-color-primary-600);\n    border-color: var(--syn-color-primary-600);\n  }\n\n  .switch.switch--checked:not(.switch--disabled) .switch__control:hover .switch__thumb {\n    background-color: var(--syn-color-neutral-0);\n    border-color: var(--syn-color-primary-600);\n  }\n\n  /* Checked + focus */\n  .switch.switch--checked:not(.switch--disabled) .switch__input:focus-visible ~ .switch__control {\n    background-color: var(--syn-color-primary-600);\n    border-color: var(--syn-color-primary-600);\n  }\n\n  .switch.switch--checked:not(.switch--disabled) .switch__input:focus-visible ~ .switch__control .switch__thumb {\n    background-color: var(--syn-color-neutral-0);\n    border-color: var(--syn-color-primary-600);\n    outline: var(--syn-focus-ring);\n    outline-offset: var(--syn-focus-ring-offset);\n  }\n\n  /* Disabled */\n  .switch--disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .switch__label {\n    display: inline-block;\n    line-height: var(--height);\n    margin-inline-start: 0.5em;\n    user-select: none;\n    -webkit-user-select: none;\n  }\n\n  :host([required]) .switch__label::after {\n    content: var(--syn-input-required-content);\n    color: var(--syn-input-required-content-color);\n    margin-inline-start: var(--syn-input-required-content-offset);\n  }\n\n  @media (forced-colors: active) {\n    .switch.switch--checked:not(.switch--disabled) .switch__control:hover .switch__thumb,\n    .switch--checked .switch__control .switch__thumb {\n      background-color: ButtonText;\n    }\n  }\n`;\n"],
+  "mappings": ";AAMA,SAAS,WAAW;AAEpB,IAAO,wBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

package/dist/chunks/{chunk.5HAKNNIR.js → chunk.TUFBQA52.js}

@@ -10,7 +10,7 @@ import {
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.5TOD3QS2.js";
+} from "./chunk.VCFVQ6KS.js";
 import {
   __decorateClass
 } from "./chunk.QNDC5KWA.js";
@@ -41,4 +41,4 @@ __decorateClass([
 export {
   SynDivider
 };
-//# sourceMappingURL=chunk.5HAKNNIR.js.map
+//# sourceMappingURL=chunk.TUFBQA52.js.map

package/dist/chunks/{chunk.P2D7PUR2.js → chunk.TWZC4LT2.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.XIUSSERX.js";
 import {
   SynButtonGroup
-} from "./chunk.H33SDUY3.js";
+} from "./chunk.CCITL3IY.js";
 import {
   form_control_custom_styles_default,
   form_control_styles_default
@@ -16,7 +16,7 @@ import {
   customErrorValidityState,
   validValidityState,
   valueMissingValidityState
-} from "./chunk.SZCGMXW5.js";
+} from "./chunk.JUJZBRXD.js";
 import {
   HasSlotController
 } from "./chunk.66WXVGAW.js";
@@ -26,7 +26,7 @@ import {
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.5TOD3QS2.js";
+} from "./chunk.VCFVQ6KS.js";
 import {
   __decorateClass
 } from "./chunk.QNDC5KWA.js";
@@ -356,4 +356,4 @@ __decorateClass([
 export {
   SynRadioGroup
 };
-//# sourceMappingURL=chunk.P2D7PUR2.js.map
+//# sourceMappingURL=chunk.TWZC4LT2.js.map

package/dist/chunks/chunk.U2H36O5J.js

@@ -0,0 +1,208 @@
+import {
+  prio_nav_styles_default
+} from "./chunk.74N5WLM5.js";
+import {
+  filterOnlyNavItems,
+  getAssignedElementsForSlot
+} from "./chunk.XNP4OTUB.js";
+import {
+  SynNavItem
+} from "./chunk.ONVWJKVD.js";
+import {
+  SynMenu
+} from "./chunk.PCI22DJU.js";
+import {
+  SynDropdown
+} from "./chunk.2URWP5LD.js";
+import {
+  SynIcon
+} from "./chunk.I3SSNN7J.js";
+import {
+  SynergyElement,
+  component_styles_default
+} from "./chunk.VCFVQ6KS.js";
+import {
+  __decorateClass
+} from "./chunk.QNDC5KWA.js";
+
+// src/components/prio-nav/prio-nav.component.ts
+import { classMap } from "lit/directives/class-map.js";
+import { html } from "lit/static-html.js";
+import { property, query, state } from "lit/decorators.js";
+var SynPrioNav = class extends SynergyElement {
+  constructor() {
+    super(...arguments);
+    this.priorityMenuLabel = "Menu";
+    this.itemPositionsCached = false;
+    this.amountOfNavItems = 0;
+    this.amountOfVisibleItems = 0;
+    this.hasItemsInDropdown = false;
+  }
+  /**
+   * Get a list of all slotted `<syn-nav-item />` elements
+   * that are either in the main slot or the priority menu slot
+   */
+  getSlottedNavItems() {
+    const navItemsInDefaultSlot = filterOnlyNavItems(getAssignedElementsForSlot(this.defaultSlot));
+    const navItemsInMenuSlot = filterOnlyNavItems(getAssignedElementsForSlot(this.menuSlot));
+    return navItemsInDefaultSlot.concat(navItemsInMenuSlot);
+  }
+  /**
+   * Cache the items right offset position to make faster checks placement into priority menu
+   * @param items The items to cache the position for
+   */
+  cacheItemPositions(items) {
+    items.forEach((item) => {
+      item.removeAttribute("slot");
+      const { right } = item.getBoundingClientRect();
+      item.dataset.right = right.toString();
+    });
+    this.itemPositionsCached = true;
+  }
+  /**
+   * Determines which items should be shown or hidden, depending on the current width
+   */
+  handlePriorityMenu() {
+    const navItems = this.getSlottedNavItems();
+    if (!this.itemPositionsCached) {
+      this.cacheItemPositions(navItems);
+    }
+    const { width } = this.horizontalNav.getBoundingClientRect();
+    const { clientWidth } = this.priorityMenu;
+    const finalWidth = width - clientWidth;
+    let firstHiddenItemRightPos;
+    let visibleItems = 0;
+    navItems.forEach((item) => {
+      const isHidden = firstHiddenItemRightPos || parseFloat(item.dataset.right) >= finalWidth;
+      if (isHidden) {
+        item.removeAttribute("horizontal");
+        item.setAttribute("slot", "menu");
+        item.setAttribute("role", "menuitem");
+        if (!firstHiddenItemRightPos) {
+          firstHiddenItemRightPos = parseFloat(item.dataset.right);
+        }
+      } else {
+        visibleItems += 1;
+        item.setAttribute("horizontal", "true");
+        item.removeAttribute("slot");
+        item.removeAttribute("tabindex");
+        if (item.dataset.originalRole) {
+          item.setAttribute("role", item.dataset.originalRole);
+        } else {
+          item.removeAttribute("role");
+        }
+      }
+    });
+    this.hasItemsInDropdown = visibleItems !== navItems.length;
+    this.amountOfVisibleItems = visibleItems;
+  }
+  renderPriorityMenu() {
+    return html`
+      <syn-dropdown
+        class=${classMap({
+      "priority-menu": true,
+      "priority-menu--has-visible-items": this.amountOfVisibleItems !== 0,
+      "priority-menu--hidden": !this.hasItemsInDropdown
+    })}
+        part="priority-menu"
+        placement="bottom-end"
+      >
+        <syn-nav-item class="priority-menu__nav-item" slot="trigger" horizontal part="priority-menu-nav-item">
+          <syn-icon 
+            class="priority-menu__icon"
+            label="More"
+            library="system"
+            name="more"
+            part="priority-menu-icon"
+            slot="prefix"
+          >
+          </syn-icon>
+          <span
+            class=${classMap({
+      "priority-menu__label": true,
+      "priority-menu__label--visible": this.amountOfVisibleItems === 0
+    })}
+            part="priority-menu-label"
+          >
+            ${this.priorityMenuLabel}
+          </span>
+        </syn-nav-item>
+
+        <syn-menu part="priority-menu-container">
+          <slot name="menu"></slot>
+        </syn-menu>
+
+      </syn-dropdown>
+    `;
+  }
+  slotChange() {
+    const slottedItems = this.getSlottedNavItems();
+    if (slottedItems.length !== this.amountOfNavItems) {
+      this.cacheItemPositions(slottedItems);
+      this.handlePriorityMenu();
+      this.amountOfNavItems = slottedItems.length;
+    }
+  }
+  firstUpdated() {
+    this.getSlottedNavItems().forEach((item) => {
+      var _a;
+      item.dataset.originalRole = (_a = item.getAttribute("role")) != null ? _a : "";
+    });
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.resizeObserver = new ResizeObserver(() => this.handlePriorityMenu());
+    this.resizeObserver.observe(this);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.resizeObserver.unobserve(this);
+  }
+  render() {
+    return html`
+      <nav class="horizontal-nav" part="base">
+        <slot @slotchange=${this.slotChange}></slot>
+        ${this.renderPriorityMenu()}
+      </nav>
+    `;
+  }
+};
+SynPrioNav.styles = [component_styles_default, prio_nav_styles_default];
+SynPrioNav.dependencies = {
+  "syn-dropdown": SynDropdown,
+  "syn-icon": SynIcon,
+  "syn-menu": SynMenu,
+  "syn-nav-item": SynNavItem
+};
+__decorateClass([
+  query("slot:not([name])")
+], SynPrioNav.prototype, "defaultSlot", 2);
+__decorateClass([
+  query("slot[name=menu]")
+], SynPrioNav.prototype, "menuSlot", 2);
+__decorateClass([
+  query(".horizontal-nav")
+], SynPrioNav.prototype, "horizontalNav", 2);
+__decorateClass([
+  query(".priority-menu")
+], SynPrioNav.prototype, "priorityMenu", 2);
+__decorateClass([
+  property({ attribute: "priority-menu-label" })
+], SynPrioNav.prototype, "priorityMenuLabel", 2);
+__decorateClass([
+  state()
+], SynPrioNav.prototype, "itemPositionsCached", 2);
+__decorateClass([
+  state()
+], SynPrioNav.prototype, "amountOfNavItems", 2);
+__decorateClass([
+  state()
+], SynPrioNav.prototype, "amountOfVisibleItems", 2);
+__decorateClass([
+  state()
+], SynPrioNav.prototype, "hasItemsInDropdown", 2);
+
+export {
+  SynPrioNav
+};
+//# sourceMappingURL=chunk.U2H36O5J.js.map

package/dist/chunks/chunk.U2H36O5J.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/prio-nav/prio-nav.component.ts"],
+  "sourcesContent": ["/* eslint-disable no-param-reassign */\nimport type { CSSResultGroup } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { html } from 'lit/static-html.js';\nimport { property, query, state } from 'lit/decorators.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport styles from './prio-nav.styles.js';\nimport SynDropdown from '../dropdown/dropdown.component.js';\nimport SynIcon from '../icon/icon.component.js';\nimport SynMenu from '../menu/menu.component.js';\nimport SynNavItem from '../nav-item/nav-item.component.js';\nimport {\n  filterOnlyNavItems,\n  getAssignedElementsForSlot,\n} from './utils.js';\n\n/**\n * @summary The `<syn-prio-nav />` element provides a generic navigation bar\n * that can be used to group multiple navigation items  (usually horizontal `<syn-nav-item />`s)\n * together. It will automatically group all items not visible in the viewport into a custom\n * priority menu.\n *\n * @example\n * <syn-prio-nav>\n *  <syn-nav-item current horizontal>Item 1</syn-nav-item>\n *  <button role=\"menuitem\">Item 2 (custom)</button>\n *  <syn-nav-item horizontal>Item 3</syn-nav-item>\n * </syn-prio-nav>\n *\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-prio-nav--docs\n * @status stable\n * @since 1.14.0\n *\n * @dependency syn-dropdown\n * @dependency syn-icon\n * @dependency syn-menu\n * @dependency syn-nav-item\n *\n * @slot - The given navigation items. Must be horizontal `<syn-nav-item>`s\n *    or have a role of \"menuitem\"\n *\n * @csspart base - The component's base wrapper.\n * @csspart priority-menu - The wrapper around the priority menu\n * @csspart priority-menu-nav-item - The navigation item for the priority menu\n * @csspart priority-menu-label - The label for the priority menu\n * @csspart priority-menu-icon - The icon for the priority menu\n * @csspart priority-menu-container - The container for the shifted navigation items,\n *    if there is not enough space.\n *\n */\nexport default class SynPrioNav extends SynergyElement {\n  static styles: CSSResultGroup = [componentStyles, styles];\n\n  static dependencies = {\n    'syn-dropdown': SynDropdown,\n    'syn-icon': SynIcon,\n    'syn-menu': SynMenu,\n    'syn-nav-item': SynNavItem,\n  };\n\n  /**\n   * Internal resize observer\n   */\n  private resizeObserver: ResizeObserver;\n\n  /**\n   * Reference to the rendered children slot\n   */\n  @query('slot:not([name])') private defaultSlot: HTMLSlotElement;\n\n  /**\n   * Reference to the slot where priority menu items are placed\n   */\n  @query('slot[name=menu]') private menuSlot: HTMLSlotElement;\n\n  /**\n   * The wrapper that holds the horizontal navigation items\n   */\n  @query('.horizontal-nav') private horizontalNav: HTMLDivElement;\n\n  /**\n   * The priority menu dropdown\n   */\n  @query('.priority-menu') private priorityMenu: SynDropdown;\n\n  /**\n   * The components priority menu label.\n   * This will be shown after the priority menu 3 dots link\n   */\n  @property({ attribute: 'priority-menu-label' }) priorityMenuLabel = 'Menu';\n\n  /**\n   * Internal state reflecting if the item positions have been cached\n   */\n  @state() private itemPositionsCached = false;\n\n  /**\n   * The amount of nav items that are currently slotted\n   */\n  @state() private amountOfNavItems = 0;\n\n  /**\n   * The amount of items that are currently visible\n   */\n  @state() private amountOfVisibleItems = 0;\n\n  /**\n   * Internal state reflecting if there are items in the priority menu\n   */\n  @state() private hasItemsInDropdown = false;\n\n  /**\n   * Get a list of all slotted `<syn-nav-item />` elements\n   * that are either in the main slot or the priority menu slot\n   */\n  private getSlottedNavItems() {\n    const navItemsInDefaultSlot = filterOnlyNavItems(getAssignedElementsForSlot(this.defaultSlot));\n    const navItemsInMenuSlot = filterOnlyNavItems(getAssignedElementsForSlot(this.menuSlot));\n    return navItemsInDefaultSlot.concat(navItemsInMenuSlot);\n  }\n\n  /**\n   * Cache the items right offset position to make faster checks placement into priority menu\n   * @param items The items to cache the position for\n   */\n  private cacheItemPositions(items: SynNavItem[]) {\n    items.forEach(item => {\n      // We have to measure while the items are in the primary slot,\n      // else we will just get the placement in the priority menu\n      item.removeAttribute('slot');\n      const { right } = item.getBoundingClientRect();\n      item.dataset.right = right.toString();\n    });\n\n    this.itemPositionsCached = true;\n  }\n\n  /**\n   * Determines which items should be shown or hidden, depending on the current width\n   */\n  private handlePriorityMenu() {\n    const navItems = this.getSlottedNavItems();\n\n    if (!this.itemPositionsCached) {\n      this.cacheItemPositions(navItems);\n    }\n\n    // Get the widths of the horizontal nav and the priority menu\n    // We subtract the width of the priority menu to get the final width\n    const { width } = this.horizontalNav.getBoundingClientRect();\n    const { clientWidth } = this.priorityMenu;\n    const finalWidth = width - clientWidth;\n\n    // Cache the first item\n    let firstHiddenItemRightPos: number | undefined;\n\n    let visibleItems = 0;\n\n    // Save the position of all the elements in a cache\n    navItems.forEach(item => {\n      // Make sure to use the cache obtained in createGhostItems\n      const isHidden = firstHiddenItemRightPos || parseFloat(item.dataset.right!) >= finalWidth;\n\n      if (isHidden) {\n        item.removeAttribute('horizontal');\n        item.setAttribute('slot', 'menu');\n\n        // Makes sure the item is focusable in a syn-dropdown\n        item.setAttribute('role', 'menuitem');\n\n        // Get the position of the first item\n        // Will get used to position the priority menu\n        if (!firstHiddenItemRightPos) {\n          firstHiddenItemRightPos = parseFloat(item.dataset.right!);\n        }\n      } else {\n        visibleItems += 1;\n        item.setAttribute('horizontal', 'true');\n        item.removeAttribute('slot');\n        item.removeAttribute('tabindex');\n\n        // Reset the role to the original value\n        if (item.dataset.originalRole) {\n          item.setAttribute('role', item.dataset.originalRole);\n        } else {\n          item.removeAttribute('role');\n        }\n      }\n    });\n\n    // Tell the render call that we have items in the priority menu\n    // and toggle the visibility of the priority menu label\n    this.hasItemsInDropdown = visibleItems !== navItems.length;\n    this.amountOfVisibleItems = visibleItems;\n  }\n\n  private renderPriorityMenu() {\n    return html`\n      <syn-dropdown\n        class=${classMap({\n          'priority-menu': true,\n          'priority-menu--has-visible-items': this.amountOfVisibleItems !== 0,\n          'priority-menu--hidden': !this.hasItemsInDropdown,\n        })}\n        part=\"priority-menu\"\n        placement=\"bottom-end\"\n      >\n        <syn-nav-item class=\"priority-menu__nav-item\" slot=\"trigger\" horizontal part=\"priority-menu-nav-item\">\n          <syn-icon \n            class=\"priority-menu__icon\"\n            label=\"More\"\n            library=\"system\"\n            name=\"more\"\n            part=\"priority-menu-icon\"\n            slot=\"prefix\"\n          >\n          </syn-icon>\n          <span\n            class=${classMap({\n              'priority-menu__label': true,\n              'priority-menu__label--visible': this.amountOfVisibleItems === 0,\n            })}\n            part=\"priority-menu-label\"\n          >\n            ${this.priorityMenuLabel}\n          </span>\n        </syn-nav-item>\n\n        <syn-menu part=\"priority-menu-container\">\n          <slot name=\"menu\"></slot>\n        </syn-menu>\n\n      </syn-dropdown>\n    `;\n  }\n\n  private slotChange() {\n    const slottedItems = this.getSlottedNavItems();\n\n    // Make sure to trigger a recalculation of the item positions if we a new list of slotted items\n    if (slottedItems.length !== this.amountOfNavItems) {\n      this.cacheItemPositions(slottedItems);\n      this.handlePriorityMenu();\n      this.amountOfNavItems = slottedItems.length;\n    }\n  }\n\n  protected firstUpdated() {\n    // Cache the original role of the items so we can reset it if needed.\n    this.getSlottedNavItems().forEach(item => {\n      item.dataset.originalRole = item.getAttribute('role') ?? '';\n    });\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.resizeObserver = new ResizeObserver(() => this.handlePriorityMenu());\n    this.resizeObserver.observe(this);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.resizeObserver.unobserve(this);\n  }\n\n  render() {\n    /* eslint-disable @typescript-eslint/unbound-method */\n    return html`\n      <nav class=\"horizontal-nav\" part=\"base\">\n        <slot @slotchange=${this.slotChange}></slot>\n        ${this.renderPriorityMenu()}\n      </nav>\n    `;\n    /* eslint-enable @typescript-eslint/unbound-method */\n  }\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/chunks/chunk.UHVHULGW.js

@@ -0,0 +1,286 @@
+import {
+  side_nav_styles_default
+} from "./chunk.GO3CCKC3.js";
+import {
+  SynDivider
+} from "./chunk.TUFBQA52.js";
+import {
+  SynDrawer
+} from "./chunk.3M6IVPMZ.js";
+import {
+  unlockBodyScrolling
+} from "./chunk.RIJKFEYZ.js";
+import {
+  waitForEvent
+} from "./chunk.7BEVGRQ2.js";
+import {
+  getAnimation,
+  setAnimation,
+  setDefaultAnimation
+} from "./chunk.QAUTITK3.js";
+import {
+  HasSlotController
+} from "./chunk.66WXVGAW.js";
+import {
+  watch
+} from "./chunk.AVTU2BGE.js";
+import {
+  LocalizeController
+} from "./chunk.GEHO4WRP.js";
+import {
+  SynergyElement,
+  component_styles_default
+} from "./chunk.VCFVQ6KS.js";
+import {
+  __decorateClass
+} from "./chunk.QNDC5KWA.js";
+
+// src/components/side-nav/side-nav.component.ts
+import { classMap } from "lit/directives/class-map.js";
+import { html } from "lit/static-html.js";
+import { property, query, state } from "lit/decorators.js";
+var SynSideNav = class extends SynergyElement {
+  constructor() {
+    super();
+    this.hasSlotController = new HasSlotController(this, "[default]", "footer");
+    this.localize = new LocalizeController(this);
+    this.isAnimationActive = false;
+    this.open = false;
+    this.rail = false;
+    this.noFocusTrapping = false;
+    this.handleMouseEnter = this.handleMouseEnter.bind(this);
+    this.handleMouseLeave = this.handleMouseLeave.bind(this);
+  }
+  setDelayedCallback(callback) {
+    clearTimeout(this.timeout);
+    this.timeout = setTimeout(callback, 100);
+  }
+  handleMouseEnter() {
+    this.setDelayedCallback(() => {
+      this.open = true;
+    });
+  }
+  handleMouseLeave() {
+    this.setDelayedCallback(() => {
+      this.open = false;
+    });
+  }
+  handleRequestClose() {
+    if (this.open) {
+      this.open = false;
+    }
+  }
+  addMouseListener() {
+    var _a, _b;
+    (_a = this.drawer.shadowRoot.querySelector(".drawer__panel")) == null ? void 0 : _a.addEventListener("mouseenter", this.handleMouseEnter);
+    (_b = this.drawer.shadowRoot.querySelector(".drawer__panel")) == null ? void 0 : _b.addEventListener("mouseleave", this.handleMouseLeave);
+  }
+  removeMouseListener() {
+    var _a, _b;
+    (_a = this.drawer.shadowRoot.querySelector(".drawer__panel")) == null ? void 0 : _a.removeEventListener("mouseenter", this.handleMouseEnter);
+    (_b = this.drawer.shadowRoot.querySelector(".drawer__panel")) == null ? void 0 : _b.removeEventListener("mouseleave", this.handleMouseLeave);
+  }
+  setDrawerVisibility(isVisible) {
+    var _a;
+    this.drawer.shadowRoot.querySelector(".drawer").hidden = !isVisible;
+    (_a = this.drawer.shadowRoot.querySelector(".drawer__panel")) == null ? void 0 : _a.setAttribute("aria-hidden", isVisible ? "false" : "true");
+  }
+  forceDrawerVisibilityForRailMode() {
+    return waitForEvent(this, "syn-after-hide").then(() => {
+      this.setDrawerVisibility(true);
+      this.isAnimationActive = false;
+    });
+  }
+  setDrawerAnimations() {
+    const showAnimation = getAnimation(this, `sideNav.show${this.rail ? "Rail" : "NonRail"}`, { dir: this.localize.dir() });
+    const hideAnimation = getAnimation(this, `sideNav.hide${this.rail ? "Rail" : "NonRail"}`, { dir: this.localize.dir() });
+    const hideOverlay = getAnimation(this, "sideNav.overlay.hide", { dir: this.localize.dir() });
+    const showOverlay = getAnimation(this, "sideNav.overlay.show", { dir: this.localize.dir() });
+    setAnimation(this.drawer, "drawer.showStart", showAnimation);
+    setAnimation(this.drawer, "drawer.hideStart", hideAnimation);
+    setAnimation(this.drawer, "drawer.overlay.hide", hideOverlay);
+    setAnimation(this.drawer, "drawer.overlay.show", showOverlay);
+  }
+  handleModeChange() {
+    this.setDrawerAnimations();
+    if (this.rail) {
+      this.addMouseListener();
+      this.setDrawerVisibility(true);
+    } else {
+      this.removeMouseListener();
+      if (!this.open) {
+        this.setDrawerVisibility(false);
+      }
+    }
+  }
+  handleOpenChange() {
+    if (this.rail) {
+      this.isAnimationActive = true;
+      if (!this.open) {
+        this.forceDrawerVisibilityForRailMode();
+      } else {
+        waitForEvent(this.drawer, "syn-after-show").then(() => {
+          this.isAnimationActive = false;
+        });
+      }
+    }
+  }
+  handleFocusTrapping() {
+    if (!this.rail) {
+      if (this.noFocusTrapping) {
+        this.drawer.modal.activateExternal();
+      } else {
+        this.drawer.modal.deactivateExternal();
+      }
+    }
+  }
+  /** Shows the side-nav. */
+  async show() {
+    if (this.open) {
+      return void 0;
+    }
+    this.open = true;
+    return waitForEvent(this, "syn-after-show");
+  }
+  /** Hides the side-nav */
+  async hide() {
+    if (!this.open) {
+      return void 0;
+    }
+    this.open = false;
+    return waitForEvent(this, "syn-after-hide");
+  }
+  /**
+   * Initial setup for first render like special rail mode handling and drawer animations.
+   * */
+  firstUpdated() {
+    this.setDrawerAnimations();
+    if (this.rail) {
+      this.drawer.updateComplete.then(() => {
+        this.addMouseListener();
+        this.setDrawerVisibility(true);
+      });
+    } else if (this.noFocusTrapping) {
+      this.drawer.modal.activateExternal();
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    unlockBodyScrolling(this.drawer);
+    this.drawer.modal.deactivate();
+  }
+  render() {
+    const isTouch = window.navigator.maxTouchPoints > 0 || !!("ontouchstart" in window);
+    const hasFooter = this.hasSlotController.test("footer");
+    return html`
+      <nav
+        class=${classMap({
+      "side-nav": true,
+      "side-nav--animation": this.isAnimationActive,
+      "side-nav--fix": !this.rail,
+      "side-nav--has-footer": hasFooter,
+      "side-nav--open": this.open,
+      "side-nav--rail": this.rail,
+      "side-nav--touch": isTouch
+    })}
+        part="base"
+      >
+        
+        <syn-drawer
+          class="side-nav__drawer"
+          ?contained=${this.rail}
+          exportparts="overlay"
+          label=${this.localize.term("sideNav")}
+          no-header
+          ?open=${this.open}
+          part="drawer"
+          placement="start"
+          @syn-request-close=${this.handleRequestClose}          
+        >
+          <div part="content-container" class="side-nav__content-container">
+            <slot part="content" ></slot>
+          </div>
+          
+          <footer class="side-nav__footer" part="footer-container" slot="footer">  
+
+            ${hasFooter ? html`<syn-divider part="footer-divider" class="side-nav__footer-divider"></syn-divider>` : ""}
+            <slot name="footer" part="footer" ></slot> 
+          
+          </footer>
+
+        </syn-drawer>
+
+      </nav>
+    `;
+  }
+};
+SynSideNav.styles = [component_styles_default, side_nav_styles_default];
+SynSideNav.dependencies = {
+  "syn-divider": SynDivider,
+  "syn-drawer": SynDrawer
+};
+__decorateClass([
+  state()
+], SynSideNav.prototype, "isAnimationActive", 2);
+__decorateClass([
+  query(".side-nav__drawer")
+], SynSideNav.prototype, "drawer", 2);
+__decorateClass([
+  property({ reflect: true, type: Boolean })
+], SynSideNav.prototype, "open", 2);
+__decorateClass([
+  property({ reflect: true, type: Boolean })
+], SynSideNav.prototype, "rail", 2);
+__decorateClass([
+  property({ attribute: "no-focus-trapping", reflect: true, type: Boolean })
+], SynSideNav.prototype, "noFocusTrapping", 2);
+__decorateClass([
+  watch("rail", { waitUntilFirstUpdate: true })
+], SynSideNav.prototype, "handleModeChange", 1);
+__decorateClass([
+  watch("open", { waitUntilFirstUpdate: true })
+], SynSideNav.prototype, "handleOpenChange", 1);
+__decorateClass([
+  watch("noFocusTrapping", { waitUntilFirstUpdate: true })
+], SynSideNav.prototype, "handleFocusTrapping", 1);
+setDefaultAnimation("sideNav.showRail", {
+  keyframes: [
+    { width: "4.5rem" },
+    { width: "25rem" }
+  ],
+  options: { duration: 250, easing: "ease" }
+});
+setDefaultAnimation("sideNav.showNonRail", {
+  keyframes: [
+    { opacity: 0, translate: "-100%" },
+    { opacity: 1, translate: "0" }
+  ],
+  options: { duration: 250, easing: "ease" }
+});
+setDefaultAnimation("sideNav.hideNonRail", {
+  keyframes: [
+    { opacity: 1, translate: "0" },
+    { opacity: 0, translate: "-100%" }
+  ],
+  options: { duration: 250, easing: "ease" }
+});
+setDefaultAnimation("sideNav.hideRail", {
+  keyframes: [
+    { width: "25rem" },
+    { width: "4.5rem" }
+  ],
+  options: { duration: 250, easing: "ease" }
+});
+setDefaultAnimation("sideNav.overlay.show", {
+  keyframes: [{ opacity: 0 }, { opacity: 1 }],
+  options: { duration: 250 }
+});
+setDefaultAnimation("sideNav.overlay.hide", {
+  keyframes: [{ opacity: 1 }, { opacity: 0 }],
+  options: { duration: 250 }
+});
+
+export {
+  SynSideNav
+};
+//# sourceMappingURL=chunk.UHVHULGW.js.map