@synergy-design-system/components 2.21.0 → 2.22.0

package/dist/chunks/{chunk.K75TBUMU.js → chunk.2BGCN7PU.js}

@@ -1,6 +1,6 @@
 import {
   SynAlert
-} from "./chunk.OB7QVS3V.js";
+} from "./chunk.Q4P5CILA.js";
 
 // src/components/alert/alert.ts
 var alert_default = SynAlert;
@@ -9,4 +9,4 @@ SynAlert.define("syn-alert");
 export {
   alert_default
 };
-//# sourceMappingURL=chunk.K75TBUMU.js.map
+//# sourceMappingURL=chunk.2BGCN7PU.js.map

package/dist/chunks/{chunk.E47UYFGZ.js → chunk.2SBWRGBF.js}

@@ -1,6 +1,6 @@
 import {
   SynInput
-} from "./chunk.KL322SB3.js";
+} from "./chunk.6V2NVURA.js";
 
 // src/components/input/input.ts
 var input_default = SynInput;
@@ -9,4 +9,4 @@ SynInput.define("syn-input");
 export {
   input_default
 };
-//# sourceMappingURL=chunk.E47UYFGZ.js.map
+//# sourceMappingURL=chunk.2SBWRGBF.js.map

package/dist/chunks/{chunk.RDEQ64F4.js → chunk.2Z2YFBOX.js}

@@ -6,19 +6,19 @@ import {
 } from "./chunk.43YNZAWL.js";
 import {
   SynIconButton
-} from "./chunk.T7JHOPPW.js";
-import {
-  watch
-} from "./chunk.74IOULXM.js";
+} from "./chunk.T2XGE7TS.js";
 import {
   LocalizeController
 } from "./chunk.GIU3H3J3.js";
+import {
+  watch
+} from "./chunk.74IOULXM.js";
 import {
   component_styles_default
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.6DVPRASB.js";
+} from "./chunk.T5TQRYCH.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -118,4 +118,4 @@ __decorateClass([
 export {
   SynTab
 };
-//# sourceMappingURL=chunk.RDEQ64F4.js.map
+//# sourceMappingURL=chunk.2Z2YFBOX.js.map

package/dist/chunks/{chunk.4DU55CZF.js → chunk.47XRCYY6.js}

@@ -1,6 +1,6 @@
 import {
   SynergyElement
-} from "./chunk.6DVPRASB.js";
+} from "./chunk.T5TQRYCH.js";
 
 // src/components/validate/utility.ts
 var WhitelistedSynergyFormEventNames = [
@@ -33,4 +33,4 @@ export {
   normalizeEventAttribute,
   getEventNameForElement
 };
-//# sourceMappingURL=chunk.4DU55CZF.js.map
+//# sourceMappingURL=chunk.47XRCYY6.js.map

package/dist/chunks/{chunk.F2YCO2BM.js → chunk.4DOACBEE.js}

@@ -12,7 +12,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.6DVPRASB.js";
+} from "./chunk.T5TQRYCH.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -64,4 +64,4 @@ __decorateClass([
 export {
   SynTabPanel
 };
-//# sourceMappingURL=chunk.F2YCO2BM.js.map
+//# sourceMappingURL=chunk.4DOACBEE.js.map

package/dist/chunks/{chunk.KP3NASWQ.js → chunk.4NMXXQSE.js}

@@ -1,6 +1,6 @@
 import {
   SynTooltip
-} from "./chunk.24ZMDAM7.js";
+} from "./chunk.6HRI4FUP.js";
 
 // src/components/tooltip/tooltip.ts
 var tooltip_default = SynTooltip;
@@ -9,4 +9,4 @@ SynTooltip.define("syn-tooltip");
 export {
   tooltip_default
 };
-//# sourceMappingURL=chunk.KP3NASWQ.js.map
+//# sourceMappingURL=chunk.4NMXXQSE.js.map

package/dist/chunks/{chunk.7Y2DDXJX.js → chunk.4QCD7LO7.js}

@@ -1,6 +1,6 @@
 import {
   SynRange
-} from "./chunk.5RYJ4JRG.js";
+} from "./chunk.ZDIV72JP.js";
 
 // src/components/range/range.ts
 var range_default = SynRange;
@@ -9,4 +9,4 @@ SynRange.define("syn-range");
 export {
   range_default
 };
-//# sourceMappingURL=chunk.7Y2DDXJX.js.map
+//# sourceMappingURL=chunk.4QCD7LO7.js.map

package/dist/chunks/{chunk.GONWKUS3.js → chunk.4VQ6EF5W.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.6DVPRASB.js";
+} from "./chunk.T5TQRYCH.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -48,4 +48,4 @@ __decorateClass([
 export {
   SynRangeTick
 };
-//# sourceMappingURL=chunk.GONWKUS3.js.map
+//# sourceMappingURL=chunk.4VQ6EF5W.js.map

package/dist/chunks/{chunk.WZ435WQP.js → chunk.4YG3YQRM.js}

@@ -9,7 +9,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.6DVPRASB.js";
+} from "./chunk.T5TQRYCH.js";
 import {
   __decorateClass,
   __spreadProps,
@@ -415,4 +415,4 @@ __decorateClass([
 export {
   SynPopup
 };
-//# sourceMappingURL=chunk.WZ435WQP.js.map
+//# sourceMappingURL=chunk.4YG3YQRM.js.map

package/dist/chunks/{chunk.H42PWZMH.js → chunk.5QXRR5PW.js}

@@ -1,14 +1,14 @@
+import {
+  getIconLibrary,
+  unwatchIcon,
+  watchIcon
+} from "./chunk.HA5UYBEI.js";
 import {
   icon_custom_styles_default
 } from "./chunk.PJO6TM3T.js";
 import {
   icon_styles_default
 } from "./chunk.ZBW4ZSZ7.js";
-import {
-  getIconLibrary,
-  unwatchIcon,
-  watchIcon
-} from "./chunk.HA5UYBEI.js";
 import {
   watch
 } from "./chunk.74IOULXM.js";
@@ -17,7 +17,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.6DVPRASB.js";
+} from "./chunk.T5TQRYCH.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -182,4 +182,4 @@ __decorateClass([
 export {
   SynIcon
 };
-//# sourceMappingURL=chunk.H42PWZMH.js.map
+//# sourceMappingURL=chunk.5QXRR5PW.js.map

package/dist/chunks/{chunk.66LQF6IO.js → chunk.5T3OGIGW.js}

@@ -23,15 +23,7 @@ var header_styles_default = css`
     box-sizing: content-box;
     display: flex;
     min-height: 40px;
-    padding: var(--syn-spacing-large);
-  }
-
-  /**
-   * If the primary navigation is provided, use a smaller spacing
-   * between the primary content area and the navigation area
-   */
-  .header--has-navigation .header__content {
-    padding-bottom: var(--syn-spacing-medium);
+    padding: var(--syn-spacing-small) var(--syn-spacing-large);
   }
 
   /**
@@ -138,4 +130,4 @@ var header_styles_default = css`
 export {
   header_styles_default
 };
-//# sourceMappingURL=chunk.66LQF6IO.js.map
+//# sourceMappingURL=chunk.5T3OGIGW.js.map

package/dist/chunks/chunk.5T3OGIGW.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/header/header.styles.ts"],
+  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  :host {\n    display: block;\n  }\n\n  .header {\n    background: var(--syn-color-neutral-0);\n    box-shadow: inset 0 -1px 0 0 var(--syn-color-neutral-400);\n  }\n\n  /**\n   * The primary content area displays one to many slotted items\n   * and contains the following items:\n   * - side nav state icon (OPTIONAL)\n   * - company or application logo\n   * - application name\n   * - meta-navigation\n   */\n  .header__content {\n    align-items: center;\n    box-sizing: content-box;\n    display: flex;\n    min-height: 40px;\n    padding: var(--syn-spacing-small) var(--syn-spacing-large);\n  }\n\n  /**\n   * The logo slot includes the application or company logo\n   */\n  .header__logo ::slotted(*),\n  .header__logo syn-icon {\n    display: block;\n  }\n\n  /**\n   * Make sure to use the correct color and outline for links\n   */\n  .header__logo ::slotted(a),\n  .header__logo ::slotted(a:hover) {\n    color: var(--syn-color-primary-600);\n  }\n\n  .header__logo ::slotted(a:is(:focus-visible)) {\n    outline: var(--syn-focus-ring);\n    outline-offset: var(--syn-focus-ring-offset);\n  }\n\n  /**\n   * Styles for the default logo. This makes sure the default SICK logo has the correct size and color\n   */\n  .header__logo syn-icon,\n  .header__logo syn-icon::part(svg) {\n    color: var(--syn-color-primary-600);\n    height: 32px;\n    width: auto;\n  }\n\n  /**\n   * The label section hosts the application name\n   */\n  .header__label {\n    color: var(--syn-typography-color-text);\n    font: var(--syn-body-large-bold);\n    padding: 0 var(--syn-spacing-2x-large);\n    white-space: nowrap;\n  }\n\n  /**\n   * The options menu holds an arbitrary list of <syn-icon-button />\n   */\n  .header__meta-navigation {\n    display: flex;\n    flex: 1;\n    gap: var(--syn-spacing-x-small);\n    justify-content: end;\n  }\n\n  .header__meta-navigation ::slotted(*) {\n    color: var(--syn-color-neutral-950);\n    display: contents;\n    font-size: var(--syn-font-size-x-large);\n  }\n\n  /**\n   * The horizontal top navigation section\n   */\n  .header__navigation {\n    padding: 0 var(--syn-spacing-large);\n  }\n\n  /**\n   * The burger menu icon styles\n   */\n  .header__burger-menu-toggle {\n    align-items: center;\n    background: none;\n    border: none;\n    color: var(--syn-color-neutral-950);\n    cursor: pointer;\n    display: flex;\n    font-size: var(--syn-font-size-x-large);\n    margin-right: calc(var(--syn-spacing-medium) + var(--syn-spacing-2x-small));\n    padding: var(--syn-spacing-x-small);\n    transition: var(--syn-transition-x-fast) color;\n  }\n\n  .header__burger-menu-toggle:hover {\n    color: var(--syn-color-primary-600);\n  }\n\n  .header__burger-menu-toggle:active {\n    color: var(--syn-color-primary-700);\n  }\n\n  .header__burger-menu-toggle:focus-visible {\n    outline: var(--syn-focus-ring);\n    outline-offset: var(--syn-focus-ring-offset);\n  }\n\n  /**\n   * If the burger menu is provided, use a smaller spacing on the left side\n   */\n   .header--has-burger-menu .header__content {\n    padding-left: var(--syn-spacing-medium);\n   }\n`;\n"],
+  "mappings": ";AAAA,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;",
+  "names": []
+}

package/dist/chunks/{chunk.ZR3W2TCY.js → chunk.5WDPW73P.js}

@@ -1,6 +1,6 @@
 import {
   SynIconButton
-} from "./chunk.T7JHOPPW.js";
+} from "./chunk.T2XGE7TS.js";
 
 // src/components/icon-button/icon-button.ts
 var icon_button_default = SynIconButton;
@@ -9,4 +9,4 @@ SynIconButton.define("syn-icon-button");
 export {
   icon_button_default
 };
-//# sourceMappingURL=chunk.ZR3W2TCY.js.map
+//# sourceMappingURL=chunk.5WDPW73P.js.map

package/dist/chunks/{chunk.CUAXHO6A.js → chunk.65TJHOIM.js}

@@ -1,6 +1,6 @@
 import {
   SynPopup
-} from "./chunk.WZ435WQP.js";
+} from "./chunk.4YG3YQRM.js";
 
 // src/components/popup/popup.ts
 var popup_default = SynPopup;
@@ -9,4 +9,4 @@ SynPopup.define("syn-popup");
 export {
   popup_default
 };
-//# sourceMappingURL=chunk.CUAXHO6A.js.map
+//# sourceMappingURL=chunk.65TJHOIM.js.map

package/dist/chunks/{chunk.24ZMDAM7.js → chunk.6HRI4FUP.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.O644HRW3.js";
 import {
   SynPopup
-} from "./chunk.WZ435WQP.js";
+} from "./chunk.4YG3YQRM.js";
 import {
   waitForEvent
 } from "./chunk.C2ENQBPM.js";
@@ -19,18 +19,18 @@ import {
   getAnimation,
   setDefaultAnimation
 } from "./chunk.HQ6QUSK7.js";
-import {
-  watch
-} from "./chunk.74IOULXM.js";
 import {
   LocalizeController
 } from "./chunk.GIU3H3J3.js";
+import {
+  watch
+} from "./chunk.74IOULXM.js";
 import {
   component_styles_default
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.6DVPRASB.js";
+} from "./chunk.T5TQRYCH.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -275,4 +275,4 @@ setDefaultAnimation("tooltip.hide", {
 export {
   SynTooltip
 };
-//# sourceMappingURL=chunk.24ZMDAM7.js.map
+//# sourceMappingURL=chunk.6HRI4FUP.js.map

package/dist/chunks/{chunk.BWITL5QJ.js → chunk.6IVCTKTH.js}

@@ -9,7 +9,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.6DVPRASB.js";
+} from "./chunk.T5TQRYCH.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -78,4 +78,4 @@ __decorateClass([
 export {
   SynResizeObserver
 };
-//# sourceMappingURL=chunk.BWITL5QJ.js.map
+//# sourceMappingURL=chunk.6IVCTKTH.js.map

package/dist/chunks/{chunk.KL322SB3.js → chunk.6V2NVURA.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.3B22DBSJ.js";
 import {
   SynDivider
-} from "./chunk.RGXEM6KV.js";
+} from "./chunk.C2VZ32SA.js";
 import {
   defaultValue
 } from "./chunk.3NXKLKWH.js";
@@ -22,22 +22,22 @@ import {
 } from "./chunk.WVVQK5TE.js";
 import {
   SynIcon
-} from "./chunk.H42PWZMH.js";
-import {
-  watch
-} from "./chunk.74IOULXM.js";
+} from "./chunk.5QXRR5PW.js";
 import {
   LocalizeController
 } from "./chunk.GIU3H3J3.js";
 import {
   enableDefaultSettings
 } from "./chunk.OLCT57R5.js";
+import {
+  watch
+} from "./chunk.74IOULXM.js";
 import {
   component_styles_default
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.6DVPRASB.js";
+} from "./chunk.T5TQRYCH.js";
 import {
   __decorateClass,
   __spreadValues
@@ -650,4 +650,4 @@ SynInput = __decorateClass([
 export {
   SynInput
 };
-//# sourceMappingURL=chunk.KL322SB3.js.map
+//# sourceMappingURL=chunk.6V2NVURA.js.map

package/dist/chunks/{chunk.6ORGN4HO.js → chunk.7DODMIND.js}

@@ -1,9 +1,9 @@
 import {
   SynOption
-} from "./chunk.QN7EHOAI.js";
+} from "./chunk.KWKD2MR5.js";
 import {
   SynPopup
-} from "./chunk.WZ435WQP.js";
+} from "./chunk.4YG3YQRM.js";
 import {
   defaultOptionRenderer
 } from "./chunk.HVVPX2VA.js";
@@ -49,22 +49,22 @@ import {
 } from "./chunk.WVVQK5TE.js";
 import {
   SynIcon
-} from "./chunk.H42PWZMH.js";
-import {
-  watch
-} from "./chunk.74IOULXM.js";
+} from "./chunk.5QXRR5PW.js";
 import {
   LocalizeController
 } from "./chunk.GIU3H3J3.js";
 import {
   enableDefaultSettings
 } from "./chunk.OLCT57R5.js";
+import {
+  watch
+} from "./chunk.74IOULXM.js";
 import {
   component_styles_default
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.6DVPRASB.js";
+} from "./chunk.T5TQRYCH.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -835,4 +835,4 @@ setDefaultAnimation("combobox.hide", {
 export {
   SynCombobox
 };
-//# sourceMappingURL=chunk.6ORGN4HO.js.map
+//# sourceMappingURL=chunk.7DODMIND.js.map

package/dist/chunks/{chunk.6LHWMYJQ.js → chunk.7IUYIL2G.js}

@@ -1,6 +1,6 @@
 import {
   SynNavItem
-} from "./chunk.7YBKIIE7.js";
+} from "./chunk.JMWZQLKP.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.6LHWMYJQ.js.map
+//# sourceMappingURL=chunk.7IUYIL2G.js.map

package/dist/chunks/{chunk.WMFEZGKC.js → chunk.7SQGNS6H.js}

@@ -1,6 +1,6 @@
 import {
   SynProgressBar
-} from "./chunk.AZ4RLLGC.js";
+} from "./chunk.IYVGP2JG.js";
 
 // src/components/progress-bar/progress-bar.ts
 var progress_bar_default = SynProgressBar;
@@ -9,4 +9,4 @@ SynProgressBar.define("syn-progress-bar");
 export {
   progress_bar_default
 };
-//# sourceMappingURL=chunk.WMFEZGKC.js.map
+//# sourceMappingURL=chunk.7SQGNS6H.js.map

package/dist/chunks/{chunk.EBFUBH7K.js → chunk.AJ7FU2E3.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.6EPU7YUS.js";
 import {
   SynIconButton
-} from "./chunk.T7JHOPPW.js";
+} from "./chunk.T2XGE7TS.js";
 import {
   LocalizeController
 } from "./chunk.GIU3H3J3.js";
@@ -18,7 +18,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.6DVPRASB.js";
+} from "./chunk.T5TQRYCH.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -84,4 +84,4 @@ SynTag = __decorateClass([
 export {
   SynTag
 };
-//# sourceMappingURL=chunk.EBFUBH7K.js.map
+//# sourceMappingURL=chunk.AJ7FU2E3.js.map

package/dist/chunks/{chunk.YUUSAWQ5.js → chunk.B5LMUC44.js}

@@ -1,6 +1,6 @@
 import {
   SynTabGroup
-} from "./chunk.IW64RDGB.js";
+} from "./chunk.STIFJBX6.js";
 
 // src/components/tab-group/tab-group.ts
 var tab_group_default = SynTabGroup;
@@ -9,4 +9,4 @@ SynTabGroup.define("syn-tab-group");
 export {
   tab_group_default
 };
-//# sourceMappingURL=chunk.YUUSAWQ5.js.map
+//# sourceMappingURL=chunk.B5LMUC44.js.map

package/dist/chunks/{chunk.I7KBGFOB.js → chunk.BEYQIAGT.js}

@@ -15,7 +15,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.6DVPRASB.js";
+} from "./chunk.T5TQRYCH.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -120,4 +120,4 @@ __decorateClass([
 export {
   SynBreadcrumbItem
 };
-//# sourceMappingURL=chunk.I7KBGFOB.js.map
+//# sourceMappingURL=chunk.BEYQIAGT.js.map

package/dist/chunks/{chunk.XIXB3JTC.js → chunk.BIJAAXQX.js}

@@ -4,18 +4,18 @@ import {
 import {
   HasSlotController
 } from "./chunk.WVVQK5TE.js";
-import {
-  watch
-} from "./chunk.74IOULXM.js";
 import {
   enableDefaultSettings
 } from "./chunk.OLCT57R5.js";
+import {
+  watch
+} from "./chunk.74IOULXM.js";
 import {
   component_styles_default
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.6DVPRASB.js";
+} from "./chunk.T5TQRYCH.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -138,4 +138,4 @@ SynRadioButton = __decorateClass([
 export {
   SynRadioButton
 };
-//# sourceMappingURL=chunk.XIXB3JTC.js.map
+//# sourceMappingURL=chunk.BIJAAXQX.js.map

package/dist/chunks/{chunk.DPJCGUEO.js → chunk.BMECBVOS.js}

@@ -19,19 +19,19 @@ import {
 } from "./chunk.WVVQK5TE.js";
 import {
   SynIcon
-} from "./chunk.H42PWZMH.js";
-import {
-  watch
-} from "./chunk.74IOULXM.js";
+} from "./chunk.5QXRR5PW.js";
 import {
   enableDefaultSettings
 } from "./chunk.OLCT57R5.js";
+import {
+  watch
+} from "./chunk.74IOULXM.js";
 import {
   component_styles_default
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.6DVPRASB.js";
+} from "./chunk.T5TQRYCH.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -267,4 +267,4 @@ SynCheckbox = __decorateClass([
 export {
   SynCheckbox
 };
-//# sourceMappingURL=chunk.DPJCGUEO.js.map
+//# sourceMappingURL=chunk.BMECBVOS.js.map

package/dist/chunks/{chunk.JRYXECAY.js → chunk.BUZOBR2J.js}

@@ -59,9 +59,11 @@ var alert_custom_styles_default = css`
    * Close Icon
    */
   .alert__close-button {
+    align-self: start;
     color: var(--syn-typography-color-text);
-    padding-block: calc(var(--syn-spacing-x-small) - var(--syn-panel-border-width));
-    padding-inline-end: var(--syn-spacing-x-small);
+    margin-block: calc(var(--syn-spacing-x-small) - var(--syn-panel-border-width));
+    margin-inline-end: var(--syn-spacing-x-small);
+    padding-inline-end: 0;
   }
 
   /**
@@ -91,4 +93,4 @@ var alert_custom_styles_default = css`
 export {
   alert_custom_styles_default
 };
-//# sourceMappingURL=chunk.JRYXECAY.js.map
+//# sourceMappingURL=chunk.BUZOBR2J.js.map

package/dist/chunks/{chunk.JRYXECAY.js.map → chunk.BUZOBR2J.js.map}

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/components/alert/alert.custom.styles.ts"],
-  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  .alert {\n    /* Defines the used border and icon color for variants */\n    --variant-accent-color: var(--syn-panel-border-color);\n\n    border: var(--syn-panel-border-width) solid var(--syn-panel-border-color);\n    border-left: 0;\n    border-radius: var(--syn-border-radius-none);\n    color: var(--syn-typography-color-text);\n    font-size: var(--syn-font-size-medium);\n    line-height: var(--syn-line-height-normal);\n    min-height: 56px;\n  }\n\n  /**\n   * Add back the items left borders\n   * This is done to prevent border clipping with the large border-left needed on .alert\n   * Note we also need to adjust our paddings to add the border width here\n   */\n  .alert::before {\n    background: var(--variant-accent-color);\n    bottom: -1px;\n    content: \"\";\n    left: 0;\n    position: absolute;\n    top: -1px;\n    width: var(--syn-spacing-2x-small);\n  }\n\n  .alert :first-child {\n    margin-inline-start: var(--syn-spacing-2x-small);\n  }\n\n  /**\n   * Make sure everything is aligned to top\n   */\n  .alert__icon,\n  .alert__close-button {\n    align-items: flex-start;\n    font-size: var(--syn-font-size-x-large);\n  }\n\n  .alert__message {\n    padding: var(--syn-spacing-medium) var(--syn-spacing-large) var(--syn-spacing-medium) var(--syn-spacing-medium);\n  }\n\n  /**\n   * Alert Icon\n   */\n  .alert__icon {\n    color: var(--variant-accent-color);\n    padding-block: var(--syn-spacing-medium);\n    padding-inline-start: var(--syn-spacing-medium);\n  }\n\n  /**\n   * Close Icon\n   */\n  .alert__close-button {\n    color: var(--syn-typography-color-text);\n    padding-block: calc(var(--syn-spacing-x-small) - var(--syn-panel-border-width));\n    padding-inline-end: var(--syn-spacing-x-small);\n  }\n\n  /**\n   * Variants should highlight the left border instead of top\n   */\n  .alert--primary {\n    --variant-accent-color: var(--syn-color-primary-600);\n  }\n\n  .alert--success {\n    --variant-accent-color: var(--syn-color-success-500);\n  }\n\n  .alert--neutral {\n    --variant-accent-color: var(--syn-color-neutral-800);\n  }\n\n  .alert--warning {\n    --variant-accent-color: var(--syn-color-warning-400);\n  }\n\n  .alert--danger {\n    --variant-accent-color: var(--syn-color-error-600);\n  }\n`;\n"],
-  "mappings": ";AAAA,SAAS,WAAW;AAEpB,IAAO,8BAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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": ["import { css } from 'lit';\n\nexport default css`\n  .alert {\n    /* Defines the used border and icon color for variants */\n    --variant-accent-color: var(--syn-panel-border-color);\n\n    border: var(--syn-panel-border-width) solid var(--syn-panel-border-color);\n    border-left: 0;\n    border-radius: var(--syn-border-radius-none);\n    color: var(--syn-typography-color-text);\n    font-size: var(--syn-font-size-medium);\n    line-height: var(--syn-line-height-normal);\n    min-height: 56px;\n  }\n\n  /**\n   * Add back the items left borders\n   * This is done to prevent border clipping with the large border-left needed on .alert\n   * Note we also need to adjust our paddings to add the border width here\n   */\n  .alert::before {\n    background: var(--variant-accent-color);\n    bottom: -1px;\n    content: \"\";\n    left: 0;\n    position: absolute;\n    top: -1px;\n    width: var(--syn-spacing-2x-small);\n  }\n\n  .alert :first-child {\n    margin-inline-start: var(--syn-spacing-2x-small);\n  }\n\n  /**\n   * Make sure everything is aligned to top\n   */\n  .alert__icon,\n  .alert__close-button {\n    align-items: flex-start;\n    font-size: var(--syn-font-size-x-large);\n  }\n\n  .alert__message {\n    padding: var(--syn-spacing-medium) var(--syn-spacing-large) var(--syn-spacing-medium) var(--syn-spacing-medium);\n  }\n\n  /**\n   * Alert Icon\n   */\n  .alert__icon {\n    color: var(--variant-accent-color);\n    padding-block: var(--syn-spacing-medium);\n    padding-inline-start: var(--syn-spacing-medium);\n  }\n\n  /**\n   * Close Icon\n   */\n  .alert__close-button {\n    align-self: start;\n    color: var(--syn-typography-color-text);\n    margin-block: calc(var(--syn-spacing-x-small) - var(--syn-panel-border-width));\n    margin-inline-end: var(--syn-spacing-x-small);\n    padding-inline-end: 0;\n  }\n\n  /**\n   * Variants should highlight the left border instead of top\n   */\n  .alert--primary {\n    --variant-accent-color: var(--syn-color-primary-600);\n  }\n\n  .alert--success {\n    --variant-accent-color: var(--syn-color-success-500);\n  }\n\n  .alert--neutral {\n    --variant-accent-color: var(--syn-color-neutral-800);\n  }\n\n  .alert--warning {\n    --variant-accent-color: var(--syn-color-warning-400);\n  }\n\n  .alert--danger {\n    --variant-accent-color: var(--syn-color-error-600);\n  }\n`;\n"],
+  "mappings": ";AAAA,SAAS,WAAW;AAEpB,IAAO,8BAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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.RGXEM6KV.js → chunk.C2VZ32SA.js}

@@ -12,7 +12,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.6DVPRASB.js";
+} from "./chunk.T5TQRYCH.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -43,4 +43,4 @@ __decorateClass([
 export {
   SynDivider
 };
-//# sourceMappingURL=chunk.RGXEM6KV.js.map
+//# sourceMappingURL=chunk.C2VZ32SA.js.map

package/dist/chunks/{chunk.6EJXXHTI.js → chunk.C3NAVIRL.js}

@@ -1,24 +1,24 @@
-import {
-  prio_nav_styles_default
-} from "./chunk.74N5WLM5.js";
 import {
   filterOnlyNavItems,
   getAssignedElementsForSlot,
   hideNavigationItem,
   showNavigationItem
 } from "./chunk.OJ3N7TWP.js";
+import {
+  prio_nav_styles_default
+} from "./chunk.74N5WLM5.js";
 import {
   SynNavItem
-} from "./chunk.7YBKIIE7.js";
+} from "./chunk.JMWZQLKP.js";
 import {
   SynMenu
-} from "./chunk.3Z44F32B.js";
+} from "./chunk.PZOVVG7D.js";
 import {
   SynDropdown
-} from "./chunk.GZDFE6IM.js";
+} from "./chunk.MDS7DCWX.js";
 import {
   SynIcon
-} from "./chunk.H42PWZMH.js";
+} from "./chunk.5QXRR5PW.js";
 import {
   LocalizeController
 } from "./chunk.GIU3H3J3.js";
@@ -27,7 +27,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.6DVPRASB.js";
+} from "./chunk.T5TQRYCH.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -209,4 +209,4 @@ __decorateClass([
 export {
   SynPrioNav
 };
-//# sourceMappingURL=chunk.6EJXXHTI.js.map
+//# sourceMappingURL=chunk.C3NAVIRL.js.map

package/dist/chunks/{chunk.NDHGAE3Z.js → chunk.CPZDXHSL.js}

@@ -1,6 +1,6 @@
 import {
   SynRangeTick
-} from "./chunk.GONWKUS3.js";
+} from "./chunk.4VQ6EF5W.js";
 
 // src/components/range-tick/range-tick.ts
 var range_tick_default = SynRangeTick;
@@ -9,4 +9,4 @@ SynRangeTick.define("syn-range-tick");
 export {
   range_tick_default
 };
-//# sourceMappingURL=chunk.NDHGAE3Z.js.map
+//# sourceMappingURL=chunk.CPZDXHSL.js.map