import { Host, h } from "@stencil/core";
const NAMED_SIZES = new Set(['sm', 'md', 'lg', 'xl', 'full']);
/**
 * @part container - The inner semantic container element
 */
export class PdsContainer {
    constructor() {
        /**
         * Sets the semantic HTML tag rendered as the inner container element.
         * @default 'div'
         */
        this.tag = 'div';
        /**
         * If `true`, the container is centered horizontally using `margin-inline: auto`.
         * @default true
         */
        this.centered = true;
    }
    render() {
        const Tag = this.tag;
        const isNamed = this.size !== undefined && NAMED_SIZES.has(this.size);
        const customSize = this.size !== undefined && !isNamed ? this.size : undefined;
        const hostStyle = {};
        if (customSize)
            hostStyle['--pine-container-max-width'] = customSize;
        if (!this.centered)
            hostStyle['margin-inline'] = '0';
        return (h(Host, { key: 'b8055b9add2e9abfeaf61f233a0f22e559829eb2', class: { [`pds-container--${this.size}`]: isNamed }, style: Object.keys(hostStyle).length ? hostStyle : undefined }, h(Tag, { key: '8aac62d1a6639063d10b8c51539ca0bc3ca0bae4', part: "container" }, h("slot", { key: '747e55553b7660159ee9d0192ccb8ed29a99f0b0' }))));
    }
    static get is() { return "pds-container"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["pds-container.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["pds-container.css"]
        };
    }
    static get properties() {
        return {
            "size": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Sets the maximum width of the container. Accepts a named size token\n(`'sm'` | `'md'` | `'lg'` | `'xl'` | `'full'`) or any valid CSS length value (e.g. `'640px'`, `'50rem'`).\nWhen omitted, no max-width is applied."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "size"
            },
            "tag": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'div' | 'main' | 'section' | 'article'",
                    "resolved": "\"article\" | \"div\" | \"main\" | \"section\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "default",
                            "text": "'div'"
                        }],
                    "text": "Sets the semantic HTML tag rendered as the inner container element."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "tag",
                "defaultValue": "'div'"
            },
            "centered": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "default",
                            "text": "true"
                        }],
                    "text": "If `true`, the container is centered horizontally using `margin-inline: auto`."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "centered",
                "defaultValue": "true"
            }
        };
    }
}
//# sourceMappingURL=pds-container.js.map
