@duetds/components 5.1.8 → 5.2.1

package/lib/collection/components/duet-pagination/duet-pagination.js

@@ -2,11 +2,11 @@
  * Built with Duet Design System
  */
 import { Component, Element, Event, Fragment, h, Host, Prop, State, Watch } from "@stencil/core";
+import { inheritGlobalTheme } from "../../common";
 import { createID } from "../../utils/create-id";
 import { debounce } from "../../utils/js-utils";
 import { isArrowDownKey, isArrowKey, isArrowLeftKey, isArrowRightKey, isArrowUpKey, isNumber, } from "../../utils/keyboard-utils";
 import { getLocaleString } from "../../utils/language-utils";
-import { inheritGlobalTheme } from "../../utils/themeable-component";
 import { shouldDisplayNavigation } from "./duet-pagination-utils";
 export class DuetPagination {
   constructor() {
@@ -34,6 +34,22 @@ export class DuetPagination {
      * Variation of the paginator (compact and default supported)
      */
     this.variation = "default";
+    /**
+     * Described By id
+     */
+    this.accessibleDescribedBy = undefined;
+    /**
+     * Details of the component
+     */
+    this.accessibleDetails = undefined;
+    /**
+     * String of id's that indicate alternative labels elements
+     */
+    this.accessibleLabelledBy = undefined;
+    /**
+     * Aria description the button
+     */
+    this.accessibleDescription = undefined;
     /**
      * Default pagination labels
      */
@@ -265,7 +281,7 @@ export class DuetPagination {
    */
   render() {
     return (h(Host, { onKeyDown: e => this.onKeyboardDown(e) },
-      h("nav", { role: "navigation", "aria-labelledby": this.listId, "aria-describedby": this.listId, ref: el => (this.nativeNav = el), "aria-controls": this.ariaControls, class: {
+      h("nav", { role: "navigation", "aria-labelledby": this.accessibleLabelledBy ? `${this.accessibleLabelledBy} ${this.listId}` : this.listId, "aria-describedby": this.accessibleDescribedBy ? `${this.accessibleDescribedBy} ${this.listId}` : this.listId, "aria-descriptions": this.accessibleDescription, "aria-details": this.accessibleDetails, ref: el => (this.nativeNav = el), "aria-controls": this.ariaControls, class: {
           "duet-pagination-nav": true,
           [`duet-pagination-variation-${this.variation}`]: true,
         } },
@@ -376,6 +392,78 @@ export class DuetPagination {
       "reflect": false,
       "defaultValue": "\"default\""
     },
+    "accessibleDescribedBy": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Described By id"
+      },
+      "attribute": "accessible-described-by",
+      "reflect": false,
+      "defaultValue": "undefined"
+    },
+    "accessibleDetails": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Details of the component"
+      },
+      "attribute": "accessible-details",
+      "reflect": false,
+      "defaultValue": "undefined"
+    },
+    "accessibleLabelledBy": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "String of id's that indicate alternative labels elements"
+      },
+      "attribute": "accessible-labelled-by",
+      "reflect": false,
+      "defaultValue": "undefined"
+    },
+    "accessibleDescription": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Aria description the button"
+      },
+      "attribute": "accessible-description",
+      "reflect": false,
+      "defaultValue": "undefined"
+    },
     "accessibleLabelsDefaults": {
       "type": "unknown",
       "mutable": false,

package/lib/collection/components/duet-paragraph/duet-paragraph.js

@@ -2,7 +2,7 @@
  * Built with Duet Design System
  */
 import { Component, Element, h, Prop } from "@stencil/core";
-import { inheritGlobalTheme } from "../../utils/themeable-component";
+import { inheritGlobalTheme } from "../../common/themeable-component";
 import { getColorByName } from "../../utils/token-utils";
 /**
  * @part duet-paragraph - piercing selector for styling the paragraph

package/lib/collection/components/duet-progress/duet-progress.js

@@ -2,9 +2,9 @@
  * Built with Duet Design System
  */
 import { Component, Element, h, Host, Prop } from "@stencil/core";
+import { inheritGlobalTheme } from "../../common";
 import { createID } from "../../utils/create-id";
 import { getLocaleString } from "../../utils/language-utils";
-import { inheritGlobalTheme } from "../../utils/themeable-component";
 export class DuetProgress {
   constructor() {
     /**
@@ -12,6 +12,18 @@ export class DuetProgress {
      */
     this.progressId = createID("DuetProgress");
     this.progressLabelId = createID("DuetProgressLabel");
+    /**
+     * Aria Details of the component
+     */
+    this.accessibleDetails = undefined;
+    /**
+     * String of id's that indicate alternative labels elements
+     */
+    this.accessibleLabelledBy = undefined;
+    /**
+     * Aria description the button
+     */
+    this.accessibleDescription = undefined;
     /**
      * Defaults for accessibleLabel
      */
@@ -66,7 +78,7 @@ export class DuetProgress {
             this.accessibleLabelUpload[this.progress < 99 ? 1 : 0])))),
         this.caption && (h("div", { class: "duet-progress-caption" },
           h("span", null, this.caption))),
-        h("progress", { id: this.progressLabelId, "aria-describedby": this.accessibleDescribedBy, role: "progressbar", value: this.progress, max: "100", "aria-valuemin": "0", "aria-valuemax": "100" },
+        h("progress", { id: this.progressLabelId, "aria-describedby": this.accessibleDescribedBy, "aria-labelledby": this.accessibleLabelledBy, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, role: "progressbar", value: this.progress, max: "100", "aria-valuemin": "0", "aria-valuemax": "100" },
           h("div", { class: "progress-bar" },
             h("span", { style: { width: `${this.progress}%;` } },
               "Progress: ",
@@ -98,6 +110,60 @@ export class DuetProgress {
       "attribute": "accessible-described-by",
       "reflect": false
     },
+    "accessibleDetails": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Aria Details of the component"
+      },
+      "attribute": "accessible-details",
+      "reflect": false,
+      "defaultValue": "undefined"
+    },
+    "accessibleLabelledBy": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "String of id's that indicate alternative labels elements"
+      },
+      "attribute": "accessible-labelled-by",
+      "reflect": false,
+      "defaultValue": "undefined"
+    },
+    "accessibleDescription": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Aria description the button"
+      },
+      "attribute": "accessible-description",
+      "reflect": false,
+      "defaultValue": "undefined"
+    },
     "accessibleLabel": {
       "type": "string",
       "mutable": false,

package/lib/collection/components/duet-radio/duet-radio.js

@@ -2,14 +2,26 @@
  * Built with Duet Design System
  */
 import { Component, Element, Event, h, Host, Method, Prop } from "@stencil/core";
+import { inheritGlobalTheme } from "../../common";
 import { createID } from "../../utils/create-id";
-import { inheritGlobalTheme } from "../../utils/themeable-component";
 export class DuetRadio {
   constructor() {
     /**
      * Own Properties.
      */
     this.radioId = createID("DuetRadio");
+    /**
+     * Aria Details of the component
+     */
+    this.accessibleDetails = undefined;
+    /**
+     * String of id's that indicate alternative labels elements
+     */
+    this.accessibleLabelledBy = undefined;
+    /**
+     * Aria description the button
+     */
+    this.accessibleDescription = undefined;
     /**
      * Controls the margin of the component.
      */
@@ -100,7 +112,7 @@ export class DuetRadio {
         "duet-m-0": this.margin === "none",
       } },
       h("div", { class: { "duet-radio-container": true, "duet-theme-turva": this.theme === "turva" } },
-        h("input", { type: "radio", onFocus: this.onFocus, onBlur: this.onBlur, onChange: this.onChange, value: this.value, tabindex: this.accessibleIndex, class: { "duet-radio": true, disabled: this.disabled || this.groupDisabled }, checked: this.checked, disabled: this.disabled || this.groupDisabled, required: this.required, "aria-controls": this.accessibleControls, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.accessibleDescribedBy, role: this.role, name: this.name, id: identifier, ref: input => (this.nativeInput = input) }),
+        h("input", { type: "radio", onFocus: this.onFocus, onBlur: this.onBlur, onChange: this.onChange, value: this.value, tabindex: this.accessibleIndex, class: { "duet-radio": true, disabled: this.disabled || this.groupDisabled }, checked: this.checked, disabled: this.disabled || this.groupDisabled, required: this.required, "aria-controls": this.accessibleControls, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.accessibleDescribedBy, "aria-labelledby": this.accessibleLabelledBy, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, role: this.role, name: this.name, id: identifier, ref: input => (this.nativeInput = input) }),
         h("label", { class: "duet-label", htmlFor: identifier },
           h("span", null, this.label)))));
   }
@@ -130,6 +142,60 @@ export class DuetRadio {
       "attribute": "accessible-active-descendant",
       "reflect": false
     },
+    "accessibleDetails": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Aria Details of the component"
+      },
+      "attribute": "accessible-details",
+      "reflect": false,
+      "defaultValue": "undefined"
+    },
+    "accessibleLabelledBy": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "String of id's that indicate alternative labels elements"
+      },
+      "attribute": "accessible-labelled-by",
+      "reflect": false,
+      "defaultValue": "undefined"
+    },
+    "accessibleDescription": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Aria description the button"
+      },
+      "attribute": "accessible-description",
+      "reflect": false,
+      "defaultValue": "undefined"
+    },
     "accessibleIndex": {
       "type": "string",
       "mutable": false,

package/lib/collection/components/duet-radio-group/duet-radio-group.js

@@ -2,7 +2,7 @@
  * Built with Duet Design System
  */
 import { Component, Element, h, Host, Prop, Watch } from "@stencil/core";
-import { inheritGlobalTheme } from "../../utils/themeable-component";
+import { inheritGlobalTheme } from "../../common/themeable-component";
 import { findCheckedOption, watchForOptions } from "../../utils/watch-options";
 export class DuetRadioGroup {
   constructor() {

package/lib/collection/components/duet-range-slider/duet-range-slider.js

@@ -3,9 +3,9 @@
  */
 import { colorGray, colorGrayTurva, colorPrimary, colorPrimaryTurva } from "@duetds/tokens";
 import { Component, Element, Event, h, Host, Method, Prop } from "@stencil/core";
+import { inheritGlobalTheme } from "../../common/themeable-component";
 import { createID } from "../../utils/create-id";
 import isInternetExplorer from "../../utils/is-internet-explorer";
-import { inheritGlobalTheme } from "../../utils/themeable-component";
 const colors = {
   turva: {
     active: colorPrimaryTurva,

package/lib/collection/components/duet-range-stepper/duet-range-stepper.js

@@ -2,10 +2,10 @@
  * Built with Duet Design System
  */
 import { Component, Element, Event, h, Prop, Watch } from "@stencil/core";
+import { inheritGlobalTheme } from "../../common/themeable-component";
 import { createID } from "../../utils/create-id";
 import { isArrowDownKey, isArrowKey, isArrowLeftKey, isArrowRightKey, isArrowUpKey, isMinusKey, isPlusKey, } from "../../utils/keyboard-utils";
 import { getLocaleString } from "../../utils/language-utils";
-import { inheritGlobalTheme } from "../../utils/themeable-component";
 export class DuetRangeStepper {
   constructor() {
     this.leftBn = createID("duetRangeStepper-left");

package/lib/collection/components/duet-scrollable/duet-scrollable.js

@@ -2,7 +2,7 @@
  * Built with Duet Design System
  */
 import { Component, Element, h, Host, Prop, State, Watch } from "@stencil/core";
-import { inheritGlobalTheme } from "../../utils/themeable-component";
+import { inheritGlobalTheme } from "../../common/themeable-component";
 export class DuetScrollable {
   constructor() {
     /**

package/lib/collection/components/duet-select/duet-select.js

@@ -2,9 +2,9 @@
  * Built with Duet Design System
  */
 import { Component, Element, Event, h, Host, Method, Prop, State, Watch } from "@stencil/core";
+import { inheritGlobalTheme } from "../../common/themeable-component";
 import { createID } from "../../utils/create-id";
 import { parsePossibleJSON } from "../../utils/string-utils";
-import { inheritGlobalTheme } from "../../utils/themeable-component";
 function isOptionGroup(item) {
   return "options" in item;
 }

package/lib/collection/components/duet-spinner/duet-spinner.js

@@ -2,7 +2,7 @@
  * Built with Duet Design System
  */
 import { Component, h, Host, Prop } from "@stencil/core";
-import { inheritGlobalTheme } from "../../utils/themeable-component";
+import { inheritGlobalTheme } from "../../common/themeable-component";
 import { getColorByName } from "../../utils/token-utils";
 export class DuetSpinner {
   constructor() {

package/lib/collection/components/duet-step/duet-step.js

@@ -3,9 +3,9 @@
  */
 import editIcon from "@duetds/icons/lib/assets/action-edit-2";
 import { Build, Component, Element, Event, h, Method, Prop } from "@stencil/core";
+import { inheritGlobalTheme } from "../../common/themeable-component";
 import { createID } from "../../utils/create-id";
 import { isKeyboardClick } from "../../utils/keyboard-utils";
-import { inheritGlobalTheme } from "../../utils/themeable-component";
 /**
  * @slot unnamed default slot - The component’s primary content. All child nodes that do not have a slot attribute defined are inserted into this primary slot.
  * @slot heading-content - Step heading content. Use this slot to show additional content next to step heading.

package/lib/collection/components/duet-stepper/duet-stepper.js

@@ -2,8 +2,8 @@
  * Built with Duet Design System
  */
 import { Component, Element, Event, h, Host, Listen, Prop, Watch } from "@stencil/core";
+import { inheritGlobalTheme } from "../../common/themeable-component";
 import groupBy from "../../utils/group-by";
-import { inheritGlobalTheme } from "../../utils/themeable-component";
 export class DuetStepper {
   constructor() {
     /**

package/lib/collection/components/duet-tab-group/duet-tab-group.js

@@ -2,10 +2,10 @@
  * Built with Duet Design System
  */
 import { Component, Element, Event, h, Method, Prop, State } from "@stencil/core";
+import { inheritGlobalTheme } from "../../common/themeable-component";
 import { createID } from "../../utils/create-id";
 import { isArrowDownKey, isArrowLeftKey, isArrowRightKey, isArrowUpKey } from "../../utils/keyboard-utils";
 import { getLanguage, getLocaleString } from "../../utils/language-utils";
-import { inheritGlobalTheme } from "../../utils/themeable-component";
 /**
  * @part ${identifier}-button - piercing selector for styling tab buttons
  * @part ${identifier}-button--selected - piercing selector for styling selected tab button

package/lib/collection/components/duet-table/duet-table.css

@@ -71,15 +71,14 @@ duet-table .duet-table-action-row td:last-child {
   white-space: nowrap;
 }
 
-.duet-table-flattened tbody tr {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  grid-auto-rows: auto;
-  gap: 10px;
-}
-.duet-table-flattened tbody tr.duet-table-action-row td:last-child::before {
-  padding: 0;
-  content: "";
+.duet-table-flattened table,
+.duet-table-flattened thead,
+.duet-table-flattened tbody,
+.duet-table-flattened tfoot,
+.duet-table-flattened th,
+.duet-table-flattened td,
+.duet-table-flattened tr {
+  display: block;
 }
 .duet-table-flattened thead tr {
   position: absolute !important;
@@ -92,20 +91,11 @@ duet-table .duet-table-action-row td:last-child {
   border: 0 !important;
 }
 .duet-table-flattened td {
-  grid-column: 1/2;
   line-height: 1.25;
 }
 .duet-table-flattened td:not(:last-child) {
   margin-bottom: 16px !important;
 }
-.duet-table-flattened td:first-child {
-  grid-row: 1;
-  grid-column: 1;
-}
-.duet-table-flattened td:last-child {
-  grid-row: 1;
-  grid-column: 2;
-}
 .duet-table-flattened tbody td,
 .duet-table-flattened tbody th,
 .duet-table-flattened tfoot td {
@@ -337,4 +327,26 @@ duet-table .duet-table-action-row td:last-child {
 .duet-table-actions thead th:last-child {
   width: 1px;
   white-space: nowrap;
+}
+
+.duet-editable-table-table.duet-table-flattened tr {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-auto-rows: auto;
+  gap: 10px;
+}
+.duet-editable-table-table.duet-table-flattened tr.duet-table-action-row td:last-child::before {
+  padding: 0;
+  content: "";
+}
+.duet-editable-table-table.duet-table-flattened td {
+  grid-column: 1/2;
+}
+.duet-editable-table-table.duet-table-flattened td:first-child {
+  grid-row: 1;
+  grid-column: 1;
+}
+.duet-editable-table-table.duet-table-flattened td:last-child {
+  grid-row: 1;
+  grid-column: 2;
 }

package/lib/collection/components/duet-table/duet-table.js

@@ -3,8 +3,8 @@
  */
 import { mediaQueryLarge, mediaQueryMedium, mediaQuerySmall, mediaQueryXLarge, mediaQueryXxLarge, mediaQueryXxxLarge, sizeHeader, sizeNavigation, } from "@duetds/tokens";
 import { Build, Component, Element, h, Host, Prop, State } from "@stencil/core";
+import { inheritGlobalTheme } from "../../common/themeable-component";
 import { debounce } from "../../utils/js-utils";
-import { inheritGlobalTheme } from "../../utils/themeable-component";
 // remove wrapping speech marks.
 // media query tokens are wrapped in speech marks,
 // which need to be removed before use with matchMedia.

package/lib/collection/components/duet-textarea/duet-textarea.js

@@ -2,9 +2,9 @@
  * Built with Duet Design System
  */
 import { Component, Element, Event, h, Host, Method, Prop, Watch, } from "@stencil/core";
+import { inheritGlobalTheme } from "../../common";
 import { createID } from "../../utils/create-id";
 import { cleanValue } from "../../utils/input-utils";
-import { inheritGlobalTheme } from "../../utils/themeable-component";
 const CharacterCount = ({ value, maxlength, label, theme }) => {
   if (maxlength == null) {
     return;
@@ -35,6 +35,18 @@ export class DuetTextarea {
      * Controls the margin of the component.
      */
     this.margin = "auto";
+    /**
+     * Aria Details of the component
+     */
+    this.accessibleDetails = undefined;
+    /**
+     * String of id's that indicate alternative labels elements
+     */
+    this.accessibleLabelledBy = undefined;
+    /**
+     * Aria description the button
+     */
+    this.accessibleDescription = undefined;
     /**
      * Theme of the textarea.
      */
@@ -185,7 +197,9 @@ export class DuetTextarea {
         this.caption && (h("duet-caption", { id: this.topCaptionId, size: "medium" }, this.caption)),
         h("div", { class: "duet-textarea-wrapper" },
           this.placeholder && this.echoPlaceholder && this.value && (h("duet-caption", { id: this.topCaptionPlaceholderId, class: "duet-textarea-placeholder", size: "small" }, this.placeholder)),
-          h("textarea", { onInput: this.handleInput, onChange: this.handleChange, onBlur: this.handleBlur, onFocus: this.handleFocus, ref: input => (this.nativeInput = input), class: { "duet-textarea": true, disabled: this.disabled }, value: this.value, disabled: this.disabled, "aria-labelledby": `${this.labelId} ${this.errorId}`, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": `${this.isCaptionVisible ? this.topCaptionId : ""} ${this.accessibleDescribedBy}`, placeholder: this.placeholder, spellcheck: "false", required: this.required, minlength: this.minlength, maxlength: this.maxlength, role: this.role, name: this.name, id: identifier })),
+          h("textarea", { onInput: this.handleInput, onChange: this.handleChange, onBlur: this.handleBlur, onFocus: this.handleFocus, ref: input => (this.nativeInput = input), class: { "duet-textarea": true, disabled: this.disabled }, value: this.value, disabled: this.disabled, "aria-labelledby": this.accessibleLabelledBy
+              ? `${this.labelId} ${this.errorId} ${this.accessibleLabelledBy}`
+              : `${this.labelId} ${this.errorId} `, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": `${this.isCaptionVisible ? this.topCaptionId : ""} ${this.accessibleDescribedBy}`, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, placeholder: this.placeholder, spellcheck: "false", required: this.required, minlength: this.minlength, maxlength: this.maxlength, role: this.role, name: this.name, id: identifier })),
         h("duet-grid", { alignment: "stretch" },
           h("duet-grid-item", { margin: "none", fill: true },
             h("div", { class: "duet-textarea-help", id: this.errorId, "aria-live": "assertive", "aria-relevant": "additions removals" }, this.error && h("span", null, this.error))),
@@ -274,6 +288,60 @@ export class DuetTextarea {
       "attribute": "accessible-controls",
       "reflect": false
     },
+    "accessibleDetails": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Aria Details of the component"
+      },
+      "attribute": "accessible-details",
+      "reflect": false,
+      "defaultValue": "undefined"
+    },
+    "accessibleLabelledBy": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "String of id's that indicate alternative labels elements"
+      },
+      "attribute": "accessible-labelled-by",
+      "reflect": false,
+      "defaultValue": "undefined"
+    },
+    "accessibleDescription": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Aria description the button"
+      },
+      "attribute": "accessible-description",
+      "reflect": false,
+      "defaultValue": "undefined"
+    },
     "accessibleOwns": {
       "type": "string",
       "mutable": false,