@synergy-design-system/components 1.4.1 → 1.5.1

package/dist/chunks/{chunk.FTXTH5TS.js → chunk.I3FGUPLH.js}

@@ -3,13 +3,13 @@ import {
 } from "./chunk.QHFGD6WW.js";
 import {
   SynIconButton
-} from "./chunk.76T4PEW3.js";
+} from "./chunk.4STUWO3B.js";
 import {
   LocalizeController
 } from "./chunk.LAB4YJYE.js";
 import {
   SynergyElement
-} from "./chunk.Z2DLW3SL.js";
+} from "./chunk.T72SACBE.js";
 import {
   __decorateClass
 } from "./chunk.DJOAQ4JU.js";
@@ -72,4 +72,4 @@ __decorateClass([
 export {
   SynTag
 };
-//# sourceMappingURL=chunk.FTXTH5TS.js.map
+//# sourceMappingURL=chunk.I3FGUPLH.js.map

package/dist/chunks/chunk.IFDNGB63.js

@@ -0,0 +1,96 @@
+import {
+  optgroup_styles_default
+} from "./chunk.KG52EHDB.js";
+import {
+  SynDivider
+} from "./chunk.QCDOK7E4.js";
+import {
+  HasSlotController
+} from "./chunk.XGXFE6IF.js";
+import {
+  watch
+} from "./chunk.VZ7S7YYN.js";
+import {
+  SynergyElement
+} from "./chunk.T72SACBE.js";
+import {
+  __decorateClass
+} from "./chunk.DJOAQ4JU.js";
+
+// src/components/optgroup/optgroup.component.ts
+import { classMap } from "lit/directives/class-map.js";
+import { html } from "lit/static-html.js";
+import { property, query } from "lit/decorators.js";
+var SynOptgroup = class extends SynergyElement {
+  constructor() {
+    super(...arguments);
+    this.hasSlotController = new HasSlotController(this, "[default]", "prefix", "suffix", "label");
+    this.disabled = false;
+    this.label = "";
+  }
+  /**
+   * Syncs the disabled prop for all slotted syn-options when it is triggered
+   */
+  handleDisableOptions() {
+    const { disabled } = this;
+    this.defaultSlot.assignedElements().filter((opt) => opt.tagName.toLowerCase() === "syn-option").forEach((opt) => {
+      opt.disabled = disabled;
+    });
+  }
+  handleDisabledChange() {
+    this.handleDisableOptions();
+  }
+  render() {
+    const { disabled } = this;
+    const hasLabelSlot = this.hasSlotController.test("label");
+    const hasLabel = this.label ? true : !!hasLabelSlot;
+    return html`
+      <div
+        class=${classMap({
+      optgroup: true,
+      "optgroup--has-label": hasLabel,
+      "optgroup--has-prefix": this.hasSlotController.test("prefix"),
+      "optgroup--has-suffix": this.hasSlotController.test("suffix"),
+      "optgroup--is-disabled": this.disabled
+    })}
+        role="${disabled ? "presentation" : "group"}"
+        part="base"
+      >
+        <syn-divider class="optgroup__divider" part="divider"></syn-divider>
+        <div class="optgroup__label-container" part="label-container">
+          <slot name="prefix" part="prefix" class="optgroup__prefix"></slot>
+          <slot name="label" part="label" class="optgroup__label">
+            <span class="optgroup__label-content">
+              ${this.label}
+            </span>
+          </slot>
+          <slot name="suffix" part="suffix" class="optgroup__suffix"></slot>
+        </div>
+        <div class="optgroup__options" role="group" part="options">
+          <slot @slotchange=${this.handleDisableOptions}></slot>
+        </div>
+      </div>
+    `;
+  }
+};
+SynOptgroup.styles = optgroup_styles_default;
+SynOptgroup.dependencies = {
+  "syn-divider": SynDivider
+};
+__decorateClass([
+  query("slot:not([name])")
+], SynOptgroup.prototype, "defaultSlot", 2);
+__decorateClass([
+  property({ reflect: true, type: Boolean })
+], SynOptgroup.prototype, "disabled", 2);
+__decorateClass([
+  property()
+], SynOptgroup.prototype, "label", 2);
+__decorateClass([
+  watch("disabled", { waitUntilFirstUpdate: true })
+], SynOptgroup.prototype, "handleDisabledChange", 1);
+
+export {
+  SynOptgroup
+};
+//# sourceMappingURL=chunk.IFDNGB63.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/optgroup/optgroup.component.ts"],
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/unbound-method */\nimport { classMap } from 'lit/directives/class-map.js';\nimport { html } from 'lit/static-html.js';\nimport { property, query } from 'lit/decorators.js';\nimport type { CSSResultGroup } from 'lit';\nimport { watch } from '../../internal/watch.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport { HasSlotController } from '../../internal/slot.js';\nimport SynDivider from '../divider/divider.component.js';\nimport type SynOption from '../option/option.component.js';\nimport styles from './optgroup.styles.js';\n\n/**\n * @summary The <syn-optgroup> element creates a grouping for <syn-option>s within a <syn-select>.\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-optgroup--docs\n * @status stable\n * @since 1.3.0\n *\n * @dependency syn-divider\n *\n * @slot - The given options. Must be `<syn-option>` elements.\n * @slot prefix - A presentational prefix icon or similar element.\n * @slot label - The label for the optgroup\n * @slot suffix - A presentational suffix icon or similar element.\n *\n * @csspart base - The component's base wrapper.\n * @csspart label-container - The container that wraps prefix, label and base\n * @csspart divider - The divider that is displayed above the content\n * @csspart prefix - The container that wraps the prefix.\n * @csspart suffix - The container that wraps the suffix.\n * @csspart options - The container that wraps the <syn-option> elements.\n *\n * @cssproperty --display-divider - Display property of the divider. Defaults to \"block\"\n */\nexport default class SynOptgroup extends SynergyElement {\n  static styles: CSSResultGroup = styles;\n\n  static dependencies = {\n    'syn-divider': SynDivider,\n  };\n\n  private readonly hasSlotController = new HasSlotController(this, '[default]', 'prefix', 'suffix', 'label');\n\n  @query('slot:not([name])') defaultSlot: HTMLSlotElement;\n\n  /**\n   * Syncs the disabled prop for all slotted syn-options when it is triggered\n   */\n  private handleDisableOptions() {\n    const { disabled } = this;\n    this.defaultSlot\n      .assignedElements()\n      .filter(opt => opt.tagName.toLowerCase() === 'syn-option')\n      .forEach((opt: SynOption) => {\n        // eslint-disable-next-line no-param-reassign\n        opt.disabled = disabled;\n      });\n  }\n\n  /**\n   * Disables all options in the optgroup.\n   */\n  @property({ reflect: true, type: Boolean }) disabled = false;\n\n  /**\n   * The optgroups label. If you need to display HTML, use the `label` slot instead.\n   */\n  @property() label = '';\n\n  @watch('disabled', { waitUntilFirstUpdate: true })\n  handleDisabledChange() {\n    this.handleDisableOptions();\n  }\n\n  render() {\n    const { disabled } = this;\n    const hasLabelSlot = this.hasSlotController.test('label');\n    const hasLabel = this.label ? true : !!hasLabelSlot;\n    return html`\n      <div\n        class=${classMap({\n          optgroup: true,\n          'optgroup--has-label': hasLabel,\n          'optgroup--has-prefix': this.hasSlotController.test('prefix'),\n          'optgroup--has-suffix': this.hasSlotController.test('suffix'),\n          'optgroup--is-disabled': this.disabled,\n        })}\n        role=\"${disabled ? 'presentation' : 'group'}\"\n        part=\"base\"\n      >\n        <syn-divider class=\"optgroup__divider\" part=\"divider\"></syn-divider>\n        <div class=\"optgroup__label-container\" part=\"label-container\">\n          <slot name=\"prefix\" part=\"prefix\" class=\"optgroup__prefix\"></slot>\n          <slot name=\"label\" part=\"label\" class=\"optgroup__label\">\n            <span class=\"optgroup__label-content\">\n              ${this.label}\n            </span>\n          </slot>\n          <slot name=\"suffix\" part=\"suffix\" class=\"optgroup__suffix\"></slot>\n        </div>\n        <div class=\"optgroup__options\" role=\"group\" part=\"options\">\n          <slot @slotchange=${this.handleDisableOptions}></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AACA,SAAS,gBAAgB;AACzB,SAAS,YAAY;AACrB,SAAS,UAAU,aAAa;AA+BhC,IAAqB,cAArB,cAAyC,eAAe;AAAA,EAAxD;AAAA;AAOE,SAAiB,oBAAoB,IAAI,kBAAkB,MAAM,aAAa,UAAU,UAAU,OAAO;AAqB7D,oBAAW;AAK3C,iBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,EAnBZ,uBAAuB;AAC7B,UAAM,EAAE,SAAS,IAAI;AACrB,SAAK,YACF,iBAAiB,EACjB,OAAO,SAAO,IAAI,QAAQ,YAAY,MAAM,YAAY,EACxD,QAAQ,CAAC,QAAmB;AAE3B,UAAI,WAAW;AAAA,IACjB,CAAC;AAAA,EACL;AAAA,EAaA,uBAAuB;AACrB,SAAK,qBAAqB;AAAA,EAC5B;AAAA,EAEA,SAAS;AACP,UAAM,EAAE,SAAS,IAAI;AACrB,UAAM,eAAe,KAAK,kBAAkB,KAAK,OAAO;AACxD,UAAM,WAAW,KAAK,QAAQ,OAAO,CAAC,CAAC;AACvC,WAAO;AAAA;AAAA,gBAEK,SAAS;AAAA,MACf,UAAU;AAAA,MACV,uBAAuB;AAAA,MACvB,wBAAwB,KAAK,kBAAkB,KAAK,QAAQ;AAAA,MAC5D,wBAAwB,KAAK,kBAAkB,KAAK,QAAQ;AAAA,MAC5D,yBAAyB,KAAK;AAAA,IAChC,CAAC,CAAC;AAAA,gBACM,WAAW,iBAAiB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAQnC,KAAK,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,8BAMI,KAAK,oBAAoB;AAAA;AAAA;AAAA;AAAA,EAIrD;AACF;AAxEqB,YACZ,SAAyB;AADb,YAGZ,eAAe;AAAA,EACpB,eAAe;AACjB;AAI2B;AAAA,EAA1B,MAAM,kBAAkB;AAAA,GATN,YASQ;AAmBiB;AAAA,EAA3C,SAAS,EAAE,SAAS,MAAM,MAAM,QAAQ,CAAC;AAAA,GA5BvB,YA4ByB;AAKhC;AAAA,EAAX,SAAS;AAAA,GAjCS,YAiCP;AAGZ;AAAA,EADC,MAAM,YAAY,EAAE,sBAAsB,KAAK,CAAC;AAAA,GAnC9B,YAoCnB;",
+  "names": []
+}

package/dist/chunks/chunk.IFE4G4PB.js

@@ -0,0 +1,12 @@
+import {
+  SynOptgroup
+} from "./chunk.IFDNGB63.js";
+
+// src/components/optgroup/optgroup.ts
+var optgroup_default = SynOptgroup;
+SynOptgroup.define("syn-optgroup");
+
+export {
+  optgroup_default
+};
+//# sourceMappingURL=chunk.IFE4G4PB.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/optgroup/optgroup.ts"],
+  "sourcesContent": ["/* eslint-disable */\nimport SynOptGroup from './optgroup.component.js';\n\nexport * from './optgroup.component.js';\nexport default SynOptGroup;\n\nSynOptGroup.define('syn-optgroup');\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'syn-optgroup': SynOptGroup;\n  }\n}\n"],
+  "mappings": ";;;;;AAIA,IAAO,mBAAQ;AAEf,YAAY,OAAO,cAAc;",
+  "names": []
+}

package/dist/chunks/{chunk.MWDOOCSU.js → chunk.IKKMWFWH.js}

@@ -1,6 +1,6 @@
 import {
   button_styles_default
-} from "./chunk.CQ2JMH2J.js";
+} from "./chunk.OJ4KOC7R.js";
 
 // src/components/radio-button/radio-button.styles.ts
 import { css } from "lit";
@@ -34,4 +34,4 @@ var radio_button_styles_default = css`
 export {
   radio_button_styles_default
 };
-//# sourceMappingURL=chunk.MWDOOCSU.js.map
+//# sourceMappingURL=chunk.IKKMWFWH.js.map

package/dist/chunks/{chunk.JMETBEU6.js → chunk.JDDBS57F.js}

@@ -15,10 +15,10 @@ import {
 } from "./chunk.VZ7S7YYN.js";
 import {
   SynButtonGroup
-} from "./chunk.MTDXRKO3.js";
+} from "./chunk.V57DLRD2.js";
 import {
   SynergyElement
-} from "./chunk.Z2DLW3SL.js";
+} from "./chunk.T72SACBE.js";
 import {
   __decorateClass
 } from "./chunk.DJOAQ4JU.js";
@@ -348,4 +348,4 @@ __decorateClass([
 export {
   SynRadioGroup
 };
-//# sourceMappingURL=chunk.JMETBEU6.js.map
+//# sourceMappingURL=chunk.JDDBS57F.js.map

package/dist/chunks/chunk.JN7CLMQZ.js

@@ -0,0 +1,53 @@
+import {
+  component_styles_default
+} from "./chunk.O7USYXBT.js";
+
+// src/components/popup/popup.styles.ts
+import { css } from "lit";
+var popup_styles_default = css`
+	/* stylelint-disable */
+  ${component_styles_default}
+
+  :host {
+    --arrow-color: var(--syn-color-neutral-1000);
+    --arrow-size: 6px;
+
+    /*
+     * These properties are computed to account for the arrow's dimensions after being rotated 45º. The constant
+     * 0.7071 is derived from sin(45), which is the diagonal size of the arrow's container after rotating.
+     */
+    --arrow-size-diagonal: calc(var(--arrow-size) * 0.7071);
+    --arrow-padding-offset: calc(var(--arrow-size-diagonal) - var(--arrow-size));
+
+    display: contents;
+  }
+
+  .popup {
+    position: absolute;
+    isolation: isolate;
+    max-width: var(--auto-size-available-width, none);
+    max-height: var(--auto-size-available-height, none);
+  }
+
+  .popup--fixed {
+    position: fixed;
+  }
+
+  .popup:not(.popup--active) {
+    display: none;
+  }
+
+  .popup__arrow {
+    position: absolute;
+    width: calc(var(--arrow-size-diagonal) * 2);
+    height: calc(var(--arrow-size-diagonal) * 2);
+    rotate: 45deg;
+    background: var(--arrow-color);
+    z-index: -1;
+  }
+`;
+
+export {
+  popup_styles_default
+};
+//# sourceMappingURL=chunk.JN7CLMQZ.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/popup/popup.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 componentStyles from '../../styles/component.styles.js';\n\nexport default css`\n\t/* stylelint-disable */\n  ${componentStyles}\n\n  :host {\n    --arrow-color: var(--syn-color-neutral-1000);\n    --arrow-size: 6px;\n\n    /*\n     * These properties are computed to account for the arrow's dimensions after being rotated 45\u00BA. The constant\n     * 0.7071 is derived from sin(45), which is the diagonal size of the arrow's container after rotating.\n     */\n    --arrow-size-diagonal: calc(var(--arrow-size) * 0.7071);\n    --arrow-padding-offset: calc(var(--arrow-size-diagonal) - var(--arrow-size));\n\n    display: contents;\n  }\n\n  .popup {\n    position: absolute;\n    isolation: isolate;\n    max-width: var(--auto-size-available-width, none);\n    max-height: var(--auto-size-available-height, none);\n  }\n\n  .popup--fixed {\n    position: fixed;\n  }\n\n  .popup:not(.popup--active) {\n    display: none;\n  }\n\n  .popup__arrow {\n    position: absolute;\n    width: calc(var(--arrow-size-diagonal) * 2);\n    height: calc(var(--arrow-size-diagonal) * 2);\n    rotate: 45deg;\n    background: var(--arrow-color);\n    z-index: -1;\n  }\n`;\n"],
+  "mappings": ";;;;;AAMA,SAAS,WAAW;AAGpB,IAAO,uBAAQ;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;",
+  "names": []
+}

package/dist/chunks/{chunk.IUC3AWAU.js → chunk.K55MKNUR.js}

@@ -43,9 +43,9 @@ var button_custom_styles_default = css`
    * Standard buttons
    */
   .button--filled.button--primary.button--disabled {
-    background-color: var(--syn-color-neutral-400);
-    border-color: var(--syn-color-neutral-400);
-    color: var(--syn-color-neutral-600);
+    background-color: var(--syn-color-neutral-600);
+    border-color: var(--syn-color-neutral-600);
+    color: var(--syn-color-neutral-0);
   }
 
   .button--filled.button--primary:hover:not(.button--disabled) {
@@ -65,8 +65,8 @@ var button_custom_styles_default = css`
    */
   .button--outline.button--primary.button--disabled {
     background: none;
-    border-color: var(--syn-color-neutral-400);
-    color: var(--syn-color-neutral-400);
+    border-color: var(--syn-color-neutral-600);
+    color: var(--syn-color-neutral-600);
   }
 
   .button--outline.button--primary:hover:not(.button--disabled),
@@ -96,7 +96,7 @@ var button_custom_styles_default = css`
   }
 
   .button--text.button--primary.button--disabled {
-    color: var(--syn-color-neutral-400);
+    color: var(--syn-color-neutral-600);
   }
 
   /**
@@ -153,4 +153,4 @@ var button_custom_styles_default = css`
 export {
   button_custom_styles_default
 };
-//# sourceMappingURL=chunk.IUC3AWAU.js.map
+//# sourceMappingURL=chunk.K55MKNUR.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/button/button.custom.styles.ts"],
+  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  .button:focus-visible {\n    outline: var(--syn-focus-ring-color) solid var(--syn-focus-ring-width);\n    outline-offset: var(--syn-focus-ring-width);\n  }\n\n  /*\n   * Adjustments for button label paddings\n   * @see https://github.com/synergy-design-system/synergy-design-system/issues/243\n   */\n  .button--has-prefix.button--small .button__label {\n    padding-inline-start: var(--syn-spacing-2x-small);\n  }\n\n  .button--has-suffix.button--small .button__label,\n  .button--caret.button--small .button__label {\n    padding-inline-end: var(--syn-spacing-2x-small);\n  }\n\n  .button--has-prefix.button--medium .button__label {\n    padding-inline-start: var(--syn-spacing-x-small);\n  }\n\n  .button--has-suffix.button--medium .button__label,\n  .button--caret.button--medium .button__label {\n    padding-inline-end: var(--syn-spacing-x-small);\n  }\n\n  /**\n   * Size modifiers\n   */\n  .button.button--medium.button--has-label .button__label {\n    font-size: var(--syn-font-size-medium);\n  } \n\n  .button.button--large.button--has-label .button__label {\n    font-size: var(--syn-font-size-large);\n  }\n\n  /*\n   * Standard buttons\n   */\n  .button--filled.button--primary.button--disabled {\n    background-color: var(--syn-color-neutral-600);\n    border-color: var(--syn-color-neutral-600);\n    color: var(--syn-color-neutral-0);\n  }\n\n  .button--filled.button--primary:hover:not(.button--disabled) {\n    background-color: var(--syn-color-primary-900);\n    border-color: var(--syn-color-primary-900);\n    color: var(--syn-color-neutral-0);\n  }\n\n  .button--filled.button--primary:active:not(.button--disabled) {\n    background-color: var(--syn-color-primary-950);\n    border-color: var(--syn-color-primary-950);\n    color: var(--syn-color-neutral-0);\n  }\n\n  /*\n   * Outline buttons\n   */\n  .button--outline.button--primary.button--disabled {\n    background: none;\n    border-color: var(--syn-color-neutral-600);\n    color: var(--syn-color-neutral-600);\n  }\n\n  .button--outline.button--primary:hover:not(.button--disabled),\n  .button--outline.button--primary.button--checked:not(.button--disabled) {\n    background: none;\n    border-color: var(--syn-color-primary-900);\n    color: var(--syn-color-primary-900);\n  }\n\n  .button--outline.button--primary:active:not(.button--disabled) {\n    background: inherit;\n    border-color:  var(--syn-color-primary-950);\n    color:  var(--syn-color-primary-950);\n  }\n\n  /*\n   * Text buttons\n   */\n  .button--text:hover:not(.button--disabled) {\n    color: var(--syn-color-primary-900);\n  }\n\n  .button--text.button--primary:active:not(.button--disabled) {\n    background: inherit;\n    border-color:  none;\n    color:  var(--syn-color-primary-950);\n  }\n\n  .button--text.button--primary.button--disabled {\n    color: var(--syn-color-neutral-600);\n  }\n\n  /**\n   * Button spacing\n   */\n  .button.button--small.button--has-label.button--has-prefix {\n    padding-inline-start: var(--syn-spacing-small);\n  }\n\n  .button.button--small.button--has-label.button--has-suffix {\n    padding-inline-end: var(--syn-spacing-small);\n  }\n\n  .button.button--small.button--has-prefix .button__prefix, \n  .button.button--small.button--has-suffix .button__suffix {\n    font-size: var(--syn-spacing-medium);\n  }\n\n  .button.button--medium.button--has-label.button--has-prefix {\n    padding-inline-start: var(--syn-spacing-medium);\n  } \n\n  .button.button--medium.button--has-label.button--has-suffix {\n    padding-inline-end: var(--syn-spacing-medium);\n  }\n\n  .button.button--medium.button--has-prefix .button__prefix, \n  .button.button--medium.button--has-suffix .button__suffix {\n    font-size: var(--syn-spacing-large);\n  }\n\n  .button.button--large.button--has-label.button--has-prefix {\n    padding-inline-start: var(--syn-spacing-large);\n  }\n\n  .button.button--large.button--has-label.button--has-prefix .button__label {\n    padding-inline-start: var(--syn-spacing-small);\n  }\n\n  .button.button--large.button--has-label.button--has-suffix {\n    padding-inline-end: var(--syn-spacing-large);\n  }\n\n  .button.button--large.button--has-label.button--has-suffix .button__label {\n    padding-inline-end: var(--syn-spacing-small);\n  }\n\n  .button.button--large.button--has-prefix .button__prefix, \n  .button.button--large.button--has-suffix .button__suffix {\n    font-size: var(--syn-font-size-2x-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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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.T5GFDZAG.js → chunk.K5NVNHHD.js}

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

package/dist/chunks/{chunk.AR7MHBEC.js → chunk.KG3FXWCX.js}

@@ -1,6 +1,6 @@
 import {
   radio_button_styles_default
-} from "./chunk.MWDOOCSU.js";
+} from "./chunk.IKKMWFWH.js";
 import {
   HasSlotController
 } from "./chunk.XGXFE6IF.js";
@@ -9,7 +9,7 @@ import {
 } from "./chunk.VZ7S7YYN.js";
 import {
   SynergyElement
-} from "./chunk.Z2DLW3SL.js";
+} from "./chunk.T72SACBE.js";
 import {
   __decorateClass
 } from "./chunk.DJOAQ4JU.js";
@@ -124,4 +124,4 @@ __decorateClass([
 export {
   SynRadioButton
 };
-//# sourceMappingURL=chunk.AR7MHBEC.js.map
+//# sourceMappingURL=chunk.KG3FXWCX.js.map

package/dist/chunks/chunk.KG52EHDB.js

@@ -0,0 +1,60 @@
+// src/components/optgroup/optgroup.styles.ts
+import { css } from "lit";
+var optgroup_styles_default = css`
+  :host {
+    --display-divider: block;
+  }
+
+  .optgroup__divider {
+    --spacing: var(--syn-spacing-x-small);
+
+    display: var(--display-divider);
+  }
+
+  .optgroup__label-container {
+    align-items: center;
+    box-sizing: border-box;
+    color: var(--syn-color-neutral-950);
+    display: flex;
+    gap: var(--syn-spacing-small);
+  }
+
+  /**
+   * Only show the label container when there is a label at all
+   */
+  .optgroup--has-prefix .optgroup__label-container,
+  .optgroup--has-label .optgroup__label-container,
+  .optgroup--has-suffix .optgroup__label-container {
+    padding-block: var(--syn-spacing-small);
+    padding-inline: var(--syn-spacing-medium);
+  }
+
+  /**
+   * Format main label.
+   * Make sure this works for props and slotted content
+   */
+  .optgroup__label-content,
+  .optgroup__label::slotted(*) {
+    flex: 1;
+    font-family: var(--syn-font-sans);
+    font-size: var(--syn-font-size-medium);
+    font-weight: var(--syn-font-weight-semibold);
+    line-height: var(--syn-line-height-normal);
+  }
+
+  /* Disabled Label */
+  .optgroup--is-disabled .optgroup__label-container {
+    opacity: var(--syn-input-disabled-opacity);
+  }
+
+  .optgroup__prefix,
+  .optgroup__suffix {
+    color: var(--syn-color-neutral-950);
+    font-size: var(--syn-spacing-large);
+  }
+`;
+
+export {
+  optgroup_styles_default
+};
+//# sourceMappingURL=chunk.KG52EHDB.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/optgroup/optgroup.styles.ts"],
+  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  :host {\n    --display-divider: block;\n  }\n\n  .optgroup__divider {\n    --spacing: var(--syn-spacing-x-small);\n\n    display: var(--display-divider);\n  }\n\n  .optgroup__label-container {\n    align-items: center;\n    box-sizing: border-box;\n    color: var(--syn-color-neutral-950);\n    display: flex;\n    gap: var(--syn-spacing-small);\n  }\n\n  /**\n   * Only show the label container when there is a label at all\n   */\n  .optgroup--has-prefix .optgroup__label-container,\n  .optgroup--has-label .optgroup__label-container,\n  .optgroup--has-suffix .optgroup__label-container {\n    padding-block: var(--syn-spacing-small);\n    padding-inline: var(--syn-spacing-medium);\n  }\n\n  /**\n   * Format main label.\n   * Make sure this works for props and slotted content\n   */\n  .optgroup__label-content,\n  .optgroup__label::slotted(*) {\n    flex: 1;\n    font-family: var(--syn-font-sans);\n    font-size: var(--syn-font-size-medium);\n    font-weight: var(--syn-font-weight-semibold);\n    line-height: var(--syn-line-height-normal);\n  }\n\n  /* Disabled Label */\n  .optgroup--is-disabled .optgroup__label-container {\n    opacity: var(--syn-input-disabled-opacity);\n  }\n\n  .optgroup__prefix,\n  .optgroup__suffix {\n    color: var(--syn-color-neutral-950);\n    font-size: var(--syn-spacing-large);\n  }\n`;\n"],
+  "mappings": ";AAAA,SAAS,WAAW;AAEpB,IAAO,0BAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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.ND73VYBT.js → chunk.KRTGIYIX.js}

@@ -1,6 +1,6 @@
 import {
   SynRadioButton
-} from "./chunk.AR7MHBEC.js";
+} from "./chunk.KG3FXWCX.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.ND73VYBT.js.map
+//# sourceMappingURL=chunk.KRTGIYIX.js.map

package/dist/chunks/{chunk.LL3W2QAU.js → chunk.M3P4B2GP.js}

@@ -3,13 +3,13 @@ import {
 } from "./chunk.JBYBQ5TQ.js";
 import {
   SynIcon
-} from "./chunk.QTQBU2M5.js";
+} from "./chunk.OKG27K27.js";
 import {
   watch
 } from "./chunk.VZ7S7YYN.js";
 import {
   SynergyElement
-} from "./chunk.Z2DLW3SL.js";
+} from "./chunk.T72SACBE.js";
 import {
   __decorateClass
 } from "./chunk.DJOAQ4JU.js";
@@ -108,4 +108,4 @@ __decorateClass([
 export {
   SynRadio
 };
-//# sourceMappingURL=chunk.LL3W2QAU.js.map
+//# sourceMappingURL=chunk.M3P4B2GP.js.map

package/dist/chunks/{chunk.SPBKTD7Y.js → chunk.O5XNATYN.js}

@@ -1,6 +1,6 @@
 import {
   SynIcon
-} from "./chunk.QTQBU2M5.js";
+} from "./chunk.OKG27K27.js";
 
 // src/components/icon/icon.ts
 var icon_default = SynIcon;
@@ -9,4 +9,4 @@ SynIcon.define("syn-icon");
 export {
   icon_default
 };
-//# sourceMappingURL=chunk.SPBKTD7Y.js.map
+//# sourceMappingURL=chunk.O5XNATYN.js.map

package/dist/chunks/{chunk.5VSN3F2E.js → chunk.OAIA6MLB.js}

@@ -1,6 +1,6 @@
 import {
   SynRadio
-} from "./chunk.LL3W2QAU.js";
+} from "./chunk.M3P4B2GP.js";
 
 // src/components/radio/radio.ts
 var radio_default = SynRadio;
@@ -9,4 +9,4 @@ SynRadio.define("syn-radio");
 export {
   radio_default
 };
-//# sourceMappingURL=chunk.5VSN3F2E.js.map
+//# sourceMappingURL=chunk.OAIA6MLB.js.map

package/dist/chunks/{chunk.CQ2JMH2J.js → chunk.OJ4KOC7R.js}

@@ -1,6 +1,6 @@
 import {
   button_custom_styles_default
-} from "./chunk.IUC3AWAU.js";
+} from "./chunk.K55MKNUR.js";
 import {
   component_styles_default
 } from "./chunk.O7USYXBT.js";
@@ -373,4 +373,4 @@ var button_styles_default = css`
 export {
   button_styles_default
 };
-//# sourceMappingURL=chunk.CQ2JMH2J.js.map
+//# sourceMappingURL=chunk.OJ4KOC7R.js.map

package/dist/chunks/{chunk.QTQBU2M5.js → chunk.OKG27K27.js}

@@ -11,7 +11,7 @@ import {
 } from "./chunk.VZ7S7YYN.js";
 import {
   SynergyElement
-} from "./chunk.Z2DLW3SL.js";
+} from "./chunk.T72SACBE.js";
 import {
   __decorateClass
 } from "./chunk.DJOAQ4JU.js";
@@ -172,4 +172,4 @@ __decorateClass([
 export {
   SynIcon
 };
-//# sourceMappingURL=chunk.QTQBU2M5.js.map
+//# sourceMappingURL=chunk.OKG27K27.js.map

package/dist/chunks/chunk.OWMT6OL2.js

@@ -0,0 +1,82 @@
+// src/components/select/select.custom.styles.ts
+import { css } from "lit";
+var select_custom_styles_default = css`
+  /* Clear button */
+  .select__clear {
+    color: var(--syn-input-icon-icon-clearable-color);
+    font-size: var(--syn-spacing-large);
+  }
+
+  .select--medium .select__clear {
+    margin-inline-start: var(--syn-spacing-small);
+  }
+
+  /* Expand icon */
+  .select__expand-icon {
+    color: var(--syn-color-neutral-950);
+    font-size: var(--syn-spacing-large);
+    margin-inline-start: var(--syn-spacing-small);
+  }
+
+  /* Change select border on hover */
+  .select:not(.select--disabled):hover .select__combobox {
+    border-color: var(--syn-input-color-hover);
+  }
+
+  /* Prefix */
+
+  /* Small */
+  .select--small .select__prefix::slotted(*) {
+    margin-inline-end: var(--syn-spacing-x-small);
+  }
+
+  .select--medium .select__prefix::slotted(*) {
+    margin-inline-end: var(--syn-input-spacing-small);
+  }
+
+  .select--large .select__prefix::slotted(*) {
+    margin-inline-end: var(--syn-input-spacing-medium);
+  }
+
+  .select__prefix {
+    color: var(--syn-input-help-text-color);
+  }
+
+  /* Multi Select */
+  .select__tags {
+    margin-inline-start: var(--syn-spacing-medium);
+  }
+
+  .select--small .select__tags {
+    gap: var(--syn-spacing-2x-small);
+  }
+
+  .select--medium .select__tags {
+    gap: var(--syn-spacing-x-small);
+  }
+
+  .select--large .select__tags {
+    gap: var(--syn-spacing-small);
+  }
+
+  /* Listbox */
+  .select__listbox {
+    /* @todo: Should be --syn-border-radius-medium, which should be set to 0 */
+    border-radius: 0;
+    box-shadow: var(--syn-shadow-medium);
+  }
+
+  /**
+   * Make sure to hide the syn-divider for the first syn-optgroup
+   * Note! ::slotted does currently not work with ::part, so we
+   * opted for using a css variable here.
+   */
+  .select__listbox ::slotted(syn-optgroup:first-of-type) {
+    --display-divider: none;
+  }
+`;
+
+export {
+  select_custom_styles_default
+};
+//# sourceMappingURL=chunk.OWMT6OL2.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/select/select.custom.styles.ts"],
+  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  /* Clear button */\n  .select__clear {\n    color: var(--syn-input-icon-icon-clearable-color);\n    font-size: var(--syn-spacing-large);\n  }\n\n  .select--medium .select__clear {\n    margin-inline-start: var(--syn-spacing-small);\n  }\n\n  /* Expand icon */\n  .select__expand-icon {\n    color: var(--syn-color-neutral-950);\n    font-size: var(--syn-spacing-large);\n    margin-inline-start: var(--syn-spacing-small);\n  }\n\n  /* Change select border on hover */\n  .select:not(.select--disabled):hover .select__combobox {\n    border-color: var(--syn-input-color-hover);\n  }\n\n  /* Prefix */\n\n  /* Small */\n  .select--small .select__prefix::slotted(*) {\n    margin-inline-end: var(--syn-spacing-x-small);\n  }\n\n  .select--medium .select__prefix::slotted(*) {\n    margin-inline-end: var(--syn-input-spacing-small);\n  }\n\n  .select--large .select__prefix::slotted(*) {\n    margin-inline-end: var(--syn-input-spacing-medium);\n  }\n\n  .select__prefix {\n    color: var(--syn-input-help-text-color);\n  }\n\n  /* Multi Select */\n  .select__tags {\n    margin-inline-start: var(--syn-spacing-medium);\n  }\n\n  .select--small .select__tags {\n    gap: var(--syn-spacing-2x-small);\n  }\n\n  .select--medium .select__tags {\n    gap: var(--syn-spacing-x-small);\n  }\n\n  .select--large .select__tags {\n    gap: var(--syn-spacing-small);\n  }\n\n  /* Listbox */\n  .select__listbox {\n    /* @todo: Should be --syn-border-radius-medium, which should be set to 0 */\n    border-radius: 0;\n    box-shadow: var(--syn-shadow-medium);\n  }\n\n  /**\n   * Make sure to hide the syn-divider for the first syn-optgroup\n   * Note! ::slotted does currently not work with ::part, so we\n   * opted for using a css variable here.\n   */\n  .select__listbox ::slotted(syn-optgroup:first-of-type) {\n    --display-divider: none;\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;",
+  "names": []
+}

package/dist/chunks/{chunk.H3LRV4ST.js → chunk.QCDOK7E4.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.VZ7S7YYN.js";
 import {
   SynergyElement
-} from "./chunk.Z2DLW3SL.js";
+} from "./chunk.T72SACBE.js";
 import {
   __decorateClass
 } from "./chunk.DJOAQ4JU.js";
@@ -37,4 +37,4 @@ __decorateClass([
 export {
   SynDivider
 };
-//# sourceMappingURL=chunk.H3LRV4ST.js.map
+//# sourceMappingURL=chunk.QCDOK7E4.js.map

package/dist/chunks/{chunk.XBVEUULD.js → chunk.QPANY6PY.js}

@@ -1,6 +1,6 @@
 import {
   SynButton
-} from "./chunk.WNPKDJ4G.js";
+} from "./chunk.DVCDA2IN.js";
 
 // src/components/button/button.ts
 var button_default = SynButton;
@@ -9,4 +9,4 @@ SynButton.define("syn-button");
 export {
   button_default
 };
-//# sourceMappingURL=chunk.XBVEUULD.js.map
+//# sourceMappingURL=chunk.QPANY6PY.js.map