@synergy-design-system/components 2.5.0 → 2.6.0

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

@@ -29,29 +29,6 @@
         }
       ]
     },
-    {
-      "name": "syn-badge",
-      "description": "Badges are used to draw attention and display statuses or counts.\n---\n\n\n### **Slots:**\n - _default_ - The badge's content.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
-      "attributes": [
-        {
-          "name": "variant",
-          "description": "The badge's theme variant.",
-          "values": [
-            { "name": "primary" },
-            { "name": "success" },
-            { "name": "neutral" },
-            { "name": "warning" },
-            { "name": "danger" }
-          ]
-        }
-      ],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://synergy.style/components/badge"
-        }
-      ]
-    },
     {
       "name": "syn-alert",
       "description": "Alerts are used to display important messages inline or as toast notifications.\n---\n\n\n### **Events:**\n - **syn-show** - Emitted when the alert opens.\n- **syn-after-show** - Emitted after the alert opens and all animations are complete.\n- **syn-hide** - Emitted when the alert closes.\n- **syn-after-hide** - Emitted after the alert closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the alert.\n- **hide()** - Hides the alert\n- **toast()** - Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when\ndismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by\ncalling this method again. The returned promise will resolve after the alert is hidden.\n\n### **Slots:**\n - _default_ - The alert's main content.\n- **icon** - An icon to show in the alert. Works best with `<syn-icon>`.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **icon** - The container that wraps the optional icon.\n- **message** - The container that wraps the alert's main content.\n- **close-button** - The close button, an `<syn-icon-button>`.\n- **close-button__base** - The close button's exported `base` part.",
@@ -90,6 +67,29 @@
         }
       ]
     },
+    {
+      "name": "syn-badge",
+      "description": "Badges are used to draw attention and display statuses or counts.\n---\n\n\n### **Slots:**\n - _default_ - The badge's content.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+      "attributes": [
+        {
+          "name": "variant",
+          "description": "The badge's theme variant.",
+          "values": [
+            { "name": "primary" },
+            { "name": "success" },
+            { "name": "neutral" },
+            { "name": "warning" },
+            { "name": "danger" }
+          ]
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://synergy.style/components/badge"
+        }
+      ]
+    },
     {
       "name": "syn-breadcrumb",
       "description": "Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.\n---\n\n\n### **Slots:**\n - _default_ - One or more breadcrumb items to display.\n- **separator** - The separator to use between breadcrumb items. Works best with `<syn-icon>`.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
@@ -1448,6 +1448,98 @@
         }
       ]
     },
+    {
+      "name": "syn-range",
+      "description": "Ranges allow the user to select values within a given range using one or two thumbs.\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- **syn-move** - Emitted when the user moves a thumb, either via touch or keyboard. Use `Event.preventDefault()` to prevent movement.\n\n### **Methods:**\n - **checkValidity()** - Checks for validity but does not show a validation message.\nReturns `true` when valid and `false` when invalid.\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- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n\n### **Slots:**\n - **label** - The range's label. Alternatively, you can use the `label` attribute.\n- **prefix** - Used to prepend a presentational icon or similar element to the range.\n- **suffix** - Used to append a presentational icon or similar element to the range.\n- **help-text** - Text that describes how to use the range. Alternatively, you can use the `help-text` attribute.\n- **ticks** - Used to display tick marks at specific intervals along the range.\n\n### **CSS Properties:**\n - **--thumb-size** - The size of a thumb. _(default: undefined)_\n- **--thumb-hit-area-size** - The clickable area around the thumb. Per default this is set to 140% of the thumb size. Must be a scale css value (defaults to 1.4). _(default: undefined)_\n- **--track-hit-area-size** - The clickable area around the track (top and left). _(default: undefined)_\n- **--track-color-active** - Color of the track representing the current value. _(default: undefined)_\n- **--track-color-inactive** - Color of the track that represents the remaining value. _(default: undefined)_\n- **--track-height** - The height of the track. _(default: undefined)_\n- **--track-active-offset** - The point of origin of the active track, starting at the left side of the range. _(default: undefined)_\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-help-text** - The help text's wrapper.\n- **base** - The component's base wrapper.\n- **input-wrapper** - The container that wraps the input track and ticks.\n- **track-wrapper** - The wrapper for the track.\n- **track** - The inactive track.\n- **active-track** - The active track.\n- **prefix** - The container that wraps the prefix.\n- **suffix** - The container that wraps the suffix.\n- **ticks** - The container that wraps the tick marks.\n- **thumb** - The thumb(s) that the user can drag to change the range.",
+      "attributes": [
+        {
+          "name": "name",
+          "description": "The name of the range, submitted as a name/value pair with form data.",
+          "values": []
+        },
+        {
+          "name": "label",
+          "description": "The range's label. If you need to display HTML, use the `label` slot instead.",
+          "values": []
+        },
+        {
+          "name": "help-text",
+          "description": "The range's help text. If you need to display HTML, use the help-text slot instead.",
+          "values": []
+        },
+        {
+          "name": "disabled",
+          "description": "Disables the range.",
+          "values": []
+        },
+        {
+          "name": "min",
+          "description": "The minimum acceptable value of the range.",
+          "values": []
+        },
+        {
+          "name": "max",
+          "description": "The maximum acceptable value of the range.",
+          "values": []
+        },
+        {
+          "name": "step",
+          "description": "The interval at which the range will increase and decrease.",
+          "values": []
+        },
+        {
+          "name": "size",
+          "description": "The range's size.",
+          "values": [
+            { "name": "small" },
+            { "name": "medium" },
+            { "name": "large" }
+          ]
+        },
+        {
+          "name": "tooltip-placement",
+          "description": "The preferred placement of the range's tooltip. Use \"none\" to disable the tooltip",
+          "values": [
+            { "name": "top" },
+            { "name": "bottom" },
+            { "name": "none" }
+          ]
+        },
+        {
+          "name": "value",
+          "description": "The current values of the input (in ascending order) as a string of space separated values",
+          "values": []
+        },
+        {
+          "name": "form",
+          "description": "By default, form controls are associated with the nearest containing `<form>` element.\nThis attribute allows you to place the form control outside of a form\nand associate it with the form that has this `id`.\nThe form must be in the same document or shadow root for this to work.",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://synergy.style/components/range"
+        }
+      ]
+    },
+    {
+      "name": "syn-range-tick",
+      "description": "Ticks visually improve positioning on range sliders.\n---\n\n\n### **Slots:**\n - _default_ - The tick's label\n\n### **CSS Properties:**\n - **--tick-height** - The height of the tick marker. _(default: undefined)_\n- **--tick-label-top** - The top offset of the tick label. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **label** - The component's label.\n- **line** - The component's tick line.",
+      "attributes": [
+        {
+          "name": "subdivision",
+          "description": "Whether the tick should be shown as a subdivision.",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://synergy.style/components/range-tick"
+        }
+      ]
+    },
     {
       "name": "syn-select",
       "description": "Selects allow you to choose items from a menu of predefined options.\n---\n\n\n### **Events:**\n - **syn-change** - Emitted when the control's value changes.\n- **syn-clear** - Emitted when the control's value is cleared.\n- **syn-input** - Emitted when the control receives input.\n- **syn-focus** - Emitted when the control gains focus.\n- **syn-blur** - Emitted when the control loses focus.\n- **syn-show** - Emitted when the select's menu opens.\n- **syn-after-show** - Emitted after the select's menu opens and all animations are complete.\n- **syn-hide** - Emitted when the select's menu closes.\n- **syn-after-hide** - Emitted after the select's menu closes and all animations are complete.\n- **syn-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **show()** - Shows the listbox.\n- **hide()** - Hides the listbox.\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- **focus(options: _FocusOptions_)** - Sets focus on the control.\n- **blur()** - Removes focus from the control.\n\n### **Slots:**\n - _default_ - The listbox options. Must be `<syn-option>` elements. You can use `<syn-divider>` to group items visually.\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 combobox.\n- **clear-icon** - An icon to use in lieu of the default clear icon.\n- **expand-icon** - The icon to show when the control is expanded and collapsed. Rotates on open and close.\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 select's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **combobox** - The container the wraps the prefix, combobox, clear icon, and expand button.\n- **prefix** - The container that wraps the prefix slot.\n- **display-input** - The element that displays the selected option's label, an `<input>` element.\n- **listbox** - The listbox container where options are slotted.\n- **tags** - The container that houses option tags when `multiselect` is used.\n- **tag** - The individual tags that represent each multiselect option.\n- **tag__base** - The tag's base part.\n- **tag__content** - The tag's content part.\n- **tag__remove-button** - The tag's remove button.\n- **tag__remove-button__base** - The tag's remove button base part.\n- **clear-button** - The clear button.\n- **expand-icon** - The container that wraps the expand icon.",

package/package.json

@@ -4,7 +4,7 @@
     "url": "https://www.sick.com"
   },
   "name": "@synergy-design-system/components",
-  "version": "2.5.0",
+  "version": "2.6.0",
   "description": "",
   "repository": {
     "type": "git",
@@ -78,7 +78,7 @@
     "eslint-plugin-wc": "^2.1.0",
     "globby": "^14.0.1",
     "jsdom": "^24.0.0",
-    "ng-packagr": "^18.0.0",
+    "ng-packagr": "^18.1.0",
     "ora": "^8.0.1",
     "postcss": "^8.4.38",
     "postcss-header": "^3.0.3",
@@ -96,7 +96,7 @@
     "vendorism": "^3.0.0",
     "vue-tsc": "^2.0.14",
     "@synergy-design-system/eslint-config-syn": "0.1.0",
-    "@synergy-design-system/tokens": "2.6.0",
+    "@synergy-design-system/tokens": "2.7.0",
     "@synergy-design-system/stylelint-config-syn": "0.1.0"
   },
   "release": {
@@ -165,7 +165,7 @@
     "lit": "^3.1.3"
   },
   "peerDependencies": {
-    "@synergy-design-system/tokens": "^2.6.0"
+    "@synergy-design-system/tokens": "^2.7.0"
   },
   "scripts": {
     "build": "node scripts/build.js",