@synergy-design-system/components 3.15.5 → 3.15.7

package/dist/chunks/{chunk.SSX2ELGG.js → chunk.LCHMHG73.js}

@@ -1,6 +1,6 @@
 import {
   SynAlert
-} from "./chunk.75ULNINA.js";
+} from "./chunk.QILYRFUM.js";
 
 // src/components/alert/alert.ts
 var alert_default = SynAlert;
@@ -9,4 +9,4 @@ SynAlert.define("syn-alert");
 export {
   alert_default
 };
-//# sourceMappingURL=chunk.SSX2ELGG.js.map
+//# sourceMappingURL=chunk.LCHMHG73.js.map

package/dist/chunks/{chunk.NRBGQ64L.js → chunk.LQ3BXOPQ.js}

@@ -1,6 +1,6 @@
 import {
   SynSelect
-} from "./chunk.RODPN45B.js";
+} from "./chunk.7CP6B6FC.js";
 
 // src/components/select/select.ts
 var select_default = SynSelect;
@@ -9,4 +9,4 @@ SynSelect.define("syn-select");
 export {
   select_default
 };
-//# sourceMappingURL=chunk.NRBGQ64L.js.map
+//# sourceMappingURL=chunk.LQ3BXOPQ.js.map

package/dist/chunks/{chunk.A4LA76RD.js → chunk.LYEKRY3I.js}

@@ -1,6 +1,6 @@
 import {
   SynTagGroup
-} from "./chunk.EYNAVYVE.js";
+} from "./chunk.HAOHYWIE.js";
 
 // src/components/tag-group/tag-group.ts
 var tag_group_default = SynTagGroup;
@@ -9,4 +9,4 @@ SynTagGroup.define("syn-tag-group");
 export {
   tag_group_default
 };
-//# sourceMappingURL=chunk.A4LA76RD.js.map
+//# sourceMappingURL=chunk.LYEKRY3I.js.map

package/dist/chunks/{chunk.JBNLMSEF.js → chunk.MI6736NB.js}

@@ -15,7 +15,7 @@ import {
 } from "./chunk.CHFWLQN5.js";
 import {
   enableDefaultSettings
-} from "./chunk.4MG3QDNW.js";
+} from "./chunk.4I2RJVH5.js";
 import {
   watch
 } from "./chunk.SMIMHADA.js";
@@ -24,7 +24,7 @@ import {
 } from "./chunk.2NT3B5WJ.js";
 import {
   SynergyElement
-} from "./chunk.QLMD2SFN.js";
+} from "./chunk.YAQJ7RVD.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -264,4 +264,4 @@ SynSwitch = __decorateClass([
 export {
   SynSwitch
 };
-//# sourceMappingURL=chunk.JBNLMSEF.js.map
+//# sourceMappingURL=chunk.MI6736NB.js.map

package/dist/chunks/{chunk.VDBD6G4Q.js → chunk.MQFQLLZE.js}

@@ -54,12 +54,10 @@ var dialog_styles_default = css`
   }
 
   .dialog__title {
+    align-items: center;
+    display: flex;
     flex: 1 1 auto;
-    font: inherit;
-    font-family: var(--syn-font-sans);
-    font-size: var(--syn-font-size-x-large);
-    font-weight: var(--syn-font-weight-bold);
-    line-height: var(--syn-line-height-normal);
+    font: var(--syn-heading-x-large);
     margin: 0;
     padding: var(--header-spacing);
   }
@@ -74,15 +72,6 @@ var dialog_styles_default = css`
     padding: var(--syn-spacing-large) var(--syn-spacing-small) var(--syn-spacing-large) 0;
   }
 
-  /**
-   * We need this to make sure we are big enough as defined in the layout
-   * When omitting this statement, we will get rounding problems via line-height
-   */
-  .dialog__title,
-  .dialog__header-actions {
-    min-height: 88px;
-  }
-
   .dialog__header-actions syn-icon-button,
   .dialog__header-actions ::slotted(syn-icon-button) {
     align-items: center;
@@ -132,4 +121,4 @@ var dialog_styles_default = css`
 export {
   dialog_styles_default
 };
-//# sourceMappingURL=chunk.VDBD6G4Q.js.map
+//# sourceMappingURL=chunk.MQFQLLZE.js.map

package/dist/chunks/{chunk.VDBD6G4Q.js.map → chunk.MQFQLLZE.js.map}

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/components/dialog/dialog.styles.ts"],
-  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  :host {\n    --width: 31rem;\n    --header-spacing: var(--syn-spacing-large) var(--syn-spacing-x-small) var(--syn-spacing-large) var(--syn-spacing-large);\n    --body-spacing: var(--syn-spacing-medium) var(--syn-spacing-large);\n    --footer-spacing: var(--syn-spacing-medium) var(--syn-spacing-large) var(--syn-spacing-large) var(--syn-spacing-medium);\n\n    display: contents;\n  }\n\n  .dialog {\n    align-items: center;\n    display: flex;\n    inset: 0;\n    justify-content: center;\n    position: fixed;\n    z-index: var(--syn-z-index-dialog);\n  }\n\n  .dialog__panel {\n    background-color: var(--syn-panel-background-color);\n    border: var(--syn-spacing-4x-small) solid var(--syn-panel-border-color);\n    border-radius: var(--syn-border-radius-none);\n    box-shadow: var(--syn-shadow-large);\n    display: flex;\n    flex-direction: column;\n    max-height: calc(100% - var(--syn-spacing-2x-large));\n    max-width: calc(100% - var(--syn-spacing-2x-large));\n    width: var(--width);\n    z-index: 2;\n  }\n\n  .dialog__panel:focus {\n    outline: none;\n  }\n\n  /* Ensure there's enough vertical padding for phones that don't update vh when chrome appears (e.g. iPhone) */\n  @media screen and (width <= 420px) {\n    .dialog__panel {\n      max-height: 80vh;\n    }\n  }\n\n  .dialog--open .dialog__panel {\n    display: flex;\n    opacity: 1;\n  }\n\n  .dialog__header {\n    display: flex;\n    flex: 0 0 auto;\n  }\n\n  .dialog__title {\n    flex: 1 1 auto;\n    font: inherit;\n    font-family: var(--syn-font-sans);\n    font-size: var(--syn-font-size-x-large);\n    font-weight: var(--syn-font-weight-bold);\n    line-height: var(--syn-line-height-normal);\n    margin: 0;\n    padding: var(--header-spacing);\n  }\n\n  .dialog__header-actions {\n    align-items: flex-start;\n    display: flex;\n    flex-shrink: 0;\n    flex-wrap: wrap;\n    gap: var(--syn-spacing-x-small);\n    justify-content: end;\n    padding: var(--syn-spacing-large) var(--syn-spacing-small) var(--syn-spacing-large) 0;\n  }\n\n  /**\n   * We need this to make sure we are big enough as defined in the layout\n   * When omitting this statement, we will get rounding problems via line-height\n   */\n  .dialog__title,\n  .dialog__header-actions {\n    min-height: 88px;\n  }\n\n  .dialog__header-actions syn-icon-button,\n  .dialog__header-actions ::slotted(syn-icon-button) {\n    align-items: center;\n    color: var(--syn-color-neutral-950);\n    display: flex;\n    flex: 0 0 auto;\n    font-size: var(--syn-font-size-x-large);\n  }\n\n  .dialog__body {\n    display: block;\n    flex: 1 1 auto;\n    overflow: auto;\n    -webkit-overflow-scrolling: touch;\n    padding: var(--body-spacing);\n    will-change: transform; /* #1249: Fixes Chrome scroll issues when using multiple scrollable items as content */\n  }\n\n  .dialog__footer {\n    flex: 0 0 auto;\n    padding: var(--footer-spacing);\n    text-align: right;\n  }\n\n  .dialog__footer ::slotted(syn-button:not(:first-of-type)) {\n    margin-inline-start: var(--syn-spacing-x-small);\n  }\n\n  .dialog:not(.dialog--has-footer) .dialog__footer {\n    display: none;\n  }\n\n  .dialog__overlay {\n    backdrop-filter: blur(var(--syn-overlay-background-blur)); /* #946: Add background blur for sick 2025 */\n    background-color: var(--syn-overlay-background-color);\n    inset: 0;\n    position: fixed;\n  }\n\n  @media (forced-colors: active) {\n    .dialog__panel {\n      border: solid 1px var(--syn-color-neutral-0);\n    }\n  }\n`;\n"],
-  "mappings": ";AAAA,SAAS,WAAW;AAEpB,IAAO,wBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  :host {\n    --width: 31rem;\n    --header-spacing: var(--syn-spacing-large) var(--syn-spacing-x-small) var(--syn-spacing-large) var(--syn-spacing-large);\n    --body-spacing: var(--syn-spacing-medium) var(--syn-spacing-large);\n    --footer-spacing: var(--syn-spacing-medium) var(--syn-spacing-large) var(--syn-spacing-large) var(--syn-spacing-medium);\n\n    display: contents;\n  }\n\n  .dialog {\n    align-items: center;\n    display: flex;\n    inset: 0;\n    justify-content: center;\n    position: fixed;\n    z-index: var(--syn-z-index-dialog);\n  }\n\n  .dialog__panel {\n    background-color: var(--syn-panel-background-color);\n    border: var(--syn-spacing-4x-small) solid var(--syn-panel-border-color);\n    border-radius: var(--syn-border-radius-none);\n    box-shadow: var(--syn-shadow-large);\n    display: flex;\n    flex-direction: column;\n    max-height: calc(100% - var(--syn-spacing-2x-large));\n    max-width: calc(100% - var(--syn-spacing-2x-large));\n    width: var(--width);\n    z-index: 2;\n  }\n\n  .dialog__panel:focus {\n    outline: none;\n  }\n\n  /* Ensure there's enough vertical padding for phones that don't update vh when chrome appears (e.g. iPhone) */\n  @media screen and (width <= 420px) {\n    .dialog__panel {\n      max-height: 80vh;\n    }\n  }\n\n  .dialog--open .dialog__panel {\n    display: flex;\n    opacity: 1;\n  }\n\n  .dialog__header {\n    display: flex;\n    flex: 0 0 auto;\n  }\n\n  .dialog__title {\n    align-items: center;\n    display: flex;\n    flex: 1 1 auto;\n    font: var(--syn-heading-x-large);\n    margin: 0;\n    padding: var(--header-spacing);\n  }\n\n  .dialog__header-actions {\n    align-items: flex-start;\n    display: flex;\n    flex-shrink: 0;\n    flex-wrap: wrap;\n    gap: var(--syn-spacing-x-small);\n    justify-content: end;\n    padding: var(--syn-spacing-large) var(--syn-spacing-small) var(--syn-spacing-large) 0;\n  }\n\n  .dialog__header-actions syn-icon-button,\n  .dialog__header-actions ::slotted(syn-icon-button) {\n    align-items: center;\n    color: var(--syn-color-neutral-950);\n    display: flex;\n    flex: 0 0 auto;\n    font-size: var(--syn-font-size-x-large);\n  }\n\n  .dialog__body {\n    display: block;\n    flex: 1 1 auto;\n    overflow: auto;\n    -webkit-overflow-scrolling: touch;\n    padding: var(--body-spacing);\n    will-change: transform; /* #1249: Fixes Chrome scroll issues when using multiple scrollable items as content */\n  }\n\n  .dialog__footer {\n    flex: 0 0 auto;\n    padding: var(--footer-spacing);\n    text-align: right;\n  }\n\n  .dialog__footer ::slotted(syn-button:not(:first-of-type)) {\n    margin-inline-start: var(--syn-spacing-x-small);\n  }\n\n  .dialog:not(.dialog--has-footer) .dialog__footer {\n    display: none;\n  }\n\n  .dialog__overlay {\n    backdrop-filter: blur(var(--syn-overlay-background-blur)); /* #946: Add background blur for sick 2025 */\n    background-color: var(--syn-overlay-background-color);\n    inset: 0;\n    position: fixed;\n  }\n\n  @media (forced-colors: active) {\n    .dialog__panel {\n      border: solid 1px var(--syn-color-neutral-0);\n    }\n  }\n`;\n"],
+  "mappings": ";AAAA,SAAS,WAAW;AAEpB,IAAO,wBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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.SKCN56JV.js → chunk.MS764V4G.js}

@@ -1,12 +1,12 @@
 import {
   SynDrawer
-} from "./chunk.L2ECN5EY.js";
+} from "./chunk.DXZQSCNL.js";
 import {
   SynNavItem
-} from "./chunk.5L3ERJZQ.js";
+} from "./chunk.SLVFFY3X.js";
 import {
   SynDivider
-} from "./chunk.2MBHEIB7.js";
+} from "./chunk.XU3MEB4A.js";
 import {
   side_nav_styles_default
 } from "./chunk.EFSUQWJZ.js";
@@ -18,10 +18,10 @@ import {
 } from "./chunk.CHFWLQN5.js";
 import {
   SynIcon
-} from "./chunk.OPNOT3FJ.js";
+} from "./chunk.AJTIJUXL.js";
 import {
   enableDefaultSettings
-} from "./chunk.4MG3QDNW.js";
+} from "./chunk.4I2RJVH5.js";
 import {
   waitForEvent
 } from "./chunk.LQDIH4Z5.js";
@@ -41,7 +41,7 @@ import {
 } from "./chunk.2NT3B5WJ.js";
 import {
   SynergyElement
-} from "./chunk.QLMD2SFN.js";
+} from "./chunk.YAQJ7RVD.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -333,4 +333,4 @@ setDefaultAnimation("sideNav.overlay.hide", {
 export {
   SynSideNav
 };
-//# sourceMappingURL=chunk.SKCN56JV.js.map
+//# sourceMappingURL=chunk.MS764V4G.js.map

package/dist/chunks/{chunk.BXCELJ2K.js → chunk.MUIM3S36.js}

@@ -15,7 +15,7 @@ import {
 } from "./chunk.2NT3B5WJ.js";
 import {
   SynergyElement
-} from "./chunk.QLMD2SFN.js";
+} from "./chunk.YAQJ7RVD.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -120,4 +120,4 @@ __decorateClass([
 export {
   SynBreadcrumbItem
 };
-//# sourceMappingURL=chunk.BXCELJ2K.js.map
+//# sourceMappingURL=chunk.MUIM3S36.js.map

package/dist/chunks/{chunk.CAAWLFOI.js → chunk.NMVXRYZM.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.WRPQ3635.js";
 import {
   SynIcon
-} from "./chunk.OPNOT3FJ.js";
+} from "./chunk.AJTIJUXL.js";
 import {
   LocalizeController
 } from "./chunk.VCRQ2GII.js";
@@ -15,7 +15,7 @@ import {
 } from "./chunk.2NT3B5WJ.js";
 import {
   SynergyElement
-} from "./chunk.QLMD2SFN.js";
+} from "./chunk.YAQJ7RVD.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -91,4 +91,4 @@ __decorateClass([
 export {
   SynBreadcrumb
 };
-//# sourceMappingURL=chunk.CAAWLFOI.js.map
+//# sourceMappingURL=chunk.NMVXRYZM.js.map

package/dist/chunks/{chunk.GTYWN65E.js → chunk.NSI5EIC6.js}

@@ -1,6 +1,6 @@
 import {
   SynMenuLabel
-} from "./chunk.72MLLXP3.js";
+} from "./chunk.UUGBDLSY.js";
 
 // src/components/menu-label/menu-label.ts
 var menu_label_default = SynMenuLabel;
@@ -9,4 +9,4 @@ SynMenuLabel.define("syn-menu-label");
 export {
   menu_label_default
 };
-//# sourceMappingURL=chunk.GTYWN65E.js.map
+//# sourceMappingURL=chunk.NSI5EIC6.js.map

package/dist/chunks/{chunk.M6IU3AX7.js → chunk.NZLWI7QV.js}

@@ -3,10 +3,10 @@ import {
 } from "./chunk.432DTUIX.js";
 import {
   SynIcon
-} from "./chunk.OPNOT3FJ.js";
+} from "./chunk.AJTIJUXL.js";
 import {
   enableDefaultSettings
-} from "./chunk.4MG3QDNW.js";
+} from "./chunk.4I2RJVH5.js";
 import {
   watch
 } from "./chunk.SMIMHADA.js";
@@ -15,7 +15,7 @@ import {
 } from "./chunk.2NT3B5WJ.js";
 import {
   SynergyElement
-} from "./chunk.QLMD2SFN.js";
+} from "./chunk.YAQJ7RVD.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -126,4 +126,4 @@ SynRadio = __decorateClass([
 export {
   SynRadio
 };
-//# sourceMappingURL=chunk.M6IU3AX7.js.map
+//# sourceMappingURL=chunk.NZLWI7QV.js.map

package/dist/chunks/{chunk.ORBVCK6I.js → chunk.O2DYUGIP.js}

@@ -1,6 +1,6 @@
 import {
   SynTooltip
-} from "./chunk.BAFEN62W.js";
+} from "./chunk.DB5L6X22.js";
 
 // src/components/tooltip/tooltip.ts
 var tooltip_default = SynTooltip;
@@ -9,4 +9,4 @@ SynTooltip.define("syn-tooltip");
 export {
   tooltip_default
 };
-//# sourceMappingURL=chunk.ORBVCK6I.js.map
+//# sourceMappingURL=chunk.O2DYUGIP.js.map

package/dist/chunks/{chunk.KEETLYL2.js → chunk.OBP2P4JG.js}

@@ -12,7 +12,7 @@ import {
 } from "./chunk.2NT3B5WJ.js";
 import {
   SynergyElement
-} from "./chunk.QLMD2SFN.js";
+} from "./chunk.YAQJ7RVD.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.KEETLYL2.js.map
+//# sourceMappingURL=chunk.OBP2P4JG.js.map

package/dist/chunks/{chunk.AL3VTX67.js → chunk.OSEGYBIC.js}

@@ -1,9 +1,6 @@
-import {
-  card_custom_styles_default
-} from "./chunk.O655X4YP.js";
 import {
   card_styles_default
-} from "./chunk.R3SMKUIL.js";
+} from "./chunk.QCHIEOZ2.js";
 import {
   HasSlotController
 } from "./chunk.CHFWLQN5.js";
@@ -12,15 +9,17 @@ import {
 } from "./chunk.2NT3B5WJ.js";
 import {
   SynergyElement
-} from "./chunk.QLMD2SFN.js";
+} from "./chunk.YAQJ7RVD.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
 
 // src/components/card/card.component.ts
+import {
+  html
+} from "lit";
 import { classMap } from "lit/directives/class-map.js";
 import { property } from "lit/decorators.js";
-import { html } from "lit";
 var SynCard = class extends SynergyElement {
   constructor() {
     super(...arguments);
@@ -34,11 +33,11 @@ var SynCard = class extends SynergyElement {
         part="base"
         class=${classMap({
       card: true,
-      "card--shadow": this.shadow,
-      "card--sharp": this.sharp,
       "card--has-footer": this.hasSlotController.test("footer"),
+      "card--has-header": this.hasSlotController.test("header"),
       "card--has-image": this.hasSlotController.test("image"),
-      "card--has-header": this.hasSlotController.test("header")
+      "card--shadow": this.shadow,
+      "card--sharp": this.sharp
     })}
       >
         <slot name="image" part="image" class="card__image"></slot>
@@ -49,15 +48,15 @@ var SynCard = class extends SynergyElement {
     `;
   }
 };
-SynCard.styles = [component_styles_default, card_styles_default, card_custom_styles_default];
+SynCard.styles = [component_styles_default, card_styles_default];
 __decorateClass([
-  property({ type: Boolean, reflect: true })
+  property({ reflect: true, type: Boolean })
 ], SynCard.prototype, "shadow", 2);
 __decorateClass([
-  property({ type: Boolean, reflect: true })
+  property({ reflect: true, type: Boolean })
 ], SynCard.prototype, "sharp", 2);
 
 export {
   SynCard
 };
-//# sourceMappingURL=chunk.AL3VTX67.js.map
+//# sourceMappingURL=chunk.OSEGYBIC.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/card/card.component.ts"],
+  "sourcesContent": ["import {\n  type CSSResultGroup,\n  html,\n} from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { property } from 'lit/decorators.js';\nimport { HasSlotController } from '../../internal/slot.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport styles from './card.styles.js';\n\n/**\n * @summary Cards can be used to group related subjects in a container.\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-card--docs\n * @status stable\n * @since 1.25.0\n *\n * @slot - The card's main content.\n * @slot header - An optional header for the card.\n * @slot footer - An optional footer for the card.\n * @slot image - An optional image to render at the start of the card.\n *\n * @csspart base - The component's base wrapper.\n * @csspart image - The container that wraps the card's image.\n * @csspart header - The container that wraps the card's header.\n * @csspart body - The container that wraps the card's main content.\n * @csspart footer - The container that wraps the card's footer.\n *\n * @cssproperty --border-color - The card's border color, including borders that occur inside the card.\n * @cssproperty --border-radius - The border radius for the card's edges.\n * @cssproperty --border-width - The width of the card's borders.\n * @cssproperty --padding - The padding to use for the card's sections.\n */\nexport default class SynCard extends SynergyElement {\n  static styles: CSSResultGroup = [componentStyles, styles];\n\n  private readonly hasSlotController = new HasSlotController(this, 'footer', 'header', 'image');\n\n  /** Draws the card with a shadow. Can be used when the card has to stand out visually, for example in dashboards. */\n  @property({ reflect: true, type: Boolean }) shadow = false;\n\n  /** Draws the card with sharp edges. Can be used e.g. when nesting multiple syn-cards to create hierarchy. */\n  @property({ reflect: true, type: Boolean }) sharp = false;\n\n  render() {\n    return html`\n      <div\n        part=\"base\"\n        class=${classMap({\n          card: true,\n          'card--has-footer': this.hasSlotController.test('footer'),\n          'card--has-header': this.hasSlotController.test('header'),\n          'card--has-image': this.hasSlotController.test('image'),\n          'card--shadow': this.shadow,\n          'card--sharp': this.sharp,\n        })}\n      >\n        <slot name=\"image\" part=\"image\" class=\"card__image\"></slot>\n        <slot name=\"header\" part=\"header\" class=\"card__header\"></slot>\n        <slot part=\"body\" class=\"card__body\"></slot>\n        <slot name=\"footer\" part=\"footer\" class=\"card__footer\"></slot>\n      </div>\n    `;\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA,EAEE;AAAA,OACK;AACP,SAAS,gBAAgB;AACzB,SAAS,gBAAgB;AA4BzB,IAAqB,UAArB,cAAqC,eAAe;AAAA,EAApD;AAAA;AAGE,SAAiB,oBAAoB,IAAI,kBAAkB,MAAM,UAAU,UAAU,OAAO;AAGhD,kBAAS;AAGT,iBAAQ;AAAA;AAAA,EAEpD,SAAS;AACP,WAAO;AAAA;AAAA;AAAA,gBAGK,SAAS;AAAA,MACf,MAAM;AAAA,MACN,oBAAoB,KAAK,kBAAkB,KAAK,QAAQ;AAAA,MACxD,oBAAoB,KAAK,kBAAkB,KAAK,QAAQ;AAAA,MACxD,mBAAmB,KAAK,kBAAkB,KAAK,OAAO;AAAA,MACtD,gBAAgB,KAAK;AAAA,MACrB,eAAe,KAAK;AAAA,IACtB,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQR;AACF;AA/BqB,QACZ,SAAyB,CAAC,0BAAiB,mBAAM;AAKZ;AAAA,EAA3C,SAAS,EAAE,SAAS,MAAM,MAAM,QAAQ,CAAC;AAAA,GANvB,QAMyB;AAGA;AAAA,EAA3C,SAAS,EAAE,SAAS,MAAM,MAAM,QAAQ,CAAC;AAAA,GATvB,QASyB;",
+  "names": []
+}

package/dist/chunks/{chunk.TAP3XVM2.js → chunk.OTWLUTCW.js}

@@ -1,6 +1,6 @@
 import {
   SynValidate
-} from "./chunk.4IZMTEOR.js";
+} from "./chunk.4MSNHMNK.js";
 
 // src/components/validate/validate.ts
 var validate_default = SynValidate;
@@ -9,4 +9,4 @@ SynValidate.define("syn-validate");
 export {
   validate_default
 };
-//# sourceMappingURL=chunk.TAP3XVM2.js.map
+//# sourceMappingURL=chunk.OTWLUTCW.js.map

package/dist/chunks/{chunk.E5OZHV4L.js → chunk.PHCUDLBA.js}

@@ -9,7 +9,7 @@ import {
 } from "./chunk.2NT3B5WJ.js";
 import {
   SynergyElement
-} from "./chunk.QLMD2SFN.js";
+} from "./chunk.YAQJ7RVD.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -78,4 +78,4 @@ __decorateClass([
 export {
   SynResizeObserver
 };
-//# sourceMappingURL=chunk.E5OZHV4L.js.map
+//# sourceMappingURL=chunk.PHCUDLBA.js.map

package/dist/chunks/{chunk.HYZOLI5D.js → chunk.PYHYLPRF.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.CMOZ4SCN.js";
 import {
   enableDefaultSettings
-} from "./chunk.4MG3QDNW.js";
+} from "./chunk.4I2RJVH5.js";
 import {
   LocalizeController
 } from "./chunk.VCRQ2GII.js";
@@ -15,7 +15,7 @@ import {
 } from "./chunk.2NT3B5WJ.js";
 import {
   SynergyElement
-} from "./chunk.QLMD2SFN.js";
+} from "./chunk.YAQJ7RVD.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -66,4 +66,4 @@ SynBadge = __decorateClass([
 export {
   SynBadge
 };
-//# sourceMappingURL=chunk.HYZOLI5D.js.map
+//# sourceMappingURL=chunk.PYHYLPRF.js.map

package/dist/chunks/{chunk.R3SMKUIL.js → chunk.QCHIEOZ2.js}

@@ -1,29 +1,32 @@
 // src/components/card/card.styles.ts
 import { css } from "lit";
 var card_styles_default = css`
-	/* stylelint-disable */
   :host {
-    --border-color: var(--syn-color-neutral-200);
+    --border-color: var(--syn-panel-border-color);
+    --border-width: var(--syn-border-width-small);
     --border-radius: var(--syn-border-radius-medium);
-    --border-width: 1px;
     --padding: var(--syn-spacing-large);
 
     display: inline-block;
   }
 
   .card {
-    display: flex;
-    flex-direction: column;
     background-color: var(--syn-panel-background-color);
-    box-shadow: var(--syn-shadow-x-small);
     border: solid var(--border-width) var(--border-color);
     border-radius: var(--border-radius);
+    display: flex;
+    flex-direction: column;
+  }
+
+  /** #1107: Add shadow property to card */
+  .card--shadow {
+    box-shadow: var(--syn-shadow-small);
   }
 
   .card__image {
-    display: flex;
     border-top-left-radius: var(--border-radius);
     border-top-right-radius: var(--border-radius);
+    display: flex;
     margin: calc(-1 * var(--border-width));
     overflow: hidden;
   }
@@ -33,13 +36,30 @@ var card_styles_default = css`
     width: 100%;
   }
 
+  /**
+   * #1107: Sharp cards do not receive a border radius
+   */
+  .card--sharp {
+    border-radius: var(--syn-border-radius-none);
+  }
+
+  /**
+   * #1107: Do not apply border radius to sharp card images
+   */
+  .card--sharp .card__image {
+    border-top-left-radius: var(--syn-border-radius-none);
+    border-top-right-radius: var(--syn-border-radius-none);
+  }
+
   .card:not(.card--has-image) .card__image {
     display: none;
   }
 
   .card__header {
+    color: var(--syn-typography-color-text);
     display: block;
-    border-bottom: solid var(--border-width) var(--border-color);
+    font: var(--syn-heading-large);
+    line-height: var(--syn-line-height-normal);
     padding: calc(var(--padding) / 2) var(--padding);
   }
 
@@ -53,14 +73,15 @@ var card_styles_default = css`
   }
 
   .card__body {
+    color: var(--syn-typography-color-text);
     display: block;
+    font: var(--syn-body-medium-regular);
     padding: var(--padding);
   }
 
   .card--has-footer .card__footer {
     display: block;
-    border-top: solid var(--border-width) var(--border-color);
-    padding: var(--padding);
+    padding: var(--syn-spacing-x-small) var(--syn-spacing-large) var(--syn-spacing-large);
   }
 
   .card:not(.card--has-footer) .card__footer {
@@ -71,4 +92,4 @@ var card_styles_default = css`
 export {
   card_styles_default
 };
-//# sourceMappingURL=chunk.R3SMKUIL.js.map
+//# sourceMappingURL=chunk.QCHIEOZ2.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/card/card.styles.ts"],
+  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  :host {\n    --border-color: var(--syn-panel-border-color);\n    --border-width: var(--syn-border-width-small);\n    --border-radius: var(--syn-border-radius-medium);\n    --padding: var(--syn-spacing-large);\n\n    display: inline-block;\n  }\n\n  .card {\n    background-color: var(--syn-panel-background-color);\n    border: solid var(--border-width) var(--border-color);\n    border-radius: var(--border-radius);\n    display: flex;\n    flex-direction: column;\n  }\n\n  /** #1107: Add shadow property to card */\n  .card--shadow {\n    box-shadow: var(--syn-shadow-small);\n  }\n\n  .card__image {\n    border-top-left-radius: var(--border-radius);\n    border-top-right-radius: var(--border-radius);\n    display: flex;\n    margin: calc(-1 * var(--border-width));\n    overflow: hidden;\n  }\n\n  .card__image::slotted(img) {\n    display: block;\n    width: 100%;\n  }\n\n  /**\n   * #1107: Sharp cards do not receive a border radius\n   */\n  .card--sharp {\n    border-radius: var(--syn-border-radius-none);\n  }\n\n  /**\n   * #1107: Do not apply border radius to sharp card images\n   */\n  .card--sharp .card__image {\n    border-top-left-radius: var(--syn-border-radius-none);\n    border-top-right-radius: var(--syn-border-radius-none);\n  }\n\n  .card:not(.card--has-image) .card__image {\n    display: none;\n  }\n\n  .card__header {\n    color: var(--syn-typography-color-text);\n    display: block;\n    font: var(--syn-heading-large);\n    line-height: var(--syn-line-height-normal);\n    padding: calc(var(--padding) / 2) var(--padding);\n  }\n\n  .card:not(.card--has-header) .card__header {\n    display: none;\n  }\n\n  .card:not(.card--has-image) .card__header {\n    border-top-left-radius: var(--border-radius);\n    border-top-right-radius: var(--border-radius);\n  }\n\n  .card__body {\n    color: var(--syn-typography-color-text);\n    display: block;\n    font: var(--syn-body-medium-regular);\n    padding: var(--padding);\n  }\n\n  .card--has-footer .card__footer {\n    display: block;\n    padding: var(--syn-spacing-x-small) var(--syn-spacing-large) var(--syn-spacing-large);\n  }\n\n  .card:not(.card--has-footer) .card__footer {\n    display: none;\n  }\n`;\n"],
+  "mappings": ";AAAA,SAAS,WAAW;AAEpB,IAAO,sBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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.75ULNINA.js → chunk.QILYRFUM.js}

@@ -9,10 +9,10 @@ import {
 } from "./chunk.CHFWLQN5.js";
 import {
   SynIconButton
-} from "./chunk.UHKHACWY.js";
+} from "./chunk.K7YVV2ZV.js";
 import {
   enableDefaultSettings
-} from "./chunk.4MG3QDNW.js";
+} from "./chunk.4I2RJVH5.js";
 import {
   waitForEvent
 } from "./chunk.LQDIH4Z5.js";
@@ -35,7 +35,7 @@ import {
 } from "./chunk.2NT3B5WJ.js";
 import {
   SynergyElement
-} from "./chunk.QLMD2SFN.js";
+} from "./chunk.YAQJ7RVD.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -292,4 +292,4 @@ setDefaultAnimation("alert.hide", {
 export {
   SynAlert
 };
-//# sourceMappingURL=chunk.75ULNINA.js.map
+//# sourceMappingURL=chunk.QILYRFUM.js.map