@synergy-design-system/components 1.4.1 → 1.5.1

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.H4N7OLXW.js → chunk.4S6GR2Q7.js}

@@ -12,7 +12,7 @@ import {
 } from "./chunk.VZ7S7YYN.js";
 import {
   SynergyElement
-} from "./chunk.Z2DLW3SL.js";
+} from "./chunk.T72SACBE.js";
 import {
   __decorateClass
 } from "./chunk.DJOAQ4JU.js";
@@ -209,4 +209,4 @@ __decorateClass([
 export {
   SynSwitch
 };
-//# sourceMappingURL=chunk.H4N7OLXW.js.map
+//# sourceMappingURL=chunk.4S6GR2Q7.js.map

package/dist/chunks/{chunk.76T4PEW3.js → chunk.4STUWO3B.js}

@@ -3,10 +3,10 @@ import {
 } from "./chunk.2FN5DTS6.js";
 import {
   SynIcon
-} from "./chunk.QTQBU2M5.js";
+} from "./chunk.OKG27K27.js";
 import {
   SynergyElement
-} from "./chunk.Z2DLW3SL.js";
+} from "./chunk.T72SACBE.js";
 import {
   __decorateClass
 } from "./chunk.DJOAQ4JU.js";
@@ -134,4 +134,4 @@ __decorateClass([
 export {
   SynIconButton
 };
-//# sourceMappingURL=chunk.76T4PEW3.js.map
+//# sourceMappingURL=chunk.4STUWO3B.js.map

package/dist/chunks/{chunk.KWUT7GQA.js → chunk.5FCLDQKW.js}

@@ -9,13 +9,13 @@ import {
 } from "./chunk.AMTCNRDE.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";
@@ -221,4 +221,4 @@ __decorateClass([
 export {
   SynCheckbox
 };
-//# sourceMappingURL=chunk.KWUT7GQA.js.map
+//# sourceMappingURL=chunk.5FCLDQKW.js.map

package/dist/chunks/{chunk.GEV4IJII.js → chunk.64EZRK2A.js}

@@ -1,6 +1,6 @@
 import {
   SynDivider
-} from "./chunk.H3LRV4ST.js";
+} from "./chunk.QCDOK7E4.js";
 
 // src/components/divider/divider.ts
 var divider_default = SynDivider;
@@ -9,4 +9,4 @@ SynDivider.define("syn-divider");
 export {
   divider_default
 };
-//# sourceMappingURL=chunk.GEV4IJII.js.map
+//# sourceMappingURL=chunk.64EZRK2A.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

package/dist/chunks/chunk.6XU6OLZ3.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';\nimport customStyles from './select.custom.styles.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport formControlStyles from '../../styles/form-control.styles.js';\n\nexport default css`\n\t/* stylelint-disable */\n  ${componentStyles}\n  ${formControlStyles}\n\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  ${customStyles}\n`;\n\n"],
+  "mappings": ";;;;;;;;;;;AAMA,SAAS,WAAW;AAKpB,IAAO,wBAAQ;AAAA;AAAA,IAEX,wBAAe;AAAA,IACf,2BAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAgSjB,4BAAY;AAAA;",
+  "names": []
+}

package/dist/chunks/{chunk.A77SRYT2.js → chunk.7MHXK5XU.js}

@@ -1,6 +1,6 @@
 import {
   SynButtonGroup
-} from "./chunk.MTDXRKO3.js";
+} from "./chunk.V57DLRD2.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.A77SRYT2.js.map
+//# sourceMappingURL=chunk.7MHXK5XU.js.map

package/dist/chunks/chunk.BQG5LF7J.js

@@ -0,0 +1,47 @@
+import {
+  __spreadProps,
+  __spreadValues
+} from "./chunk.DJOAQ4JU.js";
+
+// src/utilities/animation-registry.ts
+var defaultAnimationRegistry = /* @__PURE__ */ new Map();
+var customAnimationRegistry = /* @__PURE__ */ new WeakMap();
+function ensureAnimation(animation) {
+  return animation != null ? animation : { keyframes: [], options: { duration: 0 } };
+}
+function getLogicalAnimation(animation, dir) {
+  if (dir.toLowerCase() === "rtl") {
+    return {
+      keyframes: animation.rtlKeyframes || animation.keyframes,
+      options: animation.options
+    };
+  }
+  return animation;
+}
+function setDefaultAnimation(animationName, animation) {
+  defaultAnimationRegistry.set(animationName, ensureAnimation(animation));
+}
+function setAnimation(el, animationName, animation) {
+  customAnimationRegistry.set(el, __spreadProps(__spreadValues({}, customAnimationRegistry.get(el)), { [animationName]: ensureAnimation(animation) }));
+}
+function getAnimation(el, animationName, options) {
+  const customAnimation = customAnimationRegistry.get(el);
+  if (customAnimation == null ? void 0 : customAnimation[animationName]) {
+    return getLogicalAnimation(customAnimation[animationName], options.dir);
+  }
+  const defaultAnimation = defaultAnimationRegistry.get(animationName);
+  if (defaultAnimation) {
+    return getLogicalAnimation(defaultAnimation, options.dir);
+  }
+  return {
+    keyframes: [],
+    options: { duration: 0 }
+  };
+}
+
+export {
+  setDefaultAnimation,
+  setAnimation,
+  getAnimation
+};
+//# sourceMappingURL=chunk.BQG5LF7J.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/utilities/animation-registry.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 */\nexport interface ElementAnimation {\n  keyframes: Keyframe[];\n  rtlKeyframes?: Keyframe[];\n  options?: KeyframeAnimationOptions;\n}\n\nexport interface ElementAnimationMap {\n  [animationName: string]: ElementAnimation;\n}\n\nexport interface GetAnimationOptions {\n  /**\n   * The component's directionality. When set to \"rtl\", `rtlKeyframes` will be preferred over `keyframes` where\n   * available using getAnimation().\n   */\n  dir: string;\n}\n\nconst defaultAnimationRegistry = new Map<string, ElementAnimation>();\nconst customAnimationRegistry = new WeakMap<Element, ElementAnimationMap>();\n\nfunction ensureAnimation(animation: ElementAnimation | null) {\n  return animation ?? { keyframes: [], options: { duration: 0 } };\n}\n\n//\n// Given an ElementAnimation, this function returns a new ElementAnimation where the keyframes property reflects either\n// keyframes or rtlKeyframes depending on the specified directionality.\n//\nfunction getLogicalAnimation(animation: ElementAnimation, dir: string) {\n  if (dir.toLowerCase() === 'rtl') {\n    return {\n      keyframes: animation.rtlKeyframes || animation.keyframes,\n      options: animation.options\n    };\n  }\n\n  return animation;\n}\n\n/**\n * Sets a default animation. Components should use the `name.animation` for primary animations and `name.part.animation`\n * for secondary animations, e.g. `dialog.show` and `dialog.overlay.show`. For modifiers, use `drawer.showTop`.\n */\nexport function setDefaultAnimation(animationName: string, animation: ElementAnimation | null) {\n  defaultAnimationRegistry.set(animationName, ensureAnimation(animation));\n}\n\n/** Sets a custom animation for the specified element. */\nexport function setAnimation(el: Element, animationName: string, animation: ElementAnimation | null) {\n  customAnimationRegistry.set(el, { ...customAnimationRegistry.get(el), [animationName]: ensureAnimation(animation) });\n}\n\n/** Gets an element's animation. Falls back to the default if no animation is found. */\nexport function getAnimation(el: Element, animationName: string, options: GetAnimationOptions) {\n  const customAnimation = customAnimationRegistry.get(el);\n\n  // Check for a custom animation\n  if (customAnimation?.[animationName]) {\n    return getLogicalAnimation(customAnimation[animationName], options.dir);\n  }\n\n  // Check for a default animation\n  const defaultAnimation = defaultAnimationRegistry.get(animationName);\n  if (defaultAnimation) {\n    return getLogicalAnimation(defaultAnimation, options.dir);\n  }\n\n  // Fall back to an empty animation\n  return {\n    keyframes: [],\n    options: { duration: 0 }\n  };\n}\n"],
+  "mappings": ";;;;;;AAwBA,IAAM,2BAA2B,oBAAI,IAA8B;AACnE,IAAM,0BAA0B,oBAAI,QAAsC;AAE1E,SAAS,gBAAgB,WAAoC;AAC3D,SAAO,gCAAa,EAAE,WAAW,CAAC,GAAG,SAAS,EAAE,UAAU,EAAE,EAAE;AAChE;AAMA,SAAS,oBAAoB,WAA6B,KAAa;AACrE,MAAI,IAAI,YAAY,MAAM,OAAO;AAC/B,WAAO;AAAA,MACL,WAAW,UAAU,gBAAgB,UAAU;AAAA,MAC/C,SAAS,UAAU;AAAA,IACrB;AAAA,EACF;AAEA,SAAO;AACT;AAMO,SAAS,oBAAoB,eAAuB,WAAoC;AAC7F,2BAAyB,IAAI,eAAe,gBAAgB,SAAS,CAAC;AACxE;AAGO,SAAS,aAAa,IAAa,eAAuB,WAAoC;AACnG,0BAAwB,IAAI,IAAI,iCAAK,wBAAwB,IAAI,EAAE,IAAnC,EAAsC,CAAC,aAAa,GAAG,gBAAgB,SAAS,EAAE,EAAC;AACrH;AAGO,SAAS,aAAa,IAAa,eAAuB,SAA8B;AAC7F,QAAM,kBAAkB,wBAAwB,IAAI,EAAE;AAGtD,MAAI,mDAAkB,gBAAgB;AACpC,WAAO,oBAAoB,gBAAgB,aAAa,GAAG,QAAQ,GAAG;AAAA,EACxE;AAGA,QAAM,mBAAmB,yBAAyB,IAAI,aAAa;AACnE,MAAI,kBAAkB;AACpB,WAAO,oBAAoB,kBAAkB,QAAQ,GAAG;AAAA,EAC1D;AAGA,SAAO;AAAA,IACL,WAAW,CAAC;AAAA,IACZ,SAAS,EAAE,UAAU,EAAE;AAAA,EACzB;AACF;",
+  "names": []
+}

package/dist/chunks/{chunk.JYBYORNL.js → chunk.D3VKCPDE.js}

@@ -4,24 +4,24 @@ import {
 import {
   defaultValue
 } from "./chunk.WFAJR3FN.js";
-import {
-  LocalizeController
-} from "./chunk.LAB4YJYE.js";
 import {
   HasSlotController
 } from "./chunk.XGXFE6IF.js";
+import {
+  LocalizeController
+} from "./chunk.LAB4YJYE.js";
 import {
   FormControlController
 } from "./chunk.AMTCNRDE.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";
@@ -477,4 +477,4 @@ __decorateClass([
 export {
   SynInput
 };
-//# sourceMappingURL=chunk.JYBYORNL.js.map
+//# sourceMappingURL=chunk.D3VKCPDE.js.map

package/dist/chunks/{chunk.OSOFK3JT.js → chunk.DLPNGATM.js}

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

package/dist/chunks/{chunk.WNPKDJ4G.js → chunk.DVCDA2IN.js}

@@ -1,28 +1,28 @@
 import {
   SynSpinner
-} from "./chunk.5Y446GHK.js";
-import {
-  LocalizeController
-} from "./chunk.LAB4YJYE.js";
+} from "./chunk.UBTUEIMR.js";
 import {
   HasSlotController
 } from "./chunk.XGXFE6IF.js";
+import {
+  LocalizeController
+} from "./chunk.LAB4YJYE.js";
 import {
   FormControlController,
   validValidityState
 } from "./chunk.AMTCNRDE.js";
 import {
   SynIcon
-} from "./chunk.QTQBU2M5.js";
+} from "./chunk.OKG27K27.js";
 import {
   watch
 } from "./chunk.VZ7S7YYN.js";
 import {
   button_styles_default
-} from "./chunk.CQ2JMH2J.js";
+} from "./chunk.OJ4KOC7R.js";
 import {
   SynergyElement
-} from "./chunk.Z2DLW3SL.js";
+} from "./chunk.T72SACBE.js";
 import {
   __decorateClass
 } from "./chunk.DJOAQ4JU.js";
@@ -269,4 +269,4 @@ __decorateClass([
 export {
   SynButton
 };
-//# sourceMappingURL=chunk.WNPKDJ4G.js.map
+//# sourceMappingURL=chunk.DVCDA2IN.js.map

package/dist/chunks/{chunk.KQCYBRJJ.js → chunk.FXTLCVXC.js}

@@ -1,6 +1,6 @@
 import {
   SynCheckbox
-} from "./chunk.KWUT7GQA.js";
+} from "./chunk.5FCLDQKW.js";
 
 // src/components/checkbox/checkbox.ts
 var checkbox_default = SynCheckbox;
@@ -9,4 +9,4 @@ SynCheckbox.define("syn-checkbox");
 export {
   checkbox_default
 };
-//# sourceMappingURL=chunk.KQCYBRJJ.js.map
+//# sourceMappingURL=chunk.FXTLCVXC.js.map

package/dist/chunks/chunk.GVCB2D7B.js

@@ -0,0 +1,12 @@
+import {
+  SynSelect
+} from "./chunk.UTDK2ZT6.js";
+
+// src/components/select/select.ts
+var select_default = SynSelect;
+SynSelect.define("syn-select");
+
+export {
+  select_default
+};
+//# sourceMappingURL=chunk.GVCB2D7B.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/select/select.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 SynSelect from './select.component.js';\n\nexport * from './select.component.js';\nexport default SynSelect;\n\nSynSelect.define('syn-select');\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'syn-select': SynSelect;\n  }\n}\n"],
+  "mappings": ";;;;;AASA,IAAO,iBAAQ;AAEf,UAAU,OAAO,YAAY;",
+  "names": []
+}