import { h, Host } from "@stencil/core";
/**
 * Renders a small grid of color swatches for a palette. Used as the
 * inline preview inside [limebb-color-palette-picker](..) — both in
 * the trigger (the currently chosen palette) and in each row of its
 * dropdown list (so users can see the colors before picking). Pass
 * any CSS color strings (`rgb(var(--…))`, hex, etc.).
 *
 * The swatches are purely decorative — they carry no semantic
 * information beyond what the surrounding context (e.g. the picker
 * option's text and secondary text) already provides. The component
 * marks itself `aria-hidden` so assistive tech skips it cleanly.
 *
 * @exampleComponent limebb-example-color-palette-swatches
 * @private
 */
export class ColorPaletteSwatches {
    constructor() {
        /**
         * Ordered list of CSS color values to render as swatches.
         */
        this.colors = [];
    }
    render() {
        return (h(Host, { key: 'a3db5db1af1faced5922e1a9637b790b3a813915', "aria-hidden": "true" }, h("ol", { key: '5266e22482769d5bf0000e02ff2593ca05102068' }, this.colors.map((color, index) => (h("li", { key: index, style: { backgroundColor: color } }))))));
    }
    static get is() { return "limebb-color-palette-swatches"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["color-palette-swatches.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["color-palette-swatches.css"]
        };
    }
    static get properties() {
        return {
            "colors": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "string[]",
                    "resolved": "string[]",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Ordered list of CSS color values to render as swatches."
                },
                "getter": false,
                "setter": false,
                "defaultValue": "[]"
            }
        };
    }
}
