@synergy-design-system/components 1.7.0 → 1.8.0

package/dist/chunks/{chunk.LWXCBEHD.js → chunk.HW5TASOL.js}

@@ -3,19 +3,19 @@ import {
 } from "./chunk.KG52EHDB.js";
 import {
   SynDivider
-} from "./chunk.HKCTVD3U.js";
+} from "./chunk.ERNEIORV.js";
 import {
   HasSlotController
 } from "./chunk.XGXFE6IF.js";
 import {
   watch
-} from "./chunk.VZ7S7YYN.js";
+} from "./chunk.AVTU2BGE.js";
 import {
   SynergyElement
-} from "./chunk.GHMKOVA3.js";
+} from "./chunk.WDX7XUUK.js";
 import {
   __decorateClass
-} from "./chunk.DJOAQ4JU.js";
+} from "./chunk.QNDC5KWA.js";
 
 // src/components/optgroup/optgroup.component.ts
 import { classMap } from "lit/directives/class-map.js";
@@ -93,4 +93,4 @@ __decorateClass([
 export {
   SynOptgroup
 };
-//# sourceMappingURL=chunk.LWXCBEHD.js.map
+//# sourceMappingURL=chunk.HW5TASOL.js.map

package/dist/chunks/{chunk.TUYEX4KP.js → chunk.JBHQJWOB.js}

@@ -6,16 +6,16 @@ import {
 } from "./chunk.WFAJR3FN.js";
 import {
   FormControlController
-} from "./chunk.AMTCNRDE.js";
+} from "./chunk.2Z2GYRLO.js";
 import {
   watch
-} from "./chunk.VZ7S7YYN.js";
+} from "./chunk.AVTU2BGE.js";
 import {
   SynergyElement
-} from "./chunk.GHMKOVA3.js";
+} from "./chunk.WDX7XUUK.js";
 import {
   __decorateClass
-} from "./chunk.DJOAQ4JU.js";
+} from "./chunk.QNDC5KWA.js";
 
 // src/components/switch/switch.component.ts
 import { classMap } from "lit/directives/class-map.js";
@@ -209,4 +209,4 @@ __decorateClass([
 export {
   SynSwitch
 };
-//# sourceMappingURL=chunk.TUYEX4KP.js.map
+//# sourceMappingURL=chunk.JBHQJWOB.js.map

package/dist/chunks/{chunk.HG5QC5EW.js → chunk.JSO3PKB4.js}

@@ -1,6 +1,6 @@
 import {
   formCollections
-} from "./chunk.AMTCNRDE.js";
+} from "./chunk.2Z2GYRLO.js";
 
 // src/utilities/form.ts
 function serialize(form) {
@@ -39,4 +39,4 @@ export {
   serialize,
   getFormControls
 };
-//# sourceMappingURL=chunk.HG5QC5EW.js.map
+//# sourceMappingURL=chunk.JSO3PKB4.js.map

package/dist/chunks/{chunk.RA2WSKQT.js → chunk.K4ELZCXB.js}

@@ -1,6 +1,6 @@
 import {
   SynButtonGroup
-} from "./chunk.EI34C7LC.js";
+} from "./chunk.MB3YZTYP.js";
 
 // src/components/button-group/button-group.ts
 var button_group_default = SynButtonGroup;
@@ -9,4 +9,4 @@ SynButtonGroup.define("syn-button-group");
 export {
   button_group_default
 };
-//# sourceMappingURL=chunk.RA2WSKQT.js.map
+//# sourceMappingURL=chunk.K4ELZCXB.js.map

package/dist/chunks/{chunk.JAKJHV44.js → chunk.KA7L2PMA.js}

@@ -1,24 +1,24 @@
 import {
   textarea_styles_default
 } from "./chunk.23HTU3YE.js";
-import {
-  HasSlotController
-} from "./chunk.XGXFE6IF.js";
 import {
   defaultValue
 } from "./chunk.WFAJR3FN.js";
+import {
+  HasSlotController
+} from "./chunk.XGXFE6IF.js";
 import {
   FormControlController
-} from "./chunk.AMTCNRDE.js";
+} from "./chunk.2Z2GYRLO.js";
 import {
   watch
-} from "./chunk.VZ7S7YYN.js";
+} from "./chunk.AVTU2BGE.js";
 import {
   SynergyElement
-} from "./chunk.GHMKOVA3.js";
+} from "./chunk.WDX7XUUK.js";
 import {
   __decorateClass
-} from "./chunk.DJOAQ4JU.js";
+} from "./chunk.QNDC5KWA.js";
 
 // src/components/textarea/textarea.component.ts
 import { classMap } from "lit/directives/class-map.js";
@@ -357,4 +357,4 @@ __decorateClass([
 export {
   SynTextarea
 };
-//# sourceMappingURL=chunk.JAKJHV44.js.map
+//# sourceMappingURL=chunk.KA7L2PMA.js.map

package/dist/chunks/{chunk.EI34C7LC.js → chunk.MB3YZTYP.js}

@@ -1,12 +1,12 @@
+import {
+  SynergyElement
+} from "./chunk.WDX7XUUK.js";
 import {
   button_group_styles_default
 } from "./chunk.4ZURABYO.js";
-import {
-  SynergyElement
-} from "./chunk.GHMKOVA3.js";
 import {
   __decorateClass
-} from "./chunk.DJOAQ4JU.js";
+} from "./chunk.QNDC5KWA.js";
 
 // src/components/button-group/button-group.component.ts
 import { html } from "lit";
@@ -83,4 +83,4 @@ function findButton(el) {
 export {
   SynButtonGroup
 };
-//# sourceMappingURL=chunk.EI34C7LC.js.map
+//# sourceMappingURL=chunk.MB3YZTYP.js.map

package/dist/chunks/{chunk.7KSU2SUD.js → chunk.MRAXEK5D.js}

@@ -1,6 +1,6 @@
 import {
   SynCheckbox
-} from "./chunk.5BOEKFIJ.js";
+} from "./chunk.Y4QKFZLK.js";
 
 // src/components/checkbox/checkbox.ts
 var checkbox_default = SynCheckbox;
@@ -9,4 +9,4 @@ SynCheckbox.define("syn-checkbox");
 export {
   checkbox_default
 };
-//# sourceMappingURL=chunk.7KSU2SUD.js.map
+//# sourceMappingURL=chunk.MRAXEK5D.js.map

package/dist/chunks/{chunk.SXW2KV3B.js → chunk.NAAFLDZ3.js}

@@ -1,6 +1,6 @@
 import {
   SynRadioButton
-} from "./chunk.7EGCXNF2.js";
+} from "./chunk.B75SET3J.js";
 
 // src/components/radio-button/radio-button.ts
 var radio_button_default = SynRadioButton;
@@ -9,4 +9,4 @@ SynRadioButton.define("syn-radio-button");
 export {
   radio_button_default
 };
-//# sourceMappingURL=chunk.SXW2KV3B.js.map
+//# sourceMappingURL=chunk.NAAFLDZ3.js.map

package/dist/chunks/chunk.NV7W5R6V.js

@@ -0,0 +1,173 @@
+import {
+  drawer_custom_styles_default
+} from "./chunk.UYD2OVFV.js";
+import {
+  component_styles_default
+} from "./chunk.O7USYXBT.js";
+
+// src/components/drawer/drawer.styles.ts
+import { css } from "lit";
+var drawer_styles_default = css`
+	/* stylelint-disable */
+  ${component_styles_default}
+
+  :host {
+    --size: 25rem;
+    --header-spacing: var(--syn-spacing-large);
+    --body-spacing: var(--syn-spacing-large);
+    --footer-spacing: var(--syn-spacing-large);
+
+    display: contents;
+  }
+
+  .drawer {
+    top: 0;
+    inset-inline-start: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    overflow: hidden;
+  }
+
+  .drawer--contained {
+    position: absolute;
+    z-index: initial;
+  }
+
+  .drawer--fixed {
+    position: fixed;
+    z-index: var(--syn-z-index-drawer);
+  }
+
+  .drawer__panel {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    z-index: 2;
+    max-width: 100%;
+    max-height: 100%;
+    background-color: var(--syn-panel-background-color);
+    box-shadow: var(--syn-shadow-x-large);
+    overflow: auto;
+    pointer-events: all;
+  }
+
+  .drawer__panel:focus {
+    outline: none;
+  }
+
+  .drawer--top .drawer__panel {
+    top: 0;
+    inset-inline-end: auto;
+    bottom: auto;
+    inset-inline-start: 0;
+    width: 100%;
+    height: var(--size);
+  }
+
+  .drawer--end .drawer__panel {
+    top: 0;
+    inset-inline-end: 0;
+    bottom: auto;
+    inset-inline-start: auto;
+    width: var(--size);
+    height: 100%;
+  }
+
+  .drawer--bottom .drawer__panel {
+    top: auto;
+    inset-inline-end: auto;
+    bottom: 0;
+    inset-inline-start: 0;
+    width: 100%;
+    height: var(--size);
+  }
+
+  .drawer--start .drawer__panel {
+    top: 0;
+    inset-inline-end: auto;
+    bottom: auto;
+    inset-inline-start: 0;
+    width: var(--size);
+    height: 100%;
+  }
+
+  .drawer__header {
+    display: flex;
+  }
+
+  .drawer__title {
+    flex: 1 1 auto;
+    font: inherit;
+    font-size: var(--syn-font-size-large);
+    line-height: var(--syn-line-height-dense);
+    padding: var(--header-spacing);
+    margin: 0;
+  }
+
+  .drawer__header-actions {
+    flex-shrink: 0;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: end;
+    gap: var(--syn-spacing-2x-small);
+    padding: 0 var(--header-spacing);
+  }
+
+  .drawer__header-actions syn-icon-button,
+  .drawer__header-actions ::slotted(syn-icon-button) {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    font-size: var(--syn-font-size-medium);
+  }
+
+  .drawer__body {
+    flex: 1 1 auto;
+    display: block;
+    padding: var(--body-spacing);
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .drawer__footer {
+    text-align: right;
+    padding: var(--footer-spacing);
+  }
+
+  .drawer__footer ::slotted(syn-button:not(:last-of-type)) {
+    margin-inline-end: var(--syn-spacing-x-small);
+  }
+
+  .drawer:not(.drawer--has-footer) .drawer__footer {
+    display: none;
+  }
+
+  .drawer__overlay {
+    display: block;
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: var(--syn-overlay-background-color);
+    pointer-events: all;
+  }
+
+  .drawer--contained .drawer__overlay {
+    display: none;
+  }
+
+  @media (forced-colors: active) {
+    .drawer__panel {
+      border: solid 1px var(--syn-color-neutral-0);
+    }
+  }
+
+  ${drawer_custom_styles_default}
+`;
+
+export {
+  drawer_styles_default
+};
+//# sourceMappingURL=chunk.NV7W5R6V.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/drawer/drawer.styles.ts"],
+  "sourcesContent": ["// ---------------------------------------------------------------------\n// \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n// Removing this comment will prevent it from being managed by it.\n// ---------------------------------------------------------------------\n\n/* eslint-disable */\nimport { css } from 'lit';\nimport customStyles from './drawer.custom.styles.js';\nimport componentStyles from '../../styles/component.styles.js';\n\nexport default css`\n\t/* stylelint-disable */\n  ${componentStyles}\n\n  :host {\n    --size: 25rem;\n    --header-spacing: var(--syn-spacing-large);\n    --body-spacing: var(--syn-spacing-large);\n    --footer-spacing: var(--syn-spacing-large);\n\n    display: contents;\n  }\n\n  .drawer {\n    top: 0;\n    inset-inline-start: 0;\n    width: 100%;\n    height: 100%;\n    pointer-events: none;\n    overflow: hidden;\n  }\n\n  .drawer--contained {\n    position: absolute;\n    z-index: initial;\n  }\n\n  .drawer--fixed {\n    position: fixed;\n    z-index: var(--syn-z-index-drawer);\n  }\n\n  .drawer__panel {\n    position: absolute;\n    display: flex;\n    flex-direction: column;\n    z-index: 2;\n    max-width: 100%;\n    max-height: 100%;\n    background-color: var(--syn-panel-background-color);\n    box-shadow: var(--syn-shadow-x-large);\n    overflow: auto;\n    pointer-events: all;\n  }\n\n  .drawer__panel:focus {\n    outline: none;\n  }\n\n  .drawer--top .drawer__panel {\n    top: 0;\n    inset-inline-end: auto;\n    bottom: auto;\n    inset-inline-start: 0;\n    width: 100%;\n    height: var(--size);\n  }\n\n  .drawer--end .drawer__panel {\n    top: 0;\n    inset-inline-end: 0;\n    bottom: auto;\n    inset-inline-start: auto;\n    width: var(--size);\n    height: 100%;\n  }\n\n  .drawer--bottom .drawer__panel {\n    top: auto;\n    inset-inline-end: auto;\n    bottom: 0;\n    inset-inline-start: 0;\n    width: 100%;\n    height: var(--size);\n  }\n\n  .drawer--start .drawer__panel {\n    top: 0;\n    inset-inline-end: auto;\n    bottom: auto;\n    inset-inline-start: 0;\n    width: var(--size);\n    height: 100%;\n  }\n\n  .drawer__header {\n    display: flex;\n  }\n\n  .drawer__title {\n    flex: 1 1 auto;\n    font: inherit;\n    font-size: var(--syn-font-size-large);\n    line-height: var(--syn-line-height-dense);\n    padding: var(--header-spacing);\n    margin: 0;\n  }\n\n  .drawer__header-actions {\n    flex-shrink: 0;\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: end;\n    gap: var(--syn-spacing-2x-small);\n    padding: 0 var(--header-spacing);\n  }\n\n  .drawer__header-actions syn-icon-button,\n  .drawer__header-actions ::slotted(syn-icon-button) {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    font-size: var(--syn-font-size-medium);\n  }\n\n  .drawer__body {\n    flex: 1 1 auto;\n    display: block;\n    padding: var(--body-spacing);\n    overflow: auto;\n    -webkit-overflow-scrolling: touch;\n  }\n\n  .drawer__footer {\n    text-align: right;\n    padding: var(--footer-spacing);\n  }\n\n  .drawer__footer ::slotted(syn-button:not(:last-of-type)) {\n    margin-inline-end: var(--syn-spacing-x-small);\n  }\n\n  .drawer:not(.drawer--has-footer) .drawer__footer {\n    display: none;\n  }\n\n  .drawer__overlay {\n    display: block;\n    position: fixed;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    background-color: var(--syn-overlay-background-color);\n    pointer-events: all;\n  }\n\n  .drawer--contained .drawer__overlay {\n    display: none;\n  }\n\n  @media (forced-colors: active) {\n    .drawer__panel {\n      border: solid 1px var(--syn-color-neutral-0);\n    }\n  }\n\n  ${customStyles}\n`;\n\n"],
+  "mappings": ";;;;;;;;AAMA,SAAS,WAAW;AAIpB,IAAO,wBAAQ;AAAA;AAAA,IAEX,wBAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IA2Jf,4BAAY;AAAA;",
+  "names": []
+}

package/dist/chunks/{chunk.7VOPIPHW.js → chunk.NWWHBSV7.js}

@@ -1,6 +1,6 @@
 import {
   SynRadioGroup
-} from "./chunk.OJREQD2D.js";
+} from "./chunk.4ZGN7AEC.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.7VOPIPHW.js.map
+//# sourceMappingURL=chunk.NWWHBSV7.js.map

package/dist/chunks/{chunk.KP7SYG4K.js → chunk.OJUBVHIK.js}

@@ -1,6 +1,6 @@
 import {
   SynSelect
-} from "./chunk.XXF35USM.js";
+} from "./chunk.AJWDVZRI.js";
 
 // src/components/select/select.ts
 var select_default = SynSelect;
@@ -9,4 +9,4 @@ SynSelect.define("syn-select");
 export {
   select_default
 };
-//# sourceMappingURL=chunk.KP7SYG4K.js.map
+//# sourceMappingURL=chunk.OJUBVHIK.js.map

package/dist/chunks/{chunk.BQG5LF7J.js → chunk.QAUTITK3.js}

@@ -1,7 +1,7 @@
 import {
   __spreadProps,
   __spreadValues
-} from "./chunk.DJOAQ4JU.js";
+} from "./chunk.QNDC5KWA.js";
 
 // src/utilities/animation-registry.ts
 var defaultAnimationRegistry = /* @__PURE__ */ new Map();
@@ -44,4 +44,4 @@ export {
   setAnimation,
   getAnimation
 };
-//# sourceMappingURL=chunk.BQG5LF7J.js.map
+//# sourceMappingURL=chunk.QAUTITK3.js.map

package/dist/chunks/{chunk.DJOAQ4JU.js → chunk.QNDC5KWA.js}

@@ -5,6 +5,9 @@ var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __knownSymbol = (name, symbol) => {
+  return (symbol = Symbol[name]) ? symbol : Symbol.for("Symbol." + name);
+};
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __spreadValues = (a, b) => {
   for (var prop in b || (b = {}))
@@ -27,10 +30,48 @@ var __decorateClass = (decorators, target, key, kind) => {
     __defProp(target, key, result);
   return result;
 };
+var __await = function(promise, isYieldStar) {
+  this[0] = promise;
+  this[1] = isYieldStar;
+};
+var __yieldStar = (value) => {
+  var obj = value[__knownSymbol("asyncIterator")];
+  var isAwait = false;
+  var method;
+  var it = {};
+  if (obj == null) {
+    obj = value[__knownSymbol("iterator")]();
+    method = (k) => it[k] = (x) => obj[k](x);
+  } else {
+    obj = obj.call(value);
+    method = (k) => it[k] = (v) => {
+      if (isAwait) {
+        isAwait = false;
+        if (k === "throw")
+          throw v;
+        return v;
+      }
+      isAwait = true;
+      return {
+        done: false,
+        value: new __await(new Promise((resolve) => {
+          var x = obj[k](v);
+          if (!(x instanceof Object))
+            throw TypeError("Object expected");
+          resolve(x);
+        }), 1)
+      };
+    };
+  }
+  return it[__knownSymbol("iterator")] = () => it, method("next"), "throw" in obj ? method("throw") : it.throw = (x) => {
+    throw x;
+  }, "return" in obj && method("return"), it;
+};
 
 export {
   __spreadValues,
   __spreadProps,
-  __decorateClass
+  __decorateClass,
+  __yieldStar
 };
-//# sourceMappingURL=chunk.DJOAQ4JU.js.map
+//# sourceMappingURL=chunk.QNDC5KWA.js.map

package/dist/chunks/{chunk.CYN675Z6.js → chunk.RS4Z4KDT.js}

@@ -3,16 +3,16 @@ import {
 } from "./chunk.JBYBQ5TQ.js";
 import {
   SynIcon
-} from "./chunk.4MYR27GF.js";
+} from "./chunk.35PHCFSV.js";
 import {
   watch
-} from "./chunk.VZ7S7YYN.js";
+} from "./chunk.AVTU2BGE.js";
 import {
   SynergyElement
-} from "./chunk.GHMKOVA3.js";
+} from "./chunk.WDX7XUUK.js";
 import {
   __decorateClass
-} from "./chunk.DJOAQ4JU.js";
+} from "./chunk.QNDC5KWA.js";
 
 // src/components/radio/radio.component.ts
 import { classMap } from "lit/directives/class-map.js";
@@ -108,4 +108,4 @@ __decorateClass([
 export {
   SynRadio
 };
-//# sourceMappingURL=chunk.CYN675Z6.js.map
+//# sourceMappingURL=chunk.RS4Z4KDT.js.map

package/dist/chunks/{chunk.VQWUZKDS.js → chunk.RVFNEWM3.js}

@@ -1,6 +1,6 @@
 import {
   SynSwitch
-} from "./chunk.TUYEX4KP.js";
+} from "./chunk.JBHQJWOB.js";
 
 // src/components/switch/switch.ts
 var switch_default = SynSwitch;
@@ -9,4 +9,4 @@ SynSwitch.define("syn-switch");
 export {
   switch_default
 };
-//# sourceMappingURL=chunk.VQWUZKDS.js.map
+//# sourceMappingURL=chunk.RVFNEWM3.js.map

package/dist/chunks/{chunk.GOVLCQY5.js → chunk.UG5FC6UD.js}

@@ -1,6 +1,6 @@
 import {
   SynIconButton
-} from "./chunk.XSXBQCWN.js";
+} from "./chunk.DAROCSFO.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.GOVLCQY5.js.map
+//# sourceMappingURL=chunk.UG5FC6UD.js.map

package/dist/chunks/{chunk.GMUVD5B2.js → chunk.UVYPEAQZ.js}

@@ -6,16 +6,16 @@ import {
 } from "./chunk.LAB4YJYE.js";
 import {
   SynIcon
-} from "./chunk.4MYR27GF.js";
+} from "./chunk.35PHCFSV.js";
 import {
   watch
-} from "./chunk.VZ7S7YYN.js";
+} from "./chunk.AVTU2BGE.js";
 import {
   SynergyElement
-} from "./chunk.GHMKOVA3.js";
+} from "./chunk.WDX7XUUK.js";
 import {
   __decorateClass
-} from "./chunk.DJOAQ4JU.js";
+} from "./chunk.QNDC5KWA.js";
 
 // src/components/option/option.component.ts
 import { classMap } from "lit/directives/class-map.js";
@@ -129,4 +129,4 @@ __decorateClass([
 export {
   SynOption
 };
-//# sourceMappingURL=chunk.GMUVD5B2.js.map
+//# sourceMappingURL=chunk.UVYPEAQZ.js.map

package/dist/chunks/chunk.UYD2OVFV.js

@@ -0,0 +1,83 @@
+// src/components/drawer/drawer.custom.styles.ts
+import { css } from "lit";
+var drawer_custom_styles_default = css`
+  :host {
+    /**
+     * Used as the default padding for the drawer title
+     */
+    --header-spacing: var(--syn-spacing-large) var(--syn-spacing-x-small) 0 var(--syn-spacing-large);
+
+    /**
+     * Defines the default body spacing
+     */
+    --body-spacing: var(--syn-spacing-medium) var(--syn-spacing-large);
+
+    /**
+     * Defines the default footer spacing
+     */
+    --footer-spacing: var(--syn-spacing-medium) var(--syn-spacing-large) var(--syn-spacing-large);
+  }
+
+  /**
+   * Synergy uses a border to distinguish the drawer from its background and
+   * removes the default shoelace shadow completely
+   */
+  .drawer__panel {
+    border: 0 solid var(--syn-color-neutral-300);
+    box-shadow: none;
+    color: var(--syn-color-neutral-950);
+  }
+
+  /*
+   * The border of the panel is always placed in direction to the content,
+   * depending on the position of the drawer itself
+   */
+  .drawer--end .drawer__panel {
+    border-left-width: var(--syn-border-width-small);
+  }
+
+  .drawer--start .drawer__panel {
+    border-right-width: var(--syn-border-width-small);
+  }
+
+  .drawer--top .drawer__panel {
+    border-bottom-width: var(--syn-border-width-small);
+  }
+
+  .drawer--bottom .drawer__panel {
+    border-top-width: var(--syn-border-width-small);
+  }
+
+  .drawer__header-actions {
+    align-items: flex-start;
+    gap: var(--syn-spacing-x-small);
+    padding: var(--syn-spacing-large) var(--syn-spacing-x-small) 0 0;
+  }
+
+  .drawer__title {
+    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);
+  }
+
+  /**
+   * 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
+   */
+  .drawer__title,
+  .header-actions {
+    min-height: 64px;
+  }
+
+  .drawer__header-actions syn-icon-button,
+  .drawer__header-actions ::slotted(syn-icon-button) {
+    color: var(--syn-color-neutral-950);
+    font-size: var(--syn-font-size-x-large);
+  }
+`;
+
+export {
+  drawer_custom_styles_default
+};
+//# sourceMappingURL=chunk.UYD2OVFV.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/drawer/drawer.custom.styles.ts"],
+  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  :host {\n    /**\n     * Used as the default padding for the drawer title\n     */\n    --header-spacing: var(--syn-spacing-large) var(--syn-spacing-x-small) 0 var(--syn-spacing-large);\n\n    /**\n     * Defines the default body spacing\n     */\n    --body-spacing: var(--syn-spacing-medium) var(--syn-spacing-large);\n\n    /**\n     * Defines the default footer spacing\n     */\n    --footer-spacing: var(--syn-spacing-medium) var(--syn-spacing-large) var(--syn-spacing-large);\n  }\n\n  /**\n   * Synergy uses a border to distinguish the drawer from its background and\n   * removes the default shoelace shadow completely\n   */\n  .drawer__panel {\n    border: 0 solid var(--syn-color-neutral-300);\n    box-shadow: none;\n    color: var(--syn-color-neutral-950);\n  }\n\n  /*\n   * The border of the panel is always placed in direction to the content,\n   * depending on the position of the drawer itself\n   */\n  .drawer--end .drawer__panel {\n    border-left-width: var(--syn-border-width-small);\n  }\n\n  .drawer--start .drawer__panel {\n    border-right-width: var(--syn-border-width-small);\n  }\n\n  .drawer--top .drawer__panel {\n    border-bottom-width: var(--syn-border-width-small);\n  }\n\n  .drawer--bottom .drawer__panel {\n    border-top-width: var(--syn-border-width-small);\n  }\n\n  .drawer__header-actions {\n    align-items: flex-start;\n    gap: var(--syn-spacing-x-small);\n    padding: var(--syn-spacing-large) var(--syn-spacing-x-small) 0 0;\n  }\n\n  .drawer__title {\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  }\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  .drawer__title,\n  .header-actions {\n    min-height: 64px;\n  }\n\n  .drawer__header-actions syn-icon-button,\n  .drawer__header-actions ::slotted(syn-icon-button) {\n    color: var(--syn-color-neutral-950);\n    font-size: var(--syn-font-size-x-large);\n  }\n`;\n"],
+  "mappings": ";AAAA,SAAS,WAAW;AAEpB,IAAO,+BAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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.GHMKOVA3.js → chunk.WDX7XUUK.js}

@@ -1,7 +1,7 @@
 import {
   __decorateClass,
   __spreadValues
-} from "./chunk.DJOAQ4JU.js";
+} from "./chunk.QNDC5KWA.js";
 
 // src/internal/synergy-element.ts
 import { LitElement } from "lit";
@@ -48,7 +48,7 @@ var SynergyElement = class extends LitElement {
 };
 /* eslint-disable */
 // @ts-expect-error This is auto-injected at build time.
-SynergyElement.version = "1.7.0";
+SynergyElement.version = "1.8.0";
 SynergyElement.dependencies = {};
 __decorateClass([
   property()
@@ -60,4 +60,4 @@ __decorateClass([
 export {
   SynergyElement
 };
-//# sourceMappingURL=chunk.GHMKOVA3.js.map
+//# sourceMappingURL=chunk.WDX7XUUK.js.map