@synergy-design-system/components 1.0.2 → 1.1.0

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

@@ -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.",

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@synergy-design-system/components",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -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.",

package/package.json

@@ -4,7 +4,7 @@
     "url": "https://www.sick.com"
   },
   "name": "@synergy-design-system/components",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "",
   "repository": {
     "type": "git",
@@ -42,7 +42,7 @@
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.8.4",
     "@lit/react": "^1.0.0",
-    "@open-wc/testing": "^3.2.0",
+    "@open-wc/testing": "^4.0.0",
     "@playwright/test": "^1.39.0",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/exec": "^6.0.3",
@@ -89,7 +89,7 @@
     "vendorism": "github:mariohamann/vendorism",
     "vue-tsc": "^1.8.24",
     "@synergy-design-system/eslint-config-syn": "0.1.0",
-    "@synergy-design-system/tokens": "1.0.2",
+    "@synergy-design-system/tokens": "1.1.0",
     "@synergy-design-system/stylelint-config-syn": "0.1.0"
   },
   "release": {
@@ -141,7 +141,14 @@
           "successComment": false
         }
       ]
-    ]
+    ],
+    "monorepo": {
+      "dependencies": [
+        "packages/vue",
+        "packages/react",
+        "packages/angular"
+      ]
+    }
   },
   "dependencies": {
     "@floating-ui/dom": "^1.5.3",
@@ -151,16 +158,8 @@
     "lit": "^3.0.0"
   },
   "web-types": "./dist/web-types.json",
-  "meta": {
-    "checksums": {
-      "angular": "432be0e964528715800cd77deee1cf7b6c95fa92",
-      "react": "f5c1cbc6d4366f0189d8f4804cbb41e38e2985b0",
-      "vue": "b8394e739b437d8f4cfe8d8480d761cf58856b49"
-    }
-  },
   "scripts": {
     "build": "node scripts/build.js",
-    "create-checksums": "node -e 'import(\"./scripts/jobs/createChecksums.js\").then( loadedModule => loadedModule.runCreateChecksums() )'",
     "test": "web-test-runner --group default",
     "vendor": "node scripts/vendorism.js",
     "vendor.get": "node scripts/vendorism.js -g",
@@ -172,6 +171,7 @@
     "release": "semantic-release  --tagFormat 'components/${version}' -e semantic-release-monorepo",
     "release.angular": "git add ../angular && git commit -m \"chore(release/angular) via component release [skip actions]\"",
     "release.react": "git add ../react && git commit -m \"chore(release/react) via component release [skip actions]\"",
-    "release.vue": "git add ../vue && git commit -m \"chore(release/vue) via component release [skip actions]\""
+    "release.vue": "git add ../vue && git commit -m \"chore(release/vue) via component release [skip actions]\"",
+    "release.dry": "semantic-release --dry-run --tagFormat 'components/${version}' -e semantic-release-monorepo"
   }
 }