@synergy-design-system/components 2.59.0 → 2.61.0

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/range/range.styles.ts"],
+  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  :host {\n    /*\n     * Values here apply for the default size of \"medium\"\n     * For other sizes, see below\n     */\n    --thumb-size: var(--syn-spacing-medium);\n    --thumb-hit-area-size: 1.4;\n    --track-hit-area-size: var(--syn-spacing-medium);\n    --track-active-offset: 0px;\n    --track-color-active: var(--syn-range-track-color-active,var(--syn-color-primary-600));\n    --track-color-inactive: var(--syn-range-color-inactive, var(--syn-color-neutral-200));\n    --track-height: var(--syn-spacing-2x-small);\n\n    /* This is needed to get the full with of the element, including the border */\n    --full-thumb-size: calc(var(--thumb-size) + (var(--syn-focus-ring-width) * 2));\n\n    /*\n     * There are multiple places where we need the half width of the thumb\n     * This is needed for example to position the knob on the track or\n     * provide the spacing to the left and right for the track to make it stand \"over\"\n     */\n    --half-thumb-size: calc(var(--full-thumb-size) / 2);\n  }\n\n  /* Sizes */\n  :host([size='small']) {\n    --thumb-size: var(--syn-spacing-small);\n  }\n\n  :host([size='large']) {\n    --thumb-size: var(--syn-spacing-medium-large);\n  }\n\n  .form-control {\n    align-items: stretch;\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    writing-mode: horizontal-tb;\n  }\n\n  .base {\n    align-items: center;\n    cursor: text;\n    display: inline-flex;\n    flex: 1 1 auto;\n    font-family: var(--syn-input-font-family);\n    font-size: var(--syn-input-font-size-medium);\n    font-weight: var(--syn-input-font-weight);\n    justify-content: start;\n    letter-spacing: var(--syn-input-letter-spacing);\n    position: relative;\n    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */\n    touch-action: none; /* Prevent misbehavior in mobile by disabling native touch */\n    -webkit-touch-callout: none;\n    transition: var(--syn-transition-fast) color, var(--syn-transition-fast) border, var(--syn-transition-fast) box-shadow, var(--syn-transition-fast) background-color;\n    /* stylelint-disable-next-line property-no-vendor-prefix */\n    -webkit-user-select: none;\n    vertical-align: middle;\n    width: 100%;\n  }\n\n  .input__wrapper {\n    flex: 1 0 auto;\n    margin: 0 var(--half-thumb-size);\n    position: relative;\n  }\n\n  :host([disabled]) .base {\n    opacity: var(--syn-input-disabled-opacity);\n  }\n\n  .input__prefix,\n  .input__suffix {\n    align-items: center;\n    color: var(--syn-input-icon-color);\n    cursor: default;\n    display: inline-flex;\n    flex: 0 0 auto;\n  }\n\n  /* Sizing for the prefix and suffix */\n  .form-control--small .input__prefix ::slotted(*) {\n    font-size: var(--syn-input-font-size-small);\n    margin-inline-end: var(--syn-spacing-x-small);\n  }\n\n  .form-control--small .input__suffix ::slotted(*) {\n    font-size: var(--syn-input-font-size-small);\n    margin-inline-start: var(--syn-spacing-x-small);\n  }\n\n  .form-control--medium .input__prefix ::slotted(*) {\n    margin-inline-end: var(--syn-input-spacing-small);\n  }\n\n  .form-control--medium .input__suffix ::slotted(*) {\n    margin-inline-start: var(--syn-input-spacing-small);\n  }\n\n  .form-control--large .input__prefix ::slotted(*) {\n    font-size: var(--syn-input-font-size-large);\n    margin-inline-end: var(--syn-input-spacing-medium);\n  }\n\n  .form-control--large .input__suffix ::slotted(*) {\n    font-size: var(--syn-input-font-size-large);\n    margin-inline-start: var(--syn-input-spacing-medium);\n  }\n\n  .form-control--small .input__prefix ::slotted(syn-icon),\n  .form-control--small .input__suffix ::slotted(syn-icon) {\n    font-size: var(--syn-font-size-medium);\n  }\n\n  .form-control--medium .input__prefix ::slotted(syn-icon),\n  .form-control--medium .input__suffix ::slotted(syn-icon) {\n    font-size: var(--syn-font-size-x-large);\n  }\n  \n  .form-control--large .input__prefix ::slotted(syn-icon),\n  .form-control--large .input__suffix ::slotted(syn-icon) {\n    font-size: var(--syn-font-size-2x-large);\n  }\n\n  .track__wrapper {\n    cursor: pointer;\n    position: relative;\n  }\n\n  /* Internal helper for a better click surface on tracks */\n  .track__click-helper {\n    inset: calc(var(--track-hit-area-size) * -1) calc(var(--half-thumb-size) * -1);\n    position: absolute;\n  }\n\n  .track {\n    background-color: var(--track-color-inactive);\n    border-radius: var(--syn-border-radius-pill);\n    height: var(--track-height);\n    margin: calc((var(--full-thumb-size) - var(--track-height)) / 2) calc(var(--half-thumb-size) * -1);\n  }\n\n  .active-track {\n    background-color: var(--track-color-active);\n    border-radius: var(--syn-border-radius-pill);\n    height: var(--track-height);\n    margin: 0 calc(var(--half-thumb-size) * -1);\n    position: absolute;\n    top: 0;\n    z-index: 2;\n  }\n\n  .thumb {\n    background-color: var(--syn-interactive-emphasis-color,var(--syn-color-primary-600));\n    border: var(--syn-focus-ring-width) solid var(--syn-input-border-color-offset, var(--syn-color-neutral-0));\n    border-radius: var(--syn-border-radius-circle);\n    cursor: pointer;\n    display: block;\n    height: var(--full-thumb-size);\n    position: absolute;\n    top: 0;\n    transition: transform var(--syn-transition-fast) ease-in-out, background-color var(--syn-transition-fast) ease-in-out, box-shadow var(--syn-transition-fast) ease-in-out;\n    user-select: none;\n    width: var(--full-thumb-size);\n    z-index: 3;\n  }\n\n  /**\n   * Adds some space to the thumb that makes it easier to click and drag\n   */\n  .thumb::after {\n    background: transparent;\n    border-radius: var(--syn-border-radius-circle);\n    content: \"\";\n    display: block;\n  \n    /* The --thumb-size needs to be used to subtract from, because the border of the thumb is not calculated into the inset */\n    inset: calc((var(--thumb-size) - (var(--full-thumb-size) * var(--thumb-hit-area-size)) ) / 2);\n\n    /* This is needed as we also attach a pointerleave listener that stops */\n    pointer-events: none;\n    position: absolute;\n  }\n\n  .thumb:hover {\n    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */\n    cursor: grab;\n  }\n\n  .thumb.grabbed {\n    background: var(--syn-interactive-emphasis-color-active, var(--syn-color-primary-950));\n    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */\n    cursor: grabbing;\n  }\n\n  .thumb:focus-visible {\n    outline: none;\n  }\n\n  .thumb:not(.grabbed):focus-visible {\n    background: var(--syn-interactive-emphasis-color-hover,var(--syn-color-primary-900));\n    outline: var(--syn-focus-ring);\n    outline-offset: 0;\n  }\n\n  :host([disabled]) .track__wrapper,\n  :host([disabled]) .thumb,\n  :host([disabled]) .thumb.grabbed {\n    cursor: not-allowed;\n  }\n\n  /*\n   * Guard against mobile devices not removing the transform\n   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/@media/any-hover\n   */\n  @media (any-hover: hover) {\n    :host(:not([disabled])) .thumb:hover  {\n      transform: scale(var(--thumb-hit-area-size));\n    }\n\n    :host(:not([disabled])) .thumb:not(.grabbed):hover  {\n      background: var(--syn-interactive-emphasis-color-hover, var(--syn-color-primary-900));\n    }\n    \n    :host(:not([disabled])) .thumb:hover::after  {\n      /* Unset the area of the thumb click and drag area space, so it does not scale with the hover */\n      inset: unset;\n    }\n  }\n\n  /* Ticks */\n  .ticks {\n    cursor: pointer;\n    margin: 1px 0;\n    position: relative;\n    user-select: none;\n  }\n\n  .form-control--small .ticks ::slotted(*) {\n    font-size: var(--syn-font-size-small);\n  }\n\n  .form-control--large .ticks ::slotted(*) {\n    font-size: var(--syn-font-size-large);\n  }\n\n  /**\n   * Visually hide elements without display:none to make aria and other accessibility stuff work correctly\n   * This is necessary for accessibility reasons and e.g. for the native html input validation popup to be\n   * shown.\n   */\n  .visually-hidden {\n    border: 0;\n    clip: rect(0, 0, 0, 0);\n    height: 1px;\n    margin: -1px;\n    overflow: hidden;\n    padding: 0;\n    position: absolute;\n    white-space: nowrap;\n    width: 1px;\n  }\n\n  /**\n   * Position the validation input to the bottom and center of the range track\n   */\n  .range__validation-input {\n    bottom: 0;\n    left: 50%;\n  }\n  \n\n  :host([data-user-invalid]) .active-track {\n    --track-color-active: var(--syn-range-error-color ,var(--syn-input-border-color-focus-error));\n  }\n\n  :host([data-user-invalid]) .thumb {\n    background-color: var(--syn-range-error-color ,var(--syn-input-border-color-focus-error));\n  }\n`;\n"],
+  "mappings": ";AAAA,SAAS,WAAW;AAEpB,IAAO,uBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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.BMX6II3W.js → chunk.BYWS4ZYW.js}

@@ -12,7 +12,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.LNZCV2CX.js";
+} from "./chunk.5MU2DGIX.js";
 import {
   __decorateClass,
   __spreadProps,
@@ -430,4 +430,4 @@ __decorateClass([
 export {
   SynPopup
 };
-//# sourceMappingURL=chunk.BMX6II3W.js.map
+//# sourceMappingURL=chunk.BYWS4ZYW.js.map

package/dist/chunks/{chunk.GVC3AW7N.js → chunk.CLF2NPKX.js}

@@ -1,6 +1,6 @@
 import {
   SynPopup
-} from "./chunk.BMX6II3W.js";
+} from "./chunk.BYWS4ZYW.js";
 
 // src/components/popup/popup.ts
 var popup_default = SynPopup;
@@ -9,4 +9,4 @@ SynPopup.define("syn-popup");
 export {
   popup_default
 };
-//# sourceMappingURL=chunk.GVC3AW7N.js.map
+//# sourceMappingURL=chunk.CLF2NPKX.js.map

package/dist/chunks/{chunk.TATABENV.js → chunk.CNKA3COT.js}

@@ -3,13 +3,13 @@ import {
   isBlurEvent,
   isInvalidEvent,
   normalizeEventAttribute
-} from "./chunk.ESJLKO62.js";
+} from "./chunk.KZS4WQH7.js";
 import {
   validate_styles_default
 } from "./chunk.MVM3NN6Y.js";
 import {
   SynAlert
-} from "./chunk.XI6QDGYC.js";
+} from "./chunk.UYYHSGA6.js";
 import {
   enableDefaultSettings
 } from "./chunk.E5UUNP6E.js";
@@ -21,7 +21,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.LNZCV2CX.js";
+} from "./chunk.5MU2DGIX.js";
 import {
   __decorateClass
 } from "./chunk.Z4XV3SMG.js";
@@ -333,4 +333,4 @@ SynValidate = __decorateClass([
 export {
   SynValidate
 };
-//# sourceMappingURL=chunk.TATABENV.js.map
+//# sourceMappingURL=chunk.CNKA3COT.js.map

package/dist/chunks/{chunk.O2NNLPBP.js → chunk.CSDM5R4D.js}

@@ -1,6 +1,6 @@
 import {
   SynSpinner
-} from "./chunk.2OYCXPYU.js";
+} from "./chunk.P3MP2LEV.js";
 import {
   FormControlController,
   validValidityState
@@ -17,7 +17,7 @@ import {
 } from "./chunk.WVVQK5TE.js";
 import {
   SynIcon
-} from "./chunk.K322BFQH.js";
+} from "./chunk.3NNDOLEQ.js";
 import {
   LocalizeController
 } from "./chunk.OAQRCZOO.js";
@@ -32,7 +32,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.LNZCV2CX.js";
+} from "./chunk.5MU2DGIX.js";
 import {
   __decorateClass
 } from "./chunk.Z4XV3SMG.js";
@@ -295,4 +295,4 @@ SynButton = __decorateClass([
 export {
   SynButton
 };
-//# sourceMappingURL=chunk.O2NNLPBP.js.map
+//# sourceMappingURL=chunk.CSDM5R4D.js.map

package/dist/chunks/{chunk.ETQ6XKDV.js → chunk.D5BI2SJM.js}

@@ -1,6 +1,6 @@
 import {
   SynBreadcrumb
-} from "./chunk.7QDFC46E.js";
+} from "./chunk.3JETYJC7.js";
 
 // src/components/breadcrumb/breadcrumb.ts
 var breadcrumb_default = SynBreadcrumb;
@@ -9,4 +9,4 @@ SynBreadcrumb.define("syn-breadcrumb");
 export {
   breadcrumb_default
 };
-//# sourceMappingURL=chunk.ETQ6XKDV.js.map
+//# sourceMappingURL=chunk.D5BI2SJM.js.map

package/dist/chunks/{chunk.PV6RRTZL.js → chunk.DDMT5GED.js}

@@ -16,7 +16,7 @@ import {
 } from "./chunk.WXVOTRW5.js";
 import {
   SynIconButton
-} from "./chunk.YVWHOKS7.js";
+} from "./chunk.LFUGUOFX.js";
 import {
   waitForEvent
 } from "./chunk.C2ENQBPM.js";
@@ -42,7 +42,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.LNZCV2CX.js";
+} from "./chunk.5MU2DGIX.js";
 import {
   __decorateClass
 } from "./chunk.Z4XV3SMG.js";
@@ -407,4 +407,4 @@ setDefaultAnimation("drawer.overlay.hide", {
 export {
   SynDrawer
 };
-//# sourceMappingURL=chunk.PV6RRTZL.js.map
+//# sourceMappingURL=chunk.DDMT5GED.js.map

package/dist/chunks/{chunk.I6YARDHH.js → chunk.DH3ESODU.js}

@@ -15,7 +15,7 @@ var range_tick_styles_default = css`
   }
 
   .tick-line {
-    background: var(--syn-color-neutral-400);
+    background: var(--syn-range-tick-color, var(--syn-color-neutral-400));
     height: var(--tick-height);
   }
 
@@ -36,4 +36,4 @@ var range_tick_styles_default = css`
 export {
   range_tick_styles_default
 };
-//# sourceMappingURL=chunk.I6YARDHH.js.map
+//# sourceMappingURL=chunk.DH3ESODU.js.map

package/dist/chunks/{chunk.I6YARDHH.js.map → chunk.DH3ESODU.js.map}

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/components/range-tick/range-tick.styles.ts"],
-  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  :host {\n    --tick-height: var(--syn-spacing-x-small);\n    --tick-label-top: 10px;\n  }\n\n  .tick {\n    color: var(--syn-input-icon-color);\n    font-family: var(--syn-font-family);\n    font-weight: var(--syn-font-weight-normal);\n    line-height: var(--syn-line-height-denser);\n    width: 1px;\n  }\n\n  .tick-line {\n    background: var(--syn-color-neutral-400);\n    height: var(--tick-height);\n  }\n\n  .tick--subdivision .tick-line{\n    height: calc(var(--tick-height) / 2);\n  }\n\n  .tick-label {\n    align-items: center;\n    display: flex;\n    justify-content: center;\n    margin-top: var(--tick-label-top);\n    text-align: center;\n    white-space: nowrap;\n  }\n`;\n"],
+  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  :host {\n    --tick-height: var(--syn-spacing-x-small);\n    --tick-label-top: 10px;\n  }\n\n  .tick {\n    color: var(--syn-input-icon-color);\n    font-family: var(--syn-font-family);\n    font-weight: var(--syn-font-weight-normal);\n    line-height: var(--syn-line-height-denser);\n    width: 1px;\n  }\n\n  .tick-line {\n    background: var(--syn-range-tick-color, var(--syn-color-neutral-400));\n    height: var(--tick-height);\n  }\n\n  .tick--subdivision .tick-line{\n    height: calc(var(--tick-height) / 2);\n  }\n\n  .tick-label {\n    align-items: center;\n    display: flex;\n    justify-content: center;\n    margin-top: var(--tick-label-top);\n    text-align: center;\n    white-space: nowrap;\n  }\n`;\n"],
   "mappings": ";AAAA,SAAS,WAAW;AAEpB,IAAO,4BAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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.BJQQNSSW.js → chunk.DMOZQTWN.js}

@@ -1,6 +1,6 @@
 import {
   SynCard
-} from "./chunk.LWV4OLKB.js";
+} from "./chunk.BAFVZ72O.js";
 
 // src/components/card/card.ts
 var card_default = SynCard;
@@ -9,4 +9,4 @@ SynCard.define("syn-card");
 export {
   card_default
 };
-//# sourceMappingURL=chunk.BJQQNSSW.js.map
+//# sourceMappingURL=chunk.DMOZQTWN.js.map

package/dist/chunks/{chunk.NN6AEE2I.js → chunk.DTPONOEN.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.EHSNF4SS.js";
 import {
   SynIcon
-} from "./chunk.K322BFQH.js";
+} from "./chunk.3NNDOLEQ.js";
 import {
   enableDefaultSettings
 } from "./chunk.E5UUNP6E.js";
@@ -18,7 +18,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.LNZCV2CX.js";
+} from "./chunk.5MU2DGIX.js";
 import {
   __decorateClass
 } from "./chunk.Z4XV3SMG.js";
@@ -120,4 +120,4 @@ SynRadio = __decorateClass([
 export {
   SynRadio
 };
-//# sourceMappingURL=chunk.NN6AEE2I.js.map
+//# sourceMappingURL=chunk.DTPONOEN.js.map

package/dist/chunks/{chunk.CFIZ5BPM.js → chunk.EFSUQWJZ.js}

@@ -32,9 +32,6 @@ var side_nav_styles_default = css`
     position: absolute;
   }
 
-
-
-
   /****
    *
    * variant="default"
@@ -51,9 +48,6 @@ var side_nav_styles_default = css`
     display: block;
   }
 
-
-
-
   /****
    *
    * variant="rail"
@@ -88,9 +82,6 @@ var side_nav_styles_default = css`
     overflow: hidden;
   }
 
-
-
-
   /****
    *
    * variant="sticky"
@@ -114,7 +105,6 @@ var side_nav_styles_default = css`
     --size: var(--side-nav-rail-width);
   }
 
-
   /*
    * For touch devices the content should not shrink in a flex container
    */ 
@@ -144,7 +134,6 @@ var side_nav_styles_default = css`
    ****/
   .side-nav__footer-divider{
     --spacing: 0;
-    --color: var(--syn-color-neutral-300);
   }
 
   :not(.side-nav--open).side-nav--rail ::slotted(syn-nav-item){
@@ -155,4 +144,4 @@ var side_nav_styles_default = css`
 export {
   side_nav_styles_default
 };
-//# sourceMappingURL=chunk.CFIZ5BPM.js.map
+//# sourceMappingURL=chunk.EFSUQWJZ.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/side-nav/side-nav.styles.ts"],
+  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  :host {\n    --side-nav-open-width: 320px;\n    --side-nav-rail-width: 72px;\n\n    display: block;\n  }\n\n  /**\n   * Syn-drawer styling\n   */\n  .side-nav__drawer {\n    --size: var(--side-nav-open-width);\n  }\n  \n  .side-nav__drawer::part(base){\n    position: absolute;\n    z-index: var(--syn-z-index-drawer);\n  }\n\n  .side-nav__drawer::part(body),\n  .side-nav__drawer::part(footer) {\n    padding: 0;\n  }\n\n  /** \n   * Overlay \n   */\n  .side-nav__drawer::part(overlay){\n    position: absolute;\n  }\n\n  /****\n   *\n   * variant=\"default\"\n   *\n   ****/\n  \n  /* Side nav should have a width, so it behave correct in an e.g. display flex context */\n  .side-nav.side-nav--fix.side-nav--open {\n    width: var(--side-nav-open-width);\n  }\n\n  /* Fixed mode  */\n  .side-nav--fix .side-nav__drawer::part(overlay){\n    display: block;\n  }\n\n  /****\n   *\n   * variant=\"rail\"\n   *\n   ****/\n\n  /* \n   * Side nav should have a width, so it behave correct in an e.g. display flex context. \n   * in variant=\"rail\" the width is always the small rail width, because there should be no shrinking possible of the main content area.\n   */\n  .side-nav.side-nav--rail {\n    width: var(--side-nav-rail-width);\n  }\n\n  /* Adapt the width of the drawer */\n  :not(.side-nav--open).side-nav--rail .side-nav__drawer {\n    --size: var(--side-nav-rail-width);\n  }\n\n  /* Show the overlay of the drawer on touch devices */\n  .side-nav--open.side-nav--rail.side-nav--touch .side-nav__drawer::part(overlay){\n    display: block;\n  }\n\n  /* Avoid multiline flickering on open and close animation */\n  .side-nav--rail.side-nav--animation {\n    white-space: nowrap;\n  }\n\n  /* Hide the scrollbars in closed variant=\"rail\" */ \n  :not(.side-nav--open).side-nav--rail .side-nav__drawer::part(body){\n    overflow: hidden;\n  }\n\n  /****\n   *\n   * variant=\"sticky\"\n   *\n   ****/\n\n  /*\n   * Side nav should have a width, so it behave correct in an e.g. display flex context.\n   * In variant=\"sticky\" the width is the rail width if closed and the open width if open.\n   */\n  .side-nav.side-nav--sticky {\n    width: var(--side-nav-open-width);\n  }\n\n  .side-nav.side-nav--sticky:not(.side-nav--open) {\n    width: var(--side-nav-rail-width);\n  }\n\n  /* Adapt the width of the drawer */\n  :not(.side-nav--open).side-nav--sticky .side-nav__drawer {\n    --size: var(--side-nav-rail-width);\n  }\n\n  /*\n   * For touch devices the content should not shrink in a flex container\n   */ \n  .side-nav--sticky.side-nav--touch {\n    width: var(--side-nav-rail-width);\n  }\n\n  /* Avoid multiline flickering on open and close animation */\n  .side-nav--sticky.side-nav--animation {\n    white-space: nowrap;\n  }\n\n  /* Show the overlay of the drawer on touch devices */\n   .side-nav--open.side-nav--sticky.side-nav--touch .side-nav__drawer::part(overlay){\n    display: block;\n  }\n\n  .side-nav__toggle-icon > syn-icon {\n    font-size: var(--syn-font-size-x-large);\n    min-width: var(--syn-font-size-x-large);\n  }\n\n  /****\n   *\n   * Footer divider\n   *\n   ****/\n  .side-nav__footer-divider{\n    --spacing: 0;\n  }\n\n  :not(.side-nav--open).side-nav--rail ::slotted(syn-nav-item){\n    --display-children: none;\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;",
+  "names": []
+}

package/dist/chunks/{chunk.XLXRT6LZ.js → chunk.EHCEFLBA.js}

@@ -1,6 +1,6 @@
 import {
   SynCheckbox
-} from "./chunk.ERJQUT3Z.js";
+} from "./chunk.WNYY3AJ7.js";
 
 // src/components/checkbox/checkbox.ts
 var checkbox_default = SynCheckbox;
@@ -9,4 +9,4 @@ SynCheckbox.define("syn-checkbox");
 export {
   checkbox_default
 };
-//# sourceMappingURL=chunk.XLXRT6LZ.js.map
+//# sourceMappingURL=chunk.EHCEFLBA.js.map

package/dist/chunks/{chunk.MOLM5I7S.js → chunk.ENRGRYMR.js}

@@ -1,15 +1,15 @@
 import {
   side_nav_styles_default
-} from "./chunk.CFIZ5BPM.js";
+} from "./chunk.EFSUQWJZ.js";
 import {
   SynNavItem
-} from "./chunk.WESZCMRD.js";
+} from "./chunk.JVV3GBUZ.js";
 import {
   SynDivider
-} from "./chunk.4KM6RGKM.js";
+} from "./chunk.UHHGSBJ5.js";
 import {
   SynDrawer
-} from "./chunk.PV6RRTZL.js";
+} from "./chunk.DDMT5GED.js";
 import {
   unlockBodyScrolling
 } from "./chunk.5732DMBC.js";
@@ -26,7 +26,7 @@ import {
 } from "./chunk.WVVQK5TE.js";
 import {
   SynIcon
-} from "./chunk.K322BFQH.js";
+} from "./chunk.3NNDOLEQ.js";
 import {
   LocalizeController
 } from "./chunk.OAQRCZOO.js";
@@ -41,7 +41,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.LNZCV2CX.js";
+} from "./chunk.5MU2DGIX.js";
 import {
   __decorateClass
 } from "./chunk.Z4XV3SMG.js";
@@ -349,4 +349,4 @@ setDefaultAnimation("sideNav.overlay.hide", {
 export {
   SynSideNav
 };
-//# sourceMappingURL=chunk.MOLM5I7S.js.map
+//# sourceMappingURL=chunk.ENRGRYMR.js.map

package/dist/chunks/{chunk.CUTOWLU6.js → chunk.F5PLJIZX.js}

@@ -15,7 +15,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.LNZCV2CX.js";
+} from "./chunk.5MU2DGIX.js";
 import {
   __decorateClass
 } from "./chunk.Z4XV3SMG.js";
@@ -120,4 +120,4 @@ __decorateClass([
 export {
   SynBreadcrumbItem
 };
-//# sourceMappingURL=chunk.CUTOWLU6.js.map
+//# sourceMappingURL=chunk.F5PLJIZX.js.map

package/dist/chunks/{chunk.LLTNGTMZ.js → chunk.FLKOWITA.js}

@@ -1,6 +1,6 @@
 import {
   SynTooltip
-} from "./chunk.GEFPE7BJ.js";
+} from "./chunk.5K2YG44Q.js";
 
 // src/components/tooltip/tooltip.ts
 var tooltip_default = SynTooltip;
@@ -9,4 +9,4 @@ SynTooltip.define("syn-tooltip");
 export {
   tooltip_default
 };
-//# sourceMappingURL=chunk.LLTNGTMZ.js.map
+//# sourceMappingURL=chunk.FLKOWITA.js.map

package/dist/chunks/{chunk.IVT4ZVP4.js → chunk.FTZBLDAU.js}

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

package/dist/chunks/{chunk.QNHHHBZS.js → chunk.FUXYG2AM.js}

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

package/dist/chunks/{chunk.KOJTNHSY.js → chunk.GIEVYD35.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.43YNZAWL.js";
 import {
   SynIconButton
-} from "./chunk.YVWHOKS7.js";
+} from "./chunk.LFUGUOFX.js";
 import {
   LocalizeController
 } from "./chunk.OAQRCZOO.js";
@@ -18,7 +18,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.LNZCV2CX.js";
+} from "./chunk.5MU2DGIX.js";
 import {
   __decorateClass
 } from "./chunk.Z4XV3SMG.js";
@@ -118,4 +118,4 @@ __decorateClass([
 export {
   SynTab
 };
-//# sourceMappingURL=chunk.KOJTNHSY.js.map
+//# sourceMappingURL=chunk.GIEVYD35.js.map

package/dist/chunks/{chunk.E34AGRE4.js → chunk.GSOJI47E.js}

@@ -9,7 +9,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.LNZCV2CX.js";
+} from "./chunk.5MU2DGIX.js";
 import {
   __decorateClass
 } from "./chunk.Z4XV3SMG.js";
@@ -78,4 +78,4 @@ __decorateClass([
 export {
   SynResizeObserver
 };
-//# sourceMappingURL=chunk.E34AGRE4.js.map
+//# sourceMappingURL=chunk.GSOJI47E.js.map

package/dist/chunks/{chunk.Z6BJBMZJ.js → chunk.H3A42GXZ.js}

@@ -1,6 +1,6 @@
 import {
   SynButton
-} from "./chunk.O2NNLPBP.js";
+} from "./chunk.CSDM5R4D.js";
 
 // src/components/button/button.ts
 var button_default = SynButton;
@@ -9,4 +9,4 @@ SynButton.define("syn-button");
 export {
   button_default
 };
-//# sourceMappingURL=chunk.Z6BJBMZJ.js.map
+//# sourceMappingURL=chunk.H3A42GXZ.js.map

package/dist/chunks/{chunk.CVQZTFFE.js → chunk.H3MLGRPO.js}

@@ -9,16 +9,16 @@ import {
 } from "./chunk.OJ3N7TWP.js";
 import {
   SynNavItem
-} from "./chunk.WESZCMRD.js";
+} from "./chunk.JVV3GBUZ.js";
 import {
   SynMenu
-} from "./chunk.BTNHF3MY.js";
+} from "./chunk.XEB4R66G.js";
 import {
   SynDropdown
-} from "./chunk.EBUAHPEF.js";
+} from "./chunk.OWOU24WV.js";
 import {
   SynIcon
-} from "./chunk.K322BFQH.js";
+} from "./chunk.3NNDOLEQ.js";
 import {
   LocalizeController
 } from "./chunk.OAQRCZOO.js";
@@ -27,7 +27,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.LNZCV2CX.js";
+} from "./chunk.5MU2DGIX.js";
 import {
   __decorateClass
 } from "./chunk.Z4XV3SMG.js";
@@ -209,4 +209,4 @@ __decorateClass([
 export {
   SynPrioNav
 };
-//# sourceMappingURL=chunk.CVQZTFFE.js.map
+//# sourceMappingURL=chunk.H3MLGRPO.js.map

package/dist/chunks/{chunk.MS3MMVKS.js → chunk.HVY3DFLC.js}

@@ -1,6 +1,6 @@
 import {
   SynSwitch
-} from "./chunk.YLXELWVF.js";
+} from "./chunk.OILJPI6E.js";
 
 // src/components/switch/switch.ts
 var switch_default = SynSwitch;
@@ -9,4 +9,4 @@ SynSwitch.define("syn-switch");
 export {
   switch_default
 };
-//# sourceMappingURL=chunk.MS3MMVKS.js.map
+//# sourceMappingURL=chunk.HVY3DFLC.js.map

package/dist/chunks/{chunk.FOT6INZ3.js → chunk.HZ2LA3BN.js}

@@ -1,6 +1,6 @@
 import {
   SynDivider
-} from "./chunk.4KM6RGKM.js";
+} from "./chunk.UHHGSBJ5.js";
 
 // src/components/divider/divider.ts
 var divider_default = SynDivider;
@@ -9,4 +9,4 @@ SynDivider.define("syn-divider");
 export {
   divider_default
 };
-//# sourceMappingURL=chunk.FOT6INZ3.js.map
+//# sourceMappingURL=chunk.HZ2LA3BN.js.map

package/dist/chunks/{chunk.ZHYYW63V.js → chunk.I6Y6H6LZ.js}

@@ -1,6 +1,6 @@
 import {
   SynOption
-} from "./chunk.BBCABGBI.js";
+} from "./chunk.BI3WVKAJ.js";
 
 // src/components/option/option.ts
 var option_default = SynOption;
@@ -9,4 +9,4 @@ SynOption.define("syn-option");
 export {
   option_default
 };
-//# sourceMappingURL=chunk.ZHYYW63V.js.map
+//# sourceMappingURL=chunk.I6Y6H6LZ.js.map

package/dist/chunks/{chunk.MVHZP3HD.js → chunk.IK335MXD.js}

@@ -1,9 +1,9 @@
 import {
   SynTooltip
-} from "./chunk.GEFPE7BJ.js";
+} from "./chunk.5K2YG44Q.js";
 import {
   range_styles_default
-} from "./chunk.UFNQFJO6.js";
+} from "./chunk.BXXVSZMC.js";
 import {
   arraysDiffer,
   getNormalizedValueFromClientX,
@@ -35,7 +35,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.LNZCV2CX.js";
+} from "./chunk.5MU2DGIX.js";
 import {
   __decorateClass,
   __privateAdd,
@@ -716,4 +716,4 @@ SynRange = __decorateClass([
 export {
   SynRange
 };
-//# sourceMappingURL=chunk.MVHZP3HD.js.map
+//# sourceMappingURL=chunk.IK335MXD.js.map

package/dist/chunks/{chunk.OR5RZYJU.js → chunk.IUD6TJE2.js}

@@ -1,6 +1,6 @@
 import {
   SynOptgroup
-} from "./chunk.FELQTJSC.js";
+} from "./chunk.JKB4DYWD.js";
 
 // src/components/optgroup/optgroup.ts
 var optgroup_default = SynOptgroup;
@@ -9,4 +9,4 @@ SynOptgroup.define("syn-optgroup");
 export {
   optgroup_default
 };
-//# sourceMappingURL=chunk.OR5RZYJU.js.map
+//# sourceMappingURL=chunk.IUD6TJE2.js.map

package/dist/chunks/{chunk.EIOOJMCB.js → chunk.IWSVGHN3.js}

@@ -18,7 +18,7 @@ import {
 } from "./chunk.7JGKUB4A.js";
 import {
   SynIcon
-} from "./chunk.K322BFQH.js";
+} from "./chunk.3NNDOLEQ.js";
 import {
   LocalizeController
 } from "./chunk.OAQRCZOO.js";
@@ -33,7 +33,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.LNZCV2CX.js";
+} from "./chunk.5MU2DGIX.js";
 import {
   __decorateClass
 } from "./chunk.Z4XV3SMG.js";
@@ -247,4 +247,4 @@ setDefaultAnimation("details.hide", {
 export {
   SynDetails
 };
-//# sourceMappingURL=chunk.EIOOJMCB.js.map
+//# sourceMappingURL=chunk.IWSVGHN3.js.map

package/dist/chunks/{chunk.FELQTJSC.js → chunk.JKB4DYWD.js}

@@ -3,13 +3,13 @@ import {
 } from "./chunk.MJ7R4QQT.js";
 import {
   SynDivider
-} from "./chunk.4KM6RGKM.js";
+} from "./chunk.UHHGSBJ5.js";
 import {
   HasSlotController
 } from "./chunk.WVVQK5TE.js";
 import {
   SynergyElement
-} from "./chunk.LNZCV2CX.js";
+} from "./chunk.5MU2DGIX.js";
 import {
   __decorateClass
 } from "./chunk.Z4XV3SMG.js";
@@ -131,4 +131,4 @@ __decorateClass([
 export {
   SynOptgroup
 };
-//# sourceMappingURL=chunk.FELQTJSC.js.map
+//# sourceMappingURL=chunk.JKB4DYWD.js.map