@easemate/web-kit 0.2.0 → 0.3.0

package/build/components/curve/utils.js

@@ -1,521 +0,0 @@
-export const clampPoint = (point, bounds) => {
-    const minX = bounds?.minX ?? 0;
-    const maxX = bounds?.maxX ?? 1;
-    const minY = bounds?.minY ?? 0;
-    const maxY = bounds?.maxY ?? 1;
-    return {
-        x: Math.max(minX, Math.min(maxX, point.x)),
-        y: Math.max(minY, Math.min(maxY, point.y))
-    };
-};
-export const MIN_LINEAR_DELTA = 0.0001;
-let linearPointIdCounter = 0;
-const nextLinearPointId = () => {
-    linearPointIdCounter += 1;
-    return `linear-point-${linearPointIdCounter}`;
-};
-export const ensureLinearPointId = (point) => {
-    if (!point.id) {
-        point.id = nextLinearPointId();
-    }
-    return point.id;
-};
-export const cloneLinearPoint = (point) => {
-    const sourceId = ensureLinearPointId(point);
-    return {
-        ...point,
-        id: sourceId
-    };
-};
-export const cubicBezierPath = (points) => {
-    const { p1, p2 } = points;
-    const startX = 0;
-    const startY = 300;
-    const endX = 400;
-    const endY = 0;
-    const cp1x = p1.x * 400;
-    const cp1y = (1 - p1.y) * 300;
-    const cp2x = p2.x * 400;
-    const cp2y = (1 - p2.y) * 300;
-    return `M ${startX} ${startY} C ${cp1x} ${cp1y}, ${cp2x} ${cp2y}, ${endX} ${endY}`;
-};
-export const linearDisplayPath = (points) => {
-    if (points.length < 2) {
-        return '';
-    }
-    const toSvg = (p) => {
-        return {
-            x: p.x * 400,
-            y: (1 - p.y) * 300
-        };
-    };
-    const startPoint = points[0];
-    if (!startPoint) {
-        return '';
-    }
-    const start = toSvg(startPoint);
-    let d = `M ${start.x} ${start.y}`;
-    for (let index = 0; index < points.length - 1; index += 1) {
-        const p1 = points[index];
-        const p2 = points[index + 1];
-        if (!p1 || !p2) {
-            continue;
-        }
-        const cp1 = {
-            x: p1.x + (p1.cpOutX ?? 0),
-            y: p1.y + (p1.cpOutY ?? 0)
-        };
-        const cp2 = {
-            x: p2.x + (p2.cpInX ?? 0),
-            y: p2.y + (p2.cpInY ?? 0)
-        };
-        if (cp1.x === p1.x && cp1.y === p1.y && cp2.x === p2.x && cp2.y === p2.y) {
-            const end = toSvg(p2);
-            d += ` L ${end.x} ${end.y}`;
-        }
-        else {
-            const svgCp1 = toSvg(cp1);
-            const svgCp2 = toSvg(cp2);
-            const end = toSvg(p2);
-            d += ` C ${svgCp1.x} ${svgCp1.y}, ${svgCp2.x} ${svgCp2.y}, ${end.x} ${end.y}`;
-        }
-    }
-    return d;
-};
-const perpendicularDistance = (point, lineStart, lineEnd) => {
-    const dx = lineEnd.x - lineStart.x;
-    const dy = lineEnd.y - lineStart.y;
-    if (dx === 0 && dy === 0) {
-        return Math.sqrt((point.x - lineStart.x) ** 2 + (point.y - lineStart.y) ** 2);
-    }
-    const numerator = Math.abs(dy * point.x - dx * point.y + lineEnd.x * lineStart.y - lineEnd.y * lineStart.x);
-    const denominator = Math.sqrt(dx * dx + dy * dy);
-    return numerator / denominator;
-};
-const simplifyPoints = (points, epsilon) => {
-    if (points.length < 3) {
-        return points;
-    }
-    let dmax = 0;
-    let index = 0;
-    const end = points.length - 1;
-    const startPoint = points[0];
-    const endPoint = points[end];
-    if (!startPoint || !endPoint) {
-        return points;
-    }
-    for (let i = 1; i < end; i++) {
-        const point = points[i];
-        if (!point) {
-            continue;
-        }
-        const d = perpendicularDistance(point, startPoint, endPoint);
-        if (d > dmax) {
-            index = i;
-            dmax = d;
-        }
-    }
-    if (dmax > epsilon) {
-        const recResults1 = simplifyPoints(points.slice(0, index + 1), epsilon);
-        const recResults2 = simplifyPoints(points.slice(index, end + 1), epsilon);
-        return [...recResults1.slice(0, -1), ...recResults2];
-    }
-    return [startPoint, endPoint];
-};
-export const generateCubicBezierCSS = (points, name, variant = 'animation') => {
-    const { p1, p2 } = points;
-    const timingFunction = `cubic-bezier(${p1.x.toFixed(3)}, ${p1.y.toFixed(3)}, ${p2.x.toFixed(3)}, ${p2.y.toFixed(3)})`;
-    const code = `
-    .${name} {
-      ${variant}-timing-function: ${timingFunction};
-    }
-  `;
-    return {
-        code,
-        timingFunction
-    };
-};
-export const getLinearApproximation = (points, options = {}) => {
-    const { simplify = 0, round = 5 } = options;
-    const samples = [];
-    const numSamplesPerSegment = 20;
-    const sortedPoints = [...points].sort((a, b) => a.x - b.x);
-    for (let index = 0; index < sortedPoints.length - 1; index += 1) {
-        const p1 = sortedPoints[index];
-        const p2 = sortedPoints[index + 1];
-        if (!p1 || !p2) {
-            continue;
-        }
-        if (index === 0) {
-            samples.push({ x: p1.x, y: p1.y });
-        }
-        const cp1 = {
-            x: p1.x + (p1.cpOutX ?? 0),
-            y: p1.y + (p1.cpOutY ?? 0)
-        };
-        const cp2 = {
-            x: p2.x + (p2.cpInX ?? 0),
-            y: p2.y + (p2.cpInY ?? 0)
-        };
-        for (let step = 1; step <= numSamplesPerSegment; step += 1) {
-            const t = step / numSamplesPerSegment;
-            const x = cubicBezier(t, p1.x, cp1.x, cp2.x, p2.x);
-            const y = cubicBezier(t, p1.y, cp1.y, cp2.y, p2.y);
-            samples.push({ x, y });
-        }
-    }
-    const normalizedSamples = [];
-    let lastX = -Infinity;
-    for (const sample of samples) {
-        const clampedX = Math.max(0, Math.min(1, sample.x));
-        const clampedY = Math.max(-2, Math.min(3, sample.y));
-        if (clampedX > lastX + MIN_LINEAR_DELTA) {
-            normalizedSamples.push({ x: clampedX, y: clampedY });
-            lastX = clampedX;
-        }
-    }
-    if (normalizedSamples.length < 2) {
-        return [
-            { x: 0, y: 0 },
-            { x: 1, y: 1 }
-        ];
-    }
-    const firstPoint = sortedPoints[0];
-    if (firstPoint && Math.abs(firstPoint.x) < MIN_LINEAR_DELTA && normalizedSamples.length > 0) {
-        const firstSample = normalizedSamples[0];
-        if (firstSample) {
-            firstSample.x = 0;
-        }
-    }
-    const lastPoint = sortedPoints[sortedPoints.length - 1];
-    if (lastPoint && Math.abs(lastPoint.x - 1) < MIN_LINEAR_DELTA && normalizedSamples.length > 0) {
-        const lastSample = normalizedSamples[normalizedSamples.length - 1];
-        if (lastSample) {
-            lastSample.x = 1;
-        }
-    }
-    let finalSamples = normalizedSamples;
-    if (simplify > 0) {
-        finalSamples = simplifyPoints(normalizedSamples, simplify);
-    }
-    return finalSamples.map((sample) => {
-        return {
-            x: sample.x,
-            y: Number(sample.y.toFixed(round))
-        };
-    });
-};
-export const generateLinearCSS = (points, name, variant = 'animation', options = {}) => {
-    if (!Array.isArray(points) || points.length < 2) {
-        return { code: '', timingFunction: '' };
-    }
-    const finalSamples = getLinearApproximation(points, options);
-    const parts = finalSamples.map((sample) => {
-        const y = sample.y;
-        const x = Number((sample.x * 100).toFixed(2));
-        return `${y} ${x}%`;
-    });
-    const timingFunction = `linear(${parts.join(', ')})`;
-    const code = `
-      .${name} {
-        ${variant}-timing-function: ${timingFunction};
-      }
-    `;
-    return { code, timingFunction };
-};
-export const cubicBezierToLinear = (points, steps = 20) => {
-    const linearPoints = [];
-    for (let i = 0; i <= steps; i++) {
-        const t = i / steps;
-        const x = cubicBezier(t, 0, points.p1.x, points.p2.x, 1);
-        const y = cubicBezier(t, 0, points.p1.y, points.p2.y, 1);
-        linearPoints.push({ x, y });
-    }
-    return linearPoints;
-};
-const cubicBezier = (t, p0, p1, p2, p3) => {
-    const u = 1 - t;
-    const tt = t * t;
-    const uu = u * u;
-    const uuu = uu * u;
-    const ttt = tt * t;
-    return uuu * p0 + 3 * uu * t * p1 + 3 * u * tt * p2 + ttt * p3;
-};
-export const validateCubicBezierPoints = (points) => {
-    const { p1, p2 } = points;
-    return p1.x >= 0 && p1.x <= 1 && p2.x >= 0 && p2.x <= 1;
-};
-export const validateLinearPoints = (points) => {
-    if (points.length < 2) {
-        return false;
-    }
-    const sortedPoints = [...points].sort((a, b) => a.x - b.x);
-    for (let index = 0; index < sortedPoints.length; index += 1) {
-        const point = sortedPoints[index];
-        if (!point) {
-            return false;
-        }
-        if (point.x < 0 || point.x > 1) {
-            return false;
-        }
-        if (index >= sortedPoints.length - 1) {
-            continue;
-        }
-        const next = sortedPoints[index + 1];
-        if (!next) {
-            return false;
-        }
-        if (next.x <= point.x + MIN_LINEAR_DELTA) {
-            return false;
-        }
-    }
-    const first = sortedPoints[0];
-    const last = sortedPoints[sortedPoints.length - 1];
-    if (first && Math.abs(first.x) > MIN_LINEAR_DELTA) {
-        return false;
-    }
-    if (last && Math.abs(last.x - 1) > MIN_LINEAR_DELTA) {
-        return false;
-    }
-    return true;
-};
-export const normalizeLinearPoints = (points) => {
-    if (points.length === 0) {
-        return [];
-    }
-    const normalized = [...points].sort((a, b) => a.x - b.x).map((point) => cloneLinearPoint(point));
-    const first = normalized[0];
-    if (first) {
-        first.x = 0;
-    }
-    const last = normalized[normalized.length - 1];
-    if (last) {
-        last.x = 1;
-    }
-    for (let index = 0; index < normalized.length; index += 1) {
-        const point = normalized[index];
-        if (!point) {
-            continue;
-        }
-        const minY = -2;
-        const maxY = 3;
-        point.y = Math.max(minY, Math.min(maxY, point.y));
-        if ((point.cpInX ?? 0) > 0) {
-            point.cpInX = 0;
-        }
-        if ((point.cpOutX ?? 0) < 0) {
-            point.cpOutX = 0;
-        }
-        const handleThreshold = 0;
-        if (Math.abs(point.cpInX ?? 0) < handleThreshold && Math.abs(point.cpInY ?? 0) < handleThreshold) {
-            delete point.cpInX;
-            delete point.cpInY;
-        }
-        if (Math.abs(point.cpOutX ?? 0) < handleThreshold && Math.abs(point.cpOutY ?? 0) < handleThreshold) {
-            delete point.cpOutX;
-            delete point.cpOutY;
-        }
-        if (point.cpInX === undefined && point.cpOutX === undefined) {
-            delete point.isLinked;
-            delete point.mirrorLength;
-        }
-        else if (point.isLinked !== true) {
-            point.mirrorLength = false;
-        }
-    }
-    return normalized;
-};
-const clamp01 = (value) => {
-    if (Number.isNaN(value)) {
-        return 0;
-    }
-    return Math.min(1, Math.max(0, value));
-};
-export const parseCubicBezierValue = (input) => {
-    const match = input.trim().match(/^cubic-bezier\s*\((.+)\)$/i);
-    if (!match) {
-        return null;
-    }
-    const body = match[1];
-    if (!body) {
-        return null;
-    }
-    const parts = body
-        .split(',')
-        .map((part) => Number.parseFloat(part.trim()))
-        .filter((value) => Number.isFinite(value));
-    if (parts.length !== 4) {
-        return null;
-    }
-    const [x1, y1, x2, y2] = parts;
-    if ([x1, y1, x2, y2].some((value) => Number.isNaN(value))) {
-        return null;
-    }
-    return {
-        p1: { x: clamp01(x1), y: y1 },
-        p2: { x: clamp01(x2), y: y2 }
-    };
-};
-const ensureStopPositions = (stops) => {
-    if (stops.length === 0) {
-        return;
-    }
-    const first = stops[0];
-    if (first && first.x == null) {
-        first.x = 0;
-    }
-    const lastIndex = stops.length - 1;
-    const last = stops[lastIndex];
-    if (last && last.x == null) {
-        last.x = 1;
-    }
-    const assignBetween = (startIndex, endIndex) => {
-        const startStop = stops[startIndex];
-        const endStop = stops[endIndex];
-        if (!startStop || !endStop || startStop.x == null || endStop.x == null) {
-            return;
-        }
-        const span = endStop.x - startStop.x;
-        const segments = endIndex - startIndex;
-        if (segments <= 1) {
-            return;
-        }
-        for (let offset = 1; offset < segments; offset += 1) {
-            const index = startIndex + offset;
-            const ratio = offset / segments;
-            const target = stops[index];
-            if (target) {
-                target.x = startStop.x + span * ratio;
-            }
-        }
-    };
-    let lastDefined = 0;
-    for (let index = 1; index < stops.length; index += 1) {
-        if (stops[index]?.x != null) {
-            assignBetween(lastDefined, index);
-            lastDefined = index;
-        }
-    }
-    if (lastDefined < stops.length - 1) {
-        assignBetween(lastDefined, stops.length - 1);
-    }
-};
-export const parseLinearTimingFunction = (input) => {
-    const match = input.trim().match(/^linear\s*\((.+)\)$/is);
-    if (!match) {
-        return null;
-    }
-    const body = match[1];
-    if (!body) {
-        return null;
-    }
-    const segments = body
-        .split(',')
-        .map((segment) => segment.trim())
-        .filter((segment) => segment.length > 0);
-    if (segments.length < 2) {
-        return null;
-    }
-    const stops = [];
-    for (const segment of segments) {
-        const parts = segment.split(/\s+/).filter((part) => part.length > 0);
-        if (parts.length === 0) {
-            continue;
-        }
-        const valueToken = parts[0];
-        if (!valueToken) {
-            continue;
-        }
-        const value = Number.parseFloat(valueToken);
-        if (Number.isNaN(value)) {
-            return null;
-        }
-        let position = null;
-        for (let index = 1; index < parts.length; index += 1) {
-            const token = parts[index];
-            if (!token) {
-                continue;
-            }
-            const percentMatch = token.match(/^(-?\d+(?:\.\d+)?)%$/);
-            if (percentMatch) {
-                const [, percentValue] = percentMatch;
-                if (percentValue === undefined) {
-                    break;
-                }
-                const parsed = Number.parseFloat(percentValue);
-                if (!Number.isNaN(parsed)) {
-                    position = clamp01(parsed / 100);
-                }
-                break;
-            }
-        }
-        stops.push({ y: value, x: position });
-    }
-    if (stops.length < 2) {
-        return null;
-    }
-    ensureStopPositions(stops);
-    const rawPoints = stops.map((stop) => {
-        const x = stop.x ?? 0;
-        return { x: clamp01(x), y: stop.y };
-    });
-    return normalizeLinearPoints(rawPoints);
-};
-export const vectorLength = (dx, dy) => Math.sqrt(dx * dx + dy * dy);
-export const normalizeVector = (dx, dy) => {
-    const length = vectorLength(dx, dy);
-    if (length === 0) {
-        return { dx: 0, dy: 0 };
-    }
-    return { dx: dx / length, dy: dy / length };
-};
-export const smoothLinearPoints = (points, tension = 0.25) => {
-    if (points.length < 2) {
-        return points;
-    }
-    return points.map((point, index) => {
-        const prev = points[index - 1];
-        const next = points[index + 1];
-        const smoothedPoint = { ...point, isLinked: true, mirrorLength: true };
-        if (index === 0 && next) {
-            const dx = next.x - point.x;
-            const dy = next.y - point.y;
-            const length = Math.sqrt(dx * dx + dy * dy);
-            const handleLength = length * tension;
-            if (length > 0) {
-                smoothedPoint.cpOutX = (dx / length) * handleLength;
-                smoothedPoint.cpOutY = (dy / length) * handleLength;
-            }
-            return smoothedPoint;
-        }
-        if (index === points.length - 1 && prev) {
-            const dx = point.x - prev.x;
-            const dy = point.y - prev.y;
-            const length = Math.sqrt(dx * dx + dy * dy);
-            const handleLength = length * tension;
-            if (length > 0) {
-                smoothedPoint.cpInX = -(dx / length) * handleLength;
-                smoothedPoint.cpInY = -(dy / length) * handleLength;
-            }
-            return smoothedPoint;
-        }
-        if (prev && next) {
-            const tangentX = next.x - prev.x;
-            const tangentY = next.y - prev.y;
-            const tangentLength = Math.sqrt(tangentX * tangentX + tangentY * tangentY);
-            if (tangentLength > 0) {
-                const normalizedTx = tangentX / tangentLength;
-                const normalizedTy = tangentY / tangentLength;
-                const distToPrev = Math.sqrt((point.x - prev.x) ** 2 + (point.y - prev.y) ** 2);
-                const distToNext = Math.sqrt((next.x - point.x) ** 2 + (next.y - point.y) ** 2);
-                const inHandleLength = distToPrev * tension;
-                const outHandleLength = distToNext * tension;
-                smoothedPoint.cpInX = -normalizedTx * inHandleLength;
-                smoothedPoint.cpInY = -normalizedTy * inHandleLength;
-                smoothedPoint.cpOutX = normalizedTx * outHandleLength;
-                smoothedPoint.cpOutY = normalizedTy * outHandleLength;
-            }
-        }
-        return smoothedPoint;
-    });
-};

package/build/components/index.cjs

@@ -1,18 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./code/index.cjs"), exports);
-__exportStar(require("./curve/index.cjs"), exports);

package/build/components/index.d.cts

@@ -1,2 +0,0 @@
-export * from "./code/index.cjs";
-export * from "./curve/index.cjs";

package/build/components/index.d.ts

@@ -1,2 +0,0 @@
-export * from "./code/index.js";
-export * from "./curve/index.js";

package/build/components/index.js

@@ -1,2 +0,0 @@
-export * from "./code/index.js";
-export * from "./curve/index.js";

package/build/decorators/Component.cjs

@@ -1,127 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Component = void 0;
-const lit_html_1 = require("lit-html");
-const styleCache = new Map();
-const normalizeTemplate = (template) => {
-    if (typeof template === 'function') {
-        return template;
-    }
-    if (template && typeof template === 'object' && '_$litTemplate$' in template) {
-        return function () {
-            return template;
-        };
-    }
-    return function () {
-        return null;
-    };
-};
-const fetchStyles = async (urls) => Promise.all(urls.map((url) => {
-    const cached = styleCache.get(url);
-    if (cached) {
-        return cached;
-    }
-    const request = fetch(url)
-        .then((response) => (response.ok ? response.text() : ''))
-        .catch(() => '');
-    styleCache.set(url, request);
-    return request;
-}));
-const Component = (options) => (Base, _context) => {
-    const { tag, template, styles = '', styleUrls = [], observedAttributes = [], shadowMode = 'open', autoSlot = true } = options;
-    if (!tag) {
-        throw new Error('@Component requires a "tag" option.');
-    }
-    const templateFn = normalizeTemplate(template);
-    class Decorated extends Base {
-        static get observedAttributes() {
-            const parent = 'observedAttributes' in Base && Array.isArray(Base.observedAttributes)
-                ? Base.observedAttributes
-                : [];
-            const own = Array.isArray(observedAttributes) ? observedAttributes : [];
-            return Array.from(new Set([...parent, ...own]));
-        }
-        #shadow;
-        #styles = styles;
-        #styleUrls = [...styleUrls];
-        #renderScheduled = false;
-        constructor(...args) {
-            super(...args);
-            this.#shadow = this.attachShadow({ mode: shadowMode });
-            this.renderRoot = this.#shadow;
-        }
-        get shadow() {
-            return this.renderRoot;
-        }
-        connectedCallback() {
-            Base.prototype.connectedCallback?.call(this);
-            void this.#loadStyles().finally(() => {
-                this.requestRender();
-            });
-        }
-        disconnectedCallback() {
-            Base.prototype.disconnectedCallback?.call(this);
-            this.#renderScheduled = false;
-        }
-        attributeChangedCallback(name, oldValue, newValue) {
-            Base.prototype.attributeChangedCallback?.call(this, name, oldValue, newValue);
-            if (oldValue !== newValue) {
-                this.onAttributeChange?.(name, oldValue, newValue);
-            }
-        }
-        requestRender() {
-            if (this.#renderScheduled) {
-                return;
-            }
-            this.#renderScheduled = true;
-            requestAnimationFrame(() => {
-                this.#renderScheduled = false;
-                this.#render();
-            });
-        }
-        async #loadStyles() {
-            if (!this.#styleUrls.length) {
-                return;
-            }
-            const fetched = await fetchStyles(this.#styleUrls);
-            const inlineStyles = this.#styles ? [this.#styles] : [];
-            this.#styles = [...inlineStyles, ...fetched.filter(Boolean)].join('\n');
-        }
-        #render() {
-            const root = this.#shadow;
-            let templateResult;
-            if (typeof this.render === 'function') {
-                templateResult = this.render();
-            }
-            else {
-                templateResult = templateFn.call(this, this);
-            }
-            const styleTemplate = this.#styles ? (0, lit_html_1.html) `<style>${this.#styles}</style>` : null;
-            const slotTemplate = autoSlot ? (0, lit_html_1.html) `<slot></slot>` : null;
-            const completeTemplate = (0, lit_html_1.html) `
-          ${styleTemplate}
-          ${templateResult ?? null}
-          ${slotTemplate}
-        `;
-            const commit = () => {
-                (0, lit_html_1.render)(completeTemplate, root);
-                this.afterRender?.();
-            };
-            if (typeof this.wrapRender === 'function') {
-                const fragment = document.createDocumentFragment();
-                const tempDiv = document.createElement('div');
-                (0, lit_html_1.render)(completeTemplate, tempDiv);
-                fragment.append(...tempDiv.childNodes);
-                this.wrapRender(commit, { fragment, root });
-                return;
-            }
-            commit();
-        }
-    }
-    // SSR safety: only register in browser environments
-    if (typeof customElements !== 'undefined' && !customElements.get(tag)) {
-        customElements.define(tag, Decorated);
-    }
-    return Decorated;
-};
-exports.Component = Component;

package/build/decorators/Component.d.cts

@@ -1,28 +0,0 @@
-import { type TemplateResult } from 'lit-html';
-type Constructor<T extends HTMLElement> = new (...args: unknown[]) => T;
-type RenderableElement = HTMLElement & {
-    render?(): TemplateResult | null | undefined;
-    afterRender?(): void;
-    wrapRender?(commit: () => void, context: RenderContext): void;
-    onAttributeChange?(name: string, oldValue: string | null, newValue: string | null): void;
-    requestRender?(): void;
-    renderRoot?: ShadowRoot | HTMLElement;
-};
-type TemplateValue<TElement extends RenderableElement> = TemplateResult | null | undefined | ((this: TElement, host: TElement) => TemplateResult | null | undefined);
-interface ComponentOptions<TElement extends RenderableElement = RenderableElement> {
-    tag: string;
-    template?: TemplateValue<TElement>;
-    styles?: string;
-    styleUrls?: string[];
-    observedAttributes?: string[];
-    shadowMode?: ShadowRootMode;
-    autoSlot?: boolean;
-}
-export interface RenderContext {
-    fragment: DocumentFragment;
-    root: ShadowRoot | HTMLElement;
-}
-export declare const Component: <TElement extends RenderableElement = RenderableElement>(options: ComponentOptions<TElement>) => <TBase extends Constructor<TElement> & {
-    observedAttributes?: string[];
-}>(Base: TBase, _context: ClassDecoratorContext) => TBase;
-export {};