@synergy-design-system/components 3.4.1 → 3.6.0

package/dist/custom-elements.json

@@ -1895,15 +1895,6 @@
                 "text": "HTMLInputElement"
               }
             },
-            {
-              "kind": "field",
-              "name": "hasFocus",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "default": "false"
-            },
             {
               "kind": "field",
               "name": "title",
@@ -1955,6 +1946,17 @@
               "attribute": "disabled",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "readonly",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Sets the checkbox to a readonly state.",
+              "attribute": "readonly",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "checked",
@@ -2033,7 +2035,15 @@
             {
               "kind": "method",
               "name": "handleClick",
-              "privacy": "private"
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "MouseEvent"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
@@ -2205,6 +2215,15 @@
               "description": "Disables the checkbox.",
               "fieldName": "disabled"
             },
+            {
+              "name": "readonly",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Sets the checkbox to a readonly state.",
+              "fieldName": "readonly"
+            },
             {
               "name": "checked",
               "type": {
@@ -2667,6 +2686,17 @@
               "attribute": "disabled",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "readonly",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Sets the combobox to a readonly state.",
+              "attribute": "readonly",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "clearable",
@@ -2889,6 +2919,11 @@
               "name": "handleDocumentMouseDown",
               "privacy": "private"
             },
+            {
+              "kind": "method",
+              "name": "handleFormControlClick",
+              "privacy": "private"
+            },
             {
               "kind": "method",
               "name": "handleLabelClick",
@@ -3372,6 +3407,15 @@
               "description": "Disables the combobox control.",
               "fieldName": "disabled"
             },
+            {
+              "name": "readonly",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Sets the combobox to a readonly state.",
+              "fieldName": "readonly"
+            },
             {
               "name": "clearable",
               "type": {
@@ -5318,6 +5362,17 @@
               "attribute": "disabled",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "readonly",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Sets the file control to a readonly state.",
+              "attribute": "readonly",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "droparea",
@@ -5752,6 +5807,15 @@
               "description": "Disables the file control.",
               "fieldName": "disabled"
             },
+            {
+              "name": "readonly",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Sets the file control to a readonly state.",
+              "fieldName": "readonly"
+            },
             {
               "name": "droparea",
               "type": {
@@ -10389,6 +10453,17 @@
               "attribute": "disabled",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "readonly",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Sets the radio to a readonly state.",
+              "attribute": "readonly",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "handleBlur",
@@ -10458,6 +10533,15 @@
               "default": "false",
               "description": "Disables the radio.",
               "fieldName": "disabled"
+            },
+            {
+              "name": "readonly",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Sets the radio to a readonly state.",
+              "fieldName": "readonly"
             }
           ],
           "superclass": {
@@ -11361,6 +11445,17 @@
               "attribute": "disabled",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "readonly",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Sets the range to a readonly state.",
+              "attribute": "readonly",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "min",
@@ -11937,6 +12032,15 @@
               "description": "Disables the range.",
               "fieldName": "disabled"
             },
+            {
+              "name": "readonly",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Sets the range to a readonly state.",
+              "fieldName": "readonly"
+            },
             {
               "name": "min",
               "type": {
@@ -12594,6 +12698,17 @@
               "attribute": "disabled",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "readonly",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Sets the select to a readonly state.",
+              "attribute": "readonly",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "clearable",
@@ -12729,6 +12844,11 @@
               "name": "handleDocumentMouseDown",
               "privacy": "private"
             },
+            {
+              "kind": "method",
+              "name": "handleFormControlClick",
+              "privacy": "private"
+            },
             {
               "kind": "method",
               "name": "handleLabelClick",
@@ -13108,6 +13228,15 @@
               "description": "Disables the select control.",
               "fieldName": "disabled"
             },
+            {
+              "name": "readonly",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Sets the select to a readonly state.",
+              "fieldName": "readonly"
+            },
             {
               "name": "clearable",
               "type": {
@@ -13774,6 +13903,17 @@
               "attribute": "disabled",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "readonly",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Sets the switch to a readonly state.",
+              "attribute": "readonly",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "checked",
@@ -13864,7 +14004,15 @@
             {
               "kind": "method",
               "name": "handleClick",
-              "privacy": "private"
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "MouseEvent"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
@@ -14026,6 +14174,15 @@
               "description": "Disables the switch.",
               "fieldName": "disabled"
             },
+            {
+              "name": "readonly",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Sets the switch to a readonly state.",
+              "fieldName": "readonly"
+            },
             {
               "name": "checked",
               "type": {
@@ -15924,6 +16081,16 @@
                 "text": "SynPopup"
               }
             },
+            {
+              "kind": "field",
+              "name": "anchor",
+              "type": {
+                "text": "Element | string | VirtualElement | undefined"
+              },
+              "privacy": "private",
+              "default": "undefined",
+              "description": "The element the tooltip will be anchored to. If the anchor lives outside of the tooltip, you can provide the anchor\nelement `id`, a DOM element reference, or a `VirtualElement`. If the anchor lives inside the tooltip, use the\n`anchor` slot instead."
+            },
             {
               "kind": "field",
               "name": "content",
@@ -16223,6 +16390,26 @@
             {
               "description": "The container that wraps the alert icon.",
               "name": "alert__icon"
+            },
+            {
+              "description": "The syn-tooltip that is shown when the variant is set to \"tooltip\".",
+              "name": "tooltip"
+            },
+            {
+              "description": "The container that wraps the tooltip.",
+              "name": "tooltip__base"
+            },
+            {
+              "description": "The container that wraps the tooltip popup.",
+              "name": "tooltip__popup"
+            },
+            {
+              "description": "The container that wraps the tooltip arrow.",
+              "name": "tooltip__arrow"
+            },
+            {
+              "description": "The container that wraps the tooltip body.",
+              "name": "tooltip__body"
             }
           ],
           "slots": [
@@ -16239,7 +16426,7 @@
                 "text": "object"
               },
               "static": true,
-              "default": "{ 'syn-alert': SynAlert, }"
+              "default": "{ 'syn-alert': SynAlert, 'syn-tooltip': SynTooltip, }"
             },
             {
               "kind": "field",
@@ -16268,6 +16455,14 @@
               },
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "tooltipElement",
+              "type": {
+                "text": "SynTooltip | undefined"
+              },
+              "privacy": "private"
+            },
             {
               "kind": "field",
               "name": "validationMessage",
@@ -16307,14 +16502,22 @@
                 "text": "SynInput['size'] | undefined"
               }
             },
+            {
+              "kind": "field",
+              "name": "hasFocus",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            },
             {
               "kind": "field",
               "name": "variant",
               "type": {
-                "text": "'native' | 'inline'"
+                "text": "'native' | 'tooltip' | 'inline'"
               },
               "default": "'native'",
-              "description": "The variant that should be used to show validation alerts.\n\nThe following variants are supported:\n- **native** (default): Uses the native browser validation, usually a browser tooltip.\n- **inline**: Show the validation message underneath the element, using a `<syn-alert>`",
+              "description": "The variant that should be used to show validation alerts.\n\nThe following variants are supported:\n- **native** (default): Uses the native browser validation, usually a browser tooltip.\n- **tooltip**: Show the validation message as a tooltip using a `<syn-tooltip>`.\n- **inline**: Show the validation message underneath the element, using a `<syn-alert>`",
               "attribute": "variant",
               "reflects": true
             },
@@ -16449,6 +16652,17 @@
                 }
               ]
             },
+            {
+              "kind": "field",
+              "name": "handleInputFocus",
+              "privacy": "private",
+              "description": "Handle focus/blur events for tooltip variant"
+            },
+            {
+              "kind": "field",
+              "name": "handleInputBlur",
+              "privacy": "private"
+            },
             {
               "kind": "method",
               "name": "handleFocus",
@@ -16479,10 +16693,10 @@
             {
               "name": "variant",
               "type": {
-                "text": "'native' | 'inline'"
+                "text": "'native' | 'tooltip' | 'inline'"
               },
               "default": "'native'",
-              "description": "The variant that should be used to show validation alerts.\n\nThe following variants are supported:\n- **native** (default): Uses the native browser validation, usually a browser tooltip.\n- **inline**: Show the validation message underneath the element, using a `<syn-alert>`",
+              "description": "The variant that should be used to show validation alerts.\n\nThe following variants are supported:\n- **native** (default): Uses the native browser validation, usually a browser tooltip.\n- **tooltip**: Show the validation message as a tooltip using a `<syn-tooltip>`.\n- **inline**: Show the validation message underneath the element, using a `<syn-alert>`",
               "fieldName": "variant"
             },
             {
@@ -16530,10 +16744,11 @@
           "tagNameWithoutPrefix": "validate",
           "tagName": "syn-validate",
           "customElement": true,
-          "jsDoc": "/**\n * @summary Validate provides form field validation messages in a unified way.\n * It does this by using [the native browser validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation)\n * and showing the validation message in a consistent, user defined way.\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-validate--docs\n * @dependency syn-alert\n *\n * @slot - The form field that should be validated.\n * Avoid slotting in more than one element, as subsequent ones will be ignored.\n *\n * @csspart base - The component's base wrapper.\n * @csspart input-wrapper - The container that wraps the form field.\n * @csspart alert - The syn-alert that is shown when the variant is set to \"inline\".\n * @csspart alert__base - The container that wraps the alert.\n * @csspart alert__message - The container that wraps the alert message.\n * @csspart alert__icon - The container that wraps the alert icon.\n */",
+          "jsDoc": "/**\n * @summary Validate provides form field validation messages in a unified way.\n * It does this by using [the native browser validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation)\n * and showing the validation message in a consistent, user defined way.\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-validate--docs\n * @dependency syn-alert\n * @dependency syn-tooltip\n *\n * @slot - The form field that should be validated.\n * Avoid slotting in more than one element, as subsequent ones will be ignored.\n *\n * @csspart base - The component's base wrapper.\n * @csspart input-wrapper - The container that wraps the form field.\n *\n * @csspart alert - The syn-alert that is shown when the variant is set to \"inline\".\n * @csspart alert__base - The container that wraps the alert.\n * @csspart alert__message - The container that wraps the alert message.\n * @csspart alert__icon - The container that wraps the alert icon.\n *\n * @csspart tooltip - The syn-tooltip that is shown when the variant is set to \"tooltip\".\n * @csspart tooltip__base - The container that wraps the tooltip.\n * @csspart tooltip__popup - The container that wraps the tooltip popup.\n * @csspart tooltip__arrow - The container that wraps the tooltip arrow.\n * @csspart tooltip__body - The container that wraps the tooltip body.\n*/",
           "documentation": "https://synergy-design-system.github.io/?path=/docs/components-syn-validate--docs",
           "dependencies": [
-            "syn-alert"
+            "syn-alert",
+            "syn-tooltip"
           ]
         }
       ],
@@ -16552,7 +16767,7 @@
   "package": {
     "name": "@synergy-design-system/components",
     "description": "",
-    "version": "3.4.1",
+    "version": "3.6.0",
     "author": {
       "name": "SICK Global UX Foundation",
       "url": "https://www.sick.com"

package/dist/styles/index.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/components version 3.4.1
+ * @synergy-design-system/components version 3.6.0
  * SICK Global UX Foundation
  * 
  * This file is created automatically in the build process!
@@ -69,7 +69,6 @@ syn-tooltip:not(:defined) {
   opacity: 0;
   transition: opacity 0.3s ease-in-out;
 }
-/* stylelint-disable */
 /*
  * This file contains utility classes that can't be contained in a component and must be applied to the light DOM. None
  * of the rules in this stylesheet should target component tags or HTML tags, and all classes *must* start with ".syn-"
@@ -87,24 +86,23 @@ syn-tooltip:not(:defined) {
 /** This can go away once Safari has scrollbar-gutter support. */
 @supports not (scrollbar-gutter: stable) {
   .syn-scroll-lock body {
-    padding-right: var(--syn-scroll-lock-size) !important;
     overflow: hidden !important;
+    padding-right: var(--syn-scroll-lock-size) !important;
   }
 }
 .syn-toast-stack {
-  position: fixed;
-  top: 0;
   inset-inline-end: 0;
-  z-index: var(--syn-z-index-toast);
-  width: 28rem;
-  max-width: 100%;
   max-height: 100%;
+  max-width: 100%;
   overflow: auto;
+  position: fixed;
+  top: 0;
+  width: 28rem;
+  z-index: var(--syn-z-index-toast);
 }
 .syn-toast-stack syn-alert {
   margin: var(--syn-spacing-small);
 }
 .syn-toast-stack syn-alert::part(base) {
   box-shadow: var(--syn-shadow-large);
-}
-/* stylelint-enable */
+}

package/dist/styles/utility.css

@@ -1,11 +1,8 @@
-
-/* stylelint-disable */
 /*
  * This file contains utility classes that can't be contained in a component and must be applied to the light DOM. None
  * of the rules in this stylesheet should target component tags or HTML tags, and all classes *must* start with ".syn-"
  * to reduce the possibility of collisions.
  */
-
 @supports (scrollbar-gutter: stable) {
   .syn-scroll-lock {
     scrollbar-gutter: var(--syn-scroll-lock-gutter) !important;
@@ -19,20 +16,20 @@
 /** This can go away once Safari has scrollbar-gutter support. */
 @supports not (scrollbar-gutter: stable) {
   .syn-scroll-lock body {
-    padding-right: var(--syn-scroll-lock-size) !important;
     overflow: hidden !important;
+    padding-right: var(--syn-scroll-lock-size) !important;
   }
 }
 
 .syn-toast-stack {
-  position: fixed;
-  top: 0;
   inset-inline-end: 0;
-  z-index: var(--syn-z-index-toast);
-  width: 28rem;
-  max-width: 100%;
   max-height: 100%;
+  max-width: 100%;
   overflow: auto;
+  position: fixed;
+  top: 0;
+  width: 28rem;
+  z-index: var(--syn-z-index-toast);
 }
 
 .syn-toast-stack syn-alert {
@@ -42,5 +39,3 @@
 .syn-toast-stack syn-alert::part(base) {
   box-shadow: var(--syn-shadow-large);
 }
-
-/* stylelint-enable */