@synergy-design-system/components 3.15.5 → 3.15.6

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.BXCELJ2K.js → chunk.MTETA3HA.js}

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

package/dist/chunks/{chunk.6UTZ5TWH.js → chunk.MWEJ7CGR.js}

@@ -9,7 +9,7 @@ import {
 } from "./chunk.2NT3B5WJ.js";
 import {
   SynergyElement
-} from "./chunk.QLMD2SFN.js";
+} from "./chunk.7YCUXELV.js";
 import {
   __decorateClass,
   __spreadProps,
@@ -423,4 +423,4 @@ __decorateClass([
 export {
   SynPopup
 };
-//# sourceMappingURL=chunk.6UTZ5TWH.js.map
+//# sourceMappingURL=chunk.MWEJ7CGR.js.map

package/dist/chunks/{chunk.M75K6TTN.js → chunk.N3B52ZU7.js}

@@ -6,13 +6,13 @@ import {
 } from "./chunk.CX7IEDUW.js";
 import {
   enableDefaultSettings
-} from "./chunk.4MG3QDNW.js";
+} from "./chunk.4I2RJVH5.js";
 import {
   component_styles_default
 } from "./chunk.2NT3B5WJ.js";
 import {
   SynergyElement
-} from "./chunk.QLMD2SFN.js";
+} from "./chunk.7YCUXELV.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -148,4 +148,4 @@ function findButton(el) {
 export {
   SynButtonGroup
 };
-//# sourceMappingURL=chunk.M75K6TTN.js.map
+//# sourceMappingURL=chunk.N3B52ZU7.js.map

package/dist/chunks/{chunk.75ULNINA.js → chunk.NL2IOCPJ.js}

@@ -9,10 +9,10 @@ import {
 } from "./chunk.CHFWLQN5.js";
 import {
   SynIconButton
-} from "./chunk.UHKHACWY.js";
+} from "./chunk.OBX7SKFS.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.7YCUXELV.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -292,4 +292,4 @@ setDefaultAnimation("alert.hide", {
 export {
   SynAlert
 };
-//# sourceMappingURL=chunk.75ULNINA.js.map
+//# sourceMappingURL=chunk.NL2IOCPJ.js.map

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

@@ -3,10 +3,10 @@ import {
 } from "./chunk.432DTUIX.js";
 import {
   SynIcon
-} from "./chunk.OPNOT3FJ.js";
+} from "./chunk.SFBN63ZC.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.7YCUXELV.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -126,4 +126,4 @@ SynRadio = __decorateClass([
 export {
   SynRadio
 };
-//# sourceMappingURL=chunk.M6IU3AX7.js.map
+//# sourceMappingURL=chunk.O5HRNZ2W.js.map

package/dist/chunks/{chunk.UHKHACWY.js → chunk.OBX7SKFS.js}

@@ -3,16 +3,16 @@ import {
 } from "./chunk.3U6C42N7.js";
 import {
   SynIcon
-} from "./chunk.OPNOT3FJ.js";
+} from "./chunk.SFBN63ZC.js";
 import {
   enableDefaultSettings
-} from "./chunk.4MG3QDNW.js";
+} from "./chunk.4I2RJVH5.js";
 import {
   component_styles_default
 } from "./chunk.2NT3B5WJ.js";
 import {
   SynergyElement
-} from "./chunk.QLMD2SFN.js";
+} from "./chunk.7YCUXELV.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -142,4 +142,4 @@ SynIconButton = __decorateClass([
 export {
   SynIconButton
 };
-//# sourceMappingURL=chunk.UHKHACWY.js.map
+//# sourceMappingURL=chunk.OBX7SKFS.js.map

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

@@ -12,7 +12,7 @@ import {
 } from "./chunk.2NT3B5WJ.js";
 import {
   SynergyElement
-} from "./chunk.QLMD2SFN.js";
+} from "./chunk.7YCUXELV.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.OGRJ4HV7.js.map

package/dist/chunks/{chunk.6SUEU4BY.js → chunk.OLTM5MWQ.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.7YCUXELV.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -379,4 +379,4 @@ SynTextarea = __decorateClass([
 export {
   SynTextarea
 };
-//# sourceMappingURL=chunk.6SUEU4BY.js.map
+//# sourceMappingURL=chunk.OLTM5MWQ.js.map

package/dist/chunks/{chunk.ITHX2W35.js → chunk.OZPSZV3Z.js}

@@ -1,6 +1,6 @@
 import {
   SynTab
-} from "./chunk.EKQXPOD5.js";
+} from "./chunk.R3SBAYOR.js";
 
 // src/components/tab/tab.ts
 var tab_default = SynTab;
@@ -9,4 +9,4 @@ SynTab.define("syn-tab");
 export {
   tab_default
 };
-//# sourceMappingURL=chunk.ITHX2W35.js.map
+//# sourceMappingURL=chunk.OZPSZV3Z.js.map

package/dist/chunks/{chunk.HCTCOWRG.js → chunk.PIC3MEDG.js}

@@ -1,6 +1,6 @@
 import {
   dialog_styles_default
-} from "./chunk.VDBD6G4Q.js";
+} from "./chunk.MQFQLLZE.js";
 import {
   Modal
 } from "./chunk.KR45AFAB.js";
@@ -16,7 +16,7 @@ import {
 } from "./chunk.CHFWLQN5.js";
 import {
   SynIconButton
-} from "./chunk.UHKHACWY.js";
+} from "./chunk.OBX7SKFS.js";
 import {
   waitForEvent
 } from "./chunk.LQDIH4Z5.js";
@@ -39,7 +39,7 @@ import {
 } from "./chunk.2NT3B5WJ.js";
 import {
   SynergyElement
-} from "./chunk.QLMD2SFN.js";
+} from "./chunk.7YCUXELV.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -298,4 +298,4 @@ setDefaultAnimation("dialog.overlay.hide", {
 export {
   SynDialog
 };
-//# sourceMappingURL=chunk.HCTCOWRG.js.map
+//# sourceMappingURL=chunk.PIC3MEDG.js.map

package/dist/chunks/{chunk.THGPZ53P.js → chunk.PIFYONLO.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.2NT3B5WJ.js";
 import {
   SynergyElement
-} from "./chunk.QLMD2SFN.js";
+} from "./chunk.7YCUXELV.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -48,4 +48,4 @@ __decorateClass([
 export {
   SynRangeTick
 };
-//# sourceMappingURL=chunk.THGPZ53P.js.map
+//# sourceMappingURL=chunk.PIFYONLO.js.map

package/dist/chunks/{chunk.IOI2FAEU.js → chunk.PLL33BFP.js}

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

package/dist/chunks/{chunk.2XGX4ZAN.js → chunk.PNA52HT2.js}

@@ -1,6 +1,6 @@
 import {
   SynResizeObserver
-} from "./chunk.E5OZHV4L.js";
+} from "./chunk.B6F4Q4IT.js";
 import {
   scrollIntoView
 } from "./chunk.2DT3C6WE.js";
@@ -12,7 +12,7 @@ import {
 } from "./chunk.Q5EKPQBR.js";
 import {
   SynIconButton
-} from "./chunk.UHKHACWY.js";
+} from "./chunk.OBX7SKFS.js";
 import {
   LocalizeController
 } from "./chunk.VCRQ2GII.js";
@@ -24,7 +24,7 @@ import {
 } from "./chunk.2NT3B5WJ.js";
 import {
   SynergyElement
-} from "./chunk.QLMD2SFN.js";
+} from "./chunk.7YCUXELV.js";
 import {
   __decorateClass,
   __spreadValues
@@ -516,4 +516,4 @@ __decorateClass([
 export {
   SynTabGroup
 };
-//# sourceMappingURL=chunk.2XGX4ZAN.js.map
+//# sourceMappingURL=chunk.PNA52HT2.js.map

package/dist/chunks/{chunk.DACBQVZD.js → chunk.PY4T4VWD.js}

@@ -1,6 +1,6 @@
 import {
   SynButton
-} from "./chunk.PDM47D3E.js";
+} from "./chunk.5RQIZU45.js";
 
 // src/components/button/button.ts
 var button_default = SynButton;
@@ -9,4 +9,4 @@ SynButton.define("syn-button");
 export {
   button_default
 };
-//# sourceMappingURL=chunk.DACBQVZD.js.map
+//# sourceMappingURL=chunk.PY4T4VWD.js.map

package/dist/chunks/{chunk.SKCN56JV.js → chunk.Q7B6OCSA.js}

@@ -1,12 +1,12 @@
 import {
   SynDrawer
-} from "./chunk.L2ECN5EY.js";
+} from "./chunk.ZE5BLQVJ.js";
 import {
   SynNavItem
-} from "./chunk.5L3ERJZQ.js";
+} from "./chunk.VBPZVGXH.js";
 import {
   SynDivider
-} from "./chunk.2MBHEIB7.js";
+} from "./chunk.QYOAPG3L.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.SFBN63ZC.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.7YCUXELV.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -333,4 +333,4 @@ setDefaultAnimation("sideNav.overlay.hide", {
 export {
   SynSideNav
 };
-//# sourceMappingURL=chunk.SKCN56JV.js.map
+//# sourceMappingURL=chunk.Q7B6OCSA.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.NGKOOT4J.js → chunk.QEY3KSN5.js}

@@ -15,10 +15,10 @@ import {
 } from "./chunk.CHFWLQN5.js";
 import {
   SynIcon
-} from "./chunk.OPNOT3FJ.js";
+} from "./chunk.SFBN63ZC.js";
 import {
   enableDefaultSettings
-} from "./chunk.4MG3QDNW.js";
+} from "./chunk.4I2RJVH5.js";
 import {
   watch
 } from "./chunk.SMIMHADA.js";
@@ -27,7 +27,7 @@ import {
 } from "./chunk.2NT3B5WJ.js";
 import {
   SynergyElement
-} from "./chunk.QLMD2SFN.js";
+} from "./chunk.7YCUXELV.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -266,4 +266,4 @@ SynCheckbox = __decorateClass([
 export {
   SynCheckbox
 };
-//# sourceMappingURL=chunk.NGKOOT4J.js.map
+//# sourceMappingURL=chunk.QEY3KSN5.js.map

package/dist/chunks/{chunk.JZSHV4DZ.js → chunk.QKATJHEP.js}

@@ -1,6 +1,6 @@
 import {
   SynRangeTick
-} from "./chunk.THGPZ53P.js";
+} from "./chunk.PIFYONLO.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.JZSHV4DZ.js.map
+//# sourceMappingURL=chunk.QKATJHEP.js.map