'use client';
import { __decorate } from 'tslib';
import { html } from 'lit';
import SgdsElement from '../../base/sgds-element.js';
import css_248z from './overflow-menu.js';
import { property } from 'lit/decorators.js';
import { SgdsDropdown } from '../Dropdown/sgds-dropdown.js';
import { SgdsDropdownItem } from '../Dropdown/sgds-dropdown-item.js';
import { SgdsIcon } from '../Icon/sgds-icon.js';

/**
 * @summary An overflow menu is a UI element, often represented by three dots (⋮ or …), that opens a menu with additional actions or options.
 * @slot default - The overflow menu items. Pass in sgds-dropdown-items in this slot
 */
class SgdsOverflowMenu extends SgdsElement {
    constructor() {
        super(...arguments);
        /** Specifies a large or small button */
        this.size = "md";
    }
    render() {
        return html `
      <sgds-dropdown>
        <button slot="toggler" class="overflow-btn">
          <sgds-icon name="three-dots" size=${this.size}></sgds-icon>
        </button>
        <slot></slot>
      </sgds-dropdown>
    `;
    }
}
SgdsOverflowMenu.styles = [...SgdsElement.styles, css_248z];
/** @internal */
SgdsOverflowMenu.dependencies = {
    "sgds-dropdown": SgdsDropdown,
    "sgds-dropdown-item": SgdsDropdownItem,
    "sgds-icon": SgdsIcon
};
__decorate([
    property({ type: String, reflect: true })
], SgdsOverflowMenu.prototype, "size", void 0);

export { SgdsOverflowMenu, SgdsOverflowMenu as default };
//# sourceMappingURL=sgds-overflow-menu.js.map
