'use client';
'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var tslib = require('tslib');
var lit = require('lit');
var sgdsElement = require('../../base/sgds-element.cjs.js');
var overflowMenu = require('./overflow-menu.cjs.js');
var decorators_js = require('lit/decorators.js');
var sgdsDropdown = require('../Dropdown/sgds-dropdown.cjs.js');
var sgdsDropdownItem = require('../Dropdown/sgds-dropdown-item.cjs.js');
var sgdsIcon = require('../Icon/sgds-icon.cjs.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["default"] {
    constructor() {
        super(...arguments);
        /** Specifies a large or small button */
        this.size = "md";
    }
    render() {
        return lit.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["default"].styles, overflowMenu["default"]];
/** @internal */
SgdsOverflowMenu.dependencies = {
    "sgds-dropdown": sgdsDropdown.SgdsDropdown,
    "sgds-dropdown-item": sgdsDropdownItem.SgdsDropdownItem,
    "sgds-icon": sgdsIcon.SgdsIcon
};
tslib.__decorate([
    decorators_js.property({ type: String, reflect: true })
], SgdsOverflowMenu.prototype, "size", void 0);

exports.SgdsOverflowMenu = SgdsOverflowMenu;
exports["default"] = SgdsOverflowMenu;
//# sourceMappingURL=sgds-overflow-menu.cjs.js.map
