@solid-design-system/components 4.1.2 → 4.2.0

package/dist/utilities/localize.js

@@ -1,8 +1,8 @@
 import {
   LocalizeController
 } from "../chunks/chunk.YKM42GKF.js";
-import "../chunks/chunk.2S2CNWKY.js";
-import "../chunks/chunk.MNYQWRJE.js";
+import "../chunks/chunk.ZXR3YX6W.js";
+import "../chunks/chunk.EJ6ZLEEW.js";
 import "../chunks/chunk.S3NI7NKU.js";
 export {
   LocalizeController

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

@@ -296,6 +296,11 @@
           "description": "Disables the button.",
           "values": []
         },
+        {
+          "name": "visually-disabled",
+          "description": "Styles the button as if it was disabled and enables aria-disabled",
+          "values": []
+        },
         {
           "name": "loading",
           "description": "Draws the button in a loading state.",
@@ -523,6 +528,11 @@
           "description": "Disables the checkbox.",
           "values": []
         },
+        {
+          "name": "visually-disabled",
+          "description": "Styles the checkbox as if it was disabled and enables aria-disabled",
+          "values": []
+        },
         {
           "name": "checked",
           "description": "Draws the checkbox in a checked state.",
@@ -563,7 +573,7 @@
     },
     {
       "name": "sd-checkbox-group",
-      "description": "Checkbox groups are used to group multiple [checkbox](/components/checkbox). It provides only presentational functionality.\n---\n\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n\n### **Slots:**\n - _default_ - The default slot where `<sd-checkbox>` elements are placed.\n- **label** - The checkbox group's label. Required for proper accessibility. Alternatively, you can use the `label` attribute.\n- **tooltip** - An optional tooltip that helps describe the checkbox-group. Use this slot with the `sd-tooltip` component.",
+      "description": "Checkbox groups are used to group multiple [checkbox](/components/checkbox). It provides only presentational functionality.\n---\n\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n\n### **Slots:**\n - _default_ - The default slot where `<sd-checkbox>` elements are placed.\n- **label** - The checkbox group's label. Required for proper accessibility. Alternatively, you can use the `label` attribute.\n- **tooltip** - An optional tooltip that helps describe the checkbox-group. Use this slot with the `sd-tooltip` component.\n- **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.",
       "attributes": [
         {
           "name": "size",
@@ -580,6 +590,11 @@
           "description": "The checkbox group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot\ninstead.",
           "values": []
         },
+        {
+          "name": "help-text",
+          "description": "The element help text. If you need to display HTML, use the `help-text` slot instead.",
+          "values": []
+        },
         {
           "name": "dir",
           "description": "The element's directionality.",
@@ -632,6 +647,11 @@
           "description": "Disables the combobox control.",
           "values": []
         },
+        {
+          "name": "visually-disabled",
+          "description": "Styles the combobox as if it was disabled and enables aria-disabled",
+          "values": []
+        },
         {
           "name": "clearable",
           "description": "Adds a clear button when the combobox is not empty.",
@@ -1206,6 +1226,11 @@
           "description": "Disables the input.",
           "values": []
         },
+        {
+          "name": "visually-disabled",
+          "description": "Styles the input as if it was disabled and enables aria-disabled",
+          "values": []
+        },
         {
           "name": "readonly",
           "description": "Makes the input readonly.",
@@ -1368,6 +1393,11 @@
           "description": "When not set, the link will render as disabled.",
           "values": []
         },
+        {
+          "name": "visually-disabled",
+          "description": "Styles the link as if it was disabled and enables aria-disabled",
+          "values": []
+        },
         {
           "name": "target",
           "description": "Tells the browser where to open the link. Only used when `href` is present.",
@@ -1575,7 +1605,7 @@
         },
         {
           "name": "closable",
-          "description": "Enables a close button that allows the user to dismiss the notification.",
+          "description": "Enables a close button that allows the user to dismiss the notification.\nIt also allows the user to dismiss the notification using the ESC.",
           "values": []
         },
         {
@@ -1890,6 +1920,11 @@
           "description": "A Boolean attribute which, if present, disables the radio.",
           "values": []
         },
+        {
+          "name": "visually-disabled",
+          "description": "A Boolean attribute which, if present, disables the radio.",
+          "values": []
+        },
         {
           "name": "value",
           "description": "The radio's value. When selected, the radio group will receive this value.",
@@ -1932,6 +1967,11 @@
           "description": "Disables the radio button.",
           "values": []
         },
+        {
+          "name": "visually-disabled",
+          "description": "Styles the radio-button as if it was disabled and enables aria-disabled",
+          "values": []
+        },
         {
           "name": "value",
           "description": "The radio's value. When selected, the radio group will receive this value.",
@@ -1957,7 +1997,7 @@
     },
     {
       "name": "sd-radio-group",
-      "description": "Radio groups are used to group multiple [radios](/components/radio) or [radio buttons](/components/radio-button) so they function as a single form control.\n---\n\n\n### **Events:**\n - **sd-change** - Emitted when the radio group's selected value changes.\n- **sd-input** - Emitted when the radio group receives user input.\n- **sd-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **focus()** - Move focus to the checked radio (or the first one if none are checked)\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(): _boolean_** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message)** - Sets a custom validation message. Pass an empty string to restore validity.\n- **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n\n### **Slots:**\n - _default_ - The default slot where `<sd-radio>` or `<sd-radio-button>` elements are placed.\n- **label** - The radio group's label. Required for proper accessibility. Alternatively, you can use the `label` attribute.\n- **tooltip** - An optional tooltip that helps describe the radio-group. Use this slot with the `sd-tooltip` component.\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and error text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The input's wrapper.\n- **button-group** - The button group that wraps radio buttons.\n- **button-group__base** - The button group's `base` part.",
+      "description": "Radio groups are used to group multiple [radios](/components/radio) or [radio buttons](/components/radio-button) so they function as a single form control.\n---\n\n\n### **Events:**\n - **sd-change** - Emitted when the radio group's selected value changes.\n- **sd-input** - Emitted when the radio group receives user input.\n- **sd-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **focus()** - Move focus to the checked radio (or the first one if none are checked)\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(): _boolean_** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message)** - Sets a custom validation message. Pass an empty string to restore validity.\n- **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n\n### **Slots:**\n - _default_ - The default slot where `<sd-radio>` or `<sd-radio-button>` elements are placed.\n- **label** - The radio group's label. Required for proper accessibility. Alternatively, you can use the `label` attribute.\n- **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n- **tooltip** - An optional tooltip that helps describe the radio-group. Use this slot with the `sd-tooltip` component.\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and error text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The input's wrapper.\n- **button-group** - The button group that wraps radio buttons.\n- **button-group__base** - The button group's `base` part.",
       "attributes": [
         {
           "name": "size",
@@ -1979,6 +2019,11 @@
           "description": "The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot\ninstead.",
           "values": []
         },
+        {
+          "name": "help-text",
+          "description": "The element help text. If you need to display HTML, use the `help-text` slot instead.",
+          "values": []
+        },
         {
           "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.",
@@ -2108,6 +2153,11 @@
           "description": "Disables the select control.",
           "values": []
         },
+        {
+          "name": "visually-disabled",
+          "description": "Styles the select as if it was disabled and enables aria-disabled",
+          "values": []
+        },
         {
           "name": "help-text",
           "description": "The select's help text. If you need to display HTML, use the `help-text` slot instead.",
@@ -2687,6 +2737,11 @@
           "description": "Disables the textarea.",
           "values": []
         },
+        {
+          "name": "visually-disabled",
+          "description": "Styles the textarea as if it was disabled and enables aria-disabled",
+          "values": []
+        },
         {
           "name": "readonly",
           "description": "Makes the textarea readonly.",

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@solid-design-system/components",
-  "version": "4.1.2",
+  "version": "4.2.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -661,6 +661,11 @@
               "description": "Disables the button.",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "visually-disabled",
+              "description": "Styles the button as if it was disabled and enables aria-disabled",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "loading",
               "description": "Draws the button in a loading state.",
@@ -790,6 +795,11 @@
                 "description": "Disables the button.",
                 "type": "boolean"
               },
+              {
+                "name": "visuallyDisabled",
+                "description": "Styles the button as if it was disabled and enables aria-disabled",
+                "type": "boolean"
+              },
               {
                 "name": "loading",
                 "description": "Draws the button in a loading state.",
@@ -1130,6 +1140,11 @@
               "description": "Disables the checkbox.",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "visually-disabled",
+              "description": "Styles the checkbox as if it was disabled and enables aria-disabled",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "checked",
               "description": "Draws the checkbox in a checked state.",
@@ -1203,6 +1218,11 @@
                 "description": "Disables the checkbox.",
                 "type": "boolean"
               },
+              {
+                "name": "visuallyDisabled",
+                "description": "Styles the checkbox as if it was disabled and enables aria-disabled",
+                "type": "boolean"
+              },
               {
                 "name": "checked",
                 "description": "Draws the checkbox in a checked state.",
@@ -1265,7 +1285,7 @@
         },
         {
           "name": "sd-checkbox-group",
-          "description": "Checkbox groups are used to group multiple [checkbox](/components/checkbox). It provides only presentational functionality.\n---\n\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n\n### **Slots:**\n - _default_ - The default slot where `<sd-checkbox>` elements are placed.\n- **label** - The checkbox group's label. Required for proper accessibility. Alternatively, you can use the `label` attribute.\n- **tooltip** - An optional tooltip that helps describe the checkbox-group. Use this slot with the `sd-tooltip` component.",
+          "description": "Checkbox groups are used to group multiple [checkbox](/components/checkbox). It provides only presentational functionality.\n---\n\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n\n### **Slots:**\n - _default_ - The default slot where `<sd-checkbox>` elements are placed.\n- **label** - The checkbox group's label. Required for proper accessibility. Alternatively, you can use the `label` attribute.\n- **tooltip** - An optional tooltip that helps describe the checkbox-group. Use this slot with the `sd-tooltip` component.\n- **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.",
           "doc-url": "",
           "attributes": [
             {
@@ -1286,6 +1306,11 @@
               "description": "The checkbox group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot\ninstead.",
               "value": { "type": "string", "default": "''" }
             },
+            {
+              "name": "help-text",
+              "description": "The element help text. If you need to display HTML, use the `help-text` slot instead.",
+              "value": { "type": "string", "default": "''" }
+            },
             {
               "name": "dir",
               "description": "The element's directionality.",
@@ -1309,6 +1334,10 @@
             {
               "name": "tooltip",
               "description": "An optional tooltip that helps describe the checkbox-group. Use this slot with the `sd-tooltip` component."
+            },
+            {
+              "name": "help-text",
+              "description": "Text that describes how to use the input. Alternatively, you can use the `help-text` attribute."
             }
           ],
           "events": [],
@@ -1329,6 +1358,11 @@
                 "description": "The checkbox group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot\ninstead.",
                 "type": "string"
               },
+              {
+                "name": "helpText",
+                "description": "The element help text. If you need to display HTML, use the `help-text` slot instead.",
+                "type": "string"
+              },
               {
                 "name": "dir",
                 "description": "The element's directionality.",
@@ -1378,6 +1412,11 @@
               "description": "Disables the combobox control.",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "visually-disabled",
+              "description": "Styles the combobox as if it was disabled and enables aria-disabled",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "clearable",
               "description": "Adds a clear button when the combobox is not empty.",
@@ -1597,6 +1636,11 @@
                 "description": "Disables the combobox control.",
                 "type": "boolean"
               },
+              {
+                "name": "visuallyDisabled",
+                "description": "Styles the combobox as if it was disabled and enables aria-disabled",
+                "type": "boolean"
+              },
               {
                 "name": "clearable",
                 "description": "Adds a clear button when the combobox is not empty.",
@@ -2753,6 +2797,11 @@
               "description": "Disables the input.",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "visually-disabled",
+              "description": "Styles the input as if it was disabled and enables aria-disabled",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "readonly",
               "description": "Makes the input readonly.",
@@ -2982,6 +3031,11 @@
                 "description": "Disables the input.",
                 "type": "boolean"
               },
+              {
+                "name": "visuallyDisabled",
+                "description": "Styles the input as if it was disabled and enables aria-disabled",
+                "type": "boolean"
+              },
               {
                 "name": "readonly",
                 "description": "Makes the input readonly.",
@@ -3162,6 +3216,11 @@
               "description": "When not set, the link will render as disabled.",
               "value": { "type": "string", "default": "''" }
             },
+            {
+              "name": "visually-disabled",
+              "description": "Styles the link as if it was disabled and enables aria-disabled",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "target",
               "description": "Tells the browser where to open the link. Only used when `href` is present.",
@@ -3226,6 +3285,11 @@
                 "description": "When not set, the link will render as disabled.",
                 "type": "string"
               },
+              {
+                "name": "visuallyDisabled",
+                "description": "Styles the link as if it was disabled and enables aria-disabled",
+                "type": "boolean"
+              },
               {
                 "name": "target",
                 "description": "Tells the browser where to open the link. Only used when `href` is present.",
@@ -3584,7 +3648,7 @@
             },
             {
               "name": "closable",
-              "description": "Enables a close button that allows the user to dismiss the notification.",
+              "description": "Enables a close button that allows the user to dismiss the notification.\nIt also allows the user to dismiss the notification using the ESC.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
@@ -3659,7 +3723,7 @@
               },
               {
                 "name": "closable",
-                "description": "Enables a close button that allows the user to dismiss the notification.",
+                "description": "Enables a close button that allows the user to dismiss the notification.\nIt also allows the user to dismiss the notification using the ESC.",
                 "type": "boolean"
               },
               {
@@ -4264,6 +4328,11 @@
               "description": "A Boolean attribute which, if present, disables the radio.",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "visually-disabled",
+              "description": "A Boolean attribute which, if present, disables the radio.",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "value",
               "description": "The radio's value. When selected, the radio group will receive this value.",
@@ -4308,6 +4377,11 @@
                 "description": "A Boolean attribute which, if present, disables the radio.",
                 "type": "boolean"
               },
+              {
+                "name": "visuallyDisabled",
+                "description": "A Boolean attribute which, if present, disables the radio.",
+                "type": "boolean"
+              },
               {
                 "name": "value",
                 "description": "The radio's value. When selected, the radio group will receive this value.",
@@ -4356,6 +4430,11 @@
               "description": "Disables the radio button.",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "visually-disabled",
+              "description": "Styles the radio-button as if it was disabled and enables aria-disabled",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "value",
               "description": "The radio's value. When selected, the radio group will receive this value.",
@@ -4398,6 +4477,11 @@
                 "description": "Disables the radio button.",
                 "type": "boolean"
               },
+              {
+                "name": "visuallyDisabled",
+                "description": "Styles the radio-button as if it was disabled and enables aria-disabled",
+                "type": "boolean"
+              },
               {
                 "name": "value",
                 "description": "The radio's value. When selected, the radio group will receive this value.",
@@ -4428,7 +4512,7 @@
         },
         {
           "name": "sd-radio-group",
-          "description": "Radio groups are used to group multiple [radios](/components/radio) or [radio buttons](/components/radio-button) so they function as a single form control.\n---\n\n\n### **Events:**\n - **sd-change** - Emitted when the radio group's selected value changes.\n- **sd-input** - Emitted when the radio group receives user input.\n- **sd-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **focus()** - Move focus to the checked radio (or the first one if none are checked)\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(): _boolean_** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message)** - Sets a custom validation message. Pass an empty string to restore validity.\n- **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n\n### **Slots:**\n - _default_ - The default slot where `<sd-radio>` or `<sd-radio-button>` elements are placed.\n- **label** - The radio group's label. Required for proper accessibility. Alternatively, you can use the `label` attribute.\n- **tooltip** - An optional tooltip that helps describe the radio-group. Use this slot with the `sd-tooltip` component.\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and error text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The input's wrapper.\n- **button-group** - The button group that wraps radio buttons.\n- **button-group__base** - The button group's `base` part.",
+          "description": "Radio groups are used to group multiple [radios](/components/radio) or [radio buttons](/components/radio-button) so they function as a single form control.\n---\n\n\n### **Events:**\n - **sd-change** - Emitted when the radio group's selected value changes.\n- **sd-input** - Emitted when the radio group receives user input.\n- **sd-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **focus()** - Move focus to the checked radio (or the first one if none are checked)\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(): _boolean_** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message)** - Sets a custom validation message. Pass an empty string to restore validity.\n- **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n\n### **Slots:**\n - _default_ - The default slot where `<sd-radio>` or `<sd-radio-button>` elements are placed.\n- **label** - The radio group's label. Required for proper accessibility. Alternatively, you can use the `label` attribute.\n- **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n- **tooltip** - An optional tooltip that helps describe the radio-group. Use this slot with the `sd-tooltip` component.\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and error text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The input's wrapper.\n- **button-group** - The button group that wraps radio buttons.\n- **button-group__base** - The button group's `base` part.",
           "doc-url": "",
           "attributes": [
             {
@@ -4454,6 +4538,11 @@
               "description": "The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot\ninstead.",
               "value": { "type": "string", "default": "''" }
             },
+            {
+              "name": "help-text",
+              "description": "The element help text. If you need to display HTML, use the `help-text` slot instead.",
+              "value": { "type": "string", "default": "''" }
+            },
             {
               "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.",
@@ -4494,6 +4583,10 @@
               "name": "label",
               "description": "The radio group's label. Required for proper accessibility. Alternatively, you can use the `label` attribute."
             },
+            {
+              "name": "help-text",
+              "description": "Text that describes how to use the input. Alternatively, you can use the `help-text` attribute."
+            },
             {
               "name": "tooltip",
               "description": "An optional tooltip that helps describe the radio-group. Use this slot with the `sd-tooltip` component."
@@ -4535,6 +4628,11 @@
                 "description": "The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot\ninstead.",
                 "type": "string"
               },
+              {
+                "name": "helpText",
+                "description": "The element help text. If you need to display HTML, use the `help-text` slot instead.",
+                "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.",
@@ -4791,6 +4889,11 @@
               "description": "Disables the select control.",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "visually-disabled",
+              "description": "Styles the select as if it was disabled and enables aria-disabled",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "help-text",
               "description": "The select's help text. If you need to display HTML, use the `help-text` slot instead.",
@@ -4977,6 +5080,11 @@
                 "description": "Disables the select control.",
                 "type": "boolean"
               },
+              {
+                "name": "visuallyDisabled",
+                "description": "Styles the select as if it was disabled and enables aria-disabled",
+                "type": "boolean"
+              },
               {
                 "name": "helpText",
                 "description": "The select's help text. If you need to display HTML, use the `help-text` slot instead.",
@@ -6071,6 +6179,11 @@
               "description": "Disables the textarea.",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "visually-disabled",
+              "description": "Styles the textarea as if it was disabled and enables aria-disabled",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "readonly",
               "description": "Makes the textarea readonly.",
@@ -6234,6 +6347,11 @@
                 "description": "Disables the textarea.",
                 "type": "boolean"
               },
+              {
+                "name": "visuallyDisabled",
+                "description": "Styles the textarea as if it was disabled and enables aria-disabled",
+                "type": "boolean"
+              },
               {
                 "name": "readonly",
                 "description": "Makes the textarea readonly.",

package/dist-versioned/_components/menu/menu.js

@@ -32,7 +32,7 @@ let SdMenu = class SdMenu extends SolidElement {
         if (item.type === 'checkbox') {
             item.checked = !item.checked;
         }
-        this.emit('sd-4-1-2-select', { detail: { item } });
+        this.emit('sd-4-2-0-select', { detail: { item } });
     }
     handleKeyDown(event) {
         if (event.key === 'Enter') {

package/dist-versioned/_components/menu/menu.styles.js

@@ -11,7 +11,7 @@ export default css `
     overscroll-behavior: none;
   }
 
-  ::slotted(sd-4-1-2-divider) {
+  ::slotted(sd-4-2-0-divider) {
     --spacing: var(--sd-spacing-x-small);
   }
 `;

package/dist-versioned/_components/menu-item/menu-item.js

@@ -74,7 +74,7 @@ let SdMenuItem = class SdMenuItem extends SolidElement {
         })}
       >
         <span part="checked-icon" class="menu-item__check">
-          <sd-4-1-2-icon name="check" library="system" aria-hidden="true"></sd-4-1-2-icon>
+          <sd-4-2-0-icon name="check" library="system" aria-hidden="true"></sd-4-2-0-icon>
         </span>
 
         <slot name="prefix" part="prefix" class="menu-item__prefix"></slot>
@@ -84,7 +84,7 @@ let SdMenuItem = class SdMenuItem extends SolidElement {
         <slot name="suffix" part="suffix" class="menu-item__suffix"></slot>
 
         <span class="menu-item__chevron">
-          <sd-4-1-2-icon name="chevron-right" library="system" aria-hidden="true"></sd-4-1-2-icon>
+          <sd-4-2-0-icon name="chevron-right" library="system" aria-hidden="true"></sd-4-2-0-icon>
         </span>
       </div>
     `;

package/dist-versioned/chunks/{chunk.UZKLVMCI.js → chunk.33QCSKQD.js}

@@ -12,7 +12,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.HFHUY7YD.js";
+} from "./chunk.M4CPDAKC.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -126,7 +126,7 @@ __decorateClass([
   watch(["name", "src", "library"])
 ], SdIcon.prototype, "setIcon", 1);
 SdIcon = __decorateClass([
-  customElement("sd-4-1-2-icon")
+  customElement("sd-4-2-0-icon")
 ], SdIcon);
 
 export {

package/dist-versioned/chunks/{chunk.ACST636J.js → chunk.5U42A4N2.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.HFHUY7YD.js";
+} from "./chunk.M4CPDAKC.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -98,7 +98,7 @@ __decorateClass([
   state()
 ], SdTeaser.prototype, "_orientation", 2);
 SdTeaser = __decorateClass([
-  customElement("sd-4-1-2-teaser")
+  customElement("sd-4-2-0-teaser")
 ], SdTeaser);
 
 export {

package/dist-versioned/chunks/{chunk.CCQCEONR.js → chunk.632H2QDY.js}

@@ -28,7 +28,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.HFHUY7YD.js";
+} from "./chunk.M4CPDAKC.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -169,7 +169,7 @@ var SdDialog = class extends SolidElement {
     )}"><div part="overlay" class="fixed inset-0 bg-primary-800 opacity-90" @click="${() => this.requestClose("overlay")}" tabindex="-1"></div><div part="panel" class="${cx(
       "flex flex-col z-20 bg-white py-4 sm:py-8 relative gap-6 focus-visible:focus-outline-inverted",
       this.open && "flex opacity-100"
-    )}" role="dialog" aria-modal="true" aria-hidden="${this.open ? "false" : "true"}" aria-label="${this.headline}" aria-labelledby="title" tabindex="0"><header part="header" class="flex flex-grow-0 flex-shrink-0 basis-auto px-6 sm:px-10"><h2 part="title" class="flex-auto m-0" id="title">${this.headline.length > 0 ? html`<span class="sd-headline sd-headline--size-3xl leading-tight">${this.headline}</span>` : html`<slot name="headline"></slot>`}</h2>${!this.noCloseButton ? html`<sd-4-1-2-button part="close-button" variant="tertiary" exportparts="base:close-button__base" class="${cx("absolute top-2 right-2")}" name="x-lg" @click="${() => this.requestClose("close-button")}" type="button"><sd-4-1-2-icon label="${this.localize.term("close")}" name="close" library="system" color="currentColor"></sd-4-1-2-icon></sd-4-1-2-button>` : ""}</header><main part="body" class="flex flex-auto overflow-auto w-full px-6 sm:px-10"><slot></slot></main><footer part="footer" class="flex flex-grow-0 flex-shrink-0 basis-auto ml-auto gap-4 px-6 sm:px-10"><slot name="footer"></slot></footer></div></div>`;
+    )}" role="dialog" aria-modal="true" aria-hidden="${this.open ? "false" : "true"}" aria-label="${this.headline}" aria-labelledby="title" tabindex="0"><header part="header" class="flex flex-grow-0 flex-shrink-0 basis-auto px-6 sm:px-10"><h2 part="title" class="flex-auto m-0" id="title">${this.headline.length > 0 ? html`<span class="sd-headline sd-headline--size-3xl leading-tight">${this.headline}</span>` : html`<slot name="headline"></slot>`}</h2>${!this.noCloseButton ? html`<sd-4-2-0-button part="close-button" variant="tertiary" exportparts="base:close-button__base" class="${cx("absolute top-2 right-2")}" name="x-lg" @click="${() => this.requestClose("close-button")}" type="button"><sd-4-2-0-icon label="${this.localize.term("close")}" name="close" library="system" color="currentColor"></sd-4-2-0-icon></sd-4-2-0-button>` : ""}</header><main part="body" class="flex flex-auto overflow-auto w-full px-6 sm:px-10"><slot></slot></main><footer part="footer" class="flex flex-grow-0 flex-shrink-0 basis-auto ml-auto gap-4 px-6 sm:px-10"><slot name="footer"></slot></footer></div></div>`;
   }
 };
 SdDialog.styles = [
@@ -198,7 +198,7 @@ __decorateClass([
   watch("open", { waitUntilFirstUpdate: true })
 ], SdDialog.prototype, "handleOpenChange", 1);
 SdDialog = __decorateClass([
-  customElement("sd-4-1-2-dialog")
+  customElement("sd-4-2-0-dialog")
 ], SdDialog);
 setDefaultAnimation("dialog.show", {
   keyframes: [

package/dist-versioned/chunks/{chunk.H5ARRBLT.js → chunk.65GBG62N.js}

@@ -10,7 +10,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.HFHUY7YD.js";
+} from "./chunk.M4CPDAKC.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -71,7 +71,7 @@ var SdExpandable = class extends SolidElement {
       "sd-interactive sd-interactive--reset",
       this.inverted && "sd-interactive--inverted",
       !this.inverted ? "!focus-visible:focus-outline" : "!focus-visible:focus-outline-inverted"
-    )}" @click="${this.onToggleClick}" aria-expanded="${this.open}"><div class="${cx("h-full justify-center w-full text-base flex items-center toggle")}">${this.open ? html`<slot name="toggle-open"><sd-4-1-2-icon class="mr-2 text-xl" library="system" name="chevron-up"></sd-4-1-2-icon>${this.localize.term("showLess")}</slot>` : html`<slot name="toggle-closed"><sd-4-1-2-icon class="mr-2 text-xl" library="system" name="chevron-down"></sd-4-1-2-icon>${this.localize.term("showMore")}</slot>`}</div></button><details part="details" aria-hidden="${!this.open}"><summary part="summary" aria-hidden="true" class="cursor-pointer overflow-hidden list-none"><slot name="clone"></slot></summary><div part="content" class="content content-preview overflow-hidden relative"><slot></slot></div></details></div>`;
+    )}" @click="${this.onToggleClick}" aria-expanded="${this.open}"><div class="${cx("h-full justify-center w-full text-base flex items-center toggle")}">${this.open ? html`<slot name="toggle-open"><sd-4-2-0-icon class="mr-2 text-xl" library="system" name="chevron-up"></sd-4-2-0-icon>${this.localize.term("showLess")}</slot>` : html`<slot name="toggle-closed"><sd-4-2-0-icon class="mr-2 text-xl" library="system" name="chevron-down"></sd-4-2-0-icon>${this.localize.term("showMore")}</slot>`}</div></button><details part="details" aria-hidden="${!this.open}"><summary part="summary" aria-hidden="true" class="cursor-pointer overflow-hidden list-none"><slot name="clone"></slot></summary><div part="content" class="content content-preview overflow-hidden relative"><slot></slot></div></details></div>`;
   }
   firstUpdated() {
     this.cloneContentToLightDOM();
@@ -108,7 +108,7 @@ __decorateClass([
   watch("open", { waitUntilFirstUpdate: true })
 ], SdExpandable.prototype, "onOpenChange", 1);
 SdExpandable = __decorateClass([
-  customElement("sd-4-1-2-expandable")
+  customElement("sd-4-2-0-expandable")
 ], SdExpandable);
 
 export {