@cds/core 6.0.0-next.1 → 6.0.0-next.2

package/custom-elements.legacy.json

@@ -671,6 +671,303 @@
         }
       ]
     },
+    {
+      "name": "cds-button-action",
+      "path": "./button-action/button-action.element.d.ts",
+      "description": "Action Button\n\n```typescript\nimport '@cds/core/button-action/register.js';\n```\n\n```html\n<cds-button-action></cds-button-action>\n```",
+      "properties": [
+        {
+          "name": "shape",
+          "type": "string"
+        },
+        {
+          "name": "action",
+          "type": "string"
+        },
+        {
+          "name": "i18n",
+          "type": "{ [key: string]: string | undefined; }"
+        },
+        {
+          "name": "styles",
+          "type": "CSSResultGroup[]"
+        }
+      ],
+      "slots": [
+        {
+          "name": "",
+          "description": "For projecting text content or cds-icon"
+        }
+      ],
+      "cssProperties": [
+        {
+          "name": "--icon-width"
+        },
+        {
+          "name": "--icon-height"
+        },
+        {
+          "name": "--width"
+        },
+        {
+          "name": "--height"
+        },
+        {
+          "name": "--cursor"
+        },
+        {
+          "name": "--color"
+        },
+        {
+          "name": "--font-size"
+        },
+        {
+          "name": "--background"
+        },
+        {
+          "name": "--padding"
+        },
+        {
+          "name": "--outline"
+        },
+        {
+          "name": "--outline-offset"
+        }
+      ]
+    },
+    {
+      "name": "cds-button-action",
+      "path": "./button-action/register.d.ts",
+      "description": "Action Button\n\n```typescript\nimport '@cds/core/button-action/register.js';\n```\n\n```html\n<cds-button-action></cds-button-action>\n```",
+      "properties": [
+        {
+          "name": "shape",
+          "type": "string"
+        },
+        {
+          "name": "action",
+          "type": "string"
+        },
+        {
+          "name": "i18n",
+          "type": "{ [key: string]: string | undefined; }"
+        },
+        {
+          "name": "styles",
+          "type": "CSSResultGroup[]"
+        }
+      ],
+      "slots": [
+        {
+          "name": "",
+          "description": "For projecting text content or cds-icon"
+        }
+      ],
+      "cssProperties": [
+        {
+          "name": "--icon-width"
+        },
+        {
+          "name": "--icon-height"
+        },
+        {
+          "name": "--width"
+        },
+        {
+          "name": "--height"
+        },
+        {
+          "name": "--cursor"
+        },
+        {
+          "name": "--color"
+        },
+        {
+          "name": "--font-size"
+        },
+        {
+          "name": "--background"
+        },
+        {
+          "name": "--padding"
+        },
+        {
+          "name": "--outline"
+        },
+        {
+          "name": "--outline-offset"
+        }
+      ]
+    },
+    {
+      "name": "cds-button-expand",
+      "path": "./button-expand/button-expand.element.d.ts",
+      "description": "Action Expand Button\n\n```typescript\nimport '@cds/core/button-expand/register.js';\n```\n\n```html\n<cds-button-expand pressed></cds-button-expand>\n```",
+      "properties": [
+        {
+          "name": "action",
+          "type": "\"vertical\" | \"horizontal\" | \"detail\""
+        }
+      ],
+      "slots": [
+        {
+          "name": "",
+          "description": "For projecting custom cds-icon"
+        }
+      ]
+    },
+    {
+      "name": "cds-button-expand",
+      "path": "./button-expand/register.d.ts",
+      "description": "Action Expand Button\n\n```typescript\nimport '@cds/core/button-expand/register.js';\n```\n\n```html\n<cds-button-expand pressed></cds-button-expand>\n```",
+      "properties": [
+        {
+          "name": "action",
+          "type": "\"vertical\" | \"horizontal\" | \"detail\""
+        }
+      ],
+      "slots": [
+        {
+          "name": "",
+          "description": "For projecting custom cds-icon"
+        }
+      ]
+    },
+    {
+      "name": "cds-button-handle",
+      "path": "./button-handle/button-handle.element.d.ts",
+      "description": "Action Handle Button\n\n```typescript\nimport '@cds/core/button-handle/register.js';\n```\n\n```html\n<cds-button-handle></cds-button-handle>\n```",
+      "slots": [
+        {
+          "name": "",
+          "description": "For projecting text content or cds-icon"
+        }
+      ]
+    },
+    {
+      "name": "cds-button-handle",
+      "path": "./button-handle/register.d.ts",
+      "description": "Action Handle Button\n\n```typescript\nimport '@cds/core/button-handle/register.js';\n```\n\n```html\n<cds-button-handle></cds-button-handle>\n```",
+      "slots": [
+        {
+          "name": "",
+          "description": "For projecting text content or cds-icon"
+        }
+      ]
+    },
+    {
+      "name": "cds-button-inline",
+      "path": "./button-inline/button-inline.element.d.ts",
+      "description": "Inline buttons are used inside and alongside textual content within Clarity components.\nThey give action buttons a less prominent, yet familiar, visual presence.\n\n```typescript\nimport '@cds/core/button/register.js';\n```\n\n```html\n<cds-button-inline>Button text goes here</cds-button-inline>\n```",
+      "slots": [
+        {
+          "name": "",
+          "description": "Content slot for inside the button"
+        }
+      ],
+      "cssProperties": [
+        {
+          "name": "--text-decoration"
+        },
+        {
+          "name": "--color"
+        },
+        {
+          "name": "--font-size"
+        },
+        {
+          "name": "--line-height"
+        },
+        {
+          "name": "--letter-spacing"
+        }
+      ]
+    },
+    {
+      "name": "cds-button-inline",
+      "path": "./button-inline/register.d.ts",
+      "description": "Inline buttons are used inside and alongside textual content within Clarity components.\nThey give action buttons a less prominent, yet familiar, visual presence.\n\n```typescript\nimport '@cds/core/button/register.js';\n```\n\n```html\n<cds-button-inline>Button text goes here</cds-button-inline>\n```",
+      "slots": [
+        {
+          "name": "",
+          "description": "Content slot for inside the button"
+        }
+      ],
+      "cssProperties": [
+        {
+          "name": "--text-decoration"
+        },
+        {
+          "name": "--color"
+        },
+        {
+          "name": "--font-size"
+        },
+        {
+          "name": "--line-height"
+        },
+        {
+          "name": "--letter-spacing"
+        }
+      ]
+    },
+    {
+      "name": "cds-inline-button",
+      "path": "./button-inline/register.d.ts",
+      "slots": [
+        {
+          "name": "",
+          "description": "Content slot for inside the button"
+        }
+      ],
+      "cssProperties": [
+        {
+          "name": "--text-decoration"
+        },
+        {
+          "name": "--color"
+        },
+        {
+          "name": "--font-size"
+        },
+        {
+          "name": "--line-height"
+        },
+        {
+          "name": "--letter-spacing"
+        }
+      ],
+      "deprecated": true,
+      "deprecatedMessage": "renamed to `cds-button-inline` in 6.0 to align to rest of the `cds-button-*` APIs"
+    },
+    {
+      "name": "cds-button-sort",
+      "path": "./button-sort/button-sort.element.d.ts",
+      "description": "Action Button\n\n```typescript\nimport '@cds/core/button-sort/register.js';\n```\n\n```html\n<cds-button-sort></cds-button-sort>\n```",
+      "properties": [
+        {
+          "name": "sort",
+          "type": "ButtonSort"
+        },
+        {
+          "name": "sortChange"
+        }
+      ]
+    },
+    {
+      "name": "cds-button-sort",
+      "path": "./button-sort/register.d.ts",
+      "description": "Action Button\n\n```typescript\nimport '@cds/core/button-sort/register.js';\n```\n\n```html\n<cds-button-sort></cds-button-sort>\n```",
+      "properties": [
+        {
+          "name": "sort",
+          "type": "ButtonSort"
+        },
+        {
+          "name": "sortChange"
+        }
+      ]
+    },
     {
       "name": "cds-button",
       "path": "./button/button.element.d.ts",
@@ -689,7 +986,7 @@
         {
           "name": "size",
           "description": "Sets the overall height and width of the button based on the following string values:",
-          "type": "\"sm\" | \"md\""
+          "type": "\"icon\" | \"sm\" | \"md\""
         },
         {
           "name": "block",
@@ -783,7 +1080,7 @@
         {
           "name": "size",
           "description": "Sets the overall height and width of the button based on the following string values:",
-          "type": "\"sm\" | \"md\""
+          "type": "\"icon\" | \"sm\" | \"md\""
         },
         {
           "name": "block",
@@ -854,34 +1151,6 @@
         }
       ]
     },
-    {
-      "name": "cds-inline-button",
-      "path": "./button/inline-button.element.d.ts",
-      "description": "Inline buttons are used inside and alongside textual content within Clarity components.\nThey give action buttons a less prominent, yet familiar, visual presence.\n\n```typescript\nimport '@cds/core/button/register.js';\n```\n\n```html\n<cds-inline-button>Button text goes here</cds-inline-button>\n```",
-      "slots": [
-        {
-          "name": "",
-          "description": "Content slot for inside the button"
-        }
-      ],
-      "cssProperties": [
-        {
-          "name": "--text-decoration"
-        },
-        {
-          "name": "--color"
-        },
-        {
-          "name": "--font-size"
-        },
-        {
-          "name": "--line-height"
-        },
-        {
-          "name": "--letter-spacing"
-        }
-      ]
-    },
     {
       "name": "cds-button",
       "path": "./button/register.d.ts",
@@ -900,7 +1169,7 @@
         {
           "name": "size",
           "description": "Sets the overall height and width of the button based on the following string values:",
-          "type": "\"sm\" | \"md\""
+          "type": "\"icon\" | \"sm\" | \"md\""
         },
         {
           "name": "block",
@@ -994,7 +1263,7 @@
         {
           "name": "size",
           "description": "Sets the overall height and width of the button based on the following string values:",
-          "type": "\"sm\" | \"md\""
+          "type": "\"icon\" | \"sm\" | \"md\""
         },
         {
           "name": "block",
@@ -1065,38 +1334,10 @@
         }
       ]
     },
-    {
-      "name": "cds-inline-button",
-      "path": "./button/register.d.ts",
-      "description": "Inline buttons are used inside and alongside textual content within Clarity components.\nThey give action buttons a less prominent, yet familiar, visual presence.\n\n```typescript\nimport '@cds/core/button/register.js';\n```\n\n```html\n<cds-inline-button>Button text goes here</cds-inline-button>\n```",
-      "slots": [
-        {
-          "name": "",
-          "description": "Content slot for inside the button"
-        }
-      ],
-      "cssProperties": [
-        {
-          "name": "--text-decoration"
-        },
-        {
-          "name": "--color"
-        },
-        {
-          "name": "--font-size"
-        },
-        {
-          "name": "--line-height"
-        },
-        {
-          "name": "--letter-spacing"
-        }
-      ]
-    },
     {
       "name": "cds-card",
       "path": "./card/card.element.d.ts",
-      "description": "Web component card.\n\n```typescript\nimport '@cds/core/card/register.js';\n```\n\n```html\n<cds-card aria-labelledby=\"{label your card}\">\n  <div cds-layout=\"vertical gap:md\">\n    <h2 id=\"{label your card}\" cds-text=\"section\" cds-layout=\"p-y:sm\">\n      <!-- Card title -->\n    </h2>\n\n    <cds-divider cds-card-remove-margin></cds-divider>\n\n    <div cds-text=\"body light\" cds-layout=\"p-y:md\">\n      <!-- Card content -->\n    </div>\n\n    <cds-divider cds-card-remove-margin></cds-divider>\n\n    <div cds-layout=\"horizontal gap:sm p-y:sm align:vertical-center\">\n      <cds-button action=\"flat-inline\">View</cds-button>\n    </div>\n  </div>\n</cds-card>\n```",
+      "description": "Web component card.\n\n```typescript\nimport '@cds/core/card/register.js';\n```\n\n```html\n<cds-card aria-labelledby=\"{label your card}\">\n  <div cds-layout=\"vertical gap:md\">\n    <h2 id=\"{label your card}\" cds-text=\"section\">\n      <!-- Card title -->\n    </h2>\n\n    <cds-divider cds-card-remove-margin></cds-divider>\n\n    <div cds-text=\"body light\">\n      <!-- Card content -->\n    </div>\n\n    <cds-divider cds-card-remove-margin></cds-divider>\n\n    <div cds-layout=\"horizontal gap:sm align:vertical-center\">\n      <cds-button action=\"flat-inline\">View</cds-button>\n    </div>\n  </div>\n</cds-card>\n```",
       "properties": [
         {
           "name": "role",
@@ -1155,7 +1396,7 @@
     {
       "name": "cds-card",
       "path": "./card/register.d.ts",
-      "description": "Web component card.\n\n```typescript\nimport '@cds/core/card/register.js';\n```\n\n```html\n<cds-card aria-labelledby=\"{label your card}\">\n  <div cds-layout=\"vertical gap:md\">\n    <h2 id=\"{label your card}\" cds-text=\"section\" cds-layout=\"p-y:sm\">\n      <!-- Card title -->\n    </h2>\n\n    <cds-divider cds-card-remove-margin></cds-divider>\n\n    <div cds-text=\"body light\" cds-layout=\"p-y:md\">\n      <!-- Card content -->\n    </div>\n\n    <cds-divider cds-card-remove-margin></cds-divider>\n\n    <div cds-layout=\"horizontal gap:sm p-y:sm align:vertical-center\">\n      <cds-button action=\"flat-inline\">View</cds-button>\n    </div>\n  </div>\n</cds-card>\n```",
+      "description": "Web component card.\n\n```typescript\nimport '@cds/core/card/register.js';\n```\n\n```html\n<cds-card aria-labelledby=\"{label your card}\">\n  <div cds-layout=\"vertical gap:md\">\n    <h2 id=\"{label your card}\" cds-text=\"section\">\n      <!-- Card title -->\n    </h2>\n\n    <cds-divider cds-card-remove-margin></cds-divider>\n\n    <div cds-text=\"body light\">\n      <!-- Card content -->\n    </div>\n\n    <cds-divider cds-card-remove-margin></cds-divider>\n\n    <div cds-layout=\"horizontal gap:sm align:vertical-center\">\n      <cds-button action=\"flat-inline\">View</cds-button>\n    </div>\n  </div>\n</cds-card>\n```",
       "properties": [
         {
           "name": "role",
@@ -1398,7 +1639,7 @@
       "properties": [
         {
           "name": "orientation",
-          "type": "\"horizontal\" | \"vertical\""
+          "type": "\"vertical\" | \"horizontal\""
         }
       ],
       "cssProperties": [
@@ -1420,7 +1661,7 @@
       "properties": [
         {
           "name": "orientation",
-          "type": "\"horizontal\" | \"vertical\""
+          "type": "\"vertical\" | \"horizontal\""
         }
       ],
       "cssProperties": [
@@ -1632,20 +1873,11 @@
     {
       "name": "cds-control-action",
       "path": "./forms/control-action/control-action.element.d.ts",
-      "description": "Control Action\n\n```typescript\nimport '@cds/core/forms/register.js';\n```\n\n```html\n<cds-control-action>\n\n</cds-control-action>\n```",
+      "description": "Control Action Button\n\n```typescript\nimport '@cds/core/forms/register.js';\n```\n\n```html\n<cds-control-action>\n\n</cds-control-action>\n```",
       "properties": [
         {
           "name": "action",
-          "description": "Set the action type placement within the supporting input control",
           "type": "\"label\" | \"prefix\" | \"suffix\""
-        },
-        {
-          "name": "readonly",
-          "type": "boolean"
-        },
-        {
-          "name": "ariaLabel",
-          "type": "string"
         }
       ],
       "slots": [
@@ -1951,20 +2183,11 @@
     {
       "name": "cds-control-action",
       "path": "./forms/register.d.ts",
-      "description": "Control Action\n\n```typescript\nimport '@cds/core/forms/register.js';\n```\n\n```html\n<cds-control-action>\n\n</cds-control-action>\n```",
+      "description": "Control Action Button\n\n```typescript\nimport '@cds/core/forms/register.js';\n```\n\n```html\n<cds-control-action>\n\n</cds-control-action>\n```",
       "properties": [
         {
           "name": "action",
-          "description": "Set the action type placement within the supporting input control",
           "type": "\"label\" | \"prefix\" | \"suffix\""
-        },
-        {
-          "name": "readonly",
-          "type": "boolean"
-        },
-        {
-          "name": "ariaLabel",
-          "type": "string"
         }
       ],
       "slots": [
@@ -2410,59 +2633,23 @@
     {
       "name": "cds-internal-close-button",
       "path": "./internal-components/close-button/close-button.element.d.ts",
-      "description": "Standard close button for Clarity Components\n\n```typescript\nimport '@cds/core/internal-components/close-button/register.js';\n```\n\n```html\n<cds-internal-close-button></cds-internal-close-button>\n```",
+      "description": "Standard close button for Clarity Components extends default cds-button-action\n\n```typescript\nimport '@cds/core/internal-components/close-button/register.js';\n```\n\n```html\n<cds-internal-close-button></cds-internal-close-button>\n```",
       "properties": [
         {
-          "name": "iconSize",
-          "type": "string"
-        },
-        {
-          "name": "iconShape",
+          "name": "shape",
           "type": "string"
         }
-      ],
-      "cssProperties": [
-        {
-          "name": "--background"
-        },
-        {
-          "name": "--color"
-        },
-        {
-          "name": "--opacity"
-        },
-        {
-          "name": "--padding"
-        }
       ]
     },
     {
       "name": "cds-internal-close-button",
       "path": "./internal-components/close-button/register.d.ts",
-      "description": "Standard close button for Clarity Components\n\n```typescript\nimport '@cds/core/internal-components/close-button/register.js';\n```\n\n```html\n<cds-internal-close-button></cds-internal-close-button>\n```",
+      "description": "Standard close button for Clarity Components extends default cds-button-action\n\n```typescript\nimport '@cds/core/internal-components/close-button/register.js';\n```\n\n```html\n<cds-internal-close-button></cds-internal-close-button>\n```",
       "properties": [
         {
-          "name": "iconSize",
-          "type": "string"
-        },
-        {
-          "name": "iconShape",
+          "name": "shape",
           "type": "string"
         }
-      ],
-      "cssProperties": [
-        {
-          "name": "--background"
-        },
-        {
-          "name": "--color"
-        },
-        {
-          "name": "--opacity"
-        },
-        {
-          "name": "--padding"
-        }
       ]
     },
     {
@@ -3780,8 +3967,7 @@
           "type": "\"first\" | \"prev\" | \"next\" | \"last\""
         },
         {
-          "name": "cdsIcon",
-          "type": "HTMLElement"
+          "name": "disabled"
         }
       ],
       "slots": [
@@ -3872,8 +4058,7 @@
           "type": "\"first\" | \"prev\" | \"next\" | \"last\""
         },
         {
-          "name": "cdsIcon",
-          "type": "HTMLElement"
+          "name": "disabled"
         }
       ],
       "slots": [
@@ -4438,9 +4623,9 @@
       ]
     },
     {
-      "name": "cds-checkbox",
+      "name": "cds-checkbox-panel",
       "path": "./selection-panels/checkbox/checkbox-panel.element.d.ts",
-      "description": "Checkbox\n\n```typescript\nimport '@cds/core/checkbox/register.js';\n```\n\n```html\n<cds-checkbox>\n   <label>\n     <div cds-layout=\"vertical align:center\">\n       <span cds-text=\"section\">VM One</span>\n       <cds-icon shape=\"vm\" badge=\"info\"></cds-icon>\n       <p>Machines for orchestration and automation.</p>\n     </div>\n   </label>\n   <input type=\"checkbox\" />\n   <cds-control-message>message text</cds-control-message>\n</cds-checkbox>\n```",
+      "description": "Checkbox Panel\n\n```typescript\nimport '@cds/core/selection-panels/checkbox/register.js';\n```\n\n```html\n<cds-checkbox-panel>\n   <label cds-layout=\"vertical gap:md align:center\">\n     <span cds-text=\"section\">VM One</span>\n     <span cds-text=\"subsection center\">Orchestrate & Automate</p>\n   </label>\n   <input type=\"radio\" value=\"0\" />\n</cds-checkbox-panel>\n```",
       "properties": [
         {
           "name": "size",
@@ -4471,7 +4656,7 @@
     {
       "name": "cds-checkbox-panel",
       "path": "./selection-panels/checkbox/register.d.ts",
-      "description": "Checkbox\n\n```typescript\nimport '@cds/core/checkbox/register.js';\n```\n\n```html\n<cds-checkbox>\n   <label>\n     <div cds-layout=\"vertical align:center\">\n       <span cds-text=\"section\">VM One</span>\n       <cds-icon shape=\"vm\" badge=\"info\"></cds-icon>\n       <p>Machines for orchestration and automation.</p>\n     </div>\n   </label>\n   <input type=\"checkbox\" />\n   <cds-control-message>message text</cds-control-message>\n</cds-checkbox>\n```",
+      "description": "Checkbox Panel\n\n```typescript\nimport '@cds/core/selection-panels/checkbox/register.js';\n```\n\n```html\n<cds-checkbox-panel>\n   <label cds-layout=\"vertical gap:md align:center\">\n     <span cds-text=\"section\">VM One</span>\n     <span cds-text=\"subsection center\">Orchestrate & Automate</p>\n   </label>\n   <input type=\"radio\" value=\"0\" />\n</cds-checkbox-panel>\n```",
       "properties": [
         {
           "name": "size",
@@ -4500,9 +4685,9 @@
       ]
     },
     {
-      "name": "cds-radio",
+      "name": "cds-radio-panel",
       "path": "./selection-panels/radio/radio-panel.element.d.ts",
-      "description": "Checkbox\n\n```typescript\nimport '@cds/core/checkbox/register.js';\n```\n\n```html\n<cds-radio>\n   <label>\n     <div cds-layout=\"vertical align:center\">\n       <span cds-text=\"section\">VM One</span>\n       <cds-icon shape=\"vm\" badge=\"info\"></cds-icon>\n       <p>Machines for orchestration and automation.</p>\n     </div>\n   </label>\n   <input type=\"radio\" />\n   <cds-control-message>message text</cds-control-message>\n</cds-radio>\n```",
+      "description": "Radio Panel\n\n```typescript\nimport '@cds/core/selection-panels/radio/register.js';\n```\n\n```html\n<cds-radio-group>\n   <cds-radio-panel>\n     <label cds-layout=\"vertical gap:md align:center\">\n       <span cds-text=\"section\">VM One</span>\n       <span cds-text=\"subsection center\">Orchestrate & Automate</p>\n     </label>\n     <input type=\"radio\" value=\"0\" />\n   </cds-radio-panel>\n   <cds-radio-panel>\n     <label cds-layout=\"vertical gap:md align:center\">\n       <span cds-text=\"section\">VM One</span>\n       <span cds-text=\"subsection center\">Orchestrate & Automate</p>\n     </label>\n     <input type=\"radio\" value=\"1\" />\n   </cds-radio-panel>\n</cds-radio-group>\n```",
       "properties": [
         {
           "name": "size",
@@ -4512,7 +4697,7 @@
       "slots": [
         {
           "name": "",
-          "description": "For projecting checkbox and it's complex label"
+          "description": "For projecting radio and it's complex label"
         }
       ],
       "cssProperties": [
@@ -4533,7 +4718,7 @@
     {
       "name": "cds-radio-panel",
       "path": "./selection-panels/radio/register.d.ts",
-      "description": "Checkbox\n\n```typescript\nimport '@cds/core/checkbox/register.js';\n```\n\n```html\n<cds-radio>\n   <label>\n     <div cds-layout=\"vertical align:center\">\n       <span cds-text=\"section\">VM One</span>\n       <cds-icon shape=\"vm\" badge=\"info\"></cds-icon>\n       <p>Machines for orchestration and automation.</p>\n     </div>\n   </label>\n   <input type=\"radio\" />\n   <cds-control-message>message text</cds-control-message>\n</cds-radio>\n```",
+      "description": "Radio Panel\n\n```typescript\nimport '@cds/core/selection-panels/radio/register.js';\n```\n\n```html\n<cds-radio-group>\n   <cds-radio-panel>\n     <label cds-layout=\"vertical gap:md align:center\">\n       <span cds-text=\"section\">VM One</span>\n       <span cds-text=\"subsection center\">Orchestrate & Automate</p>\n     </label>\n     <input type=\"radio\" value=\"0\" />\n   </cds-radio-panel>\n   <cds-radio-panel>\n     <label cds-layout=\"vertical gap:md align:center\">\n       <span cds-text=\"section\">VM One</span>\n       <span cds-text=\"subsection center\">Orchestrate & Automate</p>\n     </label>\n     <input type=\"radio\" value=\"1\" />\n   </cds-radio-panel>\n</cds-radio-group>\n```",
       "properties": [
         {
           "name": "size",
@@ -4543,7 +4728,7 @@
       "slots": [
         {
           "name": "",
-          "description": "For projecting checkbox and it's complex label"
+          "description": "For projecting radio and it's complex label"
         }
       ],
       "cssProperties": [

package/datalist/datalist.element.d.ts

@@ -37,5 +37,4 @@ export declare class CdsDatalist extends CdsControl {
     protected datalistControl: HTMLDataListElement;
     protected get suffixDefaultTemplate(): import("lit-html").TemplateResult<1>;
     static get styles(): import("lit").CSSResultGroup[];
-    constructor();
 }

package/datalist/datalist.element.js

@@ -1,2 +1,2 @@
-import{__decorate as o}from"tslib";import{html as r}from"lit";import{globalStyle as t,querySlot as s}from"@cds/core/internal";import{CdsControl as e}from"@cds/core/forms";import{inputStyles as c}from"@cds/core/input";import{ClarityIcons as i}from"@cds/core/icon/icon.service.js";import{angleIcon as l}from"@cds/core/icon/shapes/angle.js";import n from"./datalist.global.scss.js";class a extends e{constructor(){super(),this.globalStyles=n,i.addIcons(l)}get suffixDefaultTemplate(){return r`<cds-control-action readonly="readonly"><cds-icon shape="angle" direction="down"></cds-icon></cds-control-action>`}static get styles(){return[...super.styles,c]}}o([t()],a.prototype,"globalStyles",void 0),o([s("datalist",{required:"error"})],a.prototype,"datalistControl",void 0);export{a as CdsDatalist};
+import{__decorate as t}from"tslib";import{html as r}from"lit";import{globalStyle as o,querySlot as e}from"@cds/core/internal";import{CdsControl as s}from"@cds/core/forms";import{inputStyles as l}from"@cds/core/input";import i from"./datalist.global.scss.js";class a extends s{constructor(){super(...arguments),this.globalStyles=i}get suffixDefaultTemplate(){return r`<cds-button-expand pressed readonly="readonly"></cds-button-expand>`}static get styles(){return[...super.styles,l]}}t([o()],a.prototype,"globalStyles",void 0),t([e("datalist",{required:"error"})],a.prototype,"datalistControl",void 0);export{a as CdsDatalist};
 //# sourceMappingURL=datalist.element.js.map

package/datalist/datalist.element.js.map

@@ -1 +1 @@
-{"version":3,"file":"datalist.element.js","sources":["../../../src/datalist/datalist.element.ts"],"sourcesContent":null,"names":["CdsDatalist","CdsControl","[object Object]","super","this","globalStyles","styles","ClarityIcons","addIcons","angleIcon","suffixDefaultTemplate","html","inputStyles","__decorate","globalStyle","prototype","querySlot","required"],"mappings":"2XA8CO,MAAMA,UAAoBC,EAC7BC,cACIC,QACAC,KAAKC,aAAeC,EACpBC,EAAaC,SAASC,GAE1BC,4BACI,OAAOC,CAAK,oHAEhBL,oBACI,MAAO,IAAIH,MAAMG,OAAQM,IAGjCC,EAAW,CACPC,KACDd,EAAYe,UAAW,oBAAgB,GAC1CF,EAAW,CACPG,EAAU,WAAY,CAAEC,SAAU,WACnCjB,EAAYe,UAAW,uBAAmB"}
+{"version":3,"file":"datalist.element.js","sources":["../../../src/datalist/datalist.element.ts"],"sourcesContent":null,"names":["CdsDatalist","CdsControl","[object Object]","super","arguments","this","globalStyles","styles","suffixDefaultTemplate","html","inputStyles","__decorate","globalStyle","prototype","querySlot","required"],"mappings":"kQA4CO,MAAMA,UAAoBC,EAC7BC,cACIC,SAASC,WACTC,KAAKC,aAAeC,EAExBC,4BACI,OAAOC,CAAK,sEAEhBF,oBACI,MAAO,IAAIJ,MAAMI,OAAQG,IAGjCC,EAAW,CACPC,KACDZ,EAAYa,UAAW,oBAAgB,GAC1CF,EAAW,CACPG,EAAU,WAAY,CAAEC,SAAU,WACnCf,EAAYa,UAAW,uBAAmB"}

package/datalist/register.d.ts

@@ -1,6 +1,6 @@
 import { CdsDatalist } from './datalist.element.js';
 import '@cds/core/forms/register.js';
-import '@cds/core/icon/register.js';
+import '@cds/core/button-expand/register.js';
 declare global {
     interface HTMLElementTagNameMap {
         'cds-datalist': CdsDatalist;

package/datalist/register.js

@@ -1,2 +1,2 @@
-import{registerElementSafely as r}from"@cds/core/internal";import{CdsDatalist as s}from"./datalist.element.js";import"@cds/core/forms/register.js";import"@cds/core/icon/register.js";r("cds-datalist",s);
+import{registerElementSafely as r}from"@cds/core/internal";import{CdsDatalist as t}from"./datalist.element.js";import"@cds/core/forms/register.js";import"@cds/core/button-expand/register.js";r("cds-datalist",t);
 //# sourceMappingURL=register.js.map