var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { cssVar, parseDuration } from './animate';
import { LitElement, unsafeCSS } from 'lit';
import { property } from 'lit/decorators.js';
const css = unsafeCSS;
const tokenProcessors = {
    'sd-duration': (value) => parseDuration(value)
};
export default class SolidElement extends LitElement {
    connectedCallback() {
        super.connectedCallback();
        if (!this.onThemeChange)
            return;
        this.renderRoot.addEventListener('sd-theme-change', this.onThemeChange.bind(this));
    }
    disconnectedCallback() {
        super.disconnectedCallback();
        if (!this.onThemeChange)
            return;
        this.renderRoot.removeEventListener('sd-theme-change', this.onThemeChange.bind(this));
    }
    static { this.styles = [
        css `
      @import '../styles/src/modules/interactive.css';
      @import '../styles/src/modules/paragraph.css';
      @import '../styles/src/modules/headline.css';

      :host {
        /* Add default tailwind variables that get lost during compilation */
        --tw-blur: initial;
        --tw-border-style: solid;
        --tw-brightness: initial;
        --tw-contrast: initial;
        --tw-divide-y-reverse: 0;
        --tw-drop-shadow: initial;
        --tw-duration: initial;
        --tw-ease: initial;
        --tw-font-weight: initial;
        --tw-gradient-from-position: 0%;
        --tw-gradient-from: #0000;
        --tw-gradient-position: initial;
        --tw-gradient-stops: initial;
        --tw-gradient-to-position: 100%;
        --tw-gradient-to: #0000;
        --tw-gradient-via-position: 50%;
        --tw-gradient-via-stops: initial;
        --tw-gradient-via: #0000;
        --tw-grayscale: initial;
        --tw-hue-rotate: initial;
        --tw-inset-ring-color: initial;
        --tw-inset-ring-shadow: 0 0 #0000;
        --tw-inset-shadow-color: initial;
        --tw-inset-shadow: 0 0 #0000;
        --tw-invert: initial;
        --tw-opacity: initial;
        --tw-ring-color: initial;
        --tw-ring-inset: initial;
        --tw-ring-offset-color: #fff;
        --tw-ring-offset-shadow: 0 0 #0000;
        --tw-ring-offset-width: 0px;
        --tw-ring-shadow: 0 0 #0000;
        --tw-rotate-x: rotateX(0);
        --tw-rotate-y: rotateY(0);
        --tw-rotate-z: rotateZ(0);
        --tw-saturate: initial;
        --tw-sepia: initial;
        --tw-shadow-color: initial;
        --tw-shadow: 0 0 #0000;
        --tw-skew-x: skewX(0);
        --tw-skew-y: skewY(0);
        --tw-space-x-reverse: 0;
        --tw-tracking: initial;
        --tw-translate-x: 0;
        --tw-translate-y: 0;
        --tw-translate-z: 0;

        box-sizing: border-box;
      }

      :host *,
      :host *::before,
      :host *::after {
        box-sizing: inherit;
      }

      [hidden] {
        display: none !important;
      }
    `
    ]; }
    emit(name, options) {
        const event = new CustomEvent(name, {
            bubbles: true,
            cancelable: false,
            composed: true,
            detail: {},
            ...options
        });
        this.dispatchEvent(event);
        return event;
    }
    token(name, fallback) {
        const value = cssVar(`var(${name})`, this);
        if (value === null) {
            return fallback;
        }
        const processor = Object.keys(tokenProcessors).find(token => name.startsWith(token));
        return tokenProcessors[processor ?? name]?.(value) ?? value ?? fallback;
    }
}
__decorate([
    property()
], SolidElement.prototype, "dir", void 0);
__decorate([
    property()
], SolidElement.prototype, "lang", void 0);
