@synergy-design-system/components 1.22.0 → 1.23.1

package/dist/chunks/{chunk.KNVQPHZG.js → chunk.DKVXI76J.js}

@@ -1,9 +1,9 @@
+import {
+  icon_default
+} from "./chunk.XDLPOQOB.js";
 import {
   header_styles_default
 } from "./chunk.AOKNP4QD.js";
-import {
-  icon_default
-} from "./chunk.LJDKT3WV.js";
 import {
   HasSlotController
 } from "./chunk.66WXVGAW.js";
@@ -16,7 +16,7 @@ import {
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.W3AKVJZS.js";
+} from "./chunk.C6S6REA2.js";
 import {
   __decorateClass
 } from "./chunk.QNDC5KWA.js";
@@ -163,4 +163,4 @@ __decorateClass([
 export {
   SynHeader
 };
-//# sourceMappingURL=chunk.KNVQPHZG.js.map
+//# sourceMappingURL=chunk.DKVXI76J.js.map

package/dist/chunks/{chunk.632BCT5Q.js → chunk.F4WPUPZ6.js}

@@ -1,6 +1,6 @@
 import {
   SynSideNav
-} from "./chunk.4RE2XOHB.js";
+} from "./chunk.27BSQVWE.js";
 
 // src/components/side-nav/side-nav.ts
 var side_nav_default = SynSideNav;
@@ -9,4 +9,4 @@ SynSideNav.define("syn-side-nav");
 export {
   side_nav_default
 };
-//# sourceMappingURL=chunk.632BCT5Q.js.map
+//# sourceMappingURL=chunk.F4WPUPZ6.js.map

package/dist/chunks/{chunk.RUOP7EQ3.js → chunk.F6G5BFX2.js}

@@ -1,6 +1,6 @@
 import {
   SynButtonGroup
-} from "./chunk.MMWXEAUD.js";
+} from "./chunk.DKER27DL.js";
 
 // src/components/button-group/button-group.ts
 var button_group_default = SynButtonGroup;
@@ -9,4 +9,4 @@ SynButtonGroup.define("syn-button-group");
 export {
   button_group_default
 };
-//# sourceMappingURL=chunk.RUOP7EQ3.js.map
+//# sourceMappingURL=chunk.F6G5BFX2.js.map

package/dist/chunks/{chunk.LTCBRJXS.js → chunk.FB4JV4EU.js}

@@ -10,7 +10,7 @@ import {
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.W3AKVJZS.js";
+} from "./chunk.C6S6REA2.js";
 import {
   __decorateClass
 } from "./chunk.QNDC5KWA.js";
@@ -66,4 +66,4 @@ __decorateClass([
 export {
   SynProgressBar
 };
-//# sourceMappingURL=chunk.LTCBRJXS.js.map
+//# sourceMappingURL=chunk.FB4JV4EU.js.map

package/dist/chunks/{chunk.36RX5N27.js → chunk.GJJEGGAE.js}

@@ -1,6 +1,6 @@
 import {
   SynPrioNav
-} from "./chunk.O6P2C7TM.js";
+} from "./chunk.OT463KIT.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.36RX5N27.js.map
+//# sourceMappingURL=chunk.GJJEGGAE.js.map

package/dist/chunks/{chunk.IAVZUZCD.js → chunk.H4QCIW5O.js}

@@ -1,21 +1,21 @@
-import {
-  getIconLibrary,
-  unwatchIcon,
-  watchIcon
-} from "./chunk.66MOXMDP.js";
 import {
   icon_custom_styles_default
 } from "./chunk.PJO6TM3T.js";
 import {
   icon_styles_default
 } from "./chunk.2RF7KO5I.js";
+import {
+  getIconLibrary,
+  unwatchIcon,
+  watchIcon
+} from "./chunk.66MOXMDP.js";
 import {
   watch
 } from "./chunk.AVTU2BGE.js";
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.W3AKVJZS.js";
+} from "./chunk.C6S6REA2.js";
 import {
   __decorateClass
 } from "./chunk.QNDC5KWA.js";
@@ -182,4 +182,4 @@ __decorateClass([
 export {
   SynIcon
 };
-//# sourceMappingURL=chunk.IAVZUZCD.js.map
+//# sourceMappingURL=chunk.H4QCIW5O.js.map

package/dist/chunks/{chunk.7J62WTZF.js → chunk.HKJABIZT.js}

@@ -1,6 +1,6 @@
 import {
   SynRadio
-} from "./chunk.WKNDIKFR.js";
+} from "./chunk.JWCLRSEM.js";
 
 // src/components/radio/radio.ts
 var radio_default = SynRadio;
@@ -9,4 +9,4 @@ SynRadio.define("syn-radio");
 export {
   radio_default
 };
-//# sourceMappingURL=chunk.7J62WTZF.js.map
+//# sourceMappingURL=chunk.HKJABIZT.js.map

package/dist/chunks/{chunk.2SD2EQGI.js → chunk.HLAIHK3F.js}

@@ -23,7 +23,7 @@ import {
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.W3AKVJZS.js";
+} from "./chunk.C6S6REA2.js";
 import {
   __decorateClass
 } from "./chunk.QNDC5KWA.js";
@@ -362,4 +362,4 @@ __decorateClass([
 export {
   SynTextarea
 };
-//# sourceMappingURL=chunk.2SD2EQGI.js.map
+//# sourceMappingURL=chunk.HLAIHK3F.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.2XZKXVMR.js → chunk.IG3RCOB3.js}

@@ -29,7 +29,21 @@ var checkbox_custom_styles_default = css`
   }
 
   .checkbox__label {
+    line-height: var(--syn-line-height-normal);
     margin-inline-start: var(--syn-spacing-x-small);
+    position: relative;
+  }
+
+  .checkbox--small .checkbox__label {
+    top: -3px;
+  }
+
+  .checkbox--medium .checkbox__label {
+    top: -3px;
+  }
+
+  .checkbox--large .checkbox__label {
+    top: -2px;
   }
 
   /* Disabled */
@@ -41,4 +55,4 @@ var checkbox_custom_styles_default = css`
 export {
   checkbox_custom_styles_default
 };
-//# sourceMappingURL=chunk.2XZKXVMR.js.map
+//# sourceMappingURL=chunk.IG3RCOB3.js.map

package/dist/chunks/{chunk.2XZKXVMR.js.map → chunk.IG3RCOB3.js.map}

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/components/checkbox/checkbox.custom.styles.ts"],
-  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  .checkbox__control {\n    border-radius: var(--syn-input-border-radius-small);\n  }\n\n  :host([data-user-invalid]) .checkbox__control {\n    border-color: var(--syn-input-border-color-focus-error);\n  }\n\n  /**\n   * Hover\n   * Applies the hover state to the whole component\n   */\n  .checkbox:not(.checkbox--checked):not(.checkbox--disabled):hover .checkbox__control {\n    background-color: var(--syn-input-background-color-hover);\n    border-color: var(--syn-input-border-color-hover);\n  }\n\n  /**\n   * Checked/indeterminate + hover\n   * Applies the hover state to the whole component\n   */\n  .checkbox.checkbox--checked:not(.checkbox--disabled):hover .checkbox__control,\n  .checkbox.checkbox--indeterminate:not(.checkbox--disabled):hover .checkbox__control {\n    background-color: var(--syn-color-primary-900);\n    border-color: var(--syn-color-primary-900);\n  }\n\n  .checkbox__label {\n    margin-inline-start: var(--syn-spacing-x-small);\n  }\n\n  /* Disabled */\n  .checkbox--disabled .checkbox__label {\n    color: var(--syn-color-neutral-700);\n  }\n`;\n"],
-  "mappings": ";AAAA,SAAS,WAAW;AAEpB,IAAO,iCAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  .checkbox__control {\n    border-radius: var(--syn-input-border-radius-small);\n  }\n\n  :host([data-user-invalid]) .checkbox__control {\n    border-color: var(--syn-input-border-color-focus-error);\n  }\n\n  /**\n   * Hover\n   * Applies the hover state to the whole component\n   */\n  .checkbox:not(.checkbox--checked):not(.checkbox--disabled):hover .checkbox__control {\n    background-color: var(--syn-input-background-color-hover);\n    border-color: var(--syn-input-border-color-hover);\n  }\n\n  /**\n   * Checked/indeterminate + hover\n   * Applies the hover state to the whole component\n   */\n  .checkbox.checkbox--checked:not(.checkbox--disabled):hover .checkbox__control,\n  .checkbox.checkbox--indeterminate:not(.checkbox--disabled):hover .checkbox__control {\n    background-color: var(--syn-color-primary-900);\n    border-color: var(--syn-color-primary-900);\n  }\n\n  .checkbox__label {\n    line-height: var(--syn-line-height-normal);\n    margin-inline-start: var(--syn-spacing-x-small);\n    position: relative;\n  }\n\n  .checkbox--small .checkbox__label {\n    top: -3px;\n  }\n\n  .checkbox--medium .checkbox__label {\n    top: -3px;\n  }\n\n  .checkbox--large .checkbox__label {\n    top: -2px;\n  }\n\n  /* Disabled */\n  .checkbox--disabled .checkbox__label {\n    color: var(--syn-color-neutral-700);\n  }\n`;\n"],
+  "mappings": ";AAAA,SAAS,WAAW;AAEpB,IAAO,iCAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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.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.AD6PNEAS.js → chunk.IVTOOCED.js}

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

package/dist/chunks/{chunk.RB53OKJP.js → chunk.J2HNKHUA.js}

@@ -1,6 +1,6 @@
 import {
   SynDivider
-} from "./chunk.65XESUR4.js";
+} from "./chunk.L2EO2HIH.js";
 
 // src/components/divider/divider.ts
 var divider_default = SynDivider;
@@ -9,4 +9,4 @@ SynDivider.define("syn-divider");
 export {
   divider_default
 };
-//# sourceMappingURL=chunk.RB53OKJP.js.map
+//# sourceMappingURL=chunk.J2HNKHUA.js.map

package/dist/chunks/{chunk.MUOLOUGJ.js → chunk.JPKQBL6D.js}

@@ -7,7 +7,7 @@ import {
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.W3AKVJZS.js";
+} from "./chunk.C6S6REA2.js";
 import {
   badge_custom_styles_default
 } from "./chunk.WQJRBFZA.js";
@@ -58,4 +58,4 @@ __decorateClass([
 export {
   SynBadge
 };
-//# sourceMappingURL=chunk.MUOLOUGJ.js.map
+//# sourceMappingURL=chunk.JPKQBL6D.js.map

package/dist/chunks/{chunk.ICZ4XHFM.js → chunk.JRMD2CBG.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.KG52EHDB.js";
 import {
   SynDivider
-} from "./chunk.65XESUR4.js";
+} from "./chunk.L2EO2HIH.js";
 import {
   HasSlotController
 } from "./chunk.66WXVGAW.js";
@@ -12,7 +12,7 @@ import {
 } from "./chunk.AVTU2BGE.js";
 import {
   SynergyElement
-} from "./chunk.W3AKVJZS.js";
+} from "./chunk.C6S6REA2.js";
 import {
   __decorateClass
 } from "./chunk.QNDC5KWA.js";
@@ -93,4 +93,4 @@ __decorateClass([
 export {
   SynOptgroup
 };
-//# sourceMappingURL=chunk.ICZ4XHFM.js.map
+//# sourceMappingURL=chunk.JRMD2CBG.js.map

package/dist/chunks/{chunk.WKNDIKFR.js → chunk.JWCLRSEM.js}

@@ -6,14 +6,14 @@ import {
 } from "./chunk.PKO6FEOM.js";
 import {
   SynIcon
-} from "./chunk.IAVZUZCD.js";
+} from "./chunk.H4QCIW5O.js";
 import {
   watch
 } from "./chunk.AVTU2BGE.js";
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.W3AKVJZS.js";
+} from "./chunk.C6S6REA2.js";
 import {
   __decorateClass
 } from "./chunk.QNDC5KWA.js";
@@ -112,4 +112,4 @@ __decorateClass([
 export {
   SynRadio
 };
-//# sourceMappingURL=chunk.WKNDIKFR.js.map
+//# sourceMappingURL=chunk.JWCLRSEM.js.map

package/dist/chunks/{chunk.PSKG77JT.js → chunk.KPGFBZ5C.js}

@@ -7,7 +7,7 @@ import {
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.W3AKVJZS.js";
+} from "./chunk.C6S6REA2.js";
 import {
   __decorateClass
 } from "./chunk.QNDC5KWA.js";
@@ -128,4 +128,4 @@ __decorateClass([
 export {
   SynMenu
 };
-//# sourceMappingURL=chunk.PSKG77JT.js.map
+//# sourceMappingURL=chunk.KPGFBZ5C.js.map

package/dist/chunks/{chunk.65XESUR4.js → chunk.L2EO2HIH.js}

@@ -10,7 +10,7 @@ import {
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.W3AKVJZS.js";
+} from "./chunk.C6S6REA2.js";
 import {
   __decorateClass
 } from "./chunk.QNDC5KWA.js";
@@ -41,4 +41,4 @@ __decorateClass([
 export {
   SynDivider
 };
-//# sourceMappingURL=chunk.65XESUR4.js.map
+//# sourceMappingURL=chunk.L2EO2HIH.js.map

package/dist/chunks/{chunk.H4IU2YYT.js → chunk.L63O4J2E.js}

@@ -10,7 +10,7 @@ import {
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.W3AKVJZS.js";
+} from "./chunk.C6S6REA2.js";
 import {
   __decorateClass
 } from "./chunk.QNDC5KWA.js";
@@ -74,4 +74,4 @@ __decorateClass([
 export {
   SynProgressRing
 };
-//# sourceMappingURL=chunk.H4IU2YYT.js.map
+//# sourceMappingURL=chunk.L63O4J2E.js.map

package/dist/chunks/{chunk.LC2HUSJU.js → chunk.MDNKA4ZQ.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.YHRXL2XR.js";
 import {
   SynPopup
-} from "./chunk.6T5ZLDVO.js";
+} from "./chunk.RMAP6V7M.js";
 import {
   animateTo,
   parseDuration,
@@ -26,7 +26,7 @@ import {
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.W3AKVJZS.js";
+} from "./chunk.C6S6REA2.js";
 import {
   __decorateClass
 } from "./chunk.QNDC5KWA.js";
@@ -270,4 +270,4 @@ setDefaultAnimation("tooltip.hide", {
 export {
   SynTooltip
 };
-//# sourceMappingURL=chunk.LC2HUSJU.js.map
+//# sourceMappingURL=chunk.MDNKA4ZQ.js.map