import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';

const pdsContainerCss = ":host{display:block;margin-inline:auto;max-width:var(--pine-container-max-width, none);width:100%}:host(.pds-container--sm){--pine-container-max-width:340px}:host(.pds-container--md){--pine-container-max-width:520px}:host(.pds-container--lg){--pine-container-max-width:700px}:host(.pds-container--xl){--pine-container-max-width:1064px}:host(.pds-container--full){--pine-container-max-width:1440px}";

const NAMED_SIZES = new Set(['sm', 'md', 'lg', 'xl', 'full']);
const PdsContainer$1 = /*@__PURE__*/ proxyCustomElement(class PdsContainer extends HTMLElement {
    constructor(registerHost) {
        super();
        if (registerHost !== false) {
            this.__registerHost();
        }
        this.__attachShadow();
        /**
         * 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 style() { return pdsContainerCss; }
}, [257, "pds-container", {
        "size": [1],
        "tag": [1],
        "centered": [4]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["pds-container"];
    components.forEach(tagName => { switch (tagName) {
        case "pds-container":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, PdsContainer$1);
            }
            break;
    } });
}

const PdsContainer = PdsContainer$1;
const defineCustomElement = defineCustomElement$1;

export { PdsContainer, defineCustomElement };
//# sourceMappingURL=pds-container.js.map

//# sourceMappingURL=pds-container.js.map