'use strict';

var index = require('./index-Bq84pjsN.js');
var utils = require('./utils-T4aQipUb.js');

const resetCss = () => `@layer reset, base, variants, states, sizes;  @layer reset {   :host {     display: contents;     -moz-text-size-adjust: none;     -webkit-text-size-adjust: none;     text-size-adjust: none;     font-family: var(--dds-font-family-sans);     font-feature-settings: var(--dds-font-features-sans);     text-rendering: optimizeLegibility;     -webkit-font-smoothing: antialiased;      *,     *::after,     *::before,     *::backdrop,     *::file-selector-button {       box-sizing: border-box;       margin: 0;       padding: 0;       min-inline-size: 0;       min-block-size: 0;     }      * {       scrollbar-width: thin;       scrollbar-color: color-mix(gray 50%, transparent);     }      *:focus-visible {       z-index: 1;     }      > * {       interpolate-size: allow-keywords;       -webkit-tap-highlight-color: transparent;     }   } } `;

const buttonCss = () => `@layer base{:host .dds-button{display:inline-flex;position:relative;justify-content:center;flex-shrink:0;block-size:var(--dds-button-shared-block-size);min-inline-size:var(--dds-button-shared-block-size);user-select:none;background:var(--dds-button-background);color:contrast-color(var(--dds-button-background));border:none;vertical-align:middle;cursor:pointer;font:var(--dds-button-shared-type);border-radius:var(--dds-button-radius, var(--dds-button-shared-radius));transition:background-color 140ms;&::before{content:"";position:absolute;inset:0;border-radius:inherit;border:var(--dds-button-border-width, var(--dds-size-25))         var(--dds-button-border-style, solid)         var(--dds-button-border-background, transparent)}.dds-button__content{display:inline-flex;align-items:center}.dds-button__content--label{padding-inline-start:var(         --dds-button-padding-inline-start,         var(--dds-button-shared-padding-inline)       );padding-inline-end:var(         --dds-button-padding-inline-end,         var(--dds-button-shared-padding-inline)       );gap:var(--dds-button-shared-gap)}.dds-button__content--label.dds-button__content--icon{--dds-button-padding-inline-start:var(--dds-size-150)}.dds-button__content--label.dds-button__content--disclosure{--dds-button-padding-inline-end:var(--dds-size-150)}.dds-button__spinner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}}}@layer variants{:host([variant="primary"]){--dds-button-background:var(--dds-button-background-primary-default);--dds-button-background-hover:var(--dds-button-background-primary-hover);--dds-button-background-pressed:var(       --dds-button-background-primary-pressed     );--dds-button-text:var(--dds-button-text-primary)}:host([variant="secondary"]),:host([variant="dashed"]){--dds-button-background:var(--dds-button-background-secondary-default);--dds-button-background-hover:var(--dds-button-background-secondary-hover);--dds-button-background-pressed:var(       --dds-button-background-secondary-pressed     );--dds-button-text:var(--dds-button-text-secondary);--dds-button-border-background:var(--dds-button-border-secondary)}:host([variant="dashed"]){--dds-button-border-style:dashed}:host([variant="tertiary"]){--dds-button-background-hover:var(--dds-button-background-secondary-hover);--dds-button-background-pressed:var(       --dds-button-background-secondary-pressed     );--dds-button-text:var(--dds-button-text-secondary)}}@layer states{:host .dds-button:hover{background:var(--dds-button-background-hover)}:host .dds-button:focus-visible{outline:var(--dds-button-shared-focus-outline-width) solid       var(--dds-button-shared-focus-background);outline-offset:var(--dds-button-shared-focus-outline-offset)}:host .dds-button:active{background:var(--dds-button-background-pressed)}:host([loading]){.dds-button{cursor:wait}.dds-button__content{visibility:hidden}}:host([disabled]){pointer-events:none;.dds-button{opacity:var(--dds-button-shared-disabled-opacity)}}}@layer rounded{:host([rounded]){--dds-button-radius:var(--dds-radius-full);.dds-button__content--label{--dds-button-padding-inline-start:var(--dds-size-300);--dds-button-padding-inline-end:var(--dds-size-300)}.dds-button__content--label.dds-button__content--icon{--dds-button-padding-inline-start:var(--dds-size-250)}}}@layer group{:host(.dds-button-group__button--first){.dds-button{border-start-end-radius:0;border-end-end-radius:0}}:host(.dds-button-group__button--inner){.dds-button{border-radius:0}}:host(.dds-button-group__button--inner),:host(.dds-button-group__button--last){.dds-button{margin-inline-start:-1px}}:host(.dds-button-group__button--last){.dds-button{border-start-start-radius:0;border-end-start-radius:0}}}`;

const Button = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.ddsClick = index.createEvent(this, "ddsClick");
        this.ddsFocus = index.createEvent(this, "ddsFocus");
        this.ddsBlur = index.createEvent(this, "ddsBlur");
    }
    get host() { return index.getElement(this); }
    shadowElement;
    inheritedAttributes = {};
    hasLabel = false;
    errors = [];
    // MARK: Props
    type = "button";
    variant = "secondary";
    tone = "default";
    disclosure;
    rounded;
    popovertarget;
    popovertargetaction = "toggle";
    loading = false;
    disabled = false;
    name;
    target;
    icon;
    href;
    accessibilityLabel;
    // MARK: Events
    ddsClick;
    ddsFocus;
    ddsBlur;
    // MARK: Lifecycle
    componentWillRender() {
        this.inheritedAttributes = utils.inheritAttributes(this.host, this.shadowElement);
    }
    componentWillLoad() {
        this.handleSlotChange();
    }
    /**
     * Re-link whenever the popovertarget ID prop changes.
     */
    linkPopoverTarget() {
        const innerButton = this.shadowElement;
        if (!innerButton) {
            return;
        }
        if (this.popovertarget) {
            // Walk up from the host element to find the popover in the light DOM.
            // getRootNode() returns the shadow root (or document) the host belongs to,
            // so we search from there to correctly cross scoped component boundaries.
            const root = this.host.getRootNode();
            const target = root.querySelector(`#${this.popovertarget}`);
            if (target) {
                innerButton.popoverTargetElement = target;
                innerButton.popoverTargetAction = this.popovertargetaction;
            }
        }
        else {
            innerButton.popoverTargetElement = null;
        }
    }
    handleSlotChange() {
        this.hasLabel = utils.hasSlot(this.host);
    }
    // MARK: Render
    render() {
        const { variant, type, hasLabel, icon, rounded, disclosure, disabled, inheritedAttributes, loading, } = this;
        const Tag = variant !== "link" ? "button" : "a";
        return (index.jsx(index.Host, { variant: variant, rounded: rounded, loading: loading, part: "root", children: index.jsxs(Tag, { class: `dds-button`, type: variant !== "link" ? type : "", onBlur: () => this.ddsBlur.emit(), onFocus: () => this.ddsFocus.emit(), disabled: disabled, ...inheritedAttributes, ref: (el) => (this.shadowElement = el), part: "button", children: [index.jsxs("span", { class: `
              dds-button__content
              ${hasLabel ? "dds-button__content--label" : ""}
              ${icon ? "dds-button__content--icon" : ""}
              ${disclosure ? "dds-button__content--disclosure" : ""}
            `, children: [icon && index.jsx("dds-icon", { name: icon, size: "m", part: "icon" }, '9fd79066c6e3e00f3282574496db23fc8cb3a64f'), index.jsx("span", { class: "dds-button__label", part: "label", children: index.jsx("slot", { onSlotchange: () => this.handleSlotChange() }, '028dc72194d7d86cf821ed84c29d01796c477e14') }, 'cf23c2f3c4adb4e6051886600e04eb22feab70e0'), disclosure && index.jsx("dds-icon", { name: `chevron-${disclosure}`, size: "m" }, 'a6d1cb8c41d3b956ca38e73d5e3270c8fe0b947a')] }, '29b43d7fd0e911945b3fe077c8de2c159e47c2a8'), loading && (index.jsx("span", { class: "dds-button__spinner", children: index.jsx("dds-spinner", { size: "m" }, '2aff6d9fdff640ae8203a5f4fcd7e07f0dc9d965') }, 'dbd11533a1e7cdb1dfd991b64c668f0facd90a2d'))] }, '7aafff60c6f68a04d3dcc8a15513217ee555bfb0') }, '9488c3cd075493fe2194683eb0130ce7e0274ca8'));
    }
    static get delegatesFocus() { return true; }
    static get watchers() { return {
        "popovertarget": [{
                "linkPopoverTarget": 0
            }],
        "popovertargetaction": [{
                "linkPopoverTarget": 0
            }]
    }; }
};
Button.style = resetCss() + buttonCss();

exports.dds_button = Button;
