@cds/core 5.5.7 → 5.6.2

package/custom-elements.legacy.json

@@ -255,19 +255,17 @@
       "properties": [
         {
           "name": "size",
+          "description": "Sets the overall height and width of the alerts inside the alert group",
           "type": "default | sm"
         },
         {
           "name": "type",
+          "description": "Passed down into the alerts inside the alert-group",
           "type": "default | banner | light"
         },
-        {
-          "name": "role",
-          "description": "Autosets the alert groups aria role to 'region'",
-          "type": "string"
-        },
         {
           "name": "status",
+          "description": "Sets the status of the alerts inside the alert group",
           "type": "neutral | info | success | warning | danger | alt | loading"
         }
       ],
@@ -320,6 +318,7 @@
       "properties": [
         {
           "name": "size",
+          "description": "Sets the overall height and width of the alert and icon based on value",
           "type": "default | sm"
         },
         {
@@ -329,6 +328,7 @@
         },
         {
           "name": "status",
+          "description": "Sets the color of the alert from a predefined list of statuses",
           "type": "neutral | info | success | warning | danger | alt | loading"
         },
         {
@@ -379,6 +379,7 @@
       "properties": [
         {
           "name": "size",
+          "description": "Sets the overall height and width of the alert and icon based on value",
           "type": "default | sm"
         },
         {
@@ -388,6 +389,7 @@
         },
         {
           "name": "status",
+          "description": "Sets the color of the alert from a predefined list of statuses",
           "type": "neutral | info | success | warning | danger | alt | loading"
         },
         {
@@ -459,19 +461,17 @@
       "properties": [
         {
           "name": "size",
+          "description": "Sets the overall height and width of the alerts inside the alert group",
           "type": "default | sm"
         },
         {
           "name": "type",
+          "description": "Passed down into the alerts inside the alert-group",
           "type": "default | banner | light"
         },
-        {
-          "name": "role",
-          "description": "Autosets the alert groups aria role to 'region'",
-          "type": "string"
-        },
         {
           "name": "status",
+          "description": "Sets the status of the alerts inside the alert group",
           "type": "neutral | info | success | warning | danger | alt | loading"
         }
       ],
@@ -529,7 +529,8 @@
         },
         {
           "name": "status",
-          "type": "neutral | info | success | warning | danger"
+          "description": "Sets the color of the badge",
+          "type": "'neutral' | 'info' | 'success' | 'warning' | 'danger'"
         }
       ],
       "slots": [
@@ -580,7 +581,8 @@
         },
         {
           "name": "status",
-          "type": "neutral | info | success | warning | danger"
+          "description": "Sets the color of the badge",
+          "type": "'neutral' | 'info' | 'success' | 'warning' | 'danger'"
         }
       ],
       "slots": [
@@ -623,6 +625,12 @@
       "name": "cds-breadcrumb",
       "path": "./breadcrumb/breadcrumb.element.d.ts",
       "description": "```typescript\nimport '@cds/core/breadcrumb/register.js';\n```\n\n```html\n<cds-breadcrumb aria-label=\"breadcrumb\">\n   <a href=\"/home\" cds-text=\"link\">Home</a>\n   <a href=\"/parent\" cds-text=\"link\">Parent page</a>\n   <span aria-current=\"page\">Current page</span>\n</cds-breadcrumb>\n```",
+      "properties": [
+        {
+          "name": "role",
+          "type": "string"
+        }
+      ],
       "cssProperties": [
         {
           "name": "--font-size"
@@ -642,6 +650,12 @@
       "name": "cds-breadcrumb",
       "path": "./breadcrumb/register.d.ts",
       "description": "```typescript\nimport '@cds/core/breadcrumb/register.js';\n```\n\n```html\n<cds-breadcrumb aria-label=\"breadcrumb\">\n   <a href=\"/home\" cds-text=\"link\">Home</a>\n   <a href=\"/parent\" cds-text=\"link\">Parent page</a>\n   <span aria-current=\"page\">Current page</span>\n</cds-breadcrumb>\n```",
+      "properties": [
+        {
+          "name": "role",
+          "type": "string"
+        }
+      ],
       "cssProperties": [
         {
           "name": "--font-size"
@@ -684,6 +698,7 @@
         },
         {
           "name": "loadingState",
+          "description": "Changes the button content based on the value passed.",
           "type": "default | loading | success | error"
         },
         {
@@ -777,6 +792,7 @@
         },
         {
           "name": "loadingState",
+          "description": "Changes the button content based on the value passed.",
           "type": "default | loading | success | error"
         },
         {
@@ -893,6 +909,7 @@
         },
         {
           "name": "loadingState",
+          "description": "Changes the button content based on the value passed.",
           "type": "default | loading | success | error"
         },
         {
@@ -986,6 +1003,7 @@
         },
         {
           "name": "loadingState",
+          "description": "Changes the button content based on the value passed.",
           "type": "default | loading | success | error"
         },
         {
@@ -1484,6 +1502,7 @@
       "properties": [
         {
           "name": "status",
+          "description": "Set the status of control group validation",
           "type": "neutral | error | success"
         },
         {
@@ -1502,6 +1521,7 @@
         },
         {
           "name": "controlWidth",
+          "description": "Adjust the control from the default full width or the browser default width",
           "type": "stretch | shrink"
         },
         {
@@ -1512,10 +1532,6 @@
         {
           "name": "styles",
           "type": "CSSResultGroup[]"
-        },
-        {
-          "name": "layoutStable",
-          "type": "boolean"
         }
       ],
       "slots": [
@@ -1537,10 +1553,12 @@
         },
         {
           "name": "status",
+          "description": "Set the status of form control validation",
           "type": "neutral | error | success"
         },
         {
           "name": "controlWidth",
+          "description": "Adjust the control from the default full width or the browser default width",
           "type": "stretch | shrink"
         },
         {
@@ -1555,14 +1573,11 @@
         },
         {
           "name": "layout",
+          "description": "Set to adjust the default control layout. When `responsive` is true this will be the largest size to scale to.",
           "type": "vertical | horizontal | compact"
         },
         {
           "name": "layoutChange"
-        },
-        {
-          "name": "layoutStable",
-          "type": "boolean"
         }
       ],
       "slots": [
@@ -1610,6 +1625,7 @@
       "properties": [
         {
           "name": "status",
+          "description": "Set the status of form control message validation",
           "type": "neutral | error | success"
         },
         {
@@ -1649,10 +1665,12 @@
       "properties": [
         {
           "name": "status",
+          "description": "Set the status of form control validation",
           "type": "neutral | error | success"
         },
         {
           "name": "controlWidth",
+          "description": "Adjust the control from the default full width or the browser default width",
           "type": "stretch | shrink"
         },
         {
@@ -1667,14 +1685,11 @@
         },
         {
           "name": "layout",
+          "description": "Set to adjust the default control layout. When `responsive` is true this will be the largest size to scale to.",
           "type": "vertical | horizontal | compact"
         },
         {
           "name": "layoutChange"
-        },
-        {
-          "name": "layoutStable",
-          "type": "boolean"
         }
       ],
       "slots": [
@@ -1696,10 +1711,12 @@
       "properties": [
         {
           "name": "layout",
+          "description": "Set to adjust the default control layout for all controls within form group.\nWhen `responsive` is true this will be the largest size to scale to.",
           "type": "horizontal | horizontal  -inline | vertical | vertical-inline | compact"
         },
         {
           "name": "controlWidth",
+          "description": "Adjust the control from the default full width or the browser default width",
           "type": "stretch | shrink"
         },
         {
@@ -1732,10 +1749,12 @@
       "properties": [
         {
           "name": "status",
+          "description": "Set the status of form control validation",
           "type": "neutral | error | success"
         },
         {
           "name": "controlWidth",
+          "description": "Adjust the control from the default full width or the browser default width",
           "type": "stretch | shrink"
         },
         {
@@ -1750,14 +1769,11 @@
         },
         {
           "name": "layout",
+          "description": "Set to adjust the default control layout. When `responsive` is true this will be the largest size to scale to.",
           "type": "vertical | horizontal | compact"
         },
         {
           "name": "layoutChange"
-        },
-        {
-          "name": "layoutStable",
-          "type": "boolean"
         }
       ],
       "slots": [
@@ -1805,6 +1821,7 @@
       "properties": [
         {
           "name": "status",
+          "description": "Set the status of control group validation",
           "type": "neutral | error | success"
         },
         {
@@ -1823,6 +1840,7 @@
         },
         {
           "name": "controlWidth",
+          "description": "Adjust the control from the default full width or the browser default width",
           "type": "stretch | shrink"
         },
         {
@@ -1833,10 +1851,6 @@
         {
           "name": "styles",
           "type": "CSSResultGroup[]"
-        },
-        {
-          "name": "layoutStable",
-          "type": "boolean"
         }
       ],
       "slots": [
@@ -1858,10 +1872,12 @@
         },
         {
           "name": "status",
+          "description": "Set the status of form control validation",
           "type": "neutral | error | success"
         },
         {
           "name": "controlWidth",
+          "description": "Adjust the control from the default full width or the browser default width",
           "type": "stretch | shrink"
         },
         {
@@ -1876,14 +1892,11 @@
         },
         {
           "name": "layout",
+          "description": "Set to adjust the default control layout. When `responsive` is true this will be the largest size to scale to.",
           "type": "vertical | horizontal | compact"
         },
         {
           "name": "layoutChange"
-        },
-        {
-          "name": "layoutStable",
-          "type": "boolean"
         }
       ],
       "slots": [
@@ -1931,6 +1944,7 @@
       "properties": [
         {
           "name": "status",
+          "description": "Set the status of form control message validation",
           "type": "neutral | error | success"
         },
         {
@@ -1970,10 +1984,12 @@
       "properties": [
         {
           "name": "layout",
+          "description": "Set to adjust the default control layout for all controls within form group.\nWhen `responsive` is true this will be the largest size to scale to.",
           "type": "horizontal | horizontal  -inline | vertical | vertical-inline | compact"
         },
         {
           "name": "controlWidth",
+          "description": "Adjust the control from the default full width or the browser default width",
           "type": "stretch | shrink"
         },
         {
@@ -2011,14 +2027,17 @@
         },
         {
           "name": "size",
+          "description": "Apply numerical width-height or a t-shirt-sized CSS classname",
           "type": "string | xs | sm | md | lg | xl | xxl"
         },
         {
           "name": "direction",
+          "description": "Takes a directional value that rotates the icon 90° with the\ntop of the icon pointing in the specified direction.",
           "type": "up | down | left | right"
         },
         {
           "name": "flip",
+          "description": "Takes an orientation value that reverses the orientation of the icon vertically or horizontally'",
           "type": "horizontal | vertical"
         },
         {
@@ -2028,6 +2047,7 @@
         },
         {
           "name": "status",
+          "description": "Changes color of icon fills and outlines",
           "type": "info | success | warning | danger"
         },
         {
@@ -2037,6 +2057,7 @@
         },
         {
           "name": "badge",
+          "description": "Sets the color of the icon decoration that appears in the top-right corner\nof the glyph. The icon decoration is derived from the following predefined types.\n\nThe color of the badge can change according to the following\nlist of statuses:\n'info'  -> blue dot\n'success' -> green dot\n'warning' -> yellow dot\n'danger' -> red dot\n'inherit' -> dot inherits color of full icon glyph\n'warning-triangle' -> yellow triangle\n'inherit-triangle' -> triangle inherits color of full icon glyph\nunrecognized value, empty string, or true -> red dot\n\nBy default, the badge displays a 'danger' dot (a red-colored dot).\n\nSetting the badge to 'false' or removing the attribute will remove the default icon badge.",
           "type": "info | success | warning | danger | inherit | warning  -triangle | inherit-triangle"
         }
       ],
@@ -2061,14 +2082,17 @@
         },
         {
           "name": "size",
+          "description": "Apply numerical width-height or a t-shirt-sized CSS classname",
           "type": "string | xs | sm | md | lg | xl | xxl"
         },
         {
           "name": "direction",
+          "description": "Takes a directional value that rotates the icon 90° with the\ntop of the icon pointing in the specified direction.",
           "type": "up | down | left | right"
         },
         {
           "name": "flip",
+          "description": "Takes an orientation value that reverses the orientation of the icon vertically or horizontally'",
           "type": "horizontal | vertical"
         },
         {
@@ -2078,6 +2102,7 @@
         },
         {
           "name": "status",
+          "description": "Changes color of icon fills and outlines",
           "type": "info | success | warning | danger"
         },
         {
@@ -2087,6 +2112,7 @@
         },
         {
           "name": "badge",
+          "description": "Sets the color of the icon decoration that appears in the top-right corner\nof the glyph. The icon decoration is derived from the following predefined types.\n\nThe color of the badge can change according to the following\nlist of statuses:\n'info'  -> blue dot\n'success' -> green dot\n'warning' -> yellow dot\n'danger' -> red dot\n'inherit' -> dot inherits color of full icon glyph\n'warning-triangle' -> yellow triangle\n'inherit-triangle' -> triangle inherits color of full icon glyph\nunrecognized value, empty string, or true -> red dot\n\nBy default, the badge displays a 'danger' dot (a red-colored dot).\n\nSetting the badge to 'false' or removing the attribute will remove the default icon badge.",
           "type": "info | success | warning | danger | inherit | warning  -triangle | inherit-triangle"
         }
       ],
@@ -2758,10 +2784,6 @@
           "name": "disabled",
           "type": "boolean"
         },
-        {
-          "name": "role",
-          "type": "string"
-        },
         {
           "name": "expanded",
           "type": "boolean"
@@ -2774,6 +2796,10 @@
           "name": "itemText",
           "type": "NodeListOf<HTMLSpanElement>"
         },
+        {
+          "name": "role",
+          "type": "string"
+        },
         {
           "name": "hasFocus",
           "type": "boolean"
@@ -2835,9 +2861,6 @@
           "name": "itemText",
           "type": "NodeListOf<HTMLSpanElement>"
         },
-        {
-          "name": "toggleIconDirection"
-        },
         {
           "name": "hasFocus",
           "type": "boolean"
@@ -2880,17 +2903,9 @@
           "name": "cdsMotion",
           "type": "string"
         },
-        {
-          "name": "role",
-          "type": "string"
-        },
         {
           "name": "cdsMotionChange"
         },
-        {
-          "name": "ariaActiveDescendant",
-          "description": "Set and update the aria-active descended value onto the navigation."
-        },
         {
           "name": "expanded",
           "description": "Vertical navigation elements can be either wide or narrow. Expanded indicates it should be wide.\nWhen navigation is wide cds-navigation-start button elements and cds-navigation-item a elements display\ntext. When it is narrow they do not (consumer should provide an icon that stays visible).",
@@ -2901,8 +2916,8 @@
           "type": "{ [key: string]: string | undefined; }"
         },
         {
-          "name": "currentActiveItem",
-          "type": "CdsNavigationItem | CdsNavigationStart | undefined"
+          "name": "role",
+          "type": "string"
         }
       ],
       "events": [
@@ -2965,17 +2980,9 @@
           "name": "cdsMotion",
           "type": "string"
         },
-        {
-          "name": "role",
-          "type": "string"
-        },
         {
           "name": "cdsMotionChange"
         },
-        {
-          "name": "ariaActiveDescendant",
-          "description": "Set and update the aria-active descended value onto the navigation."
-        },
         {
           "name": "expanded",
           "description": "Vertical navigation elements can be either wide or narrow. Expanded indicates it should be wide.\nWhen navigation is wide cds-navigation-start button elements and cds-navigation-item a elements display\ntext. When it is narrow they do not (consumer should provide an icon that stays visible).",
@@ -2986,8 +2993,8 @@
           "type": "{ [key: string]: string | undefined; }"
         },
         {
-          "name": "currentActiveItem",
-          "type": "CdsNavigationItem | CdsNavigationStart | undefined"
+          "name": "role",
+          "type": "string"
         }
       ],
       "events": [
@@ -3118,9 +3125,6 @@
           "name": "itemText",
           "type": "NodeListOf<HTMLSpanElement>"
         },
-        {
-          "name": "toggleIconDirection"
-        },
         {
           "name": "hasFocus",
           "type": "boolean"
@@ -3167,10 +3171,6 @@
           "name": "disabled",
           "type": "boolean"
         },
-        {
-          "name": "role",
-          "type": "string"
-        },
         {
           "name": "expanded",
           "type": "boolean"
@@ -3183,6 +3183,10 @@
           "name": "itemText",
           "type": "NodeListOf<HTMLSpanElement>"
         },
+        {
+          "name": "role",
+          "type": "string"
+        },
         {
           "name": "hasFocus",
           "type": "boolean"
@@ -3462,6 +3466,7 @@
       "properties": [
         {
           "name": "status",
+          "description": "Sets the color of the badge",
           "type": "neutral | info | success | warning | danger"
         },
         {
@@ -3481,7 +3486,17 @@
         },
         {
           "name": "size",
+          "description": "Apply numerical width-height or a t-shirt-sized CSS classname",
           "type": "string | sm | md | lg | xl | xxl"
+        },
+        {
+          "name": "ariaLabel",
+          "description": "The aria-label attribute is added here as a convenience. It is not set\nto a default value.\n\nIf this attribute/property remains unset, it will default to an i18n string.\nThis means that the aria-label can be customized using the aria-label\nattribute or by overriding the i18n value for the progress circle.",
+          "type": "string"
+        },
+        {
+          "name": "i18n",
+          "type": "{ loading: string; looping: string; }"
         }
       ],
       "cssProperties": [
@@ -3506,6 +3521,7 @@
       "properties": [
         {
           "name": "status",
+          "description": "Sets the color of the badge",
           "type": "neutral | info | success | warning | danger"
         },
         {
@@ -3525,7 +3541,17 @@
         },
         {
           "name": "size",
+          "description": "Apply numerical width-height or a t-shirt-sized CSS classname",
           "type": "string | sm | md | lg | xl | xxl"
+        },
+        {
+          "name": "ariaLabel",
+          "description": "The aria-label attribute is added here as a convenience. It is not set\nto a default value.\n\nIf this attribute/property remains unset, it will default to an i18n string.\nThis means that the aria-label can be customized using the aria-label\nattribute or by overriding the i18n value for the progress circle.",
+          "type": "string"
+        },
+        {
+          "name": "i18n",
+          "type": "{ loading: string; looping: string; }"
         }
       ],
       "cssProperties": [
@@ -3861,6 +3887,130 @@
         }
       ]
     },
+    {
+      "name": "cds-checkbox",
+      "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```",
+      "properties": [
+        {
+          "name": "size",
+          "type": "SelectionPanelSizes"
+        }
+      ],
+      "slots": [
+        {
+          "name": "",
+          "description": "For projecting checkbox and it's complex label"
+        }
+      ],
+      "cssProperties": [
+        {
+          "name": "--width"
+        },
+        {
+          "name": "--height"
+        },
+        {
+          "name": "--border"
+        },
+        {
+          "name": "--box-shadow"
+        }
+      ]
+    },
+    {
+      "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```",
+      "properties": [
+        {
+          "name": "size",
+          "type": "SelectionPanelSizes"
+        }
+      ],
+      "slots": [
+        {
+          "name": "",
+          "description": "For projecting checkbox and it's complex label"
+        }
+      ],
+      "cssProperties": [
+        {
+          "name": "--width"
+        },
+        {
+          "name": "--height"
+        },
+        {
+          "name": "--border"
+        },
+        {
+          "name": "--box-shadow"
+        }
+      ]
+    },
+    {
+      "name": "cds-radio",
+      "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```",
+      "properties": [
+        {
+          "name": "size",
+          "type": "SelectionPanelSizes"
+        }
+      ],
+      "slots": [
+        {
+          "name": "",
+          "description": "For projecting checkbox and it's complex label"
+        }
+      ],
+      "cssProperties": [
+        {
+          "name": "--width"
+        },
+        {
+          "name": "--height"
+        },
+        {
+          "name": "--border"
+        },
+        {
+          "name": "--box-shadow"
+        }
+      ]
+    },
+    {
+      "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```",
+      "properties": [
+        {
+          "name": "size",
+          "type": "SelectionPanelSizes"
+        }
+      ],
+      "slots": [
+        {
+          "name": "",
+          "description": "For projecting checkbox and it's complex label"
+        }
+      ],
+      "cssProperties": [
+        {
+          "name": "--width"
+        },
+        {
+          "name": "--height"
+        },
+        {
+          "name": "--border"
+        },
+        {
+          "name": "--box-shadow"
+        }
+      ]
+    },
     {
       "name": "cds-tag",
       "path": "./tag/register.d.ts",
@@ -3868,6 +4018,7 @@
       "properties": [
         {
           "name": "status",
+          "description": "Sets the color of the tag (and badge if present) from the following predefined list of statuses:",
           "type": "neutral | info | success | warning | danger"
         },
         {
@@ -3921,6 +4072,7 @@
       "properties": [
         {
           "name": "status",
+          "description": "Sets the color of the tag (and badge if present) from the following predefined list of statuses:",
           "type": "neutral | info | success | warning | danger"
         },
         {
@@ -4283,10 +4435,6 @@
         {
           "name": "multiSelect",
           "type": "boolean"
-        },
-        {
-          "name": "ariaActiveDescendant",
-          "type": "string"
         }
       ],
       "slots": [
@@ -4480,10 +4628,6 @@
         {
           "name": "multiSelect",
           "type": "boolean"
-        },
-        {
-          "name": "ariaActiveDescendant",
-          "type": "string"
         }
       ],
       "slots": [