@synergy-design-system/components 1.18.0 → 1.20.0

package/dist/chunks/{chunk.ZSZ3RXHE.js → chunk.TGGCQSF3.js}

@@ -1,15 +1,15 @@
 import {
   side_nav_styles_default
 } from "./chunk.GO3CCKC3.js";
-import {
-  SynDivider
-} from "./chunk.XH3MA254.js";
 import {
   SynDrawer
-} from "./chunk.YJAGURE4.js";
+} from "./chunk.IGFBLFXD.js";
 import {
   unlockBodyScrolling
 } from "./chunk.RIJKFEYZ.js";
+import {
+  SynDivider
+} from "./chunk.35WADEQD.js";
 import {
   waitForEvent
 } from "./chunk.7BEVGRQ2.js";
@@ -30,7 +30,7 @@ import {
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.3XSHKQTX.js";
+} from "./chunk.32GEMZZV.js";
 import {
   __decorateClass
 } from "./chunk.QNDC5KWA.js";
@@ -283,4 +283,4 @@ setDefaultAnimation("sideNav.overlay.hide", {
 export {
   SynSideNav
 };
-//# sourceMappingURL=chunk.ZSZ3RXHE.js.map
+//# sourceMappingURL=chunk.TGGCQSF3.js.map

package/dist/chunks/{chunk.LLS2ZY55.js → chunk.TLBRAHTC.js}

@@ -1,6 +1,6 @@
 import {
   SynInput
-} from "./chunk.HSRG6R67.js";
+} from "./chunk.YLVTDJCD.js";
 
 // src/components/input/input.ts
 var input_default = SynInput;
@@ -9,4 +9,4 @@ SynInput.define("syn-input");
 export {
   input_default
 };
-//# sourceMappingURL=chunk.LLS2ZY55.js.map
+//# sourceMappingURL=chunk.TLBRAHTC.js.map

package/dist/chunks/{chunk.VC3APXJ3.js → chunk.TVUPDAKK.js}

@@ -1,18 +1,25 @@
 import {
   SynTag
-} from "./chunk.HWDX5ZOJ.js";
+} from "./chunk.UEVDP3J5.js";
 import {
   select_custom_styles_default
 } from "./chunk.OWMT6OL2.js";
 import {
   select_styles_default
 } from "./chunk.QNQNR3RY.js";
-import {
-  SynPopup
-} from "./chunk.OPIYLV55.js";
 import {
   scrollIntoView
 } from "./chunk.RIJKFEYZ.js";
+import {
+  SynPopup
+} from "./chunk.FTBYTDD5.js";
+import {
+  defaultValue
+} from "./chunk.WFAJR3FN.js";
+import {
+  form_control_custom_styles_default,
+  form_control_styles_default
+} from "./chunk.TTL762VF.js";
 import {
   animateTo,
   stopAnimations,
@@ -22,13 +29,6 @@ import {
   getAnimation,
   setDefaultAnimation
 } from "./chunk.QAUTITK3.js";
-import {
-  defaultValue
-} from "./chunk.WFAJR3FN.js";
-import {
-  form_control_custom_styles_default,
-  form_control_styles_default
-} from "./chunk.TTL762VF.js";
 import {
   FormControlController
 } from "./chunk.JUJZBRXD.js";
@@ -37,7 +37,7 @@ import {
 } from "./chunk.66WXVGAW.js";
 import {
   SynIcon
-} from "./chunk.O54BQSFI.js";
+} from "./chunk.CSXBPQFP.js";
 import {
   watch
 } from "./chunk.AVTU2BGE.js";
@@ -47,7 +47,7 @@ import {
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.3XSHKQTX.js";
+} from "./chunk.32GEMZZV.js";
 import {
   __decorateClass
 } from "./chunk.QNDC5KWA.js";
@@ -764,4 +764,4 @@ setDefaultAnimation("select.hide", {
 export {
   SynSelect
 };
-//# sourceMappingURL=chunk.VC3APXJ3.js.map
+//# sourceMappingURL=chunk.TVUPDAKK.js.map

package/dist/chunks/{chunk.HWDX5ZOJ.js → chunk.UEVDP3J5.js}

@@ -6,14 +6,14 @@ import {
 } from "./chunk.BGHK4NQA.js";
 import {
   SynIconButton
-} from "./chunk.3MHH6ND2.js";
+} from "./chunk.HL7SBENS.js";
 import {
   LocalizeController
 } from "./chunk.GEHO4WRP.js";
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.3XSHKQTX.js";
+} from "./chunk.32GEMZZV.js";
 import {
   __decorateClass
 } from "./chunk.QNDC5KWA.js";
@@ -76,4 +76,4 @@ __decorateClass([
 export {
   SynTag
 };
-//# sourceMappingURL=chunk.HWDX5ZOJ.js.map
+//# sourceMappingURL=chunk.UEVDP3J5.js.map

package/dist/chunks/chunk.UINFNZLR.js

@@ -0,0 +1,217 @@
+import {
+  SynIconButton
+} from "./chunk.HL7SBENS.js";
+import {
+  animateTo,
+  stopAnimations,
+  waitForEvent
+} from "./chunk.7BEVGRQ2.js";
+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 {
+  LocalizeController
+} from "./chunk.GEHO4WRP.js";
+import {
+  SynergyElement,
+  component_styles_default
+} from "./chunk.32GEMZZV.js";
+import {
+  __decorateClass
+} from "./chunk.QNDC5KWA.js";
+
+// src/components/alert/alert.component.ts
+import { classMap } from "lit/directives/class-map.js";
+import { html } from "lit";
+import { property, query } from "lit/decorators.js";
+var toastStack = Object.assign(document.createElement("div"), { className: "syn-toast-stack" });
+var SynAlert = class extends SynergyElement {
+  constructor() {
+    super(...arguments);
+    this.hasSlotController = new HasSlotController(this, "icon", "suffix");
+    this.localize = new LocalizeController(this);
+    this.open = false;
+    this.closable = false;
+    this.variant = "primary";
+    this.duration = Infinity;
+  }
+  firstUpdated() {
+    this.base.hidden = !this.open;
+  }
+  restartAutoHide() {
+    clearTimeout(this.autoHideTimeout);
+    if (this.open && this.duration < Infinity) {
+      this.autoHideTimeout = window.setTimeout(() => this.hide(), this.duration);
+    }
+  }
+  handleCloseClick() {
+    this.hide();
+  }
+  handleMouseMove() {
+    this.restartAutoHide();
+  }
+  async handleOpenChange() {
+    if (this.open) {
+      this.emit("syn-show");
+      if (this.duration < Infinity) {
+        this.restartAutoHide();
+      }
+      await stopAnimations(this.base);
+      this.base.hidden = false;
+      const { keyframes, options } = getAnimation(this, "alert.show", { dir: this.localize.dir() });
+      await animateTo(this.base, keyframes, options);
+      this.emit("syn-after-show");
+    } else {
+      this.emit("syn-hide");
+      clearTimeout(this.autoHideTimeout);
+      await stopAnimations(this.base);
+      const { keyframes, options } = getAnimation(this, "alert.hide", { dir: this.localize.dir() });
+      await animateTo(this.base, keyframes, options);
+      this.base.hidden = true;
+      this.emit("syn-after-hide");
+    }
+  }
+  handleDurationChange() {
+    this.restartAutoHide();
+  }
+  /** Shows the alert. */
+  async show() {
+    if (this.open) {
+      return void 0;
+    }
+    this.open = true;
+    return waitForEvent(this, "syn-after-show");
+  }
+  /** Hides the alert */
+  async hide() {
+    if (!this.open) {
+      return void 0;
+    }
+    this.open = false;
+    return waitForEvent(this, "syn-after-hide");
+  }
+  /**
+   * Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when
+   * dismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by
+   * calling this method again. The returned promise will resolve after the alert is hidden.
+   */
+  async toast() {
+    return new Promise((resolve) => {
+      if (toastStack.parentElement === null) {
+        document.body.append(toastStack);
+      }
+      toastStack.appendChild(this);
+      requestAnimationFrame(() => {
+        this.clientWidth;
+        this.show();
+      });
+      this.addEventListener(
+        "syn-after-hide",
+        () => {
+          toastStack.removeChild(this);
+          resolve();
+          if (toastStack.querySelector("syn-alert") === null) {
+            toastStack.remove();
+          }
+        },
+        { once: true }
+      );
+    });
+  }
+  render() {
+    return html`
+      <div
+        part="base"
+        class=${classMap({
+      alert: true,
+      "alert--open": this.open,
+      "alert--closable": this.closable,
+      "alert--has-icon": this.hasSlotController.test("icon"),
+      "alert--primary": this.variant === "primary",
+      "alert--success": this.variant === "success",
+      "alert--neutral": this.variant === "neutral",
+      "alert--warning": this.variant === "warning",
+      "alert--danger": this.variant === "danger"
+    })}
+        role="alert"
+        aria-hidden=${this.open ? "false" : "true"}
+        @mousemove=${this.handleMouseMove}
+      >
+        <div part="icon" class="alert__icon">
+          <slot name="icon"></slot>
+        </div>
+
+        <div part="message" class="alert__message" aria-live="polite">
+          <slot></slot>
+        </div>
+
+        ${this.closable ? html`
+              <syn-icon-button
+                part="close-button"
+                exportparts="base:close-button__base"
+                class="alert__close-button"
+                name="x-lg"
+                library="system"
+                label=${this.localize.term("close")}
+                @click=${this.handleCloseClick}
+              ></syn-icon-button>
+            ` : ""}
+      </div>
+    `;
+  }
+};
+SynAlert.styles = [component_styles_default, alert_styles_default, alert_custom_styles_default];
+SynAlert.dependencies = { "syn-icon-button": SynIconButton };
+__decorateClass([
+  query('[part~="base"]')
+], SynAlert.prototype, "base", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SynAlert.prototype, "open", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SynAlert.prototype, "closable", 2);
+__decorateClass([
+  property({ reflect: true })
+], SynAlert.prototype, "variant", 2);
+__decorateClass([
+  property({ type: Number })
+], SynAlert.prototype, "duration", 2);
+__decorateClass([
+  watch("open", { waitUntilFirstUpdate: true })
+], SynAlert.prototype, "handleOpenChange", 1);
+__decorateClass([
+  watch("duration")
+], SynAlert.prototype, "handleDurationChange", 1);
+setDefaultAnimation("alert.show", {
+  keyframes: [
+    { opacity: 0, scale: 0.8 },
+    { opacity: 1, scale: 1 }
+  ],
+  options: { duration: 250, easing: "ease" }
+});
+setDefaultAnimation("alert.hide", {
+  keyframes: [
+    { opacity: 1, scale: 1 },
+    { opacity: 0, scale: 0.8 }
+  ],
+  options: { duration: 250, easing: "ease" }
+});
+
+export {
+  SynAlert
+};
+//# sourceMappingURL=chunk.UINFNZLR.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/alert/alert.component.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 */\nimport { animateTo, stopAnimations } from '../../internal/animate.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 } 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 customStyles from './alert.custom.styles.js';\nimport type { CSSResultGroup } from 'lit';\n\nconst toastStack = Object.assign(document.createElement('div'), { className: 'syn-toast-stack' });\n\n/**\n * @summary Alerts are used to display important messages inline or as toast notifications.\n * @documentation https://synergy.style/components/alert\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 */\nexport default class SynAlert extends SynergyElement {\n  static styles: CSSResultGroup = [componentStyles, styles, customStyles];\n  static dependencies = { 'syn-icon-button': SynIconButton };\n\n  private autoHideTimeout: number;\n  private readonly hasSlotController = new HasSlotController(this, 'icon', 'suffix');\n  private readonly localize = new LocalizeController(this);\n\n  @query('[part~=\"base\"]') base: 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  firstUpdated() {\n    this.base.hidden = !this.open;\n  }\n\n  private restartAutoHide() {\n    clearTimeout(this.autoHideTimeout);\n    if (this.open && this.duration < Infinity) {\n      this.autoHideTimeout = window.setTimeout(() => this.hide(), this.duration);\n    }\n  }\n\n  private handleCloseClick() {\n    this.hide();\n  }\n\n  private handleMouseMove() {\n    this.restartAutoHide();\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      this.emit('syn-hide');\n\n      clearTimeout(this.autoHideTimeout);\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      if (toastStack.parentElement === null) {\n        document.body.append(toastStack);\n      }\n\n      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          toastStack.removeChild(this);\n          resolve();\n\n          // Remove the toast stack from the DOM when there are no more alerts\n          if (toastStack.querySelector('syn-alert') === null) {\n            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--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        @mousemove=${this.handleMouseMove}\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      </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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,SAAS,gBAAgB;AAGzB,SAAS,YAAY;AAErB,SAAS,UAAU,aAAa;AAUhC,IAAM,aAAa,OAAO,OAAO,SAAS,cAAc,KAAK,GAAG,EAAE,WAAW,kBAAkB,CAAC;AA2BhG,IAAqB,WAArB,cAAsC,eAAe;AAAA,EAArD;AAAA;AAKE,SAAiB,oBAAoB,IAAI,kBAAkB,MAAM,QAAQ,QAAQ;AACjF,SAAiB,WAAW,IAAI,mBAAmB,IAAI;AAQX,gBAAO;AAGP,oBAAW;AAG1B,mBAAoE;AAOrE,oBAAW;AAAA;AAAA,EAEvC,eAAe;AACb,SAAK,KAAK,SAAS,CAAC,KAAK;AAAA,EAC3B;AAAA,EAEQ,kBAAkB;AACxB,iBAAa,KAAK,eAAe;AACjC,QAAI,KAAK,QAAQ,KAAK,WAAW,UAAU;AACzC,WAAK,kBAAkB,OAAO,WAAW,MAAM,KAAK,KAAK,GAAG,KAAK,QAAQ;AAAA,IAC3E;AAAA,EACF;AAAA,EAEQ,mBAAmB;AACzB,SAAK,KAAK;AAAA,EACZ;AAAA,EAEQ,kBAAkB;AACxB,SAAK,gBAAgB;AAAA,EACvB;AAAA,EAGA,MAAM,mBAAmB;AACvB,QAAI,KAAK,MAAM;AAEb,WAAK,KAAK,UAAU;AAEpB,UAAI,KAAK,WAAW,UAAU;AAC5B,aAAK,gBAAgB;AAAA,MACvB;AAEA,YAAM,eAAe,KAAK,IAAI;AAC9B,WAAK,KAAK,SAAS;AACnB,YAAM,EAAE,WAAW,QAAQ,IAAI,aAAa,MAAM,cAAc,EAAE,KAAK,KAAK,SAAS,IAAI,EAAE,CAAC;AAC5F,YAAM,UAAU,KAAK,MAAM,WAAW,OAAO;AAE7C,WAAK,KAAK,gBAAgB;AAAA,IAC5B,OAAO;AAEL,WAAK,KAAK,UAAU;AAEpB,mBAAa,KAAK,eAAe;AAEjC,YAAM,eAAe,KAAK,IAAI;AAC9B,YAAM,EAAE,WAAW,QAAQ,IAAI,aAAa,MAAM,cAAc,EAAE,KAAK,KAAK,SAAS,IAAI,EAAE,CAAC;AAC5F,YAAM,UAAU,KAAK,MAAM,WAAW,OAAO;AAC7C,WAAK,KAAK,SAAS;AAEnB,WAAK,KAAK,gBAAgB;AAAA,IAC5B;AAAA,EACF;AAAA,EAGA,uBAAuB;AACrB,SAAK,gBAAgB;AAAA,EACvB;AAAA;AAAA,EAGA,MAAM,OAAO;AACX,QAAI,KAAK,MAAM;AACb,aAAO;AAAA,IACT;AAEA,SAAK,OAAO;AACZ,WAAO,aAAa,MAAM,gBAAgB;AAAA,EAC5C;AAAA;AAAA,EAGA,MAAM,OAAO;AACX,QAAI,CAAC,KAAK,MAAM;AACd,aAAO;AAAA,IACT;AAEA,SAAK,OAAO;AACZ,WAAO,aAAa,MAAM,gBAAgB;AAAA,EAC5C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,MAAM,QAAQ;AACZ,WAAO,IAAI,QAAc,aAAW;AAClC,UAAI,WAAW,kBAAkB,MAAM;AACrC,iBAAS,KAAK,OAAO,UAAU;AAAA,MACjC;AAEA,iBAAW,YAAY,IAAI;AAG3B,4BAAsB,MAAM;AAE1B,aAAK;AACL,aAAK,KAAK;AAAA,MACZ,CAAC;AAED,WAAK;AAAA,QACH;AAAA,QACA,MAAM;AACJ,qBAAW,YAAY,IAAI;AAC3B,kBAAQ;AAGR,cAAI,WAAW,cAAc,WAAW,MAAM,MAAM;AAClD,uBAAW,OAAO;AAAA,UACpB;AAAA,QACF;AAAA,QACA,EAAE,MAAM,KAAK;AAAA,MACf;AAAA,IACF,CAAC;AAAA,EACH;AAAA,EAEA,SAAS;AACP,WAAO;AAAA;AAAA;AAAA,gBAGK,SAAS;AAAA,MACf,OAAO;AAAA,MACP,eAAe,KAAK;AAAA,MACpB,mBAAmB,KAAK;AAAA,MACxB,mBAAmB,KAAK,kBAAkB,KAAK,MAAM;AAAA,MACrD,kBAAkB,KAAK,YAAY;AAAA,MACnC,kBAAkB,KAAK,YAAY;AAAA,MACnC,kBAAkB,KAAK,YAAY;AAAA,MACnC,kBAAkB,KAAK,YAAY;AAAA,MACnC,iBAAiB,KAAK,YAAY;AAAA,IACpC,CAAC,CAAC;AAAA;AAAA,sBAEY,KAAK,OAAO,UAAU,MAAM;AAAA,qBAC7B,KAAK,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAU/B,KAAK,WACH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAOY,KAAK,SAAS,KAAK,OAAO,CAAC;AAAA,yBAC1B,KAAK,gBAAgB;AAAA;AAAA,gBAGlC,EAAE;AAAA;AAAA;AAAA,EAGZ;AACF;AAvLqB,SACZ,SAAyB,CAAC,0BAAiB,sBAAQ,2BAAY;AADnD,SAEZ,eAAe,EAAE,mBAAmB,cAAc;AAMhC;AAAA,EAAxB,MAAM,gBAAgB;AAAA,GARJ,SAQM;AAMmB;AAAA,EAA3C,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAdvB,SAcyB;AAGA;AAAA,EAA3C,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAjBvB,SAiByB;AAGf;AAAA,EAA5B,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA,GApBR,SAoBU;AAOD;AAAA,EAA3B,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GA3BP,SA2BS;AAsBtB;AAAA,EADL,MAAM,QAAQ,EAAE,sBAAsB,KAAK,CAAC;AAAA,GAhD1B,SAiDb;AA+BN;AAAA,EADC,MAAM,UAAU;AAAA,GA/EE,SAgFnB;AAyGF,oBAAoB,cAAc;AAAA,EAChC,WAAW;AAAA,IACT,EAAE,SAAS,GAAG,OAAO,IAAI;AAAA,IACzB,EAAE,SAAS,GAAG,OAAO,EAAE;AAAA,EACzB;AAAA,EACA,SAAS,EAAE,UAAU,KAAK,QAAQ,OAAO;AAC3C,CAAC;AAED,oBAAoB,cAAc;AAAA,EAChC,WAAW;AAAA,IACT,EAAE,SAAS,GAAG,OAAO,EAAE;AAAA,IACvB,EAAE,SAAS,GAAG,OAAO,IAAI;AAAA,EAC3B;AAAA,EACA,SAAS,EAAE,UAAU,KAAK,QAAQ,OAAO;AAC3C,CAAC;",
+  "names": []
+}

package/dist/chunks/{chunk.MKYRLUII.js → chunk.VMECHIZN.js}

@@ -1,6 +1,6 @@
 import {
   SynButtonGroup
-} from "./chunk.S7GUBN44.js";
+} from "./chunk.EUKFLHGG.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.MKYRLUII.js.map
+//# sourceMappingURL=chunk.VMECHIZN.js.map

package/dist/chunks/{chunk.JGXFT7JF.js → chunk.VWZE6BIA.js}

@@ -1,6 +1,6 @@
 import {
   SynMenuItem
-} from "./chunk.XALEH2Z2.js";
+} from "./chunk.LT2IOL3W.js";
 
 // src/components/menu-item/menu-item.ts
 var menu_item_default = SynMenuItem;
@@ -9,4 +9,4 @@ SynMenuItem.define("syn-menu-item");
 export {
   menu_item_default
 };
-//# sourceMappingURL=chunk.JGXFT7JF.js.map
+//# sourceMappingURL=chunk.VWZE6BIA.js.map

package/dist/chunks/{chunk.YOBIFHIM.js → chunk.WQNQONGU.js}

@@ -10,7 +10,7 @@ import {
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.3XSHKQTX.js";
+} from "./chunk.32GEMZZV.js";
 import {
   __decorateClass
 } from "./chunk.QNDC5KWA.js";
@@ -74,4 +74,4 @@ __decorateClass([
 export {
   SynProgressRing
 };
-//# sourceMappingURL=chunk.YOBIFHIM.js.map
+//# sourceMappingURL=chunk.WQNQONGU.js.map

package/dist/chunks/chunk.XBUAZUNQ.js

@@ -0,0 +1,91 @@
+// src/components/progress-bar/progress-bar.styles.ts
+import { css } from "lit";
+var progress_bar_styles_default = css`
+	/* stylelint-disable */
+  :host {
+    --height: 1rem;
+    --track-color: var(--syn-color-neutral-200);
+    --indicator-color: var(--syn-color-primary-600);
+    --label-color: var(--syn-color-neutral-0);
+
+    display: block;
+  }
+
+  .progress-bar {
+    position: relative;
+    background-color: var(--track-color);
+    height: var(--height);
+    border-radius: var(--syn-border-radius-pill);
+    box-shadow: inset var(--syn-shadow-small);
+    overflow: hidden;
+  }
+
+  .progress-bar__indicator {
+    height: 100%;
+    font-family: var(--syn-font-sans);
+    font-size: 12px;
+    font-weight: var(--syn-font-weight-normal);
+    background-color: var(--indicator-color);
+    color: var(--label-color);
+    text-align: center;
+    line-height: var(--height);
+    white-space: nowrap;
+    overflow: hidden;
+    transition:
+      400ms width,
+      400ms background-color;
+    user-select: none;
+    -webkit-user-select: none;
+  }
+
+  /* Indeterminate */
+  .progress-bar--indeterminate .progress-bar__indicator {
+    position: absolute;
+    animation: indeterminate 2.5s infinite cubic-bezier(0.37, 0, 0.63, 1);
+  }
+
+  .progress-bar--indeterminate.progress-bar--rtl .progress-bar__indicator {
+    animation-name: indeterminate-rtl;
+  }
+
+  @media (forced-colors: active) {
+    .progress-bar {
+      outline: solid 1px SelectedItem;
+      background-color: var(--syn-color-neutral-0);
+    }
+
+    .progress-bar__indicator {
+      outline: solid 1px SelectedItem;
+      background-color: SelectedItem;
+    }
+  }
+
+  @keyframes indeterminate {
+    0% {
+      left: -50%;
+      width: 50%;
+    }
+    75%,
+    100% {
+      left: 100%;
+      width: 50%;
+    }
+  }
+
+  @keyframes indeterminate-rtl {
+    0% {
+      right: -50%;
+      width: 50%;
+    }
+    75%,
+    100% {
+      right: 100%;
+      width: 50%;
+    }
+  }
+`;
+
+export {
+  progress_bar_styles_default
+};
+//# sourceMappingURL=chunk.XBUAZUNQ.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/progress-bar/progress-bar.styles.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 */\nimport { css } from 'lit';\n\nexport default css`\n\t/* stylelint-disable */\n  :host {\n    --height: 1rem;\n    --track-color: var(--syn-color-neutral-200);\n    --indicator-color: var(--syn-color-primary-600);\n    --label-color: var(--syn-color-neutral-0);\n\n    display: block;\n  }\n\n  .progress-bar {\n    position: relative;\n    background-color: var(--track-color);\n    height: var(--height);\n    border-radius: var(--syn-border-radius-pill);\n    box-shadow: inset var(--syn-shadow-small);\n    overflow: hidden;\n  }\n\n  .progress-bar__indicator {\n    height: 100%;\n    font-family: var(--syn-font-sans);\n    font-size: 12px;\n    font-weight: var(--syn-font-weight-normal);\n    background-color: var(--indicator-color);\n    color: var(--label-color);\n    text-align: center;\n    line-height: var(--height);\n    white-space: nowrap;\n    overflow: hidden;\n    transition:\n      400ms width,\n      400ms background-color;\n    user-select: none;\n    -webkit-user-select: none;\n  }\n\n  /* Indeterminate */\n  .progress-bar--indeterminate .progress-bar__indicator {\n    position: absolute;\n    animation: indeterminate 2.5s infinite cubic-bezier(0.37, 0, 0.63, 1);\n  }\n\n  .progress-bar--indeterminate.progress-bar--rtl .progress-bar__indicator {\n    animation-name: indeterminate-rtl;\n  }\n\n  @media (forced-colors: active) {\n    .progress-bar {\n      outline: solid 1px SelectedItem;\n      background-color: var(--syn-color-neutral-0);\n    }\n\n    .progress-bar__indicator {\n      outline: solid 1px SelectedItem;\n      background-color: SelectedItem;\n    }\n  }\n\n  @keyframes indeterminate {\n    0% {\n      left: -50%;\n      width: 50%;\n    }\n    75%,\n    100% {\n      left: 100%;\n      width: 50%;\n    }\n  }\n\n  @keyframes indeterminate-rtl {\n    0% {\n      right: -50%;\n      width: 50%;\n    }\n    75%,\n    100% {\n      right: 100%;\n      width: 50%;\n    }\n  }\n`;\n"],
+  "mappings": ";AAMA,SAAS,WAAW;AAEpB,IAAO,8BAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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.XOYMSEKT.js

@@ -0,0 +1,12 @@
+import {
+  SynProgressBar
+} from "./chunk.RRCGUD4A.js";
+
+// src/components/progress-bar/progress-bar.ts
+var progress_bar_default = SynProgressBar;
+SynProgressBar.define("syn-progress-bar");
+
+export {
+  progress_bar_default
+};
+//# sourceMappingURL=chunk.XOYMSEKT.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/progress-bar/progress-bar.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 */\nimport SynProgressBar from './progress-bar.component.js';\n\nexport * from './progress-bar.component.js';\nexport default SynProgressBar;\n\nSynProgressBar.define('syn-progress-bar');\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'syn-progress-bar': SynProgressBar;\n  }\n}\n"],
+  "mappings": ";;;;;AASA,IAAO,uBAAQ;AAEf,eAAe,OAAO,kBAAkB;",
+  "names": []
+}

package/dist/chunks/{chunk.HSRG6R67.js → chunk.YLVTDJCD.js}

@@ -4,9 +4,6 @@ import {
 import {
   input_styles_default
 } from "./chunk.AW2HNLNP.js";
-import {
-  SynDivider
-} from "./chunk.XH3MA254.js";
 import {
   defaultValue
 } from "./chunk.WFAJR3FN.js";
@@ -14,6 +11,9 @@ import {
   form_control_custom_styles_default,
   form_control_styles_default
 } from "./chunk.TTL762VF.js";
+import {
+  SynDivider
+} from "./chunk.35WADEQD.js";
 import {
   FormControlController
 } from "./chunk.JUJZBRXD.js";
@@ -22,7 +22,7 @@ import {
 } from "./chunk.66WXVGAW.js";
 import {
   SynIcon
-} from "./chunk.O54BQSFI.js";
+} from "./chunk.CSXBPQFP.js";
 import {
   watch
 } from "./chunk.AVTU2BGE.js";
@@ -32,7 +32,7 @@ import {
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.3XSHKQTX.js";
+} from "./chunk.32GEMZZV.js";
 import {
   __decorateClass,
   __spreadValues
@@ -642,4 +642,4 @@ __decorateClass([
 export {
   SynInput
 };
-//# sourceMappingURL=chunk.HSRG6R67.js.map
+//# sourceMappingURL=chunk.YLVTDJCD.js.map

package/dist/chunks/{chunk.I5UERUDK.js → chunk.YVG2RYSG.js}

@@ -7,7 +7,7 @@ import {
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.3XSHKQTX.js";
+} from "./chunk.32GEMZZV.js";
 import {
   __decorateClass
 } from "./chunk.QNDC5KWA.js";
@@ -128,4 +128,4 @@ __decorateClass([
 export {
   SynMenu
 };
-//# sourceMappingURL=chunk.I5UERUDK.js.map
+//# sourceMappingURL=chunk.YVG2RYSG.js.map

package/dist/chunks/{chunk.4LFIZT4V.js → chunk.YXI6WDAW.js}

@@ -1,15 +1,15 @@
 import {
   SynPopup
-} from "./chunk.OPIYLV55.js";
+} from "./chunk.FTBYTDD5.js";
+import {
+  getTabbableBoundary
+} from "./chunk.2QOQY4ZG.js";
 import {
   dropdown_custom_styles_default
 } from "./chunk.2KYFCKCK.js";
 import {
   dropdown_styles_default
 } from "./chunk.SLCYXMHB.js";
-import {
-  getTabbableBoundary
-} from "./chunk.2QOQY4ZG.js";
 import {
   animateTo,
   stopAnimations,
@@ -28,7 +28,7 @@ import {
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.3XSHKQTX.js";
+} from "./chunk.32GEMZZV.js";
 import {
   __decorateClass
 } from "./chunk.QNDC5KWA.js";
@@ -368,4 +368,4 @@ setDefaultAnimation("dropdown.hide", {
 export {
   SynDropdown
 };
-//# sourceMappingURL=chunk.4LFIZT4V.js.map
+//# sourceMappingURL=chunk.YXI6WDAW.js.map

package/dist/chunks/{chunk.QV2W7HAY.js → chunk.ZGVJ3KBH.js}

@@ -1,9 +1,9 @@
-import {
-  icon_default
-} from "./chunk.MU2UKMFS.js";
 import {
   header_styles_default
 } from "./chunk.AOKNP4QD.js";
+import {
+  icon_default
+} from "./chunk.2HMAZW6A.js";
 import {
   HasSlotController
 } from "./chunk.66WXVGAW.js";
@@ -16,7 +16,7 @@ import {
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.3XSHKQTX.js";
+} from "./chunk.32GEMZZV.js";
 import {
   __decorateClass
 } from "./chunk.QNDC5KWA.js";
@@ -163,4 +163,4 @@ __decorateClass([
 export {
   SynHeader
 };
-//# sourceMappingURL=chunk.QV2W7HAY.js.map
+//# sourceMappingURL=chunk.ZGVJ3KBH.js.map