@synergy-design-system/components 1.0.2 → 1.2.0

package/dist/events/events.d.ts

@@ -6,3 +6,4 @@ export type * from './syn-focus.ts';
 export type * from './syn-input.ts';
 export type * from './syn-invalid.ts';
 export type * from './syn-load.ts';
+export type * from './syn-remove.ts';

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

@@ -0,0 +1,6 @@
+export type SynRemoveEvent = CustomEvent<Record<PropertyKey, never>>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'syn-remove': SynRemoveEvent;
+    }
+}

package/dist/synergy.d.ts

@@ -1,12 +1,14 @@
 export { default as SynButtonGroup } from './components/button-group/button-group.js';
 export { default as SynButton } from './components/button/button.js';
 export { default as SynCheckbox } from './components/checkbox/checkbox.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 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';
 export { default as SynSwitch } from './components/switch/switch.js';
+export { default as SynTag } from './components/tag/tag.js';
 export { default as SynTextarea } from './components/textarea/textarea.js';
 export * from './utilities/base-path.js';
 export * from './utilities/icon-library.js';

package/dist/synergy.js

@@ -4,72 +4,84 @@ import {
 } from "./chunks/chunk.Z3RZUTQU.js";
 import "./chunks/chunk.NKIYFJN2.js";
 import {
-  switch_default
-} from "./chunks/chunk.D7KU5L75.js";
+  tag_default
+} from "./chunks/chunk.CAIB544F.js";
 import {
   textarea_default
-} from "./chunks/chunk.FJGYV3Y3.js";
-import "./chunks/chunk.W5GPJ6ZR.js";
+} from "./chunks/chunk.4EXY5F5M.js";
+import "./chunks/chunk.D5YL3H6T.js";
 import "./chunks/chunk.23HTU3YE.js";
 import "./chunks/chunk.YBIBWRKC.js";
 import {
-  radio_group_default
-} from "./chunks/chunk.U2NJG6GX.js";
-import "./chunks/chunk.SUNIN43Y.js";
+  switch_default
+} from "./chunks/chunk.E2TU3YYJ.js";
+import "./chunks/chunk.2OYZUDFV.js";
 import "./chunks/chunk.MNMITYTH.js";
 import "./chunks/chunk.AFEABUNX.js";
-import {
-  radio_default
-} from "./chunks/chunk.JVSVQG6I.js";
-import "./chunks/chunk.B7KNRAHG.js";
-import "./chunks/chunk.JBYBQ5TQ.js";
-import "./chunks/chunk.V6VND4OF.js";
+import "./chunks/chunk.ESQOUQV3.js";
+import "./chunks/chunk.QHFGD6WW.js";
+import "./chunks/chunk.7W73A57K.js";
 import {
   radio_button_default
-} from "./chunks/chunk.WVYTLFNV.js";
-import "./chunks/chunk.MB5S3IM7.js";
+} from "./chunks/chunk.MJC7VLA2.js";
+import "./chunks/chunk.CB2M3AVU.js";
 import "./chunks/chunk.OVVMSN4D.js";
-import "./chunks/chunk.3NY33MCF.js";
+import {
+  radio_group_default
+} from "./chunks/chunk.AFVZYX7H.js";
+import "./chunks/chunk.ADE7GDYK.js";
 import "./chunks/chunk.4I6M5V6O.js";
 import "./chunks/chunk.F4MRQLNL.js";
-import {
-  icon_default
-} from "./chunks/chunk.G3EPLUES.js";
 import {
   input_default
-} from "./chunks/chunk.M5DMOLZK.js";
-import "./chunks/chunk.U7R4EV7C.js";
+} from "./chunks/chunk.JRAW7QJL.js";
+import "./chunks/chunk.RG4Z2I6D.js";
 import "./chunks/chunk.OXUFFH57.js";
 import "./chunks/chunk.JHXCBOUD.js";
 import "./chunks/chunk.W46CFM2R.js";
+import {
+  radio_default
+} from "./chunks/chunk.4EWYZIJS.js";
+import "./chunks/chunk.44U5VKNJ.js";
+import "./chunks/chunk.JBYBQ5TQ.js";
+import "./chunks/chunk.V6VND4OF.js";
+import {
+  icon_default
+} from "./chunks/chunk.ZGZ7W6BC.js";
+import {
+  icon_button_default
+} from "./chunks/chunk.VTYPMAXM.js";
+import "./chunks/chunk.L6I5ZLBO.js";
+import "./chunks/chunk.2FN5DTS6.js";
+import "./chunks/chunk.OJF7KL44.js";
 import {
   button_group_default
-} from "./chunks/chunk.DUAFHNTR.js";
+} from "./chunks/chunk.SEHRSICV.js";
 import {
   checkbox_default
-} from "./chunks/chunk.7MTLFTYG.js";
-import "./chunks/chunk.XVJVR3MD.js";
+} from "./chunks/chunk.TACOOH3N.js";
+import "./chunks/chunk.3CSVGX3J.js";
 import "./chunks/chunk.WFAJR3FN.js";
 import "./chunks/chunk.4CBN5LPQ.js";
 import "./chunks/chunk.2XZKXVMR.js";
 import {
   button_default
-} from "./chunks/chunk.P3O63FHH.js";
-import "./chunks/chunk.HZERAHZP.js";
-import "./chunks/chunk.IFPM2NRM.js";
+} from "./chunks/chunk.MUP4GIQL.js";
+import "./chunks/chunk.NRA7I7QC.js";
+import "./chunks/chunk.FHYBGERU.js";
 import "./chunks/chunk.N2I6HVX3.js";
+import "./chunks/chunk.XGXFE6IF.js";
 import "./chunks/chunk.R6VNLE6N.js";
 import "./chunks/chunk.A3SKDWCT.js";
-import "./chunks/chunk.XGXFE6IF.js";
 import "./chunks/chunk.P2LNG2PZ.js";
-import "./chunks/chunk.PHG2CETE.js";
+import "./chunks/chunk.RKQHPBKM.js";
 import "./chunks/chunk.VZ7S7YYN.js";
 import {
   registerIconLibrary,
   unregisterIconLibrary
-} from "./chunks/chunk.4XAK6MOQ.js";
+} from "./chunks/chunk.6PFQSQLU.js";
 import "./chunks/chunk.6C4JXZZN.js";
-import "./chunks/chunk.GNAJOKCJ.js";
+import "./chunks/chunk.EJXWL3JM.js";
 import "./chunks/chunk.RSONAU45.js";
 import "./chunks/chunk.PJO6TM3T.js";
 import {
@@ -78,8 +90,8 @@ import {
 } from "./chunks/chunk.C7624ITA.js";
 import "./chunks/chunk.YTS5TRJZ.js";
 import "./chunks/chunk.FVSP4LXX.js";
-import "./chunks/chunk.5SKPG6DM.js";
-import "./chunks/chunk.MUOAKBT3.js";
+import "./chunks/chunk.Q7NHWXSL.js";
+import "./chunks/chunk.SPPBO7QV.js";
 import "./chunks/chunk.4ZURABYO.js";
 import "./chunks/chunk.O7USYXBT.js";
 import "./chunks/chunk.DJOAQ4JU.js";
@@ -88,11 +100,13 @@ export {
   button_group_default as SynButtonGroup,
   checkbox_default as SynCheckbox,
   icon_default as SynIcon,
+  icon_button_default as SynIconButton,
   input_default as SynInput,
   radio_default as SynRadio,
   radio_button_default as SynRadioButton,
   radio_group_default as SynRadioGroup,
   switch_default as SynSwitch,
+  tag_default as SynTag,
   textarea_default as SynTextarea,
   getBasePath,
   getFormControls,

package/dist/utilities/icon-library.js

@@ -2,9 +2,9 @@ import "../chunks/chunk.NKIYFJN2.js";
 import {
   registerIconLibrary,
   unregisterIconLibrary
-} from "../chunks/chunk.4XAK6MOQ.js";
+} from "../chunks/chunk.6PFQSQLU.js";
 import "../chunks/chunk.6C4JXZZN.js";
-import "../chunks/chunk.GNAJOKCJ.js";
+import "../chunks/chunk.EJXWL3JM.js";
 import "../chunks/chunk.C7624ITA.js";
 import "../chunks/chunk.DJOAQ4JU.js";
 export {

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

@@ -2,6 +2,23 @@
   "$schema": "https://raw.githubusercontent.com/microsoft/vscode-html-languageservice/main/docs/customData.schema.json",
   "version": 1.1,
   "tags": [
+    {
+      "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-button",
       "description": "Buttons represent actions that are available to the user.\n---\n\n\n### **Events:**\n - **syn-blur** - Emitted when the button loses focus.\n- **syn-focus** - Emitted when the button gains focus.\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 button.\n- **focus(options: _FocusOptions_)** - Sets focus on the button.\n- **blur()** - Removes focus from the button.\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. Pass an empty string to restore validity.\n\n### **Slots:**\n - _default_ - The button's label.\n- **prefix** - A presentational prefix icon or similar element.\n- **suffix** - A presentational suffix icon or similar element.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **prefix** - The container that wraps the prefix.\n- **label** - The button's label.\n- **suffix** - The container that wraps the suffix.\n- **caret** - The button's caret icon, an `<syn-icon>` element.\n- **spinner** - The spinner that shows when the button is in the loading state.",
@@ -131,23 +148,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\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.",
@@ -237,6 +237,82 @@
         }
       ]
     },
+    {
+      "name": "syn-icon-button",
+      "description": "Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.\n---\n\n\n### **Events:**\n - **syn-blur** - Emitted when the icon button loses focus.\n- **syn-focus** - Emitted when the icon button gains focus.\n\n### **Methods:**\n - **click()** - Simulates a click on the icon button.\n- **focus(options: _FocusOptions_)** - Sets focus on the icon button.\n- **blur()** - Removes focus from the icon button.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+      "attributes": [
+        {
+          "name": "name",
+          "description": "The name of the icon to draw. Available names depend on the icon library being used.",
+          "values": []
+        },
+        {
+          "name": "library",
+          "description": "The name of a registered custom icon library.",
+          "values": []
+        },
+        {
+          "name": "src",
+          "description": "An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and\ncan result in XSS attacks.",
+          "values": []
+        },
+        {
+          "name": "href",
+          "description": "When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`.",
+          "values": []
+        },
+        {
+          "name": "target",
+          "description": "Tells the browser where to open the link. Only used when `href` is set.",
+          "values": [
+            { "name": "_blank" },
+            { "name": "_parent" },
+            { "name": "_self" },
+            { "name": "_top" }
+          ]
+        },
+        {
+          "name": "download",
+          "description": "Tells the browser to download the linked file as this filename. Only used when `href` is set.",
+          "values": []
+        },
+        {
+          "name": "label",
+          "description": "A description that gets read by assistive devices. For optimal accessibility, you should always include a label\nthat describes what the icon button does.",
+          "values": []
+        },
+        {
+          "name": "size",
+          "description": "The icon button's size.",
+          "values": [
+            { "name": "small" },
+            { "name": "medium" },
+            { "name": "large" },
+            { "name": "inherit" }
+          ]
+        },
+        {
+          "name": "color",
+          "description": "The color of the icon button.\nThe default \"currentColor\" makes it possible to easily style the icon button from outside without any CSS variables.",
+          "values": [
+            { "name": "currentColor" },
+            { "name": "primary" },
+            { "name": "neutral" }
+          ]
+        },
+        {
+          "name": "disabled",
+          "description": "Disables the button.",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://synergy.style/components/icon-button"
+        }
+      ]
+    },
     {
       "name": "syn-input",
       "description": "Inputs collect data from the user.\n---\n\n\n### **Events:**\n - **syn-blur** - Emitted when the control loses focus.\n- **syn-change** - Emitted when an alteration to the control's value is committed by the user.\n- **syn-clear** - Emitted when the clear button is activated.\n- **syn-focus** - Emitted when the control gains focus.\n- **syn-input** - Emitted when the control 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 - **focus(options: _FocusOptions_)** - Sets focus on the input.\n- **blur()** - Removes focus from the input.\n- **select()** - Selects all the text in the input.\n- **setSelectionRange(selectionStart: _number_, selectionEnd: _number_, selectionDirection: _'forward' | 'backward' | 'none'_)** - Sets the start and end positions of the text selection (0-based).\n- **setRangeText(replacement: _string_, start: _number_, end: _number_, selectMode: _'select' | 'start' | 'end' | 'preserve'_)** - Replaces a range of text with a new string.\n- **showPicker()** - Displays the browser picker for an input element (only works if the browser supports it for the input type).\n- **stepUp()** - Increments the value of a numeric input type by the value of the step attribute.\n- **stepDown()** - Decrements the value of a numeric input type by the value of the step attribute.\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. Pass an empty string to restore validity.\n\n### **Slots:**\n - **label** - The input's label. Alternatively, you can use the `label` attribute.\n- **prefix** - Used to prepend a presentational icon or similar element to the input.\n- **suffix** - Used to append a presentational icon or similar element to the input.\n- **clear-icon** - An icon to use in lieu of the default clear icon.\n- **show-password-icon** - An icon to use in lieu of the default show password icon.\n- **hide-password-icon** - An icon to use in lieu of the default hide password icon.\n- **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The input's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **base** - The component's base wrapper.\n- **input** - The internal `<input>` control.\n- **prefix** - The container that wraps the prefix.\n- **clear-button** - The clear button.\n- **password-toggle-button** - The password toggle button.\n- **suffix** - The container that wraps the suffix.",
@@ -606,6 +682,32 @@
         }
       ]
     },
+    {
+      "name": "syn-tag",
+      "description": "Tags are used as labels to organize things or to indicate a selection.\n---\n\n\n### **Events:**\n - **syn-remove** - Emitted when the remove button is activated.\n\n### **Slots:**\n - _default_ - The tag's content.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **content** - The tag's content.\n- **remove-button** - The tag's remove button, an `<syn-icon-button>`.\n- **remove-button__base** - The remove button's exported `base` part.",
+      "attributes": [
+        {
+          "name": "size",
+          "description": "The tag's size.",
+          "values": [
+            { "name": "small" },
+            { "name": "medium" },
+            { "name": "large" }
+          ]
+        },
+        {
+          "name": "removable",
+          "description": "Makes the tag removable and shows a remove button.",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://synergy.style/components/tag"
+        }
+      ]
+    },
     {
       "name": "syn-textarea",
       "description": "Textareas collect data from the user and allow multiple lines of text.\n---\n\n\n### **Events:**\n - **syn-blur** - Emitted when the control loses focus.\n- **syn-change** - Emitted when an alteration to the control's value is committed by the user.\n- **syn-focus** - Emitted when the control gains focus.\n- **syn-input** - Emitted when the control 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 - **focus(options: _FocusOptions_)** - Sets focus on the textarea.\n- **blur()** - Removes focus from the textarea.\n- **select()** - Selects all the text in the textarea.\n- **scrollPosition(position: _{ top?: number; left?: number }_): _{ top: number; left: number } | undefined_** - Gets or sets the textarea's scroll position.\n- **setSelectionRange(selectionStart: _number_, selectionEnd: _number_, selectionDirection: _'forward' | 'backward' | 'none'_)** - Sets the start and end positions of the text selection (0-based).\n- **setRangeText(replacement: _string_, start: _number_, end: _number_, selectMode: _'select' | 'start' | 'end' | 'preserve'_)** - Replaces a range of text with a new string.\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. Pass an empty string to restore validity.\n\n### **Slots:**\n - **label** - The textarea's label. Alternatively, you can use the `label` attribute.\n- **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The input's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **base** - The component's base wrapper.\n- **textarea** - The internal `<textarea>` control.",

package/dist/web-types.json

@@ -1,11 +1,40 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@synergy-design-system/components",
-  "version": "1.0.2",
+  "version": "1.2.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
       "elements": [
+        {
+          "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.",
+          "doc-url": "",
+          "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.",
+              "value": { "type": "string", "default": "''" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "One or more `<syn-button>` elements to display in the button group."
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "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.",
+                "value": { "type": "string" }
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "syn-button",
           "description": "Buttons represent actions that are available to the user.\n---\n\n\n### **Events:**\n - **syn-blur** - Emitted when the button loses focus.\n- **syn-focus** - Emitted when the button gains focus.\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 button.\n- **focus(options: _FocusOptions_)** - Sets focus on the button.\n- **blur()** - Removes focus from the button.\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. Pass an empty string to restore validity.\n\n### **Slots:**\n - _default_ - The button's label.\n- **prefix** - A presentational prefix icon or similar element.\n- **suffix** - A presentational suffix icon or similar element.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **prefix** - The container that wraps the prefix.\n- **label** - The button's label.\n- **suffix** - The container that wraps the suffix.\n- **caret** - The button's caret icon, an `<syn-icon>` element.\n- **spinner** - The spinner that shows when the button is in the loading state.",
@@ -255,35 +284,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.",
-          "doc-url": "",
-          "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.",
-              "value": { "type": "string", "default": "''" }
-            }
-          ],
-          "slots": [
-            {
-              "name": "",
-              "description": "One or more `<syn-button>` elements to display in the button group."
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "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.",
-                "value": { "type": "string" }
-              }
-            ],
-            "events": []
-          }
-        },
         {
           "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\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.",
@@ -496,6 +496,147 @@
             ]
           }
         },
+        {
+          "name": "syn-icon-button",
+          "description": "Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.\n---\n\n\n### **Events:**\n - **syn-blur** - Emitted when the icon button loses focus.\n- **syn-focus** - Emitted when the icon button gains focus.\n\n### **Methods:**\n - **click()** - Simulates a click on the icon button.\n- **focus(options: _FocusOptions_)** - Sets focus on the icon button.\n- **blur()** - Removes focus from the icon button.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "name",
+              "description": "The name of the icon to draw. Available names depend on the icon library being used.",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "library",
+              "description": "The name of a registered custom icon library.",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "src",
+              "description": "An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and\ncan result in XSS attacks.",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "href",
+              "description": "When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`.",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "target",
+              "description": "Tells the browser where to open the link. Only used when `href` is set.",
+              "value": {
+                "type": "'_blank' | '_parent' | '_self' | '_top' | undefined"
+              }
+            },
+            {
+              "name": "download",
+              "description": "Tells the browser to download the linked file as this filename. Only used when `href` is set.",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "label",
+              "description": "A description that gets read by assistive devices. For optimal accessibility, you should always include a label\nthat describes what the icon button does.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "size",
+              "description": "The icon button's size.",
+              "value": {
+                "type": "'small' | 'medium' | 'large' | 'inherit'",
+                "default": "'inherit'"
+              }
+            },
+            {
+              "name": "color",
+              "description": "The color of the icon button.\nThe default \"currentColor\" makes it possible to easily style the icon button from outside without any CSS variables.",
+              "value": {
+                "type": "'currentColor' | 'primary' | 'neutral'",
+                "default": "'currentColor'"
+              }
+            },
+            {
+              "name": "disabled",
+              "description": "Disables the button.",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "events": [
+            {
+              "name": "syn-blur",
+              "description": "Emitted when the icon button loses focus."
+            },
+            {
+              "name": "syn-focus",
+              "description": "Emitted when the icon button gains focus."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "name",
+                "description": "The name of the icon to draw. Available names depend on the icon library being used.",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "library",
+                "description": "The name of a registered custom icon library.",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "src",
+                "description": "An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and\ncan result in XSS attacks.",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "href",
+                "description": "When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`.",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "target",
+                "description": "Tells the browser where to open the link. Only used when `href` is set.",
+                "value": {
+                  "type": "'_blank' | '_parent' | '_self' | '_top' | undefined"
+                }
+              },
+              {
+                "name": "download",
+                "description": "Tells the browser to download the linked file as this filename. Only used when `href` is set.",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "label",
+                "description": "A description that gets read by assistive devices. For optimal accessibility, you should always include a label\nthat describes what the icon button does.",
+                "value": { "type": "string" }
+              },
+              {
+                "name": "size",
+                "description": "The icon button's size.",
+                "value": { "type": "'small' | 'medium' | 'large' | 'inherit'" }
+              },
+              {
+                "name": "color",
+                "description": "The color of the icon button.\nThe default \"currentColor\" makes it possible to easily style the icon button from outside without any CSS variables.",
+                "value": { "type": "'currentColor' | 'primary' | 'neutral'" }
+              },
+              {
+                "name": "disabled",
+                "description": "Disables the button.",
+                "value": { "type": "boolean" }
+              }
+            ],
+            "events": [
+              {
+                "name": "syn-blur",
+                "description": "Emitted when the icon button loses focus."
+              },
+              {
+                "name": "syn-focus",
+                "description": "Emitted when the icon button gains focus."
+              }
+            ]
+          }
+        },
         {
           "name": "syn-input",
           "description": "Inputs collect data from the user.\n---\n\n\n### **Events:**\n - **syn-blur** - Emitted when the control loses focus.\n- **syn-change** - Emitted when an alteration to the control's value is committed by the user.\n- **syn-clear** - Emitted when the clear button is activated.\n- **syn-focus** - Emitted when the control gains focus.\n- **syn-input** - Emitted when the control 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 - **focus(options: _FocusOptions_)** - Sets focus on the input.\n- **blur()** - Removes focus from the input.\n- **select()** - Selects all the text in the input.\n- **setSelectionRange(selectionStart: _number_, selectionEnd: _number_, selectionDirection: _'forward' | 'backward' | 'none'_)** - Sets the start and end positions of the text selection (0-based).\n- **setRangeText(replacement: _string_, start: _number_, end: _number_, selectMode: _'select' | 'start' | 'end' | 'preserve'_)** - Replaces a range of text with a new string.\n- **showPicker()** - Displays the browser picker for an input element (only works if the browser supports it for the input type).\n- **stepUp()** - Increments the value of a numeric input type by the value of the step attribute.\n- **stepDown()** - Decrements the value of a numeric input type by the value of the step attribute.\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. Pass an empty string to restore validity.\n\n### **Slots:**\n - **label** - The input's label. Alternatively, you can use the `label` attribute.\n- **prefix** - Used to prepend a presentational icon or similar element to the input.\n- **suffix** - Used to append a presentational icon or similar element to the input.\n- **clear-icon** - An icon to use in lieu of the default clear icon.\n- **show-password-icon** - An icon to use in lieu of the default show password icon.\n- **hide-password-icon** - An icon to use in lieu of the default hide password icon.\n- **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The input's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **base** - The component's base wrapper.\n- **input** - The internal `<input>` control.\n- **prefix** - The container that wraps the prefix.\n- **clear-button** - The clear button.\n- **password-toggle-button** - The password toggle button.\n- **suffix** - The container that wraps the suffix.",
@@ -1295,6 +1436,53 @@
             ]
           }
         },
+        {
+          "name": "syn-tag",
+          "description": "Tags are used as labels to organize things or to indicate a selection.\n---\n\n\n### **Events:**\n - **syn-remove** - Emitted when the remove button is activated.\n\n### **Slots:**\n - _default_ - The tag's content.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **content** - The tag's content.\n- **remove-button** - The tag's remove button, an `<syn-icon-button>`.\n- **remove-button__base** - The remove button's exported `base` part.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "size",
+              "description": "The tag's size.",
+              "value": {
+                "type": "'small' | 'medium' | 'large'",
+                "default": "'medium'"
+              }
+            },
+            {
+              "name": "removable",
+              "description": "Makes the tag removable and shows a remove button.",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "slots": [{ "name": "", "description": "The tag's content." }],
+          "events": [
+            {
+              "name": "syn-remove",
+              "description": "Emitted when the remove button is activated."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "size",
+                "description": "The tag's size.",
+                "value": { "type": "'small' | 'medium' | 'large'" }
+              },
+              {
+                "name": "removable",
+                "description": "Makes the tag removable and shows a remove button.",
+                "value": { "type": "boolean" }
+              }
+            ],
+            "events": [
+              {
+                "name": "syn-remove",
+                "description": "Emitted when the remove button is activated."
+              }
+            ]
+          }
+        },
         {
           "name": "syn-textarea",
           "description": "Textareas collect data from the user and allow multiple lines of text.\n---\n\n\n### **Events:**\n - **syn-blur** - Emitted when the control loses focus.\n- **syn-change** - Emitted when an alteration to the control's value is committed by the user.\n- **syn-focus** - Emitted when the control gains focus.\n- **syn-input** - Emitted when the control 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 - **focus(options: _FocusOptions_)** - Sets focus on the textarea.\n- **blur()** - Removes focus from the textarea.\n- **select()** - Selects all the text in the textarea.\n- **scrollPosition(position: _{ top?: number; left?: number }_): _{ top: number; left: number } | undefined_** - Gets or sets the textarea's scroll position.\n- **setSelectionRange(selectionStart: _number_, selectionEnd: _number_, selectionDirection: _'forward' | 'backward' | 'none'_)** - Sets the start and end positions of the text selection (0-based).\n- **setRangeText(replacement: _string_, start: _number_, end: _number_, selectMode: _'select' | 'start' | 'end' | 'preserve'_)** - Replaces a range of text with a new string.\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. Pass an empty string to restore validity.\n\n### **Slots:**\n - **label** - The textarea's label. Alternatively, you can use the `label` attribute.\n- **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The input's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **base** - The component's base wrapper.\n- **textarea** - The internal `<textarea>` control.",