@synergy-design-system/components 1.0.2 → 1.1.0

package/dist/components/radio-group/radio-group.component.js

@@ -1,14 +1,14 @@
 import {
   SynRadioGroup
-} from "../../chunks/chunk.3NY33MCF.js";
+} from "../../chunks/chunk.BBI3HWRM.js";
 import "../../chunks/chunk.4I6M5V6O.js";
 import "../../chunks/chunk.F4MRQLNL.js";
 import "../../chunks/chunk.JHXCBOUD.js";
 import "../../chunks/chunk.XGXFE6IF.js";
 import "../../chunks/chunk.P2LNG2PZ.js";
 import "../../chunks/chunk.VZ7S7YYN.js";
-import "../../chunks/chunk.5SKPG6DM.js";
-import "../../chunks/chunk.MUOAKBT3.js";
+import "../../chunks/chunk.EEG4VWBU.js";
+import "../../chunks/chunk.S424QLI7.js";
 import "../../chunks/chunk.4ZURABYO.js";
 import "../../chunks/chunk.O7USYXBT.js";
 import "../../chunks/chunk.DJOAQ4JU.js";

package/dist/components/radio-group/radio-group.js

@@ -1,15 +1,15 @@
 import {
   radio_group_default
-} from "../../chunks/chunk.U2NJG6GX.js";
-import "../../chunks/chunk.3NY33MCF.js";
+} from "../../chunks/chunk.5D2VBXTP.js";
+import "../../chunks/chunk.BBI3HWRM.js";
 import "../../chunks/chunk.4I6M5V6O.js";
 import "../../chunks/chunk.F4MRQLNL.js";
 import "../../chunks/chunk.JHXCBOUD.js";
 import "../../chunks/chunk.XGXFE6IF.js";
 import "../../chunks/chunk.P2LNG2PZ.js";
 import "../../chunks/chunk.VZ7S7YYN.js";
-import "../../chunks/chunk.5SKPG6DM.js";
-import "../../chunks/chunk.MUOAKBT3.js";
+import "../../chunks/chunk.EEG4VWBU.js";
+import "../../chunks/chunk.S424QLI7.js";
 import "../../chunks/chunk.4ZURABYO.js";
 import "../../chunks/chunk.O7USYXBT.js";
 import "../../chunks/chunk.DJOAQ4JU.js";

package/dist/components/spinner/spinner.component.js

@@ -1,10 +1,10 @@
 import {
   SynSpinner
-} from "../../chunks/chunk.IFPM2NRM.js";
+} from "../../chunks/chunk.EXMVZ32W.js";
 import "../../chunks/chunk.N2I6HVX3.js";
 import "../../chunks/chunk.R6VNLE6N.js";
 import "../../chunks/chunk.A3SKDWCT.js";
-import "../../chunks/chunk.MUOAKBT3.js";
+import "../../chunks/chunk.S424QLI7.js";
 import "../../chunks/chunk.O7USYXBT.js";
 import "../../chunks/chunk.DJOAQ4JU.js";
 export {

package/dist/components/switch/switch.component.js

@@ -1,12 +1,12 @@
 import {
   SynSwitch
-} from "../../chunks/chunk.SUNIN43Y.js";
+} from "../../chunks/chunk.RAJNSJOZ.js";
 import "../../chunks/chunk.MNMITYTH.js";
 import "../../chunks/chunk.AFEABUNX.js";
 import "../../chunks/chunk.WFAJR3FN.js";
 import "../../chunks/chunk.P2LNG2PZ.js";
 import "../../chunks/chunk.VZ7S7YYN.js";
-import "../../chunks/chunk.MUOAKBT3.js";
+import "../../chunks/chunk.S424QLI7.js";
 import "../../chunks/chunk.O7USYXBT.js";
 import "../../chunks/chunk.DJOAQ4JU.js";
 export {

package/dist/components/switch/switch.js

@@ -1,13 +1,13 @@
 import {
   switch_default
-} from "../../chunks/chunk.D7KU5L75.js";
-import "../../chunks/chunk.SUNIN43Y.js";
+} from "../../chunks/chunk.ICDHGCRE.js";
+import "../../chunks/chunk.RAJNSJOZ.js";
 import "../../chunks/chunk.MNMITYTH.js";
 import "../../chunks/chunk.AFEABUNX.js";
 import "../../chunks/chunk.WFAJR3FN.js";
 import "../../chunks/chunk.P2LNG2PZ.js";
 import "../../chunks/chunk.VZ7S7YYN.js";
-import "../../chunks/chunk.MUOAKBT3.js";
+import "../../chunks/chunk.S424QLI7.js";
 import "../../chunks/chunk.O7USYXBT.js";
 import "../../chunks/chunk.DJOAQ4JU.js";
 export {

package/dist/components/textarea/textarea.component.js

@@ -1,6 +1,6 @@
 import {
   SynTextarea
-} from "../../chunks/chunk.W5GPJ6ZR.js";
+} from "../../chunks/chunk.43IE6Z7Q.js";
 import "../../chunks/chunk.23HTU3YE.js";
 import "../../chunks/chunk.YBIBWRKC.js";
 import "../../chunks/chunk.JHXCBOUD.js";
@@ -8,7 +8,7 @@ import "../../chunks/chunk.WFAJR3FN.js";
 import "../../chunks/chunk.XGXFE6IF.js";
 import "../../chunks/chunk.P2LNG2PZ.js";
 import "../../chunks/chunk.VZ7S7YYN.js";
-import "../../chunks/chunk.MUOAKBT3.js";
+import "../../chunks/chunk.S424QLI7.js";
 import "../../chunks/chunk.O7USYXBT.js";
 import "../../chunks/chunk.DJOAQ4JU.js";
 export {

package/dist/components/textarea/textarea.js

@@ -1,7 +1,7 @@
 import {
   textarea_default
-} from "../../chunks/chunk.FJGYV3Y3.js";
-import "../../chunks/chunk.W5GPJ6ZR.js";
+} from "../../chunks/chunk.OEII5257.js";
+import "../../chunks/chunk.43IE6Z7Q.js";
 import "../../chunks/chunk.23HTU3YE.js";
 import "../../chunks/chunk.YBIBWRKC.js";
 import "../../chunks/chunk.JHXCBOUD.js";
@@ -9,7 +9,7 @@ import "../../chunks/chunk.WFAJR3FN.js";
 import "../../chunks/chunk.XGXFE6IF.js";
 import "../../chunks/chunk.P2LNG2PZ.js";
 import "../../chunks/chunk.VZ7S7YYN.js";
-import "../../chunks/chunk.MUOAKBT3.js";
+import "../../chunks/chunk.S424QLI7.js";
 import "../../chunks/chunk.O7USYXBT.js";
 import "../../chunks/chunk.DJOAQ4JU.js";
 export {

package/dist/custom-elements.json

@@ -1385,6 +1385,319 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/icon-button/icon-button.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "SynIconButton",
+          "cssParts": [
+            {
+              "description": "The component's base wrapper.",
+              "name": "base"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "dependencies",
+              "type": {
+                "text": "object"
+              },
+              "static": true,
+              "default": "{ 'syn-icon': SynIcon }"
+            },
+            {
+              "kind": "field",
+              "name": "button",
+              "type": {
+                "text": "HTMLButtonElement | HTMLLinkElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "hasFocus",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The name of the icon to draw. Available names depend on the icon library being used.",
+              "attribute": "name"
+            },
+            {
+              "kind": "field",
+              "name": "library",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The name of a registered custom icon library.",
+              "attribute": "library"
+            },
+            {
+              "kind": "field",
+              "name": "src",
+              "type": {
+                "text": "string | undefined"
+              },
+              "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.",
+              "attribute": "src"
+            },
+            {
+              "kind": "field",
+              "name": "href",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`.",
+              "attribute": "href"
+            },
+            {
+              "kind": "field",
+              "name": "target",
+              "type": {
+                "text": "'_blank' | '_parent' | '_self' | '_top' | undefined"
+              },
+              "description": "Tells the browser where to open the link. Only used when `href` is set.",
+              "attribute": "target"
+            },
+            {
+              "kind": "field",
+              "name": "download",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Tells the browser to download the linked file as this filename. Only used when `href` is set.",
+              "attribute": "download"
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "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.",
+              "attribute": "label"
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "'small' | 'medium' | 'large' | 'inherit'"
+              },
+              "default": "'inherit'",
+              "description": "The icon button's size.",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "color",
+              "type": {
+                "text": "'currentColor' | 'primary' | 'neutral'"
+              },
+              "default": "'currentColor'",
+              "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.",
+              "attribute": "color",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables the button.",
+              "attribute": "disabled",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "handleBlur",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleFocus",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleClick",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "MouseEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "click",
+              "description": "Simulates a click on the icon button."
+            },
+            {
+              "kind": "method",
+              "name": "focus",
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  }
+                }
+              ],
+              "description": "Sets focus on the icon button."
+            },
+            {
+              "kind": "method",
+              "name": "blur",
+              "description": "Removes focus from the icon button."
+            }
+          ],
+          "events": [
+            {
+              "description": "Emitted when the icon button loses focus.",
+              "name": "syn-blur",
+              "reactName": "onSynBlur",
+              "eventName": "SynBlurEvent"
+            },
+            {
+              "description": "Emitted when the icon button gains focus.",
+              "name": "syn-focus",
+              "reactName": "onSynFocus",
+              "eventName": "SynFocusEvent"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "name",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The name of the icon to draw. Available names depend on the icon library being used.",
+              "fieldName": "name"
+            },
+            {
+              "name": "library",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The name of a registered custom icon library.",
+              "fieldName": "library"
+            },
+            {
+              "name": "src",
+              "type": {
+                "text": "string | undefined"
+              },
+              "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.",
+              "fieldName": "src"
+            },
+            {
+              "name": "href",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`.",
+              "fieldName": "href"
+            },
+            {
+              "name": "target",
+              "type": {
+                "text": "'_blank' | '_parent' | '_self' | '_top' | undefined"
+              },
+              "description": "Tells the browser where to open the link. Only used when `href` is set.",
+              "fieldName": "target"
+            },
+            {
+              "name": "download",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Tells the browser to download the linked file as this filename. Only used when `href` is set.",
+              "fieldName": "download"
+            },
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "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.",
+              "fieldName": "label"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "'small' | 'medium' | 'large' | 'inherit'"
+              },
+              "default": "'inherit'",
+              "description": "The icon button's size.",
+              "fieldName": "size"
+            },
+            {
+              "name": "color",
+              "type": {
+                "text": "'currentColor' | 'primary' | 'neutral'"
+              },
+              "default": "'currentColor'",
+              "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.",
+              "fieldName": "color"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables the button.",
+              "fieldName": "disabled"
+            }
+          ],
+          "superclass": {
+            "name": "SynergyElement",
+            "module": "/src/internal/synergy-element.js"
+          },
+          "summary": "Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.",
+          "tagNameWithoutPrefix": "icon-button",
+          "tagName": "syn-icon-button",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.\n * @documentation https://synergy.style/components/icon-button\n * @status stable\n * @since 2.0\n *\n * @dependency syn-icon\n *\n * @event syn-blur - Emitted when the icon button loses focus.\n * @event syn-focus - Emitted when the icon button gains focus.\n *\n * @csspart base - The component's base wrapper.\n */",
+          "documentation": "https://synergy.style/components/icon-button",
+          "status": "stable",
+          "since": "2.0",
+          "dependencies": [
+            "syn-icon"
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "SynIconButton",
+            "module": "components/icon-button/icon-button.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/input/input.js",
@@ -4451,7 +4764,7 @@
   "package": {
     "name": "@synergy-design-system/components",
     "description": "",
-    "version": "1.0.2",
+    "version": "1.1.0",
     "author": {
       "name": "SICK Global UX Foundation",
       "url": "https://www.sick.com"

package/dist/synergy.d.ts

@@ -1,6 +1,7 @@
 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';

package/dist/synergy.js

@@ -1,3 +1,6 @@
+import {
+  textarea_default
+} from "./chunks/chunk.OEII5257.js";
 import {
   getFormControls,
   serialize
@@ -5,64 +8,67 @@ import {
 import "./chunks/chunk.NKIYFJN2.js";
 import {
   switch_default
-} from "./chunks/chunk.D7KU5L75.js";
-import {
-  textarea_default
-} from "./chunks/chunk.FJGYV3Y3.js";
-import "./chunks/chunk.W5GPJ6ZR.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";
+} from "./chunks/chunk.ICDHGCRE.js";
+import "./chunks/chunk.RAJNSJOZ.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.43IE6Z7Q.js";
+import "./chunks/chunk.23HTU3YE.js";
+import "./chunks/chunk.YBIBWRKC.js";
 import {
   radio_button_default
-} from "./chunks/chunk.WVYTLFNV.js";
-import "./chunks/chunk.MB5S3IM7.js";
+} from "./chunks/chunk.JSGAT7FF.js";
+import "./chunks/chunk.7ODKEYK3.js";
 import "./chunks/chunk.OVVMSN4D.js";
-import "./chunks/chunk.3NY33MCF.js";
+import {
+  radio_group_default
+} from "./chunks/chunk.5D2VBXTP.js";
+import "./chunks/chunk.BBI3HWRM.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.7LGURT5X.js";
+import "./chunks/chunk.5DHO22JT.js";
 import "./chunks/chunk.OXUFFH57.js";
 import "./chunks/chunk.JHXCBOUD.js";
 import "./chunks/chunk.W46CFM2R.js";
+import {
+  radio_default
+} from "./chunks/chunk.V3UXMJRA.js";
+import "./chunks/chunk.P3EPUBB3.js";
+import "./chunks/chunk.JBYBQ5TQ.js";
+import "./chunks/chunk.V6VND4OF.js";
+import {
+  icon_default
+} from "./chunks/chunk.UU5CELZK.js";
+import {
+  icon_button_default
+} from "./chunks/chunk.6WUVZQ3H.js";
+import "./chunks/chunk.A7ZVGGIT.js";
+import "./chunks/chunk.2FN5DTS6.js";
+import "./chunks/chunk.OJF7KL44.js";
 import {
   button_group_default
-} from "./chunks/chunk.DUAFHNTR.js";
+} from "./chunks/chunk.CIYOYCTY.js";
 import {
   checkbox_default
-} from "./chunks/chunk.7MTLFTYG.js";
-import "./chunks/chunk.XVJVR3MD.js";
+} from "./chunks/chunk.QP2S2MDN.js";
+import "./chunks/chunk.OVS5OKTW.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.L6QCO373.js";
+import "./chunks/chunk.JEEPLCYY.js";
+import "./chunks/chunk.EXMVZ32W.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.7NADL2IT.js";
 import "./chunks/chunk.VZ7S7YYN.js";
 import {
   registerIconLibrary,
@@ -78,8 +84,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.EEG4VWBU.js";
+import "./chunks/chunk.S424QLI7.js";
 import "./chunks/chunk.4ZURABYO.js";
 import "./chunks/chunk.O7USYXBT.js";
 import "./chunks/chunk.DJOAQ4JU.js";
@@ -88,6 +94,7 @@ 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,