@synergy-design-system/components 1.4.0 → 1.5.0

package/dist/chunks/chunk.3B24TYVN.js

@@ -0,0 +1,51 @@
+// src/components/option/option.custom.styles.ts
+import { css } from "lit";
+var option_custom_styles_default = css`
+  .option {
+    /* Height is dependent on line-height of .option__label, which does not fit completely to layout */
+    min-height: 48px;
+    padding: var(--syn-spacing-small) var(--syn-spacing-medium);
+  }
+
+  .option:not(.option--current) {
+    color: var(--syn-color-neutral-950);
+  }
+
+  .option__label {
+    line-height: var(--syn-line-height-normal);
+  }
+
+  .option__check {
+    color: var(--syn-color-primary-600);
+    font-size: var(--syn-spacing-large);
+  }
+
+  .option .option__check {
+    padding-inline-end: var(--syn-spacing-small);
+  }
+
+  /* Invert the check mark when keyboard navigation is used */
+  .option--current .option__check {
+    color: var(--syn-color-neutral-0);
+  }
+
+  /* Use larger spacing between icons and content */
+  .option__prefix::slotted(*) {
+    margin-inline-end: var(--syn-spacing-small);
+  }
+
+  .option__suffix::slotted(*) {
+    margin-inline-start: var(--syn-spacing-small);
+  }
+
+  /* Set correct icon size when someone uses syn-icon in the slots */
+  .option__prefix::slotted(syn-icon),
+  .option__suffix::slotted(syn-icon) {
+    font-size: var(--syn-spacing-large);
+  }
+`;
+
+export {
+  option_custom_styles_default
+};
+//# sourceMappingURL=chunk.3B24TYVN.js.map

package/dist/chunks/chunk.3B24TYVN.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/option/option.custom.styles.ts"],
+  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  .option {\n    /* Height is dependent on line-height of .option__label, which does not fit completely to layout */\n    min-height: 48px;\n    padding: var(--syn-spacing-small) var(--syn-spacing-medium);\n  }\n\n  .option:not(.option--current) {\n    color: var(--syn-color-neutral-950);\n  }\n\n  .option__label {\n    line-height: var(--syn-line-height-normal);\n  }\n\n  .option__check {\n    color: var(--syn-color-primary-600);\n    font-size: var(--syn-spacing-large);\n  }\n\n  .option .option__check {\n    padding-inline-end: var(--syn-spacing-small);\n  }\n\n  /* Invert the check mark when keyboard navigation is used */\n  .option--current .option__check {\n    color: var(--syn-color-neutral-0);\n  }\n\n  /* Use larger spacing between icons and content */\n  .option__prefix::slotted(*) {\n    margin-inline-end: var(--syn-spacing-small);\n  }\n\n  .option__suffix::slotted(*) {\n    margin-inline-start: var(--syn-spacing-small);\n  }\n\n  /* Set correct icon size when someone uses syn-icon in the slots */\n  .option__prefix::slotted(syn-icon),\n  .option__suffix::slotted(syn-icon) {\n    font-size: var(--syn-spacing-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;",
+  "names": []
+}

package/dist/chunks/chunk.3HPG73GG.js

@@ -0,0 +1,132 @@
+import {
+  option_styles_default
+} from "./chunk.W6V7TPGK.js";
+import {
+  LocalizeController
+} from "./chunk.LAB4YJYE.js";
+import {
+  SynIcon
+} from "./chunk.63IJYG6Q.js";
+import {
+  watch
+} from "./chunk.VZ7S7YYN.js";
+import {
+  SynergyElement
+} from "./chunk.C5W2Y6KW.js";
+import {
+  __decorateClass
+} from "./chunk.DJOAQ4JU.js";
+
+// src/components/option/option.component.ts
+import { classMap } from "lit/directives/class-map.js";
+import { html } from "lit";
+import { property, query, state } from "lit/decorators.js";
+var SynOption = class extends SynergyElement {
+  constructor() {
+    super(...arguments);
+    // @ts-expect-error - Controller is currently unused
+    this.localize = new LocalizeController(this);
+    this.current = false;
+    this.selected = false;
+    this.hasHover = false;
+    this.value = "";
+    this.disabled = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "option");
+    this.setAttribute("aria-selected", "false");
+  }
+  handleDefaultSlotChange() {
+    const textLabel = this.getTextLabel();
+    if (typeof this.cachedTextLabel === "undefined") {
+      this.cachedTextLabel = textLabel;
+      return;
+    }
+    if (textLabel !== this.cachedTextLabel) {
+      this.cachedTextLabel = textLabel;
+      this.emit("slotchange", { bubbles: true, composed: false, cancelable: false });
+    }
+  }
+  handleMouseEnter() {
+    this.hasHover = true;
+  }
+  handleMouseLeave() {
+    this.hasHover = false;
+  }
+  handleDisabledChange() {
+    this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
+  }
+  handleSelectedChange() {
+    this.setAttribute("aria-selected", this.selected ? "true" : "false");
+  }
+  handleValueChange() {
+    if (typeof this.value !== "string") {
+      this.value = String(this.value);
+    }
+    if (this.value.includes(" ")) {
+      console.error(`Option values cannot include a space. All spaces have been replaced with underscores.`, this);
+      this.value = this.value.replace(/ /g, "_");
+    }
+  }
+  /** Returns a plain text label based on the option's content. */
+  getTextLabel() {
+    var _a;
+    return ((_a = this.textContent) != null ? _a : "").trim();
+  }
+  render() {
+    return html`
+      <div
+        part="base"
+        class=${classMap({
+      option: true,
+      "option--current": this.current,
+      "option--disabled": this.disabled,
+      "option--selected": this.selected,
+      "option--hover": this.hasHover
+    })}
+        @mouseenter=${this.handleMouseEnter}
+        @mouseleave=${this.handleMouseLeave}
+      >
+        <syn-icon part="checked-icon" class="option__check" name="check" library="system" aria-hidden="true"></syn-icon>
+        <slot part="prefix" name="prefix" class="option__prefix"></slot>
+        <slot part="label" class="option__label" @slotchange=${this.handleDefaultSlotChange}></slot>
+        <slot part="suffix" name="suffix" class="option__suffix"></slot>
+      </div>
+    `;
+  }
+};
+SynOption.styles = option_styles_default;
+SynOption.dependencies = { "syn-icon": SynIcon };
+__decorateClass([
+  query(".option__label")
+], SynOption.prototype, "defaultSlot", 2);
+__decorateClass([
+  state()
+], SynOption.prototype, "current", 2);
+__decorateClass([
+  state()
+], SynOption.prototype, "selected", 2);
+__decorateClass([
+  state()
+], SynOption.prototype, "hasHover", 2);
+__decorateClass([
+  property({ reflect: true })
+], SynOption.prototype, "value", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SynOption.prototype, "disabled", 2);
+__decorateClass([
+  watch("disabled")
+], SynOption.prototype, "handleDisabledChange", 1);
+__decorateClass([
+  watch("selected")
+], SynOption.prototype, "handleSelectedChange", 1);
+__decorateClass([
+  watch("value")
+], SynOption.prototype, "handleValueChange", 1);
+
+export {
+  SynOption
+};
+//# sourceMappingURL=chunk.3HPG73GG.js.map

package/dist/chunks/chunk.3HPG73GG.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/option/option.component.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 { classMap } from 'lit/directives/class-map.js';\nimport { html } from 'lit';\nimport { LocalizeController } from '../../utilities/localize.js';\nimport { property, query, state } from 'lit/decorators.js';\nimport { watch } from '../../internal/watch.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport SynIcon from '../icon/icon.component.js';\nimport styles from './option.styles.js';\nimport type { CSSResultGroup } from 'lit';\n\n/**\n * @summary Options define the selectable items within various form controls such as [select](/components/select).\n * @documentation https://synergy.style/components/option\n * @status stable\n * @since 2.0\n *\n * @dependency syn-icon\n *\n * @slot - The option's label.\n * @slot prefix - Used to prepend an icon or similar element to the menu item.\n * @slot suffix - Used to append an icon or similar element to the menu item.\n *\n * @csspart checked-icon - The checked icon, an `<syn-icon>` element.\n * @csspart base - The component's base wrapper.\n * @csspart label - The option's label.\n * @csspart prefix - The container that wraps the prefix.\n * @csspart suffix - The container that wraps the suffix.\n */\nexport default class SynOption extends SynergyElement {\n  static styles: CSSResultGroup = styles;\n  static dependencies = { 'syn-icon': SynIcon };\n\n  private cachedTextLabel: string;\n  // @ts-expect-error - Controller is currently unused\n  private readonly localize = new LocalizeController(this);\n\n  @query('.option__label') defaultSlot: HTMLSlotElement;\n\n  @state() current = false; // the user has keyed into the option, but hasn't selected it yet (shows a highlight)\n  @state() selected = false; // the option is selected and has aria-selected=\"true\"\n  @state() hasHover = false; // we need this because Safari doesn't honor :hover styles while dragging\n\n  /**\n   * The option's value. When selected, the containing form control will receive this value. The value must be unique\n   * from other options in the same group. Values may not contain spaces, as spaces are used as delimiters when listing\n   * multiple values.\n   */\n  @property({ reflect: true }) value = '';\n\n  /** Draws the option in a disabled state, preventing selection. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'option');\n    this.setAttribute('aria-selected', 'false');\n  }\n\n  private handleDefaultSlotChange() {\n    const textLabel = this.getTextLabel();\n\n    // Ignore the first time the label is set\n    if (typeof this.cachedTextLabel === 'undefined') {\n      this.cachedTextLabel = textLabel;\n      return;\n    }\n\n    // When the label changes, emit a slotchange event so parent controls see it\n    if (textLabel !== this.cachedTextLabel) {\n      this.cachedTextLabel = textLabel;\n      this.emit('slotchange', { bubbles: true, composed: false, cancelable: false });\n    }\n  }\n\n  private handleMouseEnter() {\n    this.hasHover = true;\n  }\n\n  private handleMouseLeave() {\n    this.hasHover = false;\n  }\n\n  @watch('disabled')\n  handleDisabledChange() {\n    this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');\n  }\n\n  @watch('selected')\n  handleSelectedChange() {\n    this.setAttribute('aria-selected', this.selected ? 'true' : 'false');\n  }\n\n  @watch('value')\n  handleValueChange() {\n    // Ensure the value is a string. This ensures the next line doesn't error and allows framework users to pass numbers\n    // instead of requiring them to cast the value to a string.\n    if (typeof this.value !== 'string') {\n      this.value = String(this.value);\n    }\n\n    if (this.value.includes(' ')) {\n      console.error(`Option values cannot include a space. All spaces have been replaced with underscores.`, this);\n      this.value = this.value.replace(/ /g, '_');\n    }\n  }\n\n  /** Returns a plain text label based on the option's content. */\n  getTextLabel() {\n    return (this.textContent ?? '').trim();\n  }\n\n  render() {\n    return html`\n      <div\n        part=\"base\"\n        class=${classMap({\n          option: true,\n          'option--current': this.current,\n          'option--disabled': this.disabled,\n          'option--selected': this.selected,\n          'option--hover': this.hasHover\n        })}\n        @mouseenter=${this.handleMouseEnter}\n        @mouseleave=${this.handleMouseLeave}\n      >\n        <syn-icon part=\"checked-icon\" class=\"option__check\" name=\"check\" library=\"system\" aria-hidden=\"true\"></syn-icon>\n        <slot part=\"prefix\" name=\"prefix\" class=\"option__prefix\"></slot>\n        <slot part=\"label\" class=\"option__label\" @slotchange=${this.handleDefaultSlotChange}></slot>\n        <slot part=\"suffix\" name=\"suffix\" class=\"option__suffix\"></slot>\n      </div>\n    `;\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAMA,SAAS,gBAAgB;AACzB,SAAS,YAAY;AAErB,SAAS,UAAU,OAAO,aAAa;AAyBvC,IAAqB,YAArB,cAAuC,eAAe;AAAA,EAAtD;AAAA;AAME;AAAA,SAAiB,WAAW,IAAI,mBAAmB,IAAI;AAI9C,mBAAU;AACV,oBAAW;AACX,oBAAW;AAOS,iBAAQ;AAGO,oBAAW;AAAA;AAAA,EAEvD,oBAAoB;AAClB,UAAM,kBAAkB;AACxB,SAAK,aAAa,QAAQ,QAAQ;AAClC,SAAK,aAAa,iBAAiB,OAAO;AAAA,EAC5C;AAAA,EAEQ,0BAA0B;AAChC,UAAM,YAAY,KAAK,aAAa;AAGpC,QAAI,OAAO,KAAK,oBAAoB,aAAa;AAC/C,WAAK,kBAAkB;AACvB;AAAA,IACF;AAGA,QAAI,cAAc,KAAK,iBAAiB;AACtC,WAAK,kBAAkB;AACvB,WAAK,KAAK,cAAc,EAAE,SAAS,MAAM,UAAU,OAAO,YAAY,MAAM,CAAC;AAAA,IAC/E;AAAA,EACF;AAAA,EAEQ,mBAAmB;AACzB,SAAK,WAAW;AAAA,EAClB;AAAA,EAEQ,mBAAmB;AACzB,SAAK,WAAW;AAAA,EAClB;AAAA,EAGA,uBAAuB;AACrB,SAAK,aAAa,iBAAiB,KAAK,WAAW,SAAS,OAAO;AAAA,EACrE;AAAA,EAGA,uBAAuB;AACrB,SAAK,aAAa,iBAAiB,KAAK,WAAW,SAAS,OAAO;AAAA,EACrE;AAAA,EAGA,oBAAoB;AAGlB,QAAI,OAAO,KAAK,UAAU,UAAU;AAClC,WAAK,QAAQ,OAAO,KAAK,KAAK;AAAA,IAChC;AAEA,QAAI,KAAK,MAAM,SAAS,GAAG,GAAG;AAC5B,cAAQ,MAAM,yFAAyF,IAAI;AAC3G,WAAK,QAAQ,KAAK,MAAM,QAAQ,MAAM,GAAG;AAAA,IAC3C;AAAA,EACF;AAAA;AAAA,EAGA,eAAe;AAjHjB;AAkHI,aAAQ,UAAK,gBAAL,YAAoB,IAAI,KAAK;AAAA,EACvC;AAAA,EAEA,SAAS;AACP,WAAO;AAAA;AAAA;AAAA,gBAGK,SAAS;AAAA,MACf,QAAQ;AAAA,MACR,mBAAmB,KAAK;AAAA,MACxB,oBAAoB,KAAK;AAAA,MACzB,oBAAoB,KAAK;AAAA,MACzB,iBAAiB,KAAK;AAAA,IACxB,CAAC,CAAC;AAAA,sBACY,KAAK,gBAAgB;AAAA,sBACrB,KAAK,gBAAgB;AAAA;AAAA;AAAA;AAAA,+DAIoB,KAAK,uBAAuB;AAAA;AAAA;AAAA;AAAA,EAIzF;AACF;AAxGqB,UACZ,SAAyB;AADb,UAEZ,eAAe,EAAE,YAAY,QAAQ;AAMnB;AAAA,EAAxB,MAAM,gBAAgB;AAAA,GARJ,UAQM;AAEhB;AAAA,EAAR,MAAM;AAAA,GAVY,UAUV;AACA;AAAA,EAAR,MAAM;AAAA,GAXY,UAWV;AACA;AAAA,EAAR,MAAM;AAAA,GAZY,UAYV;AAOoB;AAAA,EAA5B,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA,GAnBR,UAmBU;AAGe;AAAA,EAA3C,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAtBvB,UAsByB;AAiC5C;AAAA,EADC,MAAM,UAAU;AAAA,GAtDE,UAuDnB;AAKA;AAAA,EADC,MAAM,UAAU;AAAA,GA3DE,UA4DnB;AAKA;AAAA,EADC,MAAM,OAAO;AAAA,GAhEK,UAiEnB;",
+  "names": []
+}

package/dist/chunks/chunk.4KLCSMRA.js

@@ -0,0 +1,96 @@
+import {
+  optgroup_styles_default
+} from "./chunk.KG52EHDB.js";
+import {
+  SynDivider
+} from "./chunk.LTCRPIZ5.js";
+import {
+  HasSlotController
+} from "./chunk.XGXFE6IF.js";
+import {
+  watch
+} from "./chunk.VZ7S7YYN.js";
+import {
+  SynergyElement
+} from "./chunk.C5W2Y6KW.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.4KLCSMRA.js.map

package/dist/chunks/chunk.4KLCSMRA.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.BOURWTS5.js → chunk.4ZO3EKCL.js}

@@ -1,6 +1,6 @@
 import {
   SynButtonGroup
-} from "./chunk.2Z2FGA3I.js";
+} from "./chunk.OPVDSHPD.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.BOURWTS5.js.map
+//# sourceMappingURL=chunk.4ZO3EKCL.js.map

package/dist/chunks/{chunk.JFCQYLZB.js → chunk.5NJ7WWJW.js}

@@ -1,6 +1,6 @@
 import {
   SynSwitch
-} from "./chunk.RSGJ7C32.js";
+} from "./chunk.DPTZN6HY.js";
 
 // src/components/switch/switch.ts
 var switch_default = SynSwitch;
@@ -9,4 +9,4 @@ SynSwitch.define("syn-switch");
 export {
   switch_default
 };
-//# sourceMappingURL=chunk.JFCQYLZB.js.map
+//# sourceMappingURL=chunk.5NJ7WWJW.js.map

package/dist/chunks/{chunk.C2S53NYE.js → chunk.63IJYG6Q.js}

@@ -11,7 +11,7 @@ import {
 } from "./chunk.VZ7S7YYN.js";
 import {
   SynergyElement
-} from "./chunk.SNP6OECI.js";
+} from "./chunk.C5W2Y6KW.js";
 import {
   __decorateClass
 } from "./chunk.DJOAQ4JU.js";
@@ -172,4 +172,4 @@ __decorateClass([
 export {
   SynIcon
 };
-//# sourceMappingURL=chunk.C2S53NYE.js.map
+//# sourceMappingURL=chunk.63IJYG6Q.js.map

package/dist/chunks/chunk.6XU6OLZ3.js

@@ -0,0 +1,310 @@
+import {
+  select_custom_styles_default
+} from "./chunk.OWMT6OL2.js";
+import {
+  form_control_styles_default
+} from "./chunk.JHXCBOUD.js";
+import {
+  component_styles_default
+} from "./chunk.O7USYXBT.js";
+
+// src/components/select/select.styles.ts
+import { css } from "lit";
+var select_styles_default = css`
+	/* stylelint-disable */
+  ${component_styles_default}
+  ${form_control_styles_default}
+
+  :host {
+    display: block;
+  }
+
+  /** The popup */
+  .select {
+    flex: 1 1 auto;
+    display: inline-flex;
+    width: 100%;
+    position: relative;
+    vertical-align: middle;
+  }
+
+  .select::part(popup) {
+    z-index: var(--syn-z-index-dropdown);
+  }
+
+  .select[data-current-placement^='top']::part(popup) {
+    transform-origin: bottom;
+  }
+
+  .select[data-current-placement^='bottom']::part(popup) {
+    transform-origin: top;
+  }
+
+  /* Combobox */
+  .select__combobox {
+    flex: 1;
+    display: flex;
+    width: 100%;
+    min-width: 0;
+    position: relative;
+    align-items: center;
+    justify-content: start;
+    font-family: var(--syn-input-font-family);
+    font-weight: var(--syn-input-font-weight);
+    letter-spacing: var(--syn-input-letter-spacing);
+    vertical-align: middle;
+    overflow: hidden;
+    cursor: pointer;
+    transition:
+      var(--syn-transition-fast) color,
+      var(--syn-transition-fast) border,
+      var(--syn-transition-fast) box-shadow,
+      var(--syn-transition-fast) background-color;
+  }
+
+  .select__display-input {
+    position: relative;
+    width: 100%;
+    font: inherit;
+    border: none;
+    background: none;
+    color: var(--syn-input-color);
+    cursor: inherit;
+    overflow: hidden;
+    padding: 0;
+    margin: 0;
+    -webkit-appearance: none;
+  }
+
+  .select__display-input::placeholder {
+    color: var(--syn-input-placeholder-color);
+  }
+
+  .select:not(.select--disabled):hover .select__display-input {
+    color: var(--syn-input-color-hover);
+  }
+
+  .select__display-input:focus {
+    outline: none;
+  }
+
+  /* Visually hide the display input when multiple is enabled */
+  .select--multiple:not(.select--placeholder-visible) .select__display-input {
+    position: absolute;
+    z-index: -1;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+  }
+
+  .select__value-input {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: -1;
+  }
+
+  .select__tags {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    flex-wrap: wrap;
+    margin-inline-start: var(--syn-spacing-2x-small);
+  }
+
+  .select__tags::slotted(syn-tag) {
+    cursor: pointer !important;
+  }
+
+  .select--disabled .select__tags,
+  .select--disabled .select__tags::slotted(syn-tag) {
+    cursor: not-allowed !important;
+  }
+
+  /* Standard selects */
+  .select--standard .select__combobox {
+    background-color: var(--syn-input-background-color);
+    border: solid var(--syn-input-border-width) var(--syn-input-border-color);
+  }
+
+  .select--standard.select--disabled .select__combobox {
+    background-color: var(--syn-input-background-color-disabled);
+    border-color: var(--syn-input-border-color-disabled);
+    color: var(--syn-input-color-disabled);
+    opacity: 0.5;
+    cursor: not-allowed;
+    outline: none;
+  }
+
+  .select--standard:not(.select--disabled).select--open .select__combobox,
+  .select--standard:not(.select--disabled).select--focused .select__combobox {
+    background-color: var(--syn-input-background-color-focus);
+    border-color: var(--syn-input-border-color-focus);
+    box-shadow: 0 0 0 var(--syn-focus-ring-width) var(--syn-input-focus-ring-color);
+  }
+
+/* Sizes */
+  .select--small .select__combobox {
+    border-radius: var(--syn-input-border-radius-small);
+    font-size: var(--syn-input-font-size-small);
+    min-height: var(--syn-input-height-small);
+    padding-block: 0;
+    padding-inline: var(--syn-input-spacing-small);
+  }
+
+  .select--small .select__clear {
+    margin-inline-start: var(--syn-input-spacing-small);
+  }
+
+  .select--small .select__prefix::slotted(*) {
+    margin-inline-end: var(--syn-input-spacing-small);
+  }
+
+  .select--small.select--multiple:not(.select--placeholder-visible) .select__combobox {
+    padding-block: 2px;
+    padding-inline-start: 0;
+  }
+
+  .select--small .select__tags {
+    gap: 2px;
+  }
+
+  .select--medium .select__combobox {
+    border-radius: var(--syn-input-border-radius-medium);
+    font-size: var(--syn-input-font-size-medium);
+    min-height: var(--syn-input-height-medium);
+    padding-block: 0;
+    padding-inline: var(--syn-input-spacing-medium);
+  }
+
+  .select--medium .select__clear {
+    margin-inline-start: var(--syn-input-spacing-medium);
+  }
+
+  .select--medium .select__prefix::slotted(*) {
+    margin-inline-end: var(--syn-input-spacing-medium);
+  }
+
+  .select--medium.select--multiple:not(.select--placeholder-visible) .select__combobox {
+    padding-inline-start: 0;
+    padding-block: 3px;
+  }
+
+  .select--medium .select__tags {
+    gap: 3px;
+  }
+
+  .select--large .select__combobox {
+    border-radius: var(--syn-input-border-radius-large);
+    font-size: var(--syn-input-font-size-large);
+    min-height: var(--syn-input-height-large);
+    padding-block: 0;
+    padding-inline: var(--syn-input-spacing-large);
+  }
+
+  .select--large .select__clear {
+    margin-inline-start: var(--syn-input-spacing-large);
+  }
+
+  .select--large .select__prefix::slotted(*) {
+    margin-inline-end: var(--syn-input-spacing-large);
+  }
+
+  .select--large.select--multiple:not(.select--placeholder-visible) .select__combobox {
+    padding-inline-start: 0;
+    padding-block: 4px;
+  }
+
+  .select--large .select__tags {
+    gap: 4px;
+  }/* Prefix */
+  .select__prefix {
+    flex: 0;
+    display: inline-flex;
+    align-items: center;
+    color: var(--syn-input-placeholder-color);
+  }
+
+  /* Clear button */
+  .select__clear {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: inherit;
+    color: var(--syn-input-icon-color);
+    border: none;
+    background: none;
+    padding: 0;
+    transition: var(--syn-transition-fast) color;
+    cursor: pointer;
+  }
+
+  .select__clear:hover {
+    color: var(--syn-input-icon-color-hover);
+  }
+
+  .select__clear:focus {
+    outline: none;
+  }
+
+  /* Expand icon */
+  .select__expand-icon {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    transition: var(--syn-transition-medium) rotate ease;
+    rotate: 0;
+    margin-inline-start: var(--syn-spacing-small);
+  }
+
+  .select--open .select__expand-icon {
+    rotate: -180deg;
+  }
+
+  /* Listbox */
+  .select__listbox {
+    display: block;
+    position: relative;
+    font-family: var(--syn-font-sans);
+    font-size: var(--syn-font-size-medium);
+    font-weight: var(--syn-font-weight-normal);
+    box-shadow: var(--syn-shadow-large);
+    background: var(--syn-panel-background-color);
+    border: solid var(--syn-panel-border-width) var(--syn-panel-border-color);
+    border-radius: var(--syn-border-radius-medium);
+    padding-block: var(--syn-spacing-x-small);
+    padding-inline: 0;
+    overflow: auto;
+    overscroll-behavior: none;
+
+    /* Make sure it adheres to the popup's auto size */
+    max-width: var(--auto-size-available-width);
+    max-height: var(--auto-size-available-height);
+  }
+
+  .select__listbox ::slotted(syn-divider) {
+    --spacing: var(--syn-spacing-x-small);
+  }
+
+  .select__listbox ::slotted(small) {
+    font-size: var(--syn-font-size-small);
+    font-weight: var(--syn-font-weight-semibold);
+    color: var(--syn-color-neutral-500);
+    padding-block: var(--syn-spacing-x-small);
+    padding-inline: var(--syn-spacing-x-large);
+  }
+
+  ${select_custom_styles_default}
+`;
+
+export {
+  select_styles_default
+};
+//# sourceMappingURL=chunk.6XU6OLZ3.js.map