npm - dap-design-system - Versions diffs - 0.58.2 → 0.59.0 - Mend

dap-design-system 0.58.2 → 0.59.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (17) hide show

package/dist/components/datatable/datatable.component.d.ts +7 -0
package/dist/components/pager/pager.component.d.ts +13 -0
package/dist/{components-D6jorS84.js → components-CDc41tvu.js} +818 -772
package/dist/components-CDc41tvu.js.map +1 -0
package/dist/components.js +1 -1
package/dist/dds.js +1 -1
package/dist/manifest/types/vue/index.d.ts +818 -804
package/dist/manifest/vscode.html-custom-data.json +651 -631
package/dist/manifest/web-types.json +2713 -2673
package/dist/react/dap-ds-datatable/index.d.ts +3 -0
package/dist/react/dap-ds-pager/index.d.ts +6 -0
package/dist/react/index.d.ts +20 -20
package/dist/react-types.ts +21 -21
package/dist/react.js +492 -492
package/dist/react.js.map +1 -1
package/package.json +1 -1
package/dist/components-D6jorS84.js.map +0 -1

package/dist/manifest/vscode.html-custom-data.json CHANGED Viewed

@@ -3,13 +3,51 @@
   "version": 1.1,
   "tags": [
     {
-      "name": "dap-ds-accordion",
-      "description": "An accordion is a vertically stacked list of interactive items that can be expanded or collapsed to reveal or hide content.\n---\n\n\n### **Events:**\n - **dds-opened** - Event fired when the accordion is opened.\n- **dds-closed** - Event fired when the accordion is closed.\n\n### **Slots:**\n - **default** - The content of the accordion.\n- **heading** - The heading of the accordion.\n- **icon-opened** - The icon when the accordion is opened.\n- **icon-closed** - The icon when the accordion is closed.\n\n### **CSS Properties:**\n - **--dds-accordion-border-width** - The width of the accordion border (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-accordion-border-style** - The style of the accordion border (default: solid) _(default: undefined)_\n- **--dds-accordion-border-radius** - The border radius of the accordion (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-accordion-border-color** - The color of the accordion border (default: var(--dds-border-neutral-divider)) _(default: undefined)_\n- **--dds-accordion-background-color** - The background color of the accordion (default: var(--dds-background-neutral-subtle)) _(default: undefined)_\n- **--dds-accordion-text-color** - The text color of the accordion (default: var(--dds-text-neutral-strong)) _(default: undefined)_\n- **--dds-accordion-hover-background** - The background color when hovering over the accordion (default: var(--dds-background-neutral-base)) _(default: undefined)_\n- **--dds-accordion-active-background** - The background color when the accordion is active (default: var(--dds-background-neutral-medium)) _(default: undefined)_\n- **--dds-accordion-icon-background** - The background color of the accordion icon (default: var(--dds-transparent-black-subtle)) _(default: undefined)_\n- **--dds-accordion-icon-color** - The color of the accordion icon (default: var(--dds-icon-neutral-base)) _(default: undefined)_\n- **--dds-accordion-icon-hover-background** - The background color of the accordion icon when hovered (default: var(--dds-transparent-black-base)) _(default: undefined)_\n- **--dds-accordion-icon-active-background** - The background color of the accordion icon when active (default: var(--dds-transparent-black-strong)) _(default: undefined)_\n- **--dds-accordion-icon-hover-color** - The color of the accordion icon when hovered (default: var(--dds-icon-neutral-strong)) _(default: undefined)_\n- **--dds-accordion-icon-active-color** - The color of the accordion icon when active (default: var(--dds-icon-neutral-strong)) _(default: undefined)_\n- **--dds-accordion-content-color** - The color of the accordion content (default: var(--dds-text-text-neutral)) _(default: undefined)_\n- **--dds-accordion-transition-duration** - The duration of the accordion transitions (default: var(--dds-transition-fast)) _(default: undefined)_\n- **--dds-accordion-transition-timing** - The timing function of the accordion transitions (default: var(--dds-easing-ease-in-out)) _(default: undefined)_\n- **--dds-accordion-divider-color** - The color of the divider between accordion items (default: var(--dds-border-neutral-divider)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main accordion container.\n- **heading** - The heading of the accordion.\n- **button** - The button of the accordion.\n- **content** - The content of the accordion.\n- **content-container** - The container of the accordion content.\n- **icon-wrapper** - The icon wrapper of the accordion.\n- **open-icon** - The icon when the accordion is opened.\n- **open-icon-base** - The base of the icon when the accordion is opened.\n- **close-icon** - The icon when the accordion is closed.\n- **close-icon-base** - The base of the icon when the accordion is closed.",
-      "attributes": [],
+      "name": "dap-ds-accordion-group",
+      "description": "An accordion group is a collection of accordion components.\n---\n\n\n### **Slots:**\n - _default_ - The content of the accordion group.\n\n### **CSS Properties:**\n - **--dds-accordion-group-spacing** - Controls the gap between accordion items (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-accordion-group-border-color** - Controls the border color (default: var(--dds-border-neutral-subtle)) _(default: undefined)_\n- **--dds-accordion-group-border-width** - Controls the border width (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-accordion-group-border-radius** - Controls the border radius (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-accordion-group-background** - Controls the background color (default: transparent) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main accordion group container.",
+      "attributes": [
+        {
+          "name": "autoClose",
+          "description": "Whether to close other accordions when one is opened.",
+          "values": []
+        },
+        {
+          "name": "variant",
+          "description": "The variant of the accordion",
+          "values": [
+            { "name": "default" },
+            { "name": "collapsed" },
+            { "name": "clean" },
+            { "name": "clean-collapsed" }
+          ]
+        }
+      ],
       "references": [
         {
           "name": "Documentation",
-          "url": "https://shoelace.style/components/accordion"
+          "url": "https://shoelace.style/components/accordion-group"
+        }
+      ]
+    },
+    {
+      "name": "dap-ds-anchor-heading",
+      "description": "Anchor heading is a heading with an anchor link.\n---\n\n\n### **CSS Properties:**\n - **--dds-anchor-link-color** - The color of the anchor link (default: var(--dds-color-primary)) _(default: undefined)_\n- **--dds-anchor-link-opacity** - The opacity of the anchor link when not hovered (default: 0) _(default: undefined)_\n- **--dds-anchor-link-hover-opacity** - The opacity of the anchor link when hovered (default: 1) _(default: undefined)_\n- **--dds-anchor-link-transition** - The transition property for the anchor link opacity (default: opacity 0.2s ease-in-out) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main anchor heading container.\n- **link** - The link of the anchor heading. dap-ds-link element.\n- **link-base** - The base of the link part.\n- **text** - The text of the anchor heading.",
+      "attributes": [
+        {
+          "name": "variant",
+          "description": "The variant of the heading. Default is `h2`. Can be `h1`, `h2`, `h3`, `h4`, `h5`, or `h6`.",
+          "values": [{ "name": "HeadingVariant" }]
+        },
+        {
+          "name": "label",
+          "description": "The label of the heading.",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://shoelace.style/components/anchor-heading"
         }
       ]
     },
@@ -126,51 +164,13 @@
       ]
     },
     {
-      "name": "dap-ds-anchor-heading",
-      "description": "Anchor heading is a heading with an anchor link.\n---\n\n\n### **CSS Properties:**\n - **--dds-anchor-link-color** - The color of the anchor link (default: var(--dds-color-primary)) _(default: undefined)_\n- **--dds-anchor-link-opacity** - The opacity of the anchor link when not hovered (default: 0) _(default: undefined)_\n- **--dds-anchor-link-hover-opacity** - The opacity of the anchor link when hovered (default: 1) _(default: undefined)_\n- **--dds-anchor-link-transition** - The transition property for the anchor link opacity (default: opacity 0.2s ease-in-out) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main anchor heading container.\n- **link** - The link of the anchor heading. dap-ds-link element.\n- **link-base** - The base of the link part.\n- **text** - The text of the anchor heading.",
-      "attributes": [
-        {
-          "name": "variant",
-          "description": "The variant of the heading. Default is `h2`. Can be `h1`, `h2`, `h3`, `h4`, `h5`, or `h6`.",
-          "values": [{ "name": "HeadingVariant" }]
-        },
-        {
-          "name": "label",
-          "description": "The label of the heading.",
-          "values": []
-        }
-      ],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://shoelace.style/components/anchor-heading"
-        }
-      ]
-    },
-    {
-      "name": "dap-ds-accordion-group",
-      "description": "An accordion group is a collection of accordion components.\n---\n\n\n### **Slots:**\n - _default_ - The content of the accordion group.\n\n### **CSS Properties:**\n - **--dds-accordion-group-spacing** - Controls the gap between accordion items (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-accordion-group-border-color** - Controls the border color (default: var(--dds-border-neutral-subtle)) _(default: undefined)_\n- **--dds-accordion-group-border-width** - Controls the border width (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-accordion-group-border-radius** - Controls the border radius (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-accordion-group-background** - Controls the background color (default: transparent) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main accordion group container.",
-      "attributes": [
-        {
-          "name": "autoClose",
-          "description": "Whether to close other accordions when one is opened.",
-          "values": []
-        },
-        {
-          "name": "variant",
-          "description": "The variant of the accordion",
-          "values": [
-            { "name": "default" },
-            { "name": "collapsed" },
-            { "name": "clean" },
-            { "name": "clean-collapsed" }
-          ]
-        }
-      ],
+      "name": "dap-ds-accordion",
+      "description": "An accordion is a vertically stacked list of interactive items that can be expanded or collapsed to reveal or hide content.\n---\n\n\n### **Events:**\n - **dds-opened** - Event fired when the accordion is opened.\n- **dds-closed** - Event fired when the accordion is closed.\n\n### **Slots:**\n - **default** - The content of the accordion.\n- **heading** - The heading of the accordion.\n- **icon-opened** - The icon when the accordion is opened.\n- **icon-closed** - The icon when the accordion is closed.\n\n### **CSS Properties:**\n - **--dds-accordion-border-width** - The width of the accordion border (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-accordion-border-style** - The style of the accordion border (default: solid) _(default: undefined)_\n- **--dds-accordion-border-radius** - The border radius of the accordion (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-accordion-border-color** - The color of the accordion border (default: var(--dds-border-neutral-divider)) _(default: undefined)_\n- **--dds-accordion-background-color** - The background color of the accordion (default: var(--dds-background-neutral-subtle)) _(default: undefined)_\n- **--dds-accordion-text-color** - The text color of the accordion (default: var(--dds-text-neutral-strong)) _(default: undefined)_\n- **--dds-accordion-hover-background** - The background color when hovering over the accordion (default: var(--dds-background-neutral-base)) _(default: undefined)_\n- **--dds-accordion-active-background** - The background color when the accordion is active (default: var(--dds-background-neutral-medium)) _(default: undefined)_\n- **--dds-accordion-icon-background** - The background color of the accordion icon (default: var(--dds-transparent-black-subtle)) _(default: undefined)_\n- **--dds-accordion-icon-color** - The color of the accordion icon (default: var(--dds-icon-neutral-base)) _(default: undefined)_\n- **--dds-accordion-icon-hover-background** - The background color of the accordion icon when hovered (default: var(--dds-transparent-black-base)) _(default: undefined)_\n- **--dds-accordion-icon-active-background** - The background color of the accordion icon when active (default: var(--dds-transparent-black-strong)) _(default: undefined)_\n- **--dds-accordion-icon-hover-color** - The color of the accordion icon when hovered (default: var(--dds-icon-neutral-strong)) _(default: undefined)_\n- **--dds-accordion-icon-active-color** - The color of the accordion icon when active (default: var(--dds-icon-neutral-strong)) _(default: undefined)_\n- **--dds-accordion-content-color** - The color of the accordion content (default: var(--dds-text-text-neutral)) _(default: undefined)_\n- **--dds-accordion-transition-duration** - The duration of the accordion transitions (default: var(--dds-transition-fast)) _(default: undefined)_\n- **--dds-accordion-transition-timing** - The timing function of the accordion transitions (default: var(--dds-easing-ease-in-out)) _(default: undefined)_\n- **--dds-accordion-divider-color** - The color of the divider between accordion items (default: var(--dds-border-neutral-divider)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main accordion container.\n- **heading** - The heading of the accordion.\n- **button** - The button of the accordion.\n- **content** - The content of the accordion.\n- **content-container** - The container of the accordion content.\n- **icon-wrapper** - The icon wrapper of the accordion.\n- **open-icon** - The icon when the accordion is opened.\n- **open-icon-base** - The base of the icon when the accordion is opened.\n- **close-icon** - The icon when the accordion is closed.\n- **close-icon-base** - The base of the icon when the accordion is closed.",
+      "attributes": [],
       "references": [
         {
           "name": "Documentation",
-          "url": "https://shoelace.style/components/accordion-group"
+          "url": "https://shoelace.style/components/accordion"
         }
       ]
     },
@@ -208,6 +208,29 @@
         }
       ]
     },
+    {
+      "name": "dap-ds-breadcrumb",
+      "description": "A breadcrumb is a secondary navigation scheme that reveals the user's location in a website or Web application.\n---\n\n\n### **Slots:**\n - _default_ - The content of the breadcrumb.\n- **separator** - The separator between breadcrumb items. Default is '/'.\n\n### **CSS Properties:**\n - **--dds-breadcrumb-width** - The width of the breadcrumb container (default: 100%) _(default: undefined)_\n- **--dds-breadcrumb-overflow-x** - The horizontal overflow behavior of the breadcrumb (default: auto) _(default: undefined)_\n- **--dds-breadcrumb-transition** - The transition property for the breadcrumb (default: all 0.2s ease-in-out) _(default: undefined)_\n- **--dds-breadcrumb-list-display** - The display property of the breadcrumb list (default: flex) _(default: undefined)_\n- **--dds-breadcrumb-list-flex-wrap** - The flex-wrap property of the breadcrumb list (default: nowrap) _(default: undefined)_\n- **--dds-breadcrumb-list-align-items** - The align-items property of the breadcrumb list (default: center) _(default: undefined)_\n- **--dds-breadcrumb-list-min-width** - The minimum width of the breadcrumb list (default: max-content) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main breadcrumb container.\n- **separator** - The separator of the breadcrumb.",
+      "attributes": [
+        { "name": "variant", "values": [] },
+        {
+          "name": "mobile",
+          "description": "Mobile version of the breadcrumb",
+          "values": []
+        },
+        {
+          "name": "aria-labelledby",
+          "description": "The aria-labelledby of the breadcrumb",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://shoelace.style/components/breadcrumb"
+        }
+      ]
+    },
     {
       "name": "dap-ds-banner",
       "description": "A banner is a message displayed at the top of the page to provide important information to the user.\n---\n\n\n### **Events:**\n - **dds-close** - Event fired when the banner is closed.\n\n### **Slots:**\n - _default_ - The content of the banner.\n- **actions** - Actions of banner\n- **icon** - The icon of the banner.\n\n### **CSS Properties:**\n - **--dds-banner-gap** - The gap between banner elements (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-banner-line-height** - The line height of the banner text (default: var(--dds-font-line-height-xlarge)) _(default: undefined)_\n- **--dds-banner-transition** - The transition property for the banner (default: all 0.2s ease-in-out) _(default: undefined)_\n- **--dds-banner-brand-background** - The background color of the brand banner (default: var(--dds-banner-background-brand)) _(default: undefined)_\n- **--dds-banner-brand-icon-color** - The color of the brand banner icon (default: var(--dds-banner-icon-brand)) _(default: undefined)_\n- **--dds-banner-brand-text-color** - The text color of the brand banner (default: var(--dds-banner-text-brand)) _(default: undefined)_\n- **--dds-banner-brand-action-color** - The color of the brand banner actions (default: var(--dds-banner-action-enabled)) _(default: undefined)_\n- **--dds-banner-info-background** - The background color of the info banner (default: var(--dds-banner-background-informative)) _(default: undefined)_\n- **--dds-banner-info-icon-color** - The color of the info banner icon (default: var(--dds-banner-icon-informative)) _(default: undefined)_\n- **--dds-banner-info-text-color** - The text color of the info banner (default: var(--dds-banner-text-informative)) _(default: undefined)_\n- **--dds-banner-info-action-color** - The color of the info banner actions (default: var(--dds-banner-action-enabled)) _(default: undefined)_\n- **--dds-banner-positive-background** - The background color of the positive banner (default: var(--dds-banner-background-positive)) _(default: undefined)_\n- **--dds-banner-positive-icon-color** - The color of the positive banner icon (default: var(--dds-banner-icon-positive)) _(default: undefined)_\n- **--dds-banner-positive-text-color** - The text color of the positive banner (default: var(--dds-banner-text-positive)) _(default: undefined)_\n- **--dds-banner-positive-action-color** - The color of the positive banner actions (default: var(--dds-banner-action-enabled)) _(default: undefined)_\n- **--dds-banner-warning-background** - The background color of the warning banner (default: var(--dds-banner-background-warning)) _(default: undefined)_\n- **--dds-banner-warning-icon-color** - The color of the warning banner icon (default: var(--dds-banner-icon-warning)) _(default: undefined)_\n- **--dds-banner-warning-text-color** - The text color of the warning banner (default: var(--dds-banner-text-warning)) _(default: undefined)_\n- **--dds-banner-warning-action-color** - The color of the warning banner actions (default: var(--dds-banner-action-inverted-enabled)) _(default: undefined)_\n- **--dds-banner-negative-background** - The background color of the negative banner (default: var(--dds-banner-background-negative)) _(default: undefined)_\n- **--dds-banner-negative-icon-color** - The color of the negative banner icon (default: var(--dds-banner-icon-negative)) _(default: undefined)_\n- **--dds-banner-negative-text-color** - The text color of the negative banner (default: var(--dds-banner-text-negative)) _(default: undefined)_\n- **--dds-banner-negative-action-color** - The color of the negative banner actions (default: var(--dds-banner-action-inverted-enabled)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main banner container.\n- **card-base** - The wrapper card container.\n- **icon** - The icon of the banner.\n- **icon-element** - The icon element of the banner.\n- **icon-base** - The base of the icon.\n- **closebutton** - The close button of the banner.\n- **close-icon-element** - The icon element of the close button.\n- **close-icon-base** - The base of the close button icon.\n- **actions** - The actions of the banner.\n- **title** -  The title of the banner.",
@@ -256,29 +279,6 @@
         }
       ]
     },
-    {
-      "name": "dap-ds-breadcrumb",
-      "description": "A breadcrumb is a secondary navigation scheme that reveals the user's location in a website or Web application.\n---\n\n\n### **Slots:**\n - _default_ - The content of the breadcrumb.\n- **separator** - The separator between breadcrumb items. Default is '/'.\n\n### **CSS Properties:**\n - **--dds-breadcrumb-width** - The width of the breadcrumb container (default: 100%) _(default: undefined)_\n- **--dds-breadcrumb-overflow-x** - The horizontal overflow behavior of the breadcrumb (default: auto) _(default: undefined)_\n- **--dds-breadcrumb-transition** - The transition property for the breadcrumb (default: all 0.2s ease-in-out) _(default: undefined)_\n- **--dds-breadcrumb-list-display** - The display property of the breadcrumb list (default: flex) _(default: undefined)_\n- **--dds-breadcrumb-list-flex-wrap** - The flex-wrap property of the breadcrumb list (default: nowrap) _(default: undefined)_\n- **--dds-breadcrumb-list-align-items** - The align-items property of the breadcrumb list (default: center) _(default: undefined)_\n- **--dds-breadcrumb-list-min-width** - The minimum width of the breadcrumb list (default: max-content) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main breadcrumb container.\n- **separator** - The separator of the breadcrumb.",
-      "attributes": [
-        { "name": "variant", "values": [] },
-        {
-          "name": "mobile",
-          "description": "Mobile version of the breadcrumb",
-          "values": []
-        },
-        {
-          "name": "aria-labelledby",
-          "description": "The aria-labelledby of the breadcrumb",
-          "values": []
-        }
-      ],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://shoelace.style/components/breadcrumb"
-        }
-      ]
-    },
     {
       "name": "dap-ds-breadcrumb-item",
       "description": "A breadcrumb item is a secondary navigation scheme that reveals the user's location in a website or Web application.\n---\n\n\n### **Slots:**\n - _default_ - The content of the breadcrumb item.\n- **separator** - The separator between breadcrumb items. Default is an arrow-right-s-line icon.\n\n### **CSS Properties:**\n - **--dds-breadcrumb-item-display** - The display property of the breadcrumb item (default: inline-flex) _(default: undefined)_\n- **--dds-breadcrumb-item-flex-wrap** - The flex-wrap property of the breadcrumb item (default: nowrap) _(default: undefined)_\n- **--dds-breadcrumb-item-align-items** - The align-items property of the breadcrumb item (default: center) _(default: undefined)_\n- **--dds-breadcrumb-item-color** - The text color of the breadcrumb item (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-breadcrumb-item-transition** - The transition property for the breadcrumb item (default: all 0.2s ease-in-out) _(default: undefined)_\n- **--dds-breadcrumb-item-gap** - The gap between the breadcrumb item and the separator (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-breadcrumb-item-padding** - The padding of the breadcrumb item (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-breadcrumb-item-font-size** - The font size of the breadcrumb item (default: var(--dds-font-sm)) _(default: undefined)_\n- **--dds-breadcrumb-item-font-weight** - The font weight of the breadcrumb item (default: var(--dds-font-weight-medium)) _(default: undefined)_\n- **--dds-breadcrumb-item-font-weight-bold** - The bold font weight of the breadcrumb item (default: var(--dds-font-weight-bold)) _(default: undefined)_\n- **--dds-breadcrumb-item-separator-color** - The color of the separator (default: var(--dds-text-neutral-disabled)) _(default: undefined)_\n- **--dds-breadcrumb-item-link-color** - The color of the link (default: var(--dds-link-neutral-enabled)) _(default: undefined)_\n- **--dds-breadcrumb-item-inverted-color** - The text color when inverted (default: var(--dds-text-neutral-inverted)) _(default: undefined)_\n- **--dds-breadcrumb-item-inverted-link-color** - The link color when inverted (default: var(--dds-text-neutral-inverted)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main breadcrumb item container. The li element.\n- **link** - The link of the breadcrumb item. The dds-link component.\n- **link-base** - The base part of the link part. The dds-link components base part.\n- **item-nolink** - The item of the breadcrumb item without a link. The span element.\n- **separator** - The separator of the breadcrumb item.",
@@ -426,6 +426,74 @@
         }
       ]
     },
+    {
+      "name": "dap-ds-callout",
+      "description": "`dap-ds-callout` is a custom callout component.\n---\n\n\n### **Events:**\n - **dds-close** - Fired when the close button is clicked.\n\n### **Slots:**\n - _default_ - The content of the callout.\n- **title** - The title of the callout.\n- **icon** - The icon of the callout.\n- **actions** - The actions of the callout.\n- **close** - The close button of the callout.\n\n### **CSS Properties:**\n - **--dds-callout-padding** - Padding of the callout content. (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-callout-gap** - Gap between elements in horizontal layout. (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-callout-icon-size** - Size of the icon. (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-callout-title-color** - Color of the title text. (default: var(--dds-text-neutral-strong)) _(default: undefined)_\n- **--dds-callout-description-color** - Color of the description text. (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-callout-title-font-size** - Font size of the title. (default: var(--dds-font-base)) _(default: undefined)_\n- **--dds-callout-description-font-size** - Font size of the description. (default: var(--dds-font-base)) _(default: undefined)_\n- **--dds-callout-title-font-weight** - Font weight of the title. (default: var(--dds-font-weight-bold)) _(default: undefined)_\n- **--dds-callout-description-font-weight** - Font weight of the description. (default: var(--dds-font-weight-medium)) _(default: undefined)_\n- **--dds-callout-actions-font-weight** - Font weight of the actions. (default: var(--dds-font-weight-bold)) _(default: undefined)_\n- **--dds-callout-actions-gap** - Gap between action items. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-callout-content-gap** - Gap between content elements. (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-callout-border-radius** - Border radius of the callout. (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-callout-brand-background** - Brand variant background color. (default: var(--dds-background-brand-base)) _(default: undefined)_\n- **--dds-callout-brand-background-subtle** - Brand variant subtle background color. (default: var(--dds-background-brand-subtle)) _(default: undefined)_\n- **--dds-callout-brand-background-medium** - Brand variant medium background color. (default: var(--dds-background-brand-medium)) _(default: undefined)_\n- **--dds-callout-brand-background-strong** - Brand variant strong background color. (default: var(--dds-background-brand-strong)) _(default: undefined)_\n- **--dds-callout-brand-icon** - Brand variant icon color. (default: var(--dds-icon-brand-subtle)) _(default: undefined)_\n- **--dds-callout-brand-border** - Brand variant border color. (default: var(--dds-border-brand-subtle)) _(default: undefined)_\n- **--dds-callout-info-background** - Info variant background color. (default: var(--dds-background-informative-base)) _(default: undefined)_\n- **--dds-callout-info-background-subtle** - Info variant subtle background color. (default: var(--dds-background-informative-subtle)) _(default: undefined)_\n- **--dds-callout-info-background-medium** - Info variant medium background color. (default: var(--dds-background-informative-medium)) _(default: undefined)_\n- **--dds-callout-info-background-strong** - Info variant strong background color. (default: var(--dds-background-informative-strong)) _(default: undefined)_\n- **--dds-callout-info-icon** - Info variant icon color. (default: var(--dds-icon-informative-subtle)) _(default: undefined)_\n- **--dds-callout-info-border** - Info variant border color. (default: var(--dds-border-informative-subtle)) _(default: undefined)_\n- **--dds-callout-positive-background** - Positive variant background color. (default: var(--dds-background-positive-base)) _(default: undefined)_\n- **--dds-callout-positive-background-subtle** - Positive variant subtle background color. (default: var(--dds-background-positive-subtle)) _(default: undefined)_\n- **--dds-callout-positive-background-medium** - Positive variant medium background color. (default: var(--dds-background-positive-medium)) _(default: undefined)_\n- **--dds-callout-positive-background-strong** - Positive variant strong background color. (default: var(--dds-background-positive-strong)) _(default: undefined)_\n- **--dds-callout-positive-icon** - Positive variant icon color. (default: var(--dds-icon-positive-subtle)) _(default: undefined)_\n- **--dds-callout-positive-border** - Positive variant border color. (default: var(--dds-border-positive-subtle)) _(default: undefined)_\n- **--dds-callout-warning-background** - Warning variant background color. (default: var(--dds-background-warning-base)) _(default: undefined)_\n- **--dds-callout-warning-background-subtle** - Warning variant subtle background color. (default: var(--dds-background-warning-subtle)) _(default: undefined)_\n- **--dds-callout-warning-background-medium** - Warning variant medium background color. (default: var(--dds-background-warning-medium)) _(default: undefined)_\n- **--dds-callout-warning-background-strong** - Warning variant strong background color. (default: var(--dds-background-warning-strong)) _(default: undefined)_\n- **--dds-callout-warning-icon** - Warning variant icon color. (default: var(--dds-icon-neutral-strong)) _(default: undefined)_\n- **--dds-callout-warning-border** - Warning variant border color. (default: var(--dds-border-warning-subtle)) _(default: undefined)_\n- **--dds-callout-negative-background** - Negative variant background color. (default: var(--dds-background-negative-base)) _(default: undefined)_\n- **--dds-callout-negative-background-subtle** - Negative variant subtle background color. (default: var(--dds-background-negative-subtle)) _(default: undefined)_\n- **--dds-callout-negative-background-medium** - Negative variant medium background color. (default: var(--dds-background-negative-medium)) _(default: undefined)_\n- **--dds-callout-negative-background-strong** - Negative variant strong background color. (default: var(--dds-background-negative-strong)) _(default: undefined)_\n- **--dds-callout-negative-icon** - Negative variant icon color. (default: var(--dds-icon-negative-subtle)) _(default: undefined)_\n- **--dds-callout-negative-border** - Negative variant border color. (default: var(--dds-border-negative-subtle)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main callout container.\n- **content** - The content of the callout.\n- **card-content** - The content of the card.\n- **icon** - The icon of the callout.\n- **title** - The title of the callout.\n- **description** - The description of the callout.\n- **actions** - The actions of the callout.\n- **close** - The close button of the callout.",
+      "attributes": [
+        {
+          "name": "variant",
+          "description": "The variant of the callout",
+          "values": [
+            { "name": "brand" },
+            { "name": "positive" },
+            { "name": "info" },
+            { "name": "warning" },
+            { "name": "negative" }
+          ]
+        },
+        {
+          "name": "alignment",
+          "description": "The alignment of the callout. Can be `vertical` or `horizontal`.",
+          "values": [{ "name": "vertical" }, { "name": "horizontal" }]
+        },
+        {
+          "name": "shade",
+          "description": "The strongness of the callout colors. Can be `subtle`, `base`, `medium`, or `strong`.",
+          "values": [
+            { "name": "subtle" },
+            { "name": "base" },
+            { "name": "medium" },
+            { "name": "strong" }
+          ]
+        },
+        {
+          "name": "noBorder",
+          "description": "If the callout has a border",
+          "values": []
+        },
+        {
+          "name": "closeable",
+          "description": "If the callout has a close button",
+          "values": []
+        },
+        {
+          "name": "title",
+          "description": "The header of the callout",
+          "values": []
+        },
+        {
+          "name": "closeButtonLabel",
+          "description": "The label of the close button",
+          "values": []
+        },
+        {
+          "name": "closeButtonTestId",
+          "description": "`data-testid` for the default close button.",
+          "values": []
+        },
+        {
+          "name": "opened",
+          "description": "If the callout is opened",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://shoelace.style/components/callout"
+        }
+      ]
+    },
     {
       "name": "dap-ds-calendar-cell",
       "description": "Calendar cell represents a single cell in the calendar.\n---\n\n\n### **Slots:**\n - _default_ - The content of the calendar cell.\n\n### **CSS Properties:**\n - **--dds-calendar-cell-display** - The display property of the calendar cell host (default: flex) _(default: undefined)_\n- **--dds-calendar-cell-position** - The position property of the calendar cell host (default: relative) _(default: undefined)_\n- **--dds-calendar-cell-border-radius** - The border radius of the calendar cell (default: var(--dds-radius-rounded)) _(default: undefined)_\n- **--dds-calendar-cell-min-width** - The minimum width of the calendar cell (default: var(--dds-spacing-1000)) _(default: undefined)_\n- **--dds-calendar-cell-height** - The height of the calendar cell (default: var(--dds-spacing-1000)) _(default: undefined)_\n- **--dds-calendar-cell-min-height** - The minimum height of the calendar cell (default: var(--dds-spacing-1000)) _(default: undefined)_\n- **--dds-calendar-cell-color** - The text color of the calendar cell (default: var(--dds-button-subtle-text-neutral-enabled)) _(default: undefined)_\n- **--dds-calendar-cell-font-size** - The font size of the calendar cell (default: var(--dds-font-sm)) _(default: undefined)_\n- **--dds-calendar-cell-font-weight** - The font weight of the calendar cell (default: var(--dds-font-weight-medium)) _(default: undefined)_\n- **--dds-calendar-cell-text-align** - The text alignment of the calendar cell (default: center) _(default: undefined)_\n- **--dds-calendar-cell-cursor** - The cursor style of the calendar cell (default: pointer) _(default: undefined)_\n- **--dds-calendar-cell-background-hover** - The background color of the calendar cell on hover (default: var(--dds-background-neutral-medium)) _(default: undefined)_\n- **--dds-calendar-cell-background-active** - The background color of the calendar cell when active (default: var(--dds-background-neutral-strong)) _(default: undefined)_\n- **--dds-calendar-cell-selected-background** - The background color of the selected calendar cell (default: var(--dds-button-primary-background-enabled)) _(default: undefined)_\n- **--dds-calendar-cell-selected-color** - The text color of the selected calendar cell (default: var(--dds-button-primary-text-enabled)) _(default: undefined)_\n- **--dds-calendar-cell-selected-background-hover** - The background color of the selected calendar cell on hover (default: var(--dds-button-primary-background-hover)) _(default: undefined)_\n- **--dds-calendar-cell-selected-background-pressed** - The background color of the selected calendar cell when pressed (default: var(--dds-button-primary-background-pressed)) _(default: undefined)_\n- **--dds-calendar-cell-selected-today-mark-background** - The background color of the today mark in selected calendar cell (default: var(--dds-text-neutral-on-inverted)) _(default: undefined)_\n- **--dds-calendar-cell-disabled-color** - The text color of the disabled calendar cell (default: var(--dds-text-neutral-disabled)) _(default: undefined)_\n- **--dds-calendar-cell-disabled-cursor** - The cursor style of the disabled calendar cell (default: not-allowed) _(default: undefined)_\n- **--dds-calendar-cell-out-of-range-color** - The text color of the out-of-range calendar cell (default: var(--dds-text-neutral-placeholder)) _(default: undefined)_\n- **--dds-calendar-cell-today-font-weight** - The font weight of the today calendar cell (default: var(--dds-font-weight-bold)) _(default: undefined)_\n- **--dds-calendar-cell-header-background** - The background color of the header calendar cell (default: transparent) _(default: undefined)_\n- **--dds-calendar-cell-header-color** - The text color of the header calendar cell (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-calendar-cell-header-text-transform** - The text transform of the header calendar cell (default: capitalize) _(default: undefined)_\n- **--dds-calendar-cell-header-cursor** - The cursor style of the header calendar cell (default: default) _(default: undefined)_\n- **--dds-calendar-cell-in-range-color** - The text color of the in-range calendar cell (default: var(--dds-button-primary-text-enabled)) _(default: undefined)_\n- **--dds-calendar-cell-in-range-background-hover** - The background color of the in-range calendar cell on hover (default: var(--dds-button-primary-background-hover)) _(default: undefined)_\n- **--dds-calendar-cell-in-range-background-pressed** - The background color of the in-range calendar cell when pressed (default: var(--dds-button-primary-background-pressed)) _(default: undefined)_\n- **--dds-calendar-cell-range-background** - The background color of the range start/end calendar cell (default: var(--dds-button-primary-background-enabled)) _(default: undefined)_\n- **--dds-calendar-cell-range-color** - The text color of the range start/end calendar cell (default: var(--dds-button-primary-text-enabled)) _(default: undefined)_\n- **--dds-calendar-cell-range-today-mark-background** - The background color of the today mark in range start/end calendar cell (default: var(--dds-text-neutral-on-inverted)) _(default: undefined)_\n- **--dds-calendar-cell-today-mark-bottom** - The bottom position of the today mark (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-calendar-cell-today-mark-width** - The width of the today mark (default: 5px) _(default: undefined)_\n- **--dds-calendar-cell-today-mark-height** - The height of the today mark (default: 5px) _(default: undefined)_\n- **--dds-calendar-cell-today-mark-stroke** - The stroke color of the today mark (default: var(--dds-border-neutral-transparent)) _(default: undefined)_\n- **--dds-calendar-cell-today-mark-background** - The background color of the today mark (default: var(--dds-background-neutral-medium-inverted)) _(default: undefined)_\n- **--dds-calendar-cell-today-mark-fill** - The fill color of the today mark (default: var(--dds-background-neutral-medium-inverted)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main calendar cell container.\n- **today-mark** - The today mark of the calendar cell.",
@@ -525,74 +593,6 @@
         }
       ]
     },
-    {
-      "name": "dap-ds-callout",
-      "description": "`dap-ds-callout` is a custom callout component.\n---\n\n\n### **Events:**\n - **dds-close** - Fired when the close button is clicked.\n\n### **Slots:**\n - _default_ - The content of the callout.\n- **title** - The title of the callout.\n- **icon** - The icon of the callout.\n- **actions** - The actions of the callout.\n- **close** - The close button of the callout.\n\n### **CSS Properties:**\n - **--dds-callout-padding** - Padding of the callout content. (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-callout-gap** - Gap between elements in horizontal layout. (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-callout-icon-size** - Size of the icon. (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-callout-title-color** - Color of the title text. (default: var(--dds-text-neutral-strong)) _(default: undefined)_\n- **--dds-callout-description-color** - Color of the description text. (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-callout-title-font-size** - Font size of the title. (default: var(--dds-font-base)) _(default: undefined)_\n- **--dds-callout-description-font-size** - Font size of the description. (default: var(--dds-font-base)) _(default: undefined)_\n- **--dds-callout-title-font-weight** - Font weight of the title. (default: var(--dds-font-weight-bold)) _(default: undefined)_\n- **--dds-callout-description-font-weight** - Font weight of the description. (default: var(--dds-font-weight-medium)) _(default: undefined)_\n- **--dds-callout-actions-font-weight** - Font weight of the actions. (default: var(--dds-font-weight-bold)) _(default: undefined)_\n- **--dds-callout-actions-gap** - Gap between action items. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-callout-content-gap** - Gap between content elements. (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-callout-border-radius** - Border radius of the callout. (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-callout-brand-background** - Brand variant background color. (default: var(--dds-background-brand-base)) _(default: undefined)_\n- **--dds-callout-brand-background-subtle** - Brand variant subtle background color. (default: var(--dds-background-brand-subtle)) _(default: undefined)_\n- **--dds-callout-brand-background-medium** - Brand variant medium background color. (default: var(--dds-background-brand-medium)) _(default: undefined)_\n- **--dds-callout-brand-background-strong** - Brand variant strong background color. (default: var(--dds-background-brand-strong)) _(default: undefined)_\n- **--dds-callout-brand-icon** - Brand variant icon color. (default: var(--dds-icon-brand-subtle)) _(default: undefined)_\n- **--dds-callout-brand-border** - Brand variant border color. (default: var(--dds-border-brand-subtle)) _(default: undefined)_\n- **--dds-callout-info-background** - Info variant background color. (default: var(--dds-background-informative-base)) _(default: undefined)_\n- **--dds-callout-info-background-subtle** - Info variant subtle background color. (default: var(--dds-background-informative-subtle)) _(default: undefined)_\n- **--dds-callout-info-background-medium** - Info variant medium background color. (default: var(--dds-background-informative-medium)) _(default: undefined)_\n- **--dds-callout-info-background-strong** - Info variant strong background color. (default: var(--dds-background-informative-strong)) _(default: undefined)_\n- **--dds-callout-info-icon** - Info variant icon color. (default: var(--dds-icon-informative-subtle)) _(default: undefined)_\n- **--dds-callout-info-border** - Info variant border color. (default: var(--dds-border-informative-subtle)) _(default: undefined)_\n- **--dds-callout-positive-background** - Positive variant background color. (default: var(--dds-background-positive-base)) _(default: undefined)_\n- **--dds-callout-positive-background-subtle** - Positive variant subtle background color. (default: var(--dds-background-positive-subtle)) _(default: undefined)_\n- **--dds-callout-positive-background-medium** - Positive variant medium background color. (default: var(--dds-background-positive-medium)) _(default: undefined)_\n- **--dds-callout-positive-background-strong** - Positive variant strong background color. (default: var(--dds-background-positive-strong)) _(default: undefined)_\n- **--dds-callout-positive-icon** - Positive variant icon color. (default: var(--dds-icon-positive-subtle)) _(default: undefined)_\n- **--dds-callout-positive-border** - Positive variant border color. (default: var(--dds-border-positive-subtle)) _(default: undefined)_\n- **--dds-callout-warning-background** - Warning variant background color. (default: var(--dds-background-warning-base)) _(default: undefined)_\n- **--dds-callout-warning-background-subtle** - Warning variant subtle background color. (default: var(--dds-background-warning-subtle)) _(default: undefined)_\n- **--dds-callout-warning-background-medium** - Warning variant medium background color. (default: var(--dds-background-warning-medium)) _(default: undefined)_\n- **--dds-callout-warning-background-strong** - Warning variant strong background color. (default: var(--dds-background-warning-strong)) _(default: undefined)_\n- **--dds-callout-warning-icon** - Warning variant icon color. (default: var(--dds-icon-neutral-strong)) _(default: undefined)_\n- **--dds-callout-warning-border** - Warning variant border color. (default: var(--dds-border-warning-subtle)) _(default: undefined)_\n- **--dds-callout-negative-background** - Negative variant background color. (default: var(--dds-background-negative-base)) _(default: undefined)_\n- **--dds-callout-negative-background-subtle** - Negative variant subtle background color. (default: var(--dds-background-negative-subtle)) _(default: undefined)_\n- **--dds-callout-negative-background-medium** - Negative variant medium background color. (default: var(--dds-background-negative-medium)) _(default: undefined)_\n- **--dds-callout-negative-background-strong** - Negative variant strong background color. (default: var(--dds-background-negative-strong)) _(default: undefined)_\n- **--dds-callout-negative-icon** - Negative variant icon color. (default: var(--dds-icon-negative-subtle)) _(default: undefined)_\n- **--dds-callout-negative-border** - Negative variant border color. (default: var(--dds-border-negative-subtle)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main callout container.\n- **content** - The content of the callout.\n- **card-content** - The content of the card.\n- **icon** - The icon of the callout.\n- **title** - The title of the callout.\n- **description** - The description of the callout.\n- **actions** - The actions of the callout.\n- **close** - The close button of the callout.",
-      "attributes": [
-        {
-          "name": "variant",
-          "description": "The variant of the callout",
-          "values": [
-            { "name": "brand" },
-            { "name": "positive" },
-            { "name": "info" },
-            { "name": "warning" },
-            { "name": "negative" }
-          ]
-        },
-        {
-          "name": "alignment",
-          "description": "The alignment of the callout. Can be `vertical` or `horizontal`.",
-          "values": [{ "name": "vertical" }, { "name": "horizontal" }]
-        },
-        {
-          "name": "shade",
-          "description": "The strongness of the callout colors. Can be `subtle`, `base`, `medium`, or `strong`.",
-          "values": [
-            { "name": "subtle" },
-            { "name": "base" },
-            { "name": "medium" },
-            { "name": "strong" }
-          ]
-        },
-        {
-          "name": "noBorder",
-          "description": "If the callout has a border",
-          "values": []
-        },
-        {
-          "name": "closeable",
-          "description": "If the callout has a close button",
-          "values": []
-        },
-        {
-          "name": "title",
-          "description": "The header of the callout",
-          "values": []
-        },
-        {
-          "name": "closeButtonLabel",
-          "description": "The label of the close button",
-          "values": []
-        },
-        {
-          "name": "closeButtonTestId",
-          "description": "`data-testid` for the default close button.",
-          "values": []
-        },
-        {
-          "name": "opened",
-          "description": "If the callout is opened",
-          "values": []
-        }
-      ],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://shoelace.style/components/callout"
-        }
-      ]
-    },
     {
       "name": "dap-ds-card-actions",
       "description": "A card actions is a container for actions in a card.\n---\n\n\n### **Slots:**\n - _default_ - The content of the card actions.\n\n### **CSS Properties:**\n - **--dds-card-actions-gap** - The gap between items in the card actions. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-card-actions-padding-lg** - The padding for large size card actions. (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-card-actions-padding-md** - The padding for medium size card actions. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-card-actions-padding-sm** - The padding for small size card actions. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-card-actions-margin-lg** - The margin for large size card actions spacing. (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-card-actions-margin-md** - The margin for medium size card actions spacing. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-card-actions-margin-sm** - The margin for small size card actions spacing. (default: var(--dds-spacing-400)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main card actions container.",
@@ -1092,6 +1092,231 @@
         }
       ]
     },
+    {
+      "name": "dap-ds-datatable",
+      "description": "A data table is a component that displays data in a tabular format.\n---\n\n\n### **Events:**\n - **dds-sorting-change** - Fired when the sorting of the table changes.\n- **dds-selection-change** - Fired when the selection of the table changes.\n- **dds-pagination-change** - Fired when the pagination of the table changes.\n- **dds-row-click** - Fired when a row is clicked.\n\n### **Slots:**\n - **loading** - The loading content of the table.\n- **empty** - The empty content of the table.\n\n### **CSS Properties:**\n - **--dds-datatable-bg-color** - Background color of the table. (default: var(--dds-background-neutral-subtle)). _(default: undefined)_\n- **--dds-datatable-border-color** - Border color of the table cells. (default: var(--dds-border-neutral-divider)) _(default: undefined)_\n- **--dds-datatable-header-bg-color** - Background color of the table header. (default: var(--dds-background-neutral-subtle)) _(default: undefined)_\n- **--dds-datatable-header-text-color** - Text color of the table header. (default: var(--dds-text-neutral-strong)) _(default: undefined)_\n- **--dds-datatable-row-hover-bg-color** - Background color of hovered rows. (default: var(--dds-background-brand-strong)) _(default: undefined)_\n- **--dds-datatable-row-selected-bg-color** - Background color of selected rows. (default: var(--dds-background-brand-strong)) _(default: undefined)_\n- **--dds-datatable-cell-padding** - Padding of table cells. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-datatable-header-padding** - Padding of header cells. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-datatable-last-column-padding** - Padding of the last column. (default: var(--dds-spacing-500)) _(default: undefined)_\n- **--dds-datatable-first-column-padding** - Padding of the first column. (default: var(--dds-spacing-500)) _(default: undefined)_\n- **--dds-datatable-border-width** - Width of table borders. (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-datatable-outer-border-width** - Width of the outer container border only. (default: var(--dds-datatable-border-width)) _(default: undefined)_\n- **--dds-datatable-header-border-width** - Width of the header row bottom border only. (default: var(--dds-datatable-border-width)) _(default: undefined)_\n- **--dds-datatable-row-border-width** - Width of the row (body cell) bottom borders only. (default: var(--dds-datatable-border-width)) _(default: undefined)_\n- **--dds-datatable-stripe-color** - Background color for striped rows. (default: var(--dds-background-neutral-base)) _(default: undefined)_\n- **--dds-datatable-border-radius** - Border radius of the table. (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-datatable-shadow** - Box shadow of the table. (default: none) _(default: undefined)_\n- **--dds-datatable-transition-duration** - Duration of hover/selection transitions. (default: 0.2s) _(default: undefined)_\n- **--dds-datatable-z-index** - Z-index of the table. (default: 1) _(default: undefined)_\n- **--dds-datatable-min-height** - Minimum height of the table. (default: auto) _(default: undefined)_\n- **--dds-datatable-max-height** - Maximum height of the table. (default: none) _(default: undefined)_\n- **--dds-datatable-overflow-x** - Horizontal overflow behavior. (default: auto) _(default: undefined)_\n- **--dds-datatable-overflow-y** - Vertical overflow behavior. (default: auto) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main table container.\n- **header** - The header of the table.\n- **header-row** - The header row of the table.\n- **header-cell** - All cells of the header.\n- **body** - The body of the table.\n- **empty** - The empty content of the table.\n- **loading** - The loading content of the table.\n- **row** - All rows of the table.\n- **cell** - All cells of the table.\n- **pager** - The pager of the table.\n- **pager-base** - The base of the pager.\n- **pager-first** - The first button of the pager.\n- **pager-previous** - The previous button of the pager.\n- **pager-next** - The next button of the pager.\n- **pager-last** - The last button of the pager.\n- **pager-page-size-select** - The page size select of the pager.",
+      "attributes": [
+        {
+          "name": "rowKey",
+          "description": "Row key to use for row selection, this should be a unique key for each row",
+          "values": []
+        },
+        {
+          "name": "enableRowSelection",
+          "description": "Enable row selection on the table, can be a boolean or a function that returns a boolean",
+          "values": [{ "name": "((row: Row<T>) => boolean)" }]
+        },
+        {
+          "name": "enableSorting",
+          "description": "Enable sorting on the table",
+          "values": []
+        },
+        {
+          "name": "manualSorting",
+          "description": "Enable manual sorting on the table",
+          "values": []
+        },
+        {
+          "name": "manualPagination",
+          "description": "Enables manual pagination. If this option is set to true, the table will not automatically paginate rows and instead will expect you to manually paginate the rows before passing them to the table. This is useful if you are doing server-side pagination and aggregation.",
+          "values": []
+        },
+        {
+          "name": "autoResetPageIndex",
+          "description": "If set to true, pagination will be reset to the first page when page-altering state changes eg. data is updated, filters change, grouping changes, etc. This behavior is automatically disabled when manualPagination is true but it can be overridden by explicitly assigning a boolean value to the autoResetPageIndex table option.",
+          "values": []
+        },
+        {
+          "name": "enableRowClick",
+          "description": "Enable row click on the table",
+          "values": []
+        },
+        {
+          "name": "loading",
+          "description": "Loading state of the table",
+          "values": []
+        },
+        {
+          "name": "enableStripedRows",
+          "description": "Whether to enable striped rows",
+          "values": []
+        },
+        {
+          "name": "rowCount",
+          "description": "Number of rows in the table",
+          "values": []
+        },
+        {
+          "name": "caption",
+          "description": "Caption text for the table",
+          "values": []
+        },
+        {
+          "name": "loadingType",
+          "description": "The type of loading to use",
+          "values": [{ "name": "spinner" }, { "name": "skeleton" }]
+        },
+        {
+          "name": "loadingVariant",
+          "description": "The variant of the spinner. Only used if loadingType is 'spinner'.",
+          "values": [
+            { "name": "neutral" },
+            { "name": "brand" },
+            { "name": "negative" },
+            { "name": "positive" },
+            { "name": "inverted" }
+          ]
+        },
+        {
+          "name": "loadingSize",
+          "description": "The size of the spinner. Only used if loadingType is 'spinner'.",
+          "values": [
+            { "name": "xxl" },
+            { "name": "xl" },
+            { "name": "lg" },
+            { "name": "md" },
+            { "name": "sm" },
+            { "name": "xs" }
+          ]
+        },
+        {
+          "name": "loadingStaticSize",
+          "description": "The size of the spinner in pixels. This overrides the size attribute. Only used if loadingType is 'spinner'.",
+          "values": []
+        },
+        {
+          "name": "loadingText",
+          "description": "The loading text. Only used if loadingType is 'spinner'.",
+          "values": []
+        },
+        {
+          "name": "emptyText",
+          "description": "The text to display when the table is empty.",
+          "values": []
+        },
+        {
+          "name": "disableHeaderOnEmpty",
+          "description": "Whether to disable the header when the table is empty.",
+          "values": [{ "name": "true" }, { "name": "false" }]
+        },
+        {
+          "name": "showPagerOnEmpty",
+          "description": "Whether to show the pager component when the table is empty.",
+          "values": []
+        },
+        {
+          "name": "pager",
+          "description": "Whether to show the pager component",
+          "values": []
+        },
+        {
+          "name": "showPageSizeOptions",
+          "description": "Show the page size options.",
+          "values": []
+        },
+        {
+          "name": "showPageIndex",
+          "description": "Show the page index.",
+          "values": []
+        },
+        {
+          "name": "showPageCount",
+          "description": "Show the page count.",
+          "values": []
+        },
+        {
+          "name": "showFirstButton",
+          "description": "Show the first button.",
+          "values": []
+        },
+        {
+          "name": "showPreviousButton",
+          "description": "Show the previous button.",
+          "values": []
+        },
+        {
+          "name": "showNextButton",
+          "description": "Show the next button.",
+          "values": []
+        },
+        {
+          "name": "showLastButton",
+          "description": "Show the last button.",
+          "values": []
+        },
+        {
+          "name": "showPageNumbers",
+          "description": "Show numbered page buttons between the previous and next buttons.",
+          "values": []
+        },
+        {
+          "name": "siblingCount",
+          "description": "How many page numbers to show on each side of the current page.",
+          "values": []
+        },
+        {
+          "name": "firstButtonLabel",
+          "description": "The label of the first button",
+          "values": []
+        },
+        {
+          "name": "previousButtonLabel",
+          "description": "The label of the previous button",
+          "values": []
+        },
+        {
+          "name": "nextButtonLabel",
+          "description": "The label of the next button",
+          "values": []
+        },
+        {
+          "name": "lastButtonLabel",
+          "description": "The label of the last button",
+          "values": []
+        },
+        {
+          "name": "sortButtonTestId",
+          "description": "`data-testid` for the column sort-toggle button. Suffixed with the column id.",
+          "values": []
+        },
+        {
+          "name": "pageSizeOptions",
+          "description": "Available page size options for the pager",
+          "values": [{ "name": "number[]" }]
+        },
+        {
+          "name": "sorting",
+          "description": "Sorting state of the table",
+          "values": [{ "name": "SortingState" }]
+        },
+        {
+          "name": "rowSelection",
+          "description": "Selection state of the table",
+          "values": [{ "name": "RowSelectionState" }]
+        },
+        {
+          "name": "pagination",
+          "description": "Pagination state of the table",
+          "values": [{ "name": "PaginationState" }]
+        },
+        {
+          "name": "columnSizing",
+          "description": "Column sizing state of the table",
+          "values": [{ "name": "Record<string, number>" }]
+        },
+        {
+          "name": "ariaLabel",
+          "description": "ID of element labeling the table",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://shoelace.style/components/datatable"
+        }
+      ]
+    },
     {
       "name": "dap-ds-datepicker",
       "description": "A datepicker is a graphical user interface widget that allows the user to select a date from a calendar and/or time from a time range.\n---\n\n\n### **Events:**\n - **dds-change** - Fired when the datepicker value changes.\n- **dds-input** - Fired when the datepicker input value changes.\n- **dds-valid-date** - Fired when the datepicker input value is valid. Happens on manual input typing.\n- **dds-invalid-date** - Fired when the datepicker input value is invalid. Happens on manual input typing.\n- **dds-clear** - Fired when the datepicker is cleared.\n- **dds-focus** - Emitted when the datepicker gains focus.\n- **dds-blur** - Emitted when the datepicker loses focus.\n\n### **CSS Properties:**\n - **--dds-combobox-background** - The background color of the combobox. (default: var(--dds-fields-background-default)) _(default: undefined)_\n- **--dds-combobox-border-color** - The border color of the combobox. (default: var(--dds-border-neutral-base)) _(default: undefined)_\n- **--dds-combobox-border-width** - The border width of the combobox. (default: var(--dds-border-width-base, 1px)) _(default: undefined)_\n- **--dds-combobox-border-radius** - The border radius of the combobox. (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-combobox-text-color** - The text color of the combobox. (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-combobox-placeholder-color** - The placeholder text color. (default: var(--dds-text-neutral-subtle)) _(default: undefined)_\n- **--dds-combobox-disabled-background** - The background color when disabled. (default: var(--dds-background-neutral-stronger)) _(default: undefined)_\n- **--dds-combobox-disabled-text** - The text color when disabled. (default: var(--dds-text-neutral-disabled)) _(default: undefined)_\n- **--dds-combobox-error-border** - The border color for error state. (default: var(--dds-border-negative-base)) _(default: undefined)_\n- **--dds-combobox-success-border** - The border color for success state. (default: var(--dds-border-positive-base)) _(default: undefined)_\n- **--dds-combobox-icon-color** - The color of the icons. (default: var(--dds-text-icon-neutral-subtle)) _(default: undefined)_\n- **--dds-combobox-clear-icon-color** - The color of the clear icon. (default: var(--dds-button-subtle-icon-neutral-enabled)) _(default: undefined)_\n- **--dds-combobox-popup-background** - The background color of the popup. (default: var(--dds-background-neutral-subtle)) _(default: undefined)_\n- **--dds-combobox-popup-shadow** - The box shadow of the popup. (default: 0 4px 6px -1px rgb(0 0 0 / 8%), 0 2px 4px -1px rgb(0 0 0 / 6%)) _(default: undefined)_\n- **--dds-combobox-padding-xs** - The padding for extra small size. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-combobox-padding-sm** - The padding for small size. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-combobox-padding-lg** - The padding for large size. (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-combobox-padding-horizontal** - The horizontal padding. (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-combobox-padding-vertical** - The vertical padding. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-combobox-gap** - The gap between elements. (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-combobox-icon-gap** - The gap between icons. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-combobox-action-gap** - The gap between action elements. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-combobox-action-padding** - The padding for action elements. (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-combobox-clear-icon-width** - The width of the clear icon. (default: var(--dds-spacing-800)) _(default: undefined)_\n- **--dds-combobox-dropdown-icon-right** - The right position of the dropdown icon. (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-combobox-min-width** - The minimum width of the combobox. (default: 7.5rem) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main datepicker container.\n- **calendar** - The calendar of the datepicker.\n- **trigger** - The trigger button of the datepicker.\n- **label** - The label of the datepicker.\n- **description** - The description of the datepicker.\n- **feedback** - The feedback of the datepicker.\n- **tooltip** - The tooltip of the datepicker.\n- **input** - The input of the datepicker.\n- **clear-button** - The clear button of the datepicker.\n- **calendar-grid-cell-base** - The base of the calendar grid cell.\n- **calendar-grid-cell** - The cell of the calendar grid.\n- **calendar-grid-header-cell-base** - The base of the calendar grid header cell.\n- **calendar-grid-header-cell** - The header cell of the calendar grid.\n- **calendar-grid-cell-today-mark** - The today mark of the calendar grid cell.",
@@ -1281,7 +1506,18 @@
       "references": [
         {
           "name": "Documentation",
-          "url": "https://shoelace.style/components/divider"
+          "url": "https://shoelace.style/components/divider"
+        }
+      ]
+    },
+    {
+      "name": "dap-ds-feedback",
+      "description": "A feedback is a container for feedback messages.\n---\n\n\n### **Slots:**\n - **icon** - The custom icon of the feedback.\n- _default_ - The text of the feedback.\n\n### **CSS Properties:**\n - **--dds-feedback-spacing** - The spacing around the feedback component. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-feedback-color** - The text color of the feedback. (default: var(--dds-text-positive-subtle)) _(default: undefined)_\n- **--dds-feedback-font-size** - The font size of the feedback. (default: var(--dds-font-sm)) _(default: undefined)_\n- **--dds-feedback-font-weight** - The font weight of the feedback. (default: var(--dds-font-weight-bold)) _(default: undefined)_\n- **--dds-feedback-icon-fill** - The fill color of the feedback icon. (default: var(--dds-icon-positive-subtle)) _(default: undefined)_\n- **--dds-feedback-icon-spacing** - The spacing between the icon and text. (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-feedback-color-warning** - The text color for warning feedback. (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-feedback-color-positive** - The text color for positive feedback. (default: var(--dds-text-positive-subtle)) _(default: undefined)_\n- **--dds-feedback-color-negative** - The text color for negative feedback. (default: var(--dds-text-negative-subtle)) _(default: undefined)_\n- **--dds-feedback-icon-fill-warning** - The icon fill color for warning feedback. (default: var(--dds-icon-informative-subtle)) _(default: undefined)_\n- **--dds-feedback-icon-fill-positive** - The icon fill color for positive feedback. (default: var(--dds-icon-positive-subtle)) _(default: undefined)_\n- **--dds-feedback-icon-fill-negative** - The icon fill color for negative feedback. (default: var(--dds-icon-negative-subtle)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main feedback container.\n- **icon** - The icon of the feedback.\n- **text** - The text of the feedback.",
+      "attributes": [],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://shoelace.style/components/feedback"
         }
       ]
     },
@@ -1654,221 +1890,6 @@
         }
       ]
     },
-    {
-      "name": "dap-ds-datatable",
-      "description": "A data table is a component that displays data in a tabular format.\n---\n\n\n### **Events:**\n - **dds-sorting-change** - Fired when the sorting of the table changes.\n- **dds-selection-change** - Fired when the selection of the table changes.\n- **dds-pagination-change** - Fired when the pagination of the table changes.\n- **dds-row-click** - Fired when a row is clicked.\n\n### **Slots:**\n - **loading** - The loading content of the table.\n- **empty** - The empty content of the table.\n\n### **CSS Properties:**\n - **--dds-datatable-bg-color** - Background color of the table. (default: var(--dds-background-neutral-subtle)). _(default: undefined)_\n- **--dds-datatable-border-color** - Border color of the table cells. (default: var(--dds-border-neutral-divider)) _(default: undefined)_\n- **--dds-datatable-header-bg-color** - Background color of the table header. (default: var(--dds-background-neutral-subtle)) _(default: undefined)_\n- **--dds-datatable-header-text-color** - Text color of the table header. (default: var(--dds-text-neutral-strong)) _(default: undefined)_\n- **--dds-datatable-row-hover-bg-color** - Background color of hovered rows. (default: var(--dds-background-brand-strong)) _(default: undefined)_\n- **--dds-datatable-row-selected-bg-color** - Background color of selected rows. (default: var(--dds-background-brand-strong)) _(default: undefined)_\n- **--dds-datatable-cell-padding** - Padding of table cells. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-datatable-header-padding** - Padding of header cells. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-datatable-last-column-padding** - Padding of the last column. (default: var(--dds-spacing-500)) _(default: undefined)_\n- **--dds-datatable-first-column-padding** - Padding of the first column. (default: var(--dds-spacing-500)) _(default: undefined)_\n- **--dds-datatable-border-width** - Width of table borders. (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-datatable-stripe-color** - Background color for striped rows. (default: var(--dds-background-neutral-base)) _(default: undefined)_\n- **--dds-datatable-border-radius** - Border radius of the table. (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-datatable-shadow** - Box shadow of the table. (default: none) _(default: undefined)_\n- **--dds-datatable-transition-duration** - Duration of hover/selection transitions. (default: 0.2s) _(default: undefined)_\n- **--dds-datatable-z-index** - Z-index of the table. (default: 1) _(default: undefined)_\n- **--dds-datatable-min-height** - Minimum height of the table. (default: auto) _(default: undefined)_\n- **--dds-datatable-max-height** - Maximum height of the table. (default: none) _(default: undefined)_\n- **--dds-datatable-overflow-x** - Horizontal overflow behavior. (default: auto) _(default: undefined)_\n- **--dds-datatable-overflow-y** - Vertical overflow behavior. (default: auto) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main table container.\n- **header** - The header of the table.\n- **header-row** - The header row of the table.\n- **header-cell** - All cells of the header.\n- **body** - The body of the table.\n- **empty** - The empty content of the table.\n- **loading** - The loading content of the table.\n- **row** - All rows of the table.\n- **cell** - All cells of the table.\n- **pager** - The pager of the table.\n- **pager-base** - The base of the pager.\n- **pager-first** - The first button of the pager.\n- **pager-previous** - The previous button of the pager.\n- **pager-next** - The next button of the pager.\n- **pager-last** - The last button of the pager.\n- **pager-page-size-select** - The page size select of the pager.",
-      "attributes": [
-        {
-          "name": "rowKey",
-          "description": "Row key to use for row selection, this should be a unique key for each row",
-          "values": []
-        },
-        {
-          "name": "enableRowSelection",
-          "description": "Enable row selection on the table, can be a boolean or a function that returns a boolean",
-          "values": [{ "name": "((row: Row<T>) => boolean)" }]
-        },
-        {
-          "name": "enableSorting",
-          "description": "Enable sorting on the table",
-          "values": []
-        },
-        {
-          "name": "manualSorting",
-          "description": "Enable manual sorting on the table",
-          "values": []
-        },
-        {
-          "name": "manualPagination",
-          "description": "Enables manual pagination. If this option is set to true, the table will not automatically paginate rows and instead will expect you to manually paginate the rows before passing them to the table. This is useful if you are doing server-side pagination and aggregation.",
-          "values": []
-        },
-        {
-          "name": "autoResetPageIndex",
-          "description": "If set to true, pagination will be reset to the first page when page-altering state changes eg. data is updated, filters change, grouping changes, etc. This behavior is automatically disabled when manualPagination is true but it can be overridden by explicitly assigning a boolean value to the autoResetPageIndex table option.",
-          "values": []
-        },
-        {
-          "name": "enableRowClick",
-          "description": "Enable row click on the table",
-          "values": []
-        },
-        {
-          "name": "loading",
-          "description": "Loading state of the table",
-          "values": []
-        },
-        {
-          "name": "enableStripedRows",
-          "description": "Whether to enable striped rows",
-          "values": []
-        },
-        {
-          "name": "rowCount",
-          "description": "Number of rows in the table",
-          "values": []
-        },
-        {
-          "name": "caption",
-          "description": "Caption text for the table",
-          "values": []
-        },
-        {
-          "name": "loadingType",
-          "description": "The type of loading to use",
-          "values": [{ "name": "spinner" }, { "name": "skeleton" }]
-        },
-        {
-          "name": "loadingVariant",
-          "description": "The variant of the spinner. Only used if loadingType is 'spinner'.",
-          "values": [
-            { "name": "neutral" },
-            { "name": "brand" },
-            { "name": "negative" },
-            { "name": "positive" },
-            { "name": "inverted" }
-          ]
-        },
-        {
-          "name": "loadingSize",
-          "description": "The size of the spinner. Only used if loadingType is 'spinner'.",
-          "values": [
-            { "name": "xxl" },
-            { "name": "xl" },
-            { "name": "lg" },
-            { "name": "md" },
-            { "name": "sm" },
-            { "name": "xs" }
-          ]
-        },
-        {
-          "name": "loadingStaticSize",
-          "description": "The size of the spinner in pixels. This overrides the size attribute. Only used if loadingType is 'spinner'.",
-          "values": []
-        },
-        {
-          "name": "loadingText",
-          "description": "The loading text. Only used if loadingType is 'spinner'.",
-          "values": []
-        },
-        {
-          "name": "emptyText",
-          "description": "The text to display when the table is empty.",
-          "values": []
-        },
-        {
-          "name": "disableHeaderOnEmpty",
-          "description": "Whether to disable the header when the table is empty.",
-          "values": [{ "name": "true" }, { "name": "false" }]
-        },
-        {
-          "name": "showPagerOnEmpty",
-          "description": "Whether to show the pager component when the table is empty.",
-          "values": []
-        },
-        {
-          "name": "pager",
-          "description": "Whether to show the pager component",
-          "values": []
-        },
-        {
-          "name": "showPageSizeOptions",
-          "description": "Show the page size options.",
-          "values": []
-        },
-        {
-          "name": "showPageIndex",
-          "description": "Show the page index.",
-          "values": []
-        },
-        {
-          "name": "showPageCount",
-          "description": "Show the page count.",
-          "values": []
-        },
-        {
-          "name": "showFirstButton",
-          "description": "Show the first button.",
-          "values": []
-        },
-        {
-          "name": "showPreviousButton",
-          "description": "Show the previous button.",
-          "values": []
-        },
-        {
-          "name": "showNextButton",
-          "description": "Show the next button.",
-          "values": []
-        },
-        {
-          "name": "showLastButton",
-          "description": "Show the last button.",
-          "values": []
-        },
-        {
-          "name": "firstButtonLabel",
-          "description": "The label of the first button",
-          "values": []
-        },
-        {
-          "name": "previousButtonLabel",
-          "description": "The label of the previous button",
-          "values": []
-        },
-        {
-          "name": "nextButtonLabel",
-          "description": "The label of the next button",
-          "values": []
-        },
-        {
-          "name": "lastButtonLabel",
-          "description": "The label of the last button",
-          "values": []
-        },
-        {
-          "name": "sortButtonTestId",
-          "description": "`data-testid` for the column sort-toggle button. Suffixed with the column id.",
-          "values": []
-        },
-        {
-          "name": "pageSizeOptions",
-          "description": "Available page size options for the pager",
-          "values": [{ "name": "number[]" }]
-        },
-        {
-          "name": "sorting",
-          "description": "Sorting state of the table",
-          "values": [{ "name": "SortingState" }]
-        },
-        {
-          "name": "rowSelection",
-          "description": "Selection state of the table",
-          "values": [{ "name": "RowSelectionState" }]
-        },
-        {
-          "name": "pagination",
-          "description": "Pagination state of the table",
-          "values": [{ "name": "PaginationState" }]
-        },
-        {
-          "name": "columnSizing",
-          "description": "Column sizing state of the table",
-          "values": [{ "name": "Record<string, number>" }]
-        },
-        {
-          "name": "ariaLabel",
-          "description": "ID of element labeling the table",
-          "values": []
-        }
-      ],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://shoelace.style/components/datatable"
-        }
-      ]
-    },
     {
       "name": "dap-ds-icon",
       "description": "An icon is a graphical symbol that represents an object or action.\n---\n\n\n### **Slots:**\n - _default_ - The content of the icon for custom svg icons.\n\n### **CSS Properties:**\n - **--dds-icon-size-xs** - The size of extra small icons (default: 12px) _(default: undefined)_\n- **--dds-icon-size-sm** - The size of small icons (default: 16px) _(default: undefined)_\n- **--dds-icon-size-md** - The size of medium icons (default: 20px) _(default: undefined)_\n- **--dds-icon-size-lg** - The size of large icons (default: 24px) _(default: undefined)_\n- **--dds-icon-size-xl** - The size of extra large icons (default: 32px) _(default: undefined)_\n- **--dds-icon-size-xxl** - The size of extra extra large icons (default: 40px) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main icon container.\n- **icon** - The icon of the icon.",
@@ -1960,28 +1981,6 @@
         }
       ]
     },
-    {
-      "name": "dap-ds-feedback",
-      "description": "A feedback is a container for feedback messages.\n---\n\n\n### **Slots:**\n - **icon** - The custom icon of the feedback.\n- _default_ - The text of the feedback.\n\n### **CSS Properties:**\n - **--dds-feedback-spacing** - The spacing around the feedback component. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-feedback-color** - The text color of the feedback. (default: var(--dds-text-positive-subtle)) _(default: undefined)_\n- **--dds-feedback-font-size** - The font size of the feedback. (default: var(--dds-font-sm)) _(default: undefined)_\n- **--dds-feedback-font-weight** - The font weight of the feedback. (default: var(--dds-font-weight-bold)) _(default: undefined)_\n- **--dds-feedback-icon-fill** - The fill color of the feedback icon. (default: var(--dds-icon-positive-subtle)) _(default: undefined)_\n- **--dds-feedback-icon-spacing** - The spacing between the icon and text. (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-feedback-color-warning** - The text color for warning feedback. (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-feedback-color-positive** - The text color for positive feedback. (default: var(--dds-text-positive-subtle)) _(default: undefined)_\n- **--dds-feedback-color-negative** - The text color for negative feedback. (default: var(--dds-text-negative-subtle)) _(default: undefined)_\n- **--dds-feedback-icon-fill-warning** - The icon fill color for warning feedback. (default: var(--dds-icon-informative-subtle)) _(default: undefined)_\n- **--dds-feedback-icon-fill-positive** - The icon fill color for positive feedback. (default: var(--dds-icon-positive-subtle)) _(default: undefined)_\n- **--dds-feedback-icon-fill-negative** - The icon fill color for negative feedback. (default: var(--dds-icon-negative-subtle)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main feedback container.\n- **icon** - The icon of the feedback.\n- **text** - The text of the feedback.",
-      "attributes": [],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://shoelace.style/components/feedback"
-        }
-      ]
-    },
-    {
-      "name": "dap-ds-label",
-      "description": "A label is a container for labels intended for general use. It contains a label text, description, and tooltip.\n---\n\n\n### **CSS Properties:**\n - **--dds-label-background** - The background color of the label container. (default: var(--dds-background-neutral-subtle)). _(default: undefined)_\n- **--dds-label-border-color** - The border color of the label container. (default: var(--dds-border-neutral-subtle)). _(default: undefined)_\n- **--dds-label-border-width** - The border width of the label container. (default: var(--dds-border-width-base)). _(default: undefined)_\n- **--dds-label-border-radius** - The border radius of the label container. (default: var(--dds-radius-base)). _(default: undefined)_\n- **--dds-label-padding** - The padding of the label container. (default: var(--dds-spacing-400)). _(default: undefined)_\n- **--dds-label-disabled-background** - The background color of the label container when disabled. (default: var(--dds-background-neutral-disabled-inverted)). _(default: undefined)_\n- **--dds-label-checked-border-color** - The border color of the label container when checked. (default: var(--dds-background-brand-base-inverted)). _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main label container.\n- **label** - Tha main label container. dap-ds-form-label element.\n- **label-base** - The label text.\n- **label-required** - The required indicator of the label.\n- **label-optional** - The optional indicator of the label.\n- **tooltip** - The tooltip of the label. dap-ds-tooltip element.\n- **description** - The description of the label.",
-      "attributes": [],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://shoelace.style/components/label"
-        }
-      ]
-    },
     {
       "name": "dap-ds-image-zoom",
       "description": "An image zoom component that provides a Medium.com-style zoom experience. Click an image to expand it to fill the viewport with a smooth animation.\n---\n\n\n### **Events:**\n - **dds-zoom** - Fires when the image is about to zoom. Cancelable via event.preventDefault().\n- **dds-unzoom** - Fires after the image has unzoomed.\n\n### **Methods:**\n - **zoom(): _void_** - Programmatically zoom the image.\n- **unzoom(): _void_** - Programmatically unzoom the image.\n\n### **Slots:**\n - _default_ - The image or content element to zoom. Should contain an <img> element.\n\n### **CSS Properties:**\n - **--dds-image-zoom-overlay-bg** - Overlay background color (default: rgba(0, 0, 0, 0.8)). _(default: undefined)_\n- **--dds-image-zoom-transition-speed** - Animation duration (default: 300ms). _(default: undefined)_\n- **--dds-image-zoom-transition-timing** - Animation timing function (default: var(--dds-easing-ease-in-out, ease-in-out)). _(default: undefined)_\n\n### **CSS Parts:**\n - **trigger** - The zoom trigger wrapper element.\n- **dialog** - The zoom dialog element.\n- **overlay** - The backdrop overlay element.\n- **zoomed-image** - The zoomed image element.\n- **unzoom-button** - The button to close the zoomed view.\n- **expand-button** - The button to expand the image.\n- **expand-button-base** - The base of the expand button.\n- **expand-button-content** - The content of the expand button.\n- **unzoom-button-base** - The base of the unzoom button.\n- **unzoom-button-content** - The content of the unzoom button.\n- **expand-button-icon** - The icon of the expand button.\n- **unzoom-button-icon** - The icon of the unzoom button.",
@@ -2045,11 +2044,33 @@
           "description": "`data-testid` for the unzoom/close button.",
           "values": []
         }
-      ],
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://shoelace.style/components/image-zoom"
+        }
+      ]
+    },
+    {
+      "name": "dap-ds-input",
+      "description": "An input is a field used to collect user input.\n---\n\n\n### **Events:**\n - **dds-change** - Fired when the input value changes.\n- **dds-input** - Fired when the input value changes.\n- **dds-keydown** - Fired when a key is pressed down.\n- **dds-blur** - Fired when the input loses focus.\n- **dds-focus** - Emitted when the input gains focus.\n\n### **Slots:**\n - **postfix** - The postfix of the input.\n- **prefix** - The prefix of the input.\n- **addon-before** - The addon before the input.\n- **addon-after** - The addon after the input.\n- **feedback-icon** - The custom icon of the feedback.\n\n### **CSS Properties:**\n - **--dds-input-height-xs** - The height of the extra small input. (default: var(--dds-spacing-800)). _(default: undefined)_\n- **--dds-input-height-sm** - The height of the small input. (default: var(--dds-spacing-1000)). _(default: undefined)_\n- **--dds-input-height-lg** - The height of the large input. (default: var(--dds-spacing-1200)). _(default: undefined)_\n- **--dds-input-padding-xs** - The padding of the extra small input. (default: 0 var(--dds-spacing-200)). _(default: undefined)_\n- **--dds-input-padding-sm** - The padding of the small input. (default: 0 var(--dds-spacing-300)). _(default: undefined)_\n- **--dds-input-padding-lg** - The padding of the large input. (default: 0 var(--dds-spacing-400)). _(default: undefined)_\n- **--dds-input-font-size-xs** - The font size of the extra small input. (default: var(--dds-font-sm)). _(default: undefined)_\n- **--dds-input-font-size-sm** - The font size of the small input. (default: var(--dds-font-base)). _(default: undefined)_\n- **--dds-input-font-size-lg** - The font size of the large input. (default: var(--dds-font-lg)). _(default: undefined)_\n- **--dds-input-border** - The border of the input. (default: var(--dds-border-width-base) solid var(--dds-border-neutral-base)). _(default: undefined)_\n- **--dds-input-background** - The background color of the input. (default: var(--dds-fields-background-default)). _(default: undefined)_\n- **--dds-input-text-color** - The text color of the input. (default: var(--dds-text-neutral-base)). _(default: undefined)_\n- **--dds-input-border-radius** - The border radius of the input. (default: var(--dds-radius-base)). _(default: undefined)_\n- **--dds-input-disabled-border** - The border of the disabled input. (default: 0 solid var(--dds-border-neutral-disabled)). _(default: undefined)_\n- **--dds-input-disabled-background** - The background color of the disabled input. (default: var(--dds-fields-background-disabled)). _(default: undefined)_\n- **--dds-input-disabled-text** - The text color of the disabled input. (default: var(--dds-text-neutral-disabled)). _(default: undefined)_\n- **--dds-input-readonly-border** - The border of the readonly input. (default: 0 solid var(--dds-border-neutral-subtle)). _(default: undefined)_\n- **--dds-input-readonly-background** - The background color of the readonly input. (default: var(--dds-fields-background-read-only)). _(default: undefined)_\n- **--dds-input-readonly-text** - The text color of the readonly input. (default: var(--dds-text-neutral-subtle)). _(default: undefined)_\n- **--dds-input-success-border** - The border of the success input. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base)). _(default: undefined)_\n- **--dds-input-error-border** - The border of the error input. (default: var(--dds-border-width-base) solid var(--dds-border-negative-base)). _(default: undefined)_\n- **--dds-input-addon-background** - The background color of the input addon. (default: var(--dds-fields-background-default)). _(default: undefined)_\n- **--dds-input-addon-success-background** - The background color of the success input addon. (default: var(--dds-fields-background-default)). _(default: undefined)_\n- **--dds-input-addon-error-background** - The background color of the error input addon. (default: var(--dds-fields-background-default)). _(default: undefined)_\n- **--dds-input-addon-border-before** - The border of the addon before the input. (default: var(--dds-border-width-base) solid var(--dds-border-neutral-base)). _(default: undefined)_\n- **--dds-input-addon-border-after** - The border of the addon after the input. (default: var(--dds-border-width-base) solid var(--dds-border-neutral-base)). _(default: undefined)_\n- **--dds-input-addon-border-width-before** - The border width of the addon before the input. (default: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base)). _(default: undefined)_\n- **--dds-input-addon-border-width-after** - The border width of the addon after the input. (default: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0). _(default: undefined)_\n- **--dds-input-addon-success-border** - The border of the success addon. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base)). _(default: undefined)_\n- **--dds-input-addon-success-border-before** - The border of the success addon before the input. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base)). _(default: undefined)_\n- **--dds-input-addon-success-border-after** - The border of the success addon after the input. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base)). _(default: undefined)_\n- **--dds-input-addon-success-border-width-before** - The border width of the success addon before the input. (default: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base)). _(default: undefined)_\n- **--dds-input-addon-success-border-width-after** - The border width of the success addon after the input. (default: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0). _(default: undefined)_\n- **--dds-input-addon-error-border-before** - The border of the error addon before the input. (default: var(--dds-border-width-base) solid var(--dds-border-negative-base)). _(default: undefined)_\n- **--dds-input-addon-error-border-after** - The border of the error addon after the input. (default: var(--dds-border-width-base) solid var(--dds-border-negative-base)). _(default: undefined)_\n- **--dds-input-addon-error-border-width-before** - The border width of the error addon before the input. (default: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base)). _(default: undefined)_\n- **--dds-input-addon-error-border-width-after** - The border width of the error addon after the input. (default: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0). _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main input container.\n- **input** - The input element.\n- **label** - The label of the input.\n- **description** - The description of the input.\n- **feedback** - The feedback of the input.\n- **tooltip** - The tooltip of the input.\n- **addon-before** - The addon before the input.\n- **addon-after** - The addon after the input.\n- **prefix** - The prefix of the input.\n- **postfix** - The postfix of the input.",
+      "attributes": [],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://shoelace.style/components/input"
+        }
+      ]
+    },
+    {
+      "name": "dap-ds-label",
+      "description": "A label is a container for labels intended for general use. It contains a label text, description, and tooltip.\n---\n\n\n### **CSS Properties:**\n - **--dds-label-background** - The background color of the label container. (default: var(--dds-background-neutral-subtle)). _(default: undefined)_\n- **--dds-label-border-color** - The border color of the label container. (default: var(--dds-border-neutral-subtle)). _(default: undefined)_\n- **--dds-label-border-width** - The border width of the label container. (default: var(--dds-border-width-base)). _(default: undefined)_\n- **--dds-label-border-radius** - The border radius of the label container. (default: var(--dds-radius-base)). _(default: undefined)_\n- **--dds-label-padding** - The padding of the label container. (default: var(--dds-spacing-400)). _(default: undefined)_\n- **--dds-label-disabled-background** - The background color of the label container when disabled. (default: var(--dds-background-neutral-disabled-inverted)). _(default: undefined)_\n- **--dds-label-checked-border-color** - The border color of the label container when checked. (default: var(--dds-background-brand-base-inverted)). _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main label container.\n- **label** - Tha main label container. dap-ds-form-label element.\n- **label-base** - The label text.\n- **label-required** - The required indicator of the label.\n- **label-optional** - The optional indicator of the label.\n- **tooltip** - The tooltip of the label. dap-ds-tooltip element.\n- **description** - The description of the label.",
+      "attributes": [],
       "references": [
         {
           "name": "Documentation",
-          "url": "https://shoelace.style/components/image-zoom"
+          "url": "https://shoelace.style/components/label"
         }
       ]
     },
@@ -2698,7 +2719,7 @@
     },
     {
       "name": "dap-ds-pager",
-      "description": "A pager is a component that displays pagination controls.\n---\n\n\n### **Events:**\n - **dds-pagination-change** - Event fired when the pagination changes\n\n### **CSS Properties:**\n - **--dds-pager-spacing-vertical** - The vertical spacing of the pager (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-pager-spacing-horizontal** - The horizontal spacing of the pager (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-pager-button-padding** - The padding of the pager buttons (default: var(--dds-spacing-150)) _(default: undefined)_\n- **--dds-pager-button-border-width** - The border width of the pager buttons (default: var(--dds-border-width-base, 1px)) _(default: undefined)_\n- **--dds-pager-button-border-color** - The border color of the pager buttons (default: var(--dds-button-subtle-border-neutral-enabled)) _(default: undefined)_\n- **--dds-pager-button-border-radius** - The border radius of the pager buttons (default: var(--dds-radius-rounded)) _(default: undefined)_\n- **--dds-pager-button-background** - The background color of the pager buttons (default: var(--dds-button-subtle-background-neutral-enabled)) _(default: undefined)_\n- **--dds-pager-button-font-size** - The font size of the pager buttons (default: var(--dds-font-sm, 14px)) _(default: undefined)_\n- **--dds-pager-button-font-weight** - The font weight of the pager buttons (default: var(--dds-font-weight-bold, 700)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main pager container.\n- **first** - The first page button.\n- **previous** - The previous page button.\n- **next** - The next page button.\n- **last** - The last page button.\n- **page-size** - The page size select.\n- **pager-button-first-base** - The base of the first page button.\n- **pager-button-first-content** - The content of the first page button.\n- **pager-button-previous-base** - The base of the previous page button.\n- **pager-button-previous-content** - The content of the previous page button.\n- **pager-button-next-base** - The base of the next page button.\n- **pager-button-next-content** - The content of the next page button.\n- **pager-button-last-base** - The base of the last page button.\n- **pager-button-last-content** - The content of the last page button.\n- **page-size-select-base** - The base of the page size select.\n- **page-size-select-trigger** - The trigger of the page size select.",
+      "description": "A pager is a component that displays pagination controls.\n---\n\n\n### **Events:**\n - **dds-pagination-change** - Event fired when the pagination changes\n\n### **CSS Properties:**\n - **--dds-pager-spacing-vertical** - The vertical spacing of the pager (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-pager-spacing-horizontal** - The horizontal spacing of the pager (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-pager-button-padding** - The padding of the pager buttons (default: var(--dds-spacing-150)) _(default: undefined)_\n- **--dds-pager-button-border-width** - The border width of the pager buttons (default: var(--dds-border-width-base, 1px)) _(default: undefined)_\n- **--dds-pager-button-border-color** - The border color of the pager buttons (default: var(--dds-button-subtle-border-neutral-enabled)) _(default: undefined)_\n- **--dds-pager-button-border-radius** - The border radius of the pager buttons (default: var(--dds-radius-rounded)) _(default: undefined)_\n- **--dds-pager-button-background** - The background color of the pager buttons (default: var(--dds-button-subtle-background-neutral-enabled)) _(default: undefined)_\n- **--dds-pager-button-font-size** - The font size of the pager buttons (default: var(--dds-font-sm, 14px)) _(default: undefined)_\n- **--dds-pager-button-font-weight** - The font weight of the pager buttons (default: var(--dds-font-weight-bold, 700)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main pager container.\n- **first** - The first page button.\n- **previous** - The previous page button.\n- **next** - The next page button.\n- **last** - The last page button.\n- **page-size** - The page size select.\n- **pager-button-first-base** - The base of the first page button.\n- **pager-button-first-content** - The content of the first page button.\n- **pager-button-previous-base** - The base of the previous page button.\n- **pager-button-previous-content** - The content of the previous page button.\n- **pager-button-next-base** - The base of the next page button.\n- **pager-button-next-content** - The content of the next page button.\n- **pager-button-last-base** - The base of the last page button.\n- **pager-button-last-content** - The content of the last page button.\n- **page-size-select-base** - The base of the page size select.\n- **page-size-select-trigger** - The trigger of the page size select.\n- **page-numbers** - The container of the numbered page buttons (shown when showPageNumbers is 'true').\n- **page-number** - Each numbered page button.\n- **page-number-active** - The active (current) numbered page button.\n- **page-number-base** - The base of each numbered page button.\n- **page-number-content** - The content of each numbered page button.\n- **page-info** - The page info / total count text.",
       "attributes": [
         {
           "name": "disabled",
@@ -2765,6 +2786,16 @@
           "description": "Show the last button.",
           "values": []
         },
+        {
+          "name": "showPageNumbers",
+          "description": "Show numbered page buttons between the previous and next buttons.",
+          "values": []
+        },
+        {
+          "name": "siblingCount",
+          "description": "How many page numbers to show on each side of the current page.",
+          "values": []
+        },
         {
           "name": "firstButtonLabel",
           "description": "The first button label.",
@@ -3017,17 +3048,6 @@
         }
       ]
     },
-    {
-      "name": "dap-ds-input",
-      "description": "An input is a field used to collect user input.\n---\n\n\n### **Events:**\n - **dds-change** - Fired when the input value changes.\n- **dds-input** - Fired when the input value changes.\n- **dds-keydown** - Fired when a key is pressed down.\n- **dds-blur** - Fired when the input loses focus.\n- **dds-focus** - Emitted when the input gains focus.\n\n### **Slots:**\n - **postfix** - The postfix of the input.\n- **prefix** - The prefix of the input.\n- **addon-before** - The addon before the input.\n- **addon-after** - The addon after the input.\n- **feedback-icon** - The custom icon of the feedback.\n\n### **CSS Properties:**\n - **--dds-input-height-xs** - The height of the extra small input. (default: var(--dds-spacing-800)). _(default: undefined)_\n- **--dds-input-height-sm** - The height of the small input. (default: var(--dds-spacing-1000)). _(default: undefined)_\n- **--dds-input-height-lg** - The height of the large input. (default: var(--dds-spacing-1200)). _(default: undefined)_\n- **--dds-input-padding-xs** - The padding of the extra small input. (default: 0 var(--dds-spacing-200)). _(default: undefined)_\n- **--dds-input-padding-sm** - The padding of the small input. (default: 0 var(--dds-spacing-300)). _(default: undefined)_\n- **--dds-input-padding-lg** - The padding of the large input. (default: 0 var(--dds-spacing-400)). _(default: undefined)_\n- **--dds-input-font-size-xs** - The font size of the extra small input. (default: var(--dds-font-sm)). _(default: undefined)_\n- **--dds-input-font-size-sm** - The font size of the small input. (default: var(--dds-font-base)). _(default: undefined)_\n- **--dds-input-font-size-lg** - The font size of the large input. (default: var(--dds-font-lg)). _(default: undefined)_\n- **--dds-input-border** - The border of the input. (default: var(--dds-border-width-base) solid var(--dds-border-neutral-base)). _(default: undefined)_\n- **--dds-input-background** - The background color of the input. (default: var(--dds-fields-background-default)). _(default: undefined)_\n- **--dds-input-text-color** - The text color of the input. (default: var(--dds-text-neutral-base)). _(default: undefined)_\n- **--dds-input-border-radius** - The border radius of the input. (default: var(--dds-radius-base)). _(default: undefined)_\n- **--dds-input-disabled-border** - The border of the disabled input. (default: 0 solid var(--dds-border-neutral-disabled)). _(default: undefined)_\n- **--dds-input-disabled-background** - The background color of the disabled input. (default: var(--dds-fields-background-disabled)). _(default: undefined)_\n- **--dds-input-disabled-text** - The text color of the disabled input. (default: var(--dds-text-neutral-disabled)). _(default: undefined)_\n- **--dds-input-readonly-border** - The border of the readonly input. (default: 0 solid var(--dds-border-neutral-subtle)). _(default: undefined)_\n- **--dds-input-readonly-background** - The background color of the readonly input. (default: var(--dds-fields-background-read-only)). _(default: undefined)_\n- **--dds-input-readonly-text** - The text color of the readonly input. (default: var(--dds-text-neutral-subtle)). _(default: undefined)_\n- **--dds-input-success-border** - The border of the success input. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base)). _(default: undefined)_\n- **--dds-input-error-border** - The border of the error input. (default: var(--dds-border-width-base) solid var(--dds-border-negative-base)). _(default: undefined)_\n- **--dds-input-addon-background** - The background color of the input addon. (default: var(--dds-fields-background-default)). _(default: undefined)_\n- **--dds-input-addon-success-background** - The background color of the success input addon. (default: var(--dds-fields-background-default)). _(default: undefined)_\n- **--dds-input-addon-error-background** - The background color of the error input addon. (default: var(--dds-fields-background-default)). _(default: undefined)_\n- **--dds-input-addon-border-before** - The border of the addon before the input. (default: var(--dds-border-width-base) solid var(--dds-border-neutral-base)). _(default: undefined)_\n- **--dds-input-addon-border-after** - The border of the addon after the input. (default: var(--dds-border-width-base) solid var(--dds-border-neutral-base)). _(default: undefined)_\n- **--dds-input-addon-border-width-before** - The border width of the addon before the input. (default: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base)). _(default: undefined)_\n- **--dds-input-addon-border-width-after** - The border width of the addon after the input. (default: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0). _(default: undefined)_\n- **--dds-input-addon-success-border** - The border of the success addon. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base)). _(default: undefined)_\n- **--dds-input-addon-success-border-before** - The border of the success addon before the input. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base)). _(default: undefined)_\n- **--dds-input-addon-success-border-after** - The border of the success addon after the input. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base)). _(default: undefined)_\n- **--dds-input-addon-success-border-width-before** - The border width of the success addon before the input. (default: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base)). _(default: undefined)_\n- **--dds-input-addon-success-border-width-after** - The border width of the success addon after the input. (default: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0). _(default: undefined)_\n- **--dds-input-addon-error-border-before** - The border of the error addon before the input. (default: var(--dds-border-width-base) solid var(--dds-border-negative-base)). _(default: undefined)_\n- **--dds-input-addon-error-border-after** - The border of the error addon after the input. (default: var(--dds-border-width-base) solid var(--dds-border-negative-base)). _(default: undefined)_\n- **--dds-input-addon-error-border-width-before** - The border width of the error addon before the input. (default: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base)). _(default: undefined)_\n- **--dds-input-addon-error-border-width-after** - The border width of the error addon after the input. (default: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0). _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main input container.\n- **input** - The input element.\n- **label** - The label of the input.\n- **description** - The description of the input.\n- **feedback** - The feedback of the input.\n- **tooltip** - The tooltip of the input.\n- **addon-before** - The addon before the input.\n- **addon-after** - The addon after the input.\n- **prefix** - The prefix of the input.\n- **postfix** - The postfix of the input.",
-      "attributes": [],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://shoelace.style/components/input"
-        }
-      ]
-    },
     {
       "name": "dap-ds-select",
       "description": "A select is a form element that allows the user to select one option from a set.\n---\n\n\n### **Events:**\n - **dds-change** - Fired when the select value changes.\n- **dds-blur** - Emitted when the select loses focus.\n- **dds-focus** - Emitted when the select gains focus.\n- **dds-opened** - Emitted when the select dropdown is opened.\n- **dds-closed** - Emitted when the select dropdown is closed.\n\n### **Methods:**\n - **getActiveDescendant()** - Get the active descendant element for aria-activedescendant\nReturns the currently focused option when dropdown is open, otherwise null\n\n### **Slots:**\n - _default_ - The option list of the select.\n- **indicator-icon** - The indicator icon of the select.\n\n### **CSS Properties:**\n - **--dds-select-min-height** - Minimum height of the select component (default: var(--dds-spacing-1000)) _(default: undefined)_\n- **--dds-select-padding** - Padding of the select component (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-select-column-gap** - Column gap of the select component (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-select-border-color** - Border color of the select component (default: var(--dds-border-neutral-base)) _(default: undefined)_\n- **--dds-select-border-radius** - Border radius of the select component (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-select-bg-color** - Background color of the select component (default: var(--dds-background-neutral-subtle)) _(default: undefined)_\n- **--dds-select-text-color** - Text color of the select component (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-select-icon-right** - Right position of the icon (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-select-icon-color** - Color of the icon (default: var(--dds-icon-neutral-subtle)) _(default: undefined)_\n- **--dds-select-text-margin-right** - Right margin of the text (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-select-disabled-border-color** - Border color when disabled (default: var(--dds-background-neutral-stronger)) _(default: undefined)_\n- **--dds-select-disabled-bg-color** - Background color when disabled (default: var(--dds-background-neutral-stronger)) _(default: undefined)_\n- **--dds-select-disabled-text-color** - Text color when disabled (default: var(--dds-text-neutral-disabled)) _(default: undefined)_\n- **--dds-select-error-border-color** - Border color in error state (default: var(--dds-border-negative-base)) _(default: undefined)_\n- **--dds-select-success-border-color** - Border color in success state (default: var(--dds-border-positive-base)) _(default: undefined)_\n- **--dds-select-xs-min-height** - Minimum height for extra small size (default: var(--dds-spacing-800)) _(default: undefined)_\n- **--dds-select-xs-padding** - Padding for extra small size (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-select-xs-font-size** - Font size for extra small size (default: var(--dds-font-sm)) _(default: undefined)_\n- **--dds-select-lg-min-height** - Minimum height for large size (default: var(--dds-spacing-1200)) _(default: undefined)_\n- **--dds-select-lg-padding** - Padding for large size (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-select-lg-font-size** - Font size for large size (default: var(--dds-font-lg)) _(default: undefined)_\n- **--dds-select-lg-icon-right** - Right position of the icon for large size (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-select-lg-icon-color** - Color of the icon for large size (default: var(--dds-text-icon-neutral-subtle)) _(default: undefined)_\n- **--dds-select-popup-bg-color** - Background color of the popup (default: var(--dds-background-neutral-subtle)) _(default: undefined)_\n- **--dds-select-icon-opened-transform** - Transform of the icon when the select is opened (default: rotate(90deg)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main select container.\n- **trigger** - The trigger button of the select.\n- **label** - The label of the select.\n- **description** - The description of the select.\n- **feedback** - The feedback of the select.\n- **tooltip** - The tooltip of the select.\n- **popup-base** - The base of the popup.\n- **option-list** - The option list of the select.\n- **option-item** - The option item of the select.\n- **option-item-base** - The base of the option item.\n- **option-item-label** - The label of the option item.\n- **option-item-prefix** - The prefix of the option item.\n- **option-item-suffix** - The suffix of the option item.\n- **indicator-icon** - The indicator icon of the select.\n- **mobile-tray** - The mobile tray of the select.\n- **mobile-content** - The mobile content of the select.\n- **mobile-body** - The mobile body of the select.\n- **mobile-header** - The mobile header of the select.\n- **mobile-footer** - The mobile footer of the select.",
@@ -3108,129 +3128,6 @@
         }
       ]
     },
-    {
-      "name": "dap-ds-sidenav-group",
-      "description": "Side navigation group\n---\n\n\n### **Slots:**\n - _default_ - The content of the side navigation group.\n- **submenu** - The submenu of the side navigation group.\n- **suffix** - The suffix of the side navigation group.\n\n### **CSS Properties:**\n - **--dds-sidenav-group-margin-bottom** - Default bottom margin of the sidenav group (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-sidenav-group-border-radius** - Border radius of the sidenav group (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-sidenav-group-spacing-margin** - Margin used for spacing variants (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-sidenav-group-item-min-height-xs** - Minimum height of the sidenav group item (default: var(--dds-spacing-800)) _(default: undefined)_\n- **--dds-sidenav-group-item-min-height-sm** - Minimum height of the sidenav group item (default: var(--dds-spacing-1000)) _(default: undefined)_\n- **--dds-sidenav-group-item-min-height-lg** - Minimum height of the sidenav group item (default: var(--dds-spacing-1200)) _(default: undefined)_\n- **--dds-sidenav-group-item-padding-xs** - Padding of the sidenav group item (default: var(--dds-spacing-100) var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-sidenav-group-item-padding-sm** - Padding of the sidenav group item (default: var(--dds-spacing-200) var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-sidenav-group-item-padding-lg** - Padding of the sidenav group item (default: var(--dds-spacing-300) var(--dds-spacing-500)) _(default: undefined)_\n- **--dds-sidenav-group-item-color** - Text color of the sidenav group item (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-sidenav-group-item-font-size-xs** - Font size of the sidenav group item (default: var(--dds-font-sm)) _(default: undefined)_\n- **--dds-sidenav-group-item-font-size-sm** - Font size of the sidenav group item (default: var(--dds-font-base)) _(default: undefined)_\n- **--dds-sidenav-group-item-font-size-lg** - Font size of the sidenav group item (default: var(--dds-font-lg)) _(default: undefined)_\n- **--dds-sidenav-group-item-font-weight** - Font weight of the sidenav group item (default: var(--dds-font-weight-medium)) _(default: undefined)_\n- **--dds-sidenav-group-item-bg-active** - Background color when the item is active (default: var(--dds-transparent-black-subtle)) _(default: undefined)_\n- **--dds-sidenav-group-item-bg-hover** - Background color on hover and active states (default: var(--dds-transparent-black-base)) _(default: undefined)_\n- **--dds-sidenav-group-toggle-margin** - Margin for the toggle button (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-sidenav-group-submenu-padding** - Padding for the submenu (default: var(--dds-spacing-300) 0) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main side navigation group container.\n- **title** - The title of the side navigation group.\n- **link** - The link of the side navigation group.\n- **toggle** - The toggle button of the side navigation group.\n- **submenu** - The submenu of the side navigation group.",
-      "attributes": [
-        {
-          "name": "href",
-          "description": "The href of the side navigation item",
-          "values": []
-        },
-        {
-          "name": "active",
-          "description": "Whether the side navigation item is active",
-          "values": []
-        },
-        {
-          "name": "spacing",
-          "description": "The spacing of the side navigation item",
-          "values": [
-            { "name": "top" },
-            { "name": "bottom" },
-            { "name": "both" },
-            { "name": "none" }
-          ]
-        },
-        {
-          "name": "open",
-          "description": "Whether the side navigation group is open",
-          "values": []
-        },
-        {
-          "name": "size",
-          "description": "The size of the side navigation group",
-          "values": [{ "name": "xs" }, { "name": "sm" }, { "name": "lg" }]
-        }
-      ],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://shoelace.style/components/sidenav-group"
-        }
-      ]
-    },
-    {
-      "name": "dap-ds-sidenav-item",
-      "description": "Side navigation item\n---\n\n\n### **Slots:**\n - _default_ - The content of the side navigation item.\n- **suffix** - The suffix of the side navigation item.\n\n### **CSS Properties:**\n - **--dds-sidenav-item-min-height-xs** - Minimum height of the sidenav item (default: var(--dds-spacing-800)) _(default: undefined)_\n- **--dds-sidenav-item-min-height-sm** - Minimum height of the sidenav item (default: var(--dds-spacing-1000)) _(default: undefined)_\n- **--dds-sidenav-item-min-height-lg** - Minimum height of the sidenav item (default: var(--dds-spacing-1200)) _(default: undefined)_\n- **--dds-sidenav-item-margin-bottom** - Default bottom margin of the sidenav item (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-sidenav-item-padding-xs** - Padding of the sidenav item (default: var(--dds-spacing-100) var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-sidenav-item-padding-sm** - Padding of the sidenav item (default: var(--dds-spacing-200) var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-sidenav-item-padding-lg** - Padding of the sidenav item (default: var(--dds-spacing-300) var(--dds-spacing-500)) _(default: undefined)_\n- **--dds-sidenav-item-radius** - Border radius of the sidenav item (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-sidenav-item-color** - Text color of the sidenav item (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-sidenav-item-font-size-xs** - Font size of the sidenav item (default: var(--dds-font-sm)) _(default: undefined)_\n- **--dds-sidenav-item-font-size-sm** - Font size of the sidenav item (default: var(--dds-font-base)) _(default: undefined)_\n- **--dds-sidenav-item-font-size-lg** - Font size of the sidenav item (default: var(--dds-font-lg)) _(default: undefined)_\n- **--dds-sidenav-item-font-weight** - Font weight of the sidenav item (default: var(--dds-font-weight-medium)) _(default: undefined)_\n- **--dds-sidenav-item-spacing-margin** - Margin used for spacing variants (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-sidenav-item-bg-active** - Background color when the item is active (default: var(--dds-transparent-black-subtle)) _(default: undefined)_\n- **--dds-sidenav-item-bg-hover** - Background color on hover and active states (default: var(--dds-transparent-black-base)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main side navigation item container.\n- **link** - The link of the side navigation item.",
-      "attributes": [
-        {
-          "name": "href",
-          "description": "The href of the side navigation item",
-          "values": []
-        },
-        {
-          "name": "active",
-          "description": "Whether the side navigation item is active",
-          "values": []
-        },
-        {
-          "name": "current",
-          "description": "Which `aria-current` token to expose on the link when `active` is set.\n\n`aria-current` has to sit on the anchor that assistive technology actually\nexposes. Setting it on this host does nothing: the host is a role-less custom\nelement, so the attribute is stranded there and screen-reader users cannot tell\nwhich item is current. Use `current=\"step\"` inside a stepper.",
-          "values": [
-            { "name": "page" },
-            { "name": "step" },
-            { "name": "location" },
-            { "name": "date" },
-            { "name": "time" },
-            { "name": "true" }
-          ]
-        },
-        {
-          "name": "spacing",
-          "description": "The spacing of the side navigation item",
-          "values": [
-            { "name": "top" },
-            { "name": "bottom" },
-            { "name": "both" },
-            { "name": "none" }
-          ]
-        },
-        {
-          "name": "size",
-          "description": "The size of the side navigation item",
-          "values": [{ "name": "xs" }, { "name": "sm" }, { "name": "lg" }]
-        }
-      ],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://shoelace.style/components/sidenav-item"
-        }
-      ]
-    },
-    {
-      "name": "dap-ds-sidenav",
-      "description": "Side navigation is a list of links that are used to navigate to different sections of a page.\n---\n\n\n### **Events:**\n - **dds-item-click** - Event fired when the side navigation item is clicked.\n\n### **Slots:**\n - _default_ - The content of the side navigation.\n\n### **CSS Parts:**\n - **base** - The main side navigation container.\n- **menu** - The menu of the side navigation.",
-      "attributes": [
-        {
-          "name": "label",
-          "description": "The label of the side navigation, if aria label is not provided, it will be used as aria label",
-          "values": []
-        },
-        {
-          "name": "activeHref",
-          "description": "The active href of the side navigation, to explicitly set the active item, if not provided, it will be set based on the current location",
-          "values": []
-        },
-        {
-          "name": "size",
-          "description": "The size of the side navigation",
-          "values": [{ "name": "xs" }, { "name": "sm" }, { "name": "lg" }]
-        },
-        {
-          "name": "landmark",
-          "description": "The landmark element to render. `aside` exposes a complementary landmark; `nav`\nexposes a navigation landmark, so the sidenav is listed when a screen-reader user\nasks for the page's navigation.\n\nDefaults to `aside` because that is what this component has always rendered, and\nchanging the landmark of every existing sidenav is not this component's call: a\nsidenav that is genuinely a sidebar should stay complementary. Set `nav` when the\nsidenav is the primary way to move around the view.",
-          "values": [{ "name": "aside" }, { "name": "nav" }]
-        }
-      ],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://shoelace.style/components/sidenav"
-        }
-      ]
-    },
     {
       "name": "dap-ds-skeleton",
       "description": "A skeleton loader component for displaying placeholder content while loading.\n---\n\n\n### **CSS Properties:**\n - **--dds-skeleton-base-color** - Solid background color always visible (default: rgb(0 0 0 / 11%)); shown as a static block when prefers-reduced-motion is active _(default: undefined)_\n- **--dds-skeleton-color** - The shimmer overlay gradient (default: linear-gradient(90deg, transparent, rgb(0 0 0 / 10%), transparent)) _(default: undefined)_\n- **--dds-skeleton-animation-duration** - Duration of the loading animation (default: 1.5s) _(default: undefined)_\n- **--dds-skeleton-border-radius** - Border radius for rectangular skeletons (default: var(--dds-radius-small)) _(default: undefined)_\n- **--dds-skeleton-text-spacing** - Spacing between text lines in text variant (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-skeleton-animation-timing-function** - Timing function for the loading animation (default: ease-in-out) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main skeleton container.",
@@ -3613,38 +3510,161 @@
           "values": []
         },
         {
-          "name": "mobile",
-          "description": "If the row is mobile design",
-          "values": []
+          "name": "mobile",
+          "description": "If the row is mobile design",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://shoelace.style/components/table-row"
+        }
+      ]
+    },
+    {
+      "name": "dap-ds-table",
+      "description": "Data table component.\n---\n\n\n### **Slots:**\n - _default_ - The default slot. Accepts `dap-ds-table-row` elements.\n\n### **CSS Properties:**\n - **--dds-table-border-width** - Width of the table border. (default: var(--dds-border-width-base, 1px)) _(default: undefined)_\n- **--dds-table-border-color** - Color of the table border. (default: var(--dds-border-neutral-subtle)) _(default: undefined)_\n- **--dds-table-border-radius** - Border radius of the table. (default: var(--dds-radius-small, 4px)) _(default: undefined)_\n- **--dds-table-row-divider-color** - Color of the divider between rows in mobile view. (default: var(--dds-border-neutral-subtle)) _(default: undefined)_",
+      "attributes": [
+        { "name": "role", "values": [] },
+        {
+          "name": "mobile",
+          "description": "If the table has mobile design",
+          "values": []
+        },
+        {
+          "name": "caption",
+          "description": "The caption of the table",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://shoelace.style/components/table"
+        }
+      ]
+    },
+    {
+      "name": "dap-ds-sidenav-group",
+      "description": "Side navigation group\n---\n\n\n### **Slots:**\n - _default_ - The content of the side navigation group.\n- **submenu** - The submenu of the side navigation group.\n- **suffix** - The suffix of the side navigation group.\n\n### **CSS Properties:**\n - **--dds-sidenav-group-margin-bottom** - Default bottom margin of the sidenav group (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-sidenav-group-border-radius** - Border radius of the sidenav group (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-sidenav-group-spacing-margin** - Margin used for spacing variants (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-sidenav-group-item-min-height-xs** - Minimum height of the sidenav group item (default: var(--dds-spacing-800)) _(default: undefined)_\n- **--dds-sidenav-group-item-min-height-sm** - Minimum height of the sidenav group item (default: var(--dds-spacing-1000)) _(default: undefined)_\n- **--dds-sidenav-group-item-min-height-lg** - Minimum height of the sidenav group item (default: var(--dds-spacing-1200)) _(default: undefined)_\n- **--dds-sidenav-group-item-padding-xs** - Padding of the sidenav group item (default: var(--dds-spacing-100) var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-sidenav-group-item-padding-sm** - Padding of the sidenav group item (default: var(--dds-spacing-200) var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-sidenav-group-item-padding-lg** - Padding of the sidenav group item (default: var(--dds-spacing-300) var(--dds-spacing-500)) _(default: undefined)_\n- **--dds-sidenav-group-item-color** - Text color of the sidenav group item (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-sidenav-group-item-font-size-xs** - Font size of the sidenav group item (default: var(--dds-font-sm)) _(default: undefined)_\n- **--dds-sidenav-group-item-font-size-sm** - Font size of the sidenav group item (default: var(--dds-font-base)) _(default: undefined)_\n- **--dds-sidenav-group-item-font-size-lg** - Font size of the sidenav group item (default: var(--dds-font-lg)) _(default: undefined)_\n- **--dds-sidenav-group-item-font-weight** - Font weight of the sidenav group item (default: var(--dds-font-weight-medium)) _(default: undefined)_\n- **--dds-sidenav-group-item-bg-active** - Background color when the item is active (default: var(--dds-transparent-black-subtle)) _(default: undefined)_\n- **--dds-sidenav-group-item-bg-hover** - Background color on hover and active states (default: var(--dds-transparent-black-base)) _(default: undefined)_\n- **--dds-sidenav-group-toggle-margin** - Margin for the toggle button (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-sidenav-group-submenu-padding** - Padding for the submenu (default: var(--dds-spacing-300) 0) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main side navigation group container.\n- **title** - The title of the side navigation group.\n- **link** - The link of the side navigation group.\n- **toggle** - The toggle button of the side navigation group.\n- **submenu** - The submenu of the side navigation group.",
+      "attributes": [
+        {
+          "name": "href",
+          "description": "The href of the side navigation item",
+          "values": []
+        },
+        {
+          "name": "active",
+          "description": "Whether the side navigation item is active",
+          "values": []
+        },
+        {
+          "name": "spacing",
+          "description": "The spacing of the side navigation item",
+          "values": [
+            { "name": "top" },
+            { "name": "bottom" },
+            { "name": "both" },
+            { "name": "none" }
+          ]
+        },
+        {
+          "name": "open",
+          "description": "Whether the side navigation group is open",
+          "values": []
+        },
+        {
+          "name": "size",
+          "description": "The size of the side navigation group",
+          "values": [{ "name": "xs" }, { "name": "sm" }, { "name": "lg" }]
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://shoelace.style/components/sidenav-group"
+        }
+      ]
+    },
+    {
+      "name": "dap-ds-sidenav-item",
+      "description": "Side navigation item\n---\n\n\n### **Slots:**\n - _default_ - The content of the side navigation item.\n- **suffix** - The suffix of the side navigation item.\n\n### **CSS Properties:**\n - **--dds-sidenav-item-min-height-xs** - Minimum height of the sidenav item (default: var(--dds-spacing-800)) _(default: undefined)_\n- **--dds-sidenav-item-min-height-sm** - Minimum height of the sidenav item (default: var(--dds-spacing-1000)) _(default: undefined)_\n- **--dds-sidenav-item-min-height-lg** - Minimum height of the sidenav item (default: var(--dds-spacing-1200)) _(default: undefined)_\n- **--dds-sidenav-item-margin-bottom** - Default bottom margin of the sidenav item (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-sidenav-item-padding-xs** - Padding of the sidenav item (default: var(--dds-spacing-100) var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-sidenav-item-padding-sm** - Padding of the sidenav item (default: var(--dds-spacing-200) var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-sidenav-item-padding-lg** - Padding of the sidenav item (default: var(--dds-spacing-300) var(--dds-spacing-500)) _(default: undefined)_\n- **--dds-sidenav-item-radius** - Border radius of the sidenav item (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-sidenav-item-color** - Text color of the sidenav item (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-sidenav-item-font-size-xs** - Font size of the sidenav item (default: var(--dds-font-sm)) _(default: undefined)_\n- **--dds-sidenav-item-font-size-sm** - Font size of the sidenav item (default: var(--dds-font-base)) _(default: undefined)_\n- **--dds-sidenav-item-font-size-lg** - Font size of the sidenav item (default: var(--dds-font-lg)) _(default: undefined)_\n- **--dds-sidenav-item-font-weight** - Font weight of the sidenav item (default: var(--dds-font-weight-medium)) _(default: undefined)_\n- **--dds-sidenav-item-spacing-margin** - Margin used for spacing variants (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-sidenav-item-bg-active** - Background color when the item is active (default: var(--dds-transparent-black-subtle)) _(default: undefined)_\n- **--dds-sidenav-item-bg-hover** - Background color on hover and active states (default: var(--dds-transparent-black-base)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main side navigation item container.\n- **link** - The link of the side navigation item.",
+      "attributes": [
+        {
+          "name": "href",
+          "description": "The href of the side navigation item",
+          "values": []
+        },
+        {
+          "name": "active",
+          "description": "Whether the side navigation item is active",
+          "values": []
+        },
+        {
+          "name": "current",
+          "description": "Which `aria-current` token to expose on the link when `active` is set.\n\n`aria-current` has to sit on the anchor that assistive technology actually\nexposes. Setting it on this host does nothing: the host is a role-less custom\nelement, so the attribute is stranded there and screen-reader users cannot tell\nwhich item is current. Use `current=\"step\"` inside a stepper.",
+          "values": [
+            { "name": "page" },
+            { "name": "step" },
+            { "name": "location" },
+            { "name": "date" },
+            { "name": "time" },
+            { "name": "true" }
+          ]
+        },
+        {
+          "name": "spacing",
+          "description": "The spacing of the side navigation item",
+          "values": [
+            { "name": "top" },
+            { "name": "bottom" },
+            { "name": "both" },
+            { "name": "none" }
+          ]
+        },
+        {
+          "name": "size",
+          "description": "The size of the side navigation item",
+          "values": [{ "name": "xs" }, { "name": "sm" }, { "name": "lg" }]
         }
       ],
       "references": [
         {
           "name": "Documentation",
-          "url": "https://shoelace.style/components/table-row"
+          "url": "https://shoelace.style/components/sidenav-item"
         }
       ]
     },
     {
-      "name": "dap-ds-table",
-      "description": "Data table component.\n---\n\n\n### **Slots:**\n - _default_ - The default slot. Accepts `dap-ds-table-row` elements.\n\n### **CSS Properties:**\n - **--dds-table-border-width** - Width of the table border. (default: var(--dds-border-width-base, 1px)) _(default: undefined)_\n- **--dds-table-border-color** - Color of the table border. (default: var(--dds-border-neutral-subtle)) _(default: undefined)_\n- **--dds-table-border-radius** - Border radius of the table. (default: var(--dds-radius-small, 4px)) _(default: undefined)_\n- **--dds-table-row-divider-color** - Color of the divider between rows in mobile view. (default: var(--dds-border-neutral-subtle)) _(default: undefined)_",
+      "name": "dap-ds-sidenav",
+      "description": "Side navigation is a list of links that are used to navigate to different sections of a page.\n---\n\n\n### **Events:**\n - **dds-item-click** - Event fired when the side navigation item is clicked.\n\n### **Slots:**\n - _default_ - The content of the side navigation.\n\n### **CSS Parts:**\n - **base** - The main side navigation container.\n- **menu** - The menu of the side navigation.",
       "attributes": [
-        { "name": "role", "values": [] },
         {
-          "name": "mobile",
-          "description": "If the table has mobile design",
+          "name": "label",
+          "description": "The label of the side navigation, if aria label is not provided, it will be used as aria label",
           "values": []
         },
         {
-          "name": "caption",
-          "description": "The caption of the table",
+          "name": "activeHref",
+          "description": "The active href of the side navigation, to explicitly set the active item, if not provided, it will be set based on the current location",
           "values": []
+        },
+        {
+          "name": "size",
+          "description": "The size of the side navigation",
+          "values": [{ "name": "xs" }, { "name": "sm" }, { "name": "lg" }]
+        },
+        {
+          "name": "landmark",
+          "description": "The landmark element to render. `aside` exposes a complementary landmark; `nav`\nexposes a navigation landmark, so the sidenav is listed when a screen-reader user\nasks for the page's navigation.\n\nDefaults to `aside` because that is what this component has always rendered, and\nchanging the landmark of every existing sidenav is not this component's call: a\nsidenav that is genuinely a sidebar should stay complementary. Set `nav` when the\nsidenav is the primary way to move around the view.",
+          "values": [{ "name": "aside" }, { "name": "nav" }]
         }
       ],
       "references": [
         {
           "name": "Documentation",
-          "url": "https://shoelace.style/components/table"
+          "url": "https://shoelace.style/components/sidenav"
         }
       ]
     },
@@ -4144,17 +4164,6 @@
         }
       ]
     },
-    {
-      "name": "dap-ds-input-group",
-      "description": "An input group is a container for inputs.\n---\n\n\n### **Slots:**\n - _default_ - The content of the input group items.\n- **feedback-icon** - The custom icon of the feedback.\n\n### **CSS Parts:**\n - **base** - The main input group container.\n- **label** - The label of the input group.\n- **description** - The description of the input group.\n- **tooltip** - The tooltip of the input group.\n- **container** - The container of the input group items.",
-      "attributes": [],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://shoelace.style/components/input-group"
-        }
-      ]
-    },
     {
       "name": "dap-ds-radio-group",
       "description": "A radio group is a form element that allows the user to select one option from a set.\n---\n\n\n### **Events:**\n - **dds-change** - Fired when the radio group is checked.\n- **dds-blur** - Emitted when the radio group loses focus.\n- **dds-focus** - Emitted when the radio group gains focus.\n\n### **Slots:**\n - _default_ - The content of the radio group.\n- **feedback-icon** - The custom icon of the feedback.\n\n### **CSS Parts:**\n - **base** - The main radio group container.\n- **label** - The label of the radio group.\n- **tooltip** - The tooltip of the radio group.\n- **container** - The container of the radio group items.",
@@ -4182,6 +4191,17 @@
         }
       ]
     },
+    {
+      "name": "dap-ds-input-group",
+      "description": "An input group is a container for inputs.\n---\n\n\n### **Slots:**\n - _default_ - The content of the input group items.\n- **feedback-icon** - The custom icon of the feedback.\n\n### **CSS Parts:**\n - **base** - The main input group container.\n- **label** - The label of the input group.\n- **description** - The description of the input group.\n- **tooltip** - The tooltip of the input group.\n- **container** - The container of the input group items.",
+      "attributes": [],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://shoelace.style/components/input-group"
+        }
+      ]
+    },
     {
       "name": "dap-ds-icon-arrow-down-line",
       "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
@@ -4343,7 +4363,7 @@
       ]
     },
     {
-      "name": "dap-ds-icon-arrow-left-line",
+      "name": "dap-ds-icon-arrow-left-s-fill",
       "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
       "attributes": [
         {
@@ -4370,12 +4390,12 @@
       "references": [
         {
           "name": "Documentation",
-          "url": "https://shoelace.style/components/icon-arrow-left-line"
+          "url": "https://shoelace.style/components/icon-arrow-left-s-fill"
         }
       ]
     },
     {
-      "name": "dap-ds-icon-arrow-left-s-fill",
+      "name": "dap-ds-icon-arrow-left-line",
       "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
       "attributes": [
         {
@@ -4402,7 +4422,7 @@
       "references": [
         {
           "name": "Documentation",
-          "url": "https://shoelace.style/components/icon-arrow-left-s-fill"
+          "url": "https://shoelace.style/components/icon-arrow-left-line"
         }
       ]
     },
@@ -4439,7 +4459,7 @@
       ]
     },
     {
-      "name": "dap-ds-icon-arrow-left-up-line",
+      "name": "dap-ds-icon-arrow-right-down-line",
       "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
       "attributes": [
         {
@@ -4466,12 +4486,12 @@
       "references": [
         {
           "name": "Documentation",
-          "url": "https://shoelace.style/components/icon-arrow-left-up-line"
+          "url": "https://shoelace.style/components/icon-arrow-right-down-line"
         }
       ]
     },
     {
-      "name": "dap-ds-icon-arrow-right-down-line",
+      "name": "dap-ds-icon-arrow-right-l-line",
       "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
       "attributes": [
         {
@@ -4498,12 +4518,12 @@
       "references": [
         {
           "name": "Documentation",
-          "url": "https://shoelace.style/components/icon-arrow-right-down-line"
+          "url": "https://shoelace.style/components/icon-arrow-right-l-line"
         }
       ]
     },
     {
-      "name": "dap-ds-icon-arrow-right-l-line",
+      "name": "dap-ds-icon-arrow-left-up-line",
       "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
       "attributes": [
         {
@@ -4530,7 +4550,7 @@
       "references": [
         {
           "name": "Documentation",
-          "url": "https://shoelace.style/components/icon-arrow-right-l-line"
+          "url": "https://shoelace.style/components/icon-arrow-left-up-line"
         }
       ]
     },
@@ -4822,6 +4842,38 @@
         }
       ]
     },
+    {
+      "name": "dap-ds-icon-calendar-line",
+      "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
+      "attributes": [
+        {
+          "name": "size",
+          "description": "(optional) The width and height in pixels",
+          "values": []
+        },
+        {
+          "name": "selected",
+          "description": "(optional) Sets the icon color via the `fill` attribute",
+          "values": []
+        },
+        {
+          "name": "accessibilityTitle",
+          "description": "(optional) When using the icon standalone, make it meaningful for accessibility",
+          "values": []
+        },
+        {
+          "name": "focusable",
+          "description": "(optional) If `true` the icon can receive focus",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://shoelace.style/components/icon-calendar-line"
+        }
+      ]
+    },
     {
       "name": "dap-ds-icon-edit-line",
       "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
@@ -5014,6 +5066,38 @@
         }
       ]
     },
+    {
+      "name": "dap-ds-icon-file-music-line",
+      "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
+      "attributes": [
+        {
+          "name": "size",
+          "description": "(optional) The width and height in pixels",
+          "values": []
+        },
+        {
+          "name": "selected",
+          "description": "(optional) Sets the icon color via the `fill` attribute",
+          "values": []
+        },
+        {
+          "name": "accessibilityTitle",
+          "description": "(optional) When using the icon standalone, make it meaningful for accessibility",
+          "values": []
+        },
+        {
+          "name": "focusable",
+          "description": "(optional) If `true` the icon can receive focus",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://shoelace.style/components/icon-file-music-line"
+        }
+      ]
+    },
     {
       "name": "dap-ds-icon-file-text-line",
       "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
@@ -5239,7 +5323,7 @@
       ]
     },
     {
-      "name": "dap-ds-icon-cookie-line",
+      "name": "dap-ds-icon-add-line",
       "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
       "attributes": [
         {
@@ -5266,12 +5350,12 @@
       "references": [
         {
           "name": "Documentation",
-          "url": "https://shoelace.style/components/icon-cookie-line"
+          "url": "https://shoelace.style/components/icon-add-line"
         }
       ]
     },
     {
-      "name": "dap-ds-icon-add-line",
+      "name": "dap-ds-icon-cookie-line",
       "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
       "attributes": [
         {
@@ -5298,7 +5382,7 @@
       "references": [
         {
           "name": "Documentation",
-          "url": "https://shoelace.style/components/icon-add-line"
+          "url": "https://shoelace.style/components/icon-cookie-line"
         }
       ]
     },
@@ -5335,7 +5419,7 @@
       ]
     },
     {
-      "name": "dap-ds-icon-check-line",
+      "name": "dap-ds-icon-alert-line",
       "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
       "attributes": [
         {
@@ -5362,12 +5446,12 @@
       "references": [
         {
           "name": "Documentation",
-          "url": "https://shoelace.style/components/icon-check-line"
+          "url": "https://shoelace.style/components/icon-alert-line"
         }
       ]
     },
     {
-      "name": "dap-ds-icon-check-line2",
+      "name": "dap-ds-icon-check-line",
       "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
       "attributes": [
         {
@@ -5394,12 +5478,12 @@
       "references": [
         {
           "name": "Documentation",
-          "url": "https://shoelace.style/components/icon-check-line2"
+          "url": "https://shoelace.style/components/icon-check-line"
         }
       ]
     },
     {
-      "name": "dap-ds-icon-alert-line",
+      "name": "dap-ds-icon-check-line2",
       "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
       "attributes": [
         {
@@ -5426,7 +5510,7 @@
       "references": [
         {
           "name": "Documentation",
-          "url": "https://shoelace.style/components/icon-alert-line"
+          "url": "https://shoelace.style/components/icon-check-line2"
         }
       ]
     },
@@ -5879,7 +5963,7 @@
       ]
     },
     {
-      "name": "dap-ds-icon-eye-line",
+      "name": "dap-ds-icon-external-link-line",
       "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
       "attributes": [
         {
@@ -5906,12 +5990,12 @@
       "references": [
         {
           "name": "Documentation",
-          "url": "https://shoelace.style/components/icon-eye-line"
+          "url": "https://shoelace.style/components/icon-external-link-line"
         }
       ]
     },
     {
-      "name": "dap-ds-icon-eye-off-line",
+      "name": "dap-ds-icon-eye-line",
       "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
       "attributes": [
         {
@@ -5938,12 +6022,12 @@
       "references": [
         {
           "name": "Documentation",
-          "url": "https://shoelace.style/components/icon-eye-off-line"
+          "url": "https://shoelace.style/components/icon-eye-line"
         }
       ]
     },
     {
-      "name": "dap-ds-icon-forbid-fill",
+      "name": "dap-ds-icon-eye-off-line",
       "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
       "attributes": [
         {
@@ -5970,12 +6054,12 @@
       "references": [
         {
           "name": "Documentation",
-          "url": "https://shoelace.style/components/icon-forbid-fill"
+          "url": "https://shoelace.style/components/icon-eye-off-line"
         }
       ]
     },
     {
-      "name": "dap-ds-icon-information-2-fill",
+      "name": "dap-ds-icon-forbid-fill",
       "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
       "attributes": [
         {
@@ -6002,12 +6086,12 @@
       "references": [
         {
           "name": "Documentation",
-          "url": "https://shoelace.style/components/icon-information-2-fill"
+          "url": "https://shoelace.style/components/icon-forbid-fill"
         }
       ]
     },
     {
-      "name": "dap-ds-icon-information-fill",
+      "name": "dap-ds-icon-information-2-fill",
       "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
       "attributes": [
         {
@@ -6034,12 +6118,12 @@
       "references": [
         {
           "name": "Documentation",
-          "url": "https://shoelace.style/components/icon-information-fill"
+          "url": "https://shoelace.style/components/icon-information-2-fill"
         }
       ]
     },
     {
-      "name": "dap-ds-icon-file-music-line",
+      "name": "dap-ds-icon-information-fill",
       "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
       "attributes": [
         {
@@ -6066,7 +6150,7 @@
       "references": [
         {
           "name": "Documentation",
-          "url": "https://shoelace.style/components/icon-file-music-line"
+          "url": "https://shoelace.style/components/icon-information-fill"
         }
       ]
     },
@@ -6806,38 +6890,6 @@
         }
       ]
     },
-    {
-      "name": "dap-ds-icon-external-link-line",
-      "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
-      "attributes": [
-        {
-          "name": "size",
-          "description": "(optional) The width and height in pixels",
-          "values": []
-        },
-        {
-          "name": "selected",
-          "description": "(optional) Sets the icon color via the `fill` attribute",
-          "values": []
-        },
-        {
-          "name": "accessibilityTitle",
-          "description": "(optional) When using the icon standalone, make it meaningful for accessibility",
-          "values": []
-        },
-        {
-          "name": "focusable",
-          "description": "(optional) If `true` the icon can receive focus",
-          "values": []
-        }
-      ],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://shoelace.style/components/icon-external-link-line"
-        }
-      ]
-    },
     {
       "name": "dap-ds-icon-account-circle-fill",
       "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
@@ -6965,38 +7017,6 @@
           "url": "https://shoelace.style/components/icon-user-line"
         }
       ]
-    },
-    {
-      "name": "dap-ds-icon-calendar-line",
-      "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
-      "attributes": [
-        {
-          "name": "size",
-          "description": "(optional) The width and height in pixels",
-          "values": []
-        },
-        {
-          "name": "selected",
-          "description": "(optional) Sets the icon color via the `fill` attribute",
-          "values": []
-        },
-        {
-          "name": "accessibilityTitle",
-          "description": "(optional) When using the icon standalone, make it meaningful for accessibility",
-          "values": []
-        },
-        {
-          "name": "focusable",
-          "description": "(optional) If `true` the icon can receive focus",
-          "values": []
-        }
-      ],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://shoelace.style/components/icon-calendar-line"
-        }
-      ]
     }
   ]
 }