@duetds/components 5.1.7 → 5.2.0

package/lib/collection/components/duet-grid-item/duet-grid-item.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";
 export class DuetGridItem {
   constructor() {
     /**

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

@@ -292,11 +292,11 @@
 }
 @media (min-width: 62em) {
   .duet-header-items .duet-header-item {
+    font-weight: 600;
     border-radius: 4px;
   }
 }
 .duet-theme-turva .duet-header-items .duet-header-item {
-  font-weight: 600;
   color: #171c3a;
   border-color: #e1e3e6;
 }

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

@@ -11,10 +11,10 @@ import { media_query_large } from "@duetds/tokens/lib/tokens.json";
 import { Build, Component, Element, Event, Fragment, h, Host, Listen, Method, Prop, State, Watch, } from "@stencil/core";
 import { disableBodyScroll, enableBodyScroll } from "body-scroll-lock/lib/bodyScrollLock.es6.js";
 import { DuetStringsExternalDefaults } from "../../common-strings";
+import { inheritGlobalTheme } from "../../common/themeable-component";
 import { isArrowDownKey, isArrowLeftKey, isArrowRightKey, isArrowUpKey, isEscapeKey, isSpaceKey, } from "../../utils/keyboard-utils";
 import { getLanguage, getLocaleString } from "../../utils/language-utils";
 import { parsePossibleJSON } from "../../utils/string-utils";
-import { inheritGlobalTheme } from "../../utils/themeable-component";
 import { DuetHeaderDropdown } from "./duet-header-dropdown";
 import { DuetHeaderHamburger } from "./duet-header-hamburger";
 import { DuetHeaderIcon } from "./duet-header-icon";

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

@@ -127,6 +127,9 @@
     font-size: 2.25rem;
   }
 }
+.duet-heading.h2.duet-theme-turva {
+  font-style: normal;
+}
 @media (max-width: 22.5em) {
   .duet-heading.h2 {
     font-size: 1.375rem;

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

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

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

@@ -4,9 +4,9 @@
 import newWindowIcon from "@duetds/icons/lib/assets/action-new-window-small";
 import { Component, Element, Event, h, Prop, State, Watch } from "@stencil/core";
 import { DuetStringsExternalDefaults } from "../../common-strings";
+import { inheritGlobalTheme } from "../../common/themeable-component";
 import { getLanguage, getLocaleString } from "../../utils/language-utils";
 import { parsePossibleJSON } from "../../utils/string-utils";
-import { inheritGlobalTheme } from "../../utils/themeable-component";
 /**
  * @slot default - This is an unamed slot for a text or extra button that is placed after any buttons (or list item)
  * @slot badge - This is a slot for a status badge that sits next to pre-heading inside the hero component.

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

@@ -2,7 +2,7 @@
  * Built with Duet Design System
  */
 import { Build, Component, Element, h, Host, Prop, State, Watch } from "@stencil/core";
-import { inheritGlobalTheme } from "../../utils/themeable-component";
+import { inheritGlobalTheme } from "../../common/themeable-component";
 import { getColorByName } from "../../utils/token-utils";
 import { buildIconUrl, fetchIconByUrl } from "./icon-utils";
 export class DuetIcon {

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

@@ -4,11 +4,11 @@
 import emailIcon from "@duetds/icons/lib/assets/form-email";
 import searchIcon from "@duetds/icons/lib/assets/form-search";
 import { Component, Element, Event, h, Host, Method, Prop, Watch } from "@stencil/core";
+import { inheritGlobalTheme } from "../../common";
 import { createID } from "../../utils/create-id";
 import { cleanValue, resetCursor } from "../../utils/input-utils";
 import { isEscapeKey } from "../../utils/keyboard-utils";
 import { getLocaleString } from "../../utils/language-utils";
-import { inheritGlobalTheme } from "../../utils/themeable-component";
 const icons = {
   search: searchIcon,
   email: emailIcon,
@@ -31,13 +31,25 @@ export class DuetInput {
       sv: "Rensa",
     });
     /**
-     * Indicates the id of a component that describes the input.
+     * Indicates the id or a string of space seperated ids of a component(s) that describes the input.
      */
     this.accessibleDescribedBy = "";
     /**
      * Indicates value of any popup element associated with the input.
      */
     this.accessibleHasPopup = undefined;
+    /**
+     * 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;
     /**
      * Set the amount of time, in milliseconds, to wait to trigger the duetChange
      * event after each keystroke.
@@ -290,7 +302,9 @@ export class DuetInput {
               disabled: this.disabled,
               "is-number": this.component === "number",
               "is-date": this.component === "date",
-            }, value: this.value, disabled: this.disabled, "aria-invalid": this.error ? "true" : "false", "aria-labelledby": `${this.labelId} ${this.errorId}`, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-activedescendant": this.accessibleActiveDescendant, "aria-expanded": this.accessibleExpanded, "aria-haspopup": this.accessibleHasPopup, "aria-owns": this.accessibleOwns, "aria-describedby": this.getDescribedBy(), placeholder: this.placeholder, spellcheck: "false", minlength: this.minlength, maxlength: this.maxlength, autocomplete: this.autoComplete, required: this.required, role: this.role, name: this.name, id: identifier }, inputProps)),
+            }, value: this.value, disabled: this.disabled, "aria-invalid": this.error ? "true" : "false", "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-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-expanded": this.accessibleExpanded, "aria-haspopup": this.accessibleHasPopup, "aria-owns": this.accessibleOwns, "aria-describedby": this.getDescribedBy(), placeholder: this.placeholder, spellcheck: "false", minlength: this.minlength, maxlength: this.maxlength, autocomplete: this.autoComplete, required: this.required, role: this.role, name: this.name, id: identifier }, inputProps)),
           !this.icon &&
             this.type !== "text" &&
             this.type !== "tel" &&
@@ -412,7 +426,7 @@ export class DuetInput {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Indicates the id of a component that describes the input."
+        "text": "Indicates the id or a string of space seperated ids of a component(s) that describes the input."
       },
       "attribute": "accessible-described-by",
       "reflect": false,
@@ -436,6 +450,60 @@ export class DuetInput {
       "reflect": false,
       "defaultValue": "undefined"
     },
+    "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"
+    },
     "debounce": {
       "type": "number",
       "mutable": false,

package/lib/collection/components/duet-label/duet-label.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";
 export class DuetLabel {
   constructor() {
     /**

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

@@ -4,8 +4,8 @@
 import newWindowIcon from "@duetds/icons/lib/assets/action-new-window-small";
 import { Build, Component, Fragment, h, Host, Method, Prop } from "@stencil/core";
 import { DuetStringsExternalDefaults } from "../../common-strings";
+import { inheritGlobalTheme } from "../../common/themeable-component";
 import { getLanguage, getLocaleString } from "../../utils/language-utils";
-import { inheritGlobalTheme } from "../../utils/themeable-component";
 /**
  * @part duet-link - piercing selector for styling the link
  */

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

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

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

@@ -3,9 +3,9 @@
  */
 import { colorBrandBlue, colorBrandGrayTurva, colorGrayLightest, colorPrimaryTurva } from "@duetds/tokens";
 import { Component, Element, h, Host, Method, Prop } from "@stencil/core";
+import { inheritGlobalTheme } from "../../common/themeable-component";
 import { createID } from "../../utils/create-id";
 import { getLanguage } from "../../utils/language-utils";
-import { inheritGlobalTheme } from "../../utils/themeable-component";
 const TurvaLogo = ({ inverse, logoId }) => {
   const logoColor = inverse ? colorGrayLightest : colorBrandGrayTurva;
   const textColor = inverse ? colorGrayLightest : colorPrimaryTurva;

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

@@ -3,11 +3,11 @@
  */
 import { Component, Element, Event, h, Listen, Method, Prop, State, Watch } from "@stencil/core";
 import { disableBodyScroll, enableBodyScroll } from "body-scroll-lock/lib/bodyScrollLock.es6.js";
+import { inheritGlobalTheme } from "../../common";
 import { createID } from "../../utils/create-id";
 import { focusElement, FocusGuard } from "../../utils/focus-utils";
 import { isEscapeKey } from "../../utils/keyboard-utils";
 import { getLanguage, getLocaleString } from "../../utils/language-utils";
-import { inheritGlobalTheme } from "../../utils/themeable-component";
 // The transition below is slightly higher than the actual CSS transition as VoiceOver on
 // iOS has otherwise problems moving the focus from modal back to the original element.
 // This issue is similar to what we’ve seen in Duet Date Picker + iOS VoiceOver.
@@ -71,6 +71,14 @@ export class DuetModal {
      * Size of the modal window.
      */
     this.size = "medium";
+    /**
+     * Details of the component
+     */
+    this.accessibleDetails = undefined;
+    /**
+     * Aria description the button
+     */
+    this.accessibleDescription = undefined;
     /**
      * Size of the modal window.
      */
@@ -212,7 +220,7 @@ export class DuetModal {
       iconColor = "primary-turva";
       closeColor = "secondary-turva";
     }
-    return (h("div", { ref: modal => (this.modalEl = modal), "aria-labelledby": this.heading ? this.modalId : false, "aria-describedby": this.slotDefaultId, role: "dialog", "aria-modal": this.isSafariBrowser ? false : true, tabindex: "-1", "aria-flowto": this.slotDefaultId, class: {
+    return (h("div", { ref: modal => (this.modalEl = modal), "aria-labelledby": this.heading ? this.modalId : false, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-describedby": this.accessibleDescribedBy ? `${this.slotDefaultId} ${this.accessibleDescribedBy}` : this.slotDefaultId, role: "dialog", "aria-modal": this.isSafariBrowser ? false : true, tabindex: "-1", "aria-flowto": this.slotDefaultId, class: {
         "duet-modal-overlay": true,
         "duet-theme-turva": this.theme === "turva",
         "duet-modal-active": this.open,
@@ -356,6 +364,76 @@ export class DuetModal {
       "reflect": false,
       "defaultValue": "\"medium\""
     },
+    "accessibleDescribedBy": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Indicates the id or a string of space seperated ids of a component(s) that describes the input."
+      },
+      "attribute": "accessible-described-by",
+      "reflect": false
+    },
+    "accessibleLabelledBy": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Indicates the id or a string of space seperated ids of a component(s) that labels the input."
+      },
+      "attribute": "accessible-labelled-by",
+      "reflect": false
+    },
+    "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"
+    },
+    "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"
+    },
     "gutterSize": {
       "type": "string",
       "mutable": false,

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

@@ -2,8 +2,8 @@
  * Built with Duet Design System
  */
 import { Component, Element, h, Method, Prop } from "@stencil/core";
+import { inheritGlobalTheme } from "../../common/themeable-component";
 import { getLanguage, getLocaleString } from "../../utils/language-utils";
-import { inheritGlobalTheme } from "../../utils/themeable-component";
 export class DuetNotification {
   constructor() {
     /**

package/lib/collection/components/duet-notification-drawer/duet-notification-drawer.js

@@ -3,8 +3,8 @@
  */
 import arrowDownIcon from "@duetds/icons/lib/assets/action-arrow-down-small";
 import { Component, Element, h, Listen, Method, Prop, State } from "@stencil/core";
+import { inheritGlobalTheme } from "../../common/themeable-component";
 import { getLanguage, getLocaleString } from "../../utils/language-utils";
-import { inheritGlobalTheme } from "../../utils/themeable-component";
 const ESC_KEY = 27;
 export class DuetNotificationDrawer {
   constructor() {

package/lib/collection/components/duet-number-input/duet-number-input.js

@@ -4,10 +4,10 @@
 import addIcon from "@duetds/icons/lib/assets/action-add";
 import subtractIcon from "@duetds/icons/lib/assets/action-subtract";
 import { Component, Element, Event, h, Host, Method, Prop, State } from "@stencil/core";
+import { inheritGlobalTheme } from "../../common";
 import { createID } from "../../utils/create-id";
 import { isArrowDownKey, isArrowLeftKey, isArrowRightKey, isArrowUpKey, isBackspaceKey, } from "../../utils/keyboard-utils";
 import { getLanguage, getLocale, getLocaleString } from "../../utils/language-utils";
-import { inheritGlobalTheme } from "../../utils/themeable-component";
 import { clamp, parseLocaleFloat, roundTo } from "./number-input-utils";
 export class DuetNumberInput {
   constructor() {
@@ -27,6 +27,18 @@ export class DuetNumberInput {
      * Unit for the number input.
      */
     this.unit = getLocale(this.language).money;
+    /**
+     * 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 accessibleLive
      * @default {fi: "{current} euroa valittuna", en: "{current} euros selected", sv: "{current} valda euro"}
@@ -328,7 +340,7 @@ export class DuetNumberInput {
         "duet-m-0": this.margin === "none",
       } },
       h("div", { class: "duet-number-container" },
-        h("duet-input", { ref: input => (this.duetInputElement = input), onDuetChange: event => this.handleChange(event), onDuetFocus: this.handleFocus, onDuetBlur: event => this.handleBlur(event), onKeyDown: event => this.handleKeyDown(event), label: this.label, value: this.value ? `${this.value} ${this.unit}` : "", error: this.error, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": cleanedValue != null ? cleanedValue : "", maxlength: maxlength, name: this.name, component: "number", required: this.required, disabled: this.disabled, role: this.role, labelHidden: this.labelHidden, tooltip: this.tooltip, identifier: identifier, theme: this.theme, margin: "none", expand: true, numericKeyboard: true, autoComplete: "off", type: "text", accessibleActiveDescendant: this.accessibleActiveDescendant, accessibleControls: this.accessibleControls, accessibleOwns: this.accessibleOwns, accessibleDescribedBy: this.accessibleDescribedBy },
+        h("duet-input", { ref: input => (this.duetInputElement = input), onDuetChange: event => this.handleChange(event), onDuetFocus: this.handleFocus, onDuetBlur: event => this.handleBlur(event), onKeyDown: event => this.handleKeyDown(event), label: this.label, value: this.value ? `${this.value} ${this.unit}` : "", error: this.error, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": cleanedValue != null ? cleanedValue : "", maxlength: maxlength, name: this.name, component: "number", required: this.required, disabled: this.disabled, role: this.role, labelHidden: this.labelHidden, tooltip: this.tooltip, identifier: identifier, theme: this.theme, margin: "none", expand: true, numericKeyboard: true, autoComplete: "off", type: "text", accessibleActiveDescendant: this.accessibleActiveDescendant, accessibleLabelledBy: this.accessibleLabelledBy, accessibleDescription: this.accessibleDescription, accessibleDetails: this.accessibleDetails, accessibleControls: this.accessibleControls, accessibleOwns: this.accessibleOwns, accessibleDescribedBy: this.accessibleDescribedBy },
           h("div", { class: { "duet-number-buttons": true, "duet-no-label": this.labelHidden } },
             h("button", { "aria-controls": identifier, disabled: this.disabled, "aria-disabled": cleanedValue == null || cleanedValue === this.min ? "true" : "false", class: "duet-number-button duet-number-button-subtract", onClick: this.subtract, type: "button" },
               h("duet-visually-hidden", null,
@@ -457,6 +469,60 @@ export class DuetNumberInput {
       "attribute": "accessible-controls",
       "reflect": false
     },
+    "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"
+    },
     "accessibleOwns": {
       "type": "string",
       "mutable": false,

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