@duetds/components 10.0.0-alpha.3 → 10.0.0-alpha.30

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

@@ -7,17 +7,74 @@ import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
 import { createID } from "../../utils/create-id";
 import { isKeyboardClick, subscribeTabbingChange, unsubscribeTabbingChange } from "../../utils/keyboard-utils";
-import { hasSlot } from "../../utils/slot-utils";
+import { checkNamedSlotElement, getSlotTextContent, hasSlot } from "../../utils/slot-utils";
 import { sanitizeString } from "../../utils/string-utils";
 /**
  * @part duet-collapsible-heading-content - piercing selector for styling the heading content
  * @part duet-collapsible-after-heading - piercing selector for styling the after heading
  * @part duet-collapsible-content - piercing selector for styling the content
  * @slot after-heading - Content after the heading can be for example badges.
+ * @slot heading - Instead of using heading property you can also use a native h1..h6 heading. Do not use a duet-heading here.
  */
 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 +113,25 @@ export class DuetCollapsible {
                     return "xx-small";
             }
         };
+        this.getAccessibleLabel = () => {
+            if (this.accessibleLabel) {
+                return this.accessibleLabel;
+            }
+            const labelParts = [];
+            if (this.heading) {
+                labelParts.push(this.heading);
+            }
+            else if (this.hasHeadingSlot) {
+                labelParts.push(getSlotTextContent(this.element, "heading"));
+            }
+            if (this.hasAfterHeadingSlot) {
+                labelParts.push(getSlotTextContent(this.element, "after-heading"));
+            }
+            if (this.caption) {
+                labelParts.push(this.caption);
+            }
+            return labelParts.join(". ");
+        };
         this.handleClick = (e) => {
             e.preventDefault();
             this.open = !this.open;
@@ -64,24 +140,15 @@ 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.
      */
     componentWillLoad() {
         inheritGlobalTheme(this);
-        this.hasAfterHeading = hasSlot(this.element, "after-heading");
+        this.hasAfterHeadingSlot = hasSlot(this.element, "after-heading");
+        this.hasHeadingSlot = hasSlot(this.element, "heading");
+        checkNamedSlotElement(this.element, "heading", "h1, h2, h3, h4, h5, h6");
     }
     connectedCallback() {
         subscribeTabbingChange(this);
@@ -104,15 +171,16 @@ export class DuetCollapsible {
      * Always the last one in the class.
      */
     render() {
-        const HeadingTagName = this.headingLevel ? sanitizeString(this.headingLevel) : "div";
-        return (h(Host, { key: '41f36dde4e54009a1eb69c87caa20fe7174f54aa', class: { "duet-m-0": this.margin === "none", negative: this.negative } }, h(HeadingTagName, { key: '2dfbc738dabf00e09f0dc410f340a2c149616e23' }, h("button", { key: '9cdec6df9a1ad914a9b1f7add28b4327a40026ea', class: {
+        const HeadingTagName = this.headingLevel && !this.hasHeadingSlot ? sanitizeString(this.headingLevel) : "div";
+        return (h(Host, { key: '9bcf97fc89fd369b94d23c5b831bea13eac20b7d', class: { "duet-m-0": this.margin === "none", negative: this.negative } }, h(HeadingTagName, { key: '527383f38812e7513a28076931168ef39c03064c' }, h("button", { key: '551c207fbf0854a42586047cf5b268ed2f94f5f8', 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,
+                "has-after-heading": this.hasAfterHeadingSlot,
                 "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: '20969919d9bacce2a30a27f6b174a0d34ed2f87a', class: "duet-collapsible-heading-icon" }, h("duet-icon", { key: '8b1ce16944925dcbe76add2736fb4a9c2c4d8143', margin: "none", size: this.getEquivalentIconSize(), icon: icon.svg })), h("div", { key: 'ae5481e1aa50ea5752835acca560509f9e1ef31b', class: "duet-collapsible-heading-content", part: "duet-collapsible-heading-content" }, this.heading), this.hasAfterHeading && (h("div", { key: '495b61f0b3f7d484f7af56bd8cde74b0fe6ae6b4', part: "duet-collapsible-after-heading" }, h("slot", { key: 'c95c048eba7d76b176a734ce678f9a26e124b495', name: "after-heading" }))))), h("div", { key: '291f50f458f1951bb540412845f77c3034969d7d', id: this.id, class: { "duet-collapsible-content": true, "duet-theme-turva": this.theme === "turva" }, part: "duet-collapsible-content" }, h("slot", { key: '2b23d5343903b1fdb4e8977c1c6a1ab373928fe4' }))));
+                "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: '4aad2e89f69b6fed07e44a09c3241613123b3342', class: "duet-collapsible-heading-wrapper" }, h("div", { key: '7abe552666752e707bf9f04110e2d6c583c7e347', class: "duet-collapsible-heading-icon" }, h("duet-icon", { key: 'f2a581dd211e3ebd464489804ec1aa3ffa8b2150', margin: "none", size: this.getEquivalentIconSize(), icon: icon.svg })), h("div", { key: '032bd7dc645014356c7358e9b44f99deb0251720', class: "duet-collapsible-heading-content", part: "duet-collapsible-heading-content" }, this.heading ? this.heading : h("slot", { name: "heading" })), this.hasAfterHeadingSlot && (h("div", { key: 'e19dbc0d389446ee8896f91a8586ff698ef229ad', part: "duet-collapsible-after-heading" }, h("slot", { key: '63677c9042bfd7ed63e90dee05ee6c272be0e302', name: "after-heading" })))), this.caption && (h("div", { key: 'f7ec83268e2209b3aee51e2b2a6178374142f1aa', class: "duet-collapsible-heading-caption" }, h("duet-caption", { key: 'c019c4f61a1cf0cfb85ad80de67f2f9edf384663', size: "small", margin: "none" }, this.caption))))), h("div", { key: '4e3dcc1b56589d71d04c0a4d8be5b879ae847ad4', id: this.id, class: { "duet-collapsible-content": true, "duet-theme-turva": this.theme === "turva" }, part: "duet-collapsible-content" }, h("slot", { key: '87eedca46d5d29fb19442138b1aa523f82e1029a' }))));
     }
     static get is() { return "duet-collapsible"; }
     static get encapsulation() { return "shadow"; }
@@ -130,6 +198,7 @@ export class DuetCollapsible {
         return {
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -150,12 +219,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 +239,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 +259,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 +278,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 +318,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 +338,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 +364,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 +390,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 +416,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 +442,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 +462,6 @@ export class DuetCollapsible {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "open",
                 "reflect": true,
                 "defaultValue": "false"
             }

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

@@ -2,11 +2,11 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
   position: relative;
   display: inline-block;
   width: 100%;
@@ -28,4 +28,11 @@
 .combobox-menu-container {
   width: var(--popup-width);
   max-height: 200px;
+}
+
+:host(.duet-theme-turva2.duet-theme-turva) {
+  color: rgb(23, 42, 59);
+}
+:host(.duet-theme-turva2.duet-theme-turva) a {
+  color: rgb(23, 42, 59);
 }

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

@@ -17,6 +17,7 @@ export class DuetCombobox {
         this.inputId = createID("duet-combobox-input-id");
         this.activeDescendantId = createID("duet-combobox-active-descendant");
         this.isAndroidDevice = ((_b = (_a = navigator === null || navigator === void 0 ? void 0 : navigator.userAgent) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === null || _b === void 0 ? void 0 : _b.indexOf("android")) > -1 || null;
+        this.isInsideModal = false;
         this.resizeObserver = new ResizeObserver(debounce(entries => {
             var _a, _b, _c;
             // otherwise, something is wrong, expecting 1 element only
@@ -26,6 +27,76 @@ export class DuetCombobox {
                 this.listContainer.style.setProperty("--popup-width", `${currentWidth - 2 * popupMenuPadding}px`);
             }
         }, 100));
+        this.processedItems = null;
+        this.inputValue = "";
+        this.listOpen = false;
+        // the selected item is based upon the DuetComboboxItem.id value
+        this.selectedItems = new Set();
+        // the activeItem number is based upon the array.index of the array stored in processedItems
+        this.activeItem = undefined;
+        /**
+         * Defaults for the accessible labels for the select items
+         */
+        this.accessibleLabelDefaults = {
+            en: {
+                heading: "Select:",
+                item: "{name}",
+                itemFiltered: "{name}, {hiddenItems} filtered",
+            },
+            fi: {
+                heading: "Valitse:",
+                item: "{name}",
+                itemFiltered: "{name}, {hiddenItems} suodatettu",
+            },
+            sv: {
+                heading: "Välj:",
+                item: "{name}",
+                itemFiltered: "{name}, {hiddenItems} filtrerade",
+            },
+        };
+        /**
+         * Accessible labels for the select items
+         */
+        this.accessibleLabels = getLocaleString(this.accessibleLabelDefaults, getLanguage());
+        /**
+         * Label for the input if input is not provided as a slotted element.
+         */
+        this.label = "";
+        /**
+         * Caption for the input if input is not provided as a slotted element.
+         */
+        this.caption = "";
+        /**
+         * Theme of the combobox.
+         */
+        this.theme = "";
+        /**
+         * Force the user to make a selection (typing things in the input field will only be used for list search).
+         * This property also sync input value with selected value on blur.
+         */
+        this.force = false;
+        /**
+         * Allow multiple selections. Selections are displayed as DuetChips.
+         */
+        this.multiple = false;
+        /**
+         * A hook to overwrite how the values are displayed in the input field after a User select an item
+         * @example (item) => `${item.name} (${item.value})`
+         * @default undefined
+         */
+        this.formatter = (item) => item && item.name ? item.name : "";
+        /**
+         * Defines minimum number of characters that must be given to show search results
+         */
+        this.minCharacters = 0;
+        /**
+         * Defines if items list should always open after clicking on input
+         */
+        this.openListOnClick = false;
+        /**
+         * Defines if filtering of items should be done by includes or startsWith
+         */
+        this.filterType = "startsWith";
         this.onInputChange = async (e) => {
             const newValue = e.detail.value;
             this.inputValue = newValue;
@@ -122,40 +193,6 @@ export class DuetCombobox {
             }
             return;
         };
-        this.processedItems = null;
-        this.inputValue = "";
-        this.listOpen = false;
-        this.selectedItems = new Set();
-        this.activeItem = undefined;
-        this.accessibleLabelDefaults = {
-            en: {
-                heading: "Select:",
-                item: "{name}",
-                itemFiltered: "{name}, {hiddenItems} filtered",
-            },
-            fi: {
-                heading: "Valitse:",
-                item: "{name}",
-                itemFiltered: "{name}, {hiddenItems} suodatettu",
-            },
-            sv: {
-                heading: "Välj:",
-                item: "{name}",
-                itemFiltered: "{name}, {hiddenItems} filtrerade",
-            },
-        };
-        this.accessibleLabels = getLocaleString(this.accessibleLabelDefaults, getLanguage());
-        this.label = "";
-        this.caption = "";
-        this.theme = "";
-        this.force = false;
-        this.multiple = false;
-        this.items = undefined;
-        this.formatter = (item) => item && item.name ? item.name : "";
-        this.value = undefined;
-        this.minCharacters = 0;
-        this.openListOnClick = false;
-        this.filterType = "startsWith";
     }
     popupMenuOpenHandler() {
         if (this.listOpen) {
@@ -263,6 +300,9 @@ export class DuetCombobox {
      * Component lifecycle events.
      */
     componentWillLoad() {
+        if (this.element.closest("duet-modal")) {
+            this.isInsideModal = true;
+        }
         inheritGlobalTheme(this);
     }
     connectedCallback() {
@@ -547,7 +587,7 @@ export class DuetCombobox {
         return (h(Host, { class: {
                 "duet-combobox": true,
                 [`duet-theme-${this.theme}`]: true,
-            } }, h("slot", null), h("div", null, h("duet-popup-menu", { id: this.listBoxId, controller: this.input, ref: el => (this.listContainer = el), accessibleRole: "listbox", allowVerticalFlip: false }, h("div", { class: "combobox-menu-container" }, this.listOpen &&
+            } }, h("slot", null), h("div", null, h("duet-popup-menu", { id: this.listBoxId, controller: this.input, ref: el => (this.listContainer = el), accessibleRole: "listbox", allowVerticalFlip: false, class: { "duet-skip-teleport-inert": this.isInsideModal } }, h("div", { class: "combobox-menu-container" }, this.listOpen &&
             selectElements.map((item, index) => {
                 return (h(DuetComboBoxSelect, { id: this.activeDescendantId, item: item, activeDescendant: index === this.activeItem, selected: this.selectedItems.has(item.id), search: this.inputValue, clickHandler: e => this.onListClick(e, item), label: this.formatLabel(item, index, selectElements.length, this.processedItems.length), isAndroidDevice: this.isAndroidDevice }));
             }), h("duet-spacer", { size: "x-small" }))))));
@@ -568,6 +608,7 @@ export class DuetCombobox {
         return {
             "accessibleLabelDefaults": {
                 "type": "string",
+                "attribute": "accessible-label-defaults",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetLangObject | string",
@@ -588,12 +629,12 @@ export class DuetCombobox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-label-defaults",
                 "reflect": false,
                 "defaultValue": "{\n    en: {\n      heading: \"Select:\",\n      item: \"{name}\",\n      itemFiltered: \"{name}, {hiddenItems} filtered\",\n    },\n    fi: {\n      heading: \"Valitse:\",\n      item: \"{name}\",\n      itemFiltered: \"{name}, {hiddenItems} suodatettu\",\n    },\n    sv: {\n      heading: \"V\u00E4lj:\",\n      item: \"{name}\",\n      itemFiltered: \"{name}, {hiddenItems} filtrerade\",\n    },\n  }"
             },
             "accessibleLabels": {
                 "type": "unknown",
+                "attribute": "accessible-labels",
                 "mutable": true,
                 "complexType": {
                     "original": "Record<string, string>",
@@ -617,6 +658,7 @@ export class DuetCombobox {
             },
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -631,12 +673,12 @@ export class DuetCombobox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "caption": {
                 "type": "string",
+                "attribute": "caption",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -651,12 +693,12 @@ export class DuetCombobox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "caption",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -677,12 +719,12 @@ export class DuetCombobox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "force": {
                 "type": "boolean",
+                "attribute": "force",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -697,12 +739,12 @@ export class DuetCombobox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "force",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "multiple": {
                 "type": "boolean",
+                "attribute": "multiple",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -717,12 +759,12 @@ export class DuetCombobox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "multiple",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "items": {
                 "type": "any",
+                "attribute": "items",
                 "mutable": true,
                 "complexType": {
                     "original": "any",
@@ -737,11 +779,11 @@ export class DuetCombobox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "items",
                 "reflect": false
             },
             "formatter": {
                 "type": "unknown",
+                "attribute": "formatter",
                 "mutable": false,
                 "complexType": {
                     "original": "(item: DuetComboboxItem) => string",
@@ -772,6 +814,7 @@ export class DuetCombobox {
             },
             "value": {
                 "type": "string",
+                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "string | string[]",
@@ -786,11 +829,11 @@ export class DuetCombobox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "value",
                 "reflect": false
             },
             "minCharacters": {
                 "type": "number",
+                "attribute": "min-characters",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -805,12 +848,12 @@ export class DuetCombobox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "min-characters",
                 "reflect": false,
                 "defaultValue": "0"
             },
             "openListOnClick": {
                 "type": "boolean",
+                "attribute": "open-list-on-click",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -825,12 +868,12 @@ export class DuetCombobox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "open-list-on-click",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "filterType": {
                 "type": "string",
+                "attribute": "filter-type",
                 "mutable": false,
                 "complexType": {
                     "original": "\"includes\" | \"startsWith\"",
@@ -845,7 +888,6 @@ export class DuetCombobox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "filter-type",
                 "reflect": false,
                 "defaultValue": "\"startsWith\""
             }