@synergy-design-system/components 1.0.0-main.12 → 1.0.0-main.13

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.0-main.12",
+  "version": "1.0.0-main.13",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -326,6 +326,147 @@
             ]
           }
         },
+        {
+          "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.",
+          "doc-url": "",
+          "attributes": [
+            { "name": "title", "value": { "type": "string", "default": "''" } },
+            {
+              "name": "name",
+              "description": "The name of the checkbox, submitted as a name/value pair with form data.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "value",
+              "description": "The current value of the checkbox, submitted as a name/value pair with form data.",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "size",
+              "description": "The checkbox's size.",
+              "value": {
+                "type": "'small' | 'medium' | 'large'",
+                "default": "'medium'"
+              }
+            },
+            {
+              "name": "disabled",
+              "description": "Disables the checkbox.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "checked",
+              "description": "Draws the checkbox in a checked state.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "indeterminate",
+              "description": "Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a \"select\nall/none\" behavior when associated checkboxes have a mix of checked and unchecked states.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "form",
+              "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "required",
+              "description": "Makes the checkbox a required field.",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "slots": [{ "name": "", "description": "The checkbox's label." }],
+          "events": [
+            {
+              "name": "syn-blur",
+              "description": "Emitted when the checkbox loses focus."
+            },
+            {
+              "name": "syn-change",
+              "description": "Emitted when the checked state changes."
+            },
+            {
+              "name": "syn-focus",
+              "description": "Emitted when the checkbox gains focus."
+            },
+            {
+              "name": "syn-input",
+              "description": "Emitted when the checkbox receives input."
+            },
+            {
+              "name": "syn-invalid",
+              "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied."
+            }
+          ],
+          "js": {
+            "properties": [
+              { "name": "title", "value": { "type": "string" } },
+              {
+                "name": "name",
+                "description": "The name of the checkbox, submitted as a name/value pair with form data.",
+                "value": { "type": "string" }
+              },
+              {
+                "name": "value",
+                "description": "The current value of the checkbox, submitted as a name/value pair with form data.",
+                "value": { "type": "string" }
+              },
+              {
+                "name": "size",
+                "description": "The checkbox's size.",
+                "value": { "type": "'small' | 'medium' | 'large'" }
+              },
+              {
+                "name": "disabled",
+                "description": "Disables the checkbox.",
+                "value": { "type": "boolean" }
+              },
+              {
+                "name": "checked",
+                "description": "Draws the checkbox in a checked state.",
+                "value": { "type": "boolean" }
+              },
+              {
+                "name": "indeterminate",
+                "description": "Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a \"select\nall/none\" behavior when associated checkboxes have a mix of checked and unchecked states.",
+                "value": { "type": "boolean" }
+              },
+              {
+                "name": "form",
+                "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
+                "value": { "type": "string" }
+              },
+              {
+                "name": "required",
+                "description": "Makes the checkbox a required field.",
+                "value": { "type": "boolean" }
+              }
+            ],
+            "events": [
+              {
+                "name": "syn-blur",
+                "description": "Emitted when the checkbox loses focus."
+              },
+              {
+                "name": "syn-change",
+                "description": "Emitted when the checked state changes."
+              },
+              {
+                "name": "syn-focus",
+                "description": "Emitted when the checkbox gains focus."
+              },
+              {
+                "name": "syn-input",
+                "description": "Emitted when the checkbox receives input."
+              },
+              {
+                "name": "syn-invalid",
+                "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied."
+              }
+            ]
+          }
+        },
         {
           "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.0-main.12",
+  "version": "1.0.0-main.13",
   "description": "",
   "repository": {
     "type": "git",
@@ -55,6 +55,7 @@
     "@web/test-runner-commands": "^0.8.1",
     "@web/test-runner-playwright": "^0.10.1",
     "chalk": "^5.3.0",
+    "change-case": "^4.1.2",
     "command-line-args": "^5.2.1",
     "comment-parser": "^1.4.0",
     "custom-element-jet-brains-integration": "^1.3.1",
@@ -73,7 +74,6 @@
     "jsdom": "^22.1.0",
     "ng-packagr": "^17.0.0",
     "ora": "^7.0.1",
-    "pascal-case": "^4.0.0",
     "prettier": "^3.0.3",
     "remark-parse": "^11.0.0",
     "semantic-release": "^19.0.5",
@@ -87,7 +87,7 @@
     "vendorism": "github:mariohamann/vendorism",
     "@synergy-design-system/eslint-config-syn": "0.1.0",
     "@synergy-design-system/stylelint-config-syn": "0.1.0",
-    "@synergy-design-system/tokens": "1.0.0-main.9"
+    "@synergy-design-system/tokens": "1.0.0-main.11"
   },
   "release": {
     "branches": [