@synergy-design-system/components 3.4.0 → 3.5.0

package/dist/chunks/chunk.VOUZJK5T.js

@@ -0,0 +1,187 @@
+// src/components/checkbox/checkbox.styles.ts
+import { css } from "lit";
+var checkbox_styles_default = css`
+  /* stylelint-disable no-descending-specificity */
+  :host {
+    display: inline-block;
+  }
+
+  .checkbox {
+    align-items: flex-start;
+    color: var(--syn-input-label-color);
+    cursor: pointer;
+    display: inline-flex;
+    font-family: var(--syn-input-font-family);
+    font-weight: var(--syn-input-font-weight);
+    padding: var(--syn-spacing-2x-small) 0; /* #1083: This adds spacing around multi-line labels */
+    position: relative;
+    vertical-align: middle;
+  }
+
+  .checkbox--small {
+    --toggle-size: var(--syn-toggle-size-small);
+
+    font-size: var(--syn-input-font-size-small);
+    padding: var(--syn-spacing-3x-small) 0;
+  }
+
+  .checkbox--medium {
+    --toggle-size: var(--syn-toggle-size-medium);
+
+    font-size: var(--syn-input-font-size-medium);
+  }
+
+  .checkbox--large {
+    --toggle-size: var(--syn-toggle-size-large);
+
+    font-size: var(--syn-input-font-size-large);
+  }
+
+  .checkbox__control {
+    align-items: center;
+    background-color: var(--syn-input-background-color);
+    border: solid var(--syn-input-border-width) var(--syn-input-border-color);
+    border-radius: var(--syn-checkbox-border-radius);
+    color: var(--syn-color-neutral-0);
+    display: inline-flex;
+    flex: 0 0 auto;
+    height: var(--toggle-size);
+    justify-content: center;
+    margin: 0.1em 0; /* #1083: This adds spacing around multi-line labels */
+    position: relative;
+    transition:
+      var(--syn-transition-fast) border-color,
+      var(--syn-transition-fast) background-color,
+      var(--syn-transition-fast) color,
+      var(--syn-transition-fast) box-shadow;
+    width: var(--toggle-size);
+  }
+
+  .checkbox__input {
+    margin: 0;
+    opacity: 0;
+    padding: 0;
+    pointer-events: none;
+    position: absolute;
+  }
+
+  .checkbox__checked-icon,
+  .checkbox__indeterminate-icon {
+    display: inline-flex;
+    height: var(--toggle-size);
+    width: var(--toggle-size);
+  }
+
+  /**
+   * Hover
+   * Applies the hover state to the whole component
+   */
+  .checkbox:not(.checkbox--checked):not(.checkbox--disabled):not(.checkbox--readonly):hover .checkbox__control {
+    background-color: var(--syn-input-background-color-hover);
+    border-color: var(--syn-input-border-color-hover);
+  }
+
+  /* Focus */
+  .checkbox:not(.checkbox--disabled):not(.checkbox--readonly) .checkbox__input:focus-visible ~ .checkbox__control {
+    outline: var(--syn-focus-ring);
+    outline-offset: var(--syn-focus-ring-offset);
+  }
+
+  /* Checked/indeterminate */
+  .checkbox--checked .checkbox__control,
+  .checkbox--indeterminate .checkbox__control {
+    background-color: var(--syn-interactive-emphasis-color);
+    border-color: var(--syn-interactive-emphasis-color);
+  }
+
+  /**
+   * Checked/indeterminate + hover
+   * Applies the hover state to the whole component
+   */
+  .checkbox.checkbox--checked:not(.checkbox--disabled):not(.checkbox--readonly):hover .checkbox__control,
+  .checkbox.checkbox--indeterminate:not(.checkbox--disabled):not(.checkbox--readonly):hover .checkbox__control {
+    background-color: var(--syn-interactive-emphasis-color-hover);
+    border-color: var(--syn-interactive-emphasis-color-hover);
+  }
+
+  /*
+   * #443: Add active styles
+   * The checked and unchecked states have different active colors
+   * Note the fallback is defined to match the hover color.
+   * This is done to make sure no active state is shown at all if no active color is defined.
+   * Still better than showing one for the unchecked state but not for the checked state.
+   */
+  .checkbox:not(.checkbox--checked):not(.checkbox--disabled):not(.checkbox--readonly):active .checkbox__control {
+    border-color: var(--syn-input-border-color-active);
+  }
+
+  /* Checked/indeterminate */
+  .checkbox.checkbox--checked:not(.checkbox--disabled):not(.checkbox--readonly):active .checkbox__control,
+  .checkbox.checkbox--indeterminate:not(.checkbox--disabled):not(.checkbox--readonly):active .checkbox__control {
+    background: var(--syn-interactive-emphasis-color-active);
+    border-color: var(--syn-interactive-emphasis-color-active);
+  }
+
+  /** #429: Use token for opacity */
+  .checkbox--disabled {
+    cursor: not-allowed;
+    opacity: var(--syn-input-disabled-opacity);
+  }
+
+  .checkbox__label {
+    align-self: center;
+    color: var(--syn-input-label-color);
+    display: inline-block;
+    line-height: var(--syn-line-height-normal);
+    margin-inline-start: var(--syn-spacing-x-small);
+    user-select: none;
+  }
+
+  :host([required]) .checkbox__label::after {
+    color: var(--syn-input-required-content-color);
+    content: var(--syn-input-required-content);
+    margin-inline-start: var(--syn-input-required-content-offset);
+  }
+
+  :host([data-user-invalid]) .checkbox__control {
+    background: var(--syn-input-border-color-focus-error);
+    border-color: var(--syn-input-border-color-focus-error);
+  }
+
+  /**
+   * #943: When invalid, use a transparent background if not checked or indeterminate
+   */
+  :host([data-user-invalid]:not([checked]):not([indeterminate])) .checkbox__control {
+    background: transparent;
+  }
+
+  /**
+   * #1171: Readonly state
+   */
+  .checkbox.checkbox--readonly {
+    cursor: default;
+  }
+
+  .checkbox.checkbox--readonly .checkbox__label {
+    /* stylelint-disable-next-line property-no-vendor-prefix */
+    -webkit-user-select: auto;
+    user-select: auto;
+  }
+
+  .checkbox.checkbox--readonly .checkbox__control {
+    background: var(--syn-input-readonly-background-color);
+    border-color: var(--syn-input-readonly-background-color);
+    color: var(--syn-readonly-indicator-color);
+    cursor: default;
+  }
+
+  .checkbox.checkbox--readonly .checkbox__input:focus ~ .checkbox__control {
+    outline: var(--syn-focus-ring);
+    outline-offset: var(--syn-focus-ring-offset);
+  }
+`;
+
+export {
+  checkbox_styles_default
+};
+//# sourceMappingURL=chunk.VOUZJK5T.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/checkbox/checkbox.styles.ts"],
+  "sourcesContent": ["/* eslint-disable */\nimport { css } from 'lit';\n\nexport default css`\n  /* stylelint-disable no-descending-specificity */\n  :host {\n    display: inline-block;\n  }\n\n  .checkbox {\n    align-items: flex-start;\n    color: var(--syn-input-label-color);\n    cursor: pointer;\n    display: inline-flex;\n    font-family: var(--syn-input-font-family);\n    font-weight: var(--syn-input-font-weight);\n    padding: var(--syn-spacing-2x-small) 0; /* #1083: This adds spacing around multi-line labels */\n    position: relative;\n    vertical-align: middle;\n  }\n\n  .checkbox--small {\n    --toggle-size: var(--syn-toggle-size-small);\n\n    font-size: var(--syn-input-font-size-small);\n    padding: var(--syn-spacing-3x-small) 0;\n  }\n\n  .checkbox--medium {\n    --toggle-size: var(--syn-toggle-size-medium);\n\n    font-size: var(--syn-input-font-size-medium);\n  }\n\n  .checkbox--large {\n    --toggle-size: var(--syn-toggle-size-large);\n\n    font-size: var(--syn-input-font-size-large);\n  }\n\n  .checkbox__control {\n    align-items: center;\n    background-color: var(--syn-input-background-color);\n    border: solid var(--syn-input-border-width) var(--syn-input-border-color);\n    border-radius: var(--syn-checkbox-border-radius);\n    color: var(--syn-color-neutral-0);\n    display: inline-flex;\n    flex: 0 0 auto;\n    height: var(--toggle-size);\n    justify-content: center;\n    margin: 0.1em 0; /* #1083: This adds spacing around multi-line labels */\n    position: relative;\n    transition:\n      var(--syn-transition-fast) border-color,\n      var(--syn-transition-fast) background-color,\n      var(--syn-transition-fast) color,\n      var(--syn-transition-fast) box-shadow;\n    width: var(--toggle-size);\n  }\n\n  .checkbox__input {\n    margin: 0;\n    opacity: 0;\n    padding: 0;\n    pointer-events: none;\n    position: absolute;\n  }\n\n  .checkbox__checked-icon,\n  .checkbox__indeterminate-icon {\n    display: inline-flex;\n    height: var(--toggle-size);\n    width: var(--toggle-size);\n  }\n\n  /**\n   * Hover\n   * Applies the hover state to the whole component\n   */\n  .checkbox:not(.checkbox--checked):not(.checkbox--disabled):not(.checkbox--readonly):hover .checkbox__control {\n    background-color: var(--syn-input-background-color-hover);\n    border-color: var(--syn-input-border-color-hover);\n  }\n\n  /* Focus */\n  .checkbox:not(.checkbox--disabled):not(.checkbox--readonly) .checkbox__input:focus-visible ~ .checkbox__control {\n    outline: var(--syn-focus-ring);\n    outline-offset: var(--syn-focus-ring-offset);\n  }\n\n  /* Checked/indeterminate */\n  .checkbox--checked .checkbox__control,\n  .checkbox--indeterminate .checkbox__control {\n    background-color: var(--syn-interactive-emphasis-color);\n    border-color: var(--syn-interactive-emphasis-color);\n  }\n\n  /**\n   * Checked/indeterminate + hover\n   * Applies the hover state to the whole component\n   */\n  .checkbox.checkbox--checked:not(.checkbox--disabled):not(.checkbox--readonly):hover .checkbox__control,\n  .checkbox.checkbox--indeterminate:not(.checkbox--disabled):not(.checkbox--readonly):hover .checkbox__control {\n    background-color: var(--syn-interactive-emphasis-color-hover);\n    border-color: var(--syn-interactive-emphasis-color-hover);\n  }\n\n  /*\n   * #443: Add active styles\n   * The checked and unchecked states have different active colors\n   * Note the fallback is defined to match the hover color.\n   * This is done to make sure no active state is shown at all if no active color is defined.\n   * Still better than showing one for the unchecked state but not for the checked state.\n   */\n  .checkbox:not(.checkbox--checked):not(.checkbox--disabled):not(.checkbox--readonly):active .checkbox__control {\n    border-color: var(--syn-input-border-color-active);\n  }\n\n  /* Checked/indeterminate */\n  .checkbox.checkbox--checked:not(.checkbox--disabled):not(.checkbox--readonly):active .checkbox__control,\n  .checkbox.checkbox--indeterminate:not(.checkbox--disabled):not(.checkbox--readonly):active .checkbox__control {\n    background: var(--syn-interactive-emphasis-color-active);\n    border-color: var(--syn-interactive-emphasis-color-active);\n  }\n\n  /** #429: Use token for opacity */\n  .checkbox--disabled {\n    cursor: not-allowed;\n    opacity: var(--syn-input-disabled-opacity);\n  }\n\n  .checkbox__label {\n    align-self: center;\n    color: var(--syn-input-label-color);\n    display: inline-block;\n    line-height: var(--syn-line-height-normal);\n    margin-inline-start: var(--syn-spacing-x-small);\n    user-select: none;\n  }\n\n  :host([required]) .checkbox__label::after {\n    color: var(--syn-input-required-content-color);\n    content: var(--syn-input-required-content);\n    margin-inline-start: var(--syn-input-required-content-offset);\n  }\n\n  :host([data-user-invalid]) .checkbox__control {\n    background: var(--syn-input-border-color-focus-error);\n    border-color: var(--syn-input-border-color-focus-error);\n  }\n\n  /**\n   * #943: When invalid, use a transparent background if not checked or indeterminate\n   */\n  :host([data-user-invalid]:not([checked]):not([indeterminate])) .checkbox__control {\n    background: transparent;\n  }\n\n  /**\n   * #1171: Readonly state\n   */\n  .checkbox.checkbox--readonly {\n    cursor: default;\n  }\n\n  .checkbox.checkbox--readonly .checkbox__label {\n    /* stylelint-disable-next-line property-no-vendor-prefix */\n    -webkit-user-select: auto;\n    user-select: auto;\n  }\n\n  .checkbox.checkbox--readonly .checkbox__control {\n    background: var(--syn-input-readonly-background-color);\n    border-color: var(--syn-input-readonly-background-color);\n    color: var(--syn-readonly-indicator-color);\n    cursor: default;\n  }\n\n  .checkbox.checkbox--readonly .checkbox__input:focus ~ .checkbox__control {\n    outline: var(--syn-focus-ring);\n    outline-offset: var(--syn-focus-ring-offset);\n  }\n`;\n"],
+  "mappings": ";AACA,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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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.7BLGNQYF.js → chunk.WEOHOC3C.js}

@@ -1,6 +1,6 @@
 import {
   SynergyElement
-} from "./chunk.XBQWANZE.js";
+} from "./chunk.V4GFOKBI.js";
 
 // src/components/validate/utility.ts
 var WhitelistedSynergyFormEventNames = [
@@ -44,4 +44,4 @@ export {
   getEventNameForElement,
   alertSizeForInput
 };
-//# sourceMappingURL=chunk.7BLGNQYF.js.map
+//# sourceMappingURL=chunk.WEOHOC3C.js.map

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

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

package/dist/chunks/{chunk.BRNM4AJ5.js → chunk.X4NXSNI6.js}

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

package/dist/chunks/{chunk.FQ4KGYKO.js → chunk.XCFOLSPD.js}

@@ -1,6 +1,6 @@
 import {
   SynRange
-} from "./chunk.5OQDAMNY.js";
+} from "./chunk.3AZ6O5UW.js";
 
 // src/components/range/range.ts
 var range_default = SynRange;
@@ -9,4 +9,4 @@ SynRange.define("syn-range");
 export {
   range_default
 };
-//# sourceMappingURL=chunk.FQ4KGYKO.js.map
+//# sourceMappingURL=chunk.XCFOLSPD.js.map

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

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

package/dist/chunks/{chunk.MGYKXWZG.js → chunk.XQZR2X4X.js}

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

package/dist/chunks/{chunk.2KZDXUHA.js → chunk.XUAUB2UI.js}

@@ -9,10 +9,10 @@ import {
 } from "./chunk.QLETXF4A.js";
 import {
   component_styles_default
-} from "./chunk.FXJLG622.js";
+} from "./chunk.2NT3B5WJ.js";
 import {
   SynergyElement
-} from "./chunk.XBQWANZE.js";
+} from "./chunk.V4GFOKBI.js";
 
 // src/components/spinner/spinner.component.ts
 import { html } from "lit";
@@ -35,4 +35,4 @@ SynSpinner.styles = [component_styles_default, spinner_styles_default, spinner_c
 export {
   SynSpinner
 };
-//# sourceMappingURL=chunk.2KZDXUHA.js.map
+//# sourceMappingURL=chunk.XUAUB2UI.js.map

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

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

package/dist/chunks/{chunk.DHG2L3WA.js → chunk.XZ7DDRXL.js}

@@ -1,16 +1,12 @@
 import {
   defaultValue
 } from "./chunk.3JDUKQRN.js";
-import {
-  checkbox_custom_styles_default
-} from "./chunk.IZRTF5EM.js";
 import {
   checkbox_styles_default
-} from "./chunk.ZC3GXTWV.js";
+} from "./chunk.VOUZJK5T.js";
 import {
-  form_control_custom_styles_default,
   form_control_styles_default
-} from "./chunk.PTRCO527.js";
+} from "./chunk.34WYIU4C.js";
 import {
   FormControlController
 } from "./chunk.J3GDDM6Q.js";
@@ -19,7 +15,7 @@ import {
 } from "./chunk.CHFWLQN5.js";
 import {
   SynIcon
-} from "./chunk.645UJMOV.js";
+} from "./chunk.TBZAI6T6.js";
 import {
   enableDefaultSettings
 } from "./chunk.YACUYJZN.js";
@@ -28,10 +24,10 @@ import {
 } from "./chunk.SMIMHADA.js";
 import {
   component_styles_default
-} from "./chunk.FXJLG622.js";
+} from "./chunk.2NT3B5WJ.js";
 import {
   SynergyElement
-} from "./chunk.XBQWANZE.js";
+} from "./chunk.V4GFOKBI.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -41,7 +37,7 @@ import { classMap } from "lit/directives/class-map.js";
 import { html } from "lit";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { live } from "lit/directives/live.js";
-import { property, query, state } from "lit/decorators.js";
+import { property, query } from "lit/decorators.js";
 var SynCheckbox = class extends SynergyElement {
   constructor() {
     super(...arguments);
@@ -51,11 +47,11 @@ var SynCheckbox = class extends SynergyElement {
       setValue: (control, checked) => control.checked = checked
     });
     this.hasSlotController = new HasSlotController(this, "help-text");
-    this.hasFocus = false;
     this.title = "";
     this.name = "";
     this.size = "medium";
     this.disabled = false;
+    this.readonly = false;
     this.checked = false;
     this.indeterminate = false;
     this.defaultChecked = false;
@@ -74,13 +70,16 @@ var SynCheckbox = class extends SynergyElement {
   firstUpdated() {
     this.formControlController.updateValidity();
   }
-  handleClick() {
+  handleClick(e) {
+    if (this.readonly) {
+      e.preventDefault();
+      return;
+    }
     this.checked = !this.checked;
     this.indeterminate = false;
     this.emit("syn-change");
   }
   handleBlur() {
-    this.hasFocus = false;
     this.emit("syn-blur");
   }
   handleInput() {
@@ -91,7 +90,6 @@ var SynCheckbox = class extends SynergyElement {
     this.formControlController.emitInvalidEvent(event);
   }
   handleFocus() {
-    this.hasFocus = true;
     this.emit("syn-focus");
   }
   handleDisabledChange() {
@@ -153,7 +151,7 @@ var SynCheckbox = class extends SynergyElement {
       checkbox: true,
       "checkbox--checked": this.checked,
       "checkbox--disabled": this.disabled,
-      "checkbox--focused": this.hasFocus,
+      "checkbox--readonly": this.readonly,
       "checkbox--indeterminate": this.indeterminate,
       "checkbox--small": this.size === "small",
       "checkbox--medium": this.size === "medium",
@@ -169,6 +167,7 @@ var SynCheckbox = class extends SynergyElement {
             .indeterminate=${live(this.indeterminate)}
             .checked=${live(this.checked)}
             .disabled=${this.disabled}
+            .readOnly=${this.readonly}
             .required=${this.required}
             aria-checked=${this.checked ? "true" : "false"}
             aria-describedby="help-text"
@@ -213,14 +212,11 @@ var SynCheckbox = class extends SynergyElement {
     `;
   }
 };
-SynCheckbox.styles = [component_styles_default, form_control_styles_default, checkbox_styles_default, form_control_custom_styles_default, checkbox_custom_styles_default];
+SynCheckbox.styles = [component_styles_default, form_control_styles_default, checkbox_styles_default];
 SynCheckbox.dependencies = { "syn-icon": SynIcon };
 __decorateClass([
   query('input[type="checkbox"]')
 ], SynCheckbox.prototype, "input", 2);
-__decorateClass([
-  state()
-], SynCheckbox.prototype, "hasFocus", 2);
 __decorateClass([
   property({ reflect: true })
 ], SynCheckbox.prototype, "title", 2);
@@ -236,6 +232,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], SynCheckbox.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SynCheckbox.prototype, "readonly", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], SynCheckbox.prototype, "checked", 2);
@@ -267,4 +266,4 @@ SynCheckbox = __decorateClass([
 export {
   SynCheckbox
 };
-//# sourceMappingURL=chunk.DHG2L3WA.js.map
+//# sourceMappingURL=chunk.XZ7DDRXL.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/checkbox/checkbox.component.ts"],
+  "sourcesContent": ["/* eslint-disable */\nimport { classMap } from 'lit/directives/class-map.js';\nimport { defaultValue } from '../../internal/default-value.js';\nimport { FormControlController } from '../../internal/form.js';\nimport { HasSlotController } from '../../internal/slot.js';\nimport { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { property, query } from 'lit/decorators.js';\nimport { watch } from '../../internal/watch.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport formControlStyles from '../../styles/form-control.styles.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport SynIcon from '../icon/icon.component.js';\nimport styles from './checkbox.styles.js';\nimport type { CSSResultGroup } from 'lit';\nimport type { SynergyFormControl } from '../../internal/synergy-element.js';\nimport { enableDefaultSettings } from '../../utilities/defaultSettings/decorator.js';\n\n/**\n * @summary Checkboxes allow the user to toggle an option on or off.\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-checkbox--docs\n * @status stable\n * @since 2.0\n *\n * @dependency syn-icon\n *\n * @slot - The checkbox's label.\n * @slot help-text - Text that describes how to use the checkbox. Alternatively, you can use the `help-text` attribute.\n *\n * @event syn-blur - Emitted when the checkbox loses focus.\n * @event syn-change - Emitted when the checked state changes.\n * @event syn-focus - Emitted when the checkbox gains focus.\n * @event syn-input - Emitted when the checkbox receives input.\n * @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @csspart base - The component's base wrapper.\n * @csspart control - The square container that wraps the checkbox's checked state.\n * @csspart control--checked - Matches the control part when the checkbox is checked.\n * @csspart control--indeterminate - Matches the control part when the checkbox is indeterminate.\n * @csspart checked-icon - The checked icon, an `<syn-icon>` element.\n * @csspart indeterminate-icon - The indeterminate icon, an `<syn-icon>` element.\n * @csspart label - The container that wraps the checkbox's label.\n * @csspart form-control-help-text - The help text's wrapper.\n */\n@enableDefaultSettings('SynCheckbox')\nexport default class SynCheckbox extends SynergyElement implements SynergyFormControl {\n  static styles: CSSResultGroup = [componentStyles, formControlStyles, styles];\n  static dependencies = { 'syn-icon': SynIcon };\n\n  private readonly formControlController = new FormControlController(this, {\n    value: (control: SynCheckbox) => (control.checked ? control.value || 'on' : undefined),\n    defaultValue: (control: SynCheckbox) => control.defaultChecked,\n    setValue: (control: SynCheckbox, checked: boolean) => (control.checked = checked)\n  });\n  private readonly hasSlotController = new HasSlotController(this, 'help-text');\n\n  @query('input[type=\"checkbox\"]') input: HTMLInputElement;\n\n  @property({ reflect: true }) title = ''; // make reactive to pass through\n\n  /** The name of the checkbox, submitted as a name/value pair with form data. */\n  @property() name = '';\n\n  /** The current value of the checkbox, submitted as a name/value pair with form data. */\n  @property() value: string;\n\n  /** The checkbox's size. */\n  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** Disables the checkbox. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** Sets the checkbox to a readonly state. */\n  @property({ type: Boolean, reflect: true }) readonly = false;\n\n  /** Draws the checkbox in a checked state. */\n  @property({ type: Boolean, reflect: true }) checked = false;\n\n  /**\n   * Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a \"select\n   * all/none\" behavior when associated checkboxes have a mix of checked and unchecked states.\n   */\n  @property({ type: Boolean, reflect: true }) indeterminate = false;\n\n  /** The default value of the form control. Primarily used for resetting the form control. */\n  @defaultValue('checked') defaultChecked = false;\n\n  /**\n   * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\n   * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in\n   * the same document or shadow root for this to work.\n   */\n  @property({ reflect: true }) form = '';\n\n  /** Makes the checkbox a required field. */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  /** The checkbox's help text. If you need to display HTML, use the `help-text` slot instead. */\n  @property({ attribute: 'help-text' }) helpText = '';\n\n  /** Gets the validity state object */\n  get validity() {\n    return this.input.validity;\n  }\n\n  /** Gets the validation message */\n  get validationMessage() {\n    return this.input.validationMessage;\n  }\n\n  firstUpdated() {\n    this.formControlController.updateValidity();\n  }\n\n  private handleClick(e: MouseEvent) {\n    if (this.readonly) {\n      e.preventDefault();\n      return;\n    }\n\n    this.checked = !this.checked;\n    this.indeterminate = false;\n    this.emit('syn-change');\n  }\n\n  private handleBlur() {\n    this.emit('syn-blur');\n  }\n\n  private handleInput() {\n    this.emit('syn-input');\n  }\n\n  private handleInvalid(event: Event) {\n    this.formControlController.setValidity(false);\n    this.formControlController.emitInvalidEvent(event);\n  }\n\n  private handleFocus() {\n    this.emit('syn-focus');\n  }\n\n  @watch('disabled', { waitUntilFirstUpdate: true })\n  handleDisabledChange() {\n    // Disabled form controls are always valid\n    this.formControlController.setValidity(this.disabled);\n  }\n\n  @watch(['checked', 'indeterminate'], { waitUntilFirstUpdate: true })\n  handleStateChange() {\n    this.input.checked = this.checked; // force a sync update\n    this.input.indeterminate = this.indeterminate; // force a sync update\n    this.formControlController.updateValidity();\n  }\n\n  /** Simulates a click on the checkbox. */\n  click() {\n    this.input.click();\n  }\n\n  /** Sets focus on the checkbox. */\n  focus(options?: FocusOptions) {\n    this.input.focus(options);\n  }\n\n  /** Removes focus from the checkbox. */\n  blur() {\n    this.input.blur();\n  }\n\n  /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */\n  checkValidity() {\n    return this.input.checkValidity();\n  }\n\n  /** Gets the associated form, if one exists. */\n  getForm(): HTMLFormElement | null {\n    return this.formControlController.getForm();\n  }\n\n  /** Checks for validity and shows the browser's validation message if the control is invalid. */\n  reportValidity() {\n    return this.input.reportValidity();\n  }\n\n  /**\n   * Sets a custom validation message. The value provided will be shown to the user when the form is submitted. To clear\n   * the custom validation message, call this method with an empty string.\n   */\n  setCustomValidity(message: string) {\n    this.input.setCustomValidity(message);\n    this.formControlController.updateValidity();\n  }\n\n  render() {\n    const hasHelpTextSlot = this.hasSlotController.test('help-text');\n    const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;\n\n    //\n    // NOTE: we use a <div> around the label slot because of this Chrome bug.\n    //\n    // https://bugs.chromium.org/p/chromium/issues/detail?id=1413733\n    //\n    return html`\n      <div\n        class=${classMap({\n          'form-control': true,\n          'form-control--small': this.size === 'small',\n          'form-control--medium': this.size === 'medium',\n          'form-control--large': this.size === 'large',\n          'form-control--has-help-text': hasHelpText\n        })}\n      >\n        <label\n          part=\"base\"\n          class=${classMap({\n            checkbox: true,\n            'checkbox--checked': this.checked,\n            'checkbox--disabled': this.disabled,\n            'checkbox--readonly': this.readonly,\n            'checkbox--indeterminate': this.indeterminate,\n            'checkbox--small': this.size === 'small',\n            'checkbox--medium': this.size === 'medium',\n            'checkbox--large': this.size === 'large'\n          })}\n        >\n          <input\n            class=\"checkbox__input\"\n            type=\"checkbox\"\n            title=${this.title /* An empty title prevents browser validation tooltips from appearing on hover */}\n            name=${this.name}\n            value=${ifDefined(this.value)}\n            .indeterminate=${live(this.indeterminate)}\n            .checked=${live(this.checked)}\n            .disabled=${this.disabled}\n            .readOnly=${this.readonly}\n            .required=${this.required}\n            aria-checked=${this.checked ? 'true' : 'false'}\n            aria-describedby=\"help-text\"\n            @click=${this.handleClick}\n            @input=${this.handleInput}\n            @invalid=${this.handleInvalid}\n            @blur=${this.handleBlur}\n            @focus=${this.handleFocus}\n          />\n\n          <span\n            part=\"control${this.checked ? ' control--checked' : ''}${this.indeterminate\n              ? ' control--indeterminate'\n              : ''}\"\n            class=\"checkbox__control\"\n          >\n            ${this.checked\n              ? html`\n                  <syn-icon part=\"checked-icon\" class=\"checkbox__checked-icon\" library=\"system\" name=\"check\"></syn-icon>\n                `\n              : ''}\n            ${!this.checked && this.indeterminate\n              ? html`\n                  <syn-icon\n                    part=\"indeterminate-icon\"\n                    class=\"checkbox__indeterminate-icon\"\n                    library=\"system\"\n                    name=\"indeterminate\"\n                  ></syn-icon>\n                `\n              : ''}\n          </span>\n\n          <div part=\"label\" class=\"checkbox__label\">\n            <slot></slot>\n          </div>\n        </label>\n\n        <div\n          aria-hidden=${hasHelpText ? 'false' : 'true'}\n          class=\"form-control__help-text\"\n          id=\"help-text\"\n          part=\"form-control-help-text\"\n        >\n          <slot name=\"help-text\">${this.helpText}</slot>\n        </div>\n      </div>\n    `;\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,SAAS,gBAAgB;AAIzB,SAAS,YAAY;AACrB,SAAS,iBAAiB;AAC1B,SAAS,YAAY;AACrB,SAAS,UAAU,aAAa;AAsChC,IAAqB,cAArB,cAAyC,eAA6C;AAAA,EAAtF;AAAA;AAIE,SAAiB,wBAAwB,IAAI,sBAAsB,MAAM;AAAA,MACvE,OAAO,CAAC,YAA0B,QAAQ,UAAU,QAAQ,SAAS,OAAO;AAAA,MAC5E,cAAc,CAAC,YAAyB,QAAQ;AAAA,MAChD,UAAU,CAAC,SAAsB,YAAsB,QAAQ,UAAU;AAAA,IAC3E,CAAC;AACD,SAAiB,oBAAoB,IAAI,kBAAkB,MAAM,WAAW;AAI/C,iBAAQ;AAGzB,gBAAO;AAMU,gBAAqC;AAGtB,oBAAW;AAGX,oBAAW;AAGX,mBAAU;AAMV,yBAAgB;AAGnC,0BAAiB;AAOb,gBAAO;AAGQ,oBAAW;AAGjB,oBAAW;AAAA;AAAA;AAAA,EAGjD,IAAI,WAAW;AACb,WAAO,KAAK,MAAM;AAAA,EACpB;AAAA;AAAA,EAGA,IAAI,oBAAoB;AACtB,WAAO,KAAK,MAAM;AAAA,EACpB;AAAA,EAEA,eAAe;AACb,SAAK,sBAAsB,eAAe;AAAA,EAC5C;AAAA,EAEQ,YAAY,GAAe;AACjC,QAAI,KAAK,UAAU;AACjB,QAAE,eAAe;AACjB;AAAA,IACF;AAEA,SAAK,UAAU,CAAC,KAAK;AACrB,SAAK,gBAAgB;AACrB,SAAK,KAAK,YAAY;AAAA,EACxB;AAAA,EAEQ,aAAa;AACnB,SAAK,KAAK,UAAU;AAAA,EACtB;AAAA,EAEQ,cAAc;AACpB,SAAK,KAAK,WAAW;AAAA,EACvB;AAAA,EAEQ,cAAc,OAAc;AAClC,SAAK,sBAAsB,YAAY,KAAK;AAC5C,SAAK,sBAAsB,iBAAiB,KAAK;AAAA,EACnD;AAAA,EAEQ,cAAc;AACpB,SAAK,KAAK,WAAW;AAAA,EACvB;AAAA,EAGA,uBAAuB;AAErB,SAAK,sBAAsB,YAAY,KAAK,QAAQ;AAAA,EACtD;AAAA,EAGA,oBAAoB;AAClB,SAAK,MAAM,UAAU,KAAK;AAC1B,SAAK,MAAM,gBAAgB,KAAK;AAChC,SAAK,sBAAsB,eAAe;AAAA,EAC5C;AAAA;AAAA,EAGA,QAAQ;AACN,SAAK,MAAM,MAAM;AAAA,EACnB;AAAA;AAAA,EAGA,MAAM,SAAwB;AAC5B,SAAK,MAAM,MAAM,OAAO;AAAA,EAC1B;AAAA;AAAA,EAGA,OAAO;AACL,SAAK,MAAM,KAAK;AAAA,EAClB;AAAA;AAAA,EAGA,gBAAgB;AACd,WAAO,KAAK,MAAM,cAAc;AAAA,EAClC;AAAA;AAAA,EAGA,UAAkC;AAChC,WAAO,KAAK,sBAAsB,QAAQ;AAAA,EAC5C;AAAA;AAAA,EAGA,iBAAiB;AACf,WAAO,KAAK,MAAM,eAAe;AAAA,EACnC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,kBAAkB,SAAiB;AACjC,SAAK,MAAM,kBAAkB,OAAO;AACpC,SAAK,sBAAsB,eAAe;AAAA,EAC5C;AAAA,EAEA,SAAS;AACP,UAAM,kBAAkB,KAAK,kBAAkB,KAAK,WAAW;AAC/D,UAAM,cAAc,KAAK,WAAW,OAAO,CAAC,CAAC;AAO7C,WAAO;AAAA;AAAA,gBAEK,SAAS;AAAA,MACf,gBAAgB;AAAA,MAChB,uBAAuB,KAAK,SAAS;AAAA,MACrC,wBAAwB,KAAK,SAAS;AAAA,MACtC,uBAAuB,KAAK,SAAS;AAAA,MACrC,+BAA+B;AAAA,IACjC,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA,kBAIQ,SAAS;AAAA,MACf,UAAU;AAAA,MACV,qBAAqB,KAAK;AAAA,MAC1B,sBAAsB,KAAK;AAAA,MAC3B,sBAAsB,KAAK;AAAA,MAC3B,2BAA2B,KAAK;AAAA,MAChC,mBAAmB,KAAK,SAAS;AAAA,MACjC,oBAAoB,KAAK,SAAS;AAAA,MAClC,mBAAmB,KAAK,SAAS;AAAA,IACnC,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,oBAKQ,KAAK,KAAuF;AAAA,mBAC7F,KAAK,IAAI;AAAA,oBACR,UAAU,KAAK,KAAK,CAAC;AAAA,6BACZ,KAAK,KAAK,aAAa,CAAC;AAAA,uBAC9B,KAAK,KAAK,OAAO,CAAC;AAAA,wBACjB,KAAK,QAAQ;AAAA,wBACb,KAAK,QAAQ;AAAA,wBACb,KAAK,QAAQ;AAAA,2BACV,KAAK,UAAU,SAAS,OAAO;AAAA;AAAA,qBAErC,KAAK,WAAW;AAAA,qBAChB,KAAK,WAAW;AAAA,uBACd,KAAK,aAAa;AAAA,oBACrB,KAAK,UAAU;AAAA,qBACd,KAAK,WAAW;AAAA;AAAA;AAAA;AAAA,2BAIV,KAAK,UAAU,sBAAsB,EAAE,GAAG,KAAK,gBAC1D,4BACA,EAAE;AAAA;AAAA;AAAA,cAGJ,KAAK,UACH;AAAA;AAAA,oBAGA,EAAE;AAAA,cACJ,CAAC,KAAK,WAAW,KAAK,gBACpB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAQA,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBASM,cAAc,UAAU,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,mCAKnB,KAAK,QAAQ;AAAA;AAAA;AAAA;AAAA,EAI9C;AACF;AAhPqB,YACZ,SAAyB,CAAC,0BAAiB,6BAAmB,uBAAM;AADxD,YAEZ,eAAe,EAAE,YAAY,QAAQ;AASX;AAAA,EAAhC,MAAM,wBAAwB;AAAA,GAXZ,YAWc;AAEJ;AAAA,EAA5B,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA,GAbR,YAaU;AAGjB;AAAA,EAAX,SAAS;AAAA,GAhBS,YAgBP;AAGA;AAAA,EAAX,SAAS;AAAA,GAnBS,YAmBP;AAGiB;AAAA,EAA5B,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA,GAtBR,YAsBU;AAGe;AAAA,EAA3C,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAzBvB,YAyByB;AAGA;AAAA,EAA3C,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GA5BvB,YA4ByB;AAGA;AAAA,EAA3C,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GA/BvB,YA+ByB;AAMA;AAAA,EAA3C,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GArCvB,YAqCyB;AAGnB;AAAA,EAAxB,aAAa,SAAS;AAAA,GAxCJ,YAwCM;AAOI;AAAA,EAA5B,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA,GA/CR,YA+CU;AAGe;AAAA,EAA3C,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAlDvB,YAkDyB;AAGN;AAAA,EAArC,SAAS,EAAE,WAAW,YAAY,CAAC;AAAA,GArDjB,YAqDmB;AA6CtC;AAAA,EADC,MAAM,YAAY,EAAE,sBAAsB,KAAK,CAAC;AAAA,GAjG9B,YAkGnB;AAMA;AAAA,EADC,MAAM,CAAC,WAAW,eAAe,GAAG,EAAE,sBAAsB,KAAK,CAAC;AAAA,GAvGhD,YAwGnB;AAxGmB,cAArB;AAAA,EADC,sBAAsB,aAAa;AAAA,GACf;",
+  "names": []
+}

package/dist/chunks/{chunk.GF3HUMZQ.js → chunk.Y5XMLHNP.js}

@@ -1,6 +1,6 @@
 import {
   SynDetails
-} from "./chunk.VBDEVVCF.js";
+} from "./chunk.SWMV7T2O.js";
 
 // src/components/details/details.ts
 var details_default = SynDetails;
@@ -9,4 +9,4 @@ SynDetails.define("syn-details");
 export {
   details_default
 };
-//# sourceMappingURL=chunk.GF3HUMZQ.js.map
+//# sourceMappingURL=chunk.Y5XMLHNP.js.map

package/dist/chunks/{chunk.CNZHJBMS.js → chunk.YGMDIJUQ.js}

@@ -1,6 +1,6 @@
 import {
   SynMenuItem
-} from "./chunk.7IUQZ2ML.js";
+} from "./chunk.JJ2K4ORZ.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.CNZHJBMS.js.map
+//# sourceMappingURL=chunk.YGMDIJUQ.js.map

package/dist/chunks/{chunk.56TNALPZ.js → chunk.YUUXCVT2.js}

@@ -1,6 +1,6 @@
 import {
   SynMenu
-} from "./chunk.RNZREX6Z.js";
+} from "./chunk.H63OT7RB.js";
 
 // src/components/menu/menu.ts
 var menu_default = SynMenu;
@@ -9,4 +9,4 @@ SynMenu.define("syn-menu");
 export {
   menu_default
 };
-//# sourceMappingURL=chunk.56TNALPZ.js.map
+//# sourceMappingURL=chunk.YUUXCVT2.js.map

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

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

package/dist/components/accordion/accordion.component.js

@@ -1,6 +1,6 @@
 import {
   SynAccordion
-} from "../../chunks/chunk.V7UB7DDN.js";
+} from "../../chunks/chunk.JHJFFBNL.js";
 import "../../chunks/chunk.WNUZ6LH4.js";
 import "../../chunks/chunk.YACUYJZN.js";
 import "../../chunks/chunk.RY3ZM7MQ.js";
@@ -8,8 +8,8 @@ import "../../chunks/chunk.VL3GX6WV.js";
 import "../../chunks/chunk.VMLERD3J.js";
 import "../../chunks/chunk.QDG5AJZX.js";
 import "../../chunks/chunk.SMIMHADA.js";
-import "../../chunks/chunk.FXJLG622.js";
-import "../../chunks/chunk.XBQWANZE.js";
+import "../../chunks/chunk.2NT3B5WJ.js";
+import "../../chunks/chunk.V4GFOKBI.js";
 import "../../chunks/chunk.MO2GTRUM.js";
 export {
   SynAccordion as default

package/dist/components/accordion/accordion.js

@@ -1,7 +1,7 @@
 import {
   accordion_default
-} from "../../chunks/chunk.XAQXEY2M.js";
-import "../../chunks/chunk.V7UB7DDN.js";
+} from "../../chunks/chunk.ZJ6JMFVP.js";
+import "../../chunks/chunk.JHJFFBNL.js";
 import "../../chunks/chunk.WNUZ6LH4.js";
 import "../../chunks/chunk.YACUYJZN.js";
 import "../../chunks/chunk.RY3ZM7MQ.js";
@@ -9,8 +9,8 @@ import "../../chunks/chunk.VL3GX6WV.js";
 import "../../chunks/chunk.VMLERD3J.js";
 import "../../chunks/chunk.QDG5AJZX.js";
 import "../../chunks/chunk.SMIMHADA.js";
-import "../../chunks/chunk.FXJLG622.js";
-import "../../chunks/chunk.XBQWANZE.js";
+import "../../chunks/chunk.2NT3B5WJ.js";
+import "../../chunks/chunk.V4GFOKBI.js";
 import "../../chunks/chunk.MO2GTRUM.js";
 export {
   accordion_default as default

package/dist/components/alert/alert.component.js

@@ -1,22 +1,22 @@
 import {
   SynAlert
-} from "../../chunks/chunk.HHYD4FQJ.js";
+} from "../../chunks/chunk.6L4RCUNM.js";
 import "../../chunks/chunk.WXVOTRW5.js";
-import "../../chunks/chunk.MQG45CA3.js";
-import "../../chunks/chunk.DAIQ5WRI.js";
+import "../../chunks/chunk.FKDUVEOP.js";
 import "../../chunks/chunk.OQUVO5QW.js";
+import "../../chunks/chunk.DAIQ5WRI.js";
 import "../../chunks/chunk.LQDIH4Z5.js";
 import "../../chunks/chunk.Q6HZ4JXR.js";
 import "../../chunks/chunk.RJUVM6NO.js";
 import "../../chunks/chunk.CHFWLQN5.js";
-import "../../chunks/chunk.645UJMOV.js";
-import "../../chunks/chunk.NMWM3BP7.js";
-import "../../chunks/chunk.RODNHT5C.js";
+import "../../chunks/chunk.TBZAI6T6.js";
+import "../../chunks/chunk.PJO6TM3T.js";
+import "../../chunks/chunk.4XZTYPIY.js";
+import "../../chunks/chunk.2BATB6NO.js";
 import "../../chunks/chunk.3RR4RIR7.js";
 import "../../chunks/chunk.66HKI7Q7.js";
 import "../../chunks/chunk.VBS3JEIP.js";
-import "../../chunks/chunk.PJO6TM3T.js";
-import "../../chunks/chunk.4XZTYPIY.js";
+import "../../chunks/chunk.RODNHT5C.js";
 import "../../chunks/chunk.QLETXF4A.js";
 import "../../chunks/chunk.BHJVE26D.js";
 import "../../chunks/chunk.PLV4PZYX.js";
@@ -26,8 +26,8 @@ import "../../chunks/chunk.VL3GX6WV.js";
 import "../../chunks/chunk.VMLERD3J.js";
 import "../../chunks/chunk.QDG5AJZX.js";
 import "../../chunks/chunk.SMIMHADA.js";
-import "../../chunks/chunk.FXJLG622.js";
-import "../../chunks/chunk.XBQWANZE.js";
+import "../../chunks/chunk.2NT3B5WJ.js";
+import "../../chunks/chunk.V4GFOKBI.js";
 import "../../chunks/chunk.TSWB7UFK.js";
 import "../../chunks/chunk.CCY6IYFD.js";
 import "../../chunks/chunk.MO2GTRUM.js";