@synergy-design-system/components 3.15.4 → 3.15.6

package/dist/chunks/{chunk.MVGHT5N5.js → chunk.EFGAZQFG.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.CHFWLQN5.js";
 import {
   enableDefaultSettings
-} from "./chunk.4MG3QDNW.js";
+} from "./chunk.4I2RJVH5.js";
 import {
   watch
 } from "./chunk.SMIMHADA.js";
@@ -15,7 +15,7 @@ import {
 } from "./chunk.2NT3B5WJ.js";
 import {
   SynergyElement
-} from "./chunk.WL3IXJNI.js";
+} from "./chunk.7YCUXELV.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -138,4 +138,4 @@ SynRadioButton = __decorateClass([
 export {
   SynRadioButton
 };
-//# sourceMappingURL=chunk.MVGHT5N5.js.map
+//# sourceMappingURL=chunk.EFGAZQFG.js.map

package/dist/chunks/{chunk.PTB2RAAZ.js → chunk.EGTAKQAU.js}

@@ -1,9 +1,9 @@
 import {
   SynAlert
-} from "./chunk.CVJOHPVN.js";
+} from "./chunk.NL2IOCPJ.js";
 import {
   enableDefaultSettings
-} from "./chunk.4MG3QDNW.js";
+} from "./chunk.4I2RJVH5.js";
 import {
   alertSizeForInput,
   getActualInputElement,
@@ -12,13 +12,13 @@ import {
   isInvalidEvent,
   isSynergyElement,
   normalizeEventAttribute
-} from "./chunk.NBYMQKQ4.js";
+} from "./chunk.2QN5VSUR.js";
 import {
   validate_styles_default
 } from "./chunk.MVM3NN6Y.js";
 import {
   SynTooltip
-} from "./chunk.E7RRUMEX.js";
+} from "./chunk.45YNTYOZ.js";
 import {
   watch
 } from "./chunk.SMIMHADA.js";
@@ -27,7 +27,7 @@ import {
 } from "./chunk.2NT3B5WJ.js";
 import {
   SynergyElement
-} from "./chunk.WL3IXJNI.js";
+} from "./chunk.7YCUXELV.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -439,4 +439,4 @@ SynValidate = __decorateClass([
 export {
   SynValidate
 };
-//# sourceMappingURL=chunk.PTB2RAAZ.js.map
+//# sourceMappingURL=chunk.EGTAKQAU.js.map

package/dist/chunks/{chunk.ABRAUA2P.js → chunk.EKFYOO45.js}

@@ -1,6 +1,6 @@
 import {
   SynButton
-} from "./chunk.73Z3FWPL.js";
+} from "./chunk.5RQIZU45.js";
 import {
   file_styles_default
 } from "./chunk.2ECWEEUO.js";
@@ -18,10 +18,10 @@ import {
 } from "./chunk.CHFWLQN5.js";
 import {
   SynIcon
-} from "./chunk.ZTHIOBJX.js";
+} from "./chunk.SFBN63ZC.js";
 import {
   enableDefaultSettings
-} from "./chunk.4MG3QDNW.js";
+} from "./chunk.4I2RJVH5.js";
 import {
   animateTo
 } from "./chunk.Q6HZ4JXR.js";
@@ -40,7 +40,7 @@ import {
 } from "./chunk.2NT3B5WJ.js";
 import {
   SynergyElement
-} from "./chunk.WL3IXJNI.js";
+} from "./chunk.7YCUXELV.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -544,4 +544,4 @@ setDefaultAnimation("file.text.appear", {
 export {
   SynFile
 };
-//# sourceMappingURL=chunk.ABRAUA2P.js.map
+//# sourceMappingURL=chunk.EKFYOO45.js.map

package/dist/chunks/{chunk.UD4HUYDT.js → chunk.FAK2KFOB.js}

@@ -1,9 +1,9 @@
 import {
   SynDropdown
-} from "./chunk.TVS4L3HC.js";
+} from "./chunk.KVYYFM4V.js";
 import {
   SynMenu
-} from "./chunk.JWAE5WKX.js";
+} from "./chunk.USRVA3FU.js";
 import {
   prio_nav_styles_default
 } from "./chunk.74N5WLM5.js";
@@ -15,10 +15,10 @@ import {
 } from "./chunk.OJ3N7TWP.js";
 import {
   SynNavItem
-} from "./chunk.JVFLTPYY.js";
+} from "./chunk.VBPZVGXH.js";
 import {
   SynIcon
-} from "./chunk.ZTHIOBJX.js";
+} from "./chunk.SFBN63ZC.js";
 import {
   LocalizeController
 } from "./chunk.VCRQ2GII.js";
@@ -27,7 +27,7 @@ import {
 } from "./chunk.2NT3B5WJ.js";
 import {
   SynergyElement
-} from "./chunk.WL3IXJNI.js";
+} from "./chunk.7YCUXELV.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -209,4 +209,4 @@ __decorateClass([
 export {
   SynPrioNav
 };
-//# sourceMappingURL=chunk.UD4HUYDT.js.map
+//# sourceMappingURL=chunk.FAK2KFOB.js.map

package/dist/chunks/{chunk.KP7I46YT.js → chunk.FMRXZ25K.js}

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

package/dist/chunks/{chunk.VYBZVRVF.js → chunk.GFYYLBC7.js}

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

package/dist/chunks/{chunk.SQNDHZWV.js → chunk.GUW23JPZ.js}

@@ -6,10 +6,10 @@ import {
 } from "./chunk.X5NFOV5A.js";
 import {
   SynIconButton
-} from "./chunk.DRENFZZA.js";
+} from "./chunk.OBX7SKFS.js";
 import {
   enableDefaultSettings
-} from "./chunk.4MG3QDNW.js";
+} from "./chunk.4I2RJVH5.js";
 import {
   LocalizeController
 } from "./chunk.VCRQ2GII.js";
@@ -18,7 +18,7 @@ import {
 } from "./chunk.2NT3B5WJ.js";
 import {
   SynergyElement
-} from "./chunk.WL3IXJNI.js";
+} from "./chunk.7YCUXELV.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -84,4 +84,4 @@ SynTag = __decorateClass([
 export {
   SynTag
 };
-//# sourceMappingURL=chunk.SQNDHZWV.js.map
+//# sourceMappingURL=chunk.GUW23JPZ.js.map

package/dist/chunks/{chunk.VK35CL2X.js → chunk.GYOIJQKN.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.CMOZ4SCN.js";
 import {
   enableDefaultSettings
-} from "./chunk.4MG3QDNW.js";
+} from "./chunk.4I2RJVH5.js";
 import {
   LocalizeController
 } from "./chunk.VCRQ2GII.js";
@@ -15,7 +15,7 @@ import {
 } from "./chunk.2NT3B5WJ.js";
 import {
   SynergyElement
-} from "./chunk.WL3IXJNI.js";
+} from "./chunk.7YCUXELV.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -66,4 +66,4 @@ SynBadge = __decorateClass([
 export {
   SynBadge
 };
-//# sourceMappingURL=chunk.VK35CL2X.js.map
+//# sourceMappingURL=chunk.GYOIJQKN.js.map

package/dist/chunks/{chunk.LOYQRLBZ.js → chunk.H6Y2KI6V.js}

@@ -1,9 +1,6 @@
-import {
-  card_custom_styles_default
-} from "./chunk.O655X4YP.js";
 import {
   card_styles_default
-} from "./chunk.R3SMKUIL.js";
+} from "./chunk.QCHIEOZ2.js";
 import {
   HasSlotController
 } from "./chunk.CHFWLQN5.js";
@@ -12,15 +9,17 @@ import {
 } from "./chunk.2NT3B5WJ.js";
 import {
   SynergyElement
-} from "./chunk.WL3IXJNI.js";
+} from "./chunk.7YCUXELV.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
 
 // src/components/card/card.component.ts
+import {
+  html
+} from "lit";
 import { classMap } from "lit/directives/class-map.js";
 import { property } from "lit/decorators.js";
-import { html } from "lit";
 var SynCard = class extends SynergyElement {
   constructor() {
     super(...arguments);
@@ -34,11 +33,11 @@ var SynCard = class extends SynergyElement {
         part="base"
         class=${classMap({
       card: true,
-      "card--shadow": this.shadow,
-      "card--sharp": this.sharp,
       "card--has-footer": this.hasSlotController.test("footer"),
+      "card--has-header": this.hasSlotController.test("header"),
       "card--has-image": this.hasSlotController.test("image"),
-      "card--has-header": this.hasSlotController.test("header")
+      "card--shadow": this.shadow,
+      "card--sharp": this.sharp
     })}
       >
         <slot name="image" part="image" class="card__image"></slot>
@@ -49,15 +48,15 @@ var SynCard = class extends SynergyElement {
     `;
   }
 };
-SynCard.styles = [component_styles_default, card_styles_default, card_custom_styles_default];
+SynCard.styles = [component_styles_default, card_styles_default];
 __decorateClass([
-  property({ type: Boolean, reflect: true })
+  property({ reflect: true, type: Boolean })
 ], SynCard.prototype, "shadow", 2);
 __decorateClass([
-  property({ type: Boolean, reflect: true })
+  property({ reflect: true, type: Boolean })
 ], SynCard.prototype, "sharp", 2);
 
 export {
   SynCard
 };
-//# sourceMappingURL=chunk.LOYQRLBZ.js.map
+//# sourceMappingURL=chunk.H6Y2KI6V.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/card/card.component.ts"],
+  "sourcesContent": ["import {\n  type CSSResultGroup,\n  html,\n} from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { property } from 'lit/decorators.js';\nimport { HasSlotController } from '../../internal/slot.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport styles from './card.styles.js';\n\n/**\n * @summary Cards can be used to group related subjects in a container.\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-card--docs\n * @status stable\n * @since 1.25.0\n *\n * @slot - The card's main content.\n * @slot header - An optional header for the card.\n * @slot footer - An optional footer for the card.\n * @slot image - An optional image to render at the start of the card.\n *\n * @csspart base - The component's base wrapper.\n * @csspart image - The container that wraps the card's image.\n * @csspart header - The container that wraps the card's header.\n * @csspart body - The container that wraps the card's main content.\n * @csspart footer - The container that wraps the card's footer.\n *\n * @cssproperty --border-color - The card's border color, including borders that occur inside the card.\n * @cssproperty --border-radius - The border radius for the card's edges.\n * @cssproperty --border-width - The width of the card's borders.\n * @cssproperty --padding - The padding to use for the card's sections.\n */\nexport default class SynCard extends SynergyElement {\n  static styles: CSSResultGroup = [componentStyles, styles];\n\n  private readonly hasSlotController = new HasSlotController(this, 'footer', 'header', 'image');\n\n  /** Draws the card with a shadow. Can be used when the card has to stand out visually, for example in dashboards. */\n  @property({ reflect: true, type: Boolean }) shadow = false;\n\n  /** Draws the card with sharp edges. Can be used e.g. when nesting multiple syn-cards to create hierarchy. */\n  @property({ reflect: true, type: Boolean }) sharp = false;\n\n  render() {\n    return html`\n      <div\n        part=\"base\"\n        class=${classMap({\n          card: true,\n          'card--has-footer': this.hasSlotController.test('footer'),\n          'card--has-header': this.hasSlotController.test('header'),\n          'card--has-image': this.hasSlotController.test('image'),\n          'card--shadow': this.shadow,\n          'card--sharp': this.sharp,\n        })}\n      >\n        <slot name=\"image\" part=\"image\" class=\"card__image\"></slot>\n        <slot name=\"header\" part=\"header\" class=\"card__header\"></slot>\n        <slot part=\"body\" class=\"card__body\"></slot>\n        <slot name=\"footer\" part=\"footer\" class=\"card__footer\"></slot>\n      </div>\n    `;\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA,EAEE;AAAA,OACK;AACP,SAAS,gBAAgB;AACzB,SAAS,gBAAgB;AA4BzB,IAAqB,UAArB,cAAqC,eAAe;AAAA,EAApD;AAAA;AAGE,SAAiB,oBAAoB,IAAI,kBAAkB,MAAM,UAAU,UAAU,OAAO;AAGhD,kBAAS;AAGT,iBAAQ;AAAA;AAAA,EAEpD,SAAS;AACP,WAAO;AAAA;AAAA;AAAA,gBAGK,SAAS;AAAA,MACf,MAAM;AAAA,MACN,oBAAoB,KAAK,kBAAkB,KAAK,QAAQ;AAAA,MACxD,oBAAoB,KAAK,kBAAkB,KAAK,QAAQ;AAAA,MACxD,mBAAmB,KAAK,kBAAkB,KAAK,OAAO;AAAA,MACtD,gBAAgB,KAAK;AAAA,MACrB,eAAe,KAAK;AAAA,IACtB,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQR;AACF;AA/BqB,QACZ,SAAyB,CAAC,0BAAiB,mBAAM;AAKZ;AAAA,EAA3C,SAAS,EAAE,SAAS,MAAM,MAAM,QAAQ,CAAC;AAAA,GANvB,QAMyB;AAGA;AAAA,EAA3C,SAAS,EAAE,SAAS,MAAM,MAAM,QAAQ,CAAC;AAAA,GATvB,QASyB;",
+  "names": []
+}

package/dist/chunks/{chunk.YCTZ7J4B.js → chunk.HOKJ5BFL.js}

@@ -1,6 +1,6 @@
 import {
   SynPrioNav
-} from "./chunk.UD4HUYDT.js";
+} from "./chunk.FAK2KFOB.js";
 
 // src/components/prio-nav/prio-nav.ts
 var prio_nav_default = SynPrioNav;
@@ -9,4 +9,4 @@ SynPrioNav.define("syn-prio-nav");
 export {
   prio_nav_default
 };
-//# sourceMappingURL=chunk.YCTZ7J4B.js.map
+//# sourceMappingURL=chunk.HOKJ5BFL.js.map

package/dist/chunks/{chunk.GBB34Y74.js → chunk.HQQIVH2S.js}

@@ -1,6 +1,6 @@
 import {
   SynPagination
-} from "./chunk.QZBZKP3E.js";
+} from "./chunk.ZT5YMF6W.js";
 
 // src/components/pagination/pagination.ts
 var pagination_default = SynPagination;
@@ -9,4 +9,4 @@ SynPagination.define("syn-pagination");
 export {
   pagination_default
 };
-//# sourceMappingURL=chunk.GBB34Y74.js.map
+//# sourceMappingURL=chunk.HQQIVH2S.js.map

package/dist/chunks/{chunk.EX43UAEY.js → chunk.HRXQKMTA.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.WRPQ3635.js";
 import {
   SynIcon
-} from "./chunk.ZTHIOBJX.js";
+} from "./chunk.SFBN63ZC.js";
 import {
   LocalizeController
 } from "./chunk.VCRQ2GII.js";
@@ -15,7 +15,7 @@ import {
 } from "./chunk.2NT3B5WJ.js";
 import {
   SynergyElement
-} from "./chunk.WL3IXJNI.js";
+} from "./chunk.7YCUXELV.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -91,4 +91,4 @@ __decorateClass([
 export {
   SynBreadcrumb
 };
-//# sourceMappingURL=chunk.EX43UAEY.js.map
+//# sourceMappingURL=chunk.HRXQKMTA.js.map

package/dist/chunks/{chunk.MPJ2QALZ.js → chunk.HUJAKIZN.js}

@@ -65,7 +65,7 @@ var header_styles_default = css`
    */
   .header__label {
     color: var(--syn-typography-color-text);
-    font: var(--syn-body-large-bold);
+    font: var(--syn-heading-large);
     padding: 0 var(--syn-spacing-2x-large);
     white-space: nowrap;
   }
@@ -145,4 +145,4 @@ var header_styles_default = css`
 export {
   header_styles_default
 };
-//# sourceMappingURL=chunk.MPJ2QALZ.js.map
+//# sourceMappingURL=chunk.HUJAKIZN.js.map

package/dist/chunks/{chunk.MPJ2QALZ.js.map → chunk.HUJAKIZN.js.map}

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/components/header/header.styles.ts"],
-  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  :host {\n    --sticky-position: 0;\n    --metanavigation-item-size: var(--syn-font-size-x-large);\n\n    display: block;\n  }\n\n  .header {\n    background: var(--syn-panel-background-color);\n    box-shadow: inset 0 -1px 0 0 var(--syn-header-border-color);\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-logo-color);\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-logo-color);\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-interactive-quiet-color);\n    display: contents;\n    font-size: var(--metanavigation-item-size);\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-interactive-quiet-color);\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-interactive-quiet-color-hover);\n  }\n\n  .header__burger-menu-toggle:active {\n    color: var(--syn-interactive-quiet-color-active);\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  /**\n   * #529: Sticky header styles\n   */\n  :host([sticky]) {\n    box-shadow: var(--syn-shadow-sticky-down);\n    position: sticky;\n    top: var(--sticky-position);\n\n    /* Make sure the header is above all other content, but below any potential modals or overlays */\n    z-index: calc(infinity - 1);\n  }\n`;\n"],
+  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  :host {\n    --sticky-position: 0;\n    --metanavigation-item-size: var(--syn-font-size-x-large);\n\n    display: block;\n  }\n\n  .header {\n    background: var(--syn-panel-background-color);\n    box-shadow: inset 0 -1px 0 0 var(--syn-header-border-color);\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-logo-color);\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-logo-color);\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-heading-large);\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-interactive-quiet-color);\n    display: contents;\n    font-size: var(--metanavigation-item-size);\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-interactive-quiet-color);\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-interactive-quiet-color-hover);\n  }\n\n  .header__burger-menu-toggle:active {\n    color: var(--syn-interactive-quiet-color-active);\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  /**\n   * #529: Sticky header styles\n   */\n  :host([sticky]) {\n    box-shadow: var(--syn-shadow-sticky-down);\n    position: sticky;\n    top: var(--sticky-position);\n\n    /* Make sure the header is above all other content, but below any potential modals or overlays */\n    z-index: calc(infinity - 1);\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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

package/dist/chunks/{chunk.3TPF3YOJ.js → chunk.I6PP4QSQ.js}

@@ -1,6 +1,6 @@
 import {
   SynProgressRing
-} from "./chunk.MG6X5MYV.js";
+} from "./chunk.TMXDTUP5.js";
 
 // src/components/progress-ring/progress-ring.ts
 var progress_ring_default = SynProgressRing;
@@ -9,4 +9,4 @@ SynProgressRing.define("syn-progress-ring");
 export {
   progress_ring_default
 };
-//# sourceMappingURL=chunk.3TPF3YOJ.js.map
+//# sourceMappingURL=chunk.I6PP4QSQ.js.map

package/dist/chunks/{chunk.N2EW6GUY.js → chunk.IHAFPHVS.js}

@@ -1,6 +1,6 @@
 import {
   SynRadioGroup
-} from "./chunk.W5JD45AC.js";
+} from "./chunk.6HU2H2VB.js";
 
 // src/components/radio-group/radio-group.ts
 var radio_group_default = SynRadioGroup;
@@ -9,4 +9,4 @@ SynRadioGroup.define("syn-radio-group");
 export {
   radio_group_default
 };
-//# sourceMappingURL=chunk.N2EW6GUY.js.map
+//# sourceMappingURL=chunk.IHAFPHVS.js.map

package/dist/chunks/{chunk.AF4B7YYE.js → chunk.IIRPZ642.js}

@@ -9,7 +9,7 @@ import {
 } from "./chunk.KVS7GBFQ.js";
 import {
   SynDivider
-} from "./chunk.CQ46LXUP.js";
+} from "./chunk.QYOAPG3L.js";
 import {
   defaultValue
 } from "./chunk.3JDUKQRN.js";
@@ -24,10 +24,10 @@ import {
 } from "./chunk.CHFWLQN5.js";
 import {
   SynIcon
-} from "./chunk.ZTHIOBJX.js";
+} from "./chunk.SFBN63ZC.js";
 import {
   enableDefaultSettings
-} from "./chunk.4MG3QDNW.js";
+} from "./chunk.4I2RJVH5.js";
 import {
   createNumericStrategy,
   modernNumericStrategy,
@@ -44,7 +44,7 @@ import {
 } from "./chunk.2NT3B5WJ.js";
 import {
   SynergyElement
-} from "./chunk.WL3IXJNI.js";
+} from "./chunk.7YCUXELV.js";
 import {
   __decorateClass,
   __privateAdd,
@@ -865,4 +865,4 @@ SynInput = __decorateClass([
 export {
   SynInput
 };
-//# sourceMappingURL=chunk.AF4B7YYE.js.map
+//# sourceMappingURL=chunk.IIRPZ642.js.map

package/dist/chunks/{chunk.B2YV7MIT.js → chunk.IRQYNSLA.js}

@@ -1,6 +1,6 @@
 import {
   SynTagGroup
-} from "./chunk.Y46MLFHY.js";
+} from "./chunk.37IHP7BG.js";
 
 // src/components/tag-group/tag-group.ts
 var tag_group_default = SynTagGroup;
@@ -9,4 +9,4 @@ SynTagGroup.define("syn-tag-group");
 export {
   tag_group_default
 };
-//# sourceMappingURL=chunk.B2YV7MIT.js.map
+//# sourceMappingURL=chunk.IRQYNSLA.js.map

package/dist/chunks/{chunk.JBEKP3MA.js → chunk.IWWZ7NR4.js}

@@ -1,6 +1,6 @@
 import {
   SynSelect
-} from "./chunk.OOEOZE2L.js";
+} from "./chunk.WVGOSRRS.js";
 
 // src/components/select/select.ts
 var select_default = SynSelect;
@@ -9,4 +9,4 @@ SynSelect.define("syn-select");
 export {
   select_default
 };
-//# sourceMappingURL=chunk.JBEKP3MA.js.map
+//# sourceMappingURL=chunk.IWWZ7NR4.js.map

package/dist/chunks/{chunk.IXNVXYKT.js → chunk.JDCUCXJ5.js}

@@ -1,6 +1,6 @@
 import {
   SynBreadcrumb
-} from "./chunk.EX43UAEY.js";
+} from "./chunk.HRXQKMTA.js";
 
 // src/components/breadcrumb/breadcrumb.ts
 var breadcrumb_default = SynBreadcrumb;
@@ -9,4 +9,4 @@ SynBreadcrumb.define("syn-breadcrumb");
 export {
   breadcrumb_default
 };
-//# sourceMappingURL=chunk.IXNVXYKT.js.map
+//# sourceMappingURL=chunk.JDCUCXJ5.js.map

package/dist/chunks/{chunk.TVMK25Y5.js → chunk.JIKFLM23.js}

@@ -1,6 +1,6 @@
 import {
   SynCombobox
-} from "./chunk.OTUE6RD7.js";
+} from "./chunk.WYNCUNIG.js";
 
 // src/components/combobox/combobox.ts
 var combobox_default = SynCombobox;
@@ -9,4 +9,4 @@ SynCombobox.define("syn-combobox");
 export {
   combobox_default
 };
-//# sourceMappingURL=chunk.TVMK25Y5.js.map
+//# sourceMappingURL=chunk.JIKFLM23.js.map

package/dist/chunks/{chunk.6I6VY3WS.js → chunk.JNI24XE2.js}

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

package/dist/chunks/{chunk.T5NQSBIU.js → chunk.JVCAQIXF.js}

@@ -1,6 +1,6 @@
 import {
   SynIconButton
-} from "./chunk.DRENFZZA.js";
+} from "./chunk.OBX7SKFS.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.T5NQSBIU.js.map
+//# sourceMappingURL=chunk.JVCAQIXF.js.map

package/dist/chunks/{chunk.P4JFVVSO.js → chunk.KR45AFAB.js}

@@ -98,7 +98,16 @@ var Modal = class {
   checkFocus() {
     if (this.isActive() && !this.isExternalActivated) {
       const tabbableElements = getTabbableElements(this.element);
-      if (!this.element.matches(":focus-within")) {
+      const isFocusWithin = (() => {
+        let node = document.activeElement;
+        while (node) {
+          if (this.element.contains(node)) return true;
+          const root = node.shadowRoot;
+          node = root ? root.activeElement : null;
+        }
+        return false;
+      })();
+      if (!isFocusWithin) {
         const start = tabbableElements[0];
         const end = tabbableElements[tabbableElements.length - 1];
         const target = this.tabDirection === "forward" ? start : end;
@@ -117,4 +126,4 @@ var Modal = class {
 export {
   Modal
 };
-//# sourceMappingURL=chunk.P4JFVVSO.js.map
+//# sourceMappingURL=chunk.KR45AFAB.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/internal/modal.ts"],
+  "sourcesContent": ["/* eslint-disable */\nimport { activeElements, getDeepestActiveElement } from './active-elements.js';\nimport { getTabbableElements } from './tabbable.js';\n\nlet activeModals: HTMLElement[] = [];\n\nexport default class Modal {\n  element: HTMLElement;\n  isExternalActivated: boolean;\n  tabDirection: 'forward' | 'backward' = 'forward';\n  currentFocus: HTMLElement | null;\n  previousFocus: HTMLElement | null;\n  elementsWithTabbableControls: string[];\n\n  constructor(element: HTMLElement) {\n    this.element = element;\n\n    this.elementsWithTabbableControls = ['iframe'];\n  }\n\n  /** Activates focus trapping. */\n  activate() {\n    activeModals.push(this.element);\n    document.addEventListener('focusin', this.handleFocusIn);\n    document.addEventListener('keydown', this.handleKeyDown);\n    document.addEventListener('keyup', this.handleKeyUp);\n  }\n\n  /** Deactivates focus trapping. */\n  deactivate() {\n    activeModals = activeModals.filter(modal => modal !== this.element);\n    this.currentFocus = null;\n    document.removeEventListener('focusin', this.handleFocusIn);\n    document.removeEventListener('keydown', this.handleKeyDown);\n    document.removeEventListener('keyup', this.handleKeyUp);\n  }\n\n  /** Determines if this modal element is currently active or not. */\n  isActive() {\n    // The \"active\" modal is always the most recent one shown\n    return activeModals[activeModals.length - 1] === this.element;\n  }\n\n  /** Activates external modal behavior and temporarily disables focus trapping. */\n  activateExternal() {\n    this.isExternalActivated = true;\n  }\n\n  /** Deactivates external modal behavior and re-enables focus trapping. */\n  deactivateExternal() {\n    this.isExternalActivated = false;\n  }\n\n  private checkFocus() {\n    if (this.isActive() && !this.isExternalActivated) {\n      const tabbableElements = getTabbableElements(this.element);\n\n      // Chrome 149+ (Chromium issue #407769114) changed the `:focus-within`\n      // pseudo-class so that it no longer propagates through top-layer elements\n      // (e.g. popovers opened via the Popover API).  When a syn-select or\n      // syn-dropdown inside this dialog opens its popup (which is promoted to\n      // the top-layer), `:focus-within` on the dialog returns `false` even\n      // though focus is logically still within the dialog's content tree.\n      // This caused the modal to immediately yank focus back, closing the popup.\n      //\n      // Fix: walk the composed active-element chain and check whether any\n      // element in that chain is a descendant of this modal.  This is immune to\n      // the top-layer boundary because we query actual DOM containment rather\n      // than relying on the CSS pseudo-class.\n      const isFocusWithin = (() => {\n        // Traverse shadow-root boundaries to find the deepest focused element\n        let node: Element | null = document.activeElement;\n        while (node) {\n          if (this.element.contains(node)) return true;\n          const root = node.shadowRoot;\n          node = root ? root.activeElement : null;\n        }\n        return false;\n      })();\n\n      if (!isFocusWithin) {\n        const start = tabbableElements[0];\n        const end = tabbableElements[tabbableElements.length - 1];\n        const target = this.tabDirection === 'forward' ? start : end;\n\n        if (typeof target?.focus === 'function') {\n          this.currentFocus = target;\n          target.focus({ preventScroll: false });\n        }\n      }\n    }\n  }\n\n  private handleFocusIn = () => {\n    if (!this.isActive()) return;\n    this.checkFocus();\n  };\n\n  private possiblyHasTabbableChildren(element: HTMLElement) {\n    return (\n      this.elementsWithTabbableControls.includes(element.tagName.toLowerCase()) || element.hasAttribute('controls')\n      // Should we add a data-attribute for people to set just in case they have an element where we don't know if it has possibly tabbable elements?\n    );\n  }\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (event.key !== 'Tab' || this.isExternalActivated) return;\n    if (!this.isActive()) return;\n\n    // Because sometimes focus can actually be taken over from outside sources,\n    // we don't want to rely on `this.currentFocus`. Instead we check the actual `activeElement` and\n    // recurse through shadowRoots.\n    const currentActiveElement = getDeepestActiveElement();\n    this.previousFocus = currentActiveElement as HTMLElement | null;\n\n    if (this.previousFocus && this.possiblyHasTabbableChildren(this.previousFocus)) {\n      return;\n    }\n\n    if (event.shiftKey) {\n      this.tabDirection = 'backward';\n    } else {\n      this.tabDirection = 'forward';\n    }\n\n    const tabbableElements = getTabbableElements(this.element);\n\n    let currentFocusIndex = tabbableElements.findIndex(el => el === currentActiveElement);\n\n    this.previousFocus = this.currentFocus;\n\n    const addition = this.tabDirection === 'forward' ? 1 : -1;\n\n    // eslint-disable-next-line\n    while (true) {\n      if (currentFocusIndex + addition >= tabbableElements.length) {\n        currentFocusIndex = 0;\n      } else if (currentFocusIndex + addition < 0) {\n        currentFocusIndex = tabbableElements.length - 1;\n      } else {\n        currentFocusIndex += addition;\n      }\n\n      this.previousFocus = this.currentFocus;\n      const nextFocus = /** @type {HTMLElement} */ tabbableElements[currentFocusIndex];\n\n      // This is a special case. We need to make sure we're not calling .focus() if we're already focused on an element\n      // that possibly has \"controls\"\n      if (this.tabDirection === 'backward') {\n        if (this.previousFocus && this.possiblyHasTabbableChildren(this.previousFocus)) {\n          return;\n        }\n      }\n\n      if (nextFocus && this.possiblyHasTabbableChildren(nextFocus)) {\n        return;\n      }\n\n      event.preventDefault();\n      this.currentFocus = nextFocus;\n      this.currentFocus?.focus({ preventScroll: false });\n\n      // Check to make sure focus actually changed. It may not always be the next focus, we just don't want it to be the previousFocus.\n      const allActiveElements = [...activeElements()];\n      if (allActiveElements.includes(this.currentFocus) || !allActiveElements.includes(this.previousFocus!)) {\n        break;\n      }\n    }\n\n    setTimeout(() => this.checkFocus());\n  };\n\n  private handleKeyUp = () => {\n    this.tabDirection = 'forward';\n  };\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/chunks/{chunk.TVS4L3HC.js → chunk.KVYYFM4V.js}

@@ -7,7 +7,7 @@ import {
 } from "./chunk.XRSLCQH3.js";
 import {
   SynPopup
-} from "./chunk.W46WQKWL.js";
+} from "./chunk.MWEJ7CGR.js";
 import {
   waitForEvent
 } from "./chunk.LQDIH4Z5.js";
@@ -30,7 +30,7 @@ import {
 } from "./chunk.2NT3B5WJ.js";
 import {
   SynergyElement
-} from "./chunk.WL3IXJNI.js";
+} from "./chunk.7YCUXELV.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -382,4 +382,4 @@ setDefaultAnimation("dropdown.hide", {
 export {
   SynDropdown
 };
-//# sourceMappingURL=chunk.TVS4L3HC.js.map
+//# sourceMappingURL=chunk.KVYYFM4V.js.map