@synergy-design-system/components 2.4.3 → 2.6.0

package/dist/utilities/icon-library.js

@@ -2,11 +2,11 @@ import "../chunks/chunk.NKIYFJN2.js";
 import {
   registerIconLibrary,
   unregisterIconLibrary
-} from "../chunks/chunk.AV56MW4Q.js";
-import "../chunks/chunk.SDQC32B3.js";
+} from "../chunks/chunk.543GQUFN.js";
 import "../chunks/chunk.YTEJW7IF.js";
+import "../chunks/chunk.AINKZEUX.js";
 import "../chunks/chunk.234ERFCE.js";
-import "../chunks/chunk.QNDC5KWA.js";
+import "../chunks/chunk.HLQ75E45.js";
 export {
   registerIconLibrary,
   unregisterIconLibrary

package/dist/utilities/localize.d.ts

@@ -12,9 +12,15 @@ export { registerTranslation } from '@shoelace-style/localize';
 export interface Translation extends DefaultTranslation {
     closeMenu: string;
     danger: string;
+    fileButtonText: string;
+    fileButtonTextMultiple: string;
+    fileDragDrop: string;
     menu: string;
     notification: string;
+    numFilesSelected: (num: number) => string;
     openMenu: string;
+    rangeMax: string;
+    rangeMin: string;
     sideNav: string;
     success: string;
     warning: string;

package/dist/utilities/localize.js

@@ -1,9 +1,9 @@
 import {
   LocalizeController,
   registerTranslation
-} from "../chunks/chunk.E3KW3KQM.js";
-import "../chunks/chunk.QZNPL6WK.js";
-import "../chunks/chunk.QNDC5KWA.js";
+} from "../chunks/chunk.QQ3HY3YJ.js";
+import "../chunks/chunk.27HWF7JY.js";
+import "../chunks/chunk.HLQ75E45.js";
 export {
   LocalizeController,
   registerTranslation

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

@@ -557,6 +557,97 @@
         }
       ]
     },
+    {
+      "name": "syn-file",
+      "description": "File controls allow selecting an arbitrary number of files for uploading.\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-error** - Emitted when multiple files are selected via drag and drop, without the `multiple` property being set.\n- **syn-focus** - Emitted when the control gains focus.\n- **syn-input** - Emitted when the control receives input.\n\n### **Methods:**\n - **checkValidity()** - Checks for validity but does not show a validation message.\nReturns `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 button or droparea.\n- **blur()** - Removes focus from the button or droparea.\n\n### **Slots:**\n - **label** - The file control's label. Alternatively, you can use the `label` attribute.\n- **help-text** - Text that describes how to use the file control. Alternatively, you can use the `help-text` attribute.\n- **droparea-icon** - Optional droparea icon to use instead of the default. Works best with `<syn-icon>`.\n- **trigger** - Optional content to be used as trigger instead of the default content. Opening the file dialog on click and as well as drag and drop will work for this content. Following attributes will no longer work: *label*, *droparea*, *help-text*, *size*, *hide-value*. Also if using the disabled attribute, the disabled styling will not be applied and must be taken care of yourself.\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- **button-wrapper** - The wrapper around the button and text value.\n- **button** - The syn-button acting as a file input.\n- **button__base** - The syn-button's exported `base` part.\n- **value** - The chosen files or placeholder text for the file input.\n- **droparea** - The element wrapping the drop zone.\n- **droparea-background** - The background of the drop zone.\n- **droparea-icon** - The container that wraps the icon for the drop zone.\n- **droparea-value** - The text for the drop zone.\n- **trigger** - The container that wraps the trigger.",
+      "attributes": [
+        {
+          "name": "files",
+          "description": "The selected files as a FileList object containing a list of File objects.\nThe FileList behaves like an array, so you can get the number of selected files\nvia its length property.\n[see MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#getting_information_on_selected_files)",
+          "values": []
+        },
+        {
+          "name": "name",
+          "description": "The name of the file control, submitted as a name/value pair with form data.",
+          "values": []
+        },
+        {
+          "name": "value",
+          "description": "The value of the file control contains a string that represents the path of the selected file.\nIf multiple files are selected, the value represents the first file in the list.\nIf no file is selected, the value is an empty string.\nBeware that the only valid value when setting a file control is an empty string!\n[see MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#value)",
+          "values": []
+        },
+        {
+          "name": "size",
+          "description": "The file control's size.",
+          "values": [
+            { "name": "small" },
+            { "name": "medium" },
+            { "name": "large" }
+          ]
+        },
+        {
+          "name": "label",
+          "description": "The file control's label. If you need to display HTML, use the `label` slot instead.",
+          "values": []
+        },
+        {
+          "name": "help-text",
+          "description": "The file control's help text.\nIf you need to display HTML, use the `help-text` slot instead.",
+          "values": []
+        },
+        {
+          "name": "disabled",
+          "description": "Disables the file control.",
+          "values": []
+        },
+        {
+          "name": "droparea",
+          "description": "Draw the file control as a drop area",
+          "values": []
+        },
+        {
+          "name": "accept",
+          "description": "Comma separated list of supported file types\n[see MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept)",
+          "values": []
+        },
+        {
+          "name": "capture",
+          "description": "Specifies the types of files that the server accepts.\nCan be set either to user or environment.\nWorks only when not using a droparea!\n[see MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/capture)",
+          "values": [{ "name": "user" }, { "name": "environment" }]
+        },
+        {
+          "name": "multiple",
+          "description": "Indicates whether the user can select more than one file.\n[see MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#multiple)",
+          "values": []
+        },
+        {
+          "name": "webkitdirectory",
+          "description": "Indicates that the file control should let the user select directories instead of files.\nWhen a directory is selected, the directory and its entire hierarchy of contents are included\nin the set of selected items.\nNote: This is a non-standard attribute but is supported in the major browsers.\n[see MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/webkitdirectory)",
+          "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 and associate it\nwith the form that has this `id`. The form must be in the same document\nor shadow root for this to work.",
+          "values": []
+        },
+        {
+          "name": "required",
+          "description": "Makes the input a required field.",
+          "values": []
+        },
+        {
+          "name": "hide-value",
+          "description": "Suppress the value from being displayed in the file control",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://synergy.style/components/file"
+        }
+      ]
+    },
     {
       "name": "syn-header",
       "description": "The <syn-header /> element provides a generic application header\nthat can be used to add applications name, toolbar and primary navigation.\n---\n\n\n### **Events:**\n - **syn-burger-menu-closed** - Emitted when the burger menu is toggled to closed\n- **syn-burger-menu-hidden** - Emitted when the burger menu is toggled to hidden\n- **syn-burger-menu-open** - Emitted when the burger menu is toggled to open\n\n### **Methods:**\n - **connectSideNavigation(sideNav: _SynSideNav | null_)** - Connect a `syn-side-nav` to add automatic interaction of the header with the side navigation\nlike showing the burger menu icon and open / close handling.\n\nIf no side navigation is connected, the header will use the first `syn-side-nav` element it\nfinds.\n\n### **Slots:**\n - **label** - The label for the header\n- **logo** - The logo that should be displayed. Will fall back to the SICK logo if not provided\n- **meta-navigation** - The meta-navigation is used to add various application toolbar icons Best used with `<syn-icon-button />` and `<syn-drop-down />`\n- **navigation** - This slot can be used to add an optional horizontal navigation\n- **open-burger-menu-icon** - An icon to use in lieu of the default burger-menu=open state. The default close icon is a 'x'.\n- **closed-burger-menu-icon** - An icon to use in lieu of the default burger-menu=closed state. The default open icon is a burger menu.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper\n- **content** - The wrapper most content items reside\n- **logo** - The wrapper the application logo resides in\n- **label** - The element wrapping the application name\n- **meta-navigation** - The Item wrapping the optional application menu\n- **navigation** - The wrapper that is holding the optional top navigation section\n- **burger-menu-toggle-button** - The button that toggles the burger menu",
@@ -1357,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.4.3",
+  "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.5.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.5.0"
+    "@synergy-design-system/tokens": "^2.7.0"
   },
   "scripts": {
     "build": "node scripts/build.js",