@synergy-design-system/components 3.5.0 → 3.6.1

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/alert/alert.component.ts"],
+  "sourcesContent": ["/* eslint-disable */\nimport { animateTo, stopAnimations } from '../../internal/animate.js';\nimport { blurActiveElement } from '../../internal/closeActiveElement.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { getAnimation, setDefaultAnimation } from '../../utilities/animation-registry.js';\nimport { HasSlotController } from '../../internal/slot.js';\nimport { html } from 'lit';\nimport { LocalizeController } from '../../utilities/localize.js';\nimport { property, query, state } from 'lit/decorators.js';\nimport { waitForEvent } from '../../internal/event.js';\nimport { watch } from '../../internal/watch.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport SynIconButton from '../icon-button/icon-button.component.js';\nimport styles from './alert.styles.js';\nimport type { CSSResultGroup } from 'lit';\nimport { enableDefaultSettings } from '../../utilities/defaultSettings/decorator.js';\n\n/**\n * @summary Alerts are used to display important messages inline or as toast notifications.\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-alert--docs\n * @status stable\n * @since 2.0\n *\n * @dependency syn-icon-button\n *\n * @slot - The alert's main content.\n * @slot icon - An icon to show in the alert. Works best with `<syn-icon>`.\n *\n * @event syn-show - Emitted when the alert opens.\n * @event syn-after-show - Emitted after the alert opens and all animations are complete.\n * @event syn-hide - Emitted when the alert closes.\n * @event syn-after-hide - Emitted after the alert closes and all animations are complete.\n *\n * @csspart base - The component's base wrapper.\n * @csspart icon - The container that wraps the optional icon.\n * @csspart message - The container that wraps the alert's main content.\n * @csspart close-button - The close button, an `<syn-icon-button>`.\n * @csspart close-button__base - The close button's exported `base` part.\n *\n * @animation alert.show - The animation to use when showing the alert.\n * @animation alert.hide - The animation to use when hiding the alert.\n */\n@enableDefaultSettings('SynAlert')\nexport default class SynAlert extends SynergyElement {\n  static styles: CSSResultGroup = [componentStyles, styles];\n  static dependencies = { 'syn-icon-button': SynIconButton };\n\n  private autoHideTimeout: number;\n  private remainingTimeInterval: number;\n  private countdownAnimation?: Animation;\n  private readonly hasSlotController = new HasSlotController(this, 'icon', 'suffix');\n  private readonly localize = new LocalizeController(this);\n\n  private static currentToastStack: HTMLDivElement;\n\n  private static get toastStack() {\n    if (!this.currentToastStack) {\n      this.currentToastStack = Object.assign(document.createElement('div'), {\n        className: 'syn-toast-stack'\n      });\n    }\n    return this.currentToastStack;\n  }\n\n  @query('[part~=\"base\"]') base: HTMLElement;\n\n  @query('.alert__countdown-elapsed') countdownElement: HTMLElement;\n\n  /**\n   * Indicates whether or not the alert is open. You can toggle this attribute to show and hide the alert, or you can\n   * use the `show()` and `hide()` methods and this attribute will reflect the alert's open state.\n   */\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  /** Enables a close button that allows the user to dismiss the alert. */\n  @property({ type: Boolean, reflect: true }) closable = false;\n\n  /** The alert's theme variant. */\n  @property({ reflect: true }) variant: 'primary' | 'success' | 'neutral' | 'warning' | 'danger' = 'primary';\n\n  /**\n   * The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with\n   * the alert before it closes (e.g. moves the mouse over it), the timer will restart. Defaults to `Infinity`, meaning\n   * the alert will not close on its own.\n   */\n  @property({ type: Number }) duration = Infinity;\n\n  /** The alert's size. */\n  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /**\n   * Enables a countdown that indicates the remaining time the alert will be displayed.\n   * Typically used to indicate the remaining time before a whole app refresh.\n   */\n  private countdown? : 'rtl' | 'ltr';\n\n  @state() private remainingTime = this.duration;\n\n  firstUpdated() {\n    this.base.hidden = !this.open;\n  }\n\n  private restartAutoHide() {\n    this.handleCountdownChange();\n    clearTimeout(this.autoHideTimeout);\n    clearInterval(this.remainingTimeInterval);\n    if (this.open && this.duration < Infinity) {\n      this.autoHideTimeout = window.setTimeout(() => this.hide(), this.duration);\n      this.remainingTime = this.duration;\n      this.remainingTimeInterval = window.setInterval(() => {\n        this.remainingTime -= 100;\n      }, 100);\n    }\n  }\n\n  private pauseAutoHide() {\n    this.countdownAnimation?.pause();\n    clearTimeout(this.autoHideTimeout);\n    clearInterval(this.remainingTimeInterval);\n  }\n\n  private resumeAutoHide() {\n    if (this.duration < Infinity) {\n      this.autoHideTimeout = window.setTimeout(() => this.hide(), this.remainingTime);\n      this.remainingTimeInterval = window.setInterval(() => {\n        this.remainingTime -= 100;\n      }, 100);\n      this.countdownAnimation?.play();\n    }\n  }\n\n  private handleCountdownChange() {\n    if (this.open && this.duration < Infinity && this.countdown) {\n      const { countdownElement } = this;\n      const start = '100%';\n      const end = '0';\n      this.countdownAnimation = countdownElement.animate([{ width: start }, { width: end }], {\n        duration: this.duration,\n        easing: 'linear'\n      });\n    }\n  }\n\n  private handleCloseClick() {\n    this.hide();\n  }\n\n  @watch('open', { waitUntilFirstUpdate: true })\n  async handleOpenChange() {\n    if (this.open) {\n      // Show\n      this.emit('syn-show');\n\n      if (this.duration < Infinity) {\n        this.restartAutoHide();\n      }\n\n      await stopAnimations(this.base);\n      this.base.hidden = false;\n      const { keyframes, options } = getAnimation(this, 'alert.show', { dir: this.localize.dir() });\n      await animateTo(this.base, keyframes, options);\n\n      this.emit('syn-after-show');\n    } else {\n      // Hide\n      blurActiveElement(this);\n      this.emit('syn-hide');\n\n      clearTimeout(this.autoHideTimeout);\n      clearInterval(this.remainingTimeInterval);\n\n      await stopAnimations(this.base);\n      const { keyframes, options } = getAnimation(this, 'alert.hide', { dir: this.localize.dir() });\n      await animateTo(this.base, keyframes, options);\n      this.base.hidden = true;\n\n      this.emit('syn-after-hide');\n    }\n  }\n\n  @watch('duration')\n  handleDurationChange() {\n    this.restartAutoHide();\n  }\n\n  /** Shows the alert. */\n  async show() {\n    if (this.open) {\n      return undefined;\n    }\n\n    this.open = true;\n    return waitForEvent(this, 'syn-after-show');\n  }\n\n  /** Hides the alert */\n  async hide() {\n    if (!this.open) {\n      return undefined;\n    }\n\n    this.open = false;\n    return waitForEvent(this, 'syn-after-hide');\n  }\n\n  /**\n   * Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when\n   * dismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by\n   * calling this method again. The returned promise will resolve after the alert is hidden.\n   */\n  async toast() {\n    return new Promise<void>(resolve => {\n      this.handleCountdownChange();\n      if (SynAlert.toastStack.parentElement === null) {\n        document.body.append(SynAlert.toastStack);\n      }\n\n      SynAlert.toastStack.appendChild(this);\n\n      // Wait for the toast stack to render\n      requestAnimationFrame(() => {\n        // eslint-disable-next-line @typescript-eslint/no-unused-expressions -- force a reflow for the initial transition\n        this.clientWidth;\n        this.show();\n      });\n\n      this.addEventListener(\n        'syn-after-hide',\n        () => {\n          SynAlert.toastStack.removeChild(this);\n          resolve();\n\n          // Remove the toast stack from the DOM when there are no more alerts\n          if (SynAlert.toastStack.querySelector('syn-alert') === null) {\n            SynAlert.toastStack.remove();\n          }\n        },\n        { once: true }\n      );\n    });\n  }\n\n  render() {\n    return html`\n      <div\n        part=\"base\"\n        class=${classMap({\n          alert: true,\n          'alert--open': this.open,\n          'alert--small': this.size === 'small',\n          'alert--medium': this.size === 'medium',\n          'alert--large': this.size === 'large',\n          'alert--closable': this.closable,\n          'alert--has-icon': this.hasSlotController.test('icon'),\n          'alert--primary': this.variant === 'primary',\n          'alert--success': this.variant === 'success',\n          'alert--neutral': this.variant === 'neutral',\n          'alert--warning': this.variant === 'warning',\n          'alert--danger': this.variant === 'danger'\n        })}\n        role=\"alert\"\n        aria-hidden=${this.open ? 'false' : 'true'}\n        @mouseenter=${this.pauseAutoHide}\n        @mouseleave=${this.resumeAutoHide}\n      >\n        <div part=\"icon\" class=\"alert__icon\">\n          <slot name=\"icon\"></slot>\n        </div>\n\n        <div part=\"message\" class=\"alert__message\" aria-live=\"polite\">\n          <slot></slot>\n        </div>\n\n        ${this.closable\n          ? html`\n              <syn-icon-button\n                part=\"close-button\"\n                exportparts=\"base:close-button__base\"\n                class=\"alert__close-button\"\n                name=\"x-lg\"\n                library=\"system\"\n                label=${this.localize.term('close')}\n                @click=${this.handleCloseClick}\n              ></syn-icon-button>\n            `\n          : ''}\n\n        <div role=\"timer\" class=\"alert__timer\">${this.remainingTime}</div>\n\n        ${this.countdown\n          ? html`\n              <div\n                class=${classMap({\n                  alert__countdown: true,\n                  'alert__countdown--ltr': this.countdown === 'ltr'\n                })}\n              >\n                <div class=\"alert__countdown-elapsed\"></div>\n              </div>\n            `\n          : ''}\n      </div>\n    `;\n  }\n}\n\nsetDefaultAnimation('alert.show', {\n  keyframes: [\n    { opacity: 0, scale: 0.8 },\n    { opacity: 1, scale: 1 }\n  ],\n  options: { duration: 250, easing: 'ease' }\n});\n\nsetDefaultAnimation('alert.hide', {\n  keyframes: [\n    { opacity: 1, scale: 1 },\n    { opacity: 0, scale: 0.8 }\n  ],\n  options: { duration: 250, easing: 'ease' }\n});\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/chunks/{chunk.WUKKH3NE.js → chunk.SYMEFYEK.js}

@@ -1,6 +1,6 @@
 import {
   SynDrawer
-} from "./chunk.UNTUMNPO.js";
+} from "./chunk.Q7TOL5PH.js";
 
 // src/components/drawer/drawer.ts
 var drawer_default = SynDrawer;
@@ -9,4 +9,4 @@ SynDrawer.define("syn-drawer");
 export {
   drawer_default
 };
-//# sourceMappingURL=chunk.WUKKH3NE.js.map
+//# sourceMappingURL=chunk.SYMEFYEK.js.map

package/dist/chunks/{chunk.IPWLCVHW.js → chunk.TASXJ4ZX.js}

@@ -1,6 +1,6 @@
 import {
   SynNavItem
-} from "./chunk.FKVCNOHV.js";
+} from "./chunk.KC4VEV4Y.js";
 
 // src/components/nav-item/nav-item.ts
 var nav_item_default = SynNavItem;
@@ -9,4 +9,4 @@ SynNavItem.define("syn-nav-item");
 export {
   nav_item_default
 };
-//# sourceMappingURL=chunk.IPWLCVHW.js.map
+//# sourceMappingURL=chunk.TASXJ4ZX.js.map

package/dist/chunks/{chunk.SKQK3F66.js → chunk.TB237H74.js}

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

package/dist/chunks/{chunk.TVVJTCGG.js → chunk.TUSN4AOP.js}

@@ -1,7 +1,6 @@
 // src/components/dropdown/dropdown.styles.ts
 import { css } from "lit";
 var dropdown_styles_default = css`
-	/* stylelint-disable */
   :host {
     display: inline-block;
   }
@@ -31,11 +30,11 @@ var dropdown_styles_default = css`
   }
 
   .dropdown__panel {
+    border-radius: var(--syn-border-radius-medium);
+    box-shadow: var(--syn-shadow-large);
     font-family: var(--syn-font-sans);
     font-size: var(--syn-font-size-medium);
     font-weight: var(--syn-font-weight-normal);
-    box-shadow: var(--syn-shadow-large);
-    border-radius: var(--syn-border-radius-medium);
     pointer-events: none;
   }
 
@@ -46,12 +45,12 @@ var dropdown_styles_default = css`
 
   /* When users slot a menu, make sure it conforms to the popup's auto-size */
   ::slotted(syn-menu) {
-    max-width: var(--auto-size-available-width) !important;
     max-height: var(--auto-size-available-height) !important;
+    max-width: var(--auto-size-available-width) !important;
   }
 `;
 
 export {
   dropdown_styles_default
 };
-//# sourceMappingURL=chunk.TVVJTCGG.js.map
+//# sourceMappingURL=chunk.TUSN4AOP.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/dropdown/dropdown.styles.ts"],
+  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  :host {\n    display: inline-block;\n  }\n\n  .dropdown::part(popup) {\n    z-index: var(--syn-z-index-dropdown);\n  }\n\n  .dropdown[data-current-placement^='top']::part(popup) {\n    transform-origin: bottom;\n  }\n\n  .dropdown[data-current-placement^='bottom']::part(popup) {\n    transform-origin: top;\n  }\n\n  .dropdown[data-current-placement^='left']::part(popup) {\n    transform-origin: right;\n  }\n\n  .dropdown[data-current-placement^='right']::part(popup) {\n    transform-origin: left;\n  }\n\n  .dropdown__trigger {\n    display: block;\n  }\n\n  .dropdown__panel {\n    border-radius: var(--syn-border-radius-medium);\n    box-shadow: var(--syn-shadow-large);\n    font-family: var(--syn-font-sans);\n    font-size: var(--syn-font-size-medium);\n    font-weight: var(--syn-font-weight-normal);\n    pointer-events: none;\n  }\n\n  .dropdown--open .dropdown__panel {\n    display: block;\n    pointer-events: all;\n  }\n\n  /* When users slot a menu, make sure it conforms to the popup's auto-size */\n  ::slotted(syn-menu) {\n    max-height: var(--auto-size-available-height) !important;\n    max-width: var(--auto-size-available-width) !important;\n  }\n`;\n"],
+  "mappings": ";AAAA,SAAS,WAAW;AAEpB,IAAO,0BAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}

package/dist/chunks/{chunk.ZJ6JMFVP.js → chunk.TVSMRXAW.js}

@@ -1,6 +1,6 @@
 import {
   SynAccordion
-} from "./chunk.JHJFFBNL.js";
+} from "./chunk.Q3XZRHS6.js";
 
 // src/components/accordion/accordion.ts
 var accordion_default = SynAccordion;
@@ -9,4 +9,4 @@ SynAccordion.define("syn-accordion");
 export {
   accordion_default
 };
-//# sourceMappingURL=chunk.ZJ6JMFVP.js.map
+//# sourceMappingURL=chunk.TVSMRXAW.js.map

package/dist/chunks/{chunk.TSWB7UFK.js → chunk.UA5B6CPN.js}

@@ -1,6 +1,14 @@
-// src/components/alert/alert.custom.styles.ts
+// src/components/alert/alert.styles.ts
 import { css } from "lit";
-var alert_custom_styles_default = css`
+var alert_styles_default = css`
+  /* stylelint-disable no-descending-specificity */
+  :host {
+    display: contents;
+
+    /* For better DX, we'll reset the margin here so the base part can inherit it */
+    margin: 0;
+  }
+
   .alert {
     /* Defines the used border and icon color for variants */
     --variant-color-border: var(--syn-alert-informative-color-border);
@@ -16,15 +24,21 @@ var alert_custom_styles_default = css`
     --size-icon-padding-block: var(--syn-spacing-medium);
     --size-icon-padding-inline: var(--syn-spacing-medium);
 
+    align-items: stretch;
     background-color: var(--variant-color-background);
     border: var(--syn-panel-border-width) solid var(--variant-color-border);
     border-left: 0;
     border-radius: var(--syn-border-radius-none);
     box-sizing: content-box;
     color: var(--syn-typography-color-text);
+    display: flex;
+    font-family: var(--syn-font-sans);
     font-size: var(--size-font-size);
+    font-weight: var(--syn-font-weight-normal);
     line-height: var(--syn-line-height-normal);
+    margin: inherit;
     min-height: var(--size-min-height);
+    position: relative;
   }
 
   /**
@@ -46,39 +60,88 @@ var alert_custom_styles_default = css`
     margin-inline-start: var(--syn-spacing-2x-small);
   }
 
+  .alert:not(.alert--has-icon) .alert__icon,
+  .alert:not(.alert--closable) .alert__close-button {
+    display: none;
+  }
+
   /**
    * Make sure everything is aligned to top
    */
-  .alert__icon,
-  .alert__close-button {
+  .alert__icon {
     align-items: flex-start;
+    color: var(--variant-color-icon);
+    display: flex;
+    flex: 0 0 auto;
     font-size: var(--size-icon-size);
+    padding-block-start: var(--size-icon-padding-block);
+    padding-inline-start: var(--size-icon-padding-inline);
+  }
+
+  .alert--has-countdown {
+    border-bottom: none;
   }
 
   .alert__message {
     align-self: center;
+    display: block;
+    flex: 1 1 auto;
     padding: var(--size-message-padding);
   }
 
-  /**
-   * Alert Icon
-   */
-  .alert__icon {
-    color: var(--variant-color-icon);
-    padding-block-start: var(--size-icon-padding-block);
-    padding-inline-start: var(--size-icon-padding-inline);
-  }
-
   /**
    * Close Icon
    */
   .alert__close-button {
+    align-items: flex-start;
     align-self: start; /* #1135: Fix alignment for the close icon */
     color: var(--syn-typography-color-text);
+    display: flex;
+    flex: 0 0 auto;
+    font-size: var(--size-icon-size);
     margin-block: calc(var(--syn-spacing-x-small) - var(--syn-panel-border-width));
     margin-inline-end: var(--syn-spacing-x-small);
   }
 
+  .alert__countdown {
+    background-color: var(--syn-panel-border-color);
+    bottom: 0;
+    display: flex;
+    height: calc(var(--syn-panel-border-width) * 3);
+    left: 0;
+    position: absolute;
+    width: 100%;
+  }
+
+  .alert__countdown--ltr {
+    justify-content: flex-end;
+  }
+
+  .alert__countdown .alert__countdown-elapsed {
+    height: 100%;
+    width: 0;
+  }
+
+  .alert--primary .alert__countdown-elapsed {
+    background-color: var(--syn-color-primary-600);
+  }
+
+  .alert--success .alert__countdown-elapsed {
+    background-color: var(--syn-color-success-600);
+  }
+
+  .alert--neutral .alert__countdown-elapsed {
+    background-color: var(--syn-color-neutral-600);
+  }
+
+  .alert--warning .alert__countdown-elapsed {
+    background-color: var(--syn-color-warning-600);
+  }
+
+  .alert--danger .alert__countdown-elapsed {
+    background-color: var(--syn-color-danger-600);
+  }
+
   /**
    * Variant colors
    */
@@ -133,9 +196,13 @@ var alert_custom_styles_default = css`
     --size-icon-padding-block: var(--syn-spacing-medium-large);
     --size-icon-padding-inline: var(--syn-spacing-medium-large);
   }
+
+  .alert__timer {
+    display: none;
+  }
 `;
 
 export {
-  alert_custom_styles_default
+  alert_styles_default
 };
-//# sourceMappingURL=chunk.TSWB7UFK.js.map
+//# sourceMappingURL=chunk.UA5B6CPN.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/alert/alert.styles.ts"],
+  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  /* stylelint-disable no-descending-specificity */\n  :host {\n    display: contents;\n\n    /* For better DX, we'll reset the margin here so the base part can inherit it */\n    margin: 0;\n  }\n\n  .alert {\n    /* Defines the used border and icon color for variants */\n    --variant-color-border: var(--syn-alert-informative-color-border);\n    --variant-color-background: var(--syn-alert-informative-color-background);\n    --variant-color-icon: var(--syn-alert-informative-color-icon);\n    --variant-color-indicator: var(--syn-alert-informative-color-indicator);\n\n    /* Defines special settings for sizes */\n    --size-font-size: var(--syn-font-size-medium);\n    --size-icon-size: var(--syn-font-size-x-large);\n    --size-min-height: 54px;\n    --size-message-padding: var(--syn-spacing-medium) var(--syn-spacing-large) var(--syn-spacing-medium) var(--syn-spacing-medium);\n    --size-icon-padding-block: var(--syn-spacing-medium);\n    --size-icon-padding-inline: var(--syn-spacing-medium);\n\n    align-items: stretch;\n    background-color: var(--variant-color-background);\n    border: var(--syn-panel-border-width) solid var(--variant-color-border);\n    border-left: 0;\n    border-radius: var(--syn-border-radius-none);\n    box-sizing: content-box;\n    color: var(--syn-typography-color-text);\n    display: flex;\n    font-family: var(--syn-font-sans);\n    font-size: var(--size-font-size);\n    font-weight: var(--syn-font-weight-normal);\n    line-height: var(--syn-line-height-normal);\n    margin: inherit;\n    min-height: var(--size-min-height);\n    position: relative;\n  }\n\n  /**\n   * Add back the items left borders\n   * This is done to prevent border clipping with the large border-left needed on .alert\n   * Note we also need to adjust our paddings to add the border width here\n   */\n  .alert::before {\n    background: var(--variant-color-indicator);\n    bottom: -1px;\n    content: \"\";\n    left: 0;\n    position: absolute;\n    top: -1px;\n    width: var(--syn-spacing-2x-small);\n  }\n\n  .alert :first-child {\n    margin-inline-start: var(--syn-spacing-2x-small);\n  }\n\n  .alert:not(.alert--has-icon) .alert__icon,\n  .alert:not(.alert--closable) .alert__close-button {\n    display: none;\n  }\n\n  /**\n   * Make sure everything is aligned to top\n   */\n  .alert__icon {\n    align-items: flex-start;\n    color: var(--variant-color-icon);\n    display: flex;\n    flex: 0 0 auto;\n    font-size: var(--size-icon-size);\n    padding-block-start: var(--size-icon-padding-block);\n    padding-inline-start: var(--size-icon-padding-inline);\n  }\n\n  .alert--has-countdown {\n    border-bottom: none;\n  }\n\n  .alert__message {\n    align-self: center;\n    display: block;\n    flex: 1 1 auto;\n    padding: var(--size-message-padding);\n  }\n\n  /**\n   * Close Icon\n   */\n  .alert__close-button {\n    align-items: flex-start;\n    align-self: start; /* #1135: Fix alignment for the close icon */\n    color: var(--syn-typography-color-text);\n    display: flex;\n    flex: 0 0 auto;\n    font-size: var(--size-icon-size);\n    margin-block: calc(var(--syn-spacing-x-small) - var(--syn-panel-border-width));\n    margin-inline-end: var(--syn-spacing-x-small);\n  }\n\n  .alert__countdown {\n    background-color: var(--syn-panel-border-color);\n    bottom: 0;\n    display: flex;\n    height: calc(var(--syn-panel-border-width) * 3);\n    left: 0;\n    position: absolute;\n    width: 100%;\n  }\n\n  .alert__countdown--ltr {\n    justify-content: flex-end;\n  }\n\n  .alert__countdown .alert__countdown-elapsed {\n    height: 100%;\n    width: 0;\n  }\n\n  .alert--primary .alert__countdown-elapsed {\n    background-color: var(--syn-color-primary-600);\n  }\n\n  .alert--success .alert__countdown-elapsed {\n    background-color: var(--syn-color-success-600);\n  }\n\n  .alert--neutral .alert__countdown-elapsed {\n    background-color: var(--syn-color-neutral-600);\n  }\n\n  .alert--warning .alert__countdown-elapsed {\n    background-color: var(--syn-color-warning-600);\n  }\n\n  .alert--danger .alert__countdown-elapsed {\n    background-color: var(--syn-color-danger-600);\n  }\n\n  /**\n   * Variant colors\n   */\n  .alert--success {\n    --variant-color-border: var(--syn-alert-success-color-border);\n    --variant-color-background: var(--syn-alert-success-color-background);\n    --variant-color-icon: var(--syn-alert-success-color-icon);\n    --variant-color-indicator: var(--syn-alert-success-color-indicator);\n  }\n\n  .alert--neutral {\n    --variant-color-border: var(--syn-alert-neutral-color-border);\n    --variant-color-background: var(--syn-alert-neutral-color-background);\n    --variant-color-icon: var(--syn-alert-neutral-color-icon);\n    --variant-color-indicator: var(--syn-alert-neutral-color-indicator);\n  }\n\n  .alert--warning {\n    --variant-color-border: var(--syn-alert-warning-color-border);\n    --variant-color-background: var(--syn-alert-warning-color-background);\n    --variant-color-icon: var(--syn-alert-warning-color-icon);\n    --variant-color-indicator: var(--syn-alert-warning-color-indicator);\n  }\n\n  .alert--danger {\n    --variant-color-border: var(--syn-alert-error-color-border);\n    --variant-color-background: var(--syn-alert-error-color-background);\n    --variant-color-icon: var(--syn-alert-error-color-icon);\n    --variant-color-indicator: var(--syn-alert-error-color-indicator);\n  }\n\n  /* #1119: Alert Sizes */\n  .alert--small {\n    --size-font-size: var(--syn-font-size-small);\n    --size-icon-size: var(--syn-font-size-large);\n    --size-min-height: 44px;\n    --size-message-padding: var(--syn-spacing-small) var(--syn-spacing-large) var(--syn-spacing-small) var(--syn-spacing-small);\n    --size-icon-padding-block: var(--syn-spacing-small);\n    --size-icon-padding-inline: var(--syn-spacing-small);\n  }\n\n  /* Adjust close button size for small alerts */\n  .alert--small .alert__close-button {\n    font-size: var(--syn-font-size-medium);\n  }\n\n  .alert--large {\n    --size-font-size: var(--syn-font-size-large);\n    --size-icon-size: var(--syn-font-size-2x-large);\n    --size-min-height: 68px;\n    --size-message-padding: var(--syn-spacing-medium-large) var(--syn-spacing-large) var(--syn-spacing-medium-large) var(--syn-spacing-medium-large);\n    --size-icon-padding-block: var(--syn-spacing-medium-large);\n    --size-icon-padding-inline: var(--syn-spacing-medium-large);\n  }\n\n  .alert__timer {\n    display: none;\n  }\n`;\n"],
+  "mappings": ";AAAA,SAAS,WAAW;AAEpB,IAAO,uBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}

package/dist/chunks/{chunk.SBLP34SQ.js → chunk.UCXZFEKY.js}

@@ -1,6 +1,6 @@
 import {
   SynProgressBar
-} from "./chunk.MCAB6KY5.js";
+} from "./chunk.OEGAZKUI.js";
 
 // src/components/progress-bar/progress-bar.ts
 var progress_bar_default = SynProgressBar;
@@ -9,4 +9,4 @@ SynProgressBar.define("syn-progress-bar");
 export {
   progress_bar_default
 };
-//# sourceMappingURL=chunk.SBLP34SQ.js.map
+//# sourceMappingURL=chunk.UCXZFEKY.js.map

package/dist/chunks/{chunk.NTBDBGG7.js → chunk.UEMDEZX6.js}

@@ -1,6 +1,6 @@
 import {
   SynRadioGroup
-} from "./chunk.CMCJB5AA.js";
+} from "./chunk.RU2RT37T.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.NTBDBGG7.js.map
+//# sourceMappingURL=chunk.UEMDEZX6.js.map

package/dist/chunks/{chunk.CJLZ3QMG.js → chunk.VCJQ6DPU.js}

@@ -1,30 +1,30 @@
+import {
+  delimiterToWhiteSpace
+} from "./chunk.ARR23WUY.js";
 import {
   option_custom_styles_default
 } from "./chunk.BL5JW7YS.js";
 import {
   option_styles_default
 } from "./chunk.5FVNGR5M.js";
-import {
-  delimiterToWhiteSpace
-} from "./chunk.ARR23WUY.js";
 import {
   SynIcon
-} from "./chunk.TBZAI6T6.js";
+} from "./chunk.LJNMLUJK.js";
+import {
+  watch
+} from "./chunk.SMIMHADA.js";
 import {
   LocalizeController
 } from "./chunk.QLETXF4A.js";
 import {
   enableDefaultSettings
 } from "./chunk.YACUYJZN.js";
-import {
-  watch
-} from "./chunk.SMIMHADA.js";
 import {
   component_styles_default
 } from "./chunk.2NT3B5WJ.js";
 import {
   SynergyElement
-} from "./chunk.V4GFOKBI.js";
+} from "./chunk.IUFTAV2I.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -192,4 +192,4 @@ SynOption = __decorateClass([
 export {
   SynOption
 };
-//# sourceMappingURL=chunk.CJLZ3QMG.js.map
+//# sourceMappingURL=chunk.VCJQ6DPU.js.map

package/dist/chunks/{chunk.FOH4KP4A.js → chunk.VEIXDC5G.js}

@@ -6,19 +6,19 @@ import {
 } from "./chunk.JDYQ7EFG.js";
 import {
   SynIconButton
-} from "./chunk.FKDUVEOP.js";
-import {
-  LocalizeController
-} from "./chunk.QLETXF4A.js";
+} from "./chunk.QOBJ2NX5.js";
 import {
   watch
 } from "./chunk.SMIMHADA.js";
+import {
+  LocalizeController
+} from "./chunk.QLETXF4A.js";
 import {
   component_styles_default
 } from "./chunk.2NT3B5WJ.js";
 import {
   SynergyElement
-} from "./chunk.V4GFOKBI.js";
+} from "./chunk.IUFTAV2I.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -118,4 +118,4 @@ __decorateClass([
 export {
   SynTab
 };
-//# sourceMappingURL=chunk.FOH4KP4A.js.map
+//# sourceMappingURL=chunk.VEIXDC5G.js.map

package/dist/chunks/{chunk.XLYCEJU4.js → chunk.VU6FOBTQ.js}

@@ -1,6 +1,6 @@
 import {
   SynAlert
-} from "./chunk.6L4RCUNM.js";
+} from "./chunk.SSOL4LVM.js";
 
 // src/components/alert/alert.ts
 var alert_default = SynAlert;
@@ -9,4 +9,4 @@ SynAlert.define("syn-alert");
 export {
   alert_default
 };
-//# sourceMappingURL=chunk.XLYCEJU4.js.map
+//# sourceMappingURL=chunk.VU6FOBTQ.js.map

package/dist/chunks/{chunk.SFBSB7EM.js → chunk.WBOHZGDF.js}

@@ -1,12 +1,12 @@
 import {
   registerIconLibrary
-} from "./chunk.2BATB6NO.js";
-import {
-  setSystemIconLibrary
-} from "./chunk.3RR4RIR7.js";
+} from "./chunk.NMWM3BP7.js";
 import {
   library_default_default
 } from "./chunk.RODNHT5C.js";
+import {
+  setSystemIconLibrary
+} from "./chunk.3RR4RIR7.js";
 import {
   getBasePath
 } from "./chunk.PLV4PZYX.js";
@@ -695,4 +695,4 @@ export {
   migrationLibrary,
   setupIcons
 };
-//# sourceMappingURL=chunk.SFBSB7EM.js.map
+//# sourceMappingURL=chunk.WBOHZGDF.js.map

package/dist/chunks/{chunk.N4Y2OUEA.js → chunk.WM6M3IWG.js}

@@ -1,6 +1,6 @@
 import {
   SynBreadcrumbItem
-} from "./chunk.MJA5HEFN.js";
+} from "./chunk.PDVI2IPR.js";
 
 // src/components/breadcrumb-item/breadcrumb-item.ts
 var breadcrumb_item_default = SynBreadcrumbItem;
@@ -9,4 +9,4 @@ SynBreadcrumbItem.define("syn-breadcrumb-item");
 export {
   breadcrumb_item_default
 };
-//# sourceMappingURL=chunk.N4Y2OUEA.js.map
+//# sourceMappingURL=chunk.WM6M3IWG.js.map

package/dist/chunks/{chunk.XWUVIVOV.js → chunk.WOUHL4WE.js}

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

package/dist/chunks/{chunk.H63OT7RB.js → chunk.X5VH7MID.js}

@@ -1,15 +1,12 @@
 import {
   menu_styles_default
-} from "./chunk.V37RYGE7.js";
-import {
-  menu_custom_styles_default
-} from "./chunk.3IQ2QEPZ.js";
+} from "./chunk.NXIQ25W4.js";
 import {
   component_styles_default
 } from "./chunk.2NT3B5WJ.js";
 import {
   SynergyElement
-} from "./chunk.V4GFOKBI.js";
+} from "./chunk.IUFTAV2I.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -149,7 +146,7 @@ var SynMenu = class extends SynergyElement {
     `;
   }
 };
-SynMenu.styles = [component_styles_default, menu_styles_default, menu_custom_styles_default];
+SynMenu.styles = [component_styles_default, menu_styles_default];
 __decorateClass([
   query("slot")
 ], SynMenu.prototype, "defaultSlot", 2);
@@ -160,4 +157,4 @@ __decorateClass([
 export {
   SynMenu
 };
-//# sourceMappingURL=chunk.H63OT7RB.js.map
+//# sourceMappingURL=chunk.X5VH7MID.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/menu/menu.component.ts"],
+  "sourcesContent": ["/* eslint-disable */\nimport { html } from 'lit';\nimport { query } from 'lit/decorators.js';\nimport { state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport type { SynAttributesChangedEvent } from '../../events/syn-attributes-changed.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport styles from './menu.styles.js';\nimport type { CSSResultGroup } from 'lit';\nimport type SynMenuItem from '../menu-item/menu-item.component.js';\n\nexport interface MenuSelectEventDetail {\n  item: SynMenuItem;\n}\n\n/**\n * @summary Menus provide a list of options for the user to choose from.\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-menu--docs\n * @status stable\n * @since 2.0\n *\n * @slot - The menu's content, including menu items, menu labels, and dividers.\n *\n * @event {{ item: SynMenuItem }} syn-select - Emitted when a menu item is selected.\n */\nexport default class SynMenu extends SynergyElement {\n  static styles: CSSResultGroup = [componentStyles, styles];\n\n  @query('slot') defaultSlot: HTMLSlotElement;\n  @state() hasMenuItemsWithCheckmarks = false;\n\n  private handleUpdateCheckmarks(items: SynMenuItem[]) {\n    // #368: Treat a menu as having checkmarks if it has any checkboxes or items with loading states\n    // The loading indicator has to be checked as well, as it's specially placed over the check mark\n    this.hasMenuItemsWithCheckmarks = items.some(item => item.type === 'checkbox' || item.loading);  \n  }\n\n  private updateCheckMarksByChildPropChange = (e: SynAttributesChangedEvent) => {\n    e.stopImmediatePropagation();\n    this.handleUpdateCheckmarks(this.getAllItems());\n  };\n  \n  disconnectedCallback() {\n    this.removeEventListener('syn-attributes-changed', this.updateCheckMarksByChildPropChange);\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'menu');\n    this.addEventListener('syn-attributes-changed', this.updateCheckMarksByChildPropChange);\n  }\n\n  private handleClick(event: MouseEvent) {\n    const menuItemTypes = ['menuitem', 'menuitemcheckbox'];\n\n    const composedPath = event.composedPath();\n    const target = composedPath.find((el: Element) => menuItemTypes.includes(el?.getAttribute?.('role') || ''));\n\n    if (!target) return;\n\n    const closestMenu = composedPath.find((el: Element) => el?.getAttribute?.('role') === 'menu');\n    const clickHasSubmenu = closestMenu !== this;\n\n    // Make sure we're the menu thats supposed to be handling the click event.\n    if (clickHasSubmenu) return;\n\n    // This isn't true. But we use it for TypeScript checks below.\n    const item = target as SynMenuItem;\n\n    if (item.type === 'checkbox') {\n      item.checked = !item.checked;\n    }\n\n    this.emit('syn-select', { detail: { item } });\n  }\n\n  private handleKeyDown(event: KeyboardEvent) {\n    // Make a selection when pressing enter or space\n    if (event.key === 'Enter' || event.key === ' ') {\n      const item = this.getCurrentItem();\n      event.preventDefault();\n      event.stopPropagation();\n\n      // Simulate a click to support @click handlers on menu items that also work with the keyboard\n      item?.click();\n    }\n\n    // Move the selection when pressing down or up\n    else if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {\n      const items = this.getAllItems();\n      const activeItem = this.getCurrentItem();\n      let index = activeItem ? items.indexOf(activeItem) : 0;\n\n      if (items.length > 0) {\n        event.preventDefault();\n        event.stopPropagation();\n\n        if (event.key === 'ArrowDown') {\n          index++;\n        } else if (event.key === 'ArrowUp') {\n          index--;\n        } else if (event.key === 'Home') {\n          index = 0;\n        } else if (event.key === 'End') {\n          index = items.length - 1;\n        }\n\n        if (index < 0) {\n          index = items.length - 1;\n        }\n        if (index > items.length - 1) {\n          index = 0;\n        }\n\n        this.setCurrentItem(items[index]);\n        items[index].focus();\n      }\n    }\n  }\n\n  private handleMouseDown(event: MouseEvent) {\n    const target = event.target as HTMLElement;\n\n    if (this.isMenuItem(target)) {\n      this.setCurrentItem(target as SynMenuItem);\n    }\n  }\n\n  private handleSlotChange() {\n    const items = this.getAllItems();\n    this.handleUpdateCheckmarks(items);\n\n    // Reset the roving tab index when the slotted items change\n    if (items.length > 0) {\n      this.setCurrentItem(items[0]);\n    }\n  }\n\n  private isMenuItem(item: HTMLElement) {\n    return (\n      item.tagName.toLowerCase() === 'syn-menu-item' ||\n      ['menuitem', 'menuitemcheckbox', 'menuitemradio'].includes(item.getAttribute('role') ?? '')\n    );\n  }\n\n  /** @internal Gets all slotted menu items, ignoring dividers, headers, and other elements. */\n  getAllItems() {\n    return [...this.defaultSlot.assignedElements({ flatten: true })].filter((el: HTMLElement) => {\n      if (el.inert || !this.isMenuItem(el)) {\n        return false;\n      }\n      return true;\n    }) as SynMenuItem[];\n  }\n\n  /**\n   * @internal Gets the current menu item, which is the menu item that has `tabindex=\"0\"` within the roving tab index.\n   * The menu item may or may not have focus, but for keyboard interaction purposes it's considered the \"active\" item.\n   */\n  getCurrentItem() {\n    return this.getAllItems().find(i => i.getAttribute('tabindex') === '0');\n  }\n\n  /**\n   * @internal Sets the current menu item to the specified element. This sets `tabindex=\"0\"` on the target element and\n   * `tabindex=\"-1\"` to all other items. This method must be called prior to setting focus on a menu item.\n   */\n  setCurrentItem(item: SynMenuItem) {\n    const items = this.getAllItems();\n\n    // Update tab indexes\n    items.forEach(i => {\n      i.setAttribute('tabindex', i === item ? '0' : '-1');\n    });\n  }\n\n  render() {\n    return html`\n      <slot\n        class=${classMap({\n          'menu--no-checkmarks': !this.hasMenuItemsWithCheckmarks,\n        })}\n        @slotchange=${this.handleSlotChange}\n        @click=${this.handleClick}\n        @keydown=${this.handleKeyDown}\n        @mousedown=${this.handleMouseDown}\n      ></slot>\n    `;\n  }\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/chunks/{chunk.2YBC7C2K.js → chunk.XAXHRDXN.js}

@@ -1,12 +1,12 @@
+import {
+  SynIcon
+} from "./chunk.LJNMLUJK.js";
 import {
   breadcrumb_custom_styles_default
 } from "./chunk.32CYREEV.js";
 import {
   breadcrumb_styles_default
 } from "./chunk.WRPQ3635.js";
-import {
-  SynIcon
-} from "./chunk.TBZAI6T6.js";
 import {
   LocalizeController
 } from "./chunk.QLETXF4A.js";
@@ -15,7 +15,7 @@ import {
 } from "./chunk.2NT3B5WJ.js";
 import {
   SynergyElement
-} from "./chunk.V4GFOKBI.js";
+} from "./chunk.IUFTAV2I.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -91,4 +91,4 @@ __decorateClass([
 export {
   SynBreadcrumb
 };
-//# sourceMappingURL=chunk.2YBC7C2K.js.map
+//# sourceMappingURL=chunk.XAXHRDXN.js.map

package/dist/chunks/{chunk.VHCBBPBS.js → chunk.XBDUDOPF.js}

@@ -1,24 +1,24 @@
+import {
+  icon_default
+} from "./chunk.JWA6M5ZZ.js";
 import {
   header_styles_default
 } from "./chunk.CXQHLGXV.js";
-import {
-  icon_default
-} from "./chunk.K5OSYXNU.js";
 import {
   HasSlotController
 } from "./chunk.CHFWLQN5.js";
-import {
-  LocalizeController
-} from "./chunk.QLETXF4A.js";
 import {
   watch
 } from "./chunk.SMIMHADA.js";
+import {
+  LocalizeController
+} from "./chunk.QLETXF4A.js";
 import {
   component_styles_default
 } from "./chunk.2NT3B5WJ.js";
 import {
   SynergyElement
-} from "./chunk.V4GFOKBI.js";
+} from "./chunk.IUFTAV2I.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -210,4 +210,4 @@ __decorateClass([
 export {
   SynHeader
 };
-//# sourceMappingURL=chunk.VHCBBPBS.js.map
+//# sourceMappingURL=chunk.XBDUDOPF.js.map