@duetds/components 10.0.0-alpha.2 → 10.0.0-alpha.20

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

@@ -11,6 +11,65 @@ export class DuetChoiceGroup {
     constructor() {
         this.choiceGroupName = "duet-choice-group";
         this.choices = new Set();
+        /**
+         * Direction of the choice group.
+         */
+        this.direction = "vertical";
+        /**
+         * Controls the margin of the component.
+         */
+        this.margin = "auto";
+        /**
+         * Theme of the choice group.
+         */
+        this.theme = "";
+        /**
+         * Display choice group in error state along with an error message.
+         */
+        this.error = "";
+        /**
+         * Legend displayed for the choice buttons in this group.
+         */
+        this.label = "Label";
+        /**
+         * Visually hide the label, but still show it to screen readers.
+         */
+        this.labelHidden = false;
+        /**
+         * Additional caption to show inside the label of the choice group.
+         */
+        this.caption = undefined;
+        /**
+         * Tooltip to display next to the label of the choice group.
+         */
+        this.tooltip = undefined;
+        /**
+         * With direction setting you can force the tooltip to always open towards left
+         * or right instead of automatically determining the direction.
+         */
+        this.tooltipDirection = "auto";
+        /**
+         * Enable or disable the automatic responsive behaviour of the choice group
+         * component when horizontal setting is used. Setting this option to "true"
+         * makes sure that contents are stacked vertically on mobile.
+         */
+        this.responsive = false;
+        /**
+         * Switch the breakpoint used to trigger the content stacking. These match to
+         * similar media query tokens eg.: $media-query-small, $media-query-medium.
+         */
+        this.breakpoint = "small";
+        /**
+         * Sets whether making a choice is required or optional. Will set contained choices to required as well.
+         */
+        this.required = false;
+        /**
+         * 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";
         /**
          * Component event handling.
          */
@@ -35,22 +94,6 @@ export class DuetChoiceGroup {
             this.choices.delete(choice);
             this.updateChoices();
         };
-        this.direction = "vertical";
-        this.margin = "auto";
-        this.theme = "";
-        this.error = "";
-        this.name = undefined;
-        this.label = "Label";
-        this.labelHidden = false;
-        this.caption = undefined;
-        this.tooltip = undefined;
-        this.tooltipDirection = "auto";
-        this.responsive = false;
-        this.breakpoint = "small";
-        this.value = undefined;
-        this.disabled = undefined;
-        this.required = false;
-        this.accessibleLiveError = "polite";
     }
     /**
      * Component lifecycle events.
@@ -125,14 +168,14 @@ export class DuetChoiceGroup {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '0f05e4491b0ed604ed36ad5a20755a183f219e61', onDuetChange: this.onSelect, onDuetChoiceReady: this.onChoiceReady, onDuetChoiceRemove: this.onChoiceRemove, class: {
+        return (h(Host, { key: '967a67b10f45d108c5d7eb2d2ff250a4396695fd', onDuetChange: this.onSelect, onDuetChoiceReady: this.onChoiceReady, onDuetChoiceRemove: this.onChoiceRemove, class: {
                 horizontal: this.direction === "horizontal",
                 "duet-choice-group-breakpoint-x-small": this.responsive && this.breakpoint === "x-small",
                 "duet-choice-group-breakpoint-small": this.responsive && this.breakpoint === "small",
                 "duet-choice-group-breakpoint-medium": this.responsive && this.breakpoint === "medium",
                 "duet-choice-group-breakpoint-large": this.responsive && this.breakpoint === "large",
                 "duet-choice-group-breakpoint-x-large": this.responsive && this.breakpoint === "x-large",
-            } }, h("duet-fieldset", { key: 'c6b16eb32fa18224f1fca5450a1a00609ee0800c', label: this.label, labelHidden: this.labelHidden, compactLabel: true, caption: this.caption, error: this.error, margin: this.margin, theme: this.theme, "accessible-live-error": this.accessibleLiveError }, this.tooltip && (h("duet-tooltip", { key: '23ea892920b10486ec2ff7dc5c6893d4f4b58028', slot: "tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), h("slot", { key: '6f067a2d955d9a60728e5f8746650480d5719491', name: "tooltip" }), h("div", { key: 'e3bfaa0355f3eb50844f4e5a47dc02d0816380e2', class: { [this.choiceGroupName]: true, "duet-no-stacking": !this.responsive } }, h("slot", { key: '8af6ad42073f04162bf0f7482e9987e1f386e7b5' })))));
+            } }, h("duet-fieldset", { key: '6f58bf64cc5ca2326e2595305e24f9932846c4a1', label: this.label, labelHidden: this.labelHidden, compactLabel: true, caption: this.caption, error: this.error, margin: this.margin, theme: this.theme, "accessible-live-error": this.accessibleLiveError }, this.tooltip && (h("duet-tooltip", { key: 'b4ea4ca439481dac9f3f771f440a95b8786ec5da', slot: "tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), h("slot", { key: '150cf49e738b7c3ea6af895e7de008ef4a4ad03e', name: "tooltip" }), h("div", { key: 'a15d6d6ce5d5a8fa87af640b53e7ee614177065f', class: { [this.choiceGroupName]: true, "duet-no-stacking": !this.responsive } }, h("slot", { key: '93df359f90c758766148ec0ca19a2f497cfd1c56' })))));
     }
     static get is() { return "duet-choice-group"; }
     static get encapsulation() { return "shadow"; }
@@ -150,6 +193,7 @@ export class DuetChoiceGroup {
         return {
             "direction": {
                 "type": "string",
+                "attribute": "direction",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetDirection",
@@ -170,12 +214,12 @@ export class DuetChoiceGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "direction",
                 "reflect": false,
                 "defaultValue": "\"vertical\""
             },
             "margin": {
                 "type": "string",
+                "attribute": "margin",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetMargin",
@@ -196,12 +240,12 @@ export class DuetChoiceGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "margin",
                 "reflect": false,
                 "defaultValue": "\"auto\""
             },
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -222,12 +266,12 @@ export class DuetChoiceGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "error": {
                 "type": "string",
+                "attribute": "error",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -242,12 +286,12 @@ export class DuetChoiceGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "error",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "name": {
                 "type": "string",
+                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -262,11 +306,11 @@ export class DuetChoiceGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "name",
                 "reflect": false
             },
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -281,12 +325,12 @@ export class DuetChoiceGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label",
                 "reflect": false,
                 "defaultValue": "\"Label\""
             },
             "labelHidden": {
                 "type": "boolean",
+                "attribute": "label-hidden",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -301,12 +345,12 @@ export class DuetChoiceGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label-hidden",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "caption": {
                 "type": "string",
+                "attribute": "caption",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -321,12 +365,12 @@ export class DuetChoiceGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "caption",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "tooltip": {
                 "type": "string",
+                "attribute": "tooltip",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -341,12 +385,12 @@ export class DuetChoiceGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "tooltip",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "tooltipDirection": {
                 "type": "string",
+                "attribute": "tooltip-direction",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetTooltipDirection",
@@ -367,12 +411,12 @@ export class DuetChoiceGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "tooltip-direction",
                 "reflect": false,
                 "defaultValue": "\"auto\""
             },
             "responsive": {
                 "type": "boolean",
+                "attribute": "responsive",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -387,12 +431,12 @@ export class DuetChoiceGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "responsive",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "breakpoint": {
                 "type": "string",
+                "attribute": "breakpoint",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetChoiceGroupBreakpoint",
@@ -413,12 +457,12 @@ export class DuetChoiceGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "breakpoint",
                 "reflect": false,
                 "defaultValue": "\"small\""
             },
             "value": {
                 "type": "string",
+                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -433,11 +477,11 @@ export class DuetChoiceGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "value",
                 "reflect": true
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -452,11 +496,11 @@ export class DuetChoiceGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": false
             },
             "required": {
                 "type": "boolean",
+                "attribute": "required",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -471,12 +515,12 @@ export class DuetChoiceGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "required",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "accessibleLiveError": {
                 "type": "string",
+                "attribute": "accessible-live-error",
                 "mutable": false,
                 "complexType": {
                     "original": "\"off\" | \"polite\" | \"assertive\"",
@@ -491,7 +535,6 @@ export class DuetChoiceGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-live-error",
                 "reflect": false,
                 "defaultValue": "\"polite\""
             }

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

@@ -72,7 +72,7 @@
   -webkit-user-select: none;
   user-select: none;
   display: flex;
-  align-items: center;
+  flex-direction: column;
   font-family: "localtapiola-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-size: 1rem;
   font-weight: 600;
@@ -88,6 +88,9 @@
 .duet-collapsible-heading.duet-collapsible-heading-centered {
   margin: auto;
 }
+.duet-collapsible-heading.duet-collapsible-heading-centered .duet-collapsible-heading-caption {
+  margin-inline: auto;
+}
 .duet-collapsible-heading.duet-collapsible-normal-weight {
   font-weight: 400;
 }
@@ -104,6 +107,19 @@
 .duet-collapsible-heading.has-after-heading .duet-collapsible-heading-content + div.float-right {
   margin-left: auto;
 }
+.duet-collapsible-heading.has-caption {
+  gap: 4px;
+}
+.duet-collapsible-heading.has-caption .duet-collapsible-heading-caption {
+  margin-left: 18px;
+  font-weight: inherit;
+}
+.duet-collapsible-heading .duet-collapsible-heading-wrapper {
+  display: flex;
+  align-items: center;
+  width: inherit;
+  margin: inherit;
+}
 .duet-collapsible-heading:focus {
   outline: 0;
 }

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

@@ -18,6 +18,62 @@ import { sanitizeString } from "../../utils/string-utils";
 export class DuetCollapsible {
     constructor() {
         this.id = createID("DuetCollapsible");
+        /**
+         * Theme of the collapsible.
+         */
+        this.theme = "";
+        /**
+         * Negative variation for collapsible on dark background
+         */
+        this.negative = false;
+        /**
+         * The content for the collapsible heading.
+         */
+        this.heading = "";
+        /**
+         * The caption text to display below the heading.
+         */
+        this.caption = "";
+        /**
+         * Makes collapsible heading full width
+         */
+        this.headingFullWidth = false;
+        /**
+         * Centers heading inside its container
+         */
+        this.centerHeading = false;
+        /**
+         * The font weight of the heading
+         */
+        this.headingWeight = "semibold";
+        /**
+         * Custom headingSize to be used for font size of heading, as a design token entered
+         * in kebab-case x-small -> font-size-x-small.
+         * Example:
+         * # 12px (0.75rem)  ------  +2px   (x-small)
+         * # 14px (0.875rem) ------  +2px   (small)
+         * # 16px (1rem)     ------  +2px   (medium)
+         * # 20px (1.25rem)  ------  +4px   (large)
+         * # 24px (1.5rem)   ------  +4px   (x-large)
+         * # 36px (2.25rem)  ------  +12px  (xx-large)
+         * # 48px (3rem)     ------  +12px  (xxx-large)
+         * # 72px (4.5rem)   ------  +24px  (xxxx-large)
+         */
+        this.headingSize = undefined;
+        /**
+         * The actual heading level used for the heading in html markup. This setting
+         * exists for accessibility reasons. It doesn’t change the style visually.
+         * only variations of h1-h6 area accepted
+         */
+        this.headingLevel = undefined;
+        /**
+         * Controls the margin of the component.
+         */
+        this.margin = "auto";
+        /**
+         * Is the component expanded or collapsed.
+         */
+        this.open = false;
         this.handleKeyDown = (e) => {
             if (isKeyboardClick(e)) {
                 this.handleClick(e);
@@ -56,6 +112,15 @@ export class DuetCollapsible {
                     return "xx-small";
             }
         };
+        this.getAccessibleLabel = () => {
+            if (this.accessibleLabel) {
+                return this.accessibleLabel;
+            }
+            if (this.heading && this.caption) {
+                return `${this.heading}. ${this.caption}`;
+            }
+            return this.heading || null;
+        };
         this.handleClick = (e) => {
             e.preventDefault();
             this.open = !this.open;
@@ -64,17 +129,6 @@ export class DuetCollapsible {
                 originalEvent: e,
             });
         };
-        this.theme = "";
-        this.negative = false;
-        this.accessibleLabel = undefined;
-        this.heading = "";
-        this.headingFullWidth = false;
-        this.centerHeading = false;
-        this.headingWeight = "semibold";
-        this.headingSize = undefined;
-        this.headingLevel = undefined;
-        this.margin = "auto";
-        this.open = false;
     }
     /**
      * Component lifecycle events.
@@ -105,14 +159,15 @@ export class DuetCollapsible {
      */
     render() {
         const HeadingTagName = this.headingLevel ? sanitizeString(this.headingLevel) : "div";
-        return (h(Host, { key: 'e75871cb9a6fd0f3050c22c4ac9059c8daa8c2ca', class: { "duet-m-0": this.margin === "none", negative: this.negative } }, h(HeadingTagName, { key: '4b9571caa365df133f607952f427d5f2662a61d6' }, h("button", { key: '29f111d38aeac967f9ef9e2696fe0da79b07210c', class: {
+        return (h(Host, { key: 'fe41abfdb21abc1fcd1f6d532cb59f60597ad22a', class: { "duet-m-0": this.margin === "none", negative: this.negative } }, h(HeadingTagName, { key: '71f1cb941dc0d4a002b653f46ae68de6f9136e9f' }, h("button", { key: 'c23e1f918a796a183d3b4541980bfe4d57e03fc9', class: {
                 "duet-collapsible-heading": true,
                 "duet-collapsible-heading-centered": this.centerHeading,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-collapsible-normal-weight": this.headingWeight === "normal",
                 "has-after-heading": this.hasAfterHeading,
                 "full-width": this.headingFullWidth,
-            }, style: { "font-size": this.getFontSizeFromTokens() }, role: "button", ref: button => (this.nativeButton = button), "aria-label": this.accessibleLabel, "aria-expanded": this.open ? "true" : "false", "aria-controls": this.id, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("div", { key: 'f22a73bf54b611968e8e9ecfac22c4a5d912942a', class: "duet-collapsible-heading-icon" }, h("duet-icon", { key: '3f1706b22520ee9e1856ba3d9bd8f4e04a026e20', margin: "none", size: this.getEquivalentIconSize(), icon: icon.svg })), h("div", { key: '88b89faf977d753d6d53f838d986b6ec567ed8e3', class: "duet-collapsible-heading-content", part: "duet-collapsible-heading-content" }, this.heading), this.hasAfterHeading && (h("div", { key: '97304f5806f809b1d7e86306b60901ce96df2f8e', part: "duet-collapsible-after-heading" }, h("slot", { key: '0d37e9e85c477aa0f4b3f0f9b7209b429c917bd6', name: "after-heading" }))))), h("div", { key: 'cc27c3dca50171f016f3a0991a67f07334223f9b', id: this.id, class: { "duet-collapsible-content": true, "duet-theme-turva": this.theme === "turva" }, part: "duet-collapsible-content" }, h("slot", { key: 'b17cc5907e981ea030f3a070e6cad046e15af55c' }))));
+                "has-caption": !!this.caption,
+            }, style: { "font-size": this.getFontSizeFromTokens() }, role: "button", ref: button => (this.nativeButton = button), "aria-label": this.getAccessibleLabel(), "aria-expanded": this.open ? "true" : "false", "aria-controls": this.id, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("div", { key: '1b7f11bcbb1e9894806433465088b4fa9cfe0df9', class: "duet-collapsible-heading-wrapper" }, h("div", { key: '2ebe50f38af8326dff42b2698c2156e602a13e31', class: "duet-collapsible-heading-icon" }, h("duet-icon", { key: '8083a2ce335a218c7812efb574d8c780af69434e', margin: "none", size: this.getEquivalentIconSize(), icon: icon.svg })), h("div", { key: '89e5be1c98ec483d8a16944495f6b2d31bb97e66', class: "duet-collapsible-heading-content", part: "duet-collapsible-heading-content" }, this.heading), this.hasAfterHeading && (h("div", { key: '9ac908e2b7b01c61cf27fd1a10217170f758f0b9', part: "duet-collapsible-after-heading" }, h("slot", { key: '47c4f5bf5e48daf1103cfe2de5ebeaa167ec0a3b', name: "after-heading" })))), this.caption && (h("div", { key: '9a861895709d834c561698d78c638fdc654966d0', class: "duet-collapsible-heading-caption" }, h("duet-caption", { key: '9c0ab5adc56725d54f348289ac8ce26015fb8d5b', size: "small", margin: "none" }, this.caption))))), h("div", { key: 'aee2caf89e030e0e83b7b261b9d78b0e42a8a52d', id: this.id, class: { "duet-collapsible-content": true, "duet-theme-turva": this.theme === "turva" }, part: "duet-collapsible-content" }, h("slot", { key: '654bc193c93877733e95bb3bdfb0ddf86acbcd22' }))));
     }
     static get is() { return "duet-collapsible"; }
     static get encapsulation() { return "shadow"; }
@@ -130,6 +185,7 @@ export class DuetCollapsible {
         return {
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -150,12 +206,12 @@ export class DuetCollapsible {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "negative": {
                 "type": "boolean",
+                "attribute": "negative",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -170,12 +226,12 @@ export class DuetCollapsible {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "negative",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "accessibleLabel": {
                 "type": "string",
+                "attribute": "accessible-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -190,11 +246,11 @@ export class DuetCollapsible {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-label",
                 "reflect": false
             },
             "heading": {
                 "type": "string",
+                "attribute": "heading",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -209,12 +265,32 @@ export class DuetCollapsible {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "heading",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "caption": {
+                "type": "string",
+                "attribute": "caption",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The caption text to display below the heading."
+                },
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "headingFullWidth": {
                 "type": "boolean",
+                "attribute": "heading-full-width",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -229,12 +305,12 @@ export class DuetCollapsible {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "heading-full-width",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "centerHeading": {
                 "type": "boolean",
+                "attribute": "center-heading",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -249,12 +325,12 @@ export class DuetCollapsible {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "center-heading",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "headingWeight": {
                 "type": "string",
+                "attribute": "heading-weight",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetCollapsibleWeight",
@@ -275,12 +351,12 @@ export class DuetCollapsible {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "heading-weight",
                 "reflect": false,
                 "defaultValue": "\"semibold\""
             },
             "headingSize": {
                 "type": "string",
+                "attribute": "heading-size",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetCollapsibleHeadingFontSize",
@@ -301,12 +377,12 @@ export class DuetCollapsible {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "heading-size",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "headingLevel": {
                 "type": "string",
+                "attribute": "heading-level",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetHeadingLevel | undefined",
@@ -327,12 +403,12 @@ export class DuetCollapsible {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "heading-level",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "margin": {
                 "type": "string",
+                "attribute": "margin",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetMargin",
@@ -353,12 +429,12 @@ export class DuetCollapsible {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "margin",
                 "reflect": false,
                 "defaultValue": "\"auto\""
             },
             "open": {
                 "type": "boolean",
+                "attribute": "open",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -373,7 +449,6 @@ export class DuetCollapsible {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "open",
                 "reflect": true,
                 "defaultValue": "false"
             }