@synergy-design-system/components 2.73.0 → 2.74.0

package/dist/chunks/{chunk.KYGDIQ5N.js → chunk.2FWS5M22.js}

@@ -1,6 +1,6 @@
 import {
   SynInput
-} from "./chunk.IXLV4ZB3.js";
+} from "./chunk.FGBZY4DD.js";
 
 // src/components/input/input.ts
 var input_default = SynInput;
@@ -9,4 +9,4 @@ SynInput.define("syn-input");
 export {
   input_default
 };
-//# sourceMappingURL=chunk.KYGDIQ5N.js.map
+//# sourceMappingURL=chunk.2FWS5M22.js.map

package/dist/chunks/{chunk.JN4NHGHU.js → chunk.2OJY3PED.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.S22BO5SF.js";
 import {
   SynIcon
-} from "./chunk.Q4YWD2X6.js";
+} from "./chunk.H73IAJJE.js";
 import {
   LocalizeController
 } from "./chunk.OAQRCZOO.js";
@@ -15,7 +15,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.FJREQCBR.js";
+} from "./chunk.EXWGH7UL.js";
 import {
   __decorateClass
 } from "./chunk.Z4XV3SMG.js";
@@ -91,4 +91,4 @@ __decorateClass([
 export {
   SynBreadcrumb
 };
-//# sourceMappingURL=chunk.JN4NHGHU.js.map
+//# sourceMappingURL=chunk.2OJY3PED.js.map

package/dist/chunks/{chunk.FLJJUPTJ.js → chunk.2XUEBC52.js}

@@ -19,7 +19,7 @@ import {
 } from "./chunk.WVVQK5TE.js";
 import {
   enableDefaultSettings
-} from "./chunk.E5UUNP6E.js";
+} from "./chunk.HYFCK7MM.js";
 import {
   watch
 } from "./chunk.BVZQ6QSY.js";
@@ -28,7 +28,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.FJREQCBR.js";
+} from "./chunk.EXWGH7UL.js";
 import {
   __decorateClass
 } from "./chunk.Z4XV3SMG.js";
@@ -383,4 +383,4 @@ SynTextarea = __decorateClass([
 export {
   SynTextarea
 };
-//# sourceMappingURL=chunk.FLJJUPTJ.js.map
+//# sourceMappingURL=chunk.2XUEBC52.js.map

package/dist/chunks/{chunk.6OZQYFEA.js → chunk.3VPFP2NO.js}

@@ -12,7 +12,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.FJREQCBR.js";
+} from "./chunk.EXWGH7UL.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.6OZQYFEA.js.map
+//# sourceMappingURL=chunk.3VPFP2NO.js.map

package/dist/chunks/{chunk.J26JMFV5.js → chunk.4326CVFG.js}

@@ -1,6 +1,6 @@
 import {
   SynIconButton
-} from "./chunk.FNE4UZQR.js";
+} from "./chunk.63R7LKO6.js";
 
 // src/components/icon-button/icon-button.ts
 var icon_button_default = SynIconButton;
@@ -9,4 +9,4 @@ SynIconButton.define("syn-icon-button");
 export {
   icon_button_default
 };
-//# sourceMappingURL=chunk.J26JMFV5.js.map
+//# sourceMappingURL=chunk.4326CVFG.js.map

package/dist/chunks/{chunk.4FM4ISDS.js → chunk.4FOXZRHO.js}

@@ -6,13 +6,13 @@ import {
 } from "./chunk.RAOPZXJL.js";
 import {
   SynDivider
-} from "./chunk.L6SPUHJC.js";
+} from "./chunk.4XFY2FBP.js";
 import {
   component_styles_default
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.FJREQCBR.js";
+} from "./chunk.EXWGH7UL.js";
 
 // src/components/menu-label/menu-label.component.ts
 import { html } from "lit";
@@ -34,4 +34,4 @@ SynMenuLabel.dependencies = {
 export {
   SynMenuLabel
 };
-//# sourceMappingURL=chunk.4FM4ISDS.js.map
+//# sourceMappingURL=chunk.4FOXZRHO.js.map

package/dist/chunks/{chunk.MX72UPWV.js → chunk.4GYLPSAW.js}

@@ -8,14 +8,23 @@ var alert_custom_styles_default = css`
     --variant-color-icon: var(--syn-alert-informative-color-icon, var(--syn-color-primary-600));
     --variant-color-indicator: var(--syn-alert-informative-color-indicator, var(--syn-color-primary-600));
 
+    /* Defines special settings for sizes */
+    --size-font-size: var(--syn-font-size-medium);
+    --size-icon-size: var(--syn-font-size-x-large);
+    --size-min-height: 54px;
+    --size-message-padding: var(--syn-spacing-medium) var(--syn-spacing-large) var(--syn-spacing-medium) var(--syn-spacing-medium);
+    --size-icon-padding-block: var(--syn-spacing-medium);
+    --size-icon-padding-inline: var(--syn-spacing-medium);
+
     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);
-    font-size: var(--syn-font-size-medium);
+    font-size: var(--size-font-size);
     line-height: var(--syn-line-height-normal);
-    min-height: 56px;
+    min-height: var(--size-min-height);
   }
 
   /**
@@ -43,11 +52,12 @@ var alert_custom_styles_default = css`
   .alert__icon,
   .alert__close-button {
     align-items: flex-start;
-    font-size: var(--syn-font-size-x-large);
+    font-size: var(--size-icon-size);
   }
 
   .alert__message {
-    padding: var(--syn-spacing-medium) var(--syn-spacing-large) var(--syn-spacing-medium) var(--syn-spacing-medium);
+    align-self: center;
+    padding: var(--size-message-padding);
   }
 
   /**
@@ -55,15 +65,14 @@ var alert_custom_styles_default = css`
    */
   .alert__icon {
     color: var(--variant-color-icon);
-    padding-block: var(--syn-spacing-medium);
-    padding-inline-start: var(--syn-spacing-medium);
+    padding-block-start: var(--size-icon-padding-block);
+    padding-inline-start: var(--size-icon-padding-inline);
   }
 
   /**
    * Close Icon
    */
   .alert__close-button {
-    align-self: start;
     color: var(--syn-typography-color-text);
     margin-block: calc(var(--syn-spacing-x-small) - var(--syn-panel-border-width));
     margin-inline-end: var(--syn-spacing-x-small);
@@ -99,9 +108,33 @@ var alert_custom_styles_default = css`
     --variant-color-icon: var(--syn-alert-error-color-icon, var(--syn-color-error-600));
     --variant-color-indicator: var(--syn-alert-error-color-indicator, var(--syn-color-error-600));
   }
+
+  /* #1119: Alert Sizes */
+  .alert--small {
+    --size-font-size: var(--syn-font-size-small);
+    --size-icon-size: var(--syn-font-size-large);
+    --size-min-height: 44px;
+    --size-message-padding: var(--syn-spacing-small) var(--syn-spacing-large) var(--syn-spacing-small) var(--syn-spacing-small);
+    --size-icon-padding-block: var(--syn-spacing-small);
+    --size-icon-padding-inline: var(--syn-spacing-small);
+  }
+
+  /* Adjust close button size for small alerts */
+  .alert--small .alert__close-button {
+    font-size: var(--syn-font-size-medium);
+  }
+
+  .alert--large {
+    --size-font-size: var(--syn-font-size-large);
+    --size-icon-size: var(--syn-font-size-2x-large);
+    --size-min-height: 68px;
+    --size-message-padding: var(--syn-spacing-medium-large) var(--syn-spacing-large) var(--syn-spacing-medium-large) var(--syn-spacing-medium-large);
+    --size-icon-padding-block: var(--syn-spacing-medium-large);
+    --size-icon-padding-inline: var(--syn-spacing-medium-large);
+  }
 `;
 
 export {
   alert_custom_styles_default
 };
-//# sourceMappingURL=chunk.MX72UPWV.js.map
+//# sourceMappingURL=chunk.4GYLPSAW.js.map

package/dist/chunks/chunk.4GYLPSAW.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/alert/alert.custom.styles.ts"],
+  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  .alert {\n    /* Defines the used border and icon color for variants */\n    --variant-color-border: var(--syn-alert-informative-color-border, var(--syn-panel-border-color));\n    --variant-color-background: var(--syn-alert-informative-color-background, var(--syn-panel-background-color));\n    --variant-color-icon: var(--syn-alert-informative-color-icon, var(--syn-color-primary-600));\n    --variant-color-indicator: var(--syn-alert-informative-color-indicator, var(--syn-color-primary-600));\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    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    font-size: var(--size-font-size);\n    line-height: var(--syn-line-height-normal);\n    min-height: var(--size-min-height);\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  /**\n   * Make sure everything is aligned to top\n   */\n  .alert__icon,\n  .alert__close-button {\n    align-items: flex-start;\n    font-size: var(--size-icon-size);\n  }\n\n  .alert__message {\n    align-self: center;\n    padding: var(--size-message-padding);\n  }\n\n  /**\n   * Alert Icon\n   */\n  .alert__icon {\n    color: var(--variant-color-icon);\n    padding-block-start: var(--size-icon-padding-block);\n    padding-inline-start: var(--size-icon-padding-inline);\n  }\n\n  /**\n   * Close Icon\n   */\n  .alert__close-button {\n    color: var(--syn-typography-color-text);\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  /**\n   * Variant colors\n   */\n  .alert--success {\n    --variant-color-border: var(--syn-alert-success-color-border, var(--syn-panel-border-color));\n    --variant-color-background: var(--syn-alert-success-color-background, var(--syn-panel-background-color));\n    --variant-color-icon: var(--syn-alert-success-color-icon, var(--syn-color-success-500));\n    --variant-color-indicator: var(--syn-alert-success-color-indicator, var(--syn-color-success-500));\n  }\n\n  .alert--neutral {\n    --variant-color-border: var(--syn-alert-neutral-color-border, var(--syn-panel-border-color));\n    --variant-color-background: var(--syn-alert-neutral-color-background, var(--syn-panel-background-color));\n    --variant-color-icon: var(--syn-alert-neutral-color-icon, var(--syn-color-neutral-800));\n    --variant-color-indicator: var(--syn-alert-neutral-color-indicator, var(--syn-color-neutral-800));\n  }\n\n  .alert--warning {\n    --variant-color-border: var(--syn-alert-warning-color-border, var(--syn-panel-border-color));\n    --variant-color-background: var(--syn-alert-warning-color-background, var(--syn-panel-background-color));\n    --variant-color-icon: var(--syn-alert-warning-color-icon, var(--syn-color-warning-400));\n    --variant-color-indicator: var(--syn-alert-warning-color-indicator, var(--syn-color-warning-400));\n  }\n\n  .alert--danger {\n    --variant-color-border: var(--syn-alert-error-color-border, var(--syn-panel-border-color));\n    --variant-color-background: var(--syn-alert-error-color-background, var(--syn-panel-background-color));\n    --variant-color-icon: var(--syn-alert-error-color-icon, var(--syn-color-error-600));\n    --variant-color-indicator: var(--syn-alert-error-color-indicator, var(--syn-color-error-600));\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"],
+  "mappings": ";AAAA,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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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.NMRMJK7Y.js → chunk.4L5ZZTW6.js}

@@ -1,9 +1,9 @@
 import {
   SynOption
-} from "./chunk.6V7WE424.js";
+} from "./chunk.EO26ATDV.js";
 import {
   SynPopup
-} from "./chunk.ZCB6UEMT.js";
+} from "./chunk.56USGF2W.js";
 import {
   defaultOptionRenderer
 } from "./chunk.HVVPX2VA.js";
@@ -51,13 +51,13 @@ import {
 } from "./chunk.WVVQK5TE.js";
 import {
   SynIcon
-} from "./chunk.Q4YWD2X6.js";
+} from "./chunk.H73IAJJE.js";
 import {
   LocalizeController
 } from "./chunk.OAQRCZOO.js";
 import {
   enableDefaultSettings
-} from "./chunk.E5UUNP6E.js";
+} from "./chunk.HYFCK7MM.js";
 import {
   watch
 } from "./chunk.BVZQ6QSY.js";
@@ -66,7 +66,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.FJREQCBR.js";
+} from "./chunk.EXWGH7UL.js";
 import {
   __decorateClass
 } from "./chunk.Z4XV3SMG.js";
@@ -935,4 +935,4 @@ setDefaultAnimation("combobox.hide", {
 export {
   SynCombobox
 };
-//# sourceMappingURL=chunk.NMRMJK7Y.js.map
+//# sourceMappingURL=chunk.4L5ZZTW6.js.map

package/dist/chunks/{chunk.EB3LQEID.js → chunk.4OGUNXLN.js}

@@ -1,6 +1,6 @@
 import {
   SynBreadcrumb
-} from "./chunk.JN4NHGHU.js";
+} from "./chunk.2OJY3PED.js";
 
 // src/components/breadcrumb/breadcrumb.ts
 var breadcrumb_default = SynBreadcrumb;
@@ -9,4 +9,4 @@ SynBreadcrumb.define("syn-breadcrumb");
 export {
   breadcrumb_default
 };
-//# sourceMappingURL=chunk.EB3LQEID.js.map
+//# sourceMappingURL=chunk.4OGUNXLN.js.map

package/dist/chunks/{chunk.L6SPUHJC.js → chunk.4XFY2FBP.js}

@@ -12,7 +12,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.FJREQCBR.js";
+} from "./chunk.EXWGH7UL.js";
 import {
   __decorateClass
 } from "./chunk.Z4XV3SMG.js";
@@ -43,4 +43,4 @@ __decorateClass([
 export {
   SynDivider
 };
-//# sourceMappingURL=chunk.L6SPUHJC.js.map
+//# sourceMappingURL=chunk.4XFY2FBP.js.map

package/dist/chunks/{chunk.TS4WDODQ.js → chunk.534GA3OZ.js}

@@ -1,6 +1,6 @@
 import {
   SynBadge
-} from "./chunk.5MF3YX5J.js";
+} from "./chunk.I3MOJ5CM.js";
 
 // src/components/badge/badge.ts
 var badge_default = SynBadge;
@@ -9,4 +9,4 @@ SynBadge.define("syn-badge");
 export {
   badge_default
 };
-//# sourceMappingURL=chunk.TS4WDODQ.js.map
+//# sourceMappingURL=chunk.534GA3OZ.js.map

package/dist/chunks/{chunk.ZCB6UEMT.js → chunk.56USGF2W.js}

@@ -12,7 +12,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.FJREQCBR.js";
+} from "./chunk.EXWGH7UL.js";
 import {
   __decorateClass,
   __spreadProps,
@@ -430,4 +430,4 @@ __decorateClass([
 export {
   SynPopup
 };
-//# sourceMappingURL=chunk.ZCB6UEMT.js.map
+//# sourceMappingURL=chunk.56USGF2W.js.map

package/dist/chunks/{chunk.FNE4UZQR.js → chunk.63R7LKO6.js}

@@ -6,16 +6,16 @@ import {
 } from "./chunk.E3Z62YYT.js";
 import {
   SynIcon
-} from "./chunk.Q4YWD2X6.js";
+} from "./chunk.H73IAJJE.js";
 import {
   enableDefaultSettings
-} from "./chunk.E5UUNP6E.js";
+} from "./chunk.HYFCK7MM.js";
 import {
   component_styles_default
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.FJREQCBR.js";
+} from "./chunk.EXWGH7UL.js";
 import {
   __decorateClass
 } from "./chunk.Z4XV3SMG.js";
@@ -144,4 +144,4 @@ SynIconButton = __decorateClass([
 export {
   SynIconButton
 };
-//# sourceMappingURL=chunk.FNE4UZQR.js.map
+//# sourceMappingURL=chunk.63R7LKO6.js.map

package/dist/chunks/{chunk.V7PSR7EP.js → chunk.6C5JNA5R.js}

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

package/dist/chunks/{chunk.CZQX6KFZ.js → chunk.6MN2NRXV.js}

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

package/dist/chunks/{chunk.IEA6FO3D.js → chunk.6RHP3VNO.js}

@@ -3,13 +3,13 @@ import {
 } from "./chunk.M74YQZ5G.js";
 import {
   SynDivider
-} from "./chunk.L6SPUHJC.js";
+} from "./chunk.4XFY2FBP.js";
 import {
   HasSlotController
 } from "./chunk.WVVQK5TE.js";
 import {
   SynIcon
-} from "./chunk.Q4YWD2X6.js";
+} from "./chunk.H73IAJJE.js";
 import {
   watch
 } from "./chunk.BVZQ6QSY.js";
@@ -18,7 +18,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.FJREQCBR.js";
+} from "./chunk.EXWGH7UL.js";
 import {
   __decorateClass
 } from "./chunk.Z4XV3SMG.js";
@@ -353,4 +353,4 @@ __decorateClass([
 export {
   SynNavItem
 };
-//# sourceMappingURL=chunk.IEA6FO3D.js.map
+//# sourceMappingURL=chunk.6RHP3VNO.js.map

package/dist/chunks/{chunk.6IMHOEF7.js → chunk.6VBZQIDO.js}

@@ -12,7 +12,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.FJREQCBR.js";
+} from "./chunk.EXWGH7UL.js";
 import {
   __decorateClass
 } from "./chunk.Z4XV3SMG.js";
@@ -76,4 +76,4 @@ __decorateClass([
 export {
   SynProgressRing
 };
-//# sourceMappingURL=chunk.6IMHOEF7.js.map
+//# sourceMappingURL=chunk.6VBZQIDO.js.map

package/dist/chunks/{chunk.GQ4IRFVL.js → chunk.7DOGSV7H.js}

@@ -1,6 +1,6 @@
 import {
   SynTooltip
-} from "./chunk.WSRQ5GP4.js";
+} from "./chunk.R55JK3BP.js";
 import {
   range_styles_default
 } from "./chunk.BXXVSZMC.js";
@@ -29,13 +29,13 @@ import {
 } from "./chunk.OAQRCZOO.js";
 import {
   enableDefaultSettings
-} from "./chunk.E5UUNP6E.js";
+} from "./chunk.HYFCK7MM.js";
 import {
   component_styles_default
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.FJREQCBR.js";
+} from "./chunk.EXWGH7UL.js";
 import {
   __decorateClass,
   __privateAdd,
@@ -716,4 +716,4 @@ SynRange = __decorateClass([
 export {
   SynRange
 };
-//# sourceMappingURL=chunk.GQ4IRFVL.js.map
+//# sourceMappingURL=chunk.7DOGSV7H.js.map

package/dist/chunks/{chunk.AHT6TPFK.js → chunk.7PDZD4MI.js}

@@ -1,6 +1,6 @@
 import {
   SynTabGroup
-} from "./chunk.ES2CV7ME.js";
+} from "./chunk.J4BNYHDN.js";
 
 // src/components/tab-group/tab-group.ts
 var tab_group_default = SynTabGroup;
@@ -9,4 +9,4 @@ SynTabGroup.define("syn-tab-group");
 export {
   tab_group_default
 };
-//# sourceMappingURL=chunk.AHT6TPFK.js.map
+//# sourceMappingURL=chunk.7PDZD4MI.js.map

package/dist/chunks/{chunk.CKZLY55F.js → chunk.AD2MXM4K.js}

@@ -1,18 +1,20 @@
 import {
+  alertSizeForInput,
   getEventNameForElement,
   isBlurEvent,
   isInvalidEvent,
+  isSynergyElement,
   normalizeEventAttribute
-} from "./chunk.47OCXPC2.js";
+} from "./chunk.LHPV5KQH.js";
 import {
   validate_styles_default
 } from "./chunk.MVM3NN6Y.js";
 import {
   SynAlert
-} from "./chunk.FCBPZVHF.js";
+} from "./chunk.ZM7CHOP2.js";
 import {
   enableDefaultSettings
-} from "./chunk.E5UUNP6E.js";
+} from "./chunk.HYFCK7MM.js";
 import {
   watch
 } from "./chunk.BVZQ6QSY.js";
@@ -21,7 +23,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.FJREQCBR.js";
+} from "./chunk.EXWGH7UL.js";
 import {
   __decorateClass
 } from "./chunk.Z4XV3SMG.js";
@@ -29,6 +31,7 @@ import {
 // src/components/validate/validate.component.ts
 import { html } from "lit";
 import { property, queryAssignedElements, state } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
 var SynValidate = class extends SynergyElement {
   constructor() {
     super(...arguments);
@@ -68,7 +71,7 @@ var SynValidate = class extends SynergyElement {
         e.stopPropagation();
       }
       const input = e.currentTarget;
-      if (input instanceof SynergyElement) {
+      if (isSynergyElement(input)) {
         await input.updateComplete;
       }
       this.isValid = (_a = input.validity) == null ? void 0 : _a.valid;
@@ -124,6 +127,9 @@ var SynValidate = class extends SynergyElement {
     const input = this.slottedChildren[0];
     return input ? input : void 0;
   }
+  setAlertSize() {
+    this.alertSize = alertSizeForInput(this.getInput());
+  }
   /**
    * Get the event names to listen for.
    * If the input is a synergy element, will use syn- prefixes.
@@ -205,7 +211,7 @@ var SynValidate = class extends SynergyElement {
     this.updateEvents();
     const input = this.getInput();
     if (this.customValidationMessage) {
-      if (input instanceof SynergyElement) {
+      if (isSynergyElement(input)) {
         await input.updateComplete;
       }
       input == null ? void 0 : input.setCustomValidity(this.customValidationMessage);
@@ -218,6 +224,23 @@ var SynValidate = class extends SynergyElement {
   }
   connectedCallback() {
     super.connectedCallback();
+    this.sizeObserver = new MutationObserver((entries) => {
+      const input = this.getInput();
+      if (!input) {
+        return;
+      }
+      const hasSizeChanged = entries.filter(({ target }) => target === input).every(
+        (entry) => entry.attributeName === "size"
+      );
+      if (hasSizeChanged) {
+        this.setAlertSize();
+      }
+    });
+    this.sizeObserver.observe(this, {
+      attributeFilter: ["size"],
+      attributes: true,
+      subtree: true
+    });
     this.observer = new MutationObserver((entries) => {
       const input = this.getInput();
       if (!input) {
@@ -231,7 +254,7 @@ var SynValidate = class extends SynergyElement {
         this.isValid = true;
         this.validationMessage = "";
       } else {
-        const waitForPromise = input instanceof SynergyElement ? input.updateComplete : Promise.resolve();
+        const waitForPromise = isSynergyElement(input) ? input.updateComplete : Promise.resolve();
         waitForPromise.then(() => {
           var _a, _b, _c;
           this.isValid = (_b = (_a = input == null ? void 0 : input.validity) == null ? void 0 : _a.valid) != null ? _b : false;
@@ -246,10 +269,11 @@ var SynValidate = class extends SynergyElement {
     });
   }
   disconnectedCallback() {
-    var _a;
+    var _a, _b;
     super.disconnectedCallback();
     this.controller.abort();
     (_a = this == null ? void 0 : this.observer) == null ? void 0 : _a.disconnect();
+    (_b = this == null ? void 0 : this.sizeObserver) == null ? void 0 : _b.disconnect();
   }
   renderInlineValidation() {
     if (this.variant !== "inline" || !this.validationMessage) {
@@ -260,6 +284,7 @@ var SynValidate = class extends SynergyElement {
         open
         exportparts="base:alert__base,message:alert__message,icon:alert__icon"
         part="alert"
+        size=${ifDefined(this.alertSize)}
         variant="danger"
       >
         ${!this.hideIcon ? html`<syn-icon slot="icon" name="status-error" library="system"></syn-icon>` : ""}
@@ -302,6 +327,9 @@ __decorateClass([
 __decorateClass([
   state()
 ], SynValidate.prototype, "isValid", 2);
+__decorateClass([
+  state()
+], SynValidate.prototype, "alertSize", 2);
 __decorateClass([
   property({ reflect: true })
 ], SynValidate.prototype, "variant", 2);
@@ -333,4 +361,4 @@ SynValidate = __decorateClass([
 export {
   SynValidate
 };
-//# sourceMappingURL=chunk.CKZLY55F.js.map
+//# sourceMappingURL=chunk.AD2MXM4K.js.map