@synergy-design-system/components 2.74.4 → 2.76.0

package/dist/chunks/{chunk.VWY2RG4F.js → chunk.EWKVHJPJ.js}

@@ -10,6 +10,11 @@ var button_custom_styles_default = css`
     outline-offset: var(--syn-focus-ring-width);
   }
 
+  /** #429: Use token for opacity */
+  .button--disabled {
+    opacity: var(--syn-input-disabled-opacity);
+  }
+
   /*
    * Adjustments for button label paddings
    * @see https://github.com/synergy-design-system/synergy-design-system/issues/243
@@ -62,42 +67,61 @@ var button_custom_styles_default = css`
     vertical-align: -8px;
   }
 
-
   /**
    * Size modifiers
    */
-  .button.button--medium.button--has-label .button__label {
-    font-size: var(--syn-font-size-medium);
-  } 
+  .button--small {
+    border-radius: var(--syn-button-border-radius-small, var(--syn-input-border-radius-small));
+  }
+
+  .button--medium {
+    border-radius: var(--syn-button-border-radius-medium, var(--syn-input-border-radius-medium));
+  }
 
-  .button.button--large.button--has-label .button__label {
-    font-size: var(--syn-font-size-large);
+  .button--large {
+    border-radius: var(--syn-button-border-radius-large, var(--syn-input-border-radius-large));
   }
 
   /*
    * Standard buttons
    */
+  .button--filled.button--primary {
+    background: var(--syn-button-color, var(--syn-color-primary-600));
+    border-color: var(--syn-button-color, var(--syn-color-primary-600));
+    color: var(--syn-button-filled-color-text, var(--syn-color-neutral-0));
+  }
+
   .button--filled.button--primary.button--disabled {
     background-color: var(--syn-color-neutral-600);
     border-color: var(--syn-color-neutral-600);
-    color: var(--syn-color-neutral-0);
+    color: var(--syn-typography-color-text-inverted);
   }
 
   .button--filled.button--primary:hover:not(.button--disabled) {
-    background-color: var(--syn-color-primary-900);
-    border-color: var(--syn-color-primary-900);
-    color: var(--syn-color-neutral-0);
+    background-color: var(--syn-button-color-hover, var(--syn-color-primary-900));
+    border-color: var(--syn-button-color-hover, var(--syn-color-primary-900));
+    color: var(--syn-button-filled-color-text-hover, var(--syn-color-neutral-0));
   }
 
   .button--filled.button--primary:active:not(.button--disabled) {
-    background-color: var(--syn-color-primary-950);
-    border-color: var(--syn-color-primary-950);
-    color: var(--syn-color-neutral-0);
+    background-color: var(--syn-button-color-active, var(--syn-color-primary-900));
+    border-color: var(--syn-button-color-active, var(--syn-color-primary-900));
+    color: var(--syn-button-filled-color-text-active, var(--syn-color-neutral-0));
   }
 
   /*
    * Outline buttons
    */
+  .button--outline {
+    /** #901: Use token for border width */
+    border-width: var(--syn-input-border-width);
+  }
+
+  .button--outline.button--primary {
+    border-color: var(--syn-button-color, var(--syn-color-primary-600));
+    color: var(--syn-button-outline-color-text, var(--syn-color-primary-600));
+  }
+
   .button--outline.button--primary.button--disabled {
     background: none;
     border-color: var(--syn-color-neutral-600);
@@ -106,28 +130,34 @@ var button_custom_styles_default = css`
 
   .button--outline.button--primary:hover:not(.button--disabled),
   .button--outline.button--primary.button--checked:not(.button--disabled) {
-    background: none;
-    border-color: var(--syn-color-primary-900);
-    color: var(--syn-color-primary-900);
+    background-color: var(--syn-button-outline-color-hover, var(--syn-color-primary-900));
+    border-color: var(--syn-button-outline-color-hover, var(--syn-color-primary-900));
+    color: var(--syn-button-outline-color-text-hover, var(--syn-color-neutral-0));
   }
 
   .button--outline.button--primary:active:not(.button--disabled) {
-    background: inherit;
-    border-color:  var(--syn-color-primary-950);
-    color:  var(--syn-color-primary-950);
+    background-color: var(--syn-button-outline-color-active, var(--syn-color-primary-950));
+    border-color: var(--syn-button-outline-color-active, var(--syn-color-primary-950));
+    color: var(--syn-button-outline-color-text-active, var(--syn-color-neutral-0));
   }
 
   /*
    * Text buttons
    */
+  .button--text {
+    color: var(--syn-button-text-color-text, var(--syn-color-primary-600));
+  }
+
   .button--text:hover:not(.button--disabled) {
-    color: var(--syn-color-primary-900);
+    color: var(--syn-button-text-color-text-hover, var(--syn-color-primary-900));
+  }
+
+  .button--text:focus-visible:not(.button--disabled) {
+    color: var(--syn-button-color, var(--syn-color-primary-500));
   }
 
   .button--text.button--primary:active:not(.button--disabled) {
-    background: inherit;
-    border-color: transparent;
-    color:  var(--syn-color-primary-950);
+    color: var(--syn-button-text-color-text-active, var(--syn-color-primary-950));
   }
 
   .button--text.button--primary.button--disabled {
@@ -184,11 +214,6 @@ var button_custom_styles_default = css`
     font-size: var(--syn-font-size-2x-large);
   }
 
-  /** #429: Use token for opacity */
-  .button--disabled { 
-    opacity: var(--syn-input-disabled-opacity);
-  }
-
   /*
    * Caret modifier
    */
@@ -208,4 +233,4 @@ var button_custom_styles_default = css`
 export {
   button_custom_styles_default
 };
-//# sourceMappingURL=chunk.VWY2RG4F.js.map
+//# sourceMappingURL=chunk.EWKVHJPJ.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/button/button.custom.styles.ts"],
+  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  .button {\n    font-weight: var(--syn-font-weight-bold);\n  }\n\n  .button:focus-visible {\n    outline: var(--syn-focus-ring-color) solid var(--syn-focus-ring-width);\n    outline-offset: var(--syn-focus-ring-width);\n  }\n\n  /** #429: Use token for opacity */\n  .button--disabled {\n    opacity: var(--syn-input-disabled-opacity);\n  }\n\n  /*\n   * Adjustments for button label paddings\n   * @see https://github.com/synergy-design-system/synergy-design-system/issues/243\n   */\n  .button--has-prefix.button--small .button__label {\n    padding-inline-start: var(--syn-spacing-2x-small);\n  }\n\n  .button--has-suffix.button--small .button__label,\n  .button--caret.button--small .button__label {\n    padding-inline-end: var(--syn-spacing-2x-small);\n  }\n\n  .button--has-prefix.button--medium .button__label {\n    padding-inline-start: var(--syn-spacing-x-small);\n  }\n\n  .button--has-suffix.button--medium .button__label,\n  .button--caret.button--medium .button__label {\n    padding-inline-end: var(--syn-spacing-x-small);\n  }\n\n  /**\n   * Icon-only buttons\n   */\n  .button--small .button__label.button__icon-only {\n    padding: 0 calc(var(--syn-spacing-x-small) + var(--syn-spacing-4x-small));\n  }\n\n  .button--small .button__label::slotted(syn-icon) {\n    font-size: var(--syn-font-size-medium);\n    vertical-align: -3px;\n  }\n\n  .button--medium .button__label.button__icon-only {\n    padding: 0 calc(var(--syn-spacing-small) - var(--syn-spacing-4x-small));\n  }\n\n  .button--medium .button__label::slotted(syn-icon) {\n    font-size: var(--syn-font-size-x-large);\n    vertical-align: -6px;\n  }\n\n  .button--large .button__label.button__icon-only {\n    padding: 0 calc(var(--syn-spacing-medium) - var(--syn-spacing-4x-small));\n  }\n\n  .button--large .button__label::slotted(syn-icon) {\n    font-size: var(--syn-font-size-2x-large);\n    vertical-align: -8px;\n  }\n\n  /**\n   * Size modifiers\n   */\n  .button--small {\n    border-radius: var(--syn-button-border-radius-small, var(--syn-input-border-radius-small));\n  }\n\n  .button--medium {\n    border-radius: var(--syn-button-border-radius-medium, var(--syn-input-border-radius-medium));\n  }\n\n  .button--large {\n    border-radius: var(--syn-button-border-radius-large, var(--syn-input-border-radius-large));\n  }\n\n  /*\n   * Standard buttons\n   */\n  .button--filled.button--primary {\n    background: var(--syn-button-color, var(--syn-color-primary-600));\n    border-color: var(--syn-button-color, var(--syn-color-primary-600));\n    color: var(--syn-button-filled-color-text, var(--syn-color-neutral-0));\n  }\n\n  .button--filled.button--primary.button--disabled {\n    background-color: var(--syn-color-neutral-600);\n    border-color: var(--syn-color-neutral-600);\n    color: var(--syn-typography-color-text-inverted);\n  }\n\n  .button--filled.button--primary:hover:not(.button--disabled) {\n    background-color: var(--syn-button-color-hover, var(--syn-color-primary-900));\n    border-color: var(--syn-button-color-hover, var(--syn-color-primary-900));\n    color: var(--syn-button-filled-color-text-hover, var(--syn-color-neutral-0));\n  }\n\n  .button--filled.button--primary:active:not(.button--disabled) {\n    background-color: var(--syn-button-color-active, var(--syn-color-primary-900));\n    border-color: var(--syn-button-color-active, var(--syn-color-primary-900));\n    color: var(--syn-button-filled-color-text-active, var(--syn-color-neutral-0));\n  }\n\n  /*\n   * Outline buttons\n   */\n  .button--outline {\n    /** #901: Use token for border width */\n    border-width: var(--syn-input-border-width);\n  }\n\n  .button--outline.button--primary {\n    border-color: var(--syn-button-color, var(--syn-color-primary-600));\n    color: var(--syn-button-outline-color-text, var(--syn-color-primary-600));\n  }\n\n  .button--outline.button--primary.button--disabled {\n    background: none;\n    border-color: var(--syn-color-neutral-600);\n    color: var(--syn-color-neutral-600);\n  }\n\n  .button--outline.button--primary:hover:not(.button--disabled),\n  .button--outline.button--primary.button--checked:not(.button--disabled) {\n    background-color: var(--syn-button-outline-color-hover, var(--syn-color-primary-900));\n    border-color: var(--syn-button-outline-color-hover, var(--syn-color-primary-900));\n    color: var(--syn-button-outline-color-text-hover, var(--syn-color-neutral-0));\n  }\n\n  .button--outline.button--primary:active:not(.button--disabled) {\n    background-color: var(--syn-button-outline-color-active, var(--syn-color-primary-950));\n    border-color: var(--syn-button-outline-color-active, var(--syn-color-primary-950));\n    color: var(--syn-button-outline-color-text-active, var(--syn-color-neutral-0));\n  }\n\n  /*\n   * Text buttons\n   */\n  .button--text {\n    color: var(--syn-button-text-color-text, var(--syn-color-primary-600));\n  }\n\n  .button--text:hover:not(.button--disabled) {\n    color: var(--syn-button-text-color-text-hover, var(--syn-color-primary-900));\n  }\n\n  .button--text:focus-visible:not(.button--disabled) {\n    color: var(--syn-button-color, var(--syn-color-primary-500));\n  }\n\n  .button--text.button--primary:active:not(.button--disabled) {\n    color: var(--syn-button-text-color-text-active, var(--syn-color-primary-950));\n  }\n\n  .button--text.button--primary.button--disabled {\n    color: var(--syn-color-neutral-600);\n  }\n\n  /**\n   * Button spacing\n   */\n  .button.button--small.button--has-label.button--has-prefix {\n    padding-inline-start: var(--syn-spacing-small);\n  }\n\n  .button.button--small.button--has-label.button--has-suffix {\n    padding-inline-end: var(--syn-spacing-small);\n  }\n\n  .button.button--small.button--has-prefix .button__prefix, \n  .button.button--small.button--has-suffix .button__suffix {\n    font-size: var(--syn-spacing-medium);\n  }\n\n  .button.button--medium.button--has-label.button--has-prefix {\n    padding-inline-start: var(--syn-spacing-medium);\n  } \n\n  .button.button--medium.button--has-label.button--has-suffix {\n    padding-inline-end: var(--syn-spacing-medium);\n  }\n\n  .button.button--medium.button--has-prefix .button__prefix, \n  .button.button--medium.button--has-suffix .button__suffix {\n    font-size: var(--syn-spacing-large);\n  }\n\n  .button.button--large.button--has-label.button--has-prefix {\n    padding-inline-start: var(--syn-spacing-large);\n  }\n\n  .button.button--large.button--has-label.button--has-prefix .button__label {\n    padding-inline-start: var(--syn-spacing-small);\n  }\n\n  .button.button--large.button--has-label.button--has-suffix {\n    padding-inline-end: var(--syn-spacing-large);\n  }\n\n  .button.button--large.button--has-label.button--has-suffix .button__label {\n    padding-inline-end: var(--syn-spacing-small);\n  }\n\n  .button.button--large.button--has-prefix .button__prefix, \n  .button.button--large.button--has-suffix .button__suffix {\n    font-size: var(--syn-font-size-2x-large);\n  }\n\n  /*\n   * Caret modifier\n   */\n  .button--caret.button--small .button__caret{\n    font-size: var(--syn-font-size-medium);\n  }\n\n  .button--caret.button--medium .button__caret{\n    font-size: var(--syn-font-size-x-large);\n  }\n\n  .button--caret.button--large .button__caret{\n    font-size: var(--syn-font-size-2x-large);\n  }\n`;\n"],
+  "mappings": ";AAAA,SAAS,WAAW;AAEpB,IAAO,+BAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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.PFYF5DIA.js → chunk.F5AZ5JZC.js}

@@ -10,7 +10,7 @@ import {
 } from "./chunk.G76BKD7B.js";
 import {
   SynPopup
-} from "./chunk.ETEGLGBQ.js";
+} from "./chunk.UIP7LAXP.js";
 import {
   waitForEvent
 } from "./chunk.C2ENQBPM.js";
@@ -33,7 +33,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.FOSWTCLV.js";
+} from "./chunk.NFRM6KUP.js";
 import {
   __decorateClass
 } from "./chunk.Z4XV3SMG.js";
@@ -385,4 +385,4 @@ setDefaultAnimation("dropdown.hide", {
 export {
   SynDropdown
 };
-//# sourceMappingURL=chunk.PFYF5DIA.js.map
+//# sourceMappingURL=chunk.F5AZ5JZC.js.map

package/dist/chunks/{chunk.Q4BF3BVQ.js → chunk.FBNGI7ES.js}

@@ -1,6 +1,6 @@
 import {
   SynNavItem
-} from "./chunk.I2GVGBNK.js";
+} from "./chunk.KQQ63GNA.js";
 
 // src/components/nav-item/nav-item.ts
 var nav_item_default = SynNavItem;
@@ -9,4 +9,4 @@ SynNavItem.define("syn-nav-item");
 export {
   nav_item_default
 };
-//# sourceMappingURL=chunk.Q4BF3BVQ.js.map
+//# sourceMappingURL=chunk.FBNGI7ES.js.map

package/dist/chunks/{chunk.M74YQZ5G.js → chunk.FCYQT7CQ.js}

@@ -123,6 +123,14 @@ var nav_item_styles_default = css`
     opacity: 1;
   }
 
+  /**
+   * #443: Add support for active state
+   */
+  .nav-item:not(.nav-item--disabled):active::before {
+    background: var(--syn-interactive-background-color-active, var(--syn-color-neutral-50));
+    opacity: 1;
+  }
+
   /**
    * When using horizontal, the background should extend the element
    * on the left and right so the animation for the indicator can be seen
@@ -327,4 +335,4 @@ var nav_item_styles_default = css`
 export {
   nav_item_styles_default
 };
-//# sourceMappingURL=chunk.M74YQZ5G.js.map
+//# sourceMappingURL=chunk.FCYQT7CQ.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/nav-item/nav-item.styles.ts"],
+  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  /**\n   * Default alignment is inline block when we are in horizontal mode\n   */\n  :host {\n    /**\n     * The indentation property defines the current \"level\" the component is on\n     * It may be set per hand, but is normally set during the render phase\n     * of a <syn-nav-item /> for slotted children\n     */\n    --indentation: 0;\n\n    /**\n     * Defines the amount of pixels each indentation level will shift the content to the left\n     */\n    --indentation-stepping: var(--syn-spacing-x-large);\n\n    /**\n     * Display property of the children. Defaults to \"contents\"\n     */\n    --display-children: contents;\n\n    display: block;\n  }\n\n  /**\n   * Switch alignment to inline-block when we are in horizontal mode\n   */\n  :host([horizontal]) {\n    display: inline-block;\n  }\n\n  /**\n   * Core nav item wrapper\n   */\n  .nav-item {\n    align-items: center;\n    background: transparent;\n    border: none;\n    box-shadow: inset 0 -1px 0 0 transparent;\n    box-sizing: border-box;\n    color: var(--syn-typography-color-text);\n    cursor: pointer;\n    display: inline-flex;\n    font: var(--syn-font-sans);\n    font-size: var(--syn-font-size-small);\n    min-height: var(--syn-spacing-2x-large);\n    padding: var(--syn-spacing-small) var(--syn-spacing-large);\n    position: relative;\n    text-align: left;\n    text-decoration: none;\n    transition: background-color var(--syn-transition-fast) ease-in-out, box-shadow var(--syn-transition-fast) ease-in-out;\n    width: 100%;\n    z-index: 0;\n  }\n\n  .nav-item:focus-visible {\n    outline: none;\n  }\n\n  .nav-item:focus-visible::after {\n    content: '';\n    display: block;\n    height: 100%;\n    left: calc(var(--syn-spacing-x-small) * -1);\n    outline: var(--syn-focus-ring);\n    outline-offset: -2px;\n    position: absolute;\n    top: 0;\n    width: calc(100% + 2 * var(--syn-spacing-x-small));\n  }\n\n  .nav-item--vertical:focus-visible::after {\n    left: 0;\n    width: 100%;\n  }\n\n  /**\n   * Horizontal nav items use narrower paddings\n   */\n  .nav-item--horizontal {\n    padding: var(--syn-spacing-small) 0;\n  }\n\n  /**\n   * Nav Items acting as accordion use a slightly narrower padding on the right side\n   */\n  .nav-item.nav-item-is-accordion {\n    padding-right: var(--syn-spacing-medium);\n  }\n\n  .nav-item--disabled {\n    cursor: not-allowed;\n  }\n\n  .nav-item--current {\n    font-weight: var(--syn-font-weight-bold);\n  }\n\n  /**\n   * Basic set up for the nav item prefix.\n   */\n  .nav-item:not(.nav-item--disabled)::before {\n    background: var(--syn-interactive-background-color-hover, var(--syn-color-neutral-50));\n    content: '';\n    display: block;\n    height: 100%;\n    left: 0;\n    opacity: 0;\n    position: absolute;\n    top: 0;\n    width: 100%;\n    z-index: -1;\n  }\n\n  /**\n   * Hover effect for the nav item.\n   * We use opacity to make sure the border-bottom is visible if used in the prio-nav in header\n   */\n  .nav-item:not(.nav-item--disabled):hover::before {\n    opacity: 1;\n  }\n\n  /**\n   * #443: Add support for active state\n   */\n  .nav-item:not(.nav-item--disabled):active::before {\n    background: var(--syn-interactive-background-color-active, var(--syn-color-neutral-50));\n    opacity: 1;\n  }\n\n  /**\n   * When using horizontal, the background should extend the element\n   * on the left and right so the animation for the indicator can be seen\n   */\n  .nav-item--horizontal:not(.nav-item--disabled)::before {\n    left: calc(var(--syn-spacing-x-small) * -1);\n    width: calc(100% + 2 * var(--syn-spacing-x-small));\n  }\n\n  /**\n   * The content wrapper is needed to get the disabled state right\n   * and also sets the left padding, according to the given indentation level.\n   *\n   * Normally, we would just use opacity directly on the button.\n   * However, when using the divider prop, this leads to problems\n   * as the divider itself will also get opaque.\n   */\n  .nav-item__content {\n    align-items: center;\n    display: flex;\n    padding-inline-start: calc(var(--indentation) * var(--indentation-stepping));\n    width: 100%;\n  }\n\n  .nav-item--disabled .nav-item__content {\n    opacity: var(--syn-opacity-50);\n  }\n\n  /**\n   * Slotted icons should use a default font size of large\n   */\n  .nav-item--has-prefix ::slotted(syn-icon),\n  .nav-item--has-suffix ::slotted(syn-icon) {\n    font-size: var(--syn-font-size-x-large);\n    min-width: var(--syn-font-size-x-large);\n  }\n\n  /**\n   * The chevron indicates the use as a <details /> element OR a link\n   */\n  .nav-item__chevron {\n    color: var(--syn-interactive-quiet-color);\n    font-size: var(--syn-font-size-x-large);\n    margin-inline-start: var(--syn-spacing-x-small);\n    rotate: 0deg;\n    transition: var(--syn-transition-medium) rotate ease;\n  }\n\n  .nav-item__chevron-open {\n    rotate: -180deg;\n  }\n\n  /**\n   * Items that have the chevron attribute set and are NOT accordions should always show a chevron pointing to the right\n   */\n  .nav-item:not(.nav-item-is-accordion) .nav-item__chevron {\n    rotate: -90deg;\n  }\n\n  /**\n   * Make the primary content container fill all available space\n   */\n  .nav-item__content-container {\n    flex: 1;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  /**\n   * Horizontal navigation items should not break words\n   */\n  .nav-item--horizontal .nav-item__content-container {\n    font-weight: var(--syn-font-weight-bold);\n    white-space: nowrap;\n  }\n\n  /**\n   * Show prefix only\n   */\n  /* stylelint-disable no-descending-specificity */\n  .nav-item--show-prefix-only .nav-item__content-container,\n  .nav-item--show-prefix-only .nav-item__suffix,\n  .nav-item--show-prefix-only .nav-item__chevron {\n    height: var(--syn-spacing-large);\n  }\n  /* stylelint-enable no-descending-specificity */\n\n  /**\n   * Adjust the paddings for the label, depending if there is a pre- and/or suffix available.\n   * But only if the there is a main content or additionally a prefix / suffix\n   */\n  .nav-item--has-prefix.nav-item--has-content .nav-item__content-container,\n  .nav-item--has-prefix.nav-item--has-suffix .nav-item__content-container {\n    margin-inline-start: var(--syn-spacing-x-small);\n  }\n\n  .nav-item--has-suffix.nav-item--has-content .nav-item__content-container,\n  .nav-item--has-suffix.nav-item--has-prefix .nav-item__content-container {\n    margin-inline-end: var(--syn-spacing-x-small);\n  }\n\n  /**\n   * Multi line content\n   */\n  /* stylelint-disable no-descending-specificity */\n  .nav-item--multi-line .nav-item__suffix,\n  .nav-item--multi-line .nav-item__prefix,\n  .nav-item--multi-line .nav-item__chevron {\n    align-self: flex-start;\n  }\n  /* stylelint-enable no-descending-specificity */\n\n  /* stylelint-disable no-descending-specificity */\n  .nav-item--multi-line .nav-item__suffix::slotted(syn-icon),\n  :not(.nav-item--show-prefix-only).nav-item--multi-line .nav-item__prefix::slotted(syn-icon),\n  .nav-item--multi-line .nav-item__chevron {\n    align-self: flex-start;\n  }\n  /* stylelint-enable no-descending-specificity */\n\n  /**\n   * The current indicator tells the user that the nav-item is the active one\n   */\n  .current-indicator {\n    background: transparent;\n    border: none;\n    margin: 0;\n    position: absolute;\n    transition: var(--syn-transition-medium) top ease,\n      var(--syn-transition-medium) right ease,\n      var(--syn-transition-medium) bottom ease,\n      var(--syn-transition-medium) left ease;\n    z-index: 1;\n  }\n\n  .current-indicator--visible {\n    background: var(--syn-interactive-emphasis-color, var(--syn-color-primary-600));\n  }\n\n  .nav-item--horizontal .current-indicator {\n    bottom: 0;\n    height: var(--syn-spacing-2x-small);\n    left: 0;\n    right: 0;\n  }\n\n  .nav-item--horizontal:hover .current-indicator--visible,\n  .nav-item--horizontal:focus-visible .current-indicator--visible {\n    left: calc(var(--syn-spacing-x-small) * -1);\n    right: calc(var(--syn-spacing-x-small) * -1);\n  }\n\n  .nav-item--vertical .current-indicator {\n    bottom: var(--syn-spacing-x-small);\n    left: 0;\n    top: var(--syn-spacing-x-small);\n    width: var(--syn-spacing-2x-small);\n  }\n\n  .nav-item--vertical:hover .current-indicator--visible,\n  .nav-item--vertical:focus-visible .current-indicator--visible {\n    bottom: 0;\n    top: 0;\n  }\n\n  /**\n   * Dividers are optionally displayed in horizontal nav items\n   */\n  .divider {\n    left: var(--syn-spacing-medium);\n    margin: 0;\n    position: absolute;\n    right: var(--syn-spacing-medium);\n    top: 0;\n  }\n\n  /**\n   * Make sure the divider blends into the background on hover\n   * for items that are NOT disabled.\n   */\n  .nav-item--vertical:not(.nav-item--disabled):hover .divider {\n    --color: var(--syn-interactive-background-color-hover);\n  }\n\n  /**\n   * Sub menu styling\n   */\n  summary.nav-item {\n    box-sizing: border-box;\n    display: flex;\n  }\n\n  details summary::-webkit-details-marker {\n    visibility: hidden;\n  }\n\n  .children {\n    display: var(--display-children)\n  }\n`;\n"],
+  "mappings": ";AAAA,SAAS,WAAW;AAEpB,IAAO,0BAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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.CDMURJPI.js → chunk.FT247QXJ.js}

@@ -1,6 +1,6 @@
 import {
   SynDrawer
-} from "./chunk.J5SLBTPO.js";
+} from "./chunk.HU234262.js";
 
 // src/components/drawer/drawer.ts
 var drawer_default = SynDrawer;
@@ -9,4 +9,4 @@ SynDrawer.define("syn-drawer");
 export {
   drawer_default
 };
-//# sourceMappingURL=chunk.CDMURJPI.js.map
+//# sourceMappingURL=chunk.FT247QXJ.js.map

package/dist/chunks/{chunk.ERUYV6G2.js → chunk.GIPNL77K.js}

@@ -12,7 +12,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.FOSWTCLV.js";
+} from "./chunk.NFRM6KUP.js";
 import {
   __decorateClass
 } from "./chunk.Z4XV3SMG.js";
@@ -76,4 +76,4 @@ __decorateClass([
 export {
   SynProgressRing
 };
-//# sourceMappingURL=chunk.ERUYV6G2.js.map
+//# sourceMappingURL=chunk.GIPNL77K.js.map

package/dist/chunks/{chunk.JXD6UCMG.js → chunk.GYIPN75I.js}

@@ -12,7 +12,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.FOSWTCLV.js";
+} from "./chunk.NFRM6KUP.js";
 import {
   __decorateClass
 } from "./chunk.Z4XV3SMG.js";
@@ -43,4 +43,4 @@ __decorateClass([
 export {
   SynDivider
 };
-//# sourceMappingURL=chunk.JXD6UCMG.js.map
+//# sourceMappingURL=chunk.GYIPN75I.js.map

package/dist/chunks/{chunk.W45HCBL4.js → chunk.H3TJDSSI.js}

@@ -1,6 +1,6 @@
 import {
   SynFile
-} from "./chunk.L3MA7MD6.js";
+} from "./chunk.MGCU74AY.js";
 
 // src/components/file/file.ts
 var file_default = SynFile;
@@ -9,4 +9,4 @@ SynFile.define("syn-file");
 export {
   file_default
 };
-//# sourceMappingURL=chunk.W45HCBL4.js.map
+//# sourceMappingURL=chunk.H3TJDSSI.js.map

package/dist/chunks/{chunk.J5SLBTPO.js → chunk.HU234262.js}

@@ -16,7 +16,7 @@ import {
 } from "./chunk.WXVOTRW5.js";
 import {
   SynIconButton
-} from "./chunk.RVCV6RUY.js";
+} from "./chunk.375RGFZE.js";
 import {
   waitForEvent
 } from "./chunk.C2ENQBPM.js";
@@ -42,7 +42,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.FOSWTCLV.js";
+} from "./chunk.NFRM6KUP.js";
 import {
   __decorateClass
 } from "./chunk.Z4XV3SMG.js";
@@ -407,4 +407,4 @@ setDefaultAnimation("drawer.overlay.hide", {
 export {
   SynDrawer
 };
-//# sourceMappingURL=chunk.J5SLBTPO.js.map
+//# sourceMappingURL=chunk.HU234262.js.map

package/dist/chunks/{chunk.KCC2VVVO.js → chunk.I6QFHKXA.js}

@@ -16,7 +16,7 @@ import {
 } from "./chunk.WXVOTRW5.js";
 import {
   SynIconButton
-} from "./chunk.RVCV6RUY.js";
+} from "./chunk.375RGFZE.js";
 import {
   waitForEvent
 } from "./chunk.C2ENQBPM.js";
@@ -42,7 +42,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.FOSWTCLV.js";
+} from "./chunk.NFRM6KUP.js";
 import {
   __decorateClass
 } from "./chunk.Z4XV3SMG.js";
@@ -292,4 +292,4 @@ setDefaultAnimation("dialog.overlay.hide", {
 export {
   SynDialog
 };
-//# sourceMappingURL=chunk.KCC2VVVO.js.map
+//# sourceMappingURL=chunk.I6QFHKXA.js.map

package/dist/chunks/{chunk.S5RYPLSE.js → chunk.I6STRHQ7.js}

@@ -1,6 +1,6 @@
 import {
   SynDropdown
-} from "./chunk.PFYF5DIA.js";
+} from "./chunk.F5AZ5JZC.js";
 
 // src/components/dropdown/dropdown.ts
 var dropdown_default = SynDropdown;
@@ -9,4 +9,4 @@ SynDropdown.define("syn-dropdown");
 export {
   dropdown_default
 };
-//# sourceMappingURL=chunk.S5RYPLSE.js.map
+//# sourceMappingURL=chunk.I6STRHQ7.js.map

package/dist/chunks/{chunk.XGBSRFQ2.js → chunk.IDD7M7LM.js}

@@ -9,17 +9,17 @@ import {
 } from "./chunk.FSWTBNSI.js";
 import {
   SynPopup
-} from "./chunk.ETEGLGBQ.js";
+} from "./chunk.UIP7LAXP.js";
 import {
   SynSpinner
-} from "./chunk.SBCPIDQP.js";
+} from "./chunk.SQBUJVZE.js";
 import {
   HasSlotController,
   getTextContent
 } from "./chunk.WVVQK5TE.js";
 import {
   SynIcon
-} from "./chunk.WVR5S62X.js";
+} from "./chunk.URUHLG3B.js";
 import {
   LocalizeController
 } from "./chunk.OAQRCZOO.js";
@@ -31,7 +31,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.FOSWTCLV.js";
+} from "./chunk.NFRM6KUP.js";
 import {
   __decorateClass,
   __privateAdd,
@@ -241,4 +241,4 @@ SynMenuItem = __decorateClass([
 export {
   SynMenuItem
 };
-//# sourceMappingURL=chunk.XGBSRFQ2.js.map
+//# sourceMappingURL=chunk.IDD7M7LM.js.map

package/dist/chunks/{chunk.EKUOSUGG.js → chunk.IHC6CDTV.js}

@@ -1,6 +1,6 @@
 import {
   SynValidate
-} from "./chunk.ASNF6T3D.js";
+} from "./chunk.5PRWFNPT.js";
 
 // src/components/validate/validate.ts
 var validate_default = SynValidate;
@@ -9,4 +9,4 @@ SynValidate.define("syn-validate");
 export {
   validate_default
 };
-//# sourceMappingURL=chunk.EKUOSUGG.js.map
+//# sourceMappingURL=chunk.IHC6CDTV.js.map

package/dist/chunks/{chunk.42BGLTQ3.js → chunk.ITOEFOYR.js}

@@ -18,7 +18,7 @@ import {
 } from "./chunk.7JGKUB4A.js";
 import {
   SynIcon
-} from "./chunk.WVR5S62X.js";
+} from "./chunk.URUHLG3B.js";
 import {
   LocalizeController
 } from "./chunk.OAQRCZOO.js";
@@ -33,7 +33,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.FOSWTCLV.js";
+} from "./chunk.NFRM6KUP.js";
 import {
   __decorateClass
 } from "./chunk.Z4XV3SMG.js";
@@ -247,4 +247,4 @@ setDefaultAnimation("details.hide", {
 export {
   SynDetails
 };
-//# sourceMappingURL=chunk.42BGLTQ3.js.map
+//# sourceMappingURL=chunk.ITOEFOYR.js.map

package/dist/chunks/{chunk.Q6YG3BQL.js → chunk.JXYTG6CG.js}

@@ -1,6 +1,6 @@
 import {
   SynOption
-} from "./chunk.MJZIGGWM.js";
+} from "./chunk.3D5ROFC3.js";
 
 // src/components/option/option.ts
 var option_default = SynOption;
@@ -9,4 +9,4 @@ SynOption.define("syn-option");
 export {
   option_default
 };
-//# sourceMappingURL=chunk.Q6YG3BQL.js.map
+//# sourceMappingURL=chunk.JXYTG6CG.js.map

package/dist/chunks/{chunk.I2GVGBNK.js → chunk.KQQ63GNA.js}

@@ -1,15 +1,15 @@
 import {
   nav_item_styles_default
-} from "./chunk.M74YQZ5G.js";
+} from "./chunk.FCYQT7CQ.js";
 import {
   SynDivider
-} from "./chunk.JXD6UCMG.js";
+} from "./chunk.GYIPN75I.js";
 import {
   HasSlotController
 } from "./chunk.WVVQK5TE.js";
 import {
   SynIcon
-} from "./chunk.WVR5S62X.js";
+} from "./chunk.URUHLG3B.js";
 import {
   watch
 } from "./chunk.BVZQ6QSY.js";
@@ -18,7 +18,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.FOSWTCLV.js";
+} from "./chunk.NFRM6KUP.js";
 import {
   __decorateClass
 } from "./chunk.Z4XV3SMG.js";
@@ -353,4 +353,4 @@ __decorateClass([
 export {
   SynNavItem
 };
-//# sourceMappingURL=chunk.I2GVGBNK.js.map
+//# sourceMappingURL=chunk.KQQ63GNA.js.map

package/dist/chunks/{chunk.JHS4VIRW.js → chunk.LCSZJNPI.js}

@@ -10,7 +10,7 @@ import {
 } from "./chunk.G4URZQCL.js";
 import {
   SynButtonGroup
-} from "./chunk.CZKMOCWP.js";
+} from "./chunk.6HZIEKHJ.js";
 import {
   FormControlController,
   customErrorValidityState,
@@ -31,7 +31,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.FOSWTCLV.js";
+} from "./chunk.NFRM6KUP.js";
 import {
   __decorateClass
 } from "./chunk.Z4XV3SMG.js";
@@ -369,4 +369,4 @@ SynRadioGroup = __decorateClass([
 export {
   SynRadioGroup
 };
-//# sourceMappingURL=chunk.JHS4VIRW.js.map
+//# sourceMappingURL=chunk.LCSZJNPI.js.map

package/dist/chunks/{chunk.6C2KOZCZ.js → chunk.LDIT5LZ2.js}

@@ -1,6 +1,6 @@
 import {
   SynTextarea
-} from "./chunk.I3EUXN2H.js";
+} from "./chunk.3GRO7VTN.js";
 
 // src/components/textarea/textarea.ts
 var textarea_default = SynTextarea;
@@ -9,4 +9,4 @@ SynTextarea.define("syn-textarea");
 export {
   textarea_default
 };
-//# sourceMappingURL=chunk.6C2KOZCZ.js.map
+//# sourceMappingURL=chunk.LDIT5LZ2.js.map

package/dist/chunks/{chunk.D6PWJXIK.js → chunk.LEBSYYUH.js}

@@ -9,7 +9,7 @@ import {
 } from "./chunk.XAQKFEHH.js";
 import {
   SynDivider
-} from "./chunk.JXD6UCMG.js";
+} from "./chunk.GYIPN75I.js";
 import {
   defaultValue
 } from "./chunk.3NXKLKWH.js";
@@ -25,7 +25,7 @@ import {
 } from "./chunk.WVVQK5TE.js";
 import {
   SynIcon
-} from "./chunk.WVR5S62X.js";
+} from "./chunk.URUHLG3B.js";
 import {
   LocalizeController
 } from "./chunk.OAQRCZOO.js";
@@ -45,7 +45,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.FOSWTCLV.js";
+} from "./chunk.NFRM6KUP.js";
 import {
   __decorateClass,
   __privateAdd,
@@ -867,4 +867,4 @@ SynInput = __decorateClass([
 export {
   SynInput
 };
-//# sourceMappingURL=chunk.D6PWJXIK.js.map
+//# sourceMappingURL=chunk.LEBSYYUH.js.map

package/dist/chunks/{chunk.XH5DFZZW.js → chunk.MF5YI4PZ.js}

@@ -12,7 +12,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.FOSWTCLV.js";
+} from "./chunk.NFRM6KUP.js";
 import {
   __decorateClass
 } from "./chunk.Z4XV3SMG.js";
@@ -64,4 +64,4 @@ __decorateClass([
 export {
   SynTabPanel
 };
-//# sourceMappingURL=chunk.XH5DFZZW.js.map
+//# sourceMappingURL=chunk.MF5YI4PZ.js.map

package/dist/chunks/{chunk.L3MA7MD6.js → chunk.MGCU74AY.js}

@@ -10,7 +10,7 @@ import {
 } from "./chunk.G4URZQCL.js";
 import {
   SynButton
-} from "./chunk.254OWAO7.js";
+} from "./chunk.OPPSJYOF.js";
 import {
   FormControlController
 } from "./chunk.HP2LEQRU.js";
@@ -26,7 +26,7 @@ import {
 } from "./chunk.WVVQK5TE.js";
 import {
   SynIcon
-} from "./chunk.WVR5S62X.js";
+} from "./chunk.URUHLG3B.js";
 import {
   LocalizeController
 } from "./chunk.OAQRCZOO.js";
@@ -41,7 +41,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.FOSWTCLV.js";
+} from "./chunk.NFRM6KUP.js";
 import {
   __decorateClass
 } from "./chunk.Z4XV3SMG.js";
@@ -534,4 +534,4 @@ setDefaultAnimation("file.text.appear", {
 export {
   SynFile
 };
-//# sourceMappingURL=chunk.L3MA7MD6.js.map
+//# sourceMappingURL=chunk.MGCU74AY.js.map

package/dist/chunks/{chunk.4O4VBTMM.js → chunk.MXMAQLQT.js}

@@ -1,6 +1,6 @@
 import {
   SynBadge
-} from "./chunk.Y33FBZC2.js";
+} from "./chunk.NARWRA7Y.js";
 
 // src/components/badge/badge.ts
 var badge_default = SynBadge;
@@ -9,4 +9,4 @@ SynBadge.define("syn-badge");
 export {
   badge_default
 };
-//# sourceMappingURL=chunk.4O4VBTMM.js.map
+//# sourceMappingURL=chunk.MXMAQLQT.js.map

package/dist/chunks/{chunk.72XTCOPS.js → chunk.MZ3HWIHV.js}

@@ -1,6 +1,6 @@
 import {
   SynPopup
-} from "./chunk.ETEGLGBQ.js";
+} from "./chunk.UIP7LAXP.js";
 
 // src/components/popup/popup.ts
 var popup_default = SynPopup;
@@ -9,4 +9,4 @@ SynPopup.define("syn-popup");
 export {
   popup_default
 };
-//# sourceMappingURL=chunk.72XTCOPS.js.map
+//# sourceMappingURL=chunk.MZ3HWIHV.js.map