@duetds/components 5.1.9 → 5.2.2

package/lib/collection/components/duet-action-button/duet-action-button.js

@@ -2,11 +2,11 @@
  * Built with Duet Design System
  */
 import { Component, Element, Event, h, Host, Prop, State } from "@stencil/core";
+import { inheritGlobalTheme } from "../../common";
 import { createID } from "../../utils/create-id";
 import { debounce } from "../../utils/js-utils";
 import { isKeyboardClick } from "../../utils/keyboard-utils";
 import { getLocaleString } from "../../utils/language-utils";
-import { inheritGlobalTheme } from "../../utils/themeable-component";
 import { getColorByName, shadeRGBColor } from "../../utils/token-utils";
 /**
  * Slot: default slot inside an invisible element, this can be used to enhance accessibility
@@ -65,15 +65,23 @@ export class DuetActionButton {
     /**
      * Described By id
      */
-    this.ariaDescribedBy = undefined;
+    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.ariaDescription = undefined;
+    this.accessibleDescription = undefined;
     /**
      * Default pagination labels
      */
-    this.ariaLabelsDefaults = {
+    this.accessibleLabelsDefaults = {
       en: {
         label: "Click to activate action",
       },
@@ -87,11 +95,11 @@ export class DuetActionButton {
     /**
      * Default pagination labels
      */
-    this.ariaLabels = getLocaleString(this.ariaLabelsDefaults);
+    this.accessibleLabels = getLocaleString(this.accessibleLabelsDefaults);
     /**
      * Used to indicate which dom element with ID this element controls
      */
-    this.ariaControls = "";
+    this.accessibleControls = "";
     this.listId = createID("duet-action-button");
     /**
      * Private methods.
@@ -161,7 +169,7 @@ export class DuetActionButton {
           "duet-action-button": true,
           "duet-action-button--disabled": this.disabled,
           [`duet-action-button--${this.theme}`]: this.theme !== "",
-        }, type: "button", onClick: e => this.onMouseHandler(e), "aria-label": this.ariaLabels.label, "aria-description": this.ariaDescription, "aria-describedby": this.ariaDescribedBy, "aria-controls": this.ariaControls },
+        }, type: "button", onClick: e => this.onMouseHandler(e), "aria-label": this.accessibleLabels.label, "aria-labelledby": this.accessibleLabelledBy, "aria-description": this.accessibleDescription, "aria-describedby": this.accessibleDescribedBy, "aria-details": this.accessibleDetails, "aria-controls": this.accessibleControls },
         h("duet-icon", { part: "icon", name: this.iconName, color: this.iconColor, margin: "none", size: this.iconSize }),
         h("duet-visually-hidden", null,
           h("slot", null)))));
@@ -378,7 +386,7 @@ export class DuetActionButton {
       "reflect": false,
       "defaultValue": "\"\""
     },
-    "ariaDescribedBy": {
+    "accessibleDescribedBy": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -396,7 +404,43 @@ export class DuetActionButton {
       "reflect": false,
       "defaultValue": "undefined"
     },
-    "ariaDescription": {
+    "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": {
@@ -414,7 +458,7 @@ export class DuetActionButton {
       "reflect": false,
       "defaultValue": "undefined"
     },
-    "ariaLabelsDefaults": {
+    "accessibleLabelsDefaults": {
       "type": "unknown",
       "mutable": false,
       "complexType": {
@@ -435,7 +479,7 @@ export class DuetActionButton {
       },
       "defaultValue": "{\n    en: {\n      label: \"Click to activate action\",\n    },\n    fi: {\n      label: \"Klikkaa toiminnon aktivointiin\",\n    },\n    sv: {\n      label: \"Klicka f\u00F6r att aktivera \u00E5tg\u00E4rd\",\n    },\n  }"
     },
-    "ariaLabels": {
+    "accessibleLabels": {
       "type": "unknown",
       "mutable": false,
       "complexType": {
@@ -453,9 +497,9 @@ export class DuetActionButton {
         "tags": [],
         "text": "Default pagination labels"
       },
-      "defaultValue": "getLocaleString(\n    this.ariaLabelsDefaults\n  )"
+      "defaultValue": "getLocaleString(\n    this.accessibleLabelsDefaults\n  )"
     },
-    "ariaControls": {
+    "accessibleControls": {
       "type": "string",
       "mutable": false,
       "complexType": {

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

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

package/lib/collection/components/duet-badge/duet-badge.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 DuetBadge {
   constructor() {
     /**

package/lib/collection/components/duet-breadcrumbs/duet-breadcrumb.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 DuetBreadcrumb {
   constructor() {
     /**

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

@@ -3,8 +3,8 @@
  */
 import arrowRightSmallIcon from "@duetds/icons/lib/assets/action-arrow-right-small";
 import { Build, Component, Element, Fragment, h, Host, Prop, State } from "@stencil/core";
+import { inheritGlobalTheme } from "../../common/themeable-component";
 import { getLocaleString } from "../../utils/language-utils";
-import { inheritGlobalTheme } from "../../utils/themeable-component";
 export class DuetBreadcrumbs {
   constructor() {
     this.observers = [];

package/lib/collection/components/duet-button/duet-button.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 { DuetStringsExternalDefaults } from "../../common-strings";
 import { getLanguage, getLocaleString } from "../../utils/language-utils";
-import { inheritGlobalTheme } from "../../utils/themeable-component";
 import { getColorByName } from "../../utils/token-utils";
 export class DuetButton {
   constructor() {
@@ -12,6 +12,18 @@ export class DuetButton {
      * Use this property to add an aria-haspopup attribute to a button, if you are using it as a menu button.
      */
     this.accessiblePopup = "false";
+    /**
+     * 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;
     /**
      * Loading state of the button
      */
@@ -223,6 +235,9 @@ export class DuetButton {
       "aria-activedescendant": this.accessibleActiveDescendant,
       "aria-owns": this.accessibleOwns,
       "aria-describedby": this.accessibleDescribedBy,
+      "aria-labelledby": this.accessibleLabelledBy,
+      "aria-details": this.accessibleDetails,
+      "aria-description": this.accessibleDescription,
     };
     return (h(Host, { onClick: this.handleClick, class: {
         "duet-m-0": this.margin === "none",
@@ -357,6 +372,60 @@ export class DuetButton {
       "attribute": "accessible-described-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"
+    },
+    "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"
+    },
     "accessibleExpanded": {
       "type": "boolean",
       "mutable": false,

package/lib/collection/components/duet-caption/duet-caption.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 DuetCaption {
   constructor() {
     /**

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

@@ -3,10 +3,10 @@
  */
 import arrowUpIcon from "@duetds/icons/lib/assets/action-arrow-up";
 import { Component, Element, Event, Fragment, h, Host, Method, Prop } from "@stencil/core";
+import { inheritGlobalTheme } from "../../common";
 import { createID } from "../../utils/create-id";
 import { isKeyboardClick } from "../../utils/keyboard-utils";
 import { sanitizeString } from "../../utils/string-utils";
-import { inheritGlobalTheme } from "../../utils/themeable-component";
 import { getColorByName } from "../../utils/token-utils";
 /**
  * @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.

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

@@ -2,8 +2,8 @@
  * 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 DuetCheckbox {
   constructor() {
     /**
@@ -14,6 +14,18 @@ export class DuetCheckbox {
      * 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;
     /**
      * Set whether the input is required or not. Please note that this is required for
      * accessible inputs when the user is required to fill them. When using this property
@@ -99,7 +111,7 @@ export class DuetCheckbox {
           "duet-label-hidden": this.labelHidden,
           "duet-theme-turva": this.theme === "turva",
         } },
-        h("input", { ref: input => (this.nativeInput = input), type: "checkbox", onFocus: this.onFocus, onBlur: this.onBlur, onChange: this.onChange, value: this.value, class: { "duet-checkbox": true, disabled: this.disabled }, checked: this.checked, disabled: this.disabled, tabindex: this.accessibleIndex, "aria-controls": this.accessibleControls, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.accessibleDescribedBy, required: this.required, role: this.role, name: this.name, id: identifier }),
+        h("input", { ref: input => (this.nativeInput = input), type: "checkbox", onFocus: this.onFocus, onBlur: this.onBlur, onChange: this.onChange, value: this.value, class: { "duet-checkbox": true, disabled: this.disabled }, checked: this.checked, disabled: this.disabled, tabindex: this.accessibleIndex, "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, required: this.required, role: this.role, name: this.name, id: identifier }),
         h("label", { class: "duet-label", htmlFor: identifier },
           h("span", null, this.label)))));
   }
@@ -220,6 +232,60 @@ export class DuetCheckbox {
       "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"
+    },
     "required": {
       "type": "boolean",
       "mutable": false,

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

@@ -3,12 +3,12 @@
  */
 import infoIcon from "@duetds/icons/lib/assets/messaging-info";
 import { Component, Element, Event, h, Host, Listen, Method, Prop, State } from "@stencil/core";
+import { inheritGlobalTheme } from "../../common";
 import { DuetStringsExternalDefaults } from "../../common-strings";
 import { createID } from "../../utils/create-id";
 import { FocusGuard } from "../../utils/focus-utils";
 import { isEscapeKey, isKeyboardClick, isQuestionKey } from "../../utils/keyboard-utils";
 import { getLanguage, getLocaleString } from "../../utils/language-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 info - Info content. Anything inserted into this slot is displayed in a collapsible info box.
@@ -48,6 +48,18 @@ export class DuetChoice {
      * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"}
      */
     this.accessibleLabelInfoButton = getLocaleString(this.accessibleLabelInfoButtonDefaults);
+    /**
+     * 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;
     /**
      * Additional caption to show inside the label of the choice button.
      */
@@ -287,7 +299,7 @@ export class DuetChoice {
             collapsible: this.collapsible,
             "duet-p-0": this.padding === "none",
           } },
-          h("input", { class: "duet-choice-input", type: this.type, onFocus: this.onFocus, onBlur: this.onBlur, onChange: this.onChange, disabled: this.disabled || this.groupDisabled, required: this.required, id: identifier, name: this.name, value: this.value, checked: this.checked, "aria-controls": this.accessibleControls, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.getAriaDescribedby(), onKeyDown: this.handleKeyDown, ref: input => (this.nativeInput = input) }),
+          h("input", { class: "duet-choice-input", type: this.type, onFocus: this.onFocus, onBlur: this.onBlur, onChange: this.onChange, disabled: this.disabled || this.groupDisabled, required: this.required, id: identifier, name: this.name, value: this.value, checked: this.checked, "aria-controls": this.accessibleControls, "aria-activedescendant": this.accessibleActiveDescendant, "aria-labelledby": this.accessibleLabelledBy, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-owns": this.accessibleOwns, "aria-describedby": this.getAriaDescribedby(), onKeyDown: this.handleKeyDown, ref: input => (this.nativeInput = input) }),
           h("label", { htmlFor: identifier, class: { "duet-choice-label": true, "no-hover": this.isHovering }, onClick: this.onClick },
             this.icon && (h("div", { class: "duet-choice-card-icon" },
               h("duet-icon", { margin: "none", size: "small", name: this.icon, color: "currentColor" }))),
@@ -484,6 +496,60 @@ export class DuetChoice {
       "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"
+    },
     "caption": {
       "type": "string",
       "mutable": false,

package/lib/collection/components/duet-choice-group/duet-choice-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 DuetChoiceGroup {
   constructor() {

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

@@ -4,10 +4,10 @@
 import icon from "@duetds/icons/lib/assets/action-arrow-down-small";
 import * as tokens from "@duetds/tokens/lib/tokens.json";
 import { Component, Element, Event, h, Host, Method, Prop } from "@stencil/core";
+import { inheritGlobalTheme } from "../../common/themeable-component";
 import { createID } from "../../utils/create-id";
 import { isKeyboardClick } from "../../utils/keyboard-utils";
 import { sanitizeString } from "../../utils/string-utils";
-import { inheritGlobalTheme } from "../../utils/themeable-component";
 /**
  * @part duet-collapsible-heading-content - piercing selector for styling the heading content
  * @part duet-collapsible-content - piercing selector for styling the content

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

@@ -2,11 +2,11 @@
  * Built with Duet Design System
  */
 import { Build, Component, Element, Event, h, Host, Listen, Method, Prop, State, Watch, } from "@stencil/core";
+import { inheritGlobalTheme } from "../../common/themeable-component";
 import { debounce } from "../../utils/js-utils";
 import { isArrowDownKey, isArrowUpKey, isEnterKey, isEscapeKey, isTabKey } from "../../utils/keyboard-utils";
 import { getLanguage, getLocaleString } from "../../utils/language-utils";
 import { parsePossibleJSON } from "../../utils/string-utils";
-import { inheritGlobalTheme } from "../../utils/themeable-component";
 import { DuetComboBoxSelect } from "./duet-combobox-select";
 export class DuetCombobox {
   constructor() {

package/lib/collection/components/duet-cookie-consent/duet-cookie-consent.js

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

package/lib/collection/components/duet-date-picker/duet-date-picker.js

@@ -2,10 +2,10 @@
  * Built with Duet Design System
  */
 import { Component, Element, Event, h, Host, Listen, Method, Prop, State, Watch } from "@stencil/core";
+import { inheritGlobalTheme } from "../../common/themeable-component";
 import { createID } from "../../utils/create-id";
 import { FocusGuard } from "../../utils/focus-utils";
 import { getLanguage, getLocaleString } from "../../utils/language-utils";
-import { inheritGlobalTheme } from "../../utils/themeable-component";
 import i18n from "./date-i18n";
 import { DatePickerInput } from "./date-picker-input";
 import { DatePickerMonth } from "./date-picker-month";

package/lib/collection/components/duet-date-picker/utils.js

@@ -8,7 +8,6 @@
  * @param to
  */
 export function range(from, to) {
-  console.log({ from, to });
   var result = [];
   for (var i = from; i <= to; i++) {
     result.push(i);

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

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

@@ -2,10 +2,10 @@
  * Built with Duet Design System
  */
 import { Component, Element, Event, h, Host, Prop } from "@stencil/core";
+import { inheritGlobalTheme } from "../../common/themeable-component";
 import { fieldSorter } from "../../utils/js-utils";
 import { isKeyboardClick } from "../../utils/keyboard-utils";
 import { getLocaleString } from "../../utils/language-utils";
-import { inheritGlobalTheme } from "../../utils/themeable-component";
 import { TableData } from "./duet-editable-table-tabledata";
 export class DuetEditableTable {
   constructor() {
@@ -195,6 +195,7 @@ export class DuetEditableTable {
   render() {
     return (h(Host, { class: {
         [`duet-editable-table-${this.variation}`]: true,
+        "duet-editable-table": true,
         [`duet-editable-table-${this.theme}`]: true,
         // sticky only valid when in regular table layout
         "duet-editable-table-scrollable": this.breakpoint === "none-scrollable",
@@ -203,7 +204,7 @@ export class DuetEditableTable {
         "duet-m-0": this.margin === "none",
         "duet-theme-turva": this.theme === "turva",
       } },
-      h("duet-table", { sticky: this.sticky, stickyDistance: this.stickyDistance, margin: this.margin, theme: this.theme, variation: this.variation, breakpoint: this.breakpoint },
+      h("duet-table", { class: "duet-editable-table-table", sticky: this.sticky, stickyDistance: this.stickyDistance, margin: this.margin, theme: this.theme, variation: this.variation, breakpoint: this.breakpoint },
         h("table", { role: this.accessibleRole },
           h("caption", null,
             h("slot", { name: "tcaption" })),

package/lib/collection/components/duet-empty-state/duet-empty-state.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 DuetEmptyState {
   constructor() {
     /**

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

@@ -2,8 +2,8 @@
  * Built with Duet Design System
  */
 import { Component, Element, h, Host, Prop, State } from "@stencil/core";
+import { inheritGlobalTheme } from "../../common/themeable-component";
 import { createID } from "../../utils/create-id";
-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 tooltip - Use to place a tooltip alongside the fieldset label.

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

@@ -8,9 +8,9 @@ import newWindowIcon from "@duetds/icons/lib/assets/action-new-window";
 import newWindowIconSmall from "@duetds/icons/lib/assets/action-new-window-small";
 import { Component, Element, Event, Fragment, 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";
 const i18n = {
   fi: { lahi: "© LähiTapiola", turva: "© Turva" },
   sv: { lahi: "© LokalTapiola", turva: "© Turva" },