@duetds/components 10.6.0 → 10.8.0

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

@@ -110,7 +110,7 @@ export class DuetTab {
      * Always the last one in the class.
      */
     render() {
-        return (h("div", { key: 'df1d38a00ae486704755f845444bbb3d99c63017', ref: element => {
+        return (h("div", { key: '52685c26793f37570debd51c11fd6d9c0eacb7a1', ref: element => {
                 if (!this.contentId) {
                     this.tabpanelElement = element;
                 }
@@ -119,7 +119,7 @@ export class DuetTab {
                 "duet-tab": true,
                 selected: this.selected,
                 "has-content-id": !!this.contentId,
-            }, "aria-description": this.accessibleDescription, "aria-labelledby": this.accessibleLabelledBy, tabindex: "-1" }, h("slot", { key: '31ef9a143a4015fd0fe6eb0ce190dc4b5bbbd582' })));
+            }, "aria-description": this.accessibleDescription, "aria-labelledby": this.accessibleLabelledBy, tabindex: "-1" }, h("slot", { key: 'bc08f9d93e9cb6653bfb2a97f5cc5fb9f67a1fe9' })));
     }
     static get is() { return "duet-tab"; }
     static get encapsulation() { return "shadow"; }

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

@@ -281,13 +281,13 @@ export class DuetTabGroup {
                 [largeBreakpoint]: ["default", "plain", "plain-scrolling"].includes(this.variation) ? true : false,
                 "duet-theme-turva": this.theme === "turva",
             }, onClick: () => this.onTabSelect(index), onKeyDown: ev => this.handleKeyDown(ev) }, this.variation === "checked" ? (h("div", { class: { "checked-tab-content": true, "stackable-checked-tab-content": this.tabs.length <= 3 } }, h("div", { class: { "checked-tab-description": true, "stackable-description": this.tabs.length <= 3 } }, h("p", null, element.label), h("p", { class: { "tab-caption": true, selected: element.selected } }, element.caption)), h("div", { class: { "stackable-checkmark": this.tabs.length <= 3 } }, h("duet-checkmark", { theme: this.theme, checked: element.selected, type: "radio", "presentation-only": true, center: true })))) : (element.label), element.indicator && (h("duet-indicator", { variation: element.indicator, "accessible-label": element.indicatorAccessibleLabel })))));
-        return (h("div", { key: '417e3a0eb99cdf3d6df636586be7435cad2144ac', class: {
+        return (h("div", { key: '494ac1333a13dd37b390174ca79a3a90e89f13d0', class: {
                 "duet-tab-group": true,
                 "duet-theme-turva": this.theme === "turva",
                 [variationClass]: true,
                 "duet-tab-plain-scrolling": this.variation === "plain-scrolling",
                 "duet-tab-group-scrolls": true,
-            }, "aria-label": this.accessibleLabel }, h("div", { key: 'da12d48bcbb77d4e88ca34c63ee54c63db53eacd', role: "tablist", class: {
+            }, "aria-label": this.accessibleLabel }, h("div", { key: 'eb4e340563793bfda1941a66200f6d07929bccb2', role: "tablist", class: {
                 "duet-m-0": this.margin === "none" || this.variation === "checked",
                 "duet-tab-group-tabs": true,
                 "duet-tab-group-hidden": this.tabs.length > 3 && !isSwipeScrollable,
@@ -298,11 +298,11 @@ export class DuetTabGroup {
             } }, this.variation === "checked" ? (buttons) : (h("div", { class: {
                 "duet-tab-group-scrollable-wrapper": true,
                 "duet-tab-group-fill-space-wrapper": this.fillSpace && this.variation === "default",
-            } }, this.fillSpace && !this.stretch && this.variation === "default" && (h("div", { class: "duet-scrollable-stretch-overlay" }, h("div", { class: "background" }), h("div", { class: "border" }))), h("duet-scrollable", { selected: this.selected, identifier: this.identifier, gap: ["default", "plain", "plain-scrolling"].includes(this.variation) ? "none" : "large", buttonPosition: this.variation === "default" ? "absolute" : "relative", center: this.isCentered() ? this.isCentered() : this.element.style.textAlign == "center", theme: this.theme, stretch: this.stretch }, buttons)))), h("div", { key: '25e346444619db75d262e11a84acdfaaafa2257c', class: {
+            } }, this.fillSpace && !this.stretch && this.variation === "default" && (h("div", { class: "duet-scrollable-stretch-overlay" }, h("div", { class: "background" }), h("div", { class: "border" }))), h("duet-scrollable", { selected: this.selected, identifier: this.identifier, gap: ["default", "plain", "plain-scrolling"].includes(this.variation) ? "none" : "large", buttonPosition: this.variation === "default" ? "absolute" : "relative", center: this.isCentered() ? this.isCentered() : this.element.style.textAlign == "center", theme: this.theme, stretch: this.stretch }, buttons)))), h("div", { key: 'fc769c72a4f684dc6f6cf0e893b93215b98b2d87', class: {
                 "duet-tab-group-content": true,
                 "duet-m-0": this.margin === "none",
                 "checked-group-content": this.variation === "checked",
-            } }, h("slot", { key: 'c63f225ca6cd084bb78f4f3bcc046d21c9d47e0a' }))));
+            } }, h("slot", { key: '20db6ecc342cbd347bdf35885289259106a07442' }))));
     }
     static get is() { return "duet-tab-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -144,7 +144,7 @@ export class DuetTable {
         });
     }
     render() {
-        return (h(Host, { key: '968bf1e9fea756e09fd9c3c26596fcf857ad8a61', class: {
+        return (h(Host, { key: '5416b5f7a33d4e5c30e826f1f41c03005bf5511b', class: {
                 [`duet-table-${this.variation}`]: true,
                 "duet-table-flattened": !this.matchesBreakpoint,
                 // sticky only valid when in regular table layout
@@ -153,7 +153,7 @@ export class DuetTable {
                 "duet-m-0": this.margin === "none",
                 "duet-theme-turva": this.theme === "turva",
                 "duet-table-hide-head-visually": this.hideHeadVisually,
-            } }, h("slot", { key: 'ccde2e16ca1aea0af30556faad3207a61a8219d0' })));
+            } }, h("slot", { key: '517ff1c0cda9e306cb0ea05f1e56a1d74e9a74d3' })));
     }
     static get is() { return "duet-table"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,127 @@
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+  background: transparent;
+  border: 0;
+}
+
+:host {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+  background: transparent;
+  border: 0;
+  display: block;
+  width: auto;
+  container-type: inline-size;
+}
+
+.duet-teaser {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  border-radius: 16px;
+}
+.duet-teaser .image-wrap,
+.duet-teaser .icon-wrap {
+  margin-bottom: 16px;
+}
+.duet-teaser .image-wrap {
+  display: inline-block;
+  overflow: hidden;
+  border-radius: 16px;
+}
+.duet-teaser .image-wrap .duet-teaser-image {
+  display: block;
+  width: 100%;
+  aspect-ratio: 16/10;
+  object-fit: cover;
+}
+.duet-teaser .icon-wrap .duet-teaser-icon {
+  display: block;
+  width: 30px;
+  width: 62px;
+  height: 30px;
+  height: 62px;
+}
+@container (width > 450px) {
+  .duet-teaser .icon-wrap .duet-teaser-icon {
+    width: 36px;
+    width: 76px;
+    height: 36px;
+    height: 76px;
+  }
+}
+.duet-teaser ::slotted(.teaser-heading) {
+  margin: 0 0 1rem 0;
+  font-size: 1.5rem;
+  font-weight: 700;
+  line-height: 1.25;
+}
+.duet-teaser ::slotted(.teaser-heading-h5) {
+  font-size: 1.25rem;
+  font-weight: 600;
+  line-height: 1.25;
+}
+.duet-teaser .duet-teaser-body {
+  display: flex;
+  flex-direction: column;
+}
+.duet-teaser .duet-teaser-body .duet-teaser-meta {
+  order: -1;
+  padding-top: 8px;
+}
+.duet-teaser.duet-teaser-link {
+  text-decoration: none;
+}
+.duet-teaser.duet-teaser-link:focus {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(0, 119, 179, 0.8);
+}
+.duet-theme-turva .duet-teaser.duet-teaser-link:focus, .duet-teaser.duet-teaser-link:focus.duet-theme-turva {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(53, 79, 101, 0.8);
+}
+.duet-teaser.duet-teaser-link .image-wrap {
+  display: inline-block;
+  overflow: hidden;
+}
+.duet-teaser.duet-teaser-link .image-wrap img {
+  transition: transform 300ms ease;
+}
+.duet-teaser.duet-teaser-link ::slotted(.teaser-heading) {
+  color: rgb(0, 75, 129);
+}
+.duet-teaser.duet-teaser-link:hover .teaser-heading {
+  color: rgb(0, 97, 155);
+}
+.duet-teaser.duet-teaser-link:hover .image-wrap img {
+  transform: scale(1.1);
+  transition: transform 300ms ease;
+}
+.duet-teaser.duet-teaser-link:hover ::slotted(.teaser-heading) {
+  color: rgb(0, 97, 155);
+  text-decoration: underline;
+}
+
+.duet-theme-turva.duet-teaser {
+  font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+}
+.duet-theme-turva.duet-teaser-link ::slotted(.teaser-heading) {
+  color: rgb(140, 0, 30);
+}
+.duet-theme-turva.duet-teaser-link:hover ::slotted(.teaser-heading) {
+  color: rgb(185, 3, 41);
+}

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

@@ -0,0 +1,462 @@
+/*!
+ * Built with Duet Design System
+ */
+import { h, Host } from "@stencil/core";
+import { inheritGlobalTheme } from "../../common/themeable-component";
+import { DuetPicture } from "../../utils/picture-utils";
+import { checkNamedSlotElement, hasSlot } from "../../utils/slot-utils";
+import { parsePossibleJSON } from "../../utils/string-utils";
+const LONG_HEADING_LENGTH = 60;
+/**
+ * @slot links - Slot for links or buttons related to the teaser. Only default duet-link and plain duet-button components should be used in this slot. Not rendered when the `url` property is set.
+ */
+export class DuetTeaser {
+    constructor() {
+        /**
+         * Theme.
+         */
+        this.theme = "";
+        /**
+         * The actual heading level used in the HTML markup.
+         */
+        this.headingLevel = "h3";
+        /**
+         * Controls the visual size of the heading. Headings longer than 60 characters
+         * always use "h5" visually, regardless of this setting.
+         */
+        this.headingVisualLevel = "h3";
+        /**
+         * Background color for the icon
+         */
+        this.iconBackground = "color-background-accent-secondary";
+        /**
+         * Color for the icon
+         */
+        this.iconColor = "color-foreground-accent-secondary";
+        /**
+         * Creates/updates the actual heading element as a light DOM child of the
+         * host, slotted into the "heading" slot.
+         */
+        this.headingSetUp = () => {
+            const existing = this.element.querySelector(":scope > [slot='heading']");
+            if (!this.heading) {
+                existing === null || existing === void 0 ? void 0 : existing.remove();
+                return;
+            }
+            const tagMatches = (existing === null || existing === void 0 ? void 0 : existing.tagName.toLowerCase()) === this.headingLevel;
+            const headingElement = tagMatches ? existing : document.createElement(this.headingLevel);
+            headingElement.slot = "heading";
+            headingElement.textContent = this.heading;
+            headingElement.className = `teaser-heading teaser-heading-${this.getHeadingVisualLevel()}`;
+            if (!tagMatches) {
+                existing === null || existing === void 0 ? void 0 : existing.remove();
+                this.element.appendChild(headingElement);
+            }
+        };
+    }
+    /**
+     * Component lifecycle events.
+     */
+    componentWillLoad() {
+        inheritGlobalTheme(this);
+        this.hasLinksSlot = hasSlot(this.element, "links");
+        checkNamedSlotElement(this.element, "links", "duet-link[variation=default],duet-link:not([variation]),duet-button[variation=plain]", 0, true);
+    }
+    componentDidRender() {
+        this.headingSetUp();
+    }
+    /**
+     * Sets focus on underlying a element.
+     * Available only when url attribute is used.
+     * Use this method instead of the native `focus()`.
+     */
+    async setFocus(options) {
+        if (this.url && this.aOrDivElement) {
+            this.aOrDivElement.focus(options);
+        }
+    }
+    getHeadingVisualLevel() {
+        return this.heading && this.heading.length > LONG_HEADING_LENGTH ? "h5" : this.headingVisualLevel;
+    }
+    /**
+     * render() function
+     * Always the last one of the class.
+     */
+    render() {
+        const TagName = this.url ? "a" : "div";
+        const pictureSource = {
+            img: {
+                src: this.image,
+                alt: this.imageAlt || "",
+                loading: this.imagePriority === "high" ? "eager" : "lazy",
+                fetchpriority: this.imagePriority,
+                class: "duet-teaser-image",
+            },
+            sources: parsePossibleJSON(this.sources),
+        };
+        return (h(Host, { key: '2177fb25347d6718b106ee8ae29a47da6ae543b2' }, h(TagName, { key: '4485125a5e29b14c00da4a7ff1ab55ae30ae03fd', href: this.url, class: {
+                "duet-teaser": true,
+                "duet-theme-turva": this.theme === "turva",
+                "duet-teaser-link": !!this.url,
+            }, ref: element => (this.aOrDivElement = element) }, this.image ? (h("div", { class: "image-wrap" }, h(DuetPicture, Object.assign({}, pictureSource)))) : (this.icon && (h("div", { class: "icon-wrap" }, h("duet-icon", { class: "duet-teaser-icon", shape: "brand", color: this.iconColor, background: this.iconBackground, name: this.icon, margin: "none" })))), h("div", { key: 'c1bf8197236423d2c89e927609b46bf541f2ff2c', class: "duet-teaser-body" }, this.heading && (h("div", { key: 'f217f4e9e0ef3304743f40e2fff01054ca029f70' }, h("slot", { key: '4a57d8a71a89df56fff5f1be801425a26cac3e54', name: "heading" }))), this.meta && (h("duet-paragraph", { key: 'cacaa63522817218386da1de2ef6ab41dcf7927e', class: "duet-teaser-meta", margin: "none" }, this.meta)), this.description && h("duet-paragraph", { key: '575cb467ffd41ab0a5fb5f71f8995a4a8db15d48' }, this.description), !this.url && this.hasLinksSlot && (h("duet-grid", { key: '02c90e874e6c2b45b5e43194d161b30045effd31', direction: "vertical" }, h("slot", { key: 'fd2c221a55bbb1433355d189632eaf7795576561', name: "links" })))))));
+    }
+    static get is() { return "duet-teaser"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["duet-teaser.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["duet-teaser.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "theme": {
+                "type": "string",
+                "attribute": "theme",
+                "mutable": true,
+                "complexType": {
+                    "original": "DuetTheme",
+                    "resolved": "\"\" | \"default\" | \"turva\"",
+                    "references": {
+                        "DuetTheme": {
+                            "location": "import",
+                            "path": "../../common-types",
+                            "id": "src/common-types.d.ts::DuetTheme"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Theme."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "heading": {
+                "type": "string",
+                "attribute": "heading",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The heading text."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "headingLevel": {
+                "type": "string",
+                "attribute": "heading-level",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetHeadingLevel",
+                    "resolved": "\"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\"",
+                    "references": {
+                        "DuetHeadingLevel": {
+                            "location": "import",
+                            "path": "../../common-types",
+                            "id": "src/common-types.d.ts::DuetHeadingLevel"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The actual heading level used in the HTML markup."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"h3\""
+            },
+            "headingVisualLevel": {
+                "type": "string",
+                "attribute": "heading-visual-level",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetTeaserHeadingVisualLevel",
+                    "resolved": "\"h3\" | \"h5\"",
+                    "references": {
+                        "DuetTeaserHeadingVisualLevel": {
+                            "location": "local",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-teaser/duet-teaser.tsx",
+                            "id": "src/components/duet-teaser/duet-teaser.tsx::DuetTeaserHeadingVisualLevel"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls the visual size of the heading. Headings longer than 60 characters\nalways use \"h5\" visually, regardless of this setting."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"h3\""
+            },
+            "description": {
+                "type": "string",
+                "attribute": "description",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Description text shown below the heading."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "meta": {
+                "type": "string",
+                "attribute": "meta",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Meta text (date, category, etc.). Placed after the heading in source order, but rendered visually above it."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "url": {
+                "type": "string",
+                "attribute": "url",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A destination to link to, rendered in the href attribute of a link. Makes\nthe whole teaser act as a link and disables the links slot."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "image": {
+                "type": "string",
+                "attribute": "image",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Image URL. If provided, the icon property is ignored."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "imageAlt": {
+                "type": "string",
+                "attribute": "image-alt",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Alt attribute text for the image. If not provided, image is assigned presentation role."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "imagePriority": {
+                "type": "string",
+                "attribute": "image-priority",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"high\" | \"low\"",
+                    "resolved": "\"high\" | \"low\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Make the image load with higher or lower priority. Value \"high\" sets the img's attributes fetchpriority and loading to\n\"high\" and \"eager\", while value \"low\" sets those attributes to \"low\" and \"lazy\""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "sources": {
+                "type": "string",
+                "attribute": "sources",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetSource[] | string",
+                    "resolved": "DuetSource[] | string",
+                    "references": {
+                        "DuetSource": {
+                            "location": "import",
+                            "path": "../../utils/picture-utils",
+                            "id": "src/utils/picture-utils.tsx::DuetSource"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Array of sources for responsive images. Sources have the properties of <source> element."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "icon": {
+                "type": "string",
+                "attribute": "icon",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetIconName",
+                    "resolved": "string",
+                    "references": {
+                        "DuetIconName": {
+                            "location": "import",
+                            "path": "../../common-types",
+                            "id": "src/common-types.d.ts::DuetIconName"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon to display when no image is set. Not used if the image property is given."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "iconBackground": {
+                "type": "string",
+                "attribute": "icon-background",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetColor",
+                    "resolved": "string",
+                    "references": {
+                        "DuetColor": {
+                            "location": "import",
+                            "path": "../../common-types",
+                            "id": "src/common-types.d.ts::DuetColor"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Background color for the icon"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"color-background-accent-secondary\""
+            },
+            "iconColor": {
+                "type": "string",
+                "attribute": "icon-color",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetIconColor",
+                    "resolved": "string",
+                    "references": {
+                        "DuetIconColor": {
+                            "location": "import",
+                            "path": "../../common-types",
+                            "id": "src/common-types.d.ts::DuetIconColor"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Color for the icon"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"color-foreground-accent-secondary\""
+            }
+        };
+    }
+    static get methods() {
+        return {
+            "setFocus": {
+                "complexType": {
+                    "signature": "(options?: FocusOptions) => Promise<void>",
+                    "parameters": [{
+                            "name": "options",
+                            "type": "FocusOptions",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "FocusOptions": {
+                            "location": "global",
+                            "id": "global::FocusOptions"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Sets focus on underlying a element.\nAvailable only when url attribute is used.\nUse this method instead of the native `focus()`.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "element"; }
+}

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

@@ -217,6 +217,10 @@ duet-tooltip,
   color: rgb(8, 42, 77);
   opacity: 1 !important;
 }
+.duet-textarea[readonly] {
+  color: rgb(62, 84, 102) !important;
+  border-color: rgb(212, 223, 229);
+}
 .duet-textarea:hover:not(:disabled):not(:focus) {
   outline: 2px solid;
   outline-color: rgb(127, 150, 165) !important;
@@ -307,6 +311,10 @@ duet-tooltip,
   opacity: 1 !important;
   -webkit-text-fill-color: rgb(23, 42, 59) !important;
 }
+.duet-theme-turva .duet-textarea[readonly] {
+  color: rgb(53, 79, 101) !important;
+  border-color: rgb(212, 221, 226);
+}
 .duet-theme-turva.has-error .duet-textarea-help {
   color: rgb(214, 28, 82);
 }