npm - @ukic/web-components - Versions diffs - 3.0.0-alpha.9 → 3.1.0 - Mend

@ukic/web-components 3.0.0-alpha.9 → 3.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1061) hide show

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

@@ -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\""