@synergy-design-system/components 1.8.0 → 1.9.0

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

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

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

@@ -1,15 +1,19 @@
+import {
+  radio_custom_styles_default
+} from "./chunk.V6VND4OF.js";
 import {
   radio_styles_default
-} from "./chunk.JBYBQ5TQ.js";
+} from "./chunk.PKO6FEOM.js";
 import {
   SynIcon
-} from "./chunk.35PHCFSV.js";
+} from "./chunk.PWMSNMDF.js";
 import {
   watch
 } from "./chunk.AVTU2BGE.js";
 import {
-  SynergyElement
-} from "./chunk.WDX7XUUK.js";
+  SynergyElement,
+  component_styles_default
+} from "./chunk.3DE5ARIC.js";
 import {
   __decorateClass
 } from "./chunk.QNDC5KWA.js";
@@ -81,7 +85,7 @@ var SynRadio = class extends SynergyElement {
     `;
   }
 };
-SynRadio.styles = radio_styles_default;
+SynRadio.styles = [component_styles_default, radio_styles_default, radio_custom_styles_default];
 SynRadio.dependencies = { "syn-icon": SynIcon };
 __decorateClass([
   state()
@@ -108,4 +112,4 @@ __decorateClass([
 export {
   SynRadio
 };
-//# sourceMappingURL=chunk.RS4Z4KDT.js.map
+//# sourceMappingURL=chunk.MDZ22YWD.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/radio/radio.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 { property, state } from 'lit/decorators.js';\nimport { watch } from '../../internal/watch.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport SynIcon from '../icon/icon.component.js';\nimport styles from './radio.styles.js';\nimport customStyles from './radio.custom.styles.js';\nimport type { CSSResultGroup } from 'lit';\n\n/**\n * @summary Radios allow the user to select a single option from a group.\n * @documentation https://synergy.style/components/radio\n * @status stable\n * @since 2.0\n *\n * @dependency syn-icon\n *\n * @slot - The radio's label.\n *\n * @event syn-blur - Emitted when the control loses focus.\n * @event syn-focus - Emitted when the control gains focus.\n *\n * @csspart base - The component's base wrapper.\n * @csspart control - The circular container that wraps the radio's checked state.\n * @csspart control--checked - The radio control when the radio is checked.\n * @csspart checked-icon - The checked icon, an `<syn-icon>` element.\n * @csspart label - The container that wraps the radio's label.\n */\nexport default class SynRadio extends SynergyElement {\n  static styles: CSSResultGroup = [componentStyles, styles, customStyles];\n  static dependencies = { 'syn-icon': SynIcon };\n\n  @state() checked = false;\n  @state() protected hasFocus = false;\n\n  /** The radio's value. When selected, the radio group will receive this value. */\n  @property() value: string;\n\n  /**\n   * The radio's size. When used inside a radio group, the size will be determined by the radio group's size so this\n   * attribute can typically be omitted.\n   */\n  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** Disables the radio. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  constructor() {\n    super();\n    this.addEventListener('blur', this.handleBlur);\n    this.addEventListener('click', this.handleClick);\n    this.addEventListener('focus', this.handleFocus);\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setInitialAttributes();\n  }\n\n  private handleBlur = () => {\n    this.hasFocus = false;\n    this.emit('syn-blur');\n  };\n\n  private handleClick = () => {\n    if (!this.disabled) {\n      this.checked = true;\n    }\n  };\n\n  private handleFocus = () => {\n    this.hasFocus = true;\n    this.emit('syn-focus');\n  };\n\n  private setInitialAttributes() {\n    this.setAttribute('role', 'radio');\n    this.setAttribute('tabindex', '-1');\n    this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');\n  }\n\n  @watch('checked')\n  handleCheckedChange() {\n    this.setAttribute('aria-checked', this.checked ? 'true' : 'false');\n    this.setAttribute('tabindex', this.checked ? '0' : '-1');\n  }\n\n  @watch('disabled', { waitUntilFirstUpdate: true })\n  handleDisabledChange() {\n    this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');\n  }\n\n  render() {\n    return html`\n      <span\n        part=\"base\"\n        class=${classMap({\n          radio: true,\n          'radio--checked': this.checked,\n          'radio--disabled': this.disabled,\n          'radio--focused': this.hasFocus,\n          'radio--small': this.size === 'small',\n          'radio--medium': this.size === 'medium',\n          'radio--large': this.size === 'large'\n        })}\n      >\n        <span part=\"${`control${this.checked ? ' control--checked' : ''}`}\" class=\"radio__control\">\n          ${this.checked\n            ? html` <syn-icon part=\"checked-icon\" class=\"radio__checked-icon\" library=\"system\" name=\"radio\"></syn-icon> `\n            : ''}\n        </span>\n\n        <slot part=\"label\" class=\"radio__label\"></slot>\n      </span>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'syn-radio': SynRadio;\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;AAMA,SAAS,gBAAgB;AACzB,SAAS,YAAY;AACrB,SAAS,UAAU,aAAa;AA4BhC,IAAqB,WAArB,cAAsC,eAAe;AAAA,EAmBnD,cAAc;AACZ,UAAM;AAhBC,mBAAU;AACV,SAAU,WAAW;AASD,gBAAqC;AAGtB,oBAAW;AAcvD,SAAQ,aAAa,MAAM;AACzB,WAAK,WAAW;AAChB,WAAK,KAAK,UAAU;AAAA,IACtB;AAEA,SAAQ,cAAc,MAAM;AAC1B,UAAI,CAAC,KAAK,UAAU;AAClB,aAAK,UAAU;AAAA,MACjB;AAAA,IACF;AAEA,SAAQ,cAAc,MAAM;AAC1B,WAAK,WAAW;AAChB,WAAK,KAAK,WAAW;AAAA,IACvB;AAxBE,SAAK,iBAAiB,QAAQ,KAAK,UAAU;AAC7C,SAAK,iBAAiB,SAAS,KAAK,WAAW;AAC/C,SAAK,iBAAiB,SAAS,KAAK,WAAW;AAAA,EACjD;AAAA,EAEA,oBAAoB;AAClB,UAAM,kBAAkB;AACxB,SAAK,qBAAqB;AAAA,EAC5B;AAAA,EAkBQ,uBAAuB;AAC7B,SAAK,aAAa,QAAQ,OAAO;AACjC,SAAK,aAAa,YAAY,IAAI;AAClC,SAAK,aAAa,iBAAiB,KAAK,WAAW,SAAS,OAAO;AAAA,EACrE;AAAA,EAGA,sBAAsB;AACpB,SAAK,aAAa,gBAAgB,KAAK,UAAU,SAAS,OAAO;AACjE,SAAK,aAAa,YAAY,KAAK,UAAU,MAAM,IAAI;AAAA,EACzD;AAAA,EAGA,uBAAuB;AACrB,SAAK,aAAa,iBAAiB,KAAK,WAAW,SAAS,OAAO;AAAA,EACrE;AAAA,EAEA,SAAS;AACP,WAAO;AAAA;AAAA;AAAA,gBAGK,SAAS;AAAA,MACf,OAAO;AAAA,MACP,kBAAkB,KAAK;AAAA,MACvB,mBAAmB,KAAK;AAAA,MACxB,kBAAkB,KAAK;AAAA,MACvB,gBAAgB,KAAK,SAAS;AAAA,MAC9B,iBAAiB,KAAK,SAAS;AAAA,MAC/B,gBAAgB,KAAK,SAAS;AAAA,IAChC,CAAC,CAAC;AAAA;AAAA,sBAEY,UAAU,KAAK,UAAU,sBAAsB,EAAE,EAAE;AAAA,YAC7D,KAAK,UACH,8GACA,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMd;AACF;AAxFqB,SACZ,SAAyB,CAAC,0BAAiB,sBAAQ,2BAAY;AADnD,SAEZ,eAAe,EAAE,YAAY,QAAQ;AAEnC;AAAA,EAAR,MAAM;AAAA,GAJY,SAIV;AACU;AAAA,EAAlB,MAAM;AAAA,GALY,SAKA;AAGP;AAAA,EAAX,SAAS;AAAA,GARS,SAQP;AAMiB;AAAA,EAA5B,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA,GAdR,SAcU;AAGe;AAAA,EAA3C,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAjBvB,SAiByB;AAqC5C;AAAA,EADC,MAAM,SAAS;AAAA,GArDG,SAsDnB;AAMA;AAAA,EADC,MAAM,YAAY,EAAE,sBAAsB,KAAK,CAAC;AAAA,GA3D9B,SA4DnB;",
+  "names": []
+}

package/dist/chunks/{chunk.JN7CLMQZ.js → chunk.MIMALEWP.js}

@@ -1,13 +1,7 @@
-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;
@@ -45,9 +39,29 @@ var popup_styles_default = css`
     background: var(--arrow-color);
     z-index: -1;
   }
+
+  /* Hover bridge */
+  .popup-hover-bridge:not(.popup-hover-bridge--visible) {
+    display: none;
+  }
+
+  .popup-hover-bridge {
+    position: fixed;
+    z-index: calc(var(--syn-z-index-dropdown) - 1);
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    clip-path: polygon(
+      var(--hover-bridge-top-left-x, 0) var(--hover-bridge-top-left-y, 0),
+      var(--hover-bridge-top-right-x, 0) var(--hover-bridge-top-right-y, 0),
+      var(--hover-bridge-bottom-right-x, 0) var(--hover-bridge-bottom-right-y, 0),
+      var(--hover-bridge-bottom-left-x, 0) var(--hover-bridge-bottom-left-y, 0)
+    );
+  }
 `;
 
 export {
   popup_styles_default
 };
-//# sourceMappingURL=chunk.JN7CLMQZ.js.map
+//# sourceMappingURL=chunk.MIMALEWP.js.map

package/dist/chunks/chunk.MIMALEWP.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';\n\nexport default css`\n\t/* stylelint-disable */\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  /* Hover bridge */\n  .popup-hover-bridge:not(.popup-hover-bridge--visible) {\n    display: none;\n  }\n\n  .popup-hover-bridge {\n    position: fixed;\n    z-index: calc(var(--syn-z-index-dropdown) - 1);\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    clip-path: polygon(\n      var(--hover-bridge-top-left-x, 0) var(--hover-bridge-top-left-y, 0),\n      var(--hover-bridge-top-right-x, 0) var(--hover-bridge-top-right-y, 0),\n      var(--hover-bridge-bottom-right-x, 0) var(--hover-bridge-bottom-right-y, 0),\n      var(--hover-bridge-bottom-left-x, 0) var(--hover-bridge-bottom-left-y, 0)\n    );\n  }\n`;\n"],
+  "mappings": ";AAMA,SAAS,WAAW;AAEpB,IAAO,uBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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.DAROCSFO.js → chunk.O6AXKVFJ.js}

@@ -1,12 +1,16 @@
+import {
+  icon_button_custom_styles_default
+} from "./chunk.OJF7KL44.js";
 import {
   icon_button_styles_default
-} from "./chunk.2FN5DTS6.js";
+} from "./chunk.LJQ7LEPV.js";
 import {
   SynIcon
-} from "./chunk.35PHCFSV.js";
+} from "./chunk.PWMSNMDF.js";
 import {
-  SynergyElement
-} from "./chunk.WDX7XUUK.js";
+  SynergyElement,
+  component_styles_default
+} from "./chunk.3DE5ARIC.js";
 import {
   __decorateClass
 } from "./chunk.QNDC5KWA.js";
@@ -92,7 +96,7 @@ var SynIconButton = class extends SynergyElement {
     `;
   }
 };
-SynIconButton.styles = icon_button_styles_default;
+SynIconButton.styles = [component_styles_default, icon_button_styles_default, icon_button_custom_styles_default];
 SynIconButton.dependencies = { "syn-icon": SynIcon };
 __decorateClass([
   query(".icon-button")
@@ -134,4 +138,4 @@ __decorateClass([
 export {
   SynIconButton
 };
-//# sourceMappingURL=chunk.DAROCSFO.js.map
+//# sourceMappingURL=chunk.O6AXKVFJ.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/icon-button/icon-button.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, literal } from 'lit/static-html.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { property, query, state } from 'lit/decorators.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport SynIcon from '../icon/icon.component.js';\nimport styles from './icon-button.styles.js';\nimport customStyles from './icon-button.custom.styles.js';\nimport type { CSSResultGroup } from 'lit';\n\n/**\n * @summary Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.\n * @documentation https://synergy.style/components/icon-button\n * @status stable\n * @since 2.0\n *\n * @dependency syn-icon\n *\n * @event syn-blur - Emitted when the icon button loses focus.\n * @event syn-focus - Emitted when the icon button gains focus.\n *\n * @csspart base - The component's base wrapper.\n */\nexport default class SynIconButton extends SynergyElement {\n  static styles: CSSResultGroup = [componentStyles, styles, customStyles];\n  static dependencies = { 'syn-icon': SynIcon };\n\n  @query('.icon-button') button: HTMLButtonElement | HTMLLinkElement;\n\n  @state() private hasFocus = false;\n\n  /** The name of the icon to draw. Available names depend on the icon library being used. */\n  @property() name?: string;\n\n  /** The name of a registered custom icon library. */\n  @property() library?: string;\n\n  /**\n   * An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and\n   * can result in XSS attacks.\n   */\n  @property() src?: string;\n\n  /** When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`. */\n  @property() href?: string;\n\n  /** Tells the browser where to open the link. Only used when `href` is set. */\n  @property() target?: '_blank' | '_parent' | '_self' | '_top';\n\n  /** Tells the browser to download the linked file as this filename. Only used when `href` is set. */\n  @property() download?: string;\n\n  /**\n   * A description that gets read by assistive devices. For optimal accessibility, you should always include a label\n   * that describes what the icon button does.\n   */\n  @property() label = '';\n\n  /** The icon button's size. */\n  @property({ reflect: true }) size: 'small' | 'medium' | 'large' | 'inherit' = 'inherit';\n\n  /**\n  * The color of the icon button.\n  * The default \"currentColor\" makes it possible to easily style the icon button from outside without any CSS variables.\n  */\n  @property({ reflect: true }) color: 'currentColor' | 'primary' | 'neutral'  = 'currentColor';\n\n  /** Disables the button. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  private handleBlur() {\n    this.hasFocus = false;\n    this.emit('syn-blur');\n  }\n\n  private handleFocus() {\n    this.hasFocus = true;\n    this.emit('syn-focus');\n  }\n\n  private handleClick(event: MouseEvent) {\n    if (this.disabled) {\n      event.preventDefault();\n      event.stopPropagation();\n    }\n  }\n\n  /** Simulates a click on the icon button. */\n  click() {\n    this.button.click();\n  }\n\n  /** Sets focus on the icon button. */\n  focus(options?: FocusOptions) {\n    this.button.focus(options);\n  }\n\n  /** Removes focus from the icon button. */\n  blur() {\n    this.button.blur();\n  }\n\n  render() {\n    const isLink = this.href ? true : false;\n    const tag = isLink ? literal`a` : literal`button`;\n\n    /* eslint-disable lit/binding-positions, lit/no-invalid-html */\n    return html`\n      <${tag}\n        part=\"base\"\n        class=${classMap({\n          'icon-button': true,\n          'icon-button--disabled': !isLink && this.disabled,\n          'icon-button--focused': this.hasFocus,\n          'icon-button--small': this.size === 'small',\n          'icon-button--medium': this.size === 'medium',\n          'icon-button--large': this.size === 'large',\n          'icon-button--primary': this.color === 'primary',\n          'icon-button--neutral': this.color === 'neutral'\n        })}\n        ?disabled=${ifDefined(isLink ? undefined : this.disabled)}\n        type=${ifDefined(isLink ? undefined : 'button')}\n        href=${ifDefined(isLink ? this.href : undefined)}\n        target=${ifDefined(isLink ? this.target : undefined)}\n        download=${ifDefined(isLink ? this.download : undefined)}\n        rel=${ifDefined(isLink && this.target ? 'noreferrer noopener' : undefined)}\n        role=${ifDefined(isLink ? undefined : 'button')}\n        aria-disabled=${this.disabled ? 'true' : 'false'}\n        aria-label=\"${this.label}\"\n        tabindex=${this.disabled ? '-1' : '0'}\n        @blur=${this.handleBlur}\n        @focus=${this.handleFocus}\n        @click=${this.handleClick}\n      >\n        <syn-icon\n          class=\"icon-button__icon\"\n          name=${ifDefined(this.name)}\n          library=${ifDefined(this.library)}\n          src=${ifDefined(this.src)}\n          aria-hidden=\"true\"\n        ></syn-icon>\n      </${tag}>\n    `;\n  }\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/chunks/{chunk.N2I6HVX3.js → chunk.OSBC36KQ.js}

@@ -1,13 +1,7 @@
-import {
-  component_styles_default
-} from "./chunk.O7USYXBT.js";
-
 // src/components/spinner/spinner.styles.ts
 import { css } from "lit";
 var spinner_styles_default = css`
 	/* stylelint-disable */
-  ${component_styles_default}
-
   :host {
     --track-width: 2px;
     --track-color: rgb(128 128 128 / 25%);
@@ -17,6 +11,7 @@ var spinner_styles_default = css`
     display: inline-flex;
     width: 1em;
     height: 1em;
+    flex: none;
   }
 
   .spinner {
@@ -50,7 +45,7 @@ var spinner_styles_default = css`
   @keyframes spin {
     0% {
       transform: rotate(0deg);
-      stroke-dasharray: 0.01em, 2.75em;
+      stroke-dasharray: 0.05em, 3em;
     }
 
     50% {
@@ -60,7 +55,7 @@ var spinner_styles_default = css`
 
     100% {
       transform: rotate(1080deg);
-      stroke-dasharray: 0.01em, 2.75em;
+      stroke-dasharray: 0.05em, 3em;
     }
   }
 `;
@@ -68,4 +63,4 @@ var spinner_styles_default = css`
 export {
   spinner_styles_default
 };
-//# sourceMappingURL=chunk.N2I6HVX3.js.map
+//# sourceMappingURL=chunk.OSBC36KQ.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/spinner/spinner.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';\n\n// Resizing a spinner element using anything but font-size will break the animation because the animation uses em units.\n// Therefore, if a spinner is used in a flex container without `flex: none` applied, the spinner can grow/shrink and\n// break the animation. The use of `flex: none` on the host element prevents this by always having the spinner sized\n// according to its actual dimensions.\n\nexport default css`\n\t/* stylelint-disable */\n  :host {\n    --track-width: 2px;\n    --track-color: rgb(128 128 128 / 25%);\n    --indicator-color: var(--syn-color-primary-600);\n    --speed: 2s;\n\n    display: inline-flex;\n    width: 1em;\n    height: 1em;\n    flex: none;\n  }\n\n  .spinner {\n    flex: 1 1 auto;\n    height: 100%;\n    width: 100%;\n  }\n\n  .spinner__track,\n  .spinner__indicator {\n    fill: none;\n    stroke-width: var(--track-width);\n    r: calc(0.5em - var(--track-width) / 2);\n    cx: 0.5em;\n    cy: 0.5em;\n    transform-origin: 50% 50%;\n  }\n\n  .spinner__track {\n    stroke: var(--track-color);\n    transform-origin: 0% 0%;\n  }\n\n  .spinner__indicator {\n    stroke: var(--indicator-color);\n    stroke-linecap: round;\n    stroke-dasharray: 150% 75%;\n    animation: spin var(--speed) linear infinite;\n  }\n\n  @keyframes spin {\n    0% {\n      transform: rotate(0deg);\n      stroke-dasharray: 0.05em, 3em;\n    }\n\n    50% {\n      transform: rotate(450deg);\n      stroke-dasharray: 1.375em, 1.375em;\n    }\n\n    100% {\n      transform: rotate(1080deg);\n      stroke-dasharray: 0.05em, 3em;\n    }\n  }\n`;\n"],
+  "mappings": ";AAMA,SAAS,WAAW;AAOpB,IAAO,yBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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.NV7W5R6V.js → chunk.PHSJD47V.js}

@@ -1,16 +1,7 @@
-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);
@@ -163,11 +154,9 @@ var drawer_styles_default = css`
       border: solid 1px var(--syn-color-neutral-0);
     }
   }
-
-  ${drawer_custom_styles_default}
 `;
 
 export {
   drawer_styles_default
 };
-//# sourceMappingURL=chunk.NV7W5R6V.js.map
+//# sourceMappingURL=chunk.PHSJD47V.js.map

package/dist/chunks/chunk.PHSJD47V.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';\n\nexport default css`\n\t/* stylelint-disable */\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"],
+  "mappings": ";AAMA,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;AAAA;AAAA;AAAA;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.JBYBQ5TQ.js → chunk.PKO6FEOM.js}

@@ -1,16 +1,7 @@
-import {
-  radio_custom_styles_default
-} from "./chunk.V6VND4OF.js";
-import {
-  component_styles_default
-} from "./chunk.O7USYXBT.js";
-
 // src/components/radio/radio.styles.ts
 import { css } from "lit";
 var radio_styles_default = css`
 	/* stylelint-disable */
-  ${component_styles_default}
-
   :host {
     display: block;
   }
@@ -122,11 +113,9 @@ var radio_styles_default = css`
     user-select: none;
     -webkit-user-select: none;
   }
-
-  ${radio_custom_styles_default}
 `;
 
 export {
   radio_styles_default
 };
-//# sourceMappingURL=chunk.JBYBQ5TQ.js.map
+//# sourceMappingURL=chunk.PKO6FEOM.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/radio/radio.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';\n\nexport default css`\n\t/* stylelint-disable */\n  :host {\n    display: block;\n  }\n\n  :host(:focus-visible) {\n    outline: 0px;\n  }\n\n  .radio {\n    display: inline-flex;\n    align-items: top;\n    font-family: var(--syn-input-font-family);\n    font-size: var(--syn-input-font-size-medium);\n    font-weight: var(--syn-input-font-weight);\n    color: var(--syn-input-label-color);\n    vertical-align: middle;\n    cursor: pointer;\n  }\n\n  .radio--small {\n    --toggle-size: var(--syn-toggle-size-small);\n    font-size: var(--syn-input-font-size-small);\n  }\n\n  .radio--medium {\n    --toggle-size: var(--syn-toggle-size-medium);\n    font-size: var(--syn-input-font-size-medium);\n  }\n\n  .radio--large {\n    --toggle-size: var(--syn-toggle-size-large);\n    font-size: var(--syn-input-font-size-large);\n  }\n\n  .radio__checked-icon {\n    display: inline-flex;\n    width: var(--toggle-size);\n    height: var(--toggle-size);\n  }\n\n  .radio__control {\n    flex: 0 0 auto;\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--toggle-size);\n    height: var(--toggle-size);\n    border: solid var(--syn-input-border-width) var(--syn-input-border-color);\n    border-radius: 50%;\n    background-color: var(--syn-input-background-color);\n    color: transparent;\n    transition:\n      var(--syn-transition-fast) border-color,\n      var(--syn-transition-fast) background-color,\n      var(--syn-transition-fast) color,\n      var(--syn-transition-fast) box-shadow;\n  }\n\n  .radio__input {\n    position: absolute;\n    opacity: 0;\n    padding: 0;\n    margin: 0;\n    pointer-events: none;\n  }\n\n  /* Hover */\n  .radio:not(.radio--checked):not(.radio--disabled) .radio__control:hover {\n    border-color: var(--syn-input-border-color-hover);\n    background-color: var(--syn-input-background-color-hover);\n  }\n\n  /* Checked */\n  .radio--checked .radio__control {\n    color: var(--syn-color-neutral-0);\n    border-color: var(--syn-color-primary-600);\n    background-color: var(--syn-color-primary-600);\n  }\n\n  /* Checked + hover */\n  .radio.radio--checked:not(.radio--disabled) .radio__control:hover {\n    border-color: var(--syn-color-primary-500);\n    background-color: var(--syn-color-primary-500);\n  }\n\n  /* Checked + focus */\n  :host(:focus-visible) .radio__control {\n    outline: var(--syn-focus-ring);\n    outline-offset: var(--syn-focus-ring-offset);\n  }\n\n  /* Disabled */\n  .radio--disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  /* When the control isn't checked, hide the circle for Windows High Contrast mode a11y */\n  .radio:not(.radio--checked) svg circle {\n    opacity: 0;\n  }\n\n  .radio__label {\n    display: inline-block;\n    color: var(--syn-input-label-color);\n    line-height: var(--toggle-size);\n    margin-inline-start: 0.5em;\n    user-select: none;\n    -webkit-user-select: none;\n  }\n`;\n"],
+  "mappings": ";AAMA,SAAS,WAAW;AAEpB,IAAO,uBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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.MRAXEK5D.js → chunk.PRZRH7SN.js}

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

package/dist/chunks/{chunk.35PHCFSV.js → chunk.PWMSNMDF.js}

@@ -3,15 +3,19 @@ import {
   unwatchIcon,
   watchIcon
 } from "./chunk.JRXQK6LG.js";
+import {
+  icon_custom_styles_default
+} from "./chunk.PJO6TM3T.js";
 import {
   icon_styles_default
-} from "./chunk.RSONAU45.js";
+} from "./chunk.2RF7KO5I.js";
 import {
   watch
 } from "./chunk.AVTU2BGE.js";
 import {
-  SynergyElement
-} from "./chunk.WDX7XUUK.js";
+  SynergyElement,
+  component_styles_default
+} from "./chunk.3DE5ARIC.js";
 import {
   __decorateClass
 } from "./chunk.QNDC5KWA.js";
@@ -146,7 +150,7 @@ var SynIcon = class extends SynergyElement {
     return this.svg;
   }
 };
-SynIcon.styles = icon_styles_default;
+SynIcon.styles = [component_styles_default, icon_styles_default, icon_custom_styles_default];
 __decorateClass([
   state()
 ], SynIcon.prototype, "svg", 2);
@@ -172,4 +176,4 @@ __decorateClass([
 export {
   SynIcon
 };
-//# sourceMappingURL=chunk.35PHCFSV.js.map
+//# sourceMappingURL=chunk.PWMSNMDF.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/icon/icon.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 { getIconLibrary, type IconLibrary, unwatchIcon, watchIcon } from './library.js';\nimport { html } from 'lit';\nimport { isTemplateResult } from 'lit/directive-helpers.js';\nimport { property, state } from 'lit/decorators.js';\nimport { watch } from '../../internal/watch.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport styles from './icon.styles.js';\nimport customStyles from './icon.custom.styles.js';\nimport type { CSSResultGroup, HTMLTemplateResult } from 'lit';\n\nconst CACHEABLE_ERROR = Symbol();\nconst RETRYABLE_ERROR = Symbol();\ntype SVGResult = HTMLTemplateResult | SVGSVGElement | typeof RETRYABLE_ERROR | typeof CACHEABLE_ERROR;\n\nlet parser: DOMParser;\nconst iconCache = new Map<string, Promise<SVGResult>>();\n\ninterface IconSource {\n  url?: string;\n  fromLibrary: boolean;\n}\n\n/**\n * @summary Icons are symbols that can be used to represent various options within an application.\n * @documentation https://synergy.style/components/icon\n * @status stable\n * @since 2.0\n *\n * @event syn-load - Emitted when the icon has loaded. When using `spriteSheet: true` this will not emit.\n * @event syn-error - Emitted when the icon fails to load due to an error. When using `spriteSheet: true` this will not emit.\n *\n * @csspart svg - The internal SVG element.\n * @csspart use - The <use> element generated when using `spriteSheet: true`\n */\nexport default class SynIcon extends SynergyElement {\n  static styles: CSSResultGroup = [componentStyles, styles, customStyles];\n\n  private initialRender = false;\n\n  /** Given a URL, this function returns the resulting SVG element or an appropriate error symbol. */\n  private async resolveIcon(url: string, library?: IconLibrary): Promise<SVGResult> {\n    let fileData: Response;\n\n    if (library?.spriteSheet) {\n      return html`<svg part=\"svg\">\n        <use part=\"use\" href=\"${url}\"></use>\n      </svg>`;\n    }\n\n    try {\n      fileData = await fetch(url, { mode: 'cors' });\n      if (!fileData.ok) return fileData.status === 410 ? CACHEABLE_ERROR : RETRYABLE_ERROR;\n    } catch {\n      return RETRYABLE_ERROR;\n    }\n\n    try {\n      const div = document.createElement('div');\n      div.innerHTML = await fileData.text();\n\n      const svg = div.firstElementChild;\n      if (svg?.tagName?.toLowerCase() !== 'svg') return CACHEABLE_ERROR;\n\n      if (!parser) parser = new DOMParser();\n      const doc = parser.parseFromString(svg.outerHTML, 'text/html');\n\n      const svgEl = doc.body.querySelector('svg');\n      if (!svgEl) return CACHEABLE_ERROR;\n\n      svgEl.part.add('svg');\n      return document.adoptNode(svgEl);\n    } catch {\n      return CACHEABLE_ERROR;\n    }\n  }\n\n  @state() private svg: SVGElement | HTMLTemplateResult | null = null;\n\n  /** The name of the icon to draw. Available names depend on the icon library being used. */\n  @property({ reflect: true }) name?: string;\n\n  /**\n   * An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and\n   * can result in XSS attacks.\n   */\n  @property() src?: string;\n\n  /**\n   * An alternate description to use for assistive devices. If omitted, the icon will be considered presentational and\n   * ignored by assistive devices.\n   */\n  @property() label = '';\n\n  /** The name of a registered custom icon library. */\n  @property({ reflect: true }) library = 'default';\n\n  connectedCallback() {\n    super.connectedCallback();\n    watchIcon(this);\n  }\n\n  firstUpdated() {\n    this.initialRender = true;\n    this.setIcon();\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    unwatchIcon(this);\n  }\n\n  private getIconSource(): IconSource {\n    const library = getIconLibrary(this.library);\n    if (this.name && library) {\n      return {\n        url: library.resolver(this.name),\n        fromLibrary: true\n      };\n    }\n\n    return {\n      url: this.src,\n      fromLibrary: false\n    };\n  }\n\n  @watch('label')\n  handleLabelChange() {\n    const hasLabel = typeof this.label === 'string' && this.label.length > 0;\n\n    if (hasLabel) {\n      this.setAttribute('role', 'img');\n      this.setAttribute('aria-label', this.label);\n      this.removeAttribute('aria-hidden');\n    } else {\n      this.removeAttribute('role');\n      this.removeAttribute('aria-label');\n      this.setAttribute('aria-hidden', 'true');\n    }\n  }\n\n  @watch(['name', 'src', 'library'])\n  async setIcon() {\n    const { url, fromLibrary } = this.getIconSource();\n    const library = fromLibrary ? getIconLibrary(this.library) : undefined;\n\n    if (!url) {\n      this.svg = null;\n      return;\n    }\n\n    let iconResolver = iconCache.get(url);\n    if (!iconResolver) {\n      iconResolver = this.resolveIcon(url, library);\n      iconCache.set(url, iconResolver);\n    }\n\n    // If we haven't rendered yet, exit early. This avoids unnecessary work due to watching multiple props.\n    if (!this.initialRender) {\n      return;\n    }\n\n    const svg = await iconResolver;\n\n    if (svg === RETRYABLE_ERROR) {\n      iconCache.delete(url);\n    }\n\n    if (url !== this.getIconSource().url) {\n      // If the url has changed while fetching the icon, ignore this request\n      return;\n    }\n\n    if (isTemplateResult(svg)) {\n      this.svg = svg;\n      return;\n    }\n\n    switch (svg) {\n      case RETRYABLE_ERROR:\n      case CACHEABLE_ERROR:\n        this.svg = null;\n        this.emit('syn-error');\n        break;\n      default:\n        this.svg = svg.cloneNode(true) as SVGElement;\n        library?.mutator?.(this.svg);\n        this.emit('syn-load');\n    }\n  }\n\n  render() {\n    return this.svg;\n  }\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/chunks/{chunk.6XU6OLZ3.js → chunk.QNQNR3RY.js}

@@ -1,20 +1,7 @@
-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;
   }
@@ -300,11 +287,9 @@ var select_styles_default = css`
     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
+//# sourceMappingURL=chunk.QNQNR3RY.js.map

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

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

@@ -1,6 +1,6 @@
 import {
   SynButton
-} from "./chunk.AWZ4FSAL.js";
+} from "./chunk.FSONLJTT.js";
 
 // src/components/button/button.ts
 var button_default = SynButton;
@@ -9,4 +9,4 @@ SynButton.define("syn-button");
 export {
   button_default
 };
-//# sourceMappingURL=chunk.2XCLA4MQ.js.map
+//# sourceMappingURL=chunk.QY6MKIMK.js.map

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

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

package/dist/chunks/{chunk.AJWDVZRI.js → chunk.RMZBSKRR.js}

@@ -1,18 +1,21 @@
 import {
   SynTag
-} from "./chunk.GUQN6XL4.js";
+} from "./chunk.GBOII6N4.js";
+import {
+  select_custom_styles_default
+} from "./chunk.OWMT6OL2.js";
 import {
   select_styles_default
-} from "./chunk.6XU6OLZ3.js";
+} from "./chunk.QNQNR3RY.js";
 import {
   SynPopup
-} from "./chunk.XI6MSNHF.js";
+} from "./chunk.BJYVLDYR.js";
 import {
   animateTo,
   scrollIntoView,
   stopAnimations,
   waitForEvent
-} from "./chunk.2KKPNUPU.js";
+} from "./chunk.GTSRMEPE.js";
 import {
   getAnimation,
   setDefaultAnimation
@@ -21,23 +24,28 @@ import {
   defaultValue
 } from "./chunk.WFAJR3FN.js";
 import {
-  HasSlotController
-} from "./chunk.XGXFE6IF.js";
+  form_control_custom_styles_default,
+  form_control_styles_default
+} from "./chunk.TTL762VF.js";
 import {
   LocalizeController
 } from "./chunk.LAB4YJYE.js";
 import {
   FormControlController
-} from "./chunk.2Z2GYRLO.js";
+} from "./chunk.SZCGMXW5.js";
+import {
+  HasSlotController
+} from "./chunk.XGXFE6IF.js";
 import {
   SynIcon
-} from "./chunk.35PHCFSV.js";
+} from "./chunk.PWMSNMDF.js";
 import {
   watch
 } from "./chunk.AVTU2BGE.js";
 import {
-  SynergyElement
-} from "./chunk.WDX7XUUK.js";
+  SynergyElement,
+  component_styles_default
+} from "./chunk.3DE5ARIC.js";
 import {
   __decorateClass
 } from "./chunk.QNDC5KWA.js";
@@ -106,7 +114,7 @@ var SynSelect = class extends SynergyElement {
       if (isClearButton || isIconButton) {
         return;
       }
-      if (event.key === "Escape" && this.open) {
+      if (event.key === "Escape" && this.open && !this.closeWatcher) {
         event.preventDefault();
         event.stopPropagation();
         this.hide();
@@ -211,14 +219,29 @@ var SynSelect = class extends SynergyElement {
     this.open = false;
   }
   addOpenListeners() {
-    document.addEventListener("focusin", this.handleDocumentFocusIn);
-    document.addEventListener("keydown", this.handleDocumentKeyDown);
-    document.addEventListener("mousedown", this.handleDocumentMouseDown);
+    var _a;
+    const root = this.getRootNode();
+    if ("CloseWatcher" in window) {
+      (_a = this.closeWatcher) == null ? void 0 : _a.destroy();
+      this.closeWatcher = new CloseWatcher();
+      this.closeWatcher.onclose = () => {
+        if (this.open) {
+          this.hide();
+          this.displayInput.focus({ preventScroll: true });
+        }
+      };
+    }
+    root.addEventListener("focusin", this.handleDocumentFocusIn);
+    root.addEventListener("keydown", this.handleDocumentKeyDown);
+    root.addEventListener("mousedown", this.handleDocumentMouseDown);
   }
   removeOpenListeners() {
-    document.removeEventListener("focusin", this.handleDocumentFocusIn);
-    document.removeEventListener("keydown", this.handleDocumentKeyDown);
-    document.removeEventListener("mousedown", this.handleDocumentMouseDown);
+    var _a;
+    const root = this.getRootNode();
+    root.removeEventListener("focusin", this.handleDocumentFocusIn);
+    root.removeEventListener("keydown", this.handleDocumentKeyDown);
+    root.removeEventListener("mousedown", this.handleDocumentMouseDown);
+    (_a = this.closeWatcher) == null ? void 0 : _a.destroy();
   }
   handleFocus() {
     this.hasFocus = true;
@@ -243,6 +266,9 @@ var SynSelect = class extends SynergyElement {
     this.open = !this.open;
   }
   handleComboboxKeyDown(event) {
+    if (event.key === "Tab") {
+      return;
+    }
     event.stopPropagation();
     this.handleDocumentKeyDown(event);
   }
@@ -616,7 +642,7 @@ var SynSelect = class extends SynergyElement {
     `;
   }
 };
-SynSelect.styles = select_styles_default;
+SynSelect.styles = [component_styles_default, form_control_styles_default, select_styles_default, form_control_custom_styles_default, select_custom_styles_default];
 SynSelect.dependencies = {
   "syn-icon": SynIcon,
   "syn-popup": SynPopup,
@@ -732,4 +758,4 @@ setDefaultAnimation("select.hide", {
 export {
   SynSelect
 };
-//# sourceMappingURL=chunk.AJWDVZRI.js.map
+//# sourceMappingURL=chunk.RMZBSKRR.js.map