@synergy-design-system/components 2.14.3 → 2.15.0

package/dist/chunks/{chunk.4ZCQXFO7.js → chunk.IKDEVPJF.js}

@@ -1,6 +1,6 @@
 import {
   SynAlert
-} from "./chunk.2VEV27HT.js";
+} from "./chunk.LPORVGSO.js";
 
 // src/components/alert/alert.ts
 var alert_default = SynAlert;
@@ -9,4 +9,4 @@ SynAlert.define("syn-alert");
 export {
   alert_default
 };
-//# sourceMappingURL=chunk.4ZCQXFO7.js.map
+//# sourceMappingURL=chunk.IKDEVPJF.js.map

package/dist/chunks/{chunk.FN76TNJJ.js → chunk.ISCD5N4F.js}

@@ -1,6 +1,6 @@
 import {
   SynProgressBar
-} from "./chunk.3N54OV6X.js";
+} from "./chunk.GXSCFO5N.js";
 
 // src/components/progress-bar/progress-bar.ts
 var progress_bar_default = SynProgressBar;
@@ -9,4 +9,4 @@ SynProgressBar.define("syn-progress-bar");
 export {
   progress_bar_default
 };
-//# sourceMappingURL=chunk.FN76TNJJ.js.map
+//# sourceMappingURL=chunk.ISCD5N4F.js.map

package/dist/chunks/{chunk.SNVEQ432.js → chunk.ITL4NLDD.js}

@@ -1,6 +1,6 @@
 import {
   SynInput
-} from "./chunk.DQC3S32H.js";
+} from "./chunk.3J24QHSD.js";
 
 // src/components/input/input.ts
 var input_default = SynInput;
@@ -9,4 +9,4 @@ SynInput.define("syn-input");
 export {
   input_default
 };
-//# sourceMappingURL=chunk.SNVEQ432.js.map
+//# sourceMappingURL=chunk.ITL4NLDD.js.map

package/dist/chunks/{chunk.PDN2VYR2.js → chunk.IYQWKF57.js}

@@ -1,6 +1,6 @@
 import {
   SynPopup
-} from "./chunk.6EVVIDQZ.js";
+} from "./chunk.MN7WOOJV.js";
 
 // src/components/popup/popup.ts
 var popup_default = SynPopup;
@@ -9,4 +9,4 @@ SynPopup.define("syn-popup");
 export {
   popup_default
 };
-//# sourceMappingURL=chunk.PDN2VYR2.js.map
+//# sourceMappingURL=chunk.IYQWKF57.js.map

package/dist/chunks/{chunk.WQJRBFZA.js → chunk.J6CGTLVH.js}

@@ -4,7 +4,7 @@ var badge_custom_styles_default = css`
   .badge {
     border: none;
     border-radius: var(--syn-border-radius-pill);
-    font: var(--syn-body-x-small-bold);
+    font: var(--syn-body-medium-bold);
     height: var(--syn-spacing-large);
     line-height: var(--syn-spacing-large);
     min-width: var(--syn-spacing-large);
@@ -63,4 +63,4 @@ var badge_custom_styles_default = css`
 export {
   badge_custom_styles_default
 };
-//# sourceMappingURL=chunk.WQJRBFZA.js.map
+//# sourceMappingURL=chunk.J6CGTLVH.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/badge/badge.custom.styles.ts"],
+  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  .badge {\n    border: none;\n    border-radius: var(--syn-border-radius-pill);\n    font: var(--syn-body-medium-bold);\n    height: var(--syn-spacing-large);\n    line-height: var(--syn-spacing-large);\n    min-width: var(--syn-spacing-large);\n    padding: 0 var(--syn-spacing-x-small);\n  }\n\n  /* Variant modifiers */\n  .badge--primary {\n    background-color: var(--syn-color-primary-600);\n    color: var(--syn-typography-color-text-inverted);\n  }\n\n  .badge--success {\n    background-color: var(--syn-color-success-500);\n    color: var(--syn-typography-color-text);\n  }\n\n  .badge--neutral {\n    background-color: var(--syn-color-neutral-800);\n    color: var(--syn-typography-color-text-inverted);\n  }\n\n  .badge--warning {\n    background-color: var(--syn-color-warning-400);\n    color: var(--syn-typography-color-text);\n  }\n\n  .badge--danger {\n    background-color: var(--syn-color-error-600);\n    color: var(--syn-typography-color-text-inverted);\n  }\n\n  /**\n   * Special treatment: If the badge is empty, show it as a dot only\n   */\n  :host(:empty) .badge {\n    height: var(--syn-spacing-x-small);\n    min-width: initial;\n    padding: 0;\n    width: var(--syn-spacing-x-small);\n  }\n\n  .visually-hidden {\n    border: 0;\n    clip: rect(0, 0, 0, 0);\n    height: 1px;\n    margin: -1px;\n    overflow: hidden;\n    padding: 0;\n    position: absolute;\n    white-space: nowrap;\n    width: 1px;\n  }\n`;\n"],
+  "mappings": ";AAAA,SAAS,WAAW;AAEpB,IAAO,8BAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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.2DL4ZSBS.js → chunk.J6XD6SQY.js}

@@ -1,6 +1,6 @@
 import {
   SynHeader
-} from "./chunk.SCT7M3OI.js";
+} from "./chunk.47RPCQDD.js";
 
 // src/components/header/header.ts
 var header_default = SynHeader;
@@ -9,4 +9,4 @@ SynHeader.define("syn-header");
 export {
   header_default
 };
-//# sourceMappingURL=chunk.2DL4ZSBS.js.map
+//# sourceMappingURL=chunk.J6XD6SQY.js.map

package/dist/chunks/{chunk.I5N5WFJU.js → chunk.JGRS7OGL.js}

@@ -9,7 +9,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.EBE3CGKL.js";
+} from "./chunk.7ULPDKAV.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -105,4 +105,4 @@ __decorateClass([
 export {
   SynAccordion
 };
-//# sourceMappingURL=chunk.I5N5WFJU.js.map
+//# sourceMappingURL=chunk.JGRS7OGL.js.map

package/dist/chunks/{chunk.FWM3I5X4.js → chunk.JJ7D73E7.js}

@@ -1,6 +1,6 @@
 import {
   SynOption
-} from "./chunk.2XKMEGGX.js";
+} from "./chunk.E7YT4DFP.js";
 
 // src/components/option/option.ts
 var option_default = SynOption;
@@ -9,4 +9,4 @@ SynOption.define("syn-option");
 export {
   option_default
 };
-//# sourceMappingURL=chunk.FWM3I5X4.js.map
+//# sourceMappingURL=chunk.JJ7D73E7.js.map

package/dist/chunks/{chunk.M5NJMQBQ.js → chunk.JKNY5XWP.js}

@@ -1,9 +1,9 @@
 import {
   optgroup_styles_default
-} from "./chunk.KG52EHDB.js";
+} from "./chunk.IFW77IB7.js";
 import {
   SynDivider
-} from "./chunk.QZRLHN6I.js";
+} from "./chunk.5JF5AJ3G.js";
 import {
   HasSlotController
 } from "./chunk.WVVQK5TE.js";
@@ -12,7 +12,7 @@ import {
 } from "./chunk.74IOULXM.js";
 import {
   SynergyElement
-} from "./chunk.EBE3CGKL.js";
+} from "./chunk.7ULPDKAV.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -93,4 +93,4 @@ __decorateClass([
 export {
   SynOptgroup
 };
-//# sourceMappingURL=chunk.M5NJMQBQ.js.map
+//# sourceMappingURL=chunk.JKNY5XWP.js.map

package/dist/chunks/{chunk.STSKJPGL.js → chunk.JYKBB4MA.js}

@@ -1,6 +1,6 @@
 import {
   SynOptgroup
-} from "./chunk.M5NJMQBQ.js";
+} from "./chunk.JKNY5XWP.js";
 
 // src/components/optgroup/optgroup.ts
 var optgroup_default = SynOptgroup;
@@ -9,4 +9,4 @@ SynOptgroup.define("syn-optgroup");
 export {
   optgroup_default
 };
-//# sourceMappingURL=chunk.STSKJPGL.js.map
+//# sourceMappingURL=chunk.JYKBB4MA.js.map

package/dist/chunks/{chunk.LR3QOC2S.js → chunk.K2QY3FGE.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.O644HRW3.js";
 import {
   SynPopup
-} from "./chunk.6EVVIDQZ.js";
+} from "./chunk.MN7WOOJV.js";
 import {
   waitForEvent
 } from "./chunk.C2ENQBPM.js";
@@ -30,7 +30,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.EBE3CGKL.js";
+} from "./chunk.7ULPDKAV.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -275,4 +275,4 @@ setDefaultAnimation("tooltip.hide", {
 export {
   SynTooltip
 };
-//# sourceMappingURL=chunk.LR3QOC2S.js.map
+//# sourceMappingURL=chunk.K2QY3FGE.js.map

package/dist/chunks/{chunk.UVT3K4BL.js → chunk.K5WTIEZV.js}

@@ -10,7 +10,7 @@ import {
 } from "./chunk.FKKJBKYL.js";
 import {
   SynButton
-} from "./chunk.R22XUKGQ.js";
+} from "./chunk.TD3P6CWD.js";
 import {
   FormControlController
 } from "./chunk.AMIQC3O7.js";
@@ -26,7 +26,7 @@ import {
 } from "./chunk.WVVQK5TE.js";
 import {
   SynIcon
-} from "./chunk.UAK6WG4U.js";
+} from "./chunk.BWDC4HUA.js";
 import {
   LocalizeController
 } from "./chunk.GIU3H3J3.js";
@@ -38,7 +38,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.EBE3CGKL.js";
+} from "./chunk.7ULPDKAV.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -528,4 +528,4 @@ setDefaultAnimation("file.text.appear", {
 export {
   SynFile
 };
-//# sourceMappingURL=chunk.UVT3K4BL.js.map
+//# sourceMappingURL=chunk.K5WTIEZV.js.map

package/dist/chunks/{chunk.3V3Z552X.js → chunk.KF27CNFO.js}

@@ -1,6 +1,6 @@
 import {
   menu_custom_styles_default
-} from "./chunk.PILX7LVU.js";
+} from "./chunk.AVZITCPQ.js";
 import {
   menu_styles_default
 } from "./chunk.C2CWYCOU.js";
@@ -9,7 +9,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.EBE3CGKL.js";
+} from "./chunk.7ULPDKAV.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -17,10 +17,27 @@ import {
 // src/components/menu/menu.component.ts
 import { html } from "lit";
 import { query } from "lit/decorators.js";
+import { state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
 var SynMenu = class extends SynergyElement {
+  constructor() {
+    super(...arguments);
+    this.hasMenuItemsWithCheckmarks = false;
+    this.updateCheckMarksByChildPropChange = (e) => {
+      e.stopImmediatePropagation();
+      this.handleUpdateCheckmarks(this.getAllItems());
+    };
+  }
+  handleUpdateCheckmarks(items) {
+    this.hasMenuItemsWithCheckmarks = items.some((item) => item.type === "checkbox" || item.loading);
+  }
+  disconnectedCallback() {
+    this.removeEventListener("syn-attributes-changed", this.updateCheckMarksByChildPropChange);
+  }
   connectedCallback() {
     super.connectedCallback();
     this.setAttribute("role", "menu");
+    this.addEventListener("syn-attributes-changed", this.updateCheckMarksByChildPropChange);
   }
   handleClick(event) {
     const menuItemTypes = ["menuitem", "menuitemcheckbox"];
@@ -83,6 +100,7 @@ var SynMenu = class extends SynergyElement {
   }
   handleSlotChange() {
     const items = this.getAllItems();
+    this.handleUpdateCheckmarks(items);
     if (items.length > 0) {
       this.setCurrentItem(items[0]);
     }
@@ -120,6 +138,9 @@ var SynMenu = class extends SynergyElement {
   render() {
     return html`
       <slot
+        class=${classMap({
+      "menu--no-checkmarks": !this.hasMenuItemsWithCheckmarks
+    })}
         @slotchange=${this.handleSlotChange}
         @click=${this.handleClick}
         @keydown=${this.handleKeyDown}
@@ -132,8 +153,11 @@ SynMenu.styles = [component_styles_default, menu_styles_default, menu_custom_sty
 __decorateClass([
   query("slot")
 ], SynMenu.prototype, "defaultSlot", 2);
+__decorateClass([
+  state()
+], SynMenu.prototype, "hasMenuItemsWithCheckmarks", 2);
 
 export {
   SynMenu
 };
-//# sourceMappingURL=chunk.3V3Z552X.js.map
+//# sourceMappingURL=chunk.KF27CNFO.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/menu/menu.component.ts"],
+  "sourcesContent": ["/**\n * ---------------------------------------------------------------------\n * \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n * Removing this comment will prevent it from being managed by it.\n * ---------------------------------------------------------------------\n */\n\n/* eslint-disable */\nimport { html } from 'lit';\nimport { query } from 'lit/decorators.js';\nimport { state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport type { SynAttributesChangedEvent } from '../../events/syn-attributes-changed.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport styles from './menu.styles.js';\nimport customStyles from './menu.custom.styles.js';\nimport type { CSSResultGroup } from 'lit';\nimport type SynMenuItem from '../menu-item/menu-item.component.js';\n\nexport interface MenuSelectEventDetail {\n  item: SynMenuItem;\n}\n\n/**\n * @summary Menus provide a list of options for the user to choose from.\n * @documentation https://synergy.style/components/menu\n * @status stable\n * @since 2.0\n *\n * @slot - The menu's content, including menu items, menu labels, and dividers.\n *\n * @event {{ item: SynMenuItem }} syn-select - Emitted when a menu item is selected.\n */\nexport default class SynMenu extends SynergyElement {\n  static styles: CSSResultGroup = [componentStyles, styles, customStyles];\n\n  @query('slot') defaultSlot: HTMLSlotElement;\n  @state() hasMenuItemsWithCheckmarks = false;\n\n  private handleUpdateCheckmarks(items: SynMenuItem[]) {\n    // #368: Treat a menu as having checkmarks if it has any checkboxes or items with loading states\n    // The loading indicator has to be checked as well, as it's specially placed over the check mark\n    this.hasMenuItemsWithCheckmarks = items.some(item => item.type === 'checkbox' || item.loading);  \n  }\n\n  private updateCheckMarksByChildPropChange = (e: SynAttributesChangedEvent) => {\n    e.stopImmediatePropagation();\n    this.handleUpdateCheckmarks(this.getAllItems());\n  };\n  \n  disconnectedCallback() {\n    this.removeEventListener('syn-attributes-changed', this.updateCheckMarksByChildPropChange);\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'menu');\n    this.addEventListener('syn-attributes-changed', this.updateCheckMarksByChildPropChange);\n  }\n\n  private handleClick(event: MouseEvent) {\n    const menuItemTypes = ['menuitem', 'menuitemcheckbox'];\n\n    const composedPath = event.composedPath();\n    const target = composedPath.find((el: Element) => menuItemTypes.includes(el?.getAttribute?.('role') || ''));\n\n    if (!target) return;\n\n    const closestMenu = composedPath.find((el: Element) => el?.getAttribute?.('role') === 'menu');\n    const clickHasSubmenu = closestMenu !== this;\n\n    // Make sure we're the menu thats supposed to be handling the click event.\n    if (clickHasSubmenu) return;\n\n    // This isn't true. But we use it for TypeScript checks below.\n    const item = target as SynMenuItem;\n\n    if (item.type === 'checkbox') {\n      item.checked = !item.checked;\n    }\n\n    this.emit('syn-select', { detail: { item } });\n  }\n\n  private handleKeyDown(event: KeyboardEvent) {\n    // Make a selection when pressing enter or space\n    if (event.key === 'Enter' || event.key === ' ') {\n      const item = this.getCurrentItem();\n      event.preventDefault();\n      event.stopPropagation();\n\n      // Simulate a click to support @click handlers on menu items that also work with the keyboard\n      item?.click();\n    }\n\n    // Move the selection when pressing down or up\n    else if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {\n      const items = this.getAllItems();\n      const activeItem = this.getCurrentItem();\n      let index = activeItem ? items.indexOf(activeItem) : 0;\n\n      if (items.length > 0) {\n        event.preventDefault();\n        event.stopPropagation();\n\n        if (event.key === 'ArrowDown') {\n          index++;\n        } else if (event.key === 'ArrowUp') {\n          index--;\n        } else if (event.key === 'Home') {\n          index = 0;\n        } else if (event.key === 'End') {\n          index = items.length - 1;\n        }\n\n        if (index < 0) {\n          index = items.length - 1;\n        }\n        if (index > items.length - 1) {\n          index = 0;\n        }\n\n        this.setCurrentItem(items[index]);\n        items[index].focus();\n      }\n    }\n  }\n\n  private handleMouseDown(event: MouseEvent) {\n    const target = event.target as HTMLElement;\n\n    if (this.isMenuItem(target)) {\n      this.setCurrentItem(target as SynMenuItem);\n    }\n  }\n\n  private handleSlotChange() {\n    const items = this.getAllItems();\n    this.handleUpdateCheckmarks(items);\n\n    // Reset the roving tab index when the slotted items change\n    if (items.length > 0) {\n      this.setCurrentItem(items[0]);\n    }\n  }\n\n  private isMenuItem(item: HTMLElement) {\n    return (\n      item.tagName.toLowerCase() === 'syn-menu-item' ||\n      ['menuitem', 'menuitemcheckbox', 'menuitemradio'].includes(item.getAttribute('role') ?? '')\n    );\n  }\n\n  /** @internal Gets all slotted menu items, ignoring dividers, headers, and other elements. */\n  getAllItems() {\n    return [...this.defaultSlot.assignedElements({ flatten: true })].filter((el: HTMLElement) => {\n      if (el.inert || !this.isMenuItem(el)) {\n        return false;\n      }\n      return true;\n    }) as SynMenuItem[];\n  }\n\n  /**\n   * @internal Gets the current menu item, which is the menu item that has `tabindex=\"0\"` within the roving tab index.\n   * The menu item may or may not have focus, but for keyboard interaction purposes it's considered the \"active\" item.\n   */\n  getCurrentItem() {\n    return this.getAllItems().find(i => i.getAttribute('tabindex') === '0');\n  }\n\n  /**\n   * @internal Sets the current menu item to the specified element. This sets `tabindex=\"0\"` on the target element and\n   * `tabindex=\"-1\"` to all other items. This method must be called prior to setting focus on a menu item.\n   */\n  setCurrentItem(item: SynMenuItem) {\n    const items = this.getAllItems();\n\n    // Update tab indexes\n    items.forEach(i => {\n      i.setAttribute('tabindex', i === item ? '0' : '-1');\n    });\n  }\n\n  render() {\n    return html`\n      <slot\n        class=${classMap({\n          'menu--no-checkmarks': !this.hasMenuItemsWithCheckmarks,\n        })}\n        @slotchange=${this.handleSlotChange}\n        @click=${this.handleClick}\n        @keydown=${this.handleKeyDown}\n        @mousedown=${this.handleMouseDown}\n      ></slot>\n    `;\n  }\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/chunks/{chunk.WQXCL54U.js → chunk.KFKVKTLT.js}

@@ -1,6 +1,6 @@
 import {
   SynRange
-} from "./chunk.ZVXLBYON.js";
+} from "./chunk.RWSNSLKJ.js";
 
 // src/components/range/range.ts
 var range_default = SynRange;
@@ -9,4 +9,4 @@ SynRange.define("syn-range");
 export {
   range_default
 };
-//# sourceMappingURL=chunk.WQXCL54U.js.map
+//# sourceMappingURL=chunk.KFKVKTLT.js.map

package/dist/chunks/{chunk.ZO4VONAT.js → chunk.KL5VXGK4.js}

@@ -35,10 +35,21 @@ var select_custom_styles_default = css`
   /* Expand icon */
   .select__expand-icon {
     color: var(--syn-color-neutral-950);
-    font-size: var(--syn-spacing-large);
     margin-inline-start: var(--syn-spacing-small);
   }
 
+  .select--small .select__expand-icon {
+    font-size: var(--syn-spacing-medium);
+  }
+
+  .select--medium .select__expand-icon {
+    font-size: var(--syn-spacing-large);
+  }
+
+  .select--large .select__expand-icon {
+    font-size: var(--syn-spacing-x-large);
+  }
+
   /* Change select border on hover */
   /* stylelint-disable-next-line no-descending-specificity */
   .select:not(.select--disabled):hover .select__combobox {
@@ -56,6 +67,12 @@ var select_custom_styles_default = css`
     margin-inline-start: var(--syn-spacing-x-small);
   }
 
+  .select--small .select__suffix::slotted(syn-icon),
+  .select--small .select__prefix::slotted(syn-icon) {
+    font-size: var(--syn-font-size-medium);
+  }
+
+  /* Medium */
   .select--medium .select__prefix::slotted(*) {
     margin-inline-end: var(--syn-input-spacing-small);
   }
@@ -64,6 +81,12 @@ var select_custom_styles_default = css`
     margin-inline-start: var(--syn-input-spacing-small);
   }
 
+  .select--medium .select__suffix::slotted(syn-icon),
+  .select--medium .select__prefix::slotted(syn-icon) {
+    font-size: var(--syn-font-size-x-large);
+  }
+
+  /* Large */
   .select--large .select__prefix::slotted(*) {
     margin-inline-end: var(--syn-input-spacing-medium);
   }
@@ -72,6 +95,12 @@ var select_custom_styles_default = css`
     margin-inline-start: var(--syn-input-spacing-medium);
   }
 
+  .select--large .select__suffix::slotted(syn-icon),
+  .select--large .select__prefix::slotted(syn-icon) {
+    font-size: var(--syn-font-size-2x-large);
+  }
+
+
   .select__prefix,
   .select__suffix {
     color: var(--syn-input-help-text-color);
@@ -114,4 +143,4 @@ var select_custom_styles_default = css`
 export {
   select_custom_styles_default
 };
-//# sourceMappingURL=chunk.ZO4VONAT.js.map
+//# sourceMappingURL=chunk.KL5VXGK4.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/select/select.custom.styles.ts"],
+  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  /**\n   * Invalid user data\n   */\n  :host([data-user-invalid]) .select__combobox {\n    border-color: var(--syn-input-border-color-focus-error);\n  }\n\n  :host([data-user-invalid]) .select--standard:not(.select--disabled).select--open .select__combobox,\n  :host([data-user-invalid]) .select--standard:not(.select--disabled).select--focused .select__combobox {\n    border-color: var(--syn-input-border-color-focus-error);\n    box-shadow: 0 0 0 var(--syn-focus-ring-width) var(--syn-input-focus-ring-error);\n  }\n\n  /* Clear button */\n  .select__clear {\n    color: var(--syn-input-icon-icon-clearable-color);\n    font-size: var(--syn-spacing-large);\n  }\n\n  .select--small .select__clear {\n    font-size: var(--syn-spacing-medium);\n  }\n\n  .select--large .select__clear {\n    font-size: var(--syn-spacing-x-large);\n  }\n\n  .select--medium .select__clear {\n    margin-inline-start: var(--syn-spacing-small);\n  }\n\n  /* Expand icon */\n  .select__expand-icon {\n    color: var(--syn-color-neutral-950);\n    margin-inline-start: var(--syn-spacing-small);\n  }\n\n  .select--small .select__expand-icon {\n    font-size: var(--syn-spacing-medium);\n  }\n\n  .select--medium .select__expand-icon {\n    font-size: var(--syn-spacing-large);\n  }\n\n  .select--large .select__expand-icon {\n    font-size: var(--syn-spacing-x-large);\n  }\n\n  /* Change select border on hover */\n  /* stylelint-disable-next-line no-descending-specificity */\n  .select:not(.select--disabled):hover .select__combobox {\n    border-color: var(--syn-input-color-hover);\n  }\n\n  /* Prefix and Suffix */\n\n  /* Small */\n  .select--small .select__prefix::slotted(*) {\n    margin-inline-end: var(--syn-spacing-x-small);\n  }\n\n  .select--small .select__suffix::slotted(*) {\n    margin-inline-start: var(--syn-spacing-x-small);\n  }\n\n  .select--small .select__suffix::slotted(syn-icon),\n  .select--small .select__prefix::slotted(syn-icon) {\n    font-size: var(--syn-font-size-medium);\n  }\n\n  /* Medium */\n  .select--medium .select__prefix::slotted(*) {\n    margin-inline-end: var(--syn-input-spacing-small);\n  }\n\n  .select--medium .select__suffix::slotted(*) {\n    margin-inline-start: var(--syn-input-spacing-small);\n  }\n\n  .select--medium .select__suffix::slotted(syn-icon),\n  .select--medium .select__prefix::slotted(syn-icon) {\n    font-size: var(--syn-font-size-x-large);\n  }\n\n  /* Large */\n  .select--large .select__prefix::slotted(*) {\n    margin-inline-end: var(--syn-input-spacing-medium);\n  }\n\n  .select--large .select__suffix::slotted(*) {\n    margin-inline-start: var(--syn-input-spacing-medium);\n  }\n\n  .select--large .select__suffix::slotted(syn-icon),\n  .select--large .select__prefix::slotted(syn-icon) {\n    font-size: var(--syn-font-size-2x-large);\n  }\n\n\n  .select__prefix,\n  .select__suffix {\n    color: var(--syn-input-help-text-color);\n  }\n\n  /* Multi Select */\n  .select__tags {\n    margin-inline-start: var(--syn-spacing-medium);\n  }\n\n  .select--small .select__tags {\n    gap: var(--syn-spacing-2x-small);\n  }\n\n  .select--medium .select__tags {\n    gap: var(--syn-spacing-x-small);\n  }\n\n  .select--large .select__tags {\n    gap: var(--syn-spacing-small);\n  }\n\n  /* Listbox */\n  .select__listbox {\n    /* @todo: Should be --syn-border-radius-medium, which should be set to 0 */\n    border-radius: var(--syn-border-radius-none);\n    box-shadow: var(--syn-shadow-medium);\n  }\n\n  /**\n   * Make sure to hide the syn-divider for the first syn-optgroup\n   * Note! ::slotted does currently not work with ::part, so we\n   * opted for using a css variable here.\n   */\n  .select__listbox ::slotted(syn-optgroup:first-of-type) {\n    --display-divider: none;\n  }\n`;\n"],
+  "mappings": ";AAAA,SAAS,WAAW;AAEpB,IAAO,+BAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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.5JWKXQDN.js → chunk.KR7WAWSQ.js}

@@ -1,15 +1,15 @@
 import {
   SynTag
-} from "./chunk.P5CBQNOP.js";
+} from "./chunk.3H62SEV3.js";
 import {
   select_custom_styles_default
-} from "./chunk.ZO4VONAT.js";
+} from "./chunk.KL5VXGK4.js";
 import {
   select_styles_default
 } from "./chunk.XTWO6ZZW.js";
 import {
   SynPopup
-} from "./chunk.6EVVIDQZ.js";
+} from "./chunk.MN7WOOJV.js";
 import {
   scrollIntoView
 } from "./chunk.5732DMBC.js";
@@ -36,7 +36,7 @@ import {
 } from "./chunk.WVVQK5TE.js";
 import {
   SynIcon
-} from "./chunk.UAK6WG4U.js";
+} from "./chunk.BWDC4HUA.js";
 import {
   LocalizeController
 } from "./chunk.GIU3H3J3.js";
@@ -48,7 +48,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.EBE3CGKL.js";
+} from "./chunk.7ULPDKAV.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -804,4 +804,4 @@ setDefaultAnimation("select.hide", {
 export {
   SynSelect
 };
-//# sourceMappingURL=chunk.5JWKXQDN.js.map
+//# sourceMappingURL=chunk.KR7WAWSQ.js.map

package/dist/chunks/{chunk.A7DYRCSL.js → chunk.L7ZX5SBO.js}

@@ -1,6 +1,6 @@
 import {
   SynTag
-} from "./chunk.P5CBQNOP.js";
+} from "./chunk.3H62SEV3.js";
 
 // src/components/tag/tag.ts
 var tag_default = SynTag;
@@ -9,4 +9,4 @@ SynTag.define("syn-tag");
 export {
   tag_default
 };
-//# sourceMappingURL=chunk.A7DYRCSL.js.map
+//# sourceMappingURL=chunk.L7ZX5SBO.js.map

package/dist/chunks/{chunk.HCJMC4IT.js → chunk.LDV73CDS.js}

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

package/dist/chunks/{chunk.2VEV27HT.js → chunk.LPORVGSO.js}

@@ -1,6 +1,6 @@
 import {
   SynIconButton
-} from "./chunk.K5PXELDD.js";
+} from "./chunk.DFVWZ5PE.js";
 import {
   waitForEvent
 } from "./chunk.C2ENQBPM.js";
@@ -26,7 +26,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.EBE3CGKL.js";
+} from "./chunk.7ULPDKAV.js";
 import {
   alert_custom_styles_default
 } from "./chunk.JRYXECAY.js";
@@ -271,4 +271,4 @@ setDefaultAnimation("alert.hide", {
 export {
   SynAlert
 };
-//# sourceMappingURL=chunk.2VEV27HT.js.map
+//# sourceMappingURL=chunk.LPORVGSO.js.map

package/dist/chunks/{chunk.6EVVIDQZ.js → chunk.MN7WOOJV.js}

@@ -9,7 +9,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.EBE3CGKL.js";
+} from "./chunk.7ULPDKAV.js";
 import {
   __decorateClass,
   __spreadProps,
@@ -415,4 +415,4 @@ __decorateClass([
 export {
   SynPopup
 };
-//# sourceMappingURL=chunk.6EVVIDQZ.js.map
+//# sourceMappingURL=chunk.MN7WOOJV.js.map

package/dist/chunks/{chunk.KX3ATDPK.js → chunk.MSCKNZTQ.js}

@@ -1,6 +1,6 @@
 import {
   SynNavItem
-} from "./chunk.NCQXRLJC.js";
+} from "./chunk.Z2RURM2Z.js";
 
 // src/components/nav-item/nav-item.ts
 var nav_item_default = SynNavItem;
@@ -9,4 +9,4 @@ SynNavItem.define("syn-nav-item");
 export {
   nav_item_default
 };
-//# sourceMappingURL=chunk.KX3ATDPK.js.map
+//# sourceMappingURL=chunk.MSCKNZTQ.js.map

package/dist/chunks/{chunk.XSTUKBIN.js → chunk.NAC4ZFLA.js}

@@ -1,6 +1,6 @@
 import {
   SynMenu
-} from "./chunk.3V3Z552X.js";
+} from "./chunk.KF27CNFO.js";
 
 // src/components/menu/menu.ts
 var menu_default = SynMenu;
@@ -9,4 +9,4 @@ SynMenu.define("syn-menu");
 export {
   menu_default
 };
-//# sourceMappingURL=chunk.XSTUKBIN.js.map
+//# sourceMappingURL=chunk.NAC4ZFLA.js.map

package/dist/chunks/{chunk.XQPM6V3Y.js → chunk.NTKHZN2V.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.EBE3CGKL.js";
+} from "./chunk.7ULPDKAV.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -89,4 +89,4 @@ function findButton(el) {
 export {
   SynButtonGroup
 };
-//# sourceMappingURL=chunk.XQPM6V3Y.js.map
+//# sourceMappingURL=chunk.NTKHZN2V.js.map

package/dist/chunks/{chunk.MTPLSXES.js → chunk.O3KNRGUR.js}

@@ -12,7 +12,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.EBE3CGKL.js";
+} from "./chunk.7ULPDKAV.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.MTPLSXES.js.map
+//# sourceMappingURL=chunk.O3KNRGUR.js.map

package/dist/chunks/{chunk.CJVTIJGE.js → chunk.PSPBOUM5.js}

@@ -12,7 +12,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.EBE3CGKL.js";
+} from "./chunk.7ULPDKAV.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -64,4 +64,4 @@ __decorateClass([
 export {
   SynTabPanel
 };
-//# sourceMappingURL=chunk.CJVTIJGE.js.map
+//# sourceMappingURL=chunk.PSPBOUM5.js.map

package/dist/chunks/{chunk.ZLBGUUHH.js → chunk.QHTYGI3G.js}

@@ -1,6 +1,6 @@
 import {
   SynProgressRing
-} from "./chunk.7WHIEYGK.js";
+} from "./chunk.4LP3ABOA.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.ZLBGUUHH.js.map
+//# sourceMappingURL=chunk.QHTYGI3G.js.map

package/dist/chunks/{chunk.3T4PKXLZ.js → chunk.QNM5254K.js}

@@ -18,7 +18,7 @@ import {
 } from "./chunk.HQ6QUSK7.js";
 import {
   SynIcon
-} from "./chunk.UAK6WG4U.js";
+} from "./chunk.BWDC4HUA.js";
 import {
   LocalizeController
 } from "./chunk.GIU3H3J3.js";
@@ -30,7 +30,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.EBE3CGKL.js";
+} from "./chunk.7ULPDKAV.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -241,4 +241,4 @@ setDefaultAnimation("details.hide", {
 export {
   SynDetails
 };
-//# sourceMappingURL=chunk.3T4PKXLZ.js.map
+//# sourceMappingURL=chunk.QNM5254K.js.map