@synergy-design-system/components 3.5.0 → 3.6.0

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.2YBC7C2K.js → chunk.VLCNIRQP.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.WRPQ3635.js";
 import {
   SynIcon
-} from "./chunk.TBZAI6T6.js";
+} from "./chunk.6GMIINJO.js";
 import {
   LocalizeController
 } from "./chunk.QLETXF4A.js";
@@ -15,7 +15,7 @@ import {
 } from "./chunk.2NT3B5WJ.js";
 import {
   SynergyElement
-} from "./chunk.V4GFOKBI.js";
+} from "./chunk.FUWJV6FF.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -91,4 +91,4 @@ __decorateClass([
 export {
   SynBreadcrumb
 };
-//# sourceMappingURL=chunk.2YBC7C2K.js.map
+//# sourceMappingURL=chunk.VLCNIRQP.js.map

package/dist/chunks/{chunk.FFAHZBAJ.js → chunk.VO4T33T2.js}

@@ -1,6 +1,6 @@
 import {
   SynCombobox
-} from "./chunk.IFEFFC3Q.js";
+} from "./chunk.6EWCMDOQ.js";
 
 // src/components/combobox/combobox.ts
 var combobox_default = SynCombobox;
@@ -9,4 +9,4 @@ SynCombobox.define("syn-combobox");
 export {
   combobox_default
 };
-//# sourceMappingURL=chunk.FFAHZBAJ.js.map
+//# sourceMappingURL=chunk.VO4T33T2.js.map

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

@@ -1,6 +1,6 @@
 import {
   SynNavItem
-} from "./chunk.FKVCNOHV.js";
+} from "./chunk.OF4BZKDQ.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.W4UYS7NY.js.map

package/dist/chunks/{chunk.BJUQE5YL.js → chunk.WAFGHUVD.js}

@@ -1,6 +1,6 @@
 import {
   SynTabPanel
-} from "./chunk.6A2AHHWZ.js";
+} from "./chunk.DQIPVU4J.js";
 
 // src/components/tab-panel/tab-panel.ts
 var tab_panel_default = SynTabPanel;
@@ -9,4 +9,4 @@ SynTabPanel.define("syn-tab-panel");
 export {
   tab_panel_default
 };
-//# sourceMappingURL=chunk.BJUQE5YL.js.map
+//# sourceMappingURL=chunk.WAFGHUVD.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.NTBDBGG7.js → chunk.WDW65L3W.js}

@@ -1,6 +1,6 @@
 import {
   SynRadioGroup
-} from "./chunk.CMCJB5AA.js";
+} from "./chunk.IR3P3QGG.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.WDW65L3W.js.map

package/dist/chunks/{chunk.MJA5HEFN.js → chunk.WVO75K4L.js}

@@ -15,7 +15,7 @@ import {
 } from "./chunk.2NT3B5WJ.js";
 import {
   SynergyElement
-} from "./chunk.V4GFOKBI.js";
+} from "./chunk.FUWJV6FF.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -120,4 +120,4 @@ __decorateClass([
 export {
   SynBreadcrumbItem
 };
-//# sourceMappingURL=chunk.MJA5HEFN.js.map
+//# sourceMappingURL=chunk.WVO75K4L.js.map

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

@@ -1,6 +1,6 @@
 import {
   SynAlert
-} from "./chunk.6L4RCUNM.js";
+} from "./chunk.N2YN3NX6.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.XHZZLHOD.js.map

package/dist/chunks/{chunk.3DCW4HDA.js → chunk.XJSWRSR5.js}

@@ -1,6 +1,6 @@
 import {
   SynTooltip
-} from "./chunk.KT6MHQM6.js";
+} from "./chunk.MTRKCZX4.js";
 
 // src/components/tooltip/tooltip.ts
 var tooltip_default = SynTooltip;
@@ -9,4 +9,4 @@ SynTooltip.define("syn-tooltip");
 export {
   tooltip_default
 };
-//# sourceMappingURL=chunk.3DCW4HDA.js.map
+//# sourceMappingURL=chunk.XJSWRSR5.js.map

package/dist/chunks/{chunk.KUTXV7RO.js → chunk.YFDRVJUV.js}

@@ -12,7 +12,7 @@ import {
 } from "./chunk.2NT3B5WJ.js";
 import {
   SynergyElement
-} from "./chunk.V4GFOKBI.js";
+} from "./chunk.FUWJV6FF.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -60,4 +60,4 @@ __decorateClass([
 export {
   SynCard
 };
-//# sourceMappingURL=chunk.KUTXV7RO.js.map
+//# sourceMappingURL=chunk.YFDRVJUV.js.map

package/dist/chunks/{chunk.XUAUB2UI.js → chunk.YFETCWLT.js}

@@ -1,9 +1,9 @@
-import {
-  spinner_custom_styles_default
-} from "./chunk.WQMTAEYE.js";
 import {
   spinner_styles_default
 } from "./chunk.7V7XEBE2.js";
+import {
+  spinner_custom_styles_default
+} from "./chunk.WQMTAEYE.js";
 import {
   LocalizeController
 } from "./chunk.QLETXF4A.js";
@@ -12,7 +12,7 @@ import {
 } from "./chunk.2NT3B5WJ.js";
 import {
   SynergyElement
-} from "./chunk.V4GFOKBI.js";
+} from "./chunk.FUWJV6FF.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.XUAUB2UI.js.map
+//# sourceMappingURL=chunk.YFETCWLT.js.map

package/dist/chunks/{chunk.UE2OCWAE.js → chunk.ZBHF3VT7.js}

@@ -1,6 +1,6 @@
 import {
   SynDropdown
-} from "./chunk.5RI2MXEU.js";
+} from "./chunk.SEGXW66J.js";
 
 // src/components/dropdown/dropdown.ts
 var dropdown_default = SynDropdown;
@@ -9,4 +9,4 @@ SynDropdown.define("syn-dropdown");
 export {
   dropdown_default
 };
-//# sourceMappingURL=chunk.UE2OCWAE.js.map
+//# sourceMappingURL=chunk.ZBHF3VT7.js.map

package/dist/chunks/{chunk.TDWLNFH4.js → chunk.ZCUQMK2T.js}

@@ -1,6 +1,6 @@
 import {
   SynRangeTick
-} from "./chunk.GZVYO3UJ.js";
+} from "./chunk.DHCEQX56.js";
 
 // src/components/range-tick/range-tick.ts
 var range_tick_default = SynRangeTick;
@@ -9,4 +9,4 @@ SynRangeTick.define("syn-range-tick");
 export {
   range_tick_default
 };
-//# sourceMappingURL=chunk.TDWLNFH4.js.map
+//# sourceMappingURL=chunk.ZCUQMK2T.js.map

package/dist/chunks/{chunk.EAEQ3AGO.js → chunk.ZEBIZ2UZ.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.CHFWLQN5.js";
 import {
   enableDefaultSettings
-} from "./chunk.YACUYJZN.js";
+} from "./chunk.4BEGBAQD.js";
 import {
   watch
 } from "./chunk.SMIMHADA.js";
@@ -15,7 +15,7 @@ import {
 } from "./chunk.2NT3B5WJ.js";
 import {
   SynergyElement
-} from "./chunk.V4GFOKBI.js";
+} from "./chunk.FUWJV6FF.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -138,4 +138,4 @@ SynRadioButton = __decorateClass([
 export {
   SynRadioButton
 };
-//# sourceMappingURL=chunk.EAEQ3AGO.js.map
+//# sourceMappingURL=chunk.ZEBIZ2UZ.js.map

package/dist/chunks/{chunk.MZJLG4BF.js → chunk.ZKCT75DI.js}

@@ -12,7 +12,7 @@ import {
 } from "./chunk.2NT3B5WJ.js";
 import {
   SynergyElement
-} from "./chunk.V4GFOKBI.js";
+} from "./chunk.FUWJV6FF.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -76,4 +76,4 @@ __decorateClass([
 export {
   SynProgressRing
 };
-//# sourceMappingURL=chunk.MZJLG4BF.js.map
+//# sourceMappingURL=chunk.ZKCT75DI.js.map

package/dist/chunks/{chunk.WEOHOC3C.js → chunk.ZNEQLWGZ.js}

@@ -1,6 +1,6 @@
 import {
   SynergyElement
-} from "./chunk.V4GFOKBI.js";
+} from "./chunk.FUWJV6FF.js";
 
 // src/components/validate/utility.ts
 var WhitelistedSynergyFormEventNames = [
@@ -34,6 +34,39 @@ var alertSizeForInput = (element) => {
   const hasSize = size !== void 0 && size !== null;
   return hasSize ? size : void 0;
 };
+var ELEMENT_SELECTORS = {
+  "syn-checkbox": "input",
+  "syn-combobox": ".combobox__value-input",
+  "syn-file": "input",
+  "syn-input": "input",
+  "syn-radio-group": "input",
+  // Range could also use the first thumb, but unfortunately this collides with the already present tooltip
+  "syn-range": ".input__control",
+  "syn-select": ".select__value-input",
+  "syn-switch": "input",
+  "syn-textarea": ".textarea__control"
+};
+var queryInputInShadowRoot = (element, selector) => {
+  var _a, _b;
+  return (_b = (_a = element.shadowRoot) == null ? void 0 : _a.querySelector(selector)) != null ? _b : null;
+};
+var getActualInputElement = (element) => {
+  if (!element) {
+    return void 0;
+  }
+  if (!element.shadowRoot) {
+    return element;
+  }
+  const tagName = element.tagName.toLowerCase();
+  const selector = ELEMENT_SELECTORS[tagName];
+  if (selector) {
+    const actualInput = queryInputInShadowRoot(element, selector);
+    if (actualInput) return actualInput;
+  }
+  const fallbackInput = queryInputInShadowRoot(element, "input,select,textarea");
+  if (fallbackInput) return fallbackInput;
+  return element;
+};
 
 export {
   isBlurEvent,
@@ -42,6 +75,7 @@ export {
   isSynergyElement,
   normalizeEventAttribute,
   getEventNameForElement,
-  alertSizeForInput
+  alertSizeForInput,
+  getActualInputElement
 };
-//# sourceMappingURL=chunk.WEOHOC3C.js.map
+//# sourceMappingURL=chunk.ZNEQLWGZ.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/validate/utility.ts"],
+  "sourcesContent": ["import SynergyElement from '../../internal/synergy-element.js';\nimport type SynInput from '../input/input.component.js';\n\n/**\n * An actual element can be any HTMLElement (including SynergyElement subclasses) or undefined if no element is provided.\n */\ntype ActualElement = HTMLElement | undefined;\n\n/**\n * @var WhitelistedSynergyFormEventNames A list of all the event names that should be transformed\n * This is needed to allow the automatic transformation of events to synergy events,\n * but only for those synergy needs (e.g. we do not want to transform click to syn-click).\n */\nconst WhitelistedSynergyFormEventNames = [\n  'blur',\n  'change',\n  'clear',\n  'focus',\n  'invalid',\n  'input',\n  'move',\n];\n\n/**\n * Low level interface to check for event type\n * @param eventName The event name to check\n * @param type The type to check\n * @returns True if the event name is of the provided type, false otherwise\n */\nconst isEventOfType = (eventName: string, type: string) => eventName.includes(type);\n\n/**\n * Check if the provided event name is a blur event\n * @param eventName The event name to check\n */\nexport const isBlurEvent = (eventName: string) => isEventOfType(eventName, 'blur');\n\n/**\n * Check if the provided event name is a change event\n * @param eventName The event name to check\n */\nexport const isChangeEvent = (eventName: string) => isEventOfType(eventName, 'change');\n\n/**\n * Check if the provided event is an invalid event\n * @param eventName The event name to check\n */\nexport const isInvalidEvent = (eventName: string) => isEventOfType(eventName, 'invalid');\n\n/**\n * Check if the provided element is a synergy element\n * @param element The element to check for\n * @returns True if the element is a synergy element, false otherwise\n */\nexport const isSynergyElement = (element?: HTMLElement) => element instanceof SynergyElement;\n\n/**\n * Get a list of event names from the provided attribute string\n * @param events The events string\n * @returns an array of events\n */\nexport const normalizeEventAttribute = (events: string = '') => events\n  .split(' ')\n  .map(s => s.trim())\n  .filter(Boolean);\n\n/**\n * Get the event name for the provided element\n * @param element The element to get the event name for\n * @param eventName The event name to get\n */\nexport const getEventNameForElement = (element: HTMLElement, eventName: string) => {\n  const sanitizedEventName = eventName.trim();\n  const elementIsSynergyElement = isSynergyElement(element);\n\n  if (!elementIsSynergyElement) {\n    return sanitizedEventName;\n  }\n\n  return WhitelistedSynergyFormEventNames.includes(sanitizedEventName)\n    ? `syn-${sanitizedEventName}`\n    : sanitizedEventName;\n};\n\n/**\n * Check the size that the alert should use based on the provided element\n * @param element The html element to check for\n * @returns The size that the alert should use\n */\nexport const alertSizeForInput = (element?: HTMLElement) => {\n  // Don\u00B4t set alert size if we are not dealing with a synergy element\n  if (!isSynergyElement(element)) {\n    return undefined;\n  }\n\n  const { size } = element as SynInput;\n  const hasSize = size !== undefined && size !== null;\n  return hasSize ? size : undefined;\n};\n\n/**\n * Mapping of Synergy element tag names to their internal input selectors\n */\nconst ELEMENT_SELECTORS = {\n  'syn-checkbox': 'input',\n  'syn-combobox': '.combobox__value-input',\n  'syn-file': 'input',\n  'syn-input': 'input',\n  'syn-radio-group': 'input',\n\n  // Range could also use the first thumb, but unfortunately this collides with the already present tooltip\n  'syn-range': '.input__control',\n\n  'syn-select': '.select__value-input',\n  'syn-switch': 'input',\n  'syn-textarea': '.textarea__control',\n} as const;\n\n/**\n * Helper function to query an element's shadow DOM for an input\n */\nconst queryInputInShadowRoot = (\n  element: HTMLElement,\n  selector: string,\n): HTMLInputElement | null => element\n  .shadowRoot\n  ?.querySelector<HTMLInputElement>(selector) ?? null;\n\n/**\n * Retrieve the actual input element from the provided element, if it exists.\n * @param element The element to get the actual input for\n * @returns The html input element\n */\nexport const getActualInputElement = (element: ActualElement): ActualElement => {\n  // If there is no input, skip before doing any harm\n  if (!element) {\n    return undefined;\n  }\n\n  // If the element doesn't have a shadow root, return it directly\n  if (!element.shadowRoot) {\n    return element;\n  }\n\n  const tagName = element.tagName.toLowerCase() as keyof typeof ELEMENT_SELECTORS;\n\n  // Check if it's a known Synergy element\n  const selector = ELEMENT_SELECTORS[tagName];\n  if (selector) {\n    const actualInput = queryInputInShadowRoot(element, selector);\n    if (actualInput) return actualInput;\n  }\n\n  // Fallback: try common input selectors in shadow DOM\n  const fallbackInput = queryInputInShadowRoot(element, 'input,select,textarea');\n  if (fallbackInput) return fallbackInput;\n\n  // For elements without shadow DOM or no inputs found, return the element itself\n  return element;\n};\n"],
+  "mappings": ";;;;;AAaA,IAAM,mCAAmC;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAQA,IAAM,gBAAgB,CAAC,WAAmB,SAAiB,UAAU,SAAS,IAAI;AAM3E,IAAM,cAAc,CAAC,cAAsB,cAAc,WAAW,MAAM;AAM1E,IAAM,gBAAgB,CAAC,cAAsB,cAAc,WAAW,QAAQ;AAM9E,IAAM,iBAAiB,CAAC,cAAsB,cAAc,WAAW,SAAS;AAOhF,IAAM,mBAAmB,CAAC,YAA0B,mBAAmB;AAOvE,IAAM,0BAA0B,CAAC,SAAiB,OAAO,OAC7D,MAAM,GAAG,EACT,IAAI,OAAK,EAAE,KAAK,CAAC,EACjB,OAAO,OAAO;AAOV,IAAM,yBAAyB,CAAC,SAAsB,cAAsB;AACjF,QAAM,qBAAqB,UAAU,KAAK;AAC1C,QAAM,0BAA0B,iBAAiB,OAAO;AAExD,MAAI,CAAC,yBAAyB;AAC5B,WAAO;AAAA,EACT;AAEA,SAAO,iCAAiC,SAAS,kBAAkB,IAC/D,OAAO,kBAAkB,KACzB;AACN;AAOO,IAAM,oBAAoB,CAAC,YAA0B;AAE1D,MAAI,CAAC,iBAAiB,OAAO,GAAG;AAC9B,WAAO;AAAA,EACT;AAEA,QAAM,EAAE,KAAK,IAAI;AACjB,QAAM,UAAU,SAAS,UAAa,SAAS;AAC/C,SAAO,UAAU,OAAO;AAC1B;AAKA,IAAM,oBAAoB;AAAA,EACxB,gBAAgB;AAAA,EAChB,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,mBAAmB;AAAA;AAAA,EAGnB,aAAa;AAAA,EAEb,cAAc;AAAA,EACd,cAAc;AAAA,EACd,gBAAgB;AAClB;AAKA,IAAM,yBAAyB,CAC7B,SACA,aACyB;AA5H3B;AA4H8B,6BAC3B,eAD2B,mBAE1B,cAAgC,cAFN,YAEmB;AAAA;AAO1C,IAAM,wBAAwB,CAAC,YAA0C;AAE9E,MAAI,CAAC,SAAS;AACZ,WAAO;AAAA,EACT;AAGA,MAAI,CAAC,QAAQ,YAAY;AACvB,WAAO;AAAA,EACT;AAEA,QAAM,UAAU,QAAQ,QAAQ,YAAY;AAG5C,QAAM,WAAW,kBAAkB,OAAO;AAC1C,MAAI,UAAU;AACZ,UAAM,cAAc,uBAAuB,SAAS,QAAQ;AAC5D,QAAI,YAAa,QAAO;AAAA,EAC1B;AAGA,QAAM,gBAAgB,uBAAuB,SAAS,uBAAuB;AAC7E,MAAI,cAAe,QAAO;AAG1B,SAAO;AACT;",
+  "names": []
+}

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

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

package/dist/chunks/{chunk.EX4R7WUE.js → chunk.ZZAW2A7F.js}

@@ -15,7 +15,7 @@ import {
 } from "./chunk.CHFWLQN5.js";
 import {
   enableDefaultSettings
-} from "./chunk.YACUYJZN.js";
+} from "./chunk.4BEGBAQD.js";
 import {
   watch
 } from "./chunk.SMIMHADA.js";
@@ -24,7 +24,7 @@ import {
 } from "./chunk.2NT3B5WJ.js";
 import {
   SynergyElement
-} from "./chunk.V4GFOKBI.js";
+} from "./chunk.FUWJV6FF.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -264,4 +264,4 @@ SynSwitch = __decorateClass([
 export {
   SynSwitch
 };
-//# sourceMappingURL=chunk.EX4R7WUE.js.map
+//# sourceMappingURL=chunk.ZZAW2A7F.js.map

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

@@ -1,15 +1,15 @@
 import {
   SynAccordion
-} from "../../chunks/chunk.JHJFFBNL.js";
+} from "../../chunks/chunk.U6SWVYGR.js";
 import "../../chunks/chunk.WNUZ6LH4.js";
-import "../../chunks/chunk.YACUYJZN.js";
-import "../../chunks/chunk.RY3ZM7MQ.js";
-import "../../chunks/chunk.VL3GX6WV.js";
+import "../../chunks/chunk.4BEGBAQD.js";
+import "../../chunks/chunk.FQ6KKYNN.js";
 import "../../chunks/chunk.VMLERD3J.js";
+import "../../chunks/chunk.VL3GX6WV.js";
 import "../../chunks/chunk.QDG5AJZX.js";
 import "../../chunks/chunk.SMIMHADA.js";
 import "../../chunks/chunk.2NT3B5WJ.js";
-import "../../chunks/chunk.V4GFOKBI.js";
+import "../../chunks/chunk.FUWJV6FF.js";
 import "../../chunks/chunk.MO2GTRUM.js";
 export {
   SynAccordion as default

package/dist/components/accordion/accordion.js

@@ -1,16 +1,16 @@
 import {
   accordion_default
-} from "../../chunks/chunk.ZJ6JMFVP.js";
-import "../../chunks/chunk.JHJFFBNL.js";
+} from "../../chunks/chunk.T7XTHFR7.js";
+import "../../chunks/chunk.U6SWVYGR.js";
 import "../../chunks/chunk.WNUZ6LH4.js";
-import "../../chunks/chunk.YACUYJZN.js";
-import "../../chunks/chunk.RY3ZM7MQ.js";
-import "../../chunks/chunk.VL3GX6WV.js";
+import "../../chunks/chunk.4BEGBAQD.js";
+import "../../chunks/chunk.FQ6KKYNN.js";
 import "../../chunks/chunk.VMLERD3J.js";
+import "../../chunks/chunk.VL3GX6WV.js";
 import "../../chunks/chunk.QDG5AJZX.js";
 import "../../chunks/chunk.SMIMHADA.js";
 import "../../chunks/chunk.2NT3B5WJ.js";
-import "../../chunks/chunk.V4GFOKBI.js";
+import "../../chunks/chunk.FUWJV6FF.js";
 import "../../chunks/chunk.MO2GTRUM.js";
 export {
   accordion_default as default

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

@@ -1,35 +1,34 @@
 import {
   SynAlert
-} from "../../chunks/chunk.6L4RCUNM.js";
+} from "../../chunks/chunk.N2YN3NX6.js";
 import "../../chunks/chunk.WXVOTRW5.js";
-import "../../chunks/chunk.FKDUVEOP.js";
+import "../../chunks/chunk.LGSQ6DML.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.TBZAI6T6.js";
+import "../../chunks/chunk.6GMIINJO.js";
 import "../../chunks/chunk.PJO6TM3T.js";
 import "../../chunks/chunk.4XZTYPIY.js";
-import "../../chunks/chunk.2BATB6NO.js";
+import "../../chunks/chunk.NMWM3BP7.js";
+import "../../chunks/chunk.RODNHT5C.js";
 import "../../chunks/chunk.3RR4RIR7.js";
 import "../../chunks/chunk.66HKI7Q7.js";
 import "../../chunks/chunk.VBS3JEIP.js";
-import "../../chunks/chunk.RODNHT5C.js";
 import "../../chunks/chunk.QLETXF4A.js";
 import "../../chunks/chunk.BHJVE26D.js";
 import "../../chunks/chunk.PLV4PZYX.js";
-import "../../chunks/chunk.YACUYJZN.js";
-import "../../chunks/chunk.RY3ZM7MQ.js";
-import "../../chunks/chunk.VL3GX6WV.js";
+import "../../chunks/chunk.4BEGBAQD.js";
+import "../../chunks/chunk.FQ6KKYNN.js";
 import "../../chunks/chunk.VMLERD3J.js";
+import "../../chunks/chunk.VL3GX6WV.js";
 import "../../chunks/chunk.QDG5AJZX.js";
 import "../../chunks/chunk.SMIMHADA.js";
 import "../../chunks/chunk.2NT3B5WJ.js";
-import "../../chunks/chunk.V4GFOKBI.js";
-import "../../chunks/chunk.TSWB7UFK.js";
-import "../../chunks/chunk.CCY6IYFD.js";
+import "../../chunks/chunk.FUWJV6FF.js";
+import "../../chunks/chunk.UA5B6CPN.js";
 import "../../chunks/chunk.MO2GTRUM.js";
 export {
   SynAlert as default