@watermarkinsights/ripple 0.0.1 → 0.1.0-alpha.1

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

@@ -0,0 +1,794 @@
+import { h, Host } from "@stencil/core";
+import { getIconCodeFromName } from "../../global/interfaces";
+import { generateId, hideTooltip, handleDisabledAttribute, showTooltip, toBool, triggerFormSubmit, } from "../../global/functions";
+/**
+ * Interactive button element that triggers actions and workflows. Has seven visual
+ * types plus AI variants.
+ *
+ * @category Basic Controls
+ *
+ * @slot - Button label text. Required for all types. For `icononly` and `navigational`
+ *   buttons, slotted text is not rendered visually but is used as the accessible name
+ *   when no `tooltip` or `label-for-identical-buttons` is provided.
+ *
+ * @keyboardInteraction Enter - Fires a click event on the button (mirrors native button behavior).
+ *
+ * @accessibility
+ * `aria-label` resolution order (highest priority first):
+ * 1. `aria-label-passthrough`
+ * 2. `label-for-identical-buttons` (or `tooltip` for icononly/navigational types)
+ * 3. Nothing set — browser derives the label from visible text or slotted content
+ *
+ * `aria-expanded` — set via `aria-expanded-passthrough` (not directly on `<wm-button>`).
+ * `aria-haspopup="menu"` — applied automatically when the host element has an `aria-haspopup` attribute.
+ *
+ * @usageNotes
+ * - **primary**: Use sparingly — ideally once per page or section — for the single most
+ *   important action.
+ * - **pairpositive / pairnegative**: Must always be used together for binary choices where
+ *   neither option is preferred (e.g. Approve / Reject). Do not use one without the other.
+ * - **AI variants** (`primary-ai`, `secondary-ai`, etc.): Do not set the `icon` prop —
+ *   the AI icon is applied automatically.
+ * - **icononly / navigational**: Both `icon` and `tooltip` are required.
+ * - Do not use slotted text (emoji, Unicode glyphs, or characters styled to look like an icon)
+ *   to simulate an icon. Use the `icon` prop so the icon is rendered as a proper SVG/MDI glyph
+ *   with correct sizing, color, and accessibility treatment.
+ *
+ * @example {html} Primary button — the preferred action on a page or section. Use once per context.
+ * <wm-button button-type="primary">Save changes</wm-button>
+ *
+ * @example {react} Primary button
+ * <WmButton buttonType="primary" onClick={handleSave}>Save changes</WmButton>
+ *
+ * @example {html} Primary and secondary pair — the most common pattern.
+ * <wm-button button-type="secondary">Cancel</wm-button>
+ * <wm-button button-type="primary">Save changes</wm-button>
+ *
+ * @example {react} Primary and secondary pair
+ * <WmButton buttonType="secondary" onClick={handleCancel}>Cancel</WmButton>
+ * <WmButton buttonType="primary" onClick={handleSave}>Save changes</WmButton>
+ *
+ * @example {html} Text-only button with icon
+ * <wm-button button-type="textonly" icon="#edit">Edit</wm-button>
+ *
+ * @example {react} Text-only button with icon
+ * <WmButton buttonType="textonly" icon="#edit">Edit</WmButton>
+ *
+ * @example {html} Icon-only button — icon, tooltip, and slot text are all required.
+ * <wm-button button-type="icononly" icon="#edit" tooltip="Edit record">Edit record</wm-button>
+ *
+ * @example {react} Icon-only button
+ * <WmButton buttonType="icononly" icon="#edit" tooltip="Edit record">Edit record</WmButton>
+ *
+ * @example {html} Icon-only button with local SVG sprite
+ * <wm-button button-type="icononly" icon="/assets/icons.svg#pencil" tooltip="Edit">Edit</wm-button>
+ *
+ * @example {html} Navigational button — for back/forward navigation in flyout panels.
+ * <wm-button button-type="navigational" icon="#back" tooltip="Back">Back</wm-button>
+ *
+ * @example {react} Navigational button
+ * <WmButton buttonType="navigational" icon="#back" tooltip="Back">Back</WmButton>
+ *
+ * @example {html} Positive/negative pair — binary choice, neither option preferred. Must be used as a pair.
+ * <wm-button button-type="pairnegative">Reject</wm-button>
+ * <wm-button button-type="pairpositive">Approve</wm-button>
+ *
+ * @example {react} Positive/negative pair
+ * <WmButton buttonType="pairnegative" onClick={handleReject}>Reject</WmButton>
+ * <WmButton buttonType="pairpositive" onClick={handleApprove}>Approve</WmButton>
+ *
+ * @example {html} Permanently delete — danger styling for irreversible destructive actions only.
+ * <wm-button button-type="primary" permanently-delete="true">Delete account</wm-button>
+ *
+ * @example {react} Permanently delete
+ * <WmButton buttonType="primary" permanentlyDelete={true}>Delete account</WmButton>
+ *
+ * @example {html} Disabled button
+ * <wm-button button-type="primary" disabled="true">Save</wm-button>
+ *
+ * @example {react} Disabled button
+ * <WmButton buttonType="primary" disabled={true}>Save</WmButton>
+ *
+ * @example {html} Form submit button — use is-submit instead of a native type=submit button.
+ * <form>
+ *   <wm-button button-type="primary" is-submit="true">Submit</wm-button>
+ * </form>
+ *
+ * @example {react} Form submit button
+ * <WmButton buttonType="primary" isSubmit={true}>Submit</WmButton>
+ *
+ * @example {html} Button on dark background
+ * <wm-button button-type="secondary" custom-background="dark">Continue</wm-button>
+ *
+ * @example {react} Button on dark background
+ * <WmButton buttonType="secondary" customBackground="dark">Continue</WmButton>
+ *
+ * @example {html} AI primary button — icon is applied automatically, do not set icon prop.
+ * <wm-button button-type="primary-ai">Generate summary</wm-button>
+ *
+ * @example {react} AI primary button
+ * <WmButton buttonType="primary-ai">Generate summary</WmButton>
+ *
+ * @example {html} Rotated icon — reuse directional icons with icon-rotate.
+ * <wm-button button-type="icononly" icon="#back" icon-rotate="180" tooltip="Forward">Forward</wm-button>
+ *
+ * @example {react} Rotated icon
+ * <WmButton buttonType="icononly" icon="#back" iconRotate={180} tooltip="Forward">Forward</WmButton>
+ *
+ * @example {html} Identical buttons — use label-for-identical-buttons to disambiguate for screen readers.
+ * <wm-button button-type="secondary" label-for-identical-buttons="Edit course: Introduction to Biology">Edit</wm-button>
+ * <wm-button button-type="secondary" label-for-identical-buttons="Edit course: Advanced Chemistry">Edit</wm-button>
+ *
+ * @example {react} Identical buttons
+ * <WmButton buttonType="secondary" labelForIdenticalButtons="Edit course: Introduction to Biology">Edit</WmButton>
+ * <WmButton buttonType="secondary" labelForIdenticalButtons="Edit course: Advanced Chemistry">Edit</WmButton>
+ *
+ */
+export class Button {
+    constructor() {
+        this.id = generateId();
+        this.ariaPopup = false;
+        this.disabled = false;
+        this.buttonType = "secondary";
+        this.icon = undefined;
+        this.iconSize = undefined;
+        this.iconRotate = undefined;
+        this.iconFlip = undefined;
+        this.tooltip = undefined;
+        this.labelForIdenticalButtons = undefined;
+        this.tooltipPosition = "bottom-right";
+        this.permanentlyDelete = false;
+        this.textWrap = true;
+        this.customBackground = undefined;
+        this.isSubmit = false;
+        this.ariaLabelPassthrough = undefined;
+        this.ariaExpandedPassthrough = undefined;
+        this.isTabbing = false;
+    }
+    get isDisabled() {
+        // string "false" needs to be treated as bool False because react wrappers convert bool to string.
+        return toBool(this.disabled);
+    }
+    get isTruncated() {
+        return !!this.buttonEl && this.buttonType === "textonly" && this.buttonEl.offsetWidth < this.buttonEl.scrollWidth;
+    }
+    get isAriaExpanded() {
+        // string "false" needs to be treated as bool False because react wrappers convert bool to string.
+        if (this.ariaExpandedPassthrough === undefined)
+            return undefined;
+        return toBool(this.ariaExpandedPassthrough);
+    }
+    get hasTooltip() {
+        // tooltip is only rendered for icononly and navigational types, or if the button text is truncated
+        return ["icononly", "navigational", "icononly-ai", "navigational-ai"].includes(this.buttonType) || this.isTruncated;
+    }
+    get buttonClasses() {
+        let classes = "wm-button";
+        classes += this.permanentlyDelete ? " -permanentlydelete" : "";
+        // Handle AI variants by adding both base and ai classes
+        if (this.buttonType.endsWith("-ai")) {
+            const baseType = this.buttonType.replace("-ai", "");
+            classes += ` -${baseType} ai`;
+        }
+        else {
+            classes += this.buttonType ? ` -${this.buttonType}` : " -secondary";
+        }
+        classes += this.textWrap ? "" : " nowrap";
+        classes += this.isTabbing ? " user-is-tabbing" : "";
+        classes += this.isTruncated ? " -truncated" : "";
+        classes += this.customBackground === "dark" ? " dark" : "";
+        return classes;
+    }
+    toggleTabbingOn() {
+        this.isTabbing = true;
+    }
+    toggleTabbingOff() {
+        this.isTabbing = false;
+    }
+    // we need to listen for scroll events during the capture phase because they do not bubble up
+    // there can be layouts where the main content has 100vh and overflows
+    // in these cases window will register no scroll events unless we catch on they way down
+    handleScroll() {
+        hideTooltip();
+    }
+    validateType(newValue) {
+        const valid = [
+            "primary",
+            "secondary",
+            "textonly",
+            "icononly",
+            "navigational",
+            "selector",
+            "selector-primary",
+            "pairpositive",
+            "pairnegative",
+            "primary-ai",
+            "secondary-ai",
+            "textonly-ai",
+            "icononly-ai",
+            "navigational-ai",
+        ].includes(newValue);
+        if (!valid) {
+            this.buttonType = "secondary";
+        }
+        this.validateIcon();
+    }
+    updateIcon() {
+        this.icon = getIconCodeFromName(this.icon);
+    }
+    handleDisabledChange() {
+        handleDisabledAttribute(this.el, this.isDisabled);
+    }
+    validateIcon() {
+        switch (this.buttonType) {
+            case "icononly":
+            case "navigational":
+                // if the style is icononly or navigational...
+                // - an icon must be provided
+                if (!this.icon) {
+                    console.error("wm-button should have a valid 'icon' property when button-type is set to 'icononly' or 'navigational'.");
+                }
+                // - if no tooltip text was passed and we couldn't generate one, throw an error
+                if (!this.tooltip) {
+                    console.error("wm-button should have a valid 'tooltip' property when button-type is set to 'icononly' or 'navigational'.");
+                }
+                break;
+            case "pairpositive":
+                this.icon = "f12c";
+                break;
+            case "pairnegative":
+                this.icon = "f739";
+                break;
+        }
+    }
+    handleKeydown(ev) {
+        switch (ev.key) {
+            case "Enter":
+                ev.preventDefault();
+                if (!this.isDisabled) {
+                    this.el.click();
+                }
+                break;
+        }
+    }
+    handleMouseEnter(ev) {
+        if (this.hasTooltip) {
+            let tooltipText = "";
+            if (this.isTruncated && this.el.textContent) {
+                // when truncated, tooltip text is the button's content
+                tooltipText = this.el.textContent;
+            }
+            else if (this.tooltip) {
+                // otherwise it is the tooltip property if present
+                tooltipText = this.tooltip;
+            }
+            showTooltip(this.tooltipPosition, ev.target, tooltipText);
+        }
+    }
+    handleFocus(ev) {
+        if (this.hasTooltip && this.isTabbing) {
+            let tooltipText = "";
+            if (this.isTruncated && this.el.textContent) {
+                // when truncated, tooltip text is the button's content
+                tooltipText = this.el.textContent;
+            }
+            else if (this.tooltip) {
+                // otherwise it is the tooltip property if present
+                tooltipText = this.tooltip;
+            }
+            showTooltip(this.tooltipPosition, ev.target, tooltipText);
+        }
+    }
+    /**
+     * Register CSS custom properties for AI gradient animations
+     * These need to be registered in JS since @property doesn't work in shadow DOM
+     */
+    registerCSSProperties() {
+        if (typeof CSS !== "undefined" && "registerProperty" in CSS) {
+            try {
+                CSS.registerProperty({
+                    name: "--ai-gradient-start",
+                    syntax: "<color>",
+                    inherits: false,
+                    initialValue: "#2779C8",
+                });
+                CSS.registerProperty({
+                    name: "--ai-gradient-end",
+                    syntax: "<color>",
+                    inherits: false,
+                    initialValue: "#6259C4",
+                });
+                CSS.registerProperty({
+                    name: "--secondary-button-fill",
+                    syntax: "<color>",
+                    inherits: false,
+                    initialValue: "#FFFFFF",
+                });
+                CSS.registerProperty({
+                    name: "--wmbutton-percent-1",
+                    syntax: "<percentage>",
+                    inherits: false,
+                    initialValue: "0%",
+                });
+                CSS.registerProperty({
+                    name: "--wmbutton-percent-2",
+                    syntax: "<percentage>",
+                    inherits: false,
+                    initialValue: "70.19%",
+                });
+                CSS.registerProperty({
+                    name: "--wmbutton-percent-3",
+                    syntax: "<percentage>",
+                    inherits: false,
+                    initialValue: "-50%",
+                });
+            }
+            catch (e) {
+                // Properties might already be registered, or CSS.registerProperty might not be supported
+                // This is fine, the animations will still work but might be less smooth
+            }
+        }
+    }
+    componentWillLoad() {
+        this.registerCSSProperties();
+        this.validateType(this.buttonType);
+        if (this.icon) {
+            this.icon = getIconCodeFromName(this.icon);
+        }
+        handleDisabledAttribute(this.el, this.isDisabled);
+    }
+    componentDidLoad() {
+        if (document.body.classList.contains("wmcl-user-is-tabbing")) {
+            this.toggleTabbingOn();
+        }
+        this.isSubmit && this.el.addEventListener("click", () => triggerFormSubmit(this.el.closest("form")));
+        this.ariaPopup = !!this.el.getAttribute("aria-haspopup");
+    }
+    getAriaLabel() {
+        if (this.ariaLabelPassthrough)
+            return this.ariaLabelPassthrough;
+        if (this.buttonType === "icononly" ||
+            this.buttonType === "navigational" ||
+            this.buttonType === "icononly-ai" ||
+            this.buttonType === "navigational-ai") {
+            return this.labelForIdenticalButtons || this.tooltip;
+        }
+        if (this.labelForIdenticalButtons) {
+            return this.labelForIdenticalButtons;
+        }
+    }
+    renderIcon() {
+        this.iconSize && this.el.style.setProperty("--icon-size", this.iconSize);
+        let transformStyle = "";
+        transformStyle += this.iconRotate ? `rotate(${this.iconRotate}deg)` : "";
+        transformStyle += this.iconFlip === "horizontal" ? `scaleX(-1)` : "";
+        transformStyle += this.iconFlip === "vertical" ? `scaleY(-1)` : "";
+        const iconStyles = Object.assign({}, ((this.iconRotate || this.iconFlip) && { transform: transformStyle }));
+        if (this.icon.match(/^#/)) {
+            // Icon ID
+            return h("span", { class: `svg-icon svg-${this.icon.slice(1)}`, style: iconStyles });
+        }
+        else if (this.icon.match(/^\/\S*[#]\S*/)) {
+            // starts with /, any number of non-whitespace characters, followed by #, followed by any non-whitespace characters
+            // Relative Path & Symbol
+            return (h("svg", { xmlns: "http://www.w3.org/2000/svg", class: "svg-icon", style: Object.assign(Object.assign({}, iconStyles), { "--icon-fill": "currentColor" }), fill: "currentColor" }, h("use", { href: this.icon })));
+        }
+        else {
+            // MDI
+            return (h("span", { class: "mdi", style: iconStyles, "aria-hidden": "true" }, String.fromCodePoint(parseInt(`0x${this.icon}`))));
+        }
+    }
+    render() {
+        return (h(Host, { key: 'd196d0b439d6b73e37fc0f83e3867854bb47a22b', class: `${this.isDisabled ? "button-disabled" : ""} -${this.buttonType}` }, h("button", { key: '443dd1798281e68af26f2e5148bf25c61e498156', id: this.id, class: `${this.buttonClasses}`, disabled: this.isDisabled, ref: (el) => (this.buttonEl = el), "aria-label": this.getAriaLabel(), "aria-expanded": this.isAriaExpanded !== undefined ? this.isAriaExpanded.toString() : undefined, "aria-hasPopup": this.ariaPopup ? "menu" : null, onMouseEnter: (ev) => this.handleMouseEnter(ev), onMouseLeave: () => hideTooltip(), onFocus: (ev) => this.handleFocus(ev), onBlur: () => hideTooltip(), onClick: () => hideTooltip() }, this.icon && this.renderIcon(), !this.buttonType.startsWith("navigational") && !this.buttonType.startsWith("icononly") && (h("span", { key: 'acca27d3cc39be5845259b78958f1e130de2e508', class: "button-text" }, h("slot", { key: '7bb49f66e9e0716b85c86ac161df77727c9a92de' }))), (this.buttonType == "selector" || this.buttonType == "selector-primary") && (h("div", { key: '101efe505a3883988ca0c5352301f44b2ee5d177', class: "selector-icon svg-icon svg-expand-more" })))));
+    }
+    static get is() { return "wm-button"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["wm-button.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["wm-button.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "Disables the button, preventing interaction and applying disabled styling."
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": ""
+                },
+                "attribute": "disabled",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "buttonType": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "validButtonTypes",
+                    "resolved": "\"icononly\" | \"icononly-ai\" | \"navigational\" | \"navigational-ai\" | \"pairnegative\" | \"pairpositive\" | \"primary\" | \"primary-ai\" | \"secondary\" | \"secondary-ai\" | \"selector\" | \"selector-primary\" | \"textonly\" | \"textonly-ai\"",
+                    "references": {
+                        "validButtonTypes": {
+                            "location": "import",
+                            "path": "../../global/interfaces",
+                            "id": "src/global/interfaces.ts::validButtonTypes"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "Visual style of the button. 'primary' for the single preferred action (use sparingly, ideally once per page/section). 'secondary' for other actions, often alongside a primary. 'textonly' for low-emphasis actions. 'icononly' requires icon and tooltip. 'navigational' for icon-only back/forward navigation (e.g. flyout back button). 'pairpositive' and 'pairnegative' must be used together for binary choices (neither is preferred, e.g. Approve/Reject). AI variants apply AI styling automatically \u2014 do not set the icon property on AI types. 'selector' and 'selector-primary' are internal types used by wm-select \u2014 do not use directly."
+                        }, {
+                            "name": "default",
+                            "text": "\"secondary\""
+                        }],
+                    "text": ""
+                },
+                "attribute": "button-type",
+                "reflect": false,
+                "defaultValue": "\"secondary\""
+            },
+            "icon": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "Icon to display. Required when button-type is 'icononly' or 'navigational'. Formats: '#icon-name' for a commonly-used Ripple icon (e.g. '#edit', '#add-person'), '/path/to/file.svg#symbol-id' for a local SVG sprite symbol, or an MDI character code like 'f3eb' (deprecated). Do not set on AI button types \u2014 their icon is applied automatically."
+                        }, {
+                            "name": "conditionallyRequired",
+                            "text": "when button-type is 'icononly' or 'navigational' (conditionallyRequired means that the prop is required, but only if the button-type is 'icononly' or 'navigational')"
+                        }],
+                    "text": ""
+                },
+                "attribute": "icon",
+                "reflect": true
+            },
+            "iconSize": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "Change size of the icon to fine tune the visual rendering if it appears too large or small. Not\nintended for general sizing. Accepts any valid CSS size value, e.g. '22px' or '1.3rem'."
+                        }],
+                    "text": ""
+                },
+                "attribute": "icon-size",
+                "reflect": false
+            },
+            "iconRotate": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "Rotates the icon by the given number of degrees. For use with the icon property."
+                        }],
+                    "text": ""
+                },
+                "attribute": "icon-rotate",
+                "reflect": false
+            },
+            "iconFlip": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"horizontal\" | \"vertical\"",
+                    "resolved": "\"horizontal\" | \"vertical\" | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "Flips the icon along the specified axis. For use with the icon property."
+                        }],
+                    "text": ""
+                },
+                "attribute": "icon-flip",
+                "reflect": false
+            },
+            "tooltip": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "Tooltip text displayed on hover."
+                        }, {
+                            "name": "conditionallyRequired",
+                            "text": "when button-type is 'icononly' or 'navigational' (conditionallyRequired means that the prop is required, but only if the button-type is 'icononly' or 'navigational')"
+                        }],
+                    "text": ""
+                },
+                "attribute": "tooltip",
+                "reflect": true
+            },
+            "labelForIdenticalButtons": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "Accessibility prop. Use ONLY when multiple buttons on the same page share identical visible text or identical tooltips. Set this to a more descriptive label for screen readers; leave the visible button text or tooltip unchanged. Sets aria-label to this value."
+                        }, {
+                            "name": "conditionallyRequired",
+                            "text": "when multiple buttons on the same page share identical visible text or identical tooltips (conditionallyRequired means that the prop is required, but only if multiple buttons on the same page share identical visible text or identical tooltips)"
+                        }],
+                    "text": ""
+                },
+                "attribute": "label-for-identical-buttons",
+                "reflect": false
+            },
+            "tooltipPosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TooltipPlacement",
+                    "resolved": "\"bottom\" | \"bottom-left\" | \"bottom-right\" | \"left\" | \"right\" | \"top\" | \"top-left\" | \"top-right\"",
+                    "references": {
+                        "TooltipPlacement": {
+                            "location": "import",
+                            "path": "../../global/interfaces",
+                            "id": "src/global/interfaces.ts::TooltipPlacement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "Position of the tooltip relative to the button. If there is insufficient space at the specified position, the component repositions automatically."
+                        }, {
+                            "name": "default",
+                            "text": "\"bottom-right\""
+                        }],
+                    "text": ""
+                },
+                "attribute": "tooltip-position",
+                "reflect": false,
+                "defaultValue": "\"bottom-right\""
+            },
+            "permanentlyDelete": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "Applies danger/destructive styling to the button. Use sparingly and only for irreversible destructive actions (e.g. permanently deleting an account or record). Applied as a modifier \u2014 not a separate button-type."
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": ""
+                },
+                "attribute": "permanently-delete",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "textWrap": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "For 'textonly' buttons only. When false, text is truncated with an ellipsis and a tooltip reveals the full text on hover."
+                        }, {
+                            "name": "default",
+                            "text": "true"
+                        }],
+                    "text": ""
+                },
+                "attribute": "text-wrap",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "customBackground": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "Set to 'dark' to render button styles appropriate for a dark background surface."
+                        }],
+                    "text": ""
+                },
+                "attribute": "custom-background",
+                "reflect": false
+            },
+            "isSubmit": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "When true, the button submits its containing form. Equivalent to type=\"submit\" on a native button element."
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": ""
+                },
+                "attribute": "is-submit",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "ariaLabelPassthrough": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "Sets the button's `aria-label`. Takes priority over `label-for-identical-buttons` and over\nthe label automatically derived from `tooltip` for `icononly` and `navigational` buttons. Use\nthis prop instead of setting `aria-label` directly on `<wm-button>`."
+                        }],
+                    "text": ""
+                },
+                "attribute": "aria-label-passthrough",
+                "reflect": false
+            },
+            "ariaExpandedPassthrough": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "Sets the button's `aria-expanded` attribute. Use on buttons that toggle a disclosure region,\nmenu, popover, or dialog. Use this prop instead of setting `aria-expanded` directly on\n`<wm-button>`."
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": ""
+                },
+                "attribute": "aria-expanded-passthrough",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isTabbing": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "buttonType",
+                "methodName": "validateType"
+            }, {
+                "propName": "icon",
+                "methodName": "updateIcon"
+            }, {
+                "propName": "disabled",
+                "methodName": "handleDisabledChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "wmUserIsTabbing",
+                "method": "toggleTabbingOn",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "wmUserIsNotTabbing",
+                "method": "toggleTabbingOff",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "scroll",
+                "method": "handleScroll",
+                "target": "window",
+                "capture": true,
+                "passive": true
+            }, {
+                "name": "keydown",
+                "method": "handleKeydown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}