@solid-design-system/components 1.35.1 → 1.37.0

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "http://json.schemastore.org/web-types",
   "name": "@solid-design-system/components",
-  "version": "1.35.1",
+  "version": "1.37.0",
   "description-markup": "markdown",
   "framework-config": {
     "enable-when": {
@@ -1102,7 +1102,9 @@
             "properties": [
               {
                 "name": "formControlController",
-                "value": {}
+                "value": {
+                  "type": "FormControlController"
+                }
               },
               {
                 "name": "title",
@@ -1173,6 +1175,13 @@
                   "type": "boolean"
                 }
               },
+              {
+                "name": "showInvalidStyle",
+                "description": "Indicates whether or not the user input is valid after the user has interacted with the component. These states are activated when the attribute \"data-user-valid\" or \"data-user-invalid\" are set on the component via the form controller. They are different than the native input validity state which is always either `true` or `false`.",
+                "value": {
+                  "type": "boolean"
+                }
+              },
               {
                 "name": "validity",
                 "description": "Gets the validity state object",
@@ -2091,7 +2100,9 @@
             "properties": [
               {
                 "name": "formControlController",
-                "value": {}
+                "value": {
+                  "type": "FormControlController"
+                }
               },
               {
                 "name": "hasSlotController",
@@ -2107,6 +2118,19 @@
                   "type": "boolean"
                 }
               },
+              {
+                "name": "showValidStyle",
+                "description": "Indicates whether or not the user input is valid after the user has interacted with the component. These states are activated when the attribute \"data-user-valid\" or \"data-user-invalid\" are set on the component via the form controller. They are different than the native input validity state which is always either `true` or `false`.",
+                "value": {
+                  "type": "boolean"
+                }
+              },
+              {
+                "name": "showInvalidStyle",
+                "value": {
+                  "type": "boolean"
+                }
+              },
               {
                 "name": "type",
                 "description": "The type of input. Works the same as a native `<input>` element, but only a subset of types are supported. Defaults\nto `text`.",
@@ -3660,6 +3684,105 @@
             }
           ]
         },
+        {
+          "name": "sd-radio-button",
+          "description": "",
+          "doc-url": "https://solid.union-investment.com/[storybook-link]/radio-button",
+          "js": {
+            "properties": [
+              {
+                "name": "hasSlotController",
+                "value": {}
+              },
+              {
+                "name": "hasFocus",
+                "value": {
+                  "type": "boolean"
+                }
+              },
+              {
+                "name": "value",
+                "description": "The radio's value. When selected, the radio group will receive this value.",
+                "value": {
+                  "type": "string"
+                }
+              },
+              {
+                "name": "disabled",
+                "description": "Disables the radio button.",
+                "value": {
+                  "type": "boolean"
+                }
+              },
+              {
+                "name": "size",
+                "description": "The radio button's size.",
+                "value": {
+                  "type": "'lg' | 'md' | 'sm'"
+                }
+              },
+              {
+                "name": "handleBlur",
+                "value": {}
+              },
+              {
+                "name": "handleClick",
+                "value": {}
+              },
+              {
+                "name": "handleFocus",
+                "value": {}
+              },
+              {
+                "name": "handleDisabledChange",
+                "value": {}
+              },
+              {
+                "name": "focus",
+                "description": "Sets focus on the radio button.",
+                "value": {}
+              },
+              {
+                "name": "blur",
+                "description": "Removes focus from the radio button.",
+                "value": {}
+              }
+            ],
+            "events": [
+              {
+                "name": "sd-blur",
+                "description": "Emitted when the button loses focus."
+              },
+              {
+                "name": "sd-focus",
+                "description": "Emitted when the button gains focus."
+              }
+            ]
+          },
+          "attributes": [
+            {
+              "name": "value",
+              "description": "The radio's value. When selected, the radio group will receive this value.",
+              "value": {
+                "type": "string"
+              }
+            },
+            {
+              "name": "disabled",
+              "description": "Disables the radio button.",
+              "value": {
+                "type": "boolean"
+              }
+            },
+            {
+              "name": "size",
+              "description": "The radio button's size.",
+              "value": {
+                "type": "'lg' | 'md' | 'sm'"
+              }
+            }
+          ]
+        },
         {
           "name": "sd-radio-group",
           "description": "",
@@ -3674,7 +3797,9 @@
               },
               {
                 "name": "formControlController",
-                "value": {}
+                "value": {
+                  "type": "FormControlController"
+                }
               },
               {
                 "name": "hasSlotController",
@@ -3705,24 +3830,24 @@
                 }
               },
               {
-                "name": "invalid",
-                "description": "A Boolean attribute which, if present, marks the radio valid or invalid. Please note that 'invalid' can only be used in conjunction with 'this.required'.",
+                "name": "showInvalidStyle",
+                "description": "Indicates whether or not the user input is valid after the user has interacted with the component. These states are activated when the attribute \"data-user-valid\" or \"data-user-invalid\" are set on the component via the form controller. They are different than the native input validity state which is always either `true` or `false`.",
                 "value": {
                   "type": "boolean"
                 }
               },
               {
-                "name": "errorText",
-                "description": "The radio groups's error text. Use to display an error message below the component. Please note that 'error-text' can only be used in conjunction with 'this.required' and 'this.invalid'.",
+                "name": "label",
+                "description": "The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot\ninstead.",
                 "value": {
                   "type": "string"
                 }
               },
               {
-                "name": "label",
-                "description": "The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot\ninstead.",
+                "name": "boldLabel",
+                "description": "Quick way to make the group label bold. Bolding the group label is highly recommended for visual clarity between the label and radio options.\nIt is false by default for consistency among the other form elements which do not use bold labels by default.",
                 "value": {
-                  "type": "string"
+                  "type": "boolean"
                 }
               },
               {
@@ -3790,7 +3915,8 @@
                 "value": {}
               },
               {
-                "name": "handleLabelClick",
+                "name": "focus",
+                "description": "Move focus to the checked radio (or the first one if none are checked)",
                 "value": {}
               },
               {
@@ -3865,6 +3991,13 @@
                 "type": "string"
               }
             },
+            {
+              "name": "boldLabel",
+              "description": "Quick way to make the group label bold. Bolding the group label is highly recommended for visual clarity between the label and radio options.\nIt is false by default for consistency among the other form elements which do not use bold labels by default.",
+              "value": {
+                "type": "boolean"
+              }
+            },
             {
               "name": "name",
               "description": "The name of the radio group, submitted as a name/value pair with form data.",
@@ -4045,7 +4178,9 @@
               },
               {
                 "name": "formControlController",
-                "value": {}
+                "value": {
+                  "type": "FormControlController"
+                }
               },
               {
                 "name": "hasSlotController",
@@ -4111,14 +4246,14 @@
                 }
               },
               {
-                "name": "isValid",
-                "description": "Indicates whether or not the user input is valid after the user has interacted with the component. These states are activated when the attribute \"data-user-valid\" or \"data-user-invalid\" are set on the component via the form controller.",
+                "name": "showValidStyle",
+                "description": "Indicates whether or not the user input is valid after the user has interacted with the component. These states are activated when the attribute \"data-user-valid\" or \"data-user-invalid\" are set on the component via the form controller. They are different than the native input validity state which is always either `true` or `false`.",
                 "value": {
                   "type": "boolean"
                 }
               },
               {
-                "name": "isInvalid",
+                "name": "showInvalidStyle",
                 "value": {
                   "type": "boolean"
                 }
@@ -4622,7 +4757,16 @@
             "properties": [
               {
                 "name": "formControlController",
-                "value": {}
+                "value": {
+                  "type": "FormControlController"
+                }
+              },
+              {
+                "name": "showInvalidStyle",
+                "description": "Indicates whether or not the user input is valid after the user has interacted with the component. These states are activated when the attribute \"data-user-valid\" or \"data-user-invalid\" are set on the component via the form controller. They are different than the native input validity state which is always either `true` or `false`.",
+                "value": {
+                  "type": "boolean"
+                }
               },
               {
                 "name": "title",
@@ -5054,7 +5198,9 @@
             "properties": [
               {
                 "name": "formControlController",
-                "value": {}
+                "value": {
+                  "type": "FormControlController"
+                }
               },
               {
                 "name": "hasSlotController",
@@ -5066,6 +5212,19 @@
                   "type": "boolean"
                 }
               },
+              {
+                "name": "showValidStyle",
+                "description": "Indicates whether or not the user input is valid after the user has interacted with the component. These states are activated when the attribute \"data-user-valid\" or \"data-user-invalid\" are set on the component via the form controller. They are different than the native input validity state which is always either `true` or `false`.",
+                "value": {
+                  "type": "boolean"
+                }
+              },
+              {
+                "name": "showInvalidStyle",
+                "value": {
+                  "type": "boolean"
+                }
+              },
               {
                 "name": "title",
                 "description": "An empty title prevents browser validation tooltips from appearing on hover",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@solid-design-system/components",
   "description": "Solid Design System: Components",
-  "version": "1.35.1",
+  "version": "1.37.0",
   "homepage": "https://solid-design-system.fe.union-investment.de/x.x.x/storybook/",
   "author": {
     "name": "Union Investment"
@@ -45,7 +45,8 @@
   ],
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/solid-design-system/solid.git"
+    "url": "git+https://github.com/solid-design-system/solid.git",
+    "directory": "packages/components"
   },
   "scripts": {
     "start": "echo '❌ Please use `pnpm dev` instead.'",
@@ -185,8 +186,8 @@
   "readme": "README.md",
   "meta": {
     "bundleSizeInKb": {
-      "uncompressed": 248,
-      "gzip": 61
+      "uncompressed": 253,
+      "gzip": 62
     }
   }
 }

package/dist/components/es/form-control.styles.js

@@ -1 +0,0 @@
-import{i as o}from"./solid-element.js";const l=o`.form-control .form-control__label{display:none}.form-control .form-control__help-text{display:none}.form-control--has-label .form-control__label{display:inline-block;color:var(--sd-input-label-color);margin-bottom:var(--sd-spacing-3x-small)}.form-control--has-label.form-control--small .form-control__label{font-size:var(--sd-input-label-font-size-small)}.form-control--has-label.form-control--medium .form-control__label{font-size:var(--sd-input-label-font-size-medium)}.form-control--has-label.form-control--large .form-control_label{font-size:var(--sd-input-label-font-size-large)}:host([required]) .form-control--has-label .form-control__label::after{content:var(--sd-input-required-content);margin-inline-start:var(--sd-input-required-content-offset);color:var(--sd-input-required-content-color)}.form-control--has-help-text .form-control__help-text{display:block;color:var(--sd-input-help-text-color);margin-top:var(--sd-spacing-3x-small)}.form-control--has-help-text.form-control--small .form-control__help-text{font-size:var(--sd-input-help-text-font-size-small)}.form-control--has-help-text.form-control--medium .form-control__help-text{font-size:var(--sd-input-help-text-font-size-medium)}.form-control--has-help-text.form-control--large .form-control__help-text{font-size:var(--sd-input-help-text-font-size-large)}.form-control--has-help-text.form-control--radio-group .form-control__help-text{margin-top:var(--sd-spacing-2x-small)}`;export{l as f};

package/dist/package/styles/form-control.styles.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import("lit").CSSResult;
-export default _default;

package/dist/package/styles/form-control.styles.js

@@ -1,5 +0,0 @@
-import { css } from "lit";
-const formControlStyles = css`.form-control .form-control__label{display:none}.form-control .form-control__help-text{display:none}.form-control--has-label .form-control__label{display:inline-block;color:var(--sd-input-label-color);margin-bottom:var(--sd-spacing-3x-small)}.form-control--has-label.form-control--small .form-control__label{font-size:var(--sd-input-label-font-size-small)}.form-control--has-label.form-control--medium .form-control__label{font-size:var(--sd-input-label-font-size-medium)}.form-control--has-label.form-control--large .form-control_label{font-size:var(--sd-input-label-font-size-large)}:host([required]) .form-control--has-label .form-control__label::after{content:var(--sd-input-required-content);margin-inline-start:var(--sd-input-required-content-offset);color:var(--sd-input-required-content-color)}.form-control--has-help-text .form-control__help-text{display:block;color:var(--sd-input-help-text-color);margin-top:var(--sd-spacing-3x-small)}.form-control--has-help-text.form-control--small .form-control__help-text{font-size:var(--sd-input-help-text-font-size-small)}.form-control--has-help-text.form-control--medium .form-control__help-text{font-size:var(--sd-input-help-text-font-size-medium)}.form-control--has-help-text.form-control--large .form-control__help-text{font-size:var(--sd-input-help-text-font-size-large)}.form-control--has-help-text.form-control--radio-group .form-control__help-text{margin-top:var(--sd-spacing-2x-small)}`;
-export {
-  formControlStyles as default
-};

package/dist/versioned-components/es/form-control.styles.js

@@ -1 +0,0 @@
-import{i as o}from"./solid-element.js";const l=o`.form-control .form-control__label{display:none}.form-control .form-control__help-text{display:none}.form-control--has-label .form-control__label{display:inline-block;color:var(--sd-1-35-1-input-label-color);margin-bottom:var(--sd-spacing-3x-small)}.form-control--has-label.form-control--small .form-control__label{font-size:var(--sd-1-35-1-input-label-font-size-small)}.form-control--has-label.form-control--medium .form-control__label{font-size:var(--sd-1-35-1-input-label-font-size-medium)}.form-control--has-label.form-control--large .form-control_label{font-size:var(--sd-1-35-1-input-label-font-size-large)}:host([required]) .form-control--has-label .form-control__label::after{content:var(--sd-1-35-1-input-required-content);margin-inline-start:var(--sd-1-35-1-input-required-content-offset);color:var(--sd-1-35-1-input-required-content-color)}.form-control--has-help-text .form-control__help-text{display:block;color:var(--sd-1-35-1-input-help-text-color);margin-top:var(--sd-spacing-3x-small)}.form-control--has-help-text.form-control--small .form-control__help-text{font-size:var(--sd-1-35-1-input-help-text-font-size-small)}.form-control--has-help-text.form-control--medium .form-control__help-text{font-size:var(--sd-1-35-1-input-help-text-font-size-medium)}.form-control--has-help-text.form-control--large .form-control__help-text{font-size:var(--sd-1-35-1-input-help-text-font-size-large)}.form-control--has-help-text.form-control--radio-group .form-control__help-text{margin-top:var(--sd-spacing-2x-small)}`;export{l as f};

package/dist/versioned-package/styles/form-control.styles.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import("lit").CSSResult;
-export default _default;

package/dist/versioned-package/styles/form-control.styles.js

@@ -1,5 +0,0 @@
-import { css } from "lit";
-const formControlStyles = css`.form-control .form-control__label{display:none}.form-control .form-control__help-text{display:none}.form-control--has-label .form-control__label{display:inline-block;color:var(--sd-1-35-1-input-label-color);margin-bottom:var(--sd-spacing-3x-small)}.form-control--has-label.form-control--small .form-control__label{font-size:var(--sd-1-35-1-input-label-font-size-small)}.form-control--has-label.form-control--medium .form-control__label{font-size:var(--sd-1-35-1-input-label-font-size-medium)}.form-control--has-label.form-control--large .form-control_label{font-size:var(--sd-1-35-1-input-label-font-size-large)}:host([required]) .form-control--has-label .form-control__label::after{content:var(--sd-1-35-1-input-required-content);margin-inline-start:var(--sd-1-35-1-input-required-content-offset);color:var(--sd-1-35-1-input-required-content-color)}.form-control--has-help-text .form-control__help-text{display:block;color:var(--sd-1-35-1-input-help-text-color);margin-top:var(--sd-spacing-3x-small)}.form-control--has-help-text.form-control--small .form-control__help-text{font-size:var(--sd-1-35-1-input-help-text-font-size-small)}.form-control--has-help-text.form-control--medium .form-control__help-text{font-size:var(--sd-1-35-1-input-help-text-font-size-medium)}.form-control--has-help-text.form-control--large .form-control__help-text{font-size:var(--sd-1-35-1-input-help-text-font-size-large)}.form-control--has-help-text.form-control--radio-group .form-control__help-text{margin-top:var(--sd-spacing-2x-small)}`;
-export {
-  formControlStyles as default
-};