@synergy-design-system/components 1.21.0 → 1.23.0

package/dist/chunks/{chunk.PBK6R2U7.js → chunk.ER5OH7PE.js}

@@ -23,7 +23,7 @@ import {
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.P2DUZ56G.js";
+} from "./chunk.R47GARB7.js";
 import {
   __decorateClass
 } from "./chunk.QNDC5KWA.js";
@@ -247,4 +247,4 @@ __decorateClass([
 export {
   SynSwitch
 };
-//# sourceMappingURL=chunk.PBK6R2U7.js.map
+//# sourceMappingURL=chunk.ER5OH7PE.js.map

package/dist/chunks/{chunk.MSX76EO6.js → chunk.EV3VRCZO.js}

@@ -1,6 +1,6 @@
 import {
   SynProgressRing
-} from "./chunk.XPDGTEZV.js";
+} from "./chunk.WXINI2LT.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.MSX76EO6.js.map
+//# sourceMappingURL=chunk.EV3VRCZO.js.map

package/dist/chunks/{chunk.VZP6ITZS.js → chunk.F4PCHWCA.js}

@@ -1,6 +1,6 @@
 import {
   SynDropdown
-} from "./chunk.43M7YAGR.js";
+} from "./chunk.P3JNSYA3.js";
 
 // src/components/dropdown/dropdown.ts
 var dropdown_default = SynDropdown;
@@ -9,4 +9,4 @@ SynDropdown.define("syn-dropdown");
 export {
   dropdown_default
 };
-//# sourceMappingURL=chunk.VZP6ITZS.js.map
+//# sourceMappingURL=chunk.F4PCHWCA.js.map

package/dist/chunks/{chunk.MRHJDAKR.js → chunk.FP5U5XKU.js}

@@ -6,14 +6,14 @@ import {
 } from "./chunk.PKO6FEOM.js";
 import {
   SynIcon
-} from "./chunk.NL4KNMYG.js";
+} from "./chunk.VHPGEUHA.js";
 import {
   watch
 } from "./chunk.AVTU2BGE.js";
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.P2DUZ56G.js";
+} from "./chunk.R47GARB7.js";
 import {
   __decorateClass
 } from "./chunk.QNDC5KWA.js";
@@ -112,4 +112,4 @@ __decorateClass([
 export {
   SynRadio
 };
-//# sourceMappingURL=chunk.MRHJDAKR.js.map
+//# sourceMappingURL=chunk.FP5U5XKU.js.map

package/dist/chunks/{chunk.LJRMT2PX.js → chunk.FQMRWJFJ.js}

@@ -9,17 +9,17 @@ import {
 } from "./chunk.JDBDBGQP.js";
 import {
   SynPopup
-} from "./chunk.EP326OJQ.js";
+} from "./chunk.QEWKO72D.js";
 import {
   SynSpinner
-} from "./chunk.YI7Z3FPD.js";
+} from "./chunk.TAQALRJR.js";
 import {
   HasSlotController,
   getTextContent
 } from "./chunk.66WXVGAW.js";
 import {
   SynIcon
-} from "./chunk.NL4KNMYG.js";
+} from "./chunk.VHPGEUHA.js";
 import {
   watch
 } from "./chunk.AVTU2BGE.js";
@@ -29,7 +29,7 @@ import {
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.P2DUZ56G.js";
+} from "./chunk.R47GARB7.js";
 import {
   __decorateClass
 } from "./chunk.QNDC5KWA.js";
@@ -191,4 +191,4 @@ __decorateClass([
 export {
   SynMenuItem
 };
-//# sourceMappingURL=chunk.LJRMT2PX.js.map
+//# sourceMappingURL=chunk.FQMRWJFJ.js.map

package/dist/chunks/{chunk.KTCFTDRV.js → chunk.FQZVX543.js}

@@ -1,6 +1,6 @@
 import {
   SynDrawer
-} from "./chunk.65TQU6BR.js";
+} from "./chunk.NRNCS4W7.js";
 
 // src/components/drawer/drawer.ts
 var drawer_default = SynDrawer;
@@ -9,4 +9,4 @@ SynDrawer.define("syn-drawer");
 export {
   drawer_default
 };
-//# sourceMappingURL=chunk.KTCFTDRV.js.map
+//# sourceMappingURL=chunk.FQZVX543.js.map

package/dist/chunks/{chunk.NZEUVKVW.js → chunk.G5IZQ6S2.js}

@@ -1,6 +1,6 @@
 import {
   SynRadioButton
-} from "./chunk.EEXLRM2A.js";
+} from "./chunk.ZTCTJE62.js";
 
 // src/components/radio-button/radio-button.ts
 var radio_button_default = SynRadioButton;
@@ -9,4 +9,4 @@ SynRadioButton.define("syn-radio-button");
 export {
   radio_button_default
 };
-//# sourceMappingURL=chunk.NZEUVKVW.js.map
+//# sourceMappingURL=chunk.G5IZQ6S2.js.map

package/dist/chunks/{chunk.4UQWOVA3.js → chunk.GAOGMXIA.js}

@@ -1,6 +1,6 @@
 import {
   SynTag
-} from "./chunk.MJ5Z7CGD.js";
+} from "./chunk.TU2TR3D6.js";
 
 // src/components/tag/tag.ts
 var tag_default = SynTag;
@@ -9,4 +9,4 @@ SynTag.define("syn-tag");
 export {
   tag_default
 };
-//# sourceMappingURL=chunk.4UQWOVA3.js.map
+//# sourceMappingURL=chunk.GAOGMXIA.js.map

package/dist/chunks/{chunk.PP52JMRC.js → chunk.HGPR3DSR.js}

@@ -1,15 +1,15 @@
 import {
   side_nav_styles_default
 } from "./chunk.GO3CCKC3.js";
+import {
+  SynDivider
+} from "./chunk.P7BWMA4R.js";
 import {
   SynDrawer
-} from "./chunk.65TQU6BR.js";
+} from "./chunk.NRNCS4W7.js";
 import {
   unlockBodyScrolling
 } from "./chunk.RIJKFEYZ.js";
-import {
-  SynDivider
-} from "./chunk.Y32IWDVW.js";
 import {
   waitForEvent
 } from "./chunk.UMKKOHXB.js";
@@ -30,7 +30,7 @@ import {
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.P2DUZ56G.js";
+} from "./chunk.R47GARB7.js";
 import {
   __decorateClass
 } from "./chunk.QNDC5KWA.js";
@@ -283,4 +283,4 @@ setDefaultAnimation("sideNav.overlay.hide", {
 export {
   SynSideNav
 };
-//# sourceMappingURL=chunk.PP52JMRC.js.map
+//# sourceMappingURL=chunk.HGPR3DSR.js.map

package/dist/chunks/{chunk.DYKJ6SMQ.js → chunk.HJ2BLED6.js}

@@ -1,6 +1,6 @@
 import {
   SynIconButton
-} from "./chunk.VJCLMFVL.js";
+} from "./chunk.6C4OKY3S.js";
 import {
   animateTo,
   stopAnimations,
@@ -10,25 +10,25 @@ import {
   getAnimation,
   setDefaultAnimation
 } from "./chunk.QAUTITK3.js";
-import {
-  alert_custom_styles_default
-} from "./chunk.JRYXECAY.js";
-import {
-  alert_styles_default
-} from "./chunk.PS4UJFYT.js";
 import {
   HasSlotController
 } from "./chunk.66WXVGAW.js";
 import {
   watch
 } from "./chunk.AVTU2BGE.js";
+import {
+  alert_custom_styles_default
+} from "./chunk.JRYXECAY.js";
+import {
+  alert_styles_default
+} from "./chunk.PS4UJFYT.js";
 import {
   LocalizeController
 } from "./chunk.GEHO4WRP.js";
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.P2DUZ56G.js";
+} from "./chunk.R47GARB7.js";
 import {
   __decorateClass
 } from "./chunk.QNDC5KWA.js";
@@ -214,4 +214,4 @@ setDefaultAnimation("alert.hide", {
 export {
   SynAlert
 };
-//# sourceMappingURL=chunk.DYKJ6SMQ.js.map
+//# sourceMappingURL=chunk.HJ2BLED6.js.map

package/dist/chunks/{chunk.RSUUSMM3.js → chunk.HJS2XO3E.js}

@@ -1,12 +1,12 @@
-import {
-  option_styles_default
-} from "./chunk.CFIQXXMW.js";
 import {
   option_custom_styles_default
 } from "./chunk.3B24TYVN.js";
+import {
+  option_styles_default
+} from "./chunk.CFIQXXMW.js";
 import {
   SynIcon
-} from "./chunk.NL4KNMYG.js";
+} from "./chunk.VHPGEUHA.js";
 import {
   watch
 } from "./chunk.AVTU2BGE.js";
@@ -16,7 +16,7 @@ import {
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.P2DUZ56G.js";
+} from "./chunk.R47GARB7.js";
 import {
   __decorateClass
 } from "./chunk.QNDC5KWA.js";
@@ -144,4 +144,4 @@ __decorateClass([
 export {
   SynOption
 };
-//# sourceMappingURL=chunk.RSUUSMM3.js.map
+//# sourceMappingURL=chunk.HJS2XO3E.js.map

package/dist/chunks/{chunk.3LOUHEEN.js → chunk.HVRGKMS2.js}

@@ -19,14 +19,14 @@ import {
 } from "./chunk.66WXVGAW.js";
 import {
   SynIcon
-} from "./chunk.NL4KNMYG.js";
+} from "./chunk.VHPGEUHA.js";
 import {
   watch
 } from "./chunk.AVTU2BGE.js";
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.P2DUZ56G.js";
+} from "./chunk.R47GARB7.js";
 import {
   __decorateClass
 } from "./chunk.QNDC5KWA.js";
@@ -259,4 +259,4 @@ __decorateClass([
 export {
   SynCheckbox
 };
-//# sourceMappingURL=chunk.3LOUHEEN.js.map
+//# sourceMappingURL=chunk.HVRGKMS2.js.map

package/dist/chunks/{chunk.KZMWNTUS.js → chunk.I4FIU7FA.js}

@@ -5,7 +5,7 @@ var drawer_custom_styles_default = css`
     /**
      * Used as the default padding for the drawer title
      */
-    --header-spacing: var(--syn-spacing-large) var(--syn-spacing-x-small) 0 var(--syn-spacing-large);
+    --header-spacing: var(--syn-spacing-large) var(--syn-spacing-x-small) var(--syn-spacing-large) var(--syn-spacing-large);
 
     /**
      * Defines the default body spacing
@@ -15,7 +15,7 @@ var drawer_custom_styles_default = css`
     /**
      * Defines the default footer spacing
      */
-    --footer-spacing: var(--syn-spacing-medium) var(--syn-spacing-large) var(--syn-spacing-large);
+    --footer-spacing: var(--syn-spacing-medium) var(--syn-spacing-large) var(--syn-spacing-large) var(--syn-spacing-medium);
   }
 
   /**
@@ -51,7 +51,7 @@ var drawer_custom_styles_default = css`
   .drawer__header-actions {
     align-items: flex-start;
     gap: var(--syn-spacing-x-small);
-    padding: var(--syn-spacing-large) var(--syn-spacing-x-small) 0 0;
+    padding: var(--syn-spacing-large) var(--syn-spacing-small) var(--syn-spacing-large) 0;
   }
 
   .drawer__title {
@@ -66,8 +66,8 @@ var drawer_custom_styles_default = css`
    * When omitting this statement, we will get rounding problems via line-height
    */
   .drawer__title,
-  .header-actions {
-    min-height: 64px;
+  .drawer__header-actions {
+    min-height: 88px;
   }
 
   .drawer__header-actions syn-icon-button,
@@ -80,4 +80,4 @@ var drawer_custom_styles_default = css`
 export {
   drawer_custom_styles_default
 };
-//# sourceMappingURL=chunk.KZMWNTUS.js.map
+//# sourceMappingURL=chunk.I4FIU7FA.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/drawer/drawer.custom.styles.ts"],
+  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  :host {\n    /**\n     * Used as the default padding for the drawer title\n     */\n    --header-spacing: var(--syn-spacing-large) var(--syn-spacing-x-small) var(--syn-spacing-large) var(--syn-spacing-large);\n\n    /**\n     * Defines the default body spacing\n     */\n    --body-spacing: var(--syn-spacing-medium) var(--syn-spacing-large);\n\n    /**\n     * Defines the default footer spacing\n     */\n    --footer-spacing: var(--syn-spacing-medium) var(--syn-spacing-large) var(--syn-spacing-large) var(--syn-spacing-medium);\n  }\n\n  /**\n   * Synergy uses a border to distinguish the drawer from its background and\n   * removes the default shoelace shadow completely\n   */\n  .drawer__panel {\n    border: 0 solid var(--syn-panel-border-color);\n    box-shadow: none;\n    color: var(--syn-color-neutral-950);\n  }\n\n  /*\n   * The border of the panel is always placed in direction to the content,\n   * depending on the position of the drawer itself\n   */\n  .drawer--end .drawer__panel {\n    border-left-width: var(--syn-border-width-small);\n  }\n\n  .drawer--start .drawer__panel {\n    border-right-width: var(--syn-border-width-small);\n  }\n\n  .drawer--top .drawer__panel {\n    border-bottom-width: var(--syn-border-width-small);\n  }\n\n  .drawer--bottom .drawer__panel {\n    border-top-width: var(--syn-border-width-small);\n  }\n\n  .drawer__header-actions {\n    align-items: flex-start;\n    gap: var(--syn-spacing-x-small);\n    padding: var(--syn-spacing-large) var(--syn-spacing-small) var(--syn-spacing-large) 0;\n  }\n\n  .drawer__title {\n    font-family: var(--syn-font-sans);\n    font-size: var(--syn-font-size-x-large);\n    font-weight: var(--syn-font-weight-bold);\n    line-height: var(--syn-line-height-normal);\n  }\n\n  /**\n   * We need this to make sure we are big enough as defined in the layout\n   * When omitting this statement, we will get rounding problems via line-height\n   */\n  .drawer__title,\n  .drawer__header-actions {\n    min-height: 88px;\n  }\n\n  .drawer__header-actions syn-icon-button,\n  .drawer__header-actions ::slotted(syn-icon-button) {\n    color: var(--syn-color-neutral-950);\n    font-size: var(--syn-font-size-x-large);\n  }\n`;\n"],
+  "mappings": ";AAAA,SAAS,WAAW;AAEpB,IAAO,+BAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}

package/dist/chunks/{chunk.OXIWVSZW.js → chunk.IGMLSPCX.js}

@@ -6,11 +6,11 @@ import {
 } from "./chunk.3FOVDOJX.js";
 import {
   SynDivider
-} from "./chunk.Y32IWDVW.js";
+} from "./chunk.P7BWMA4R.js";
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.P2DUZ56G.js";
+} from "./chunk.R47GARB7.js";
 
 // src/components/menu-label/menu-label.component.ts
 import { html } from "lit";
@@ -32,4 +32,4 @@ SynMenuLabel.dependencies = {
 export {
   SynMenuLabel
 };
-//# sourceMappingURL=chunk.OXIWVSZW.js.map
+//# sourceMappingURL=chunk.IGMLSPCX.js.map

package/dist/chunks/{chunk.HD535D5A.js → chunk.IKY4SF3U.js}

@@ -1,6 +1,6 @@
 import {
   SynIcon
-} from "./chunk.NL4KNMYG.js";
+} from "./chunk.VHPGEUHA.js";
 
 // src/components/icon/icon.ts
 var icon_default = SynIcon;
@@ -9,4 +9,4 @@ SynIcon.define("syn-icon");
 export {
   icon_default
 };
-//# sourceMappingURL=chunk.HD535D5A.js.map
+//# sourceMappingURL=chunk.IKY4SF3U.js.map

package/dist/chunks/chunk.ITXLZUTJ.js

@@ -0,0 +1,137 @@
+import {
+  getTabbableElements
+} from "./chunk.2QOQY4ZG.js";
+import {
+  __yieldStar
+} from "./chunk.QNDC5KWA.js";
+
+// src/internal/active-elements.ts
+function* activeElements(activeElement = document.activeElement) {
+  if (activeElement === null || activeElement === void 0)
+    return;
+  yield activeElement;
+  if ("shadowRoot" in activeElement && activeElement.shadowRoot && activeElement.shadowRoot.mode !== "closed") {
+    yield* __yieldStar(activeElements(activeElement.shadowRoot.activeElement));
+  }
+}
+function getDeepestActiveElement() {
+  return [...activeElements()].pop();
+}
+
+// src/internal/modal.ts
+var activeModals = [];
+var Modal = class {
+  constructor(element) {
+    this.tabDirection = "forward";
+    this.handleFocusIn = () => {
+      if (!this.isActive())
+        return;
+      this.checkFocus();
+    };
+    this.handleKeyDown = (event) => {
+      var _a;
+      if (event.key !== "Tab" || this.isExternalActivated)
+        return;
+      if (!this.isActive())
+        return;
+      const currentActiveElement = getDeepestActiveElement();
+      this.previousFocus = currentActiveElement;
+      if (this.previousFocus && this.possiblyHasTabbableChildren(this.previousFocus)) {
+        return;
+      }
+      if (event.shiftKey) {
+        this.tabDirection = "backward";
+      } else {
+        this.tabDirection = "forward";
+      }
+      const tabbableElements = getTabbableElements(this.element);
+      let currentFocusIndex = tabbableElements.findIndex((el) => el === currentActiveElement);
+      this.previousFocus = this.currentFocus;
+      const addition = this.tabDirection === "forward" ? 1 : -1;
+      while (true) {
+        if (currentFocusIndex + addition >= tabbableElements.length) {
+          currentFocusIndex = 0;
+        } else if (currentFocusIndex + addition < 0) {
+          currentFocusIndex = tabbableElements.length - 1;
+        } else {
+          currentFocusIndex += addition;
+        }
+        this.previousFocus = this.currentFocus;
+        const nextFocus = (
+          /** @type {HTMLElement} */
+          tabbableElements[currentFocusIndex]
+        );
+        if (this.tabDirection === "backward") {
+          if (this.previousFocus && this.possiblyHasTabbableChildren(this.previousFocus)) {
+            return;
+          }
+        }
+        if (nextFocus && this.possiblyHasTabbableChildren(nextFocus)) {
+          return;
+        }
+        event.preventDefault();
+        this.currentFocus = nextFocus;
+        (_a = this.currentFocus) == null ? void 0 : _a.focus({ preventScroll: false });
+        const allActiveElements = [...activeElements()];
+        if (allActiveElements.includes(this.currentFocus) || !allActiveElements.includes(this.previousFocus)) {
+          break;
+        }
+      }
+      setTimeout(() => this.checkFocus());
+    };
+    this.handleKeyUp = () => {
+      this.tabDirection = "forward";
+    };
+    this.element = element;
+    this.elementsWithTabbableControls = ["iframe"];
+  }
+  /** Activates focus trapping. */
+  activate() {
+    activeModals.push(this.element);
+    document.addEventListener("focusin", this.handleFocusIn);
+    document.addEventListener("keydown", this.handleKeyDown);
+    document.addEventListener("keyup", this.handleKeyUp);
+  }
+  /** Deactivates focus trapping. */
+  deactivate() {
+    activeModals = activeModals.filter((modal) => modal !== this.element);
+    this.currentFocus = null;
+    document.removeEventListener("focusin", this.handleFocusIn);
+    document.removeEventListener("keydown", this.handleKeyDown);
+    document.removeEventListener("keyup", this.handleKeyUp);
+  }
+  /** Determines if this modal element is currently active or not. */
+  isActive() {
+    return activeModals[activeModals.length - 1] === this.element;
+  }
+  /** Activates external modal behavior and temporarily disables focus trapping. */
+  activateExternal() {
+    this.isExternalActivated = true;
+  }
+  /** Deactivates external modal behavior and re-enables focus trapping. */
+  deactivateExternal() {
+    this.isExternalActivated = false;
+  }
+  checkFocus() {
+    if (this.isActive() && !this.isExternalActivated) {
+      const tabbableElements = getTabbableElements(this.element);
+      if (!this.element.matches(":focus-within")) {
+        const start = tabbableElements[0];
+        const end = tabbableElements[tabbableElements.length - 1];
+        const target = this.tabDirection === "forward" ? start : end;
+        if (typeof (target == null ? void 0 : target.focus) === "function") {
+          this.currentFocus = target;
+          target.focus({ preventScroll: false });
+        }
+      }
+    }
+  }
+  possiblyHasTabbableChildren(element) {
+    return this.elementsWithTabbableControls.includes(element.tagName.toLowerCase()) || element.hasAttribute("controls");
+  }
+};
+
+export {
+  Modal
+};
+//# sourceMappingURL=chunk.ITXLZUTJ.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/internal/active-elements.ts", "../../src/internal/modal.ts"],
+  "sourcesContent": ["// ---------------------------------------------------------------------\n// \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n// Removing this comment will prevent it from being managed by it.\n// ---------------------------------------------------------------------\n\n/* eslint-disable */\n/**\n * Use a generator so we can iterate and possibly break early.\n * @example\n *   // to operate like a regular array. This kinda nullifies generator benefits, but worth knowing if you need the whole array.\n *   const allActiveElements = [...activeElements()]\n *\n *   // Early return\n *   for (const activeElement of activeElements()) {\n *     if (<cond>) {\n *       break; // Break the loop, dont need to iterate over the whole array or store an array in memory!\n *     }\n *   }\n */\nexport function* activeElements(activeElement: Element | null = document.activeElement): Generator<Element> {\n  if (activeElement === null || activeElement === undefined) return;\n\n  yield activeElement;\n\n  if ('shadowRoot' in activeElement && activeElement.shadowRoot && activeElement.shadowRoot.mode !== 'closed') {\n    yield* activeElements(activeElement.shadowRoot.activeElement);\n  }\n}\n\nexport function getDeepestActiveElement() {\n  return [...activeElements()].pop();\n}\n", "// ---------------------------------------------------------------------\n// \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n// Removing this comment will prevent it from being managed by it.\n// ---------------------------------------------------------------------\n\n/* 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      if (!this.element.matches(':focus-within')) {\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.IU3SSJZE.js

@@ -0,0 +1,59 @@
+// src/components/dialog/dialog.custom.styles.ts
+import { css } from "lit";
+var dialog_custom_styles_default = css`
+  :host {
+    /**
+     * Used as the default padding for the dialog title
+     */
+    --header-spacing: var(--syn-spacing-large) var(--syn-spacing-x-small) var(--syn-spacing-large) var(--syn-spacing-large);
+
+    /**
+     * Defines the default body spacing
+     */
+    --body-spacing: var(--syn-spacing-medium) var(--syn-spacing-large);
+
+    /**
+     * Defines the default footer spacing
+     */
+    --footer-spacing: var(--syn-spacing-medium) var(--syn-spacing-large) var(--syn-spacing-large) var(--syn-spacing-medium);
+  }
+
+  .dialog__panel {
+    border: var(--syn-spacing-4x-small) solid var(--syn-panel-border-color);
+    border-radius: var(--syn-border-radius-none);
+    box-shadow: var(--syn-shadow-large);
+  }
+
+  .dialog__header-actions {
+    align-items: flex-start;
+    gap: var(--syn-spacing-x-small);
+    padding: var(--syn-spacing-large) var(--syn-spacing-small) var(--syn-spacing-large) 0;
+  }
+
+  /**
+   * We need this to make sure we are big enough as defined in the layout
+   * When omitting this statement, we will get rounding problems via line-height
+   */
+  .dialog__title,
+  .dialog__header-actions {
+    min-height: 88px;
+  }
+
+  .dialog__header-actions syn-icon-button,
+  .dialog__header-actions ::slotted(syn-icon-button) {
+    color: var(--syn-color-neutral-950);
+    font-size: var(--syn-font-size-x-large);
+  }
+
+  .dialog__title {
+    font-family: var(--syn-font-sans);
+    font-size: var(--syn-font-size-x-large);
+    font-weight: var(--syn-font-weight-bold);
+    line-height: var(--syn-line-height-normal);
+  }
+`;
+
+export {
+  dialog_custom_styles_default
+};
+//# sourceMappingURL=chunk.IU3SSJZE.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/dialog/dialog.custom.styles.ts"],
+  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  :host {\n    /**\n     * Used as the default padding for the dialog title\n     */\n    --header-spacing: var(--syn-spacing-large) var(--syn-spacing-x-small) var(--syn-spacing-large) var(--syn-spacing-large);\n\n    /**\n     * Defines the default body spacing\n     */\n    --body-spacing: var(--syn-spacing-medium) var(--syn-spacing-large);\n\n    /**\n     * Defines the default footer spacing\n     */\n    --footer-spacing: var(--syn-spacing-medium) var(--syn-spacing-large) var(--syn-spacing-large) var(--syn-spacing-medium);\n  }\n\n  .dialog__panel {\n    border: var(--syn-spacing-4x-small) solid var(--syn-panel-border-color);\n    border-radius: var(--syn-border-radius-none);\n    box-shadow: var(--syn-shadow-large);\n  }\n\n  .dialog__header-actions {\n    align-items: flex-start;\n    gap: var(--syn-spacing-x-small);\n    padding: var(--syn-spacing-large) var(--syn-spacing-small) var(--syn-spacing-large) 0;\n  }\n\n  /**\n   * We need this to make sure we are big enough as defined in the layout\n   * When omitting this statement, we will get rounding problems via line-height\n   */\n  .dialog__title,\n  .dialog__header-actions {\n    min-height: 88px;\n  }\n\n  .dialog__header-actions syn-icon-button,\n  .dialog__header-actions ::slotted(syn-icon-button) {\n    color: var(--syn-color-neutral-950);\n    font-size: var(--syn-font-size-x-large);\n  }\n\n  .dialog__title {\n    font-family: var(--syn-font-sans);\n    font-size: var(--syn-font-size-x-large);\n    font-weight: var(--syn-font-weight-bold);\n    line-height: var(--syn-line-height-normal);\n  }\n`;\n"],
+  "mappings": ";AAAA,SAAS,WAAW;AAEpB,IAAO,+BAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}

package/dist/chunks/{chunk.C5G3ID4E.js → chunk.JURUVJDH.js}

@@ -1,6 +1,6 @@
 import {
   SynMenu
-} from "./chunk.AIQQEDZD.js";
+} from "./chunk.RE3DUPRU.js";
 
 // src/components/menu/menu.ts
 var menu_default = SynMenu;
@@ -9,4 +9,4 @@ SynMenu.define("syn-menu");
 export {
   menu_default
 };
-//# sourceMappingURL=chunk.C5G3ID4E.js.map
+//# sourceMappingURL=chunk.JURUVJDH.js.map

package/dist/chunks/{chunk.YHJ4VRWW.js → chunk.JURXXFAS.js}

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

package/dist/chunks/{chunk.F542RYWK.js → chunk.KVDQTSR6.js}

@@ -1,6 +1,6 @@
 import {
   SynTooltip
-} from "./chunk.PAGHMRBR.js";
+} from "./chunk.P36SH35P.js";
 
 // src/components/tooltip/tooltip.ts
 var tooltip_default = SynTooltip;
@@ -9,4 +9,4 @@ SynTooltip.define("syn-tooltip");
 export {
   tooltip_default
 };
-//# sourceMappingURL=chunk.F542RYWK.js.map
+//# sourceMappingURL=chunk.KVDQTSR6.js.map