import { LitElement, html, css } from "lit";
import { customElement, property } from "lit/decorators.js";

@customElement("hsl-calculator")
export class HslCalculator extends LitElement {
    static styles = css`
        :host {
            display: block;
            border: 1px solid gray;
            padding: 16px;
            max-width: 800px;
        }
    `;

    @property()
    name = "World";

    render() {
        return html`
            <h1>Hello, ${this.name}!</h1>
        `;
    }
}

declare global {
    interface HTMLElementTagNameMap {
        "hsl-calculator": HslCalculator;
    }
}