@synergy-design-system/components 3.0.0 → 3.2.0

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/tab-panel/tab-panel.component.ts"],
+  "sourcesContent": ["/* eslint-disable */\nimport { classMap } from 'lit/directives/class-map.js';\nimport { html } from 'lit';\nimport { property } 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 './tab-panel.styles.js';\nimport customStyles from './tab-panel.custom.styles.js';\nimport type { CSSResultGroup } from 'lit';\n\nlet id = 0;\n\n/**\n * @summary Tab panels are used inside [tab groups](/components/tab-group) to display tabbed content.\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-tab-panel--docs\n * @status stable\n * @since 2.0\n *\n * @slot - The tab panel's content.\n *\n * @csspart base - The component's base wrapper.\n *\n * @cssproperty --padding - The tab panel's padding.\n */\nexport default class SynTabPanel extends SynergyElement {\n  static styles: CSSResultGroup = [componentStyles, styles, customStyles];\n\n  private readonly attrId = ++id;\n  private readonly componentId = `syn-tab-panel-${this.attrId}`;\n\n  /** The tab panel's name. */\n  @property({ reflect: true }) name = '';\n\n  /** When true, the tab panel will be shown. */\n  @property({ type: Boolean, reflect: true }) active = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.id = this.id.length > 0 ? this.id : this.componentId;\n    this.setAttribute('role', 'tabpanel');\n  }\n\n  @watch('active')\n  handleActiveChange() {\n    this.setAttribute('aria-hidden', this.active ? 'false' : 'true');\n  }\n\n  render() {\n    return html`\n      <slot\n        part=\"base\"\n        class=${classMap({\n          'tab-panel': true,\n          'tab-panel--active': this.active\n        })}\n      ></slot>\n    `;\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AACA,SAAS,gBAAgB;AACzB,SAAS,YAAY;AACrB,SAAS,gBAAgB;AAQzB,IAAI,KAAK;AAcT,IAAqB,cAArB,cAAyC,eAAe;AAAA,EAAxD;AAAA;AAGE,SAAiB,SAAS,EAAE;AAC5B,SAAiB,cAAc,iBAAiB,KAAK,MAAM;AAG9B,gBAAO;AAGQ,kBAAS;AAAA;AAAA,EAErD,oBAAoB;AAClB,UAAM,kBAAkB;AACxB,SAAK,KAAK,KAAK,GAAG,SAAS,IAAI,KAAK,KAAK,KAAK;AAC9C,SAAK,aAAa,QAAQ,UAAU;AAAA,EACtC;AAAA,EAGA,qBAAqB;AACnB,SAAK,aAAa,eAAe,KAAK,SAAS,UAAU,MAAM;AAAA,EACjE;AAAA,EAEA,SAAS;AACP,WAAO;AAAA;AAAA;AAAA,gBAGK,SAAS;AAAA,MACf,aAAa;AAAA,MACb,qBAAqB,KAAK;AAAA,IAC5B,CAAC,CAAC;AAAA;AAAA;AAAA,EAGR;AACF;AAlCqB,YACZ,SAAyB,CAAC,0BAAiB,0BAAQ,+BAAY;AAMzC;AAAA,EAA5B,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA,GAPR,YAOU;AAGe;AAAA,EAA3C,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAVvB,YAUyB;AAS5C;AAAA,EADC,MAAM,QAAQ;AAAA,GAlBI,YAmBnB;",
+  "names": []
+}

package/dist/chunks/{chunk.42F33KBM.js → chunk.FUYMXIMF.js}

@@ -3,13 +3,13 @@ import {
 } from "./chunk.3T6ULO23.js";
 import {
   SynDivider
-} from "./chunk.F4TDCDGD.js";
+} from "./chunk.FBYEVEZ6.js";
 import {
   HasSlotController
-} from "./chunk.WVVQK5TE.js";
+} from "./chunk.CHFWLQN5.js";
 import {
   SynergyElement
-} from "./chunk.JG7YXWHG.js";
+} from "./chunk.ECNXEYTN.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -131,4 +131,4 @@ __decorateClass([
 export {
   SynOptgroup
 };
-//# sourceMappingURL=chunk.42F33KBM.js.map
+//# sourceMappingURL=chunk.FUYMXIMF.js.map

package/dist/chunks/{chunk.BWTMFHNM.js → chunk.FVIRHFY6.js}

@@ -38,13 +38,14 @@ var getValueFromOption = (option) => {
   }
   return value;
 };
+var getValuesFromOptions = (options) => options.map(getValueFromOption);
 var checkValueBelongsToOption = (value, option) => {
-  if (!option || !value) {
+  if (!option || value === void 0 || value === null || value === "") {
     return false;
   }
   const optionValue = option.value;
   const optionText = option.getTextLabel();
-  return value === optionValue || value === optionText;
+  return String(value) === String(optionValue) || String(value) === optionText;
 };
 
 export {
@@ -57,6 +58,7 @@ export {
   createElementFromTemplateResult,
   createOptionFromDifferentTypes,
   getValueFromOption,
+  getValuesFromOptions,
   checkValueBelongsToOption
 };
-//# sourceMappingURL=chunk.BWTMFHNM.js.map
+//# sourceMappingURL=chunk.FVIRHFY6.js.map

package/dist/chunks/{chunk.BWTMFHNM.js.map → chunk.FVIRHFY6.js.map}

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/components/combobox/utils.ts"],
-  "sourcesContent": ["import { type TemplateResult, html, render } from 'lit';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport type SynOptGroup from '../optgroup/optgroup.js';\nimport type SynOption from '../option/option.component.js';\n\n/**\n * Get a list of all assigned elements for a given slot\n * @param slot The slot to query\n * @returns Flattened list of assigned elements\n */\nexport const getAssignedElementsForSlot = (slot: HTMLSlotElement) => Array.from(\n  slot.assignedElements({ flatten: true }),\n) as HTMLElement[];\n\n/**\n * Retrieves the option or nested options from the provided HTMLElement.\n *\n * @param item - The HTMLElement representing the option or containing nested options.\n * @returns The found syn-option(s)\n */\nexport const getOptionOrNestedOptions = (item: HTMLElement): SynOption | SynOption[] => (\n  item.tagName.toLocaleLowerCase() === 'syn-option' ? item as SynOption : Array.from(item.querySelectorAll<SynOption>(':scope > syn-option'))\n);\n\n/**\n * Check if an item is a syn-optgroup\n * @param item The item to check for\n * @returns True if the item is a SynOptgroup, false otherwise\n */\nexport const isOptgroup = (item: HTMLElement): item is SynOptGroup => (\n  item.tagName.toLocaleLowerCase() === 'syn-optgroup'\n);\n\n/**\n * Get a list of only Option elements\n * @param items List of items to check for\n * @returns New array of all found syn-nav-items\n */\nexport const getAllOptions = (items: HTMLElement[]) => items.map(getOptionOrNestedOptions);\n\n/**\n * Get a list of only Optgroup elements\n * @param items List of items to check for\n * @returns New array of all found syn-optgroup's\n */\nexport const filterOnlyOptgroups = (items: HTMLElement[]) => items.filter(isOptgroup);\n\n/**\n * Normalize a string by removing accents and converting to lowercase\n * @param str The string to normalize\n * @returns The normalized string\n */\nexport const normalizeString = (str: string) => str.normalize('NFD').replace(/[\\u0300-\\u036f]/g, '').toLowerCase();\n\n/**\n * Creates a `SynOption` element from a given `TemplateResult`.\n * We assume that the given `TemplateResult` is a <syn-option>.\n *\n * @param template - The `TemplateResult` to be rendered into a `SynOption`.\n * @returns The created SynOption element\n */\nexport const createElementFromTemplateResult = (template: TemplateResult) => {\n  const container = document.createElement('div');\n  render(template, container);\n  return container.firstElementChild as HTMLElement;\n};\n\nconst getOptionOrUndefined = (element: HTMLElement) => (element.tagName.toLocaleLowerCase() === 'syn-option' ? element as SynOption : undefined);\n\n/**\n * This function takes an input of type `TemplateResult`, `string`, or `HTMLElement`\n * and creates an SynOption from it.\n *\n * @param option - The option which can be of type `TemplateResult`, `string` or `HTMLElement`.\n * @returns The created SynOption or undefined if the option was not a valid type.\n */\nexport const createOptionFromDifferentTypes = (option: TemplateResult | string | HTMLElement) => {\n  if (!option) return undefined;\n\n  if (option instanceof HTMLElement) {\n    return getOptionOrUndefined(option);\n  }\n\n  if (typeof option === 'string') {\n    const template = html`${unsafeHTML(option)}`;\n    const element = createElementFromTemplateResult(template);\n    return getOptionOrUndefined(element);\n  }\n\n  if (Object.prototype.hasOwnProperty.call(option, '_$litType$')) {\n    const element = createElementFromTemplateResult(option);\n    return getOptionOrUndefined(element);\n  }\n\n  return undefined;\n};\n\n/**\n * Gets the value from an option. If an option has no value, it will use the text label.\n * @param option The syn-option to get the value from\n * @returns The value of the option\n */\nexport const getValueFromOption = (option: SynOption) => {\n  const { value } = option;\n  if (value === undefined || value === null || value === '') {\n    // If the option has no value, use the text label\n    return option.getTextLabel();\n  }\n  return value;\n};\n\n/**\n * Check if a value belongs to the value or text label of an option.\n * @param value The value to check\n * @param option The option to check against\n * @returns True if the value belongs to the option, false otherwise\n */\nexport const checkValueBelongsToOption = (value: string, option: SynOption | undefined) => {\n  if (!option || !value) {\n    return false;\n  }\n\n  const optionValue = option.value;\n  const optionText = option.getTextLabel();\n  return value === optionValue || value === optionText;\n};\n"],
-  "mappings": ";AAAA,SAA8B,MAAM,cAAc;AAClD,SAAS,kBAAkB;AASpB,IAAM,6BAA6B,CAAC,SAA0B,MAAM;AAAA,EACzE,KAAK,iBAAiB,EAAE,SAAS,KAAK,CAAC;AACzC;AAQO,IAAM,2BAA2B,CAAC,SACvC,KAAK,QAAQ,kBAAkB,MAAM,eAAe,OAAoB,MAAM,KAAK,KAAK,iBAA4B,qBAAqB,CAAC;AAQrI,IAAM,aAAa,CAAC,SACzB,KAAK,QAAQ,kBAAkB,MAAM;AAQhC,IAAM,gBAAgB,CAAC,UAAyB,MAAM,IAAI,wBAAwB;AAOlF,IAAM,sBAAsB,CAAC,UAAyB,MAAM,OAAO,UAAU;AAO7E,IAAM,kBAAkB,CAAC,QAAgB,IAAI,UAAU,KAAK,EAAE,QAAQ,oBAAoB,EAAE,EAAE,YAAY;AAS1G,IAAM,kCAAkC,CAAC,aAA6B;AAC3E,QAAM,YAAY,SAAS,cAAc,KAAK;AAC9C,SAAO,UAAU,SAAS;AAC1B,SAAO,UAAU;AACnB;AAEA,IAAM,uBAAuB,CAAC,YAA0B,QAAQ,QAAQ,kBAAkB,MAAM,eAAe,UAAuB;AAS/H,IAAM,iCAAiC,CAAC,WAAkD;AAC/F,MAAI,CAAC,OAAQ,QAAO;AAEpB,MAAI,kBAAkB,aAAa;AACjC,WAAO,qBAAqB,MAAM;AAAA,EACpC;AAEA,MAAI,OAAO,WAAW,UAAU;AAC9B,UAAM,WAAW,OAAO,WAAW,MAAM,CAAC;AAC1C,UAAM,UAAU,gCAAgC,QAAQ;AACxD,WAAO,qBAAqB,OAAO;AAAA,EACrC;AAEA,MAAI,OAAO,UAAU,eAAe,KAAK,QAAQ,YAAY,GAAG;AAC9D,UAAM,UAAU,gCAAgC,MAAM;AACtD,WAAO,qBAAqB,OAAO;AAAA,EACrC;AAEA,SAAO;AACT;AAOO,IAAM,qBAAqB,CAAC,WAAsB;AACvD,QAAM,EAAE,MAAM,IAAI;AAClB,MAAI,UAAU,UAAa,UAAU,QAAQ,UAAU,IAAI;AAEzD,WAAO,OAAO,aAAa;AAAA,EAC7B;AACA,SAAO;AACT;AAQO,IAAM,4BAA4B,CAAC,OAAe,WAAkC;AACzF,MAAI,CAAC,UAAU,CAAC,OAAO;AACrB,WAAO;AAAA,EACT;AAEA,QAAM,cAAc,OAAO;AAC3B,QAAM,aAAa,OAAO,aAAa;AACvC,SAAO,UAAU,eAAe,UAAU;AAC5C;",
+  "sourcesContent": ["import { type TemplateResult, html, render } from 'lit';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport type SynOptGroup from '../optgroup/optgroup.js';\nimport type SynOption from '../option/option.component.js';\n\n/**\n * Get a list of all assigned elements for a given slot\n * @param slot The slot to query\n * @returns Flattened list of assigned elements\n */\nexport const getAssignedElementsForSlot = (slot: HTMLSlotElement) => Array.from(\n  slot.assignedElements({ flatten: true }),\n) as HTMLElement[];\n\n/**\n * Retrieves the option or nested options from the provided HTMLElement.\n *\n * @param item - The HTMLElement representing the option or containing nested options.\n * @returns The found syn-option(s)\n */\nexport const getOptionOrNestedOptions = (item: HTMLElement): SynOption | SynOption[] => (\n  item.tagName.toLocaleLowerCase() === 'syn-option' ? item as SynOption : Array.from(item.querySelectorAll<SynOption>(':scope > syn-option'))\n);\n\n/**\n * Check if an item is a syn-optgroup\n * @param item The item to check for\n * @returns True if the item is a SynOptgroup, false otherwise\n */\nexport const isOptgroup = (item: HTMLElement): item is SynOptGroup => (\n  item.tagName.toLocaleLowerCase() === 'syn-optgroup'\n);\n\n/**\n * Get a list of only Option elements\n * @param items List of items to check for\n * @returns New array of all found syn-nav-items\n */\nexport const getAllOptions = (items: HTMLElement[]) => items.map(getOptionOrNestedOptions);\n\n/**\n * Get a list of only Optgroup elements\n * @param items List of items to check for\n * @returns New array of all found syn-optgroup's\n */\nexport const filterOnlyOptgroups = (items: HTMLElement[]) => items.filter(isOptgroup);\n\n/**\n * Normalize a string by removing accents and converting to lowercase\n * @param str The string to normalize\n * @returns The normalized string\n */\nexport const normalizeString = (str: string) => str.normalize('NFD').replace(/[\\u0300-\\u036f]/g, '').toLowerCase();\n\n/**\n * Creates a `SynOption` element from a given `TemplateResult`.\n * We assume that the given `TemplateResult` is a <syn-option>.\n *\n * @param template - The `TemplateResult` to be rendered into a `SynOption`.\n * @returns The created SynOption element\n */\nexport const createElementFromTemplateResult = (template: TemplateResult) => {\n  const container = document.createElement('div');\n  render(template, container);\n  return container.firstElementChild as HTMLElement;\n};\n\nconst getOptionOrUndefined = (element: HTMLElement) => (element.tagName.toLocaleLowerCase() === 'syn-option' ? element as SynOption : undefined);\n\n/**\n * This function takes an input of type `TemplateResult`, `string`, or `HTMLElement`\n * and creates an SynOption from it.\n *\n * @param option - The option which can be of type `TemplateResult`, `string` or `HTMLElement`.\n * @returns The created SynOption or undefined if the option was not a valid type.\n */\nexport const createOptionFromDifferentTypes = (option: TemplateResult | string | HTMLElement) => {\n  if (!option) return undefined;\n\n  if (option instanceof HTMLElement) {\n    return getOptionOrUndefined(option);\n  }\n\n  if (typeof option === 'string') {\n    const template = html`${unsafeHTML(option)}`;\n    const element = createElementFromTemplateResult(template);\n    return getOptionOrUndefined(element);\n  }\n\n  if (Object.prototype.hasOwnProperty.call(option, '_$litType$')) {\n    const element = createElementFromTemplateResult(option);\n    return getOptionOrUndefined(element);\n  }\n\n  return undefined;\n};\n\n/**\n * Gets the value from an option. If an option has no value, it will use the text label.\n * @param option The syn-option to get the value from\n * @returns The value of the option\n */\nexport const getValueFromOption = (option: SynOption) => {\n  const { value } = option;\n  if (value === undefined || value === null || value === '') {\n    // If the option has no value, use the text label\n    return option.getTextLabel();\n  }\n  return value;\n};\n\n/**\n * Get the values for options. If an option has no value, it will use the text label.\n *\n * @param options List of syn-options to get the values from\n * @returns The values of the options\n */\nexport const getValuesFromOptions = (options: SynOption[]) => options.map(getValueFromOption);\n\n/**\n * Check if a value belongs to the value or text label of an option.\n * @param value The value to check\n * @param option The option to check against\n * @returns True if the value belongs to the option, false otherwise\n */\nexport const checkValueBelongsToOption = (value: string | number, option: SynOption | undefined) => {\n  if (!option || value === undefined || value === null || value === '') {\n    return false;\n  }\n\n  const optionValue = option.value;\n  const optionText = option.getTextLabel();\n  return String(value) === String(optionValue) || String(value) === optionText;\n};\n"],
+  "mappings": ";AAAA,SAA8B,MAAM,cAAc;AAClD,SAAS,kBAAkB;AASpB,IAAM,6BAA6B,CAAC,SAA0B,MAAM;AAAA,EACzE,KAAK,iBAAiB,EAAE,SAAS,KAAK,CAAC;AACzC;AAQO,IAAM,2BAA2B,CAAC,SACvC,KAAK,QAAQ,kBAAkB,MAAM,eAAe,OAAoB,MAAM,KAAK,KAAK,iBAA4B,qBAAqB,CAAC;AAQrI,IAAM,aAAa,CAAC,SACzB,KAAK,QAAQ,kBAAkB,MAAM;AAQhC,IAAM,gBAAgB,CAAC,UAAyB,MAAM,IAAI,wBAAwB;AAOlF,IAAM,sBAAsB,CAAC,UAAyB,MAAM,OAAO,UAAU;AAO7E,IAAM,kBAAkB,CAAC,QAAgB,IAAI,UAAU,KAAK,EAAE,QAAQ,oBAAoB,EAAE,EAAE,YAAY;AAS1G,IAAM,kCAAkC,CAAC,aAA6B;AAC3E,QAAM,YAAY,SAAS,cAAc,KAAK;AAC9C,SAAO,UAAU,SAAS;AAC1B,SAAO,UAAU;AACnB;AAEA,IAAM,uBAAuB,CAAC,YAA0B,QAAQ,QAAQ,kBAAkB,MAAM,eAAe,UAAuB;AAS/H,IAAM,iCAAiC,CAAC,WAAkD;AAC/F,MAAI,CAAC,OAAQ,QAAO;AAEpB,MAAI,kBAAkB,aAAa;AACjC,WAAO,qBAAqB,MAAM;AAAA,EACpC;AAEA,MAAI,OAAO,WAAW,UAAU;AAC9B,UAAM,WAAW,OAAO,WAAW,MAAM,CAAC;AAC1C,UAAM,UAAU,gCAAgC,QAAQ;AACxD,WAAO,qBAAqB,OAAO;AAAA,EACrC;AAEA,MAAI,OAAO,UAAU,eAAe,KAAK,QAAQ,YAAY,GAAG;AAC9D,UAAM,UAAU,gCAAgC,MAAM;AACtD,WAAO,qBAAqB,OAAO;AAAA,EACrC;AAEA,SAAO;AACT;AAOO,IAAM,qBAAqB,CAAC,WAAsB;AACvD,QAAM,EAAE,MAAM,IAAI;AAClB,MAAI,UAAU,UAAa,UAAU,QAAQ,UAAU,IAAI;AAEzD,WAAO,OAAO,aAAa;AAAA,EAC7B;AACA,SAAO;AACT;AAQO,IAAM,uBAAuB,CAAC,YAAyB,QAAQ,IAAI,kBAAkB;AAQrF,IAAM,4BAA4B,CAAC,OAAwB,WAAkC;AAClG,MAAI,CAAC,UAAU,UAAU,UAAa,UAAU,QAAQ,UAAU,IAAI;AACpE,WAAO;AAAA,EACT;AAEA,QAAM,cAAc,OAAO;AAC3B,QAAM,aAAa,OAAO,aAAa;AACvC,SAAO,OAAO,KAAK,MAAM,OAAO,WAAW,KAAK,OAAO,KAAK,MAAM;AACpE;",
   "names": []
 }

package/dist/chunks/{chunk.NLYVOJGK.js → chunk.FXJLG622.js}

@@ -20,4 +20,4 @@ var component_styles_default = css`
 export {
   component_styles_default
 };
-//# sourceMappingURL=chunk.NLYVOJGK.js.map
+//# sourceMappingURL=chunk.FXJLG622.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/styles/component.styles.ts"],
+  "sourcesContent": ["/* eslint-disable */\nimport { css } from 'lit';\n\nexport default css`\n\t/* stylelint-disable */\n  :host {\n    box-sizing: border-box;\n  }\n\n  :host *,\n  :host *::before,\n  :host *::after {\n    box-sizing: inherit;\n  }\n\n  [hidden] {\n    display: none !important;\n  }\n`;\n"],
+  "mappings": ";AACA,SAAS,WAAW;AAEpB,IAAO,2BAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}

package/dist/chunks/{chunk.D5GEYHUG.js → chunk.GEMZSFPA.js}

@@ -1,18 +1,18 @@
+import {
+  spinner_styles_default
+} from "./chunk.7V7XEBE2.js";
 import {
   spinner_custom_styles_default
 } from "./chunk.WQMTAEYE.js";
-import {
-  spinner_styles_default
-} from "./chunk.JLXCLATV.js";
 import {
   LocalizeController
-} from "./chunk.OAQRCZOO.js";
+} from "./chunk.QLETXF4A.js";
 import {
   component_styles_default
-} from "./chunk.NLYVOJGK.js";
+} from "./chunk.FXJLG622.js";
 import {
   SynergyElement
-} from "./chunk.JG7YXWHG.js";
+} from "./chunk.ECNXEYTN.js";
 
 // src/components/spinner/spinner.component.ts
 import { html } from "lit";
@@ -35,4 +35,4 @@ SynSpinner.styles = [component_styles_default, spinner_styles_default, spinner_c
 export {
   SynSpinner
 };
-//# sourceMappingURL=chunk.D5GEYHUG.js.map
+//# sourceMappingURL=chunk.GEMZSFPA.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/spinner/spinner.component.ts"],
+  "sourcesContent": ["/* eslint-disable */\nimport { html } from 'lit';\nimport { LocalizeController } from '../../utilities/localize.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport styles from './spinner.styles.js';\nimport customStyles from './spinner.custom.styles.js';\nimport type { CSSResultGroup } from 'lit';\n\n/**\n * @summary Spinners are used to show the progress of an indeterminate operation.\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-spinner--docs\n * @status stable\n * @since 2.0\n *\n * @csspart base - The component's base wrapper.\n *\n * @cssproperty --track-width - The width of the track.\n * @cssproperty --indicator-color - The color of the spinner's indicator.\n * @cssproperty --speed - The time it takes for the spinner to complete one animation cycle.\n */\nexport default class SynSpinner extends SynergyElement {\n  static styles: CSSResultGroup = [componentStyles, styles, customStyles];\n\n  private readonly localize = new LocalizeController(this);\n\n  render() {\n    return html`\n      <svg part=\"base\" class=\"spinner\" role=\"progressbar\" aria-label=${this.localize.term('loading')}>\n        <circle class=\"spinner__track\"></circle>\n        <circle class=\"spinner__indicator\"></circle>\n      </svg>\n    `;\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;AACA,SAAS,YAAY;AAoBrB,IAAqB,aAArB,cAAwC,eAAe;AAAA,EAAvD;AAAA;AAGE,SAAiB,WAAW,IAAI,mBAAmB,IAAI;AAAA;AAAA,EAEvD,SAAS;AACP,WAAO;AAAA,uEAC4D,KAAK,SAAS,KAAK,SAAS,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,EAKlG;AACF;AAbqB,WACZ,SAAyB,CAAC,0BAAiB,wBAAQ,6BAAY;",
+  "names": []
+}

package/dist/chunks/{chunk.5QGW4QZT.js → chunk.GFD645IU.js}

@@ -3,16 +3,16 @@ import {
 } from "./chunk.36EHOOOO.js";
 import {
   popup_styles_default
-} from "./chunk.AZ3N5IOO.js";
+} from "./chunk.DEJAPNIZ.js";
 import {
   LocalizeController
-} from "./chunk.OAQRCZOO.js";
+} from "./chunk.QLETXF4A.js";
 import {
   component_styles_default
-} from "./chunk.NLYVOJGK.js";
+} from "./chunk.FXJLG622.js";
 import {
   SynergyElement
-} from "./chunk.JG7YXWHG.js";
+} from "./chunk.ECNXEYTN.js";
 import {
   __decorateClass,
   __spreadProps,
@@ -426,4 +426,4 @@ __decorateClass([
 export {
   SynPopup
 };
-//# sourceMappingURL=chunk.5QGW4QZT.js.map
+//# sourceMappingURL=chunk.GFD645IU.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/popup/popup.component.ts"],
+  "sourcesContent": ["/* eslint-disable */\nimport { arrow, autoUpdate, computePosition, flip, offset, platform, shift, size } from '@floating-ui/dom';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { html } from 'lit';\nimport { LocalizeController } from '../../utilities/localize.js';\nimport { offsetParent } from 'composed-offset-position';\nimport { property, query } from 'lit/decorators.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport styles from './popup.styles.js';\nimport customStyles from './popup.custom.styles.js';\nimport type { CSSResultGroup } from 'lit';\n\nconst SUPPORTS_POPOVER = globalThis?.HTMLElement?.prototype.hasOwnProperty('popover');\n\nexport interface VirtualElement {\n  getBoundingClientRect: () => DOMRect;\n  contextElement?: Element;\n}\n\nfunction isVirtualElement(e: unknown): e is VirtualElement {\n  return (\n    e !== null &&\n    typeof e === 'object' &&\n    'getBoundingClientRect' in e &&\n    ('contextElement' in e ? e.contextElement instanceof Element : true)\n  );\n}\n\n/**\n * @summary Popup is a utility that lets you declaratively anchor \"popup\" containers to another element.\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-popup--docs\n * @status stable\n * @since 2.0\n *\n * @event syn-reposition - Emitted when the popup is repositioned. This event can fire a lot, so avoid putting expensive\n *  operations in your listener or consider debouncing it.\n *\n * @slot - The popup's content.\n * @slot anchor - The element the popup will be anchored to. If the anchor lives outside of the popup, you can use the\n *  `anchor` attribute or property instead.\n *\n * @csspart arrow - The arrow's container. Avoid setting `top|bottom|left|right` properties, as these values are\n *  assigned dynamically as the popup moves. This is most useful for applying a background color to match the popup, and\n *  maybe a border or box shadow.\n * @csspart popup - The popup's container. Useful for setting a background color, box shadow, etc.\n * @csspart hover-bridge - The hover bridge element. Only available when the `hover-bridge` option is enabled.\n *\n * @cssproperty [--arrow-size=6px] - The size of the arrow. Note that an arrow won't be shown unless the `arrow`\n *  attribute is used.\n * @cssproperty [--arrow-color=var(--syn-color-neutral-0)] - The color of the arrow.\n * @cssproperty [--auto-size-available-width] - A read-only custom property that determines the amount of width the\n *  popup can be before overflowing. Useful for positioning child elements that need to overflow. This property is only\n *  available when using `auto-size`.\n * @cssproperty [--auto-size-available-height] - A read-only custom property that determines the amount of height the\n *  popup can be before overflowing. Useful for positioning child elements that need to overflow. This property is only\n *  available when using `auto-size`.\n */\nexport default class SynPopup extends SynergyElement {\n  static styles: CSSResultGroup = [componentStyles, styles, customStyles];\n\n  private anchorEl: Element | VirtualElement | null;\n  private cleanup: ReturnType<typeof autoUpdate> | undefined;\n  private readonly localize = new LocalizeController(this);\n\n  /** A reference to the internal popup container. Useful for animating and styling the popup with JavaScript. */\n  @query('.popup') popup: HTMLElement;\n  @query('.popup__arrow') private arrowEl: HTMLElement;\n\n  /**\n   * The element the popup will be anchored to. If the anchor lives outside of the popup, you can provide the anchor\n   * element `id`, a DOM element reference, or a `VirtualElement`. If the anchor lives inside the popup, use the\n   * `anchor` slot instead.\n   */\n  @property() anchor: Element | string | VirtualElement;\n\n  /**\n   * Activates the positioning logic and shows the popup. When this attribute is removed, the positioning logic is torn\n   * down and the popup will be hidden.\n   */\n  @property({ type: Boolean, reflect: true }) active = false;\n\n  /**\n   * The preferred placement of the popup. Note that the actual placement will vary as configured to keep the\n   * panel inside of the viewport.\n   */\n  @property({ reflect: true }) placement:\n    | 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end' = 'top';\n\n  /** The distance in pixels from which to offset the panel away from its anchor. */\n  @property({ type: Number }) distance = 0;\n\n  /** The distance in pixels from which to offset the panel along its anchor. */\n  @property({ type: Number }) skidding = 0;\n\n  /**\n   * Attaches an arrow to the popup. The arrow's size and color can be customized using the `--arrow-size` and\n   * `--arrow-color` custom properties. For additional customizations, you can also target the arrow using\n   * `::part(arrow)` in your stylesheet.\n   */\n  @property({ type: Boolean }) arrow = false;\n\n  /**\n   * The placement of the arrow. The default is `anchor`, which will align the arrow as close to the center of the\n   * anchor as possible, considering available space and `arrow-padding`. A value of `start`, `end`, or `center` will\n   * align the arrow to the start, end, or center of the popover instead.\n   */\n  @property({ attribute: 'arrow-placement' }) arrowPlacement: 'start' | 'end' | 'center' | 'anchor' = 'anchor';\n\n  /**\n   * The amount of padding between the arrow and the edges of the popup. If the popup has a border-radius, for example,\n   * this will prevent it from overflowing the corners.\n   */\n  @property({ attribute: 'arrow-padding', type: Number }) arrowPadding = 10;\n\n  /**\n   * When set, placement of the popup will flip to the opposite site to keep it in view. You can use\n   * `flipFallbackPlacements` to further configure how the fallback placement is determined.\n   */\n  @property({ type: Boolean }) flip = false;\n\n  /**\n   * If the preferred placement doesn't fit, popup will be tested in these fallback placements until one fits. Must be a\n   * string of any number of placements separated by a space, e.g. \"top bottom left\". If no placement fits, the flip\n   * fallback strategy will be used instead.\n   * */\n  @property({\n    attribute: 'flip-fallback-placements',\n    converter: {\n      fromAttribute: (value: string) => {\n        return value\n          .split(' ')\n          .map(p => p.trim())\n          .filter(p => p !== '');\n      },\n      toAttribute: (value: []) => {\n        return value.join(' ');\n      }\n    }\n  })\n  flipFallbackPlacements = '';\n\n  /**\n   * When neither the preferred placement nor the fallback placements fit, this value will be used to determine whether\n   * the popup should be positioned using the best available fit based on available space or as it was initially\n   * preferred.\n   */\n  @property({ attribute: 'flip-fallback-strategy' }) flipFallbackStrategy: 'best-fit' | 'initial' = 'best-fit';\n\n  /**\n   * The flip boundary describes clipping element(s) that overflow will be checked relative to when flipping. By\n   * default, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\n   * change the boundary by passing a reference to one or more elements to this property.\n   */\n  @property({ type: Object }) flipBoundary: Element | Element[];\n\n  /** The amount of padding, in pixels, to exceed before the flip behavior will occur. */\n  @property({ attribute: 'flip-padding', type: Number }) flipPadding = 0;\n\n  /** Moves the popup along the axis to keep it in view when clipped. */\n  @property({ type: Boolean }) shift = false;\n\n  /**\n   * The shift boundary describes clipping element(s) that overflow will be checked relative to when shifting. By\n   * default, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\n   * change the boundary by passing a reference to one or more elements to this property.\n   */\n  @property({ type: Object }) shiftBoundary: Element | Element[];\n\n  /** The amount of padding, in pixels, to exceed before the shift behavior will occur. */\n  @property({ attribute: 'shift-padding', type: Number }) shiftPadding = 0;\n\n  /** When set, this will cause the popup to automatically resize itself to prevent it from overflowing. */\n  @property({ attribute: 'auto-size' }) autoSize: 'horizontal' | 'vertical' | 'both';\n\n  /** Syncs the popup's width or height to that of the anchor element. */\n  @property() sync: 'width' | 'height' | 'both';\n\n  /**\n   * The auto-size boundary describes clipping element(s) that overflow will be checked relative to when resizing. By\n   * default, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\n   * change the boundary by passing a reference to one or more elements to this property.\n   */\n  @property({ type: Object }) autoSizeBoundary: Element | Element[];\n\n  /** The amount of padding, in pixels, to exceed before the auto-size behavior will occur. */\n  @property({ attribute: 'auto-size-padding', type: Number }) autoSizePadding = 0;\n\n  /**\n   * When a gap exists between the anchor and the popup element, this option will add a \"hover bridge\" that fills the\n   * gap using an invisible element. This makes listening for events such as `mouseenter` and `mouseleave` more sane\n   * because the pointer never technically leaves the element. The hover bridge will only be drawn when the popover is\n   * active.\n   */\n  @property({ attribute: 'hover-bridge', type: Boolean }) hoverBridge = false;\n\n  async connectedCallback() {\n    super.connectedCallback();\n\n    // Start the positioner after the first update\n    await this.updateComplete;\n    this.start();\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.stop();\n  }\n\n  async updated(changedProps: Map<string, unknown>) {\n    super.updated(changedProps);\n\n    // Start or stop the positioner when active changes\n    if (changedProps.has('active')) {\n      if (this.active) {\n        this.start();\n      } else {\n        this.stop();\n      }\n    }\n\n    // Update the anchor when anchor changes\n    if (changedProps.has('anchor')) {\n      this.handleAnchorChange();\n    }\n\n    // All other properties will trigger a reposition when active\n    if (this.active) {\n      await this.updateComplete;\n      this.reposition();\n    }\n  }\n\n  private async handleAnchorChange() {\n    await this.stop();\n\n    if (this.anchor && typeof this.anchor === 'string') {\n      // Locate the anchor by id\n      const root = this.getRootNode() as Document | ShadowRoot;\n      this.anchorEl = root.getElementById(this.anchor);\n    } else if (this.anchor instanceof Element || isVirtualElement(this.anchor)) {\n      // Use the anchor's reference\n      this.anchorEl = this.anchor;\n    } else {\n      // Look for a slotted anchor\n      this.anchorEl = this.querySelector<HTMLElement>('[slot=\"anchor\"]');\n    }\n\n    // If the anchor is a <slot>, we'll use the first assigned element as the target since slots use `display: contents`\n    // and positioning can't be calculated on them\n    if (this.anchorEl instanceof HTMLSlotElement) {\n      this.anchorEl = this.anchorEl.assignedElements({ flatten: true })[0] as HTMLElement;\n    }\n\n    // If the anchor is valid, start it up\n    if (this.anchorEl && this.active) {\n      this.start();\n    }\n  }\n\n  private start() {\n    // We can't start the positioner without an anchor or when the popup is inactive\n    if (!this.anchorEl || !this.active) {\n      return;\n    }\n\n    if (SUPPORTS_POPOVER) {\n      this.popup.showPopover?.();\n    }\n\n    this.cleanup = autoUpdate(this.anchorEl, this.popup, () => {\n      this.reposition();\n    });\n  }\n\n  private async stop(): Promise<void> {\n    return new Promise(resolve => {\n      if (SUPPORTS_POPOVER) {\n        // #1041 In some testing frameworks the disconnectedCallback is called too early so this.popup is not yet available\n        this.popup?.hidePopover?.();\n      }\n      if (this.cleanup) {\n        this.cleanup();\n        this.cleanup = undefined;\n        this.removeAttribute('data-current-placement');\n        this.style.removeProperty('--auto-size-available-width');\n        this.style.removeProperty('--auto-size-available-height');\n        requestAnimationFrame(() => resolve());\n      } else {\n        resolve();\n      }\n    });\n  }\n\n  /** Forces the popup to recalculate and reposition itself. */\n  reposition() {\n    // Nothing to do if the popup is inactive or the anchor doesn't exist\n    if (!this.active || !this.anchorEl) {\n      return;\n    }\n\n    //\n    // NOTE: Floating UI middlewares are order dependent: https://floating-ui.com/docs/middleware\n    //\n    const middleware = [\n      // The offset middleware goes first\n      offset({ mainAxis: this.distance, crossAxis: this.skidding })\n    ];\n\n    // First we sync width/height\n    if (this.sync) {\n      middleware.push(\n        size({\n          apply: ({ rects }) => {\n            const syncWidth = this.sync === 'width' || this.sync === 'both';\n            const syncHeight = this.sync === 'height' || this.sync === 'both';\n            this.popup.style.width = syncWidth ? `${rects.reference.width}px` : '';\n            this.popup.style.height = syncHeight ? `${rects.reference.height}px` : '';\n          }\n        })\n      );\n    } else {\n      // Cleanup styles if we're not matching width/height\n      this.popup.style.width = '';\n      this.popup.style.height = '';\n    }\n\n    // Then we flip\n    if (this.flip) {\n      middleware.push(\n        flip({\n          boundary: this.flipBoundary,\n          // @ts-expect-error - We're converting a string attribute to an array here\n          fallbackPlacements: this.flipFallbackPlacements,\n          fallbackStrategy: this.flipFallbackStrategy === 'best-fit' ? 'bestFit' : 'initialPlacement',\n          padding: this.flipPadding\n        })\n      );\n    }\n\n    // Then we shift\n    if (this.shift) {\n      middleware.push(\n        shift({\n          boundary: this.shiftBoundary,\n          padding: this.shiftPadding\n        })\n      );\n    }\n\n    // Now we adjust the size as needed\n    if (this.autoSize) {\n      middleware.push(\n        size({\n          boundary: this.autoSizeBoundary,\n          padding: this.autoSizePadding,\n          apply: ({ availableWidth, availableHeight }) => {\n            if (this.autoSize === 'vertical' || this.autoSize === 'both') {\n              this.style.setProperty('--auto-size-available-height', `${availableHeight}px`);\n            } else {\n              this.style.removeProperty('--auto-size-available-height');\n            }\n\n            if (this.autoSize === 'horizontal' || this.autoSize === 'both') {\n              this.style.setProperty('--auto-size-available-width', `${availableWidth}px`);\n            } else {\n              this.style.removeProperty('--auto-size-available-width');\n            }\n          }\n        })\n      );\n    } else {\n      // Cleanup styles if we're no longer using auto-size\n      this.style.removeProperty('--auto-size-available-width');\n      this.style.removeProperty('--auto-size-available-height');\n    }\n\n    // Finally, we add an arrow\n    if (this.arrow) {\n      middleware.push(\n        arrow({\n          element: this.arrowEl,\n          padding: this.arrowPadding\n        })\n      );\n    }\n\n    //\n    // Use custom positioning logic if the strategy is absolute. Otherwise, fall back to the default logic.\n    //\n    // More info: https://github.com/shoelace-style/shoelace/issues/1135\n    //\n    const getOffsetParent =\n      SUPPORTS_POPOVER\n        ? (element: Element) => platform.getOffsetParent(element, offsetParent)\n        : platform.getOffsetParent;\n\n    computePosition(this.anchorEl, this.popup, {\n      placement: this.placement,\n      middleware,\n      strategy: SUPPORTS_POPOVER ? 'absolute' : 'fixed',\n      platform: {\n        ...platform,\n        getOffsetParent\n      }\n    }).then(({ x, y, middlewareData, placement }) => {\n      //\n      // Even though we have our own localization utility, it uses different heuristics to determine RTL. Because of\n      // that, we'll use the same approach that Floating UI uses.\n      //\n      // Source: https://github.com/floating-ui/floating-ui/blob/cb3b6ab07f95275730d3e6e46c702f8d4908b55c/packages/dom/src/utils/getDocumentRect.ts#L31\n      //\n      const isRtl = this.localize.dir() === 'rtl';\n      const staticSide = { top: 'bottom', right: 'left', bottom: 'top', left: 'right' }[placement.split('-')[0]]!;\n\n      this.setAttribute('data-current-placement', placement);\n\n      Object.assign(this.popup.style, {\n        left: `${x}px`,\n        top: `${y}px`\n      });\n\n      if (this.arrow) {\n        const arrowX = middlewareData.arrow!.x;\n        const arrowY = middlewareData.arrow!.y;\n        let top = '';\n        let right = '';\n        let bottom = '';\n        let left = '';\n\n        if (this.arrowPlacement === 'start') {\n          // Start\n          const value = typeof arrowX === 'number' ? `calc(${this.arrowPadding}px - var(--arrow-padding-offset))` : '';\n          top = typeof arrowY === 'number' ? `calc(${this.arrowPadding}px - var(--arrow-padding-offset))` : '';\n          right = isRtl ? value : '';\n          left = isRtl ? '' : value;\n        } else if (this.arrowPlacement === 'end') {\n          // End\n          const value = typeof arrowX === 'number' ? `calc(${this.arrowPadding}px - var(--arrow-padding-offset))` : '';\n          right = isRtl ? '' : value;\n          left = isRtl ? value : '';\n          bottom = typeof arrowY === 'number' ? `calc(${this.arrowPadding}px - var(--arrow-padding-offset))` : '';\n        } else if (this.arrowPlacement === 'center') {\n          // Center\n          left = typeof arrowX === 'number' ? `calc(50% - var(--arrow-size-diagonal))` : '';\n          top = typeof arrowY === 'number' ? `calc(50% - var(--arrow-size-diagonal))` : '';\n        } else {\n          // Anchor (default)\n          left = typeof arrowX === 'number' ? `${arrowX}px` : '';\n          top = typeof arrowY === 'number' ? `${arrowY}px` : '';\n        }\n\n        Object.assign(this.arrowEl.style, {\n          top,\n          right,\n          bottom,\n          left,\n          [staticSide]: 'calc(var(--arrow-size-diagonal) * -1)'\n        });\n      }\n    });\n\n    // Wait until the new position is drawn before updating the hover bridge, otherwise it can get out of sync\n    requestAnimationFrame(() => this.updateHoverBridge());\n\n    this.emit('syn-reposition');\n  }\n\n  private updateHoverBridge = () => {\n    if (this.hoverBridge && this.anchorEl) {\n      const anchorRect = this.anchorEl.getBoundingClientRect();\n      const popupRect = this.popup.getBoundingClientRect();\n      const isVertical = this.placement.includes('top') || this.placement.includes('bottom');\n      let topLeftX = 0;\n      let topLeftY = 0;\n      let topRightX = 0;\n      let topRightY = 0;\n      let bottomLeftX = 0;\n      let bottomLeftY = 0;\n      let bottomRightX = 0;\n      let bottomRightY = 0;\n\n      if (isVertical) {\n        if (anchorRect.top < popupRect.top) {\n          // Anchor is above\n          topLeftX = anchorRect.left;\n          topLeftY = anchorRect.bottom;\n          topRightX = anchorRect.right;\n          topRightY = anchorRect.bottom;\n\n          bottomLeftX = popupRect.left;\n          bottomLeftY = popupRect.top;\n          bottomRightX = popupRect.right;\n          bottomRightY = popupRect.top;\n        } else {\n          // Anchor is below\n          topLeftX = popupRect.left;\n          topLeftY = popupRect.bottom;\n          topRightX = popupRect.right;\n          topRightY = popupRect.bottom;\n\n          bottomLeftX = anchorRect.left;\n          bottomLeftY = anchorRect.top;\n          bottomRightX = anchorRect.right;\n          bottomRightY = anchorRect.top;\n        }\n      } else {\n        if (anchorRect.left < popupRect.left) {\n          // Anchor is on the left\n          topLeftX = anchorRect.right;\n          topLeftY = anchorRect.top;\n          topRightX = popupRect.left;\n          topRightY = popupRect.top;\n\n          bottomLeftX = anchorRect.right;\n          bottomLeftY = anchorRect.bottom;\n          bottomRightX = popupRect.left;\n          bottomRightY = popupRect.bottom;\n        } else {\n          // Anchor is on the right\n          topLeftX = popupRect.right;\n          topLeftY = popupRect.top;\n          topRightX = anchorRect.left;\n          topRightY = anchorRect.top;\n\n          bottomLeftX = popupRect.right;\n          bottomLeftY = popupRect.bottom;\n          bottomRightX = anchorRect.left;\n          bottomRightY = anchorRect.bottom;\n        }\n      }\n\n      this.style.setProperty('--hover-bridge-top-left-x', `${topLeftX}px`);\n      this.style.setProperty('--hover-bridge-top-left-y', `${topLeftY}px`);\n      this.style.setProperty('--hover-bridge-top-right-x', `${topRightX}px`);\n      this.style.setProperty('--hover-bridge-top-right-y', `${topRightY}px`);\n      this.style.setProperty('--hover-bridge-bottom-left-x', `${bottomLeftX}px`);\n      this.style.setProperty('--hover-bridge-bottom-left-y', `${bottomLeftY}px`);\n      this.style.setProperty('--hover-bridge-bottom-right-x', `${bottomRightX}px`);\n      this.style.setProperty('--hover-bridge-bottom-right-y', `${bottomRightY}px`);\n    }\n  };\n\n  render() {\n    return html`\n      <slot name=\"anchor\" @slotchange=${this.handleAnchorChange}></slot>\n\n      <span\n        part=\"hover-bridge\"\n        class=${classMap({\n          'popup-hover-bridge': true,\n          'popup-hover-bridge--visible': this.hoverBridge && this.active\n        })}\n      ></span>\n\n      <div\n        part=\"popup\"\n        popover=${ifDefined(SUPPORTS_POPOVER ? 'manual' : undefined)}\n        class=${classMap({\n          popup: true,\n          'popup--active': this.active,\n          'popup--fixed': !SUPPORTS_POPOVER,\n          'popup--has-arrow': this.arrow\n        })}\n      >\n        <slot></slot>\n        ${this.arrow ? html`<div part=\"arrow\" class=\"popup__arrow\" role=\"presentation\"></div>` : ''}\n      </div>\n    `;\n  }\n}\n"],
+  "mappings": "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",
+  "names": ["_a"]
+}

package/dist/chunks/{chunk.P3JEES5B.js → chunk.GOAMFSM4.js}

@@ -1,41 +1,41 @@
 import {
   SynTooltip
-} from "./chunk.LJGUOWPM.js";
-import {
-  range_styles_default
-} from "./chunk.IM54DI3K.js";
+} from "./chunk.KIVJSZWU.js";
 import {
   arraysDiffer,
   getNormalizedValueFromClientX,
   numericSort
 } from "./chunk.236RSW67.js";
+import {
+  range_styles_default
+} from "./chunk.IM54DI3K.js";
 import {
   defaultValue
-} from "./chunk.3NXKLKWH.js";
+} from "./chunk.3JDUKQRN.js";
 import {
   form_control_custom_styles_default,
   form_control_styles_default
-} from "./chunk.G4URZQCL.js";
+} from "./chunk.PTRCO527.js";
 import {
   FormControlController,
   customErrorValidityState,
   validValidityState
-} from "./chunk.U5757NSE.js";
+} from "./chunk.J3GDDM6Q.js";
 import {
   HasSlotController
-} from "./chunk.WVVQK5TE.js";
+} from "./chunk.CHFWLQN5.js";
 import {
   LocalizeController
-} from "./chunk.OAQRCZOO.js";
+} from "./chunk.QLETXF4A.js";
 import {
   enableDefaultSettings
-} from "./chunk.KSWDM4HW.js";
+} from "./chunk.YACUYJZN.js";
 import {
   component_styles_default
-} from "./chunk.NLYVOJGK.js";
+} from "./chunk.FXJLG622.js";
 import {
   SynergyElement
-} from "./chunk.JG7YXWHG.js";
+} from "./chunk.ECNXEYTN.js";
 import {
   __decorateClass,
   __privateAdd,
@@ -715,4 +715,4 @@ SynRange = __decorateClass([
 export {
   SynRange
 };
-//# sourceMappingURL=chunk.P3JEES5B.js.map
+//# sourceMappingURL=chunk.GOAMFSM4.js.map

package/dist/chunks/{chunk.XTWO6ZZW.js → chunk.GPP4D4HH.js}

@@ -310,4 +310,4 @@ var select_styles_default = css`
 export {
   select_styles_default
 };
-//# sourceMappingURL=chunk.XTWO6ZZW.js.map
+//# sourceMappingURL=chunk.GPP4D4HH.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/select/select.styles.ts"],
+  "sourcesContent": ["/* 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__prefix::slotted(*) {\n    margin-inline-start: 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__prefix::slotted(*) {\n    margin-inline-start: 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__prefix::slotted(*) {\n    margin-inline-start: 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 and Suffix */\n  .select__prefix,\n  .select__suffix {\n    flex: 0;\n    display: inline-flex;\n    align-items: center;\n    color: var(--syn-input-placeholder-color);\n  }\n\n  .select__suffix::slotted(*) {\n    margin-inline-start: var(--syn-spacing-small);\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    display: block;\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-2x-small);\n    padding-inline: var(--syn-spacing-x-large);\n  }\n`;\n"],
+  "mappings": ";AACA,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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}

package/dist/chunks/{chunk.R5WFWL7W.js → chunk.H5WUQAD7.js}

@@ -1,6 +1,6 @@
 import {
   SynTag
-} from "./chunk.RBOU3KVS.js";
+} from "./chunk.5QYKBLQ4.js";
 
 // src/components/tag/tag.ts
 var tag_default = SynTag;
@@ -9,4 +9,4 @@ SynTag.define("syn-tag");
 export {
   tag_default
 };
-//# sourceMappingURL=chunk.R5WFWL7W.js.map
+//# sourceMappingURL=chunk.H5WUQAD7.js.map

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

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

package/dist/chunks/{chunk.OBERL73O.js → chunk.H647D2ZB.js}

@@ -3,16 +3,16 @@ import {
 } from "./chunk.GZHQAHOL.js";
 import {
   menu_label_styles_default
-} from "./chunk.RAOPZXJL.js";
+} from "./chunk.JILCM7FD.js";
 import {
   SynDivider
-} from "./chunk.F4TDCDGD.js";
+} from "./chunk.FBYEVEZ6.js";
 import {
   component_styles_default
-} from "./chunk.NLYVOJGK.js";
+} from "./chunk.FXJLG622.js";
 import {
   SynergyElement
-} from "./chunk.JG7YXWHG.js";
+} from "./chunk.ECNXEYTN.js";
 
 // src/components/menu-label/menu-label.component.ts
 import { html } from "lit";
@@ -34,4 +34,4 @@ SynMenuLabel.dependencies = {
 export {
   SynMenuLabel
 };
-//# sourceMappingURL=chunk.OBERL73O.js.map
+//# sourceMappingURL=chunk.H647D2ZB.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/menu-label/menu-label.component.ts"],
+  "sourcesContent": ["/* eslint-disable */\nimport { html } from 'lit';\nimport SynDivider from '../divider/divider.component.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport styles from './menu-label.styles.js';\nimport customStyles from './menu-label.custom.styles.js';\nimport type { CSSResultGroup } from 'lit';\n\n/**\n * @summary Menu labels are used to describe a group of menu items.\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-menu-label--docs\n * @status stable\n * @since 2.0\n *\n * @slot - The menu label's content.\n *\n * @csspart base - The component's base wrapper.\n * @csspart divider - The divider that is displayed above the content\n * @csspart label - The label that is displayed below the divider\n *\n * @dependency syn-divider\n *\n * @cssproperty --display-divider - Display property of the divider. Defaults to \"block\"\n */\nexport default class SynMenuLabel extends SynergyElement {\n  static styles: CSSResultGroup = [componentStyles, styles, customStyles];\n\n  static dependencies = {\n    'syn-divider': SynDivider,\n  };\n    \n  render() {\n    return html`\n      <div part=\"base\" class=\"menu-label-wrapper\">\n        <syn-divider class=\"menu-label__divider\" part=\"divider\"></syn-divider>\n        <slot part=\"label\" class=\"menu-label\"></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'syn-menu-label': SynMenuLabel;\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;AACA,SAAS,YAAY;AAwBrB,IAAqB,eAArB,cAA0C,eAAe;AAAA,EAOvD,SAAS;AACP,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMT;AACF;AAfqB,aACZ,SAAyB,CAAC,0BAAiB,2BAAQ,gCAAY;AADnD,aAGZ,eAAe;AAAA,EACpB,eAAe;AACjB;",
+  "names": []
+}

package/dist/chunks/{chunk.UT3DWYFM.js → chunk.H6EHQYZA.js}

@@ -1,6 +1,6 @@
 import {
   formCollections
-} from "./chunk.U5757NSE.js";
+} from "./chunk.J3GDDM6Q.js";
 
 // src/utilities/form.ts
 function serialize(form) {
@@ -37,4 +37,4 @@ export {
   serialize,
   getFormControls
 };
-//# sourceMappingURL=chunk.UT3DWYFM.js.map
+//# sourceMappingURL=chunk.H6EHQYZA.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/utilities/form.ts"],
+  "sourcesContent": ["/* eslint-disable */\nimport { formCollections } from '../internal/form.js';\n\n/**\n * Serializes a form and returns a plain object. If a form control with the same name appears more than once, the\n * property will be converted to an array.\n */\nexport function serialize(form: HTMLFormElement) {\n  const formData = new FormData(form);\n  const object: Record<string, unknown> = {};\n\n  formData.forEach((value, key) => {\n    if (Reflect.has(object, key)) {\n      const entry = object[key];\n      if (Array.isArray(entry)) {\n        entry.push(value);\n      } else {\n        object[key] = [object[key], value];\n      }\n    } else {\n      object[key] = value;\n    }\n  });\n\n  return object;\n}\n\n/**\n * Returns all form controls that are associated with the specified form. Includes both native and Synergy form\n * controls. Use this function in lieu of the `HTMLFormElement.elements` property, which doesn't recognize Synergy\n * form controls.\n */\nexport function getFormControls(form: HTMLFormElement) {\n  const rootNode = form.getRootNode() as Document | ShadowRoot;\n  const allNodes = [...rootNode.querySelectorAll('*')];\n  const formControls = [...form.elements];\n  const collection = formCollections.get(form);\n  const synergyFormControls = collection ? Array.from(collection) : [];\n\n  // To return form controls in the right order, we sort by DOM index\n  return [...formControls, ...synergyFormControls].sort((a: Element, b: Element) => {\n    if (allNodes.indexOf(a) < allNodes.indexOf(b)) return -1;\n    if (allNodes.indexOf(a) > allNodes.indexOf(b)) return 1;\n    return 0;\n  });\n}\n"],
+  "mappings": ";;;;;AAOO,SAAS,UAAU,MAAuB;AAC/C,QAAM,WAAW,IAAI,SAAS,IAAI;AAClC,QAAM,SAAkC,CAAC;AAEzC,WAAS,QAAQ,CAAC,OAAO,QAAQ;AAC/B,QAAI,QAAQ,IAAI,QAAQ,GAAG,GAAG;AAC5B,YAAM,QAAQ,OAAO,GAAG;AACxB,UAAI,MAAM,QAAQ,KAAK,GAAG;AACxB,cAAM,KAAK,KAAK;AAAA,MAClB,OAAO;AACL,eAAO,GAAG,IAAI,CAAC,OAAO,GAAG,GAAG,KAAK;AAAA,MACnC;AAAA,IACF,OAAO;AACL,aAAO,GAAG,IAAI;AAAA,IAChB;AAAA,EACF,CAAC;AAED,SAAO;AACT;AAOO,SAAS,gBAAgB,MAAuB;AACrD,QAAM,WAAW,KAAK,YAAY;AAClC,QAAM,WAAW,CAAC,GAAG,SAAS,iBAAiB,GAAG,CAAC;AACnD,QAAM,eAAe,CAAC,GAAG,KAAK,QAAQ;AACtC,QAAM,aAAa,gBAAgB,IAAI,IAAI;AAC3C,QAAM,sBAAsB,aAAa,MAAM,KAAK,UAAU,IAAI,CAAC;AAGnE,SAAO,CAAC,GAAG,cAAc,GAAG,mBAAmB,EAAE,KAAK,CAAC,GAAY,MAAe;AAChF,QAAI,SAAS,QAAQ,CAAC,IAAI,SAAS,QAAQ,CAAC,EAAG,QAAO;AACtD,QAAI,SAAS,QAAQ,CAAC,IAAI,SAAS,QAAQ,CAAC,EAAG,QAAO;AACtD,WAAO;AAAA,EACT,CAAC;AACH;",
+  "names": []
+}

package/dist/chunks/{chunk.K5VB7VKA.js → chunk.I5ABAZLK.js}

@@ -1,21 +1,21 @@
-import {
-  icon_button_styles_default
-} from "./chunk.DZ7YIR5N.js";
 import {
   icon_button_custom_styles_default
 } from "./chunk.OQUVO5QW.js";
+import {
+  icon_button_styles_default
+} from "./chunk.DAIQ5WRI.js";
 import {
   SynIcon
-} from "./chunk.GJIDYO3Z.js";
+} from "./chunk.KHRQ5VI4.js";
 import {
   enableDefaultSettings
-} from "./chunk.KSWDM4HW.js";
+} from "./chunk.YACUYJZN.js";
 import {
   component_styles_default
-} from "./chunk.NLYVOJGK.js";
+} from "./chunk.FXJLG622.js";
 import {
   SynergyElement
-} from "./chunk.JG7YXWHG.js";
+} from "./chunk.ECNXEYTN.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -144,4 +144,4 @@ SynIconButton = __decorateClass([
 export {
   SynIconButton
 };
-//# sourceMappingURL=chunk.K5VB7VKA.js.map
+//# sourceMappingURL=chunk.I5ABAZLK.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/icon-button/icon-button.component.ts"],
+  "sourcesContent": ["/* 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';\nimport { enableDefaultSettings } from '../../utilities/defaultSettings/decorator.js';\n\n/**\n * @summary Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-icon-button--docs\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 */\n@enableDefaultSettings('SynIconButton')\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        })}\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.UBGDTOZZ.js → chunk.IJIRSZXP.js}

@@ -1,6 +1,6 @@
 import {
   SynProgressRing
-} from "./chunk.7SIMUMVH.js";
+} from "./chunk.XGBJ2PGD.js";
 
 // src/components/progress-ring/progress-ring.ts
 var progress_ring_default = SynProgressRing;
@@ -9,4 +9,4 @@ SynProgressRing.define("syn-progress-ring");
 export {
   progress_ring_default
 };
-//# sourceMappingURL=chunk.UBGDTOZZ.js.map
+//# sourceMappingURL=chunk.IJIRSZXP.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/progress-ring/progress-ring.ts"],
+  "sourcesContent": ["/* eslint-disable */\nimport SynProgressRing from './progress-ring.component.js';\n\nexport * from './progress-ring.component.js';\nexport default SynProgressRing;\n\nSynProgressRing.define('syn-progress-ring');\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'syn-progress-ring': SynProgressRing;\n  }\n}\n"],
+  "mappings": ";;;;;AAIA,IAAO,wBAAQ;AAEf,gBAAgB,OAAO,mBAAmB;",
+  "names": []
+}

package/dist/chunks/{chunk.36BZPB3H.js → chunk.IQ45XDXM.js}

@@ -1,6 +1,6 @@
 import {
   SynIconButton
-} from "./chunk.K5VB7VKA.js";
+} from "./chunk.I5ABAZLK.js";
 
 // src/components/icon-button/icon-button.ts
 var icon_button_default = SynIconButton;
@@ -9,4 +9,4 @@ SynIconButton.define("syn-icon-button");
 export {
   icon_button_default
 };
-//# sourceMappingURL=chunk.36BZPB3H.js.map
+//# sourceMappingURL=chunk.IQ45XDXM.js.map

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

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

package/dist/chunks/{chunk.U5757NSE.js → chunk.J3GDDM6Q.js}

@@ -313,4 +313,4 @@ export {
   valueMissingValidityState,
   customErrorValidityState
 };
-//# sourceMappingURL=chunk.U5757NSE.js.map
+//# sourceMappingURL=chunk.J3GDDM6Q.js.map