@synergy-design-system/components 1.10.1 → 1.12.0

package/dist/events/events.d.ts

@@ -13,4 +13,5 @@ export type * from './syn-load.ts';
 export type * from './syn-remove.ts';
 export type * from './syn-reposition.ts';
 export type * from './syn-request-close.ts';
+export type * from './syn-select.ts';
 export type * from './syn-show.ts';

package/dist/events/syn-select.d.ts

@@ -0,0 +1,9 @@
+import type SynMenuItem from '../components/menu-item/menu-item.js';
+export type SynSelectEvent = CustomEvent<{
+    item: SynMenuItem;
+}>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'syn-select': SynSelectEvent;
+    }
+}

package/dist/synergy.d.ts

@@ -3,12 +3,17 @@ export { default as SynButton } from './components/button/button.js';
 export { default as SynCheckbox } from './components/checkbox/checkbox.js';
 export { default as SynDivider } from './components/divider/divider.js';
 export { default as SynDrawer } from './components/drawer/drawer.js';
+export { default as SynDropdown } from './components/dropdown/dropdown.js';
 export { default as SynHeader } from './components/header/header.js';
 export { default as SynIconButton } from './components/icon-button/icon-button.js';
 export { default as SynIcon } from './components/icon/icon.js';
 export { default as SynInput } from './components/input/input.js';
+export { default as SynMenuItem } from './components/menu-item/menu-item.js';
+export { default as SynMenuLabel } from './components/menu-label/menu-label.js';
+export { default as SynMenu } from './components/menu/menu.js';
 export { default as SynOptgroup } from './components/optgroup/optgroup.js';
 export { default as SynOption } from './components/option/option.js';
+export { default as SynPopup } from './components/popup/popup.js';
 export { default as SynRadioButton } from './components/radio-button/radio-button.js';
 export { default as SynRadioGroup } from './components/radio-group/radio-group.js';
 export { default as SynRadio } from './components/radio/radio.js';

package/dist/synergy.js

@@ -5,122 +5,152 @@ import {
 import "./chunks/chunk.NKIYFJN2.js";
 import {
   tag_default
-} from "./chunks/chunk.GXPIMLW3.js";
+} from "./chunks/chunk.QXUPCXT5.js";
 import {
   textarea_default
-} from "./chunks/chunk.P2KXCLJX.js";
-import "./chunks/chunk.XQCYTG77.js";
+} from "./chunks/chunk.G5TO77WM.js";
+import "./chunks/chunk.N3SVWIVG.js";
 import "./chunks/chunk.YBIBWRKC.js";
 import "./chunks/chunk.2EI3TNL7.js";
+import {
+  select_default
+} from "./chunks/chunk.6CAMLQSC.js";
 import {
   switch_default
-} from "./chunks/chunk.UAHEM2KD.js";
-import "./chunks/chunk.FUUO3LIN.js";
+} from "./chunks/chunk.WMAUFYXR.js";
+import "./chunks/chunk.KNZNW4VS.js";
 import "./chunks/chunk.W5JK7V7K.js";
 import "./chunks/chunk.ADRKUQGR.js";
 import {
-  radio_group_default
-} from "./chunks/chunk.IZUTSNSL.js";
+  radio_button_default
+} from "./chunks/chunk.FTTKC5YD.js";
 import {
-  select_default
-} from "./chunks/chunk.NKGRF5PE.js";
-import "./chunks/chunk.L5APUSPB.js";
-import "./chunks/chunk.LH3GMK7S.js";
-import "./chunks/chunk.7W73A57K.js";
+  radio_group_default
+} from "./chunks/chunk.2HCVVOEV.js";
+import "./chunks/chunk.5D6C4M2C.js";
+import "./chunks/chunk.F4MRQLNL.js";
+import "./chunks/chunk.XIUSSERX.js";
+import "./chunks/chunk.PN6VIFO3.js";
+import "./chunks/chunk.BRWLHYC5.js";
+import "./chunks/chunk.B6R3IVGO.js";
 import "./chunks/chunk.BGHK4NQA.js";
 import "./chunks/chunk.OWMT6OL2.js";
 import "./chunks/chunk.QNQNR3RY.js";
+import {
+  popup_default
+} from "./chunks/chunk.RD2376VJ.js";
 import {
   radio_default
-} from "./chunks/chunk.MOE5YJDU.js";
-import "./chunks/chunk.BI3SSGDL.js";
+} from "./chunks/chunk.D3SWRAXW.js";
+import "./chunks/chunk.BUBQFHSV.js";
 import "./chunks/chunk.V6VND4OF.js";
 import "./chunks/chunk.PKO6FEOM.js";
-import {
-  radio_button_default
-} from "./chunks/chunk.PKNEJYPC.js";
-import "./chunks/chunk.GQCIN3QI.js";
+import "./chunks/chunk.NYY4POP7.js";
 import "./chunks/chunk.ZIQXX272.js";
-import "./chunks/chunk.RITXJLM2.js";
-import "./chunks/chunk.F4MRQLNL.js";
-import "./chunks/chunk.XIUSSERX.js";
 import {
   optgroup_default
-} from "./chunks/chunk.GQFFWTB6.js";
+} from "./chunks/chunk.25VU42YC.js";
+import "./chunks/chunk.JT32Q3RE.js";
+import "./chunks/chunk.KG52EHDB.js";
 import {
   option_default
-} from "./chunks/chunk.EVPQK6A6.js";
-import "./chunks/chunk.5S4NBTAE.js";
+} from "./chunks/chunk.B7UA4FRG.js";
+import "./chunks/chunk.R6GYAHAZ.js";
 import "./chunks/chunk.3B24TYVN.js";
 import "./chunks/chunk.CFIQXXMW.js";
-import "./chunks/chunk.73CGLYDS.js";
-import "./chunks/chunk.MIMALEWP.js";
 import {
-  icon_button_default
-} from "./chunks/chunk.ZGNSJN4N.js";
+  menu_item_default
+} from "./chunks/chunk.76A3JS2N.js";
+import {
+  menu_label_default
+} from "./chunks/chunk.GAES53RX.js";
+import "./chunks/chunk.6G5WBKTI.js";
+import "./chunks/chunk.X6GR6IA2.js";
+import "./chunks/chunk.3FOVDOJX.js";
 import {
   input_default
-} from "./chunks/chunk.ZQKBDPXT.js";
-import "./chunks/chunk.W2U4WOJV.js";
+} from "./chunks/chunk.YGF5AV75.js";
+import {
+  menu_default
+} from "./chunks/chunk.WATON67O.js";
+import "./chunks/chunk.55KPESRA.js";
+import "./chunks/chunk.ENYO4NCR.js";
+import "./chunks/chunk.RSSY7KPD.js";
+import "./chunks/chunk.HUCNUF4L.js";
+import "./chunks/chunk.OOABXWCW.js";
+import "./chunks/chunk.PDHVYHXD.js";
+import "./chunks/chunk.RRWSXFQ5.js";
+import {
+  icon_button_default
+} from "./chunks/chunk.ISU5BF2G.js";
+import "./chunks/chunk.MFHUNGFO.js";
 import "./chunks/chunk.2OLVTQ5P.js";
 import "./chunks/chunk.4QS5IWYB.js";
-import "./chunks/chunk.WHZYEHUG.js";
-import "./chunks/chunk.KG52EHDB.js";
+import {
+  dropdown_default
+} from "./chunks/chunk.PFJUBUDL.js";
+import {
+  header_default
+} from "./chunks/chunk.5IL2WT3S.js";
+import "./chunks/chunk.SJCYCGUZ.js";
+import "./chunks/chunk.JDXKGJ63.js";
+import {
+  icon_default
+} from "./chunks/chunk.5UM7HWIJ.js";
 import {
   divider_default
-} from "./chunks/chunk.SOGEZO2M.js";
+} from "./chunks/chunk.TYPMG2S4.js";
 import {
   drawer_default
-} from "./chunks/chunk.DG6V34TC.js";
-import "./chunks/chunk.JLNH2W3S.js";
-import "./chunks/chunk.GTSRMEPE.js";
-import "./chunks/chunk.QAUTITK3.js";
-import "./chunks/chunk.NUWM3YC3.js";
+} from "./chunks/chunk.MWXEDKNQ.js";
+import "./chunks/chunk.VKSYJXTN.js";
+import "./chunks/chunk.2QYALZBT.js";
+import "./chunks/chunk.KDY26CBL.js";
 import "./chunks/chunk.ZHH2AHOZ.js";
 import "./chunks/chunk.LJQ7LEPV.js";
 import "./chunks/chunk.UYD2OVFV.js";
 import "./chunks/chunk.PHSJD47V.js";
-import {
-  header_default
-} from "./chunks/chunk.G7SPBDNX.js";
-import "./chunks/chunk.ZYXL5PMB.js";
-import {
-  icon_default
-} from "./chunks/chunk.HXLFB7ZH.js";
-import "./chunks/chunk.JDXKGJ63.js";
+import "./chunks/chunk.ZZKLLRUA.js";
+import "./chunks/chunk.IQK6FVMW.js";
+import "./chunks/chunk.MIMALEWP.js";
+import "./chunks/chunk.2QOQY4ZG.js";
+import "./chunks/chunk.7BEVGRQ2.js";
+import "./chunks/chunk.QAUTITK3.js";
+import "./chunks/chunk.2KYFCKCK.js";
+import "./chunks/chunk.SLCYXMHB.js";
 import {
   button_group_default
-} from "./chunks/chunk.LGADMVOP.js";
+} from "./chunks/chunk.W2GO4M3V.js";
 import {
   checkbox_default
-} from "./chunks/chunk.4FD6EN6V.js";
-import "./chunks/chunk.ZFFM3DYG.js";
+} from "./chunks/chunk.62EBS3GI.js";
+import "./chunks/chunk.WWMWREE4.js";
 import "./chunks/chunk.WFAJR3FN.js";
 import "./chunks/chunk.TTL762VF.js";
 import "./chunks/chunk.2XZKXVMR.js";
 import "./chunks/chunk.3STW62TA.js";
-import "./chunks/chunk.SNE4YYHY.js";
+import "./chunks/chunk.PQKD6OYF.js";
 import "./chunks/chunk.FA6V2WD6.js";
 import "./chunks/chunk.ACTJFDNK.js";
 import {
   button_default
-} from "./chunks/chunk.NSYEQECK.js";
-import "./chunks/chunk.CIENFFDB.js";
-import "./chunks/chunk.AFOOC2IJ.js";
+} from "./chunks/chunk.PLIQ6RPD.js";
+import "./chunks/chunk.3V2G5ZN5.js";
+import "./chunks/chunk.NOUFWET6.js";
 import "./chunks/chunk.OSBC36KQ.js";
 import "./chunks/chunk.LAB4YJYE.js";
 import "./chunks/chunk.A3SKDWCT.js";
 import "./chunks/chunk.SZCGMXW5.js";
-import "./chunks/chunk.XGXFE6IF.js";
-import "./chunks/chunk.LVDTUHAK.js";
-import "./chunks/chunk.PJO6TM3T.js";
-import "./chunks/chunk.2RF7KO5I.js";
+import "./chunks/chunk.66WXVGAW.js";
+import "./chunks/chunk.I2E3UJIK.js";
 import {
   registerIconLibrary,
   unregisterIconLibrary
 } from "./chunks/chunk.7UVCYUNR.js";
 import "./chunks/chunk.6C4JXZZN.js";
 import "./chunks/chunk.N4VSEIRQ.js";
+import "./chunks/chunk.PJO6TM3T.js";
+import "./chunks/chunk.2RF7KO5I.js";
 import "./chunks/chunk.AVTU2BGE.js";
 import {
   getBasePath,
@@ -128,8 +158,8 @@ import {
 } from "./chunks/chunk.C7624ITA.js";
 import "./chunks/chunk.K55MKNUR.js";
 import "./chunks/chunk.SJMMPKWP.js";
-import "./chunks/chunk.VJ5NFXWS.js";
-import "./chunks/chunk.U24UDJCX.js";
+import "./chunks/chunk.QDYPBFX4.js";
+import "./chunks/chunk.X3D3MBIH.js";
 import "./chunks/chunk.A7IIJ2LL.js";
 import "./chunks/chunk.QNDC5KWA.js";
 export {
@@ -138,12 +168,17 @@ export {
   checkbox_default as SynCheckbox,
   divider_default as SynDivider,
   drawer_default as SynDrawer,
+  dropdown_default as SynDropdown,
   header_default as SynHeader,
   icon_default as SynIcon,
   icon_button_default as SynIconButton,
   input_default as SynInput,
+  menu_default as SynMenu,
+  menu_item_default as SynMenuItem,
+  menu_label_default as SynMenuLabel,
   optgroup_default as SynOptgroup,
   option_default as SynOption,
+  popup_default as SynPopup,
   radio_default as SynRadio,
   radio_button_default as SynRadioButton,
   radio_group_default as SynRadioGroup,

package/dist/themes/utility.css

@@ -4,9 +4,18 @@
  * to reduce the possibility of collisions.
  */
 
-.syn-scroll-lock {
-  overflow: hidden !important;
-  padding-right: var(--syn-scroll-lock-size) !important;
+ @supports (scrollbar-gutter: stable) {
+  .syn-scroll-lock {
+    overflow: hidden !important;
+    scrollbar-gutter: stable !important;
+  }
+}
+
+@supports not (scrollbar-gutter: stable) {
+  .syn-scroll-lock {
+    overflow: hidden !important;
+    padding-right: var(--syn-scroll-lock-size) !important;
+  }
 }
 
 .syn-toast-stack {

package/dist/vscode.html-custom-data.json

@@ -131,23 +131,6 @@
         }
       ]
     },
-    {
-      "name": "syn-button-group",
-      "description": "Button groups can be used to group related buttons into sections.\n---\n\n\n### **Slots:**\n - _default_ - One or more `<syn-button>` elements to display in the button group.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
-      "attributes": [
-        {
-          "name": "label",
-          "description": "A label to use for the button group. This won't be displayed on the screen, but it will be announced by assistive\ndevices when interacting with the control and is strongly recommended.",
-          "values": []
-        }
-      ],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://synergy.style/components/button-group"
-        }
-      ]
-    },
     {
       "name": "syn-checkbox",
       "description": "Checkboxes allow the user to toggle an option on or off.\n---\n\n\n### **Events:**\n - **syn-blur** - Emitted when the checkbox loses focus.\n- **syn-change** - Emitted when the checked state changes.\n- **syn-focus** - Emitted when the checkbox gains focus.\n- **syn-input** - Emitted when the checkbox receives input.\n- **syn-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **click()** - Simulates a click on the checkbox.\n- **focus(options: _FocusOptions_)** - Sets focus on the checkbox.\n- **blur()** - Removes focus from the checkbox.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. The value provided will be shown to the user when the form is submitted. To clear\nthe custom validation message, call this method with an empty string.\n\n### **Slots:**\n - _default_ - The checkbox's label.\n- **help-text** - Text that describes how to use the checkbox. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **control** - The square container that wraps the checkbox's checked state.\n- **control--checked** - Matches the control part when the checkbox is checked.\n- **control--indeterminate** - Matches the control part when the checkbox is indeterminate.\n- **checked-icon** - The checked icon, an `<syn-icon>` element.\n- **indeterminate-icon** - The indeterminate icon, an `<syn-icon>` element.\n- **label** - The container that wraps the checkbox's label.\n- **form-control-help-text** - The help text's wrapper.",
@@ -210,6 +193,23 @@
         }
       ]
     },
+    {
+      "name": "syn-button-group",
+      "description": "Button groups can be used to group related buttons into sections.\n---\n\n\n### **Slots:**\n - _default_ - One or more `<syn-button>` elements to display in the button group.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+      "attributes": [
+        {
+          "name": "label",
+          "description": "A label to use for the button group. This won't be displayed on the screen, but it will be announced by assistive\ndevices when interacting with the control and is strongly recommended.",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://synergy.style/components/button-group"
+        }
+      ]
+    },
     {
       "name": "syn-divider",
       "description": "Dividers are used to visually separate or group elements.\n---\n\n\n### **CSS Properties:**\n - **--color** - The color of the divider. _(default: undefined)_\n- **--width** - The width of the divider. _(default: undefined)_\n- **--spacing** - The spacing of the divider. _(default: undefined)_",
@@ -269,6 +269,67 @@
         }
       ]
     },
+    {
+      "name": "syn-dropdown",
+      "description": "Dropdowns expose additional content that \"drops down\" in a panel.\n---\n\n\n### **Events:**\n - **syn-show** - Emitted when the dropdown opens.\n- **syn-after-show** - Emitted after the dropdown opens and all animations are complete.\n- **syn-hide** - Emitted when the dropdown closes.\n- **syn-after-hide** - Emitted after the dropdown closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the dropdown panel.\n- **hide()** - Hides the dropdown panel\n- **reposition()** - Instructs the dropdown menu to reposition. Useful when the position or size of the trigger changes when the menu\nis activated.\n\n### **Slots:**\n - _default_ - The dropdown's main content.\n- **trigger** - The dropdown's trigger, usually a `<syn-button>` element.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **trigger** - The container that wraps the trigger.\n- **panel** - The panel that gets shown when the dropdown is open.",
+      "attributes": [
+        {
+          "name": "open",
+          "description": "Indicates whether or not the dropdown is open. You can toggle this attribute to show and hide the dropdown, or you\ncan use the `show()` and `hide()` methods and this attribute will reflect the dropdown's open state.",
+          "values": []
+        },
+        {
+          "name": "placement",
+          "description": "The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel\ninside of the viewport.",
+          "values": [
+            { "name": "" },
+            { "name": "top" },
+            { "name": "top-start" },
+            { "name": "top-end" },
+            { "name": "bottom" },
+            { "name": "bottom-start" },
+            { "name": "bottom-end" },
+            { "name": "right" },
+            { "name": "right-start" },
+            { "name": "right-end" },
+            { "name": "left" },
+            { "name": "left-start" },
+            { "name": "left-end" }
+          ]
+        },
+        {
+          "name": "disabled",
+          "description": "Disables the dropdown so the panel will not open.",
+          "values": []
+        },
+        {
+          "name": "stay-open-on-select",
+          "description": "By default, the dropdown is closed when an item is selected. This attribute will keep it open instead. Useful for\ndropdowns that allow for multiple interactions.",
+          "values": []
+        },
+        {
+          "name": "distance",
+          "description": "The distance in pixels from which to offset the panel away from its trigger.",
+          "values": []
+        },
+        {
+          "name": "skidding",
+          "description": "The distance in pixels from which to offset the panel along its trigger.",
+          "values": []
+        },
+        {
+          "name": "hoist",
+          "description": "Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://synergy.style/components/dropdown"
+        }
+      ]
+    },
     {
       "name": "syn-header",
       "description": "The <syn-header /> element provides a generic application header\nthat can be used to add applications name, toolbar and primary navigation.\n---\n\n\n### **Slots:**\n - _default_ - The label for the header.\n- **logo** - The logo that should be displayed. Will fall back to the SICK logo if not provided.\n- **meta-navigation** - The meta-navigation is used to add various application toolbar icons. Best used with `<syn-icon-button />` and `<syn-drop-down />`\n- **navigation** - This slot can be used to add an optional horizontal navigation\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **content** - The wrapper most content items reside\n- **logo** - The wrapper the application logo resides in\n- **label** - The element wrapping the application name\n- **meta-navigation** - The Item wrapping the optional application menu\n- **navigation** - The wrapper that is holding the optional top navigation section",
@@ -587,6 +648,65 @@
         }
       ]
     },
+    {
+      "name": "syn-menu",
+      "description": "Menus provide a list of options for the user to choose from.\n---\n\n\n### **Events:**\n - **syn-select** - Emitted when a menu item is selected.\n\n### **Slots:**\n - _default_ - The menu's content, including menu items, menu labels, and dividers.",
+      "attributes": [],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://synergy.style/components/menu"
+        }
+      ]
+    },
+    {
+      "name": "syn-menu-item",
+      "description": "Menu items provide options for the user to pick from in a menu.\n---\n\n\n### **Methods:**\n - **getTextLabel()** - Returns a text label based on the contents of the menu item's default slot.\n\n### **Slots:**\n - _default_ - The menu item's label.\n- **prefix** - Used to prepend an icon or similar element to the menu item.\n- **suffix** - Used to append an icon or similar element to the menu item.\n- **submenu** - Used to denote a nested menu.\n\n### **CSS Properties:**\n - **--submenu-offset** - The distance submenus shift to overlap the parent menu. _(default: -2px)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **checked-icon** - The checked icon, which is only visible when the menu item is checked.\n- **prefix** - The prefix container.\n- **label** - The menu item label.\n- **suffix** - The suffix container.\n- **spinner** - The spinner that shows when the menu item is in the loading state.\n- **spinner__base** - The spinner's base part.\n- **submenu-icon** - The submenu icon, visible only when the menu item has a submenu (not yet implemented).",
+      "attributes": [
+        {
+          "name": "type",
+          "description": "The type of menu item to render. To use `checked`, this value must be set to `checkbox`.",
+          "values": [{ "name": "normal" }, { "name": "checkbox" }]
+        },
+        {
+          "name": "checked",
+          "description": "Draws the item in a checked state.",
+          "values": []
+        },
+        {
+          "name": "value",
+          "description": "A unique value to store in the menu item. This can be used as a way to identify menu items when selected.",
+          "values": []
+        },
+        {
+          "name": "loading",
+          "description": "Draws the menu item in a loading state.",
+          "values": []
+        },
+        {
+          "name": "disabled",
+          "description": "Draws the menu item in a disabled state, preventing selection.",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://synergy.style/components/menu-item"
+        }
+      ]
+    },
+    {
+      "name": "syn-menu-label",
+      "description": "Menu labels are used to describe a group of menu items.\n---\n\n\n### **Slots:**\n - _default_ - The menu label's content.\n\n### **CSS Properties:**\n - **--display-divider** - Display property of the divider. Defaults to \"block\" _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **divider** - The divider that is displayed above the content\n- **label** - The label that is displayed below the divider",
+      "attributes": [],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://synergy.style/components/menu-label"
+        }
+      ]
+    },
     {
       "name": "syn-optgroup",
       "description": "The <syn-optgroup> element creates a grouping for <syn-option>s within a <syn-select>.\n---\n\n\n### **Slots:**\n - _default_ - The given options. Must be `<syn-option>` elements.\n- **prefix** - A presentational prefix icon or similar element.\n- **label** - The label for the optgroup\n- **suffix** - A presentational suffix icon or similar element.\n\n### **CSS Properties:**\n - **--display-divider** - Display property of the divider. Defaults to \"block\" _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **label-container** - The container that wraps prefix, label and base\n- **divider** - The divider that is displayed above the content\n- **prefix** - The container that wraps the prefix.\n- **suffix** - The container that wraps the suffix.\n- **options** - The container that wraps the <syn-option> elements.",

package/package.json

@@ -4,7 +4,7 @@
     "url": "https://www.sick.com"
   },
   "name": "@synergy-design-system/components",
-  "version": "1.10.1",
+  "version": "1.12.0",
   "description": "",
   "repository": {
     "type": "git",
@@ -89,8 +89,8 @@
     "vendorism": "^3.0.0",
     "vue-tsc": "^1.8.27",
     "@synergy-design-system/eslint-config-syn": "0.1.0",
-    "@synergy-design-system/tokens": "1.8.0",
-    "@synergy-design-system/stylelint-config-syn": "0.1.0"
+    "@synergy-design-system/stylelint-config-syn": "0.1.0",
+    "@synergy-design-system/tokens": "1.9.0"
   },
   "release": {
     "branches": [

package/dist/chunks/chunk.7W73A57K.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/components/tag/tag.custom.styles.ts"],
-  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  .tag {\n    background-color: var(--syn-color-neutral-0);\n    border-color: var(--syn-color-neutral-400);\n    color: var(--syn-input-color);\n  }\n\n  .tag .tag__remove {\n    color: var(--syn-color-neutral-500);\n  }\n\n\n  /* Size small */\n  .tag--small {\n    font-size: var(--syn-font-size-x-small);\n    height: var(--syn-font-size-x-large);\n  }\n\n  .tag--small.tag--removable {\n    padding-inline-end: var(--syn-spacing-2x-small);\n  }\n\n\n  /* Size medium */\n  .tag--medium {\n    font-size: var(--syn-font-size-small);\n    height: var(--syn-font-size-2x-large);\n  }\n\n  .tag--medium.tag--removable {\n    padding-inline-end: var(--syn-spacing-x-small);\n  }\n\n  .tag--medium .tag__remove {\n    margin-inline-start: var(--syn-spacing-small);\n  }\n\n\n  /* Size large */\n  .tag--large {\n    font-size: var(--syn-font-size-medium);\n    height: var(--syn-font-size-3x-large);\n  }\n\n  .tag--large .tag__remove {\n    margin-inline-start: var(--syn-spacing-medium);\n  }\n\n  .tag--large.tag--removable {\n    padding-inline-end: var(--syn-spacing-small);\n  }\n\n\n  /* Hover */\n  .tag.tag--removable:hover {\n    background-color: var(--syn-color-neutral-100);\n  }\n  \n  .tag .tag__remove:hover {\n    color: var(--syn-color-neutral-950);\n  }\n\n\n  /* Focus \n     ! Focus styling is currently not working because shoelace does not support to focus icon-button \n  */\n  .tag.tag--removable:focus ~ .tag__remove {\n    border: solid 1px var(--syn-color-primary-500);\n  }\n\n\n  /* Slotted icon style */\n  .tag--small ::slotted(syn-icon) {\n    font-size: var(--syn-font-size-small);\n    margin-inline-end: var(--syn-spacing-2x-small);\n  }\n\n  .tag--medium ::slotted(syn-icon) {\n    font-size: var(--syn-font-size-medium);\n    margin-inline-end: var(--syn-spacing-x-small);\n  }\n\n  .tag--large ::slotted(syn-icon) {\n    font-size: var(--syn-font-size-large);\n    margin-inline-end: var(--syn-spacing-x-small);\n  }\n\n\n  /* Remove icon-button style */\n  .tag--small .tag__remove::part(base){\n    font-size: var(--syn-font-size-medium);\n  }\n\n  .tag--medium .tag__remove::part(base){\n    font-size: var(--syn-font-size-x-large);\n  }\n\n  .tag--large .tag__remove::part(base){\n    font-size: var(--syn-font-size-2x-large);\n  }\n`;\n"],
-  "mappings": ";AAAA,SAAS,WAAW;AAEpB,IAAO,4BAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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.GTSRMEPE.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/internal/animate.ts", "../../src/internal/offset.ts", "../../src/internal/scroll.ts", "../../src/internal/event.ts"],
-  "sourcesContent": ["// ---------------------------------------------------------------------\n// \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n// Removing this comment will prevent it from being managed by it.\n// ---------------------------------------------------------------------\n\n/* eslint-disable */\n/**\n * Animates an element using keyframes. Returns a promise that resolves after the animation completes or gets canceled.\n */\nexport function animateTo(el: HTMLElement, keyframes: Keyframe[], options?: KeyframeAnimationOptions) {\n  return new Promise(resolve => {\n    if (options?.duration === Infinity) {\n      throw new Error('Promise-based animations must be finite.');\n    }\n\n    const animation = el.animate(keyframes, {\n      ...options,\n      duration: prefersReducedMotion() ? 0 : options!.duration\n    });\n\n    animation.addEventListener('cancel', resolve, { once: true });\n    animation.addEventListener('finish', resolve, { once: true });\n  });\n}\n\n/** Parses a CSS duration and returns the number of milliseconds. */\nexport function parseDuration(delay: number | string) {\n  delay = delay.toString().toLowerCase();\n\n  if (delay.indexOf('ms') > -1) {\n    return parseFloat(delay);\n  }\n\n  if (delay.indexOf('s') > -1) {\n    return parseFloat(delay) * 1000;\n  }\n\n  return parseFloat(delay);\n}\n\n/** Tells if the user has enabled the \"reduced motion\" setting in their browser or OS. */\nexport function prefersReducedMotion() {\n  const query = window.matchMedia('(prefers-reduced-motion: reduce)');\n  return query.matches;\n}\n\n/**\n * Stops all active animations on the target element. Returns a promise that resolves after all animations are canceled.\n */\nexport function stopAnimations(el: HTMLElement) {\n  return Promise.all(\n    el.getAnimations().map(animation => {\n      return new Promise(resolve => {\n        animation.cancel();\n        requestAnimationFrame(resolve);\n      });\n    })\n  );\n}\n\n/**\n * We can't animate `height: auto`, but we can calculate the height and shim keyframes by replacing it with the\n * element's scrollHeight before the animation.\n */\nexport function shimKeyframesHeightAuto(keyframes: Keyframe[], calculatedHeight: number) {\n  return keyframes.map(keyframe => ({\n    ...keyframe,\n    height: keyframe.height === 'auto' ? `${calculatedHeight}px` : keyframe.height\n  }));\n}\n", "// ---------------------------------------------------------------------\n// \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n// Removing this comment will prevent it from being managed by it.\n// ---------------------------------------------------------------------\n\n/* eslint-disable */\n/**\n * Returns an element's offset relative to its parent. Similar to element.offsetTop and element.offsetLeft, except the\n * parent doesn't have to be positioned relative or absolute.\n *\n * NOTE: This was created to work around what appears to be a bug in Chrome where a slotted element's offsetParent seems\n * to ignore elements inside the surrounding shadow DOM: https://bugs.chromium.org/p/chromium/issues/detail?id=920069\n */\nexport function getOffset(element: HTMLElement, parent: HTMLElement) {\n  return {\n    top: Math.round(element.getBoundingClientRect().top - parent.getBoundingClientRect().top),\n    left: Math.round(element.getBoundingClientRect().left - parent.getBoundingClientRect().left)\n  };\n}\n", "// ---------------------------------------------------------------------\n// \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n// Removing this comment will prevent it from being managed by it.\n// ---------------------------------------------------------------------\n\n/* eslint-disable */\nimport { getOffset } from './offset.js';\n\nconst locks = new Set();\n\n/** Returns the width of the document's scrollbar */\nfunction getScrollbarWidth() {\n  const documentWidth = document.documentElement.clientWidth;\n  return Math.abs(window.innerWidth - documentWidth);\n}\n\n/**\n * Prevents body scrolling. Keeps track of which elements requested a lock so multiple levels of locking are possible\n * without premature unlocking.\n */\nexport function lockBodyScrolling(lockingEl: HTMLElement) {\n  locks.add(lockingEl);\n\n  // When the first lock is created, set the scroll lock size to match the scrollbar's width to prevent content from\n  // shifting. We only do this on the first lock because the scrollbar width will measure zero after overflow is hidden.\n  if (!document.body.classList.contains('syn-scroll-lock')) {\n    const scrollbarWidth = getScrollbarWidth(); // must be measured before the `syn-scroll-lock` class is applied\n    document.body.classList.add('syn-scroll-lock');\n    document.body.style.setProperty('--syn-scroll-lock-size', `${scrollbarWidth}px`);\n  }\n}\n\n/**\n * Unlocks body scrolling. Scrolling will only be unlocked once all elements that requested a lock call this method.\n */\nexport function unlockBodyScrolling(lockingEl: HTMLElement) {\n  locks.delete(lockingEl);\n\n  if (locks.size === 0) {\n    document.body.classList.remove('syn-scroll-lock');\n    document.body.style.removeProperty('--syn-scroll-lock-size');\n  }\n}\n\n/** Scrolls an element into view of its container. If the element is already in view, nothing will happen. */\nexport function scrollIntoView(\n  element: HTMLElement,\n  container: HTMLElement,\n  direction: 'horizontal' | 'vertical' | 'both' = 'vertical',\n  behavior: 'smooth' | 'auto' = 'smooth'\n) {\n  const offset = getOffset(element, container);\n  const offsetTop = offset.top + container.scrollTop;\n  const offsetLeft = offset.left + container.scrollLeft;\n  const minX = container.scrollLeft;\n  const maxX = container.scrollLeft + container.offsetWidth;\n  const minY = container.scrollTop;\n  const maxY = container.scrollTop + container.offsetHeight;\n\n  if (direction === 'horizontal' || direction === 'both') {\n    if (offsetLeft < minX) {\n      container.scrollTo({ left: offsetLeft, behavior });\n    } else if (offsetLeft + element.clientWidth > maxX) {\n      container.scrollTo({ left: offsetLeft - container.offsetWidth + element.clientWidth, behavior });\n    }\n  }\n\n  if (direction === 'vertical' || direction === 'both') {\n    if (offsetTop < minY) {\n      container.scrollTo({ top: offsetTop, behavior });\n    } else if (offsetTop + element.clientHeight > maxY) {\n      container.scrollTo({ top: offsetTop - container.offsetHeight + element.clientHeight, behavior });\n    }\n  }\n}\n", "// ---------------------------------------------------------------------\n// \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n// Removing this comment will prevent it from being managed by it.\n// ---------------------------------------------------------------------\n\n/* eslint-disable */\n/** Waits for a specific event to be emitted from an element. Ignores events that bubble up from child elements. */\nexport function waitForEvent(el: HTMLElement, eventName: string) {\n  return new Promise<void>(resolve => {\n    function done(event: Event) {\n      if (event.target === el) {\n        el.removeEventListener(eventName, done);\n        resolve();\n      }\n    }\n\n    el.addEventListener(eventName, done);\n  });\n}\n"],
-  "mappings": ";;;;;;AASO,SAAS,UAAU,IAAiB,WAAuB,SAAoC;AACpG,SAAO,IAAI,QAAQ,aAAW;AAC5B,SAAI,mCAAS,cAAa,UAAU;AAClC,YAAM,IAAI,MAAM,0CAA0C;AAAA,IAC5D;AAEA,UAAM,YAAY,GAAG,QAAQ,WAAW,iCACnC,UADmC;AAAA,MAEtC,UAAU,qBAAqB,IAAI,IAAI,QAAS;AAAA,IAClD,EAAC;AAED,cAAU,iBAAiB,UAAU,SAAS,EAAE,MAAM,KAAK,CAAC;AAC5D,cAAU,iBAAiB,UAAU,SAAS,EAAE,MAAM,KAAK,CAAC;AAAA,EAC9D,CAAC;AACH;AAkBO,SAAS,uBAAuB;AACrC,QAAM,QAAQ,OAAO,WAAW,kCAAkC;AAClE,SAAO,MAAM;AACf;AAKO,SAAS,eAAe,IAAiB;AAC9C,SAAO,QAAQ;AAAA,IACb,GAAG,cAAc,EAAE,IAAI,eAAa;AAClC,aAAO,IAAI,QAAQ,aAAW;AAC5B,kBAAU,OAAO;AACjB,8BAAsB,OAAO;AAAA,MAC/B,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AACF;;;AC7CO,SAAS,UAAU,SAAsB,QAAqB;AACnE,SAAO;AAAA,IACL,KAAK,KAAK,MAAM,QAAQ,sBAAsB,EAAE,MAAM,OAAO,sBAAsB,EAAE,GAAG;AAAA,IACxF,MAAM,KAAK,MAAM,QAAQ,sBAAsB,EAAE,OAAO,OAAO,sBAAsB,EAAE,IAAI;AAAA,EAC7F;AACF;;;ACVA,IAAM,QAAQ,oBAAI,IAAI;AAGtB,SAAS,oBAAoB;AAC3B,QAAM,gBAAgB,SAAS,gBAAgB;AAC/C,SAAO,KAAK,IAAI,OAAO,aAAa,aAAa;AACnD;AAMO,SAAS,kBAAkB,WAAwB;AACxD,QAAM,IAAI,SAAS;AAInB,MAAI,CAAC,SAAS,KAAK,UAAU,SAAS,iBAAiB,GAAG;AACxD,UAAM,iBAAiB,kBAAkB;AACzC,aAAS,KAAK,UAAU,IAAI,iBAAiB;AAC7C,aAAS,KAAK,MAAM,YAAY,0BAA0B,GAAG,cAAc,IAAI;AAAA,EACjF;AACF;AAKO,SAAS,oBAAoB,WAAwB;AAC1D,QAAM,OAAO,SAAS;AAEtB,MAAI,MAAM,SAAS,GAAG;AACpB,aAAS,KAAK,UAAU,OAAO,iBAAiB;AAChD,aAAS,KAAK,MAAM,eAAe,wBAAwB;AAAA,EAC7D;AACF;AAGO,SAAS,eACd,SACA,WACA,YAAgD,YAChD,WAA8B,UAC9B;AACA,QAAM,SAAS,UAAU,SAAS,SAAS;AAC3C,QAAM,YAAY,OAAO,MAAM,UAAU;AACzC,QAAM,aAAa,OAAO,OAAO,UAAU;AAC3C,QAAM,OAAO,UAAU;AACvB,QAAM,OAAO,UAAU,aAAa,UAAU;AAC9C,QAAM,OAAO,UAAU;AACvB,QAAM,OAAO,UAAU,YAAY,UAAU;AAE7C,MAAI,cAAc,gBAAgB,cAAc,QAAQ;AACtD,QAAI,aAAa,MAAM;AACrB,gBAAU,SAAS,EAAE,MAAM,YAAY,SAAS,CAAC;AAAA,IACnD,WAAW,aAAa,QAAQ,cAAc,MAAM;AAClD,gBAAU,SAAS,EAAE,MAAM,aAAa,UAAU,cAAc,QAAQ,aAAa,SAAS,CAAC;AAAA,IACjG;AAAA,EACF;AAEA,MAAI,cAAc,cAAc,cAAc,QAAQ;AACpD,QAAI,YAAY,MAAM;AACpB,gBAAU,SAAS,EAAE,KAAK,WAAW,SAAS,CAAC;AAAA,IACjD,WAAW,YAAY,QAAQ,eAAe,MAAM;AAClD,gBAAU,SAAS,EAAE,KAAK,YAAY,UAAU,eAAe,QAAQ,cAAc,SAAS,CAAC;AAAA,IACjG;AAAA,EACF;AACF;;;ACnEO,SAAS,aAAa,IAAiB,WAAmB;AAC/D,SAAO,IAAI,QAAc,aAAW;AAClC,aAAS,KAAK,OAAc;AAC1B,UAAI,MAAM,WAAW,IAAI;AACvB,WAAG,oBAAoB,WAAW,IAAI;AACtC,gBAAQ;AAAA,MACV;AAAA,IACF;AAEA,OAAG,iBAAiB,WAAW,IAAI;AAAA,EACrC,CAAC;AACH;",
-  "names": []
-}