import { r as registerInstance, g as getElement, j as jsx, H as Host } from './index-C7YNCRgy.js';

const gridCss = () => `@layer reset,base,variants; @layer base{:host .dds-grid{display:var(--dds-grid-display)}}@layer display{:host([display="grid"]){--dds-grid-display:grid}:host([display="inline"]){--dds-grid-display:inline-grid}}`;

const Grid = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
    }
    get host() { return getElement(this); }
    // MARK: Props
    columns;
    /**
     * Set tag for grid container
     */
    tag = 'div';
    validateTag(newValue) {
        const values = [
            'article',
            'aside',
            'div',
            'dl',
            'main',
            'nav',
            'ol',
            'section',
            'ul',
        ];
        if (!values.includes(newValue)) {
            this.tag = 'div';
        }
    }
    alignment;
    display = 'grid';
    // MARK: Lifecycle
    componentWillLoad() {
        // Validate attributes and set defaults
        if (this.tag) {
            this.validateTag(this.tag);
        }
    }
    // MARK: Render
    render() {
        const Tag = this.tag || 'div';
        return (jsx(Host, { display: this.display, children: jsx(Tag, { class: "dds-grid", children: jsx("slot", {}, 'a1611b784de5cad4bfe3e439c22cbc41fb62b38b') }, '4d0453998451055fba248020f72fa8c1ec5e58a4') }, 'c86f234d73413f61385324e2a9cb163adaf3b705'));
    }
    static get watchers() { return {
        "tag": [{
                "validateTag": 0
            }]
    }; }
};
Grid.style = gridCss();

export { Grid as dds_grid };
