@ukic/web-components 3.0.0-alpha.12 → 3.0.0-alpha.14

package/dist/collection/components/ic-button/ic-button.js

@@ -32,14 +32,90 @@ export class Button {
         this.describedById = null;
         this.mutationObserver = null;
         this.hostMutationObserver = null;
+        this.ariaLabel = "";
+        this.describedByContent = "";
+        this.title = "";
+        /**
+         * If `fileUpload` is set to `true`, this is the accepted list of file types.
+         */
+        this.accept = "*";
+        /**
+         * If `true`, the button will be in disabled state.
+         */
+        this.disabled = false;
+        /**
+         * If `true`, the ic-tooltip which is shown for icon variant will be disabled. Title or aria-label must be set if this prop is not applied.
+         */
+        this.disableTooltip = false;
+        /**
+         * If `true`, the user can save the linked URL instead of navigating to it.
+         */
+        this.download = false;
+        /**
+         * If `true`, the button will show a dropdown icon.
+         */
+        this.dropdown = false;
+        /**
+         * If `true`, the aria-expanded value will be set to true. This is only applied if the dropdown prop is also true.
+         */
+        this.dropdownExpanded = false;
+        /**
+         * If `true`, when the button is clicked the native file explorer will be launched.
+         */
+        this.fileUpload = false;
+        /**
+         * The name of the control for the file input, which is submitted with the form data.
+         */
+        this.fileInputName = `ic-button-file-upload-input-${buttonIds++}`;
+        /**
+         * If `true`, the button will fill the width of the container.
+         */
+        this.fullWidth = false;
+        /**
+         * If `true`, the button will be in loading state.
+         */
+        this.loading = false;
+        /**
+         * If `true`, the button will display as monochromatic in either `light` or `dark` theme.
+         */
+        this.monochrome = false;
+        /**
+         * If `fileUpload` is set to `true`, this boolean determines whether multiple files are accepted.
+         */
+        this.multiple = false;
+        /**
+         * The size of the button to be displayed.
+         */
+        this.size = "medium";
+        /**
+         * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
+         */
+        this.theme = "inherit";
+        /**
+         * The position of the tooltip in relation to the button.
+         */
+        this.tooltipPlacement = "bottom";
+        /**
+         * If `true`, the secondary variant of button will have a transparent background rather than white.
+         */
+        this.transparentBackground = true;
+        /**
+         * The type of the button.
+         */
+        this.type = "button";
+        /**
+         * The variant of the button to be displayed.
+         */
+        this.variant = "primary";
         this.handleClick = () => {
+            var _a;
             if ((this.el.type === "submit" || this.el.type === "reset") &&
                 !this.hasRouterSlot() &&
                 !!this.el.closest("FORM")) {
                 const hiddenFormButton = document.createElement("button");
                 hiddenFormButton.setAttribute("type", this.el.type);
                 hiddenFormButton.style.display = "none";
-                this.el.closest("FORM").appendChild(hiddenFormButton);
+                (_a = this.el.closest("FORM")) === null || _a === void 0 ? void 0 : _a.appendChild(hiddenFormButton);
                 hiddenFormButton.click();
                 hiddenFormButton.remove();
             }
@@ -57,20 +133,25 @@ export class Button {
         };
         // triggered when text content of sibling element in light DOM changes
         this.mutationCallback = () => {
-            this.describedByContent = this.describedbyEl.innerText;
+            var _a;
+            this.describedByContent = (_a = this.describedbyEl) === null || _a === void 0 ? void 0 : _a.innerText;
         };
         // triggered when attributes of host element change
         this.hostMutationCallback = (mutationList) => {
             let forceComponentUpdate = false;
             mutationList.forEach(({ attributeName }) => {
-                const attribute = this.el.getAttribute(attributeName);
-                if (attributeName === "title")
-                    this.title = attribute;
-                else if (attributeName === "aria-label")
-                    this.ariaLabel = attribute;
-                if (IC_INHERITED_ARIA.includes(attributeName)) {
-                    this.inheritedAttributes[attributeName] = attribute;
-                    forceComponentUpdate = true;
+                if (attributeName) {
+                    const attribute = this.el.getAttribute(attributeName);
+                    if (attribute) {
+                        if (attributeName === "title")
+                            this.title = attribute;
+                        else if (attributeName === "aria-label")
+                            this.ariaLabel = attribute;
+                        if (IC_INHERITED_ARIA.includes(attributeName)) {
+                            this.inheritedAttributes[attributeName] = attribute;
+                            forceComponentUpdate = true;
+                        }
+                    }
                 }
             });
             if (forceComponentUpdate) {
@@ -79,46 +160,69 @@ export class Button {
         };
         this.setHasTooltip = () => {
             this.hasTooltip =
-                !this.disableTooltip && (!!this.title || this.isIconVariant());
+                !this.disableTooltip && (!!this.title || !!this.isIconVariant());
         };
         this.isIconVariant = () => {
-            return this.variant.startsWith("icon");
+            var _a;
+            return (_a = this.variant) === null || _a === void 0 ? void 0 : _a.startsWith("icon");
+        };
+        this.arrangeRouterItem = () => {
+            var _a, _b, _c, _d;
+            const setStyles = (element, styles) => {
+                Object.entries(styles).forEach(([key, value]) => {
+                    element.style.setProperty(key, value);
+                });
+            };
+            const iconWrapper = document.createElement("div");
+            const icon = (_a = this.routerSlot) === null || _a === void 0 ? void 0 : _a.querySelector("svg");
+            const badge = (_b = this.routerSlot) === null || _b === void 0 ? void 0 : _b.querySelector("ic-badge");
+            const label = (_d = (_c = this.routerSlot) === null || _c === void 0 ? void 0 : _c.textContent) === null || _d === void 0 ? void 0 : _d.trim();
+            const icTypography = document.createElement("ic-typography");
+            setStyles(icTypography, {
+                "font-family": "var(--ic-font-body-family)",
+                "font-size": "0.875rem",
+                "font-weight": "600",
+            });
+            setStyles(this.routerSlot, {
+                gap: "0",
+            });
+            if (icon) {
+                setStyles(icon, {
+                    fill: "currentcolor",
+                });
+                icon.getAttribute("slot") === "left-icon" &&
+                    setStyles(iconWrapper, {
+                        "margin-right": "var(--ic-space-xs)",
+                    });
+                icon.getAttribute("slot") === "right-icon" &&
+                    setStyles(iconWrapper, {
+                        "margin-left": "var(--ic-space-xs)",
+                    });
+                if (icon.getAttribute("slot") === "top-icon") {
+                    setStyles(this.routerSlot, {
+                        display: "flex",
+                        "flex-direction": "column",
+                        "--height": "fit-content",
+                    });
+                }
+                iconWrapper.append(icon);
+            }
+            badge && iconWrapper.append(badge);
+            if (label) {
+                icTypography.textContent = label;
+            }
+            if (this.routerSlot) {
+                this.routerSlot.textContent = "";
+                if (icon && icon.getAttribute("slot") === "right-icon") {
+                    this.routerSlot.append(icTypography);
+                    this.routerSlot.append(iconWrapper);
+                }
+                else {
+                    this.routerSlot.append(iconWrapper);
+                    this.routerSlot.append(icTypography);
+                }
+            }
         };
-        this.ariaLabel = null;
-        this.describedByContent = null;
-        this.title = null;
-        this.accept = "*";
-        this.ariaControlsId = undefined;
-        this.ariaOwnsId = undefined;
-        this.disabled = false;
-        this.disableTooltip = false;
-        this.download = false;
-        this.dropdown = false;
-        this.dropdownExpanded = false;
-        this.fileUpload = false;
-        this.fileInputName = `ic-button-file-upload-input-${buttonIds++}`;
-        this.form = undefined;
-        this.formaction = undefined;
-        this.formenctype = undefined;
-        this.formmethod = undefined;
-        this.formnovalidate = undefined;
-        this.formtarget = undefined;
-        this.fullWidth = false;
-        this.href = undefined;
-        this.hreflang = undefined;
-        this.loading = false;
-        this.monochrome = false;
-        this.multiple = false;
-        this.referrerpolicy = undefined;
-        this.rel = undefined;
-        this.selectedFiles = undefined;
-        this.size = "medium";
-        this.target = undefined;
-        this.theme = "inherit";
-        this.tooltipPlacement = "bottom";
-        this.transparentBackground = true;
-        this.type = "button";
-        this.variant = "primary";
     }
     watchDisabledHandler() {
         removeDisabledFalse(this.disabled, this.el);
@@ -139,7 +243,8 @@ export class Button {
         this.setHasTooltip();
     }
     componentWillLoad() {
-        const _a = inheritAttributes(this.el, [...IC_INHERITED_ARIA, "title"]), { title, "aria-label": ariaLabel } = _a, restInheritedAttributes = __rest(_a, ["title", "aria-label"]);
+        var _a;
+        const _b = inheritAttributes(this.el, [...IC_INHERITED_ARIA, "title"]), { title, "aria-label": ariaLabel } = _b, restInheritedAttributes = __rest(_b, ["title", "aria-label"]);
         this.title = title;
         this.ariaLabel = ariaLabel;
         this.inheritedAttributes = restInheritedAttributes;
@@ -151,7 +256,7 @@ export class Button {
             const describedById = this.inheritedAttributes["aria-describedby"];
             if (describedById !== undefined) {
                 this.describedById = describedById;
-                const el = this.el.parentElement.querySelector(`#${describedById}`);
+                const el = (_a = this.el.parentElement) === null || _a === void 0 ? void 0 : _a.querySelector(`#${describedById}`);
                 if (el) {
                     this.describedByContent = el.innerText;
                     this.describedbyEl = el;
@@ -162,7 +267,7 @@ export class Button {
     componentDidLoad() {
         this.updateTheme();
         if (typeof MutationObserver !== "undefined") {
-            if (this.describedById) {
+            if (this.describedbyEl && this.describedById) {
                 this.mutationObserver = new MutationObserver(this.mutationCallback);
                 this.mutationObserver.observe(this.describedbyEl, {
                     characterData: true,
@@ -174,6 +279,7 @@ export class Button {
             this.hostMutationObserver.observe(this.el, {
                 attributes: true,
             });
+            this.hasRouterSlot() && this.arrangeRouterItem();
         }
     }
     componentWillRender() {
@@ -187,7 +293,7 @@ export class Button {
     handleHostClick(event) {
         if (!this.hasRouterSlot()) {
             if (this.fileUpload) {
-                renderFileHiddenInput(this.icFileSelection, this.el, this.multiple, this.fileInputName, this.selectedFiles, this.disabled, this.accept);
+                renderFileHiddenInput(this.icFileSelection, this.el, !!this.multiple, this.fileInputName, this.selectedFiles, !!this.disabled, this.accept);
             }
             if (this.disabled || this.loading) {
                 event.stopImmediatePropagation();
@@ -208,8 +314,9 @@ export class Button {
         (_a = this.buttonEl) === null || _a === void 0 ? void 0 : _a.focus();
     }
     async closeButtonTooltip(ev) {
-        const tooltip = this.el.shadowRoot.querySelector("ic-tooltip");
-        if (await tooltip.isTooltipVisible()) {
+        var _a;
+        const tooltip = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("ic-tooltip");
+        if (tooltip && (await tooltip.isTooltipVisible())) {
             tooltip.displayTooltip(false);
             ev.preventDefault();
             ev.stopImmediatePropagation();
@@ -282,27 +389,27 @@ export class Button {
                 this.variant !== "icon" &&
                 this.variant !== "destructive" && (h("span", { class: {
                     ["arrow-dropdown"]: !this.dropdownExpanded,
-                    ["dropdown-expanded"]: this.dropdownExpanded,
+                    ["dropdown-expanded"]: !!this.dropdownExpanded,
                 }, innerHTML: arrowDropdown }))));
         };
         return (h(Host, { class: {
                 [`ic-theme-${this.theme}`]: this.theme !== "inherit",
-                [`monochrome`]: this.monochrome,
-                ["ic-button-disabled"]: this.disabled && !this.loading,
+                [`monochrome`]: !!this.monochrome,
+                ["ic-button-disabled"]: !!this.disabled && !this.loading,
                 [`ic-button-variant-${this.variant}`]: true,
                 [`ic-button-size-${this.size}`]: true,
-                ["ic-button-loading"]: this.loading,
-                ["ic-button-full-width"]: this.fullWidth,
+                ["ic-button-loading"]: !!this.loading,
+                ["ic-button-full-width"]: !!this.fullWidth,
                 ["with-badge"]: isSlotUsed(this.el, "badge"),
-                ["dropdown-no-icon"]: this.dropdown &&
+                ["dropdown-no-icon"]: !!this.dropdown &&
                     !isSlotUsed(this.el, "icon") &&
                     !isSlotUsed(this.el, "left-icon"),
                 ["top-icon"]: isSlotUsed(this.el, "top-icon"),
                 ["background"]: this.variant === "secondary" &&
                     !this.transparentBackground &&
                     this.theme === "light",
-            }, onClick: this.handleClick, onKeyDown: this.handleKeyDown, "aria-owns": this.ariaOwnsId, "aria-controls": this.ariaControlsId, "aria-expanded": this.dropdown && `${this.dropdownExpanded}` }, this.hasTooltip && (h("ic-tooltip", { id: describedby, label: title || ariaLabel, target: buttonId, placement: this.tooltipPlacement, silent: this.isIconVariant() && !!ariaLabel }, this.hasRouterSlot() ? (h("slot", { name: "router-item" })) : (h(ButtonContent, null)))), isSlotUsed(this.el, "badge") && h("slot", { name: "badge" }), !this.hasTooltip &&
-            (this.hasRouterSlot() ? (h("slot", { name: "router-item" })) : (h(ButtonContent, null))), this.describedByContent && (h("span", { id: describedby, class: "ic-button-describedby" }, this.describedByContent))));
+            }, onClick: this.handleClick, onKeyDown: this.handleKeyDown, "aria-owns": this.ariaOwnsId, "aria-controls": this.ariaControlsId, "aria-expanded": this.dropdown && `${this.dropdownExpanded}` }, this.hasTooltip && (h("ic-tooltip", { id: describedby || undefined, label: title || ariaLabel, target: buttonId || undefined, placement: this.tooltipPlacement, silent: this.isIconVariant() && !!ariaLabel }, this.hasRouterSlot() ? (h("slot", { name: "router-item" })) : (h(ButtonContent, null)))), isSlotUsed(this.el, "badge") && h("slot", { name: "badge" }), !this.hasTooltip &&
+            (this.hasRouterSlot() ? (h("slot", { name: "router-item" })) : (h(ButtonContent, null))), this.describedByContent && (h("span", { id: describedby || undefined, class: "ic-button-describedby" }, this.describedByContent))));
     }
     static get is() { return "ic-button"; }
     static get encapsulation() { return "shadow"; }
@@ -324,7 +431,7 @@ export class Button {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -333,6 +440,8 @@ export class Button {
                     "tags": [],
                     "text": "If `fileUpload` is set to `true`, this is the accepted list of file types."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "accept",
                 "reflect": false,
                 "defaultValue": "\"*\""
@@ -342,11 +451,11 @@ export class Button {
                 "mutable": false,
                 "complexType": {
                     "original": "string | boolean",
-                    "resolved": "boolean | string",
+                    "resolved": "boolean | string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [{
                             "name": "internal",
@@ -354,6 +463,8 @@ export class Button {
                         }],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "aria-controls-id",
                 "reflect": false
             },
@@ -362,11 +473,11 @@ export class Button {
                 "mutable": false,
                 "complexType": {
                     "original": "string | boolean",
-                    "resolved": "boolean | string",
+                    "resolved": "boolean | string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [{
                             "name": "internal",
@@ -374,6 +485,8 @@ export class Button {
                         }],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "aria-owns-id",
                 "reflect": false
             },
@@ -382,7 +495,7 @@ export class Button {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -391,6 +504,8 @@ export class Button {
                     "tags": [],
                     "text": "If `true`, the button will be in disabled state."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
@@ -400,7 +515,7 @@ export class Button {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -409,6 +524,8 @@ export class Button {
                     "tags": [],
                     "text": "If `true`, the ic-tooltip which is shown for icon variant will be disabled. Title or aria-label must be set if this prop is not applied."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "disable-tooltip",
                 "reflect": false,
                 "defaultValue": "false"
@@ -418,7 +535,7 @@ export class Button {
                 "mutable": false,
                 "complexType": {
                     "original": "string | boolean",
-                    "resolved": "boolean | string",
+                    "resolved": "boolean | string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -427,6 +544,8 @@ export class Button {
                     "tags": [],
                     "text": "If `true`, the user can save the linked URL instead of navigating to it."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "download",
                 "reflect": false,
                 "defaultValue": "false"
@@ -436,7 +555,7 @@ export class Button {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -445,6 +564,8 @@ export class Button {
                     "tags": [],
                     "text": "If `true`, the button will show a dropdown icon."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "dropdown",
                 "reflect": false,
                 "defaultValue": "false"
@@ -454,7 +575,7 @@ export class Button {
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -463,6 +584,8 @@ export class Button {
                     "tags": [],
                     "text": "If `true`, the aria-expanded value will be set to true. This is only applied if the dropdown prop is also true."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "dropdown-expanded",
                 "reflect": true,
                 "defaultValue": "false"
@@ -472,7 +595,7 @@ export class Button {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -481,6 +604,8 @@ export class Button {
                     "tags": [],
                     "text": "If `true`, when the button is clicked the native file explorer will be launched."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "file-upload",
                 "reflect": false,
                 "defaultValue": "false"
@@ -490,15 +615,17 @@ export class Button {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "The name of the control for the file input, which is submitted with the form data."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "file-input-name",
                 "reflect": false,
                 "defaultValue": "`ic-button-file-upload-input-${buttonIds++}`"
@@ -508,7 +635,7 @@ export class Button {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -517,6 +644,8 @@ export class Button {
                     "tags": [],
                     "text": "The <form> element to associate the button with."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "form",
                 "reflect": false
             },
@@ -525,7 +654,7 @@ export class Button {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -534,6 +663,8 @@ export class Button {
                     "tags": [],
                     "text": "The URL that processes the information submitted by the button. It overrides the action attribute of the button's form owner. Does nothing if there is no form owner."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "formaction",
                 "reflect": false
             },
@@ -542,7 +673,7 @@ export class Button {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -551,6 +682,8 @@ export class Button {
                     "tags": [],
                     "text": "The way the submitted form data is encoded."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "formenctype",
                 "reflect": false
             },
@@ -559,7 +692,7 @@ export class Button {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -568,6 +701,8 @@ export class Button {
                     "tags": [],
                     "text": "The HTTP method used to submit the form."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "formmethod",
                 "reflect": false
             },
@@ -576,7 +711,7 @@ export class Button {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -585,6 +720,8 @@ export class Button {
                     "tags": [],
                     "text": "If `true`, the form will not be validated when submitted."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "formnovalidate",
                 "reflect": false
             },
@@ -593,7 +730,7 @@ export class Button {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -602,6 +739,8 @@ export class Button {
                     "tags": [],
                     "text": "The place to display the response from submitting the form. It overrides the target attribute of the button's form owner."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "formtarget",
                 "reflect": false
             },
@@ -610,7 +749,7 @@ export class Button {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -619,6 +758,8 @@ export class Button {
                     "tags": [],
                     "text": "If `true`, the button will fill the width of the container."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "full-width",
                 "reflect": false,
                 "defaultValue": "false"
@@ -628,7 +769,7 @@ export class Button {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -637,6 +778,8 @@ export class Button {
                     "tags": [],
                     "text": "The URL that the link points to. This will render the button as an \"a\" tag."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "href",
                 "reflect": false
             },
@@ -645,7 +788,7 @@ export class Button {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -654,6 +797,8 @@ export class Button {
                     "tags": [],
                     "text": "The human language of the linked URL."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "hreflang",
                 "reflect": false
             },
@@ -662,7 +807,7 @@ export class Button {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -671,6 +816,8 @@ export class Button {
                     "tags": [],
                     "text": "If `true`, the button will be in loading state."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "loading",
                 "reflect": false,
                 "defaultValue": "false"
@@ -680,7 +827,7 @@ export class Button {
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -689,6 +836,8 @@ export class Button {
                     "tags": [],
                     "text": "If `true`, the button will display as monochromatic in either `light` or `dark` theme."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "monochrome",
                 "reflect": false,
                 "defaultValue": "false"
@@ -698,7 +847,7 @@ export class Button {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -707,6 +856,8 @@ export class Button {
                     "tags": [],
                     "text": "If `fileUpload` is set to `true`, this boolean determines whether multiple files are accepted."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "multiple",
                 "reflect": false,
                 "defaultValue": "false"
@@ -716,7 +867,7 @@ export class Button {
                 "mutable": false,
                 "complexType": {
                     "original": "ReferrerPolicy",
-                    "resolved": "\"\" | \"no-referrer\" | \"no-referrer-when-downgrade\" | \"origin\" | \"origin-when-cross-origin\" | \"same-origin\" | \"strict-origin\" | \"strict-origin-when-cross-origin\" | \"unsafe-url\"",
+                    "resolved": "\"\" | \"no-referrer\" | \"no-referrer-when-downgrade\" | \"origin\" | \"origin-when-cross-origin\" | \"same-origin\" | \"strict-origin\" | \"strict-origin-when-cross-origin\" | \"unsafe-url\" | undefined",
                     "references": {
                         "ReferrerPolicy": {
                             "location": "global",
@@ -730,6 +881,8 @@ export class Button {
                     "tags": [],
                     "text": "How much of the referrer to send when following the link."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "referrerpolicy",
                 "reflect": false
             },
@@ -738,7 +891,7 @@ export class Button {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -747,6 +900,8 @@ export class Button {
                     "tags": [],
                     "text": "The relationship of the linked URL as space-separated link types."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "rel",
                 "reflect": false
             },
@@ -755,7 +910,7 @@ export class Button {
                 "mutable": false,
                 "complexType": {
                     "original": "FileList",
-                    "resolved": "FileList",
+                    "resolved": "FileList | undefined",
                     "references": {
                         "FileList": {
                             "location": "global",
@@ -764,18 +919,20 @@ export class Button {
                     }
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "The list of the files that have been selected by a user."
-                }
+                },
+                "getter": false,
+                "setter": false
             },
             "size": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
                     "original": "IcSizes",
-                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "resolved": "\"large\" | \"medium\" | \"small\" | undefined",
                     "references": {
                         "IcSizes": {
                             "location": "import",
@@ -790,6 +947,8 @@ export class Button {
                     "tags": [],
                     "text": "The size of the button to be displayed."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "size",
                 "reflect": false,
                 "defaultValue": "\"medium\""
@@ -799,7 +958,7 @@ export class Button {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -808,6 +967,8 @@ export class Button {
                     "tags": [],
                     "text": "The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe)."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "target",
                 "reflect": false
             },
@@ -816,7 +977,7 @@ export class Button {
                 "mutable": true,
                 "complexType": {
                     "original": "IcThemeMode",
-                    "resolved": "\"dark\" | \"inherit\" | \"light\"",
+                    "resolved": "\"dark\" | \"inherit\" | \"light\" | undefined",
                     "references": {
                         "IcThemeMode": {
                             "location": "import",
@@ -831,6 +992,8 @@ export class Button {
                     "tags": [],
                     "text": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"inherit\""
@@ -840,7 +1003,7 @@ export class Button {
                 "mutable": false,
                 "complexType": {
                     "original": "IcButtonTooltipPlacement",
-                    "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
+                    "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\" | undefined",
                     "references": {
                         "IcButtonTooltipPlacement": {
                             "location": "import",
@@ -855,6 +1018,8 @@ export class Button {
                     "tags": [],
                     "text": "The position of the tooltip in relation to the button."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "tooltip-placement",
                 "reflect": false,
                 "defaultValue": "\"bottom\""
@@ -864,7 +1029,7 @@ export class Button {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -873,6 +1038,8 @@ export class Button {
                     "tags": [],
                     "text": "If `true`, the secondary variant of button will have a transparent background rather than white."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "transparent-background",
                 "reflect": false,
                 "defaultValue": "true"
@@ -882,7 +1049,7 @@ export class Button {
                 "mutable": false,
                 "complexType": {
                     "original": "IcButtonTypes",
-                    "resolved": "\"button\" | \"reset\" | \"submit\"",
+                    "resolved": "\"button\" | \"reset\" | \"submit\" | undefined",
                     "references": {
                         "IcButtonTypes": {
                             "location": "import",
@@ -897,6 +1064,8 @@ export class Button {
                     "tags": [],
                     "text": "The type of the button."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "type",
                 "reflect": false,
                 "defaultValue": "\"button\""
@@ -906,7 +1075,7 @@ export class Button {
                 "mutable": false,
                 "complexType": {
                     "original": "IcButtonVariants",
-                    "resolved": "\"destructive\" | \"icon\" | \"icon-destructive\" | \"icon-primary\" | \"icon-secondary\" | \"icon-tertiary\" | \"primary\" | \"secondary\" | \"tertiary\"",
+                    "resolved": "\"destructive\" | \"icon\" | \"icon-destructive\" | \"icon-primary\" | \"icon-secondary\" | \"icon-tertiary\" | \"primary\" | \"secondary\" | \"tertiary\" | undefined",
                     "references": {
                         "IcButtonVariants": {
                             "location": "import",
@@ -921,6 +1090,8 @@ export class Button {
                     "tags": [],
                     "text": "The variant of the button to be displayed."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "variant",
                 "reflect": false,
                 "defaultValue": "\"primary\""