@duetds/components 10.0.0-alpha.9 → 10.0.0

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

@@ -5,7 +5,7 @@ import { h, Host } from "@stencil/core";
 import { DuetInternalLabel } from "../../common/label";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { createID } from "../../utils/create-id";
-import { checkNamedSlotElement } from "../../utils/slot-utils";
+import { checkNamedSlotElement, proxyInputToSlot } from "../../utils/slot-utils";
 import { parsePossibleJSON } from "../../utils/string-utils";
 function isOptionGroup(item) {
     return "options" in item;
@@ -34,12 +34,82 @@ export class DuetSelect {
         this.labelId = createID("DuetLabel");
         this.topCaptionId = createID("DuetCaptionTop");
         this.topCaptionPlaceholderId = createID("DuetCaptionPlaceholderTop");
+        this.proxyId = createID("DuetSelect");
+        /**
+         * State() variables
+         * Inlined decorator, alphabetical order.
+         */
+        this.processedItems = null;
+        /**
+         * Variation of dropdown. Tiny is used for small numbers / tiny option ranges. Compact works well with adjacent buttons,
+         * like with compact pagination.
+         */
+        this.variation = "default";
+        /**
+         * Controls the margin of the component.
+         */
+        this.margin = "auto";
+        /**
+         * Display the select in error state along with an error message.
+         */
+        this.error = "";
+        /**
+         * The aria-live attribute for the error message. When the input is validated on blur, use "off", as using "polite" or "assertive"
+         * makes the screen reader read the error message twice. When the input is validated on submit, use "polite", as "off" would leave
+         * the messages unread by screen readers. Use "assertive" only in those rare cases when "polite" would leave the error message
+         * unread by screen readers.
+         */
+        this.accessibleLiveError = "polite";
+        /**
+         * Expands the input to fill 100% of the container width.
+         */
+        this.expand = false;
+        /**
+         * Theme of the select.
+         */
+        this.theme = "";
+        /**
+         * Visually hide the label, but still show it to screen readers.
+         */
+        this.labelHidden = false;
+        /**
+         * Hint text to display.
+         */
+        this.placeholder = "";
+        /**
+         * If form input field has a placeholder text, and user types anything (causing the placeholder text to disappear),
+         * settings this to true will "echo" it into the caption slot - this option will be false by default for the next few versions, but will eventually be true by default (scheduled for 4.30.0)
+         */
+        this.echoPlaceholder = false;
+        /**
+         * Makes the select component disabled. This prevents users from being able
+         * to interact with the select, and conveys its inactive state to assistive
+         * technologies.
+         */
+        this.disabled = false;
+        /**
+         * Set whether the input is required or not. Please note that this is necessary for
+         * accessible inputs when the user is required to fill them. When using this property
+         * you need to also set “novalidate” attribute to your form element to prevent
+         * browser from displaying its own validation errors.
+         */
+        this.required = false;
+        /**
+         * Label for the select.
+         */
+        this.label = "label";
+        /**
+         * Tooltip to display next to the label of the input.
+         */
+        this.tooltip = "";
+        /**
+         * With direction setting you can force the tooltip to always open towards left
+         * or right instead of automatically determining the direction.
+         */
+        this.tooltipDirection = "auto";
         /**
          * Component event handling.
          */
-        this.onClick = (ev) => {
-            ev.stopPropagation();
-        };
         this.onChange = () => {
             this.value = this.nativeSelect.value;
             this.duetChange.emit({
@@ -74,33 +144,6 @@ export class DuetSelect {
             }
             return describedBy.length > 0 ? describedBy.join(" ") : null;
         };
-        this.processedItems = null;
-        this.variation = "default";
-        this.accessibleActiveDescendant = undefined;
-        this.accessibleDescribedBy = undefined;
-        this.margin = "auto";
-        this.accessibleControls = undefined;
-        this.accessibleOwns = undefined;
-        this.error = "";
-        this.accessibleLiveError = "polite";
-        this.expand = false;
-        this.value = undefined;
-        this.theme = "";
-        this.labelHidden = false;
-        this.identifier = undefined;
-        this.name = undefined;
-        this.placeholder = "";
-        this.caption = undefined;
-        this.echoPlaceholder = false;
-        this.items = undefined;
-        this.disabled = false;
-        this.required = false;
-        this.label = "label";
-        this.labelColor = undefined;
-        this.labelWeight = undefined;
-        this.role = undefined;
-        this.tooltip = "";
-        this.tooltipDirection = "auto";
     }
     valueChanged() {
         if (this.nativeSelect) {
@@ -117,6 +160,9 @@ export class DuetSelect {
         checkNamedSlotElement(this.element, "tooltip", "duet-tooltip", 1, true);
         this.refresh();
     }
+    componentDidRender() {
+        proxyInputToSlot(this.element, this.proxyId, this.name, this.value, this.required, undefined);
+    }
     /**
      * Sets focus on the specified `duet-select`. Use this method instead of the global
      * `select.focus()`.
@@ -151,23 +197,23 @@ export class DuetSelect {
      */
     render() {
         const identifier = this.identifier || this.selectId;
-        return (h(Host, { key: '97e300d180fa7ab77642e9dcef5058668239dfbb', onClick: this.onClick, class: {
+        return (h(Host, { key: 'fdd63e936b7bb108a1efc84a1c817b6aaaa69f9a', class: {
                 "duet-m-0": this.margin === "none",
                 "duet-expand": this.expand,
                 [`duet-select-variation-${this.variation}`]: true,
-            } }, h("div", { key: '9134150079957ab03ec32590971e21d5bc5b25f9', class: {
+            } }, h("div", { key: '28d3a343fa2265a2781cc306ecc4c391740260f4', class: {
                 "duet-select-container": true,
                 "duet-label-hidden": this.labelHidden,
                 "duet-theme-turva": this.theme === "turva",
                 [`duet-select-variation-${this.variation}`]: true,
                 "duet-input-top-caption-shown": this.isCaptionVisible,
                 "has-error": !!this.error,
-            } }, h(DuetInternalLabel, { key: '018de10ebd412b11be1d446bd6fd1652d2fbf679', theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, color: this.labelColor, weight: this.labelWeight, id: this.labelId, for: identifier }, this.label), this.tooltip && (h("duet-tooltip", { key: 'eabe0942894995ecdb037653aaa90e03e9da3f33', direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), h("slot", { key: '126da083fad012a9052281e3778bc5c51fff5e60', name: "tooltip" }), this.caption && (h("duet-caption", { key: '8eb1983df70277d37388732ce451cd847c145dc5', id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { key: '74a04f197d688a20f718f4ddbee19ef9060c9739', class: "duet-select-wrapper" }, this.placeholder && this.echoPlaceholder && this.value && (h("duet-caption", { key: '39892af927657f837f5cc896a86fab5a07e1af37', id: this.topCaptionPlaceholderId, class: "duet-select-placeholder", size: "small" }, this.placeholder)), h("select", { key: '4f2be5c44a926919c407880e6874a97fc40f51fa', ref: select => (this.nativeSelect = select), disabled: this.disabled, name: this.name, id: identifier, role: this.role, "aria-labelledby": this.labelId, "aria-describedby": this.getDescribedBy(), "aria-controls": this.accessibleControls, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, onFocus: this.onFocus, onBlur: this.onBlur, onChange: this.onChange, required: this.required }, this.placeholder && (h("option", { key: '046648968380fbe7fa5a2053110d49c4c676cc71', disabled: true, selected: true, value: "" }, this.placeholder)), !this.processedItems ? (h("option", null, "Virhe valintoja ladattaessa. P\u00E4ivit\u00E4 sivu ja kokeile uusiksi.")) : (this.processedItems.map(item => {
+            } }, h(DuetInternalLabel, { key: '49e5973e7e6de2a56a282938c7fb074e133f52e3', theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, color: this.labelColor, weight: this.labelWeight, id: this.labelId, for: identifier }, this.label), this.tooltip && (h("duet-tooltip", { key: '9aabd151caf0d0893718d2b44020bf8cb9213151', direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), h("slot", { key: 'f2c8a3ec15f5ea5fadefceede4a96dbb136f4241', name: "tooltip" }), this.caption && (h("duet-caption", { key: '987b20570850b5ec609d2befc6789bcb88330a69', id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { key: '24b6b6d11b590c7af3f476fba757c6ace46a00eb', class: "duet-select-wrapper" }, this.placeholder && this.echoPlaceholder && this.value && (h("duet-caption", { key: '23162d30208c2d796aa9c73e27dff8ae7283ddc9', id: this.topCaptionPlaceholderId, class: "duet-select-placeholder", size: "small" }, this.placeholder)), h("slot", { key: '4d8a7e7b45af1f531c1bf480900b968710164d61' }), h("select", { key: '3d1872bdda77b4ae6bbeb8e5c4cfbed5fd948984', ref: select => (this.nativeSelect = select), disabled: this.disabled, name: this.name, id: identifier, role: this.role, "aria-labelledby": this.labelId, "aria-describedby": this.getDescribedBy(), "aria-controls": this.accessibleControls, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, onFocus: this.onFocus, onBlur: this.onBlur, onChange: this.onChange, required: this.required }, this.placeholder && (h("option", { key: 'c96408935af3a8a0c15a8a7d64522223d6fd2ad4', disabled: true, selected: true, value: "" }, this.placeholder)), !this.processedItems ? (h("option", null, "Virhe valintoja ladattaessa. P\u00E4ivit\u00E4 sivu ja kokeile uusiksi.")) : (this.processedItems.map(item => {
             return isOptionGroup(item) ? this.renderOptionGroup(item) : this.renderOption(item);
-        }))), h("div", { key: 'd6c94ad90d42bd4cd48ee1b71cd519039ccf820d', class: {
+        }))), h("div", { key: '4c35a18c52b39d00e9849157505c5a341e1728fb', class: {
                 "duet-select": true,
                 [`duet-select-variation-${this.variation}`]: true,
-            }, "aria-hidden": "true" }, h("span", { key: this.value, class: "duet-select-selected-value" }, this.getSelectedItemLabel()), (this.variation === "default" && (h("svg", { key: '72989e90419aa12dcd0d99777e339fc6bb2bef5a', role: "img", class: "duet-select-icon", fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '34704b7bd82d187c493f09178919599e43462623', d: "m12 18.999c-.4 0-.776-.156-1.059-.438l-10.721-10.72c-.142-.142-.22-.33-.22-.531 0-.2.078-.389.22-.53.142-.142.33-.22.53-.22s.389.078.53.22l10.72 10.719 10.72-10.719c.142-.142.33-.22.53-.22s.389.078.53.22c.142.142.22.33.22.53s-.078.389-.22.53l-10.72 10.72c-.282.283-.659.439-1.06.439z" })))) || (h("duet-icon", { key: '4ef38c6f98d6dedb19ad04aa03680a8d99501a3a', theme: this.theme, name: "action-arrow-down-small", color: "currentColor", margin: "none", size: this.variation === "compact" ? "xxx-small" : "xx-small" }))), h("span", { key: '6bc9fe41f6e5aa9675e48237fde023c23f63b308', class: "duet-keep-container-height", role: "presention", "aria-hidden": "true" }, "_")), h("span", { key: 'd118ae5b26e0fd90fe265c45daf4240f3901640d', class: "duet-select-help", id: this.errorId, "aria-live": this.accessibleLiveError, "aria-atomic": "true", "aria-relevant": "additions removals" }, this.error && h("span", { key: '0a66ce81164743ccb5f7f9121194795d15bb3ab0' }, this.error)))));
+            }, "aria-hidden": "true" }, h("span", { key: this.value, class: "duet-select-selected-value" }, this.getSelectedItemLabel()), (this.variation === "default" && (h("svg", { key: 'b1608eea861d21ea9e65e89816a4bb29c52b1dcc', role: "img", class: "duet-select-icon", fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'dcb0a90b38bbf50e9ccc7d8ddc14978e01b9b6cf', d: "m12 18.999c-.4 0-.776-.156-1.059-.438l-10.721-10.72c-.142-.142-.22-.33-.22-.531 0-.2.078-.389.22-.53.142-.142.33-.22.53-.22s.389.078.53.22l10.72 10.719 10.72-10.719c.142-.142.33-.22.53-.22s.389.078.53.22c.142.142.22.33.22.53s-.078.389-.22.53l-10.72 10.72c-.282.283-.659.439-1.06.439z" })))) || (h("duet-icon", { key: 'b74526db5d38d6438243fcb3ac0e000d89b78ac5', theme: this.theme, name: "action-arrow-down-small", color: "currentColor", margin: "none", size: this.variation === "compact" ? "xxx-small" : "xx-small" }))), h("span", { key: '12e5377efe8653565683e393dc597529252ff4e4', class: "duet-keep-container-height", role: "presention", "aria-hidden": "true" }, "_")), h("span", { key: 'c758bd5511e976f7840975da7a433f38df58d1e5', class: "duet-select-help", id: this.errorId, "aria-live": this.accessibleLiveError, "aria-atomic": "true", "aria-relevant": "additions removals" }, this.error && h("span", { key: 'cda12dbcc6da097138cf2a00317ef19b442bf63f', class: "duet-select-error" }, this.error)))));
     }
     static get is() { return "duet-select"; }
     static get encapsulation() { return "shadow"; }
@@ -185,6 +231,7 @@ export class DuetSelect {
         return {
             "variation": {
                 "type": "string",
+                "attribute": "variation",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetSelectVariation",
@@ -205,12 +252,12 @@ export class DuetSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "variation",
                 "reflect": false,
                 "defaultValue": "\"default\""
             },
             "accessibleActiveDescendant": {
                 "type": "string",
+                "attribute": "accessible-active-descendant",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -225,11 +272,11 @@ export class DuetSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-active-descendant",
                 "reflect": false
             },
             "accessibleDescribedBy": {
                 "type": "string",
+                "attribute": "accessible-described-by",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -244,11 +291,11 @@ export class DuetSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-described-by",
                 "reflect": false
             },
             "margin": {
                 "type": "string",
+                "attribute": "margin",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetMargin",
@@ -269,12 +316,12 @@ export class DuetSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "margin",
                 "reflect": false,
                 "defaultValue": "\"auto\""
             },
             "accessibleControls": {
                 "type": "string",
+                "attribute": "accessible-controls",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -289,11 +336,11 @@ export class DuetSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-controls",
                 "reflect": false
             },
             "accessibleOwns": {
                 "type": "string",
+                "attribute": "accessible-owns",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -308,11 +355,11 @@ export class DuetSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-owns",
                 "reflect": false
             },
             "error": {
                 "type": "string",
+                "attribute": "error",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -327,12 +374,12 @@ export class DuetSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "error",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "\"\""
             },
             "accessibleLiveError": {
                 "type": "string",
+                "attribute": "accessible-live-error",
                 "mutable": false,
                 "complexType": {
                     "original": "\"off\" | \"polite\" | \"assertive\"",
@@ -347,12 +394,12 @@ export class DuetSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-live-error",
                 "reflect": false,
                 "defaultValue": "\"polite\""
             },
             "expand": {
                 "type": "boolean",
+                "attribute": "expand",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -367,12 +414,12 @@ export class DuetSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "expand",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "value": {
                 "type": "string",
+                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -387,11 +434,11 @@ export class DuetSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "value",
                 "reflect": true
             },
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -412,12 +459,12 @@ export class DuetSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "labelHidden": {
                 "type": "boolean",
+                "attribute": "label-hidden",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -432,12 +479,12 @@ export class DuetSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label-hidden",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "identifier": {
                 "type": "string",
+                "attribute": "identifier",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -452,11 +499,11 @@ export class DuetSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "identifier",
                 "reflect": false
             },
             "name": {
                 "type": "string",
+                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -471,11 +518,11 @@ export class DuetSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "name",
                 "reflect": false
             },
             "placeholder": {
                 "type": "string",
+                "attribute": "placeholder",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -490,12 +537,12 @@ export class DuetSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "placeholder",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "caption": {
                 "type": "string",
+                "attribute": "caption",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -510,11 +557,11 @@ export class DuetSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "caption",
                 "reflect": false
             },
             "echoPlaceholder": {
                 "type": "boolean",
+                "attribute": "echo-placeholder",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -529,12 +576,12 @@ export class DuetSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "echo-placeholder",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "items": {
                 "type": "string",
+                "attribute": "items",
                 "mutable": false,
                 "complexType": {
                     "original": "string | DuetSelectItems",
@@ -555,11 +602,11 @@ export class DuetSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "items",
                 "reflect": false
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -574,12 +621,12 @@ export class DuetSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "required": {
                 "type": "boolean",
+                "attribute": "required",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -594,12 +641,12 @@ export class DuetSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "required",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -614,12 +661,12 @@ export class DuetSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label",
                 "reflect": false,
                 "defaultValue": "\"label\""
             },
             "labelColor": {
                 "type": "string",
+                "attribute": "label-color",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -634,11 +681,11 @@ export class DuetSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label-color",
                 "reflect": false
             },
             "labelWeight": {
                 "type": "string",
+                "attribute": "label-weight",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTextFontWeight",
@@ -659,11 +706,11 @@ export class DuetSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label-weight",
                 "reflect": false
             },
             "role": {
                 "type": "string",
+                "attribute": "role",
                 "mutable": false,
                 "complexType": {
                     "original": "string | null",
@@ -678,11 +725,11 @@ export class DuetSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "role",
                 "reflect": false
             },
             "tooltip": {
                 "type": "string",
+                "attribute": "tooltip",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -697,12 +744,12 @@ export class DuetSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "tooltip",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "tooltipDirection": {
                 "type": "string",
+                "attribute": "tooltip-direction",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetTooltipDirection",
@@ -723,7 +770,6 @@ export class DuetSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "tooltip-direction",
                 "reflect": false,
                 "defaultValue": "\"auto\""
             }

package/lib/collection/components/duet-shaped-image/duet-shaped-image.css

@@ -4,22 +4,22 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
 }
 
 :host {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
   display: inline-block;
   width: 100%;
   height: 100%;
@@ -62,11 +62,11 @@
 }
 
 :host(.duet-theme-turva) .shaped-image .shaped-image-mask {
-  transform: none;
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20fill%3D%22currentColor%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20140%22%3E%3Cpath%20d%3D%22M87.8%20139.6a57.3%2057.3%200%2000-18.4-3.3c-8-.5-16.3-2.5-24.6-6-16.7-7-29-18.7-37.1-35.3a73.5%2073.5%200%2001-5-52.4c1.7-4%203-6.7%204-7.8a33%2033%200%20004-7.8C33.4%203.5%2063.2-4.3%20100%203.2c30.5%204%2049.7%2019.9%2057.6%2047.4l1.6%2024c4.4%2036-11.5%2056-47.5%2060.3-4%202.4-12%203.9-24%204.7%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E");
-  -webkit-mask-repeat: no-repeat;
   mask-image: url("data:image/svg+xml,%3Csvg%20fill%3D%22currentColor%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20140%22%3E%3Cpath%20d%3D%22M87.8%20139.6a57.3%2057.3%200%2000-18.4-3.3c-8-.5-16.3-2.5-24.6-6-16.7-7-29-18.7-37.1-35.3a73.5%2073.5%200%2001-5-52.4c1.7-4%203-6.7%204-7.8a33%2033%200%20004-7.8C33.4%203.5%2063.2-4.3%20100%203.2c30.5%204%2049.7%2019.9%2057.6%2047.4l1.6%2024c4.4%2036-11.5%2056-47.5%2060.3-4%202.4-12%203.9-24%204.7%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E");
+  -webkit-mask-repeat: no-repeat;
   mask-repeat: no-repeat;
+  transform: none;
 }
 :host(.duet-theme-turva) .shaped-image .shaped-image-mask .shaped-image-img {
   transform: none;

package/lib/collection/components/duet-shaped-image/duet-shaped-image.js

@@ -5,10 +5,18 @@ import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 export class DuetShapedImage {
     constructor() {
+        /**
+         * Theme of the component.
+         */
         this.theme = "";
-        this.accessibleLabel = undefined;
+        /**
+         * Controls the margin of the component.
+         */
         this.margin = "auto";
-        this.src = undefined;
+        /**
+         * Rotation. Note: in 'turva' theme there's no rotation.
+         * @default "7"
+         */
         this.rotation = 7;
     }
     /**
@@ -25,9 +33,9 @@ export class DuetShapedImage {
         const style = {
             "--rotation": `${this.rotation}deg`,
         };
-        return (h(Host, { key: '5522041ea6be717a1e51746d39c5538aad516960', class: { "duet-theme-turva": this.theme === "turva", "duet-m-0": this.margin === "none" } }, h("span", { key: '79a8effca6e0f6e4412eb33ce2be7c4755816062', class: {
+        return (h(Host, { key: '27f36b3527731cc1d47a65655e150c963b9a23d9', class: { "duet-theme-turva": this.theme === "turva", "duet-m-0": this.margin === "none" } }, h("span", { key: 'b3d7bf5649da0a77e9bee42baab54840e47f9505', class: {
                 "shaped-image": true,
-            }, role: "img", "aria-label": this.accessibleLabel, style: style }, h("span", { key: '854f93ef8bb874859644425e1b409f1160d2fd65', class: "shaped-image-mask", role: "presentation" }, h("span", { key: 'df7a769d6c82ef9e2a169800079c0d6e20ffde78', class: "shaped-image-img", role: "presentation", style: { backgroundImage: `url("${this.src}")` } })))));
+            }, role: "img", "aria-label": this.accessibleLabel, style: style }, h("span", { key: '84fe60ad6ee4fdcc2544b07c5c07a214cf5efb15', class: "shaped-image-mask", role: "presentation" }, h("span", { key: 'edb1df30260d26bb87ef59a97aa031c97e4dce6d', class: "shaped-image-img", role: "presentation", style: { backgroundImage: `url("${this.src}")` } })))));
     }
     static get is() { return "duet-shaped-image"; }
     static get encapsulation() { return "shadow"; }
@@ -45,6 +53,7 @@ export class DuetShapedImage {
         return {
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -65,12 +74,12 @@ export class DuetShapedImage {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "accessibleLabel": {
                 "type": "string",
+                "attribute": "accessible-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -85,11 +94,11 @@ export class DuetShapedImage {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-label",
                 "reflect": false
             },
             "margin": {
                 "type": "string",
+                "attribute": "margin",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetMargin",
@@ -110,12 +119,12 @@ export class DuetShapedImage {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "margin",
                 "reflect": false,
                 "defaultValue": "\"auto\""
             },
             "src": {
                 "type": "string",
+                "attribute": "src",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -130,11 +139,11 @@ export class DuetShapedImage {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "src",
                 "reflect": false
             },
             "rotation": {
                 "type": "number",
+                "attribute": "rotation",
                 "mutable": false,
                 "complexType": {
                     "original": "7 | -7",
@@ -152,7 +161,6 @@ export class DuetShapedImage {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "rotation",
                 "reflect": false,
                 "defaultValue": "7"
             }