@ds-autonomie/web-components 1.7.0 → 1.8.0

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

@@ -40,68 +40,6 @@
       ],
       "references": []
     },
-    {
-      "name": "dsa-animation",
-      "description": "Animate elements declaratively with nearly 100 baked-in presets, or roll your own with custom keyframes. Powered by the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).\n\n\n---\n\n\n\n\n### **Events:**\n - **dsa-cancel** - Emitted when the animation is canceled.\n- **dsa-finish** - Emitted when the animation finishes.\n- **dsa-start** - Emitted when the animation starts or restarts.\n\n### **Methods:**\n - **cancel()** - Clears all keyframe effects caused by this animation and aborts its playback.\n- **finish()** - Sets the playback time to the end of the animation corresponding to the current playback direction.\n\n### **Slots:**\n - _default_ - The element to animate. Avoid slotting in more than one element, as subsequent ones will be ignored. To animate multiple elements, either wrap them in a single container or use multiple `<dsa-animation>` elements.",
-      "attributes": [
-        {
-          "name": "name",
-          "description": "The name of the built-in animation to use. For custom animations, use the `keyframes` prop.",
-          "values": []
-        },
-        {
-          "name": "play",
-          "description": "Plays the animation. When omitted, the animation will be paused. This attribute will be automatically removed when\nthe animation finishes or gets canceled.",
-          "values": []
-        },
-        {
-          "name": "delay",
-          "description": "The number of milliseconds to delay the start of the animation.",
-          "values": []
-        },
-        {
-          "name": "direction",
-          "description": "Determines the direction of playback as well as the behavior when reaching the end of an iteration.\n[Learn more](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction)",
-          "values": [{ "name": "PlaybackDirection" }]
-        },
-        {
-          "name": "duration",
-          "description": "The number of milliseconds each iteration of the animation takes to complete.",
-          "values": []
-        },
-        {
-          "name": "easing",
-          "description": "The easing function to use for the animation. This can be a Shoelace easing function or a custom easing function\nsuch as `cubic-bezier(0, 1, .76, 1.14)`.",
-          "values": []
-        },
-        {
-          "name": "end-delay",
-          "description": "The number of milliseconds to delay after the active period of an animation sequence.",
-          "values": []
-        },
-        {
-          "name": "fill",
-          "description": "Sets how the animation applies styles to its target before and after its execution.",
-          "values": [{ "name": "FillMode" }]
-        },
-        {
-          "name": "iterations",
-          "description": "The number of iterations to run before the animation completes. Defaults to `Infinity`, which loops.",
-          "values": []
-        },
-        {
-          "name": "iteration-start",
-          "description": "The offset at which to start the animation, usually between 0 (start) and 1 (end).",
-          "values": []
-        },
-        {
-          "name": "playback-rate",
-          "description": "Sets the animation's playback rate. The default is `1`, which plays the animation at a normal speed. Setting this\nto `2`, for example, will double the animation's speed. A negative value can be used to reverse the animation. This\nvalue can be changed without causing the animation to restart.",
-          "values": []
-        }
-      ],
-      "references": []
-    },
     {
       "name": "dsa-alert",
       "description": "Alerts are used to display important messages inline or as toast notifications.\n\n\n---\n\n\n\n\n### **Events:**\n - **dsa-show** - Emitted when the alert opens.\n- **dsa-after-show** - Emitted after the alert opens and all animations are complete.\n- **dsa-hide** - Emitted when the alert closes.\n- **dsa-after-hide** - Emitted after the alert closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the alert.\n- **hide()** - Hides the alert\n- **toast()** - Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when\ndismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by\ncalling this method again. The returned promise will resolve after the alert is hidden.\n\n### **Slots:**\n - _default_ - The alert's main content.\n- **action** - An optional slot action, usually a `dsa-button` or `dsa-button-group`.",
@@ -199,9 +137,65 @@
       "references": []
     },
     {
-      "name": "dsa-avatar-group",
-      "description": "The avatar-group displays avatars in a grouped style\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - The avatar group's content - only works with `dsa-avatar`",
-      "attributes": [],
+      "name": "dsa-animation",
+      "description": "Animate elements declaratively with nearly 100 baked-in presets, or roll your own with custom keyframes. Powered by the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).\n\n\n---\n\n\n\n\n### **Events:**\n - **dsa-cancel** - Emitted when the animation is canceled.\n- **dsa-finish** - Emitted when the animation finishes.\n- **dsa-start** - Emitted when the animation starts or restarts.\n\n### **Methods:**\n - **cancel()** - Clears all keyframe effects caused by this animation and aborts its playback.\n- **finish()** - Sets the playback time to the end of the animation corresponding to the current playback direction.\n\n### **Slots:**\n - _default_ - The element to animate. Avoid slotting in more than one element, as subsequent ones will be ignored. To animate multiple elements, either wrap them in a single container or use multiple `<dsa-animation>` elements.",
+      "attributes": [
+        {
+          "name": "name",
+          "description": "The name of the built-in animation to use. For custom animations, use the `keyframes` prop.",
+          "values": []
+        },
+        {
+          "name": "play",
+          "description": "Plays the animation. When omitted, the animation will be paused. This attribute will be automatically removed when\nthe animation finishes or gets canceled.",
+          "values": []
+        },
+        {
+          "name": "delay",
+          "description": "The number of milliseconds to delay the start of the animation.",
+          "values": []
+        },
+        {
+          "name": "direction",
+          "description": "Determines the direction of playback as well as the behavior when reaching the end of an iteration.\n[Learn more](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction)",
+          "values": [{ "name": "PlaybackDirection" }]
+        },
+        {
+          "name": "duration",
+          "description": "The number of milliseconds each iteration of the animation takes to complete.",
+          "values": []
+        },
+        {
+          "name": "easing",
+          "description": "The easing function to use for the animation. This can be a Shoelace easing function or a custom easing function\nsuch as `cubic-bezier(0, 1, .76, 1.14)`.",
+          "values": []
+        },
+        {
+          "name": "end-delay",
+          "description": "The number of milliseconds to delay after the active period of an animation sequence.",
+          "values": []
+        },
+        {
+          "name": "fill",
+          "description": "Sets how the animation applies styles to its target before and after its execution.",
+          "values": [{ "name": "FillMode" }]
+        },
+        {
+          "name": "iterations",
+          "description": "The number of iterations to run before the animation completes. Defaults to `Infinity`, which loops.",
+          "values": []
+        },
+        {
+          "name": "iteration-start",
+          "description": "The offset at which to start the animation, usually between 0 (start) and 1 (end).",
+          "values": []
+        },
+        {
+          "name": "playback-rate",
+          "description": "Sets the animation's playback rate. The default is `1`, which plays the animation at a normal speed. Setting this\nto `2`, for example, will double the animation's speed. A negative value can be used to reverse the animation. This\nvalue can be changed without causing the animation to restart.",
+          "values": []
+        }
+      ],
       "references": []
     },
     {
@@ -241,6 +235,12 @@
       ],
       "references": []
     },
+    {
+      "name": "dsa-avatar-group",
+      "description": "The avatar-group displays avatars in a grouped style\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - The avatar group's content - only works with `dsa-avatar`",
+      "attributes": [],
+      "references": []
+    },
     {
       "name": "dsa-badge",
       "description": "Badges are used to draw attention and display statuses or counts.\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - The badge's content.",
@@ -429,10 +429,21 @@
             { "name": "_parent" },
             { "name": "_top" }
           ]
+        },
+        {
+          "name": "aria-label",
+          "description": "Provides an accessible label for the button element",
+          "values": []
         }
       ],
       "references": []
     },
+    {
+      "name": "dsa-card",
+      "description": "Cards can be used to group related subjects in a container.\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - The card's main content.\n- **header** - An optional header for the card.\n- **footer** - An optional footer for the card.\n- **image** - An optional image to render at the start of the card.",
+      "attributes": [],
+      "references": []
+    },
     {
       "name": "dsa-checkbox",
       "description": "Checkboxes allow the user to toggle an option on or off.\n\n\n---\n\n\n\n\n### **Events:**\n - **dsa-blur** - Emitted when the checkbox loses focus.\n- **dsa-change** - Emitted when the checked state changes.\n- **dsa-focus** - Emitted when the checkbox gains focus.\n- **dsa-input** - Emitted when the checkbox receives input.\n- **dsa-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **click()** - Simulates a click on the checkbox.\n- **focus(options: _FocusOptions_)** - Sets focus on the checkbox.\n- **blur()** - Removes focus from the checkbox.\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()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. The value provided will be shown to the user when the form is submitted. To clear\nthe custom validation message, call this method with an empty string.\n\n### **Slots:**\n - _default_ - The checkbox's label.",
@@ -472,6 +483,11 @@
           "description": "Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a \"select\nall/none\" behavior when associated checkboxes have a mix of checked and unchecked states.",
           "values": []
         },
+        {
+          "name": "readonly",
+          "description": "Sets the checkbox in readonly.",
+          "values": []
+        },
         {
           "name": "error",
           "description": "Indicates whether the checkbox's should be in error state",
@@ -495,12 +511,6 @@
       ],
       "references": []
     },
-    {
-      "name": "dsa-card",
-      "description": "Cards can be used to group related subjects in a container.\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - The card's main content.\n- **header** - An optional header for the card.\n- **footer** - An optional footer for the card.\n- **image** - An optional image to render at the start of the card.",
-      "attributes": [],
-      "references": []
-    },
     {
       "name": "dsa-checkbox-button",
       "description": "Checkbox buttons allow the user to select multiple options from a group using a button-like control.\n\n\n---\n\n\n\n\n### **Events:**\n - **dsa-blur** - Emitted when the button loses focus.\n- **dsa-focus** - Emitted when the button gains focus.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the checbox button.\n- **blur()** - Removes focus from the checkbox button.\n\n### **Slots:**\n - _default_ - The checkbox button's label.",
@@ -572,50 +582,29 @@
           "values": []
         },
         {
-          "name": "horizontal",
-          "description": "Sets the orientation of the checkbox options",
+          "name": "disabled",
+          "description": "Disables children checkboxes",
           "values": []
         },
         {
-          "name": "error",
-          "description": "Indicates whether the group should be in error state",
+          "name": "readonly",
+          "description": "Sets children checkboxes to readonly.",
           "values": []
         },
         {
-          "name": "error-message",
-          "description": "An error message that is shown when `error` is set to true",
-          "values": []
-        }
-      ],
-      "references": []
-    },
-    {
-      "name": "dsa-dialog",
-      "description": "Dialogs, sometimes called \"modals\", appear above the page and require the user's immediate attention.\n\n\n---\n\n\n\n\n### **Events:**\n - **dsa-show** - Emitted when the dialog opens.\n- **dsa-after-show** - Emitted after the dialog opens and all animations are complete.\n- **dsa-hide** - Emitted when the dialog closes.\n- **dsa-after-hide** - Emitted after the dialog closes and all animations are complete.\n- **dsa-initial-focus** - Emitted when the dialog opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.\n- **dsa-request-close** - {{ source: 'close-button' | 'keyboard' | 'overlay' }}  - Emitted when the user attempts to close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in destructive behavior such as data loss.\n\n### **Methods:**\n - **show()** - Shows the dialog.\n- **hide()** - Hides the dialog\n\n### **Slots:**\n - _default_ - The dialog's main content.\n- **label** - The dialog's label. Alternatively, you can use the `label` attribute.\n- **header-actions** - Optional actions to add to the header. Works best with `<dsa-icon-button>`.\n- **footer** - The dialog's footer, usually one or more buttons representing various options.",
-      "attributes": [
-        {
-          "name": "open",
-          "description": "Indicates whether or not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the dialog's open state.",
+          "name": "horizontal",
+          "description": "Sets the orientation of the checkbox options",
           "values": []
         },
         {
-          "name": "label",
-          "description": "The dialog's label as displayed in the header. You should always include a relevant label even when using\n`no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.",
+          "name": "error",
+          "description": "Indicates whether the group should be in error state",
           "values": []
         },
         {
-          "name": "no-header",
-          "description": "Disables the header. This will also remove the default close button, so please ensure you provide an easy,\naccessible way for users to dismiss the dialog.",
+          "name": "error-message",
+          "description": "An error message that is shown when `error` is set to true",
           "values": []
-        },
-        {
-          "name": "size",
-          "description": "The dialog's size.",
-          "values": [
-            { "name": "small" },
-            { "name": "medium" },
-            { "name": "large" }
-          ]
         }
       ],
       "references": []
@@ -754,6 +743,37 @@
       ],
       "references": []
     },
+    {
+      "name": "dsa-dialog",
+      "description": "Dialogs, sometimes called \"modals\", appear above the page and require the user's immediate attention.\n\n\n---\n\n\n\n\n### **Events:**\n - **dsa-show** - Emitted when the dialog opens.\n- **dsa-after-show** - Emitted after the dialog opens and all animations are complete.\n- **dsa-hide** - Emitted when the dialog closes.\n- **dsa-after-hide** - Emitted after the dialog closes and all animations are complete.\n- **dsa-initial-focus** - Emitted when the dialog opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.\n- **dsa-request-close** - {{ source: 'close-button' | 'keyboard' | 'overlay' }}  - Emitted when the user attempts to close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in destructive behavior such as data loss.\n\n### **Methods:**\n - **show()** - Shows the dialog.\n- **hide()** - Hides the dialog\n\n### **Slots:**\n - _default_ - The dialog's main content.\n- **label** - The dialog's label. Alternatively, you can use the `label` attribute.\n- **header-actions** - Optional actions to add to the header. Works best with `<dsa-icon-button>`.\n- **footer** - The dialog's footer, usually one or more buttons representing various options.",
+      "attributes": [
+        {
+          "name": "open",
+          "description": "Indicates whether or not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the dialog's open state.",
+          "values": []
+        },
+        {
+          "name": "label",
+          "description": "The dialog's label as displayed in the header. You should always include a relevant label even when using\n`no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.",
+          "values": []
+        },
+        {
+          "name": "no-header",
+          "description": "Disables the header. This will also remove the default close button, so please ensure you provide an easy,\naccessible way for users to dismiss the dialog.",
+          "values": []
+        },
+        {
+          "name": "size",
+          "description": "The dialog's size.",
+          "values": [
+            { "name": "small" },
+            { "name": "medium" },
+            { "name": "large" }
+          ]
+        }
+      ],
+      "references": []
+    },
     {
       "name": "dsa-divider",
       "description": "Dividers are used to visually separate or group elements.\n\n\n---\n\n\n",
@@ -766,6 +786,33 @@
       ],
       "references": []
     },
+    {
+      "name": "dsa-download-card",
+      "description": "Download cards allow user to download a document.\n\n\n---\n\n\n\n\n### **Events:**\n - **dsa-blur** - Emitted when the card loses focus.\n- **dsa-focus** - Emitted when the card gains focus.\n\n### **Slots:**\n - _default_ - The card's label.\n- **image** - An optional image to render at the start of the card..",
+      "attributes": [
+        {
+          "name": "href",
+          "description": "The href of the document",
+          "values": []
+        },
+        {
+          "name": "description",
+          "description": "Optional description of the file",
+          "values": []
+        },
+        {
+          "name": "format",
+          "description": "The document format",
+          "values": []
+        },
+        {
+          "name": "documentsize",
+          "description": "The document size",
+          "values": []
+        }
+      ],
+      "references": []
+    },
     {
       "name": "dsa-download-link",
       "description": "Download links allow user to download a document.\n\n\n---\n\n\n\n\n### **Events:**\n - **dsa-blur** - Emitted when the link loses focus.\n- **dsa-focus** - Emitted when the link gains focus.\n\n### **Slots:**\n - _default_ - The link's label.",
@@ -811,33 +858,6 @@
       ],
       "references": []
     },
-    {
-      "name": "dsa-download-card",
-      "description": "Download cards allow user to download a document.\n\n\n---\n\n\n\n\n### **Events:**\n - **dsa-blur** - Emitted when the card loses focus.\n- **dsa-focus** - Emitted when the card gains focus.\n\n### **Slots:**\n - _default_ - The card's label.\n- **image** - An optional image to render at the start of the card..",
-      "attributes": [
-        {
-          "name": "href",
-          "description": "The href of the document",
-          "values": []
-        },
-        {
-          "name": "description",
-          "description": "Optional description of the file",
-          "values": []
-        },
-        {
-          "name": "format",
-          "description": "The document format",
-          "values": []
-        },
-        {
-          "name": "documentsize",
-          "description": "The document size",
-          "values": []
-        }
-      ],
-      "references": []
-    },
     {
       "name": "dsa-drawer",
       "description": "Drawers slide in from a container to expose additional options and information.\n\n\n---\n\n\n\n\n### **Events:**\n - **dsa-show** - Emitted when the drawer opens.\n- **dsa-after-show** - Emitted after the drawer opens and all animations are complete.\n- **dsa-hide** - Emitted when the drawer closes.\n- **dsa-after-hide** - Emitted after the drawer closes and all animations are complete.\n- **dsa-initial-focus** - Emitted when the drawer opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.\n- **dsa-request-close** - Emitted when the user attempts to close the drawer by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in destructive behavior such as data loss.\n\n### **Methods:**\n - **show()** - Shows the drawer.\n- **hide()** - Hides the drawer\n\n### **Slots:**\n - _default_ - The drawer's main content.\n- **label** - The drawer's label. Alternatively, you can use the `label` attribute.\n- **header-actions** - Optional actions to add to the header. Works best with `<dsa-icon-button>`.\n- **footer** - The drawer's footer, usually one or more buttons representing various options.",
@@ -926,12 +946,6 @@
       ],
       "references": []
     },
-    {
-      "name": "dsa-error-text",
-      "description": "Error Text can be used to display an error message under an input or a fieldset\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - The error-text's main content.",
-      "attributes": [],
-      "references": []
-    },
     {
       "name": "dsa-error-message-panel",
       "description": "Error Message Panel can be used to display an error message when a problem has occured on the site\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - The error-message-panel's title.\n- **error-code** - An optional error code element.\n- **description** - An optional error description element.\n- **actions** - An optional action element.",
@@ -944,6 +958,12 @@
       ],
       "references": []
     },
+    {
+      "name": "dsa-error-text",
+      "description": "Error Text can be used to display an error message under an input or a fieldset\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - The error-text's main content.",
+      "attributes": [],
+      "references": []
+    },
     {
       "name": "dsa-file-upload",
       "description": "File upload allows users to select and send one or more files.\n\n\n---\n\n\n\n\n### **Events:**\n - **dsa-focus** - Emitted when the control gains focus.\n- **dsa-blur** - Emitted when the control loses focus.\n- **dsa-file-upload** - Emitted when a file is selected. It can be multiple files if multiple is set to `true`.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the control.\n- **blur()** - Removes focus from the control.\n\n### **Slots:**\n - _default_ - The files options. Must be `<dsa-file-upload-item>` elements.\n- **label** - The file-upload's label. Alternatively, you can use the `label` attribute.\n- **description** - The file-upload's description. Alternatively, you can use the `description` attribute.\n- **help-text** - Text that describes how to use the file-upload. Alternatively, you can use the `help-text` attribute.",
@@ -1037,8 +1057,8 @@
       "references": []
     },
     {
-      "name": "dsa-footer-inline-divider",
-      "description": "Footer inliner divider displays text elements separated by a divider within a [footer](/components/footer) context.\n\n\n---\n\n\n\n\n### **Slots:**\n - **text-left** - Used to display content to the left of the divider.\n- **text-right** - Used to display content to the right of the divider.",
+      "name": "dsa-footer",
+      "description": "\n\n\n---\n\n\n",
       "attributes": [],
       "references": []
     },
@@ -1049,8 +1069,8 @@
       "references": []
     },
     {
-      "name": "dsa-footer",
-      "description": "\n\n\n---\n\n\n",
+      "name": "dsa-footer-inline-divider",
+      "description": "Footer inliner divider displays text elements separated by a divider within a [footer](/components/footer) context.\n\n\n---\n\n\n\n\n### **Slots:**\n - **text-left** - Used to display content to the left of the divider.\n- **text-right** - Used to display content to the right of the divider.",
       "attributes": [],
       "references": []
     },
@@ -1072,6 +1092,32 @@
       "attributes": [],
       "references": []
     },
+    {
+      "name": "dsa-format-bytes",
+      "description": "Formats a number as a human readable bytes value.\n\n\n---\n\n\n",
+      "attributes": [
+        {
+          "name": "value",
+          "description": "The number to format in bytes.",
+          "values": []
+        },
+        {
+          "name": "unit",
+          "description": "The type of unit to display.",
+          "values": [{ "name": "byte" }, { "name": "bit" }]
+        },
+        {
+          "name": "display",
+          "description": "Determines how to display the result, e.g. \"100 bytes\", \"100 b\", or \"100b\".",
+          "values": [
+            { "name": "long" },
+            { "name": "short" },
+            { "name": "narrow" }
+          ]
+        }
+      ],
+      "references": []
+    },
     {
       "name": "dsa-format-date",
       "description": "Formats a date/time using the specified locale and options.\n\n\n---\n\n\n",
@@ -1153,32 +1199,6 @@
       ],
       "references": []
     },
-    {
-      "name": "dsa-format-bytes",
-      "description": "Formats a number as a human readable bytes value.\n\n\n---\n\n\n",
-      "attributes": [
-        {
-          "name": "value",
-          "description": "The number to format in bytes.",
-          "values": []
-        },
-        {
-          "name": "unit",
-          "description": "The type of unit to display.",
-          "values": [{ "name": "byte" }, { "name": "bit" }]
-        },
-        {
-          "name": "display",
-          "description": "Determines how to display the result, e.g. \"100 bytes\", \"100 b\", or \"100b\".",
-          "values": [
-            { "name": "long" },
-            { "name": "short" },
-            { "name": "narrow" }
-          ]
-        }
-      ],
-      "references": []
-    },
     {
       "name": "dsa-format-number",
       "description": "Formats a number using the specified locale and options.\n\n\n---\n\n\n",
@@ -1333,6 +1353,20 @@
             { "name": "tertiary" },
             { "name": "danger" }
           ]
+        },
+        {
+          "name": "size",
+          "description": "The icon button's size.",
+          "values": [
+            { "name": "" },
+            { "name": "2xsmall" },
+            { "name": "xsmall" },
+            { "name": "small" },
+            { "name": "medium" },
+            { "name": "large" },
+            { "name": "xlarge" },
+            { "name": "2xlarge" }
+          ]
         }
       ],
       "references": []
@@ -1860,6 +1894,43 @@
       "attributes": [],
       "references": []
     },
+    {
+      "name": "dsa-mutation-observer",
+      "description": "The Mutation Observer component offers a thin, declarative interface to the [`MutationObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver).\n\n\n---\n\n\n\n\n### **Events:**\n - **dsa-mutation** - Emitted when a mutation occurs.\n\n### **Slots:**\n - _default_ - The content to watch for mutations.",
+      "attributes": [
+        {
+          "name": "attr",
+          "description": "Watches for changes to attributes. To watch only specific attributes, separate them by a space, e.g.\n`attr=\"class id title\"`. To watch all attributes, use `*`.",
+          "values": []
+        },
+        {
+          "name": "attr-old-value",
+          "description": "Indicates whether or not the attribute's previous value should be recorded when monitoring changes.",
+          "values": []
+        },
+        {
+          "name": "char-data",
+          "description": "Watches for changes to the character data contained within the node.",
+          "values": []
+        },
+        {
+          "name": "char-data-old-value",
+          "description": "Indicates whether or not the previous value of the node's text should be recorded.",
+          "values": []
+        },
+        {
+          "name": "child-list",
+          "description": "Watches for the addition or removal of new child nodes.",
+          "values": []
+        },
+        {
+          "name": "disabled",
+          "description": "Disables the observer.",
+          "values": []
+        }
+      ],
+      "references": []
+    },
     {
       "name": "dsa-option",
       "description": "Options define the selectable items within various form controls such as [select](/components/select).\n\n\n---\n\n\n\n\n### **Methods:**\n - **getTextLabel()** - Returns a plain text label based on the option's content.\n\n### **Slots:**\n - _default_ - The option's label.\n- **prefix** - Used to prepend an icon or similar element to the menu item.\n- **suffix** - Used to append an icon or similar element to the menu item.",
@@ -1884,8 +1955,52 @@
           ]
         },
         {
-          "name": "error",
-          "description": "Indicates whether the input should be in error state",
+          "name": "error",
+          "description": "Indicates whether the input should be in error state",
+          "values": []
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "dsa-pagination",
+      "description": "\n\n\n---\n\n\n",
+      "attributes": [
+        {
+          "name": "current-page",
+          "description": "The number of the page currently displayed.",
+          "values": []
+        },
+        {
+          "name": "total-items",
+          "description": "The total number of items in the table.",
+          "values": []
+        },
+        {
+          "name": "items-per-page",
+          "description": "The number of items displayed in the table per page.",
+          "values": []
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "dsa-pagination-button",
+      "description": "(Internal) Button used in dsa-pagination.\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - The button's label.\n- **prefix** - A presentational prefix icon or similar element.\n- **suffix** - A presentational suffix icon or similar element.",
+      "attributes": [
+        {
+          "name": "value",
+          "description": "The page number of the button. A value of \"-1\" leads to a label \"...\"",
+          "values": []
+        },
+        {
+          "name": "selected",
+          "description": "Determine if the page linked to the button is the current one (inactivates the button)",
+          "values": []
+        },
+        {
+          "name": "disabled",
+          "description": "Disables the button",
           "values": []
         }
       ],
@@ -2037,37 +2152,22 @@
       "references": []
     },
     {
-      "name": "dsa-mutation-observer",
-      "description": "The Mutation Observer component offers a thin, declarative interface to the [`MutationObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver).\n\n\n---\n\n\n\n\n### **Events:**\n - **dsa-mutation** - Emitted when a mutation occurs.\n\n### **Slots:**\n - _default_ - The content to watch for mutations.",
+      "name": "dsa-progress-bar",
+      "description": "Progress bars are used to show the status of an ongoing operation.\n\n\n---\n\n\n",
       "attributes": [
         {
-          "name": "attr",
-          "description": "Watches for changes to attributes. To watch only specific attributes, separate them by a space, e.g.\n`attr=\"class id title\"`. To watch all attributes, use `*`.",
-          "values": []
-        },
-        {
-          "name": "attr-old-value",
-          "description": "Indicates whether or not the attribute's previous value should be recorded when monitoring changes.",
-          "values": []
-        },
-        {
-          "name": "char-data",
-          "description": "Watches for changes to the character data contained within the node.",
-          "values": []
-        },
-        {
-          "name": "char-data-old-value",
-          "description": "Indicates whether or not the previous value of the node's text should be recorded.",
+          "name": "value",
+          "description": "The current progress as a percentage, 0 to 100.",
           "values": []
         },
         {
-          "name": "child-list",
-          "description": "Watches for the addition or removal of new child nodes.",
+          "name": "indeterminate",
+          "description": "When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state.",
           "values": []
         },
         {
-          "name": "disabled",
-          "description": "Disables the observer.",
+          "name": "label",
+          "description": "A custom label for assistive devices.",
           "values": []
         }
       ],
@@ -2131,28 +2231,6 @@
       ],
       "references": []
     },
-    {
-      "name": "dsa-progress-bar",
-      "description": "Progress bars are used to show the status of an ongoing operation.\n\n\n---\n\n\n",
-      "attributes": [
-        {
-          "name": "value",
-          "description": "The current progress as a percentage, 0 to 100.",
-          "values": []
-        },
-        {
-          "name": "indeterminate",
-          "description": "When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state.",
-          "values": []
-        },
-        {
-          "name": "label",
-          "description": "A custom label for assistive devices.",
-          "values": []
-        }
-      ],
-      "references": []
-    },
     {
       "name": "dsa-radio-button",
       "description": "Radios buttons allow the user to select a single option from a group using a button-like control.\n\n\n---\n\n\n\n\n### **Events:**\n - **dsa-blur** - Emitted when the button loses focus.\n- **dsa-focus** - Emitted when the button gains focus.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the radio button.\n- **blur()** - Removes focus from the radio button.\n\n### **Slots:**\n - _default_ - The radio button's label.",
@@ -2228,6 +2306,16 @@
           "description": "Ensures a child radio is checked before allowing the containing form to submit.",
           "values": []
         },
+        {
+          "name": "disabled",
+          "description": "Disables children radios.",
+          "values": []
+        },
+        {
+          "name": "readonly",
+          "description": "Sets children radios to readonly.",
+          "values": []
+        },
         {
           "name": "horizontal",
           "description": "Sets the orientation of the radio options",
@@ -2277,6 +2365,18 @@
       ],
       "references": []
     },
+    {
+      "name": "dsa-resize-observer",
+      "description": "The Resize Observer component offers a thin, declarative interface to the [`ResizeObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).\n\n\n---\n\n\n\n\n### **Events:**\n - **dsa-resize** - Emitted when the element is resized.\n\n### **Slots:**\n - _default_ - One or more elements to watch for resizing.",
+      "attributes": [
+        {
+          "name": "disabled",
+          "description": "Disables the observer.",
+          "values": []
+        }
+      ],
+      "references": []
+    },
     {
       "name": "dsa-select",
       "description": "Selects allow you to choose items from a menu of predefined options.\n\n\n---\n\n\n\n\n### **Events:**\n - **dsa-change** - Emitted when the control's value changes.\n- **dsa-clear** - Emitted when the control's value is cleared.\n- **dsa-input** - Emitted when the control receives input.\n- **dsa-focus** - Emitted when the control gains focus.\n- **dsa-blur** - Emitted when the control loses focus.\n- **dsa-show** - Emitted when the select's menu opens.\n- **dsa-after-show** - Emitted after the select's menu opens and all animations are complete.\n- **dsa-hide** - Emitted when the select's menu closes.\n- **dsa-after-hide** - Emitted after the select's menu closes and all animations are complete.\n- **dsa-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **show()** - Shows the listbox.\n- **hide()** - Hides the listbox.\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()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n- **focus(options: _FocusOptions_)** - Sets focus on the control.\n- **blur()** - Removes focus from the control.\n\n### **Slots:**\n - _default_ - The listbox options. Must be `<dsa-option>` elements. You can use `<dsa-divider>` to group items visually.\n- **label** - The input's label. Alternatively, you can use the `label` attribute.\n- **prefix** - Used to prepend a presentational icon or similar element to the combobox.\n- **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n- **tooltip** - The tooltip slot allows additional information to be passed along the label.",
@@ -2406,18 +2506,6 @@
       ],
       "references": []
     },
-    {
-      "name": "dsa-resize-observer",
-      "description": "The Resize Observer component offers a thin, declarative interface to the [`ResizeObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).\n\n\n---\n\n\n\n\n### **Events:**\n - **dsa-resize** - Emitted when the element is resized.\n\n### **Slots:**\n - _default_ - One or more elements to watch for resizing.",
-      "attributes": [
-        {
-          "name": "disabled",
-          "description": "Disables the observer.",
-          "values": []
-        }
-      ],
-      "references": []
-    },
     {
       "name": "dsa-skeleton",
       "description": "Skeletons are used to provide a visual representation of where content will eventually be drawn.\n\n\n---\n\n\n\n\n### **CSS Properties:**\n - **--border-radius** - The skeleton's border radius. _(default: undefined)_\n- **--color** - The color of the skeleton. _(default: undefined)_\n- **--sheen-color** - The sheen color when the skeleton is in its loading state. _(default: undefined)_",
@@ -2446,6 +2534,12 @@
       ],
       "references": []
     },
+    {
+      "name": "dsa-skip-links",
+      "description": "Skip links allows users to jump directly to specific content areas, bypassing repetitive or navigational elements. Skip links are often placed at the beginning of a web page and are hidden from the visual layout until they receive focus.\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - The link options. Must be `<dsa-skip-link-item>` elements.",
+      "attributes": [],
+      "references": []
+    },
     {
       "name": "dsa-spinner",
       "description": "Spinners are used to show the progress of an indeterminate operation.\n\n\n---\n\n\n\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
@@ -2458,6 +2552,38 @@
       ],
       "references": []
     },
+    {
+      "name": "dsa-step",
+      "description": "Step defines an element within a stepper.\n\n\n---\n\n\n\n\n### **Slots:**\n - **title** - The step's title. Alternatively, you can use the `title` attribute.\n- **tooltip** - The tooltip slot allows additional information to be passed along the title.\n- **content** - The step's content. Alternatively, you can use the `content` attribute.",
+      "attributes": [
+        {
+          "name": "status",
+          "description": "The step's status. There can only be one active step's state inside a stepper.\nThe `active` status defines the current step as the only active step on the page. It usually has related content  on the page like a form.",
+          "values": [{ "name": "DSAStepStatus" }]
+        },
+        {
+          "name": "title",
+          "description": "The step's title. If you need to display HTML, use the `title` slot instead.",
+          "values": []
+        },
+        {
+          "name": "content",
+          "description": "The step's content. If you need to display HTML, use the `content` slot instead.",
+          "values": []
+        },
+        {
+          "name": "index",
+          "description": "Sets the step's index",
+          "values": []
+        },
+        {
+          "name": "vertical",
+          "description": "When set to true, put the step in vertical mode",
+          "values": []
+        }
+      ],
+      "references": []
+    },
     {
       "name": "dsa-stepper",
       "description": "Stepper convey progress through numbered steps. It provides a wizard-like workflow.\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - The step options. Must be `<dsa-step>` elements.",
@@ -2475,12 +2601,6 @@
       ],
       "references": []
     },
-    {
-      "name": "dsa-skip-links",
-      "description": "Skip links allows users to jump directly to specific content areas, bypassing repetitive or navigational elements. Skip links are often placed at the beginning of a web page and are hidden from the visual layout until they receive focus.\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - The link options. Must be `<dsa-skip-link-item>` elements.",
-      "attributes": [],
-      "references": []
-    },
     {
       "name": "dsa-tab",
       "description": "Tabs are used inside [tab groups](/components/tab-group) to represent and activate [tab panels](/components/tab-panel).\n\n\n---\n\n\n\n\n### **Events:**\n - **dsa-close** - Emitted when the tab is closable and the close button is activated.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus to the tab.\n- **blur()** - Removes focus from the tab.\n\n### **Slots:**\n - _default_ - The tab's label.",
@@ -2508,38 +2628,6 @@
       ],
       "references": []
     },
-    {
-      "name": "dsa-step",
-      "description": "Step defines an element within a stepper.\n\n\n---\n\n\n\n\n### **Slots:**\n - **title** - The step's title. Alternatively, you can use the `title` attribute.\n- **tooltip** - The tooltip slot allows additional information to be passed along the title.\n- **content** - The step's content. Alternatively, you can use the `content` attribute.",
-      "attributes": [
-        {
-          "name": "status",
-          "description": "The step's status. There can only be one active step's state inside a stepper.\nThe `active` status defines the current step as the only active step on the page. It usually has related content  on the page like a form.",
-          "values": [{ "name": "DSAStepStatus" }]
-        },
-        {
-          "name": "title",
-          "description": "The step's title. If you need to display HTML, use the `title` slot instead.",
-          "values": []
-        },
-        {
-          "name": "content",
-          "description": "The step's content. If you need to display HTML, use the `content` slot instead.",
-          "values": []
-        },
-        {
-          "name": "index",
-          "description": "Sets the step's index",
-          "values": []
-        },
-        {
-          "name": "vertical",
-          "description": "When set to true, put the step in vertical mode",
-          "values": []
-        }
-      ],
-      "references": []
-    },
     {
       "name": "dsa-tab-group",
       "description": "Tab groups organize content into a container that shows one section at a time.\n\n\n---\n\n\n\n\n### **Events:**\n - **dsa-tab-show** - Emitted when a tab is shown.\n- **dsa-tab-hide** - Emitted when a tab is hidden.\n\n### **Methods:**\n - **show(panel: _string_)** - Shows the specified tab panel.\n\n### **Slots:**\n - _default_ - Used for grouping tab panels in the tab group. Must be `<dsa-tab-panel>` elements.\n- **nav** - Used for grouping tabs in the tab group. Must be `<dsa-tab>` elements.",
@@ -2569,6 +2657,39 @@
       ],
       "references": []
     },
+    {
+      "name": "dsa-table",
+      "description": "The table is used to present a structured list of textual and/or numerical data.\n\n\n---\n\n\n\n\n### **Slots:**\n - **Content** - to be placed inside the table",
+      "attributes": [
+        { "name": "role", "description": "The table's role", "values": [] },
+        {
+          "name": "size",
+          "description": "The table's size.",
+          "values": [
+            { "name": "small" },
+            { "name": "medium" },
+            { "name": "large" }
+          ]
+        },
+        {
+          "name": "sortable",
+          "description": "`true` if this table should support sorting",
+          "values": []
+        },
+        {
+          "name": "alignment",
+          "description": "Used to align content",
+          "values": [{ "name": "left" }, { "name": "right" }]
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "dsa-table-container",
+      "description": "The table is used to present a structured list of textual and/or numerical data.\n\n\n---\n\n\n\n\n### **Slots:**\n - **Content** - to be placed inside the table",
+      "attributes": [],
+      "references": []
+    },
     {
       "name": "dsa-tag",
       "description": "Tags are used as labels to organize things or to indicate a selection.\n\n\n---\n\n\n\n\n### **Events:**\n - **dsa-remove** - Emitted when the remove button is activated.\n\n### **Slots:**\n - **prefix** - Used to prepend a presentational icon or similar element to the input.\n- **suffix** - Used to append a presentational icon or similar element to the input.",
@@ -2911,6 +3032,107 @@
       "description": "The visually hidden utility makes content accessible to assistive devices without displaying it on the screen.\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - The content to be visually hidden.",
       "attributes": [],
       "references": []
+    },
+    {
+      "name": "dsa-table-body",
+      "description": "The table body defines a group of rows as part of the body section within a [table](/components/table/table)\n\n\n---\n\n\n\n\n### **Slots:**\n - **Content** - to be placed inside the table body",
+      "attributes": [
+        { "name": "role", "description": "The table-body's role", "values": [] }
+      ],
+      "references": []
+    },
+    {
+      "name": "dsa-table-caption",
+      "description": "The table caption defines the caption (or title) of a [table](/components/table/table)\n\n\n---\n\n\n\n\n### **Slots:**\n - **title** - The table caption's title\n- **subtitle** - The table caption's subtitle\n- **total-items** - Used to display the number of results. Used in association with the `dsa-table` component.",
+      "attributes": [],
+      "references": []
+    },
+    {
+      "name": "dsa-table-cell",
+      "description": "The table cell defines cell within a [table](/components/table/table)\n\n\n---\n\n\n\n\n### **Slots:**\n - **Content** - to be placed inside the table cell",
+      "attributes": [
+        { "name": "role", "description": "The table-cell's role", "values": [] }
+      ],
+      "references": []
+    },
+    {
+      "name": "dsa-table-head",
+      "description": "The table head defines a group of rows as part of the header section within a [table](/components/table/table)\n\n\n---\n\n\n\n\n### **Slots:**\n - **Content** - to be placed inside the table head",
+      "attributes": [
+        { "name": "role", "description": "The table-head's role", "values": [] }
+      ],
+      "references": []
+    },
+    {
+      "name": "dsa-table-header-cell",
+      "description": "The table header cell defines a cell in a [table-header-row](/components/table/table-header-row) within a [table](/components/table/table)\n\n\n---\n\n\n\n\n### **Events:**\n - **dsa-table-header-cell-sort** - Emitted when a table-header-cell changes its sort direction.\n\n### **Methods:**\n - **click()** - Simulates a click on the sort button.\n- **focus(options: _FocusOptions_)** - Sets focus on the sort button.\n- **blur()** - Removes focus from the sort button.\n\n### **Slots:**\n - **Content** - to be placed inside the table header cell",
+      "attributes": [
+        {
+          "name": "role",
+          "description": "The table-header-cell's role",
+          "values": []
+        },
+        {
+          "name": "sortable",
+          "description": "`true` if this should be sortable",
+          "values": []
+        },
+        {
+          "name": "alignment",
+          "description": "Used to align content",
+          "values": [{ "name": "left" }, { "name": "right" }]
+        },
+        {
+          "name": "sort-direction",
+          "description": "The table sort direction. Choose between `ascending` or `descending` or `none`",
+          "values": [{ "name": "TABLE_SORT_DIRECTION" }]
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "dsa-table-header-row",
+      "description": "The table header row defines a row of cells in a [table-head](/components/table/table-head) within a [table](/components/table/table)\n\n\n---\n\n\n\n\n### **Slots:**\n - **Content** - to be placed inside the table header row",
+      "attributes": [
+        { "name": "role", "description": "The table-row's role", "values": [] },
+        {
+          "name": "size",
+          "description": "The table-row's size",
+          "values": [
+            { "name": "small" },
+            { "name": "medium" },
+            { "name": "large" }
+          ]
+        },
+        {
+          "name": "selected",
+          "description": "Draws the table-row in a selected state.",
+          "values": []
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "dsa-table-row",
+      "description": "The table row defines a row of cells in a [table](/components/table)\n\n\n---\n\n\n\n\n### **Slots:**\n - **Content** - to be placed inside the table row",
+      "attributes": [
+        { "name": "role", "description": "The table-row's role", "values": [] },
+        {
+          "name": "size",
+          "description": "The table-row's size",
+          "values": [
+            { "name": "small" },
+            { "name": "medium" },
+            { "name": "large" }
+          ]
+        },
+        {
+          "name": "selected",
+          "description": "Draws the table-row in a selected state.",
+          "values": []
+        }
+      ],
+      "references": []
     }
   ]
 }