godown 3.0.0-canary.0 → 3.0.0-canary.1

package/dev/components/link.d.ts

@@ -0,0 +1,20 @@
+import SuperAnchor from "../core/super-anchor.js";
+/**
+ * {@linkcode Link} is used for link jumping.
+ *
+ * Set `type` to `"push" `or `"replace"`,
+ * will invoke the history api and trigger the {@linkcode Router.updateAll}.
+ *
+ * @category navigation
+ */
+declare class Link extends SuperAnchor {
+    /**
+     * If "push", call `history.pushState`.
+     *
+     * If "replace", call `history.replaceState`
+     */
+    type: "push" | "replace" | "normal";
+    protected _handleClick(e: MouseEvent): void;
+}
+export default Link;
+//# sourceMappingURL=link.d.ts.map

package/dev/components/link.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"link.d.ts","sourceRoot":"","sources":["../../src/components/link.ts"],"names":[],"mappings":"AAGA,OAAO,WAAW,MAAM,yBAAyB,CAAC;AAKlD;;;;;;;GAOG;AACH,cACM,IAAK,SAAQ,WAAW;IAC5B;;;;OAIG;IAEH,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,QAAQ,CAAY;IAE/C,SAAS,CAAC,YAAY,CAAC,CAAC,EAAE,UAAU;CAOrC;AAED,eAAe,IAAI,CAAC"}

package/dev/components/link.js

@@ -0,0 +1,40 @@
+import { __decorate } from "tslib";
+import { godown } from "@godown/element/decorators/godown.js";
+import { property } from "lit/decorators.js";
+import SuperAnchor from "../core/super-anchor.js";
+import Router from "./router.js";
+const protoName = "link";
+/**
+ * {@linkcode Link} is used for link jumping.
+ *
+ * Set `type` to `"push" `or `"replace"`,
+ * will invoke the history api and trigger the {@linkcode Router.updateAll}.
+ *
+ * @category navigation
+ */
+let Link = class Link extends SuperAnchor {
+    constructor() {
+        super(...arguments);
+        /**
+         * If "push", call `history.pushState`.
+         *
+         * If "replace", call `history.replaceState`
+         */
+        this.type = "normal";
+    }
+    _handleClick(e) {
+        if (this.type === "push" || this.type === "replace") {
+            e.preventDefault();
+            (history[`${this.type}State`])(null, "", this.href);
+            Router.updateAll();
+        }
+    }
+};
+__decorate([
+    property()
+], Link.prototype, "type", void 0);
+Link = __decorate([
+    godown(protoName)
+], Link);
+export default Link;
+//# sourceMappingURL=link.js.map

package/dev/components/link.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"link.js","sourceRoot":"","sources":["../../src/components/link.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,sCAAsC,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,OAAO,WAAW,MAAM,yBAAyB,CAAC;AAClD,OAAO,MAAM,MAAM,aAAa,CAAC;AAEjC,MAAM,SAAS,GAAG,MAAM,CAAC;AAEzB;;;;;;;GAOG;AAEH,IAAM,IAAI,GAAV,MAAM,IAAK,SAAQ,WAAW;IAA9B;;QACE;;;;WAIG;QAEH,SAAI,GAAkC,QAAQ,CAAC;IASjD,CAAC;IAPW,YAAY,CAAC,CAAa;QAClC,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,EAAE,CAAC;YACpD,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,CAAC,OAAO,CAAC,GAAG,IAAI,CAAC,IAAI,OAAO,CAAC,CAAC,CAAC,IAAI,EAAE,EAAE,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;YACpD,MAAM,CAAC,SAAS,EAAE,CAAC;QACrB,CAAC;IACH,CAAC;CACF,CAAA;AATC;IADC,QAAQ,EAAE;kCACoC;AAP3C,IAAI;IADT,MAAM,CAAC,SAAS,CAAC;GACZ,IAAI,CAgBT;AAED,eAAe,IAAI,CAAC"}

package/dev/components/progress.d.ts

@@ -0,0 +1,30 @@
+import { GlobalStyle } from "../core/global-style.js";
+/**
+ * {@linkcode Progress} similar to <progress>.
+ *
+ * @category feedback
+ */
+declare class Progress extends GlobalStyle {
+    /**
+     * Maximum.
+     */
+    max: number;
+    /**
+     * Minimum.
+     */
+    min: number;
+    /**
+     * Input value.
+     */
+    value: any;
+    protected render(): import("lit").TemplateResult<1>;
+    /**
+     * Convert s to a percentage without a percent sign.
+     *
+     * @param s String or number to convert.
+     * @returns Percentage without a percent sign.
+     */
+    parsePercent(s?: string | number): number;
+}
+export default Progress;
+//# sourceMappingURL=progress.d.ts.map

package/dev/components/progress.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress.d.ts","sourceRoot":"","sources":["../../src/components/progress.ts"],"names":[],"mappings":"AAKA,OAAO,EAAiB,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAIrE;;;;GAIG;AACH,cA2CM,QAAS,SAAQ,WAAW;IAChC;;OAEG;IAEH,GAAG,SAAK;IACR;;OAEG;IAEH,GAAG,SAAK;IACR;;OAEG;IAEH,KAAK,MAAQ;IAEb,SAAS,CAAC,MAAM;IAYhB;;;;;OAKG;IACH,YAAY,CAAC,CAAC,GAAE,MAAM,GAAG,MAAY,GAAG,MAAM;CAM/C;AAED,eAAe,QAAQ,CAAC"}

package/dev/components/progress.js

@@ -0,0 +1,108 @@
+import { __decorate } from "tslib";
+import { godown } from "@godown/element/decorators/godown.js";
+import { styles } from "@godown/element/decorators/styles.js";
+import { css, html } from "lit";
+import { property } from "lit/decorators.js";
+import { cssGlobalVars, GlobalStyle } from "../core/global-style.js";
+const protoName = "progress";
+/**
+ * {@linkcode Progress} similar to <progress>.
+ *
+ * @category feedback
+ */
+let Progress = class Progress extends GlobalStyle {
+    constructor() {
+        super(...arguments);
+        /**
+         * Maximum.
+         */
+        this.max = 1;
+        /**
+         * Minimum.
+         */
+        this.min = 0;
+        /**
+         * Input value.
+         */
+        this.value = null;
+    }
+    render() {
+        let width = 20;
+        let className;
+        if (this.value !== null) {
+            width = this.parsePercent(this.value);
+            className = "static";
+        }
+        return html `<div part="root" class="${className}">
+      <i part="value" style="width:${width}%;"></i>
+    </div>`;
+    }
+    /**
+     * Convert s to a percentage without a percent sign.
+     *
+     * @param s String or number to convert.
+     * @returns Percentage without a percent sign.
+     */
+    parsePercent(s = "0") {
+        if (String(s).includes("%")) {
+            return parseFloat(String(s));
+        }
+        return (parseFloat(String(s)) / (this.max - this.min)) * 100;
+    }
+};
+__decorate([
+    property({ type: Number })
+], Progress.prototype, "max", void 0);
+__decorate([
+    property({ type: Number })
+], Progress.prototype, "min", void 0);
+__decorate([
+    property({ type: Number, reflect: true })
+], Progress.prototype, "value", void 0);
+Progress = __decorate([
+    godown(protoName),
+    styles(css `
+  :host {
+    width: 100%;
+    height: 0.5em;
+    display: inline-block;
+    border-radius: 0.25em;
+    background: var(${cssGlobalVars.passive});
+    color: var(${cssGlobalVars.active});
+  }
+
+  [part="root"] {
+    height: inherit;
+    z-index: 1;
+    position: relative;
+    border-radius: inherit;
+  }
+
+  [part="value"] {
+    position: absolute;
+    z-index: 2;
+    top: 0;
+    left: 0;
+    height: 100%;
+    border-radius: inherit;
+    transition: all 0.3s;
+    animation: progress 1.8s ease-in-out infinite alternate;
+    background: currentColor;
+  }
+
+  @keyframes progress {
+    from {
+      left: 0;
+    }
+    to {
+      left: 80%;
+    }
+  }
+
+  .static [part="value"] {
+    animation: none;
+  }
+`)
+], Progress);
+export default Progress;
+//# sourceMappingURL=progress.js.map

package/dev/components/progress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress.js","sourceRoot":"","sources":["../../src/components/progress.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,sCAAsC,CAAC;AAC9D,OAAO,EAAE,MAAM,EAAE,MAAM,sCAAsC,CAAC;AAC9D,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAChC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAErE,MAAM,SAAS,GAAG,UAAU,CAAC;AAE7B;;;;GAIG;AA4CH,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,WAAW;IAAlC;;QACE;;WAEG;QAEH,QAAG,GAAG,CAAC,CAAC;QACR;;WAEG;QAEH,QAAG,GAAG,CAAC,CAAC;QACR;;WAEG;QAEH,UAAK,GAAG,IAAI,CAAC;IA0Bf,CAAC;IAxBW,MAAM;QACd,IAAI,KAAK,GAAG,EAAE,CAAC;QACf,IAAI,SAAiB,CAAC;QACtB,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI,EAAE,CAAC;YACxB,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YACtC,SAAS,GAAG,QAAQ,CAAC;QACvB,CAAC;QACD,OAAO,IAAI,CAAA,2BAA2B,SAAS;qCACd,KAAK;WAC/B,CAAC;IACV,CAAC;IAED;;;;;OAKG;IACH,YAAY,CAAC,IAAqB,GAAG;QACnC,IAAI,MAAM,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;YAC5B,OAAO,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;QAC/B,CAAC;QACD,OAAO,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC;IAC/D,CAAC;CACF,CAAA;AApCC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qCACnB;AAKR;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qCACnB;AAKR;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCAC7B;AAfT,QAAQ;IA3Cb,MAAM,CAAC,SAAS,CAAC;IACjB,MAAM,CAAC,GAAG,CAAA;;;;;;sBAMW,aAAa,CAAC,OAAO;iBAC1B,aAAa,CAAC,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkCpC,CAAC;GACI,QAAQ,CAyCb;AAED,eAAe,QAAQ,CAAC"}

package/dev/components/range.d.ts

@@ -0,0 +1,60 @@
+import SuperInput from "../core/super-input.js";
+/**
+ * {@linkcode Range} is similar to <input type="range">.
+ *
+ * Value accepts a number, or an array of two numbers.
+ *
+ * Number have one handle, array have two.
+ *
+ * @category input
+ */
+declare class Range extends SuperInput {
+    /**
+     * Minimum value.
+     */
+    min: number;
+    /**
+     * Maximum value.
+     */
+    max: number;
+    /**
+     * Sliding step length.
+     */
+    step: number;
+    vertical: boolean;
+    /**
+     * When `this.range` is true, it should be [number, number], otherwise number.
+     */
+    value: number | [number, number];
+    /**
+     * The default of `this.value`.
+     */
+    default: number | [number, number];
+    _root: HTMLElement;
+    lastFocus: undefined | 1 | 2;
+    /**
+     * Returns true when the second number is greater than the first number
+     */
+    get reverse(): boolean;
+    /**
+     * Enable range sliding.
+     */
+    get range(): boolean;
+    get rangeValue(): [number, number];
+    protected render(): import("lit").TemplateResult<1>;
+    protected _handleMousedownStart(e: MouseEvent): void;
+    protected _handleMousedownEnd(e: MouseEvent): void;
+    setStart(value: number): void;
+    setEnd(value: number): void;
+    protected _computeValue(e: MouseEvent): number;
+    protected _handleMousedownRoot(e: MouseEvent): void;
+    protected createMousedownListener(mouseMoveCallback: (arg0: number) => void): (e: MouseEvent) => void;
+    protected createMousemoveListener(callback: (arg0: number) => void): (e: MouseEvent) => void;
+    protected _connectedInit(): void;
+    reset(): void;
+    swap(): void;
+    sort(): void;
+    toSorted(): number | [number, number];
+}
+export default Range;
+//# sourceMappingURL=range.d.ts.map

package/dev/components/range.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"range.d.ts","sourceRoot":"","sources":["../../src/components/range.ts"],"names":[],"mappings":"AAYA,OAAO,UAAU,MAAM,wBAAwB,CAAC;AAKhD;;;;;;;;GAQG;AACH,cAwGM,KAAM,SAAQ,UAAU;IAC5B;;OAEG;IAEH,GAAG,SAAK;IACR;;OAEG;IAEH,GAAG,SAAO;IACV;;OAEG;IAEH,IAAI,SAAK;IAGT,QAAQ,EAAE,OAAO,CAAC;IAElB;;OAEG;IAEH,KAAK,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACjC;;OAEG;IAEH,OAAO,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAGnC,KAAK,EAAE,WAAW,CAAC;IAGnB,SAAS,EAAE,SAAS,GAAG,CAAC,GAAG,CAAC,CAAC;IAE7B;;OAEG;IACH,IAAI,OAAO,YAEV;IAED;;OAEG;IACH,IAAI,KAAK,IAAI,OAAO,CAEnB;IAED,IAAI,UAAU,IAAI,CAAC,MAAM,EAAE,MAAM,CAAC,CAEjC;IAED,SAAS,CAAC,MAAM;IAqChB,SAAS,CAAC,qBAAqB,CAAC,CAAC,EAAE,UAAU;IAI7C,SAAS,CAAC,mBAAmB,CAAC,CAAC,EAAE,UAAU;IAK3C,QAAQ,CAAC,KAAK,EAAE,MAAM;IAKtB,MAAM,CAAC,KAAK,EAAE,MAAM;IAKpB,SAAS,CAAC,aAAa,CAAC,CAAC,EAAE,UAAU;IASrC,SAAS,CAAC,oBAAoB,CAAC,CAAC,EAAE,UAAU;IAW5C,SAAS,CAAC,uBAAuB,CAAC,iBAAiB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,OAC9D,UAAU;IAavB,SAAS,CAAC,uBAAuB,CAAC,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,OACrD,UAAU;IASvB,SAAS,CAAC,cAAc;IAcxB,KAAK;IAIL,IAAI;IAOJ,IAAI;IAIJ,QAAQ,IAAI,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC;CAOtC;AAED,eAAe,KAAK,CAAC"}

package/dev/components/range.js

@@ -0,0 +1,306 @@
+import { __decorate } from "tslib";
+import { godown } from "@godown/element/decorators/godown.js";
+import { part } from "@godown/element/decorators/part.js";
+import { styles } from "@godown/element/decorators/styles.js";
+import { classList } from "@godown/element/directives/class-list.js";
+import { conditionIf } from "@godown/element/directives/condition-if.js";
+import { htmlSlot } from "@godown/element/directives/html-slot.js";
+import { joinProperties } from "@godown/element/tools/css.js";
+import { isNil } from "@godown/element/tools/lib.js";
+import { css, html } from "lit";
+import { property, state } from "lit/decorators.js";
+import { cssGlobalVars, scopePrefix } from "../core/global-style.js";
+import SuperInput from "../core/super-input.js";
+const protoName = "range";
+const cssScope = scopePrefix(protoName);
+/**
+ * {@linkcode Range} is similar to <input type="range">.
+ *
+ * Value accepts a number, or an array of two numbers.
+ *
+ * Number have one handle, array have two.
+ *
+ * @category input
+ */
+let Range = class Range extends SuperInput {
+    constructor() {
+        super(...arguments);
+        /**
+         * Minimum value.
+         */
+        this.min = 0;
+        /**
+         * Maximum value.
+         */
+        this.max = 100;
+        /**
+         * Sliding step length.
+         */
+        this.step = 1;
+    }
+    /**
+     * Returns true when the second number is greater than the first number
+     */
+    get reverse() {
+        return this.range ? this.value[0] > this.value[1] : false;
+    }
+    /**
+     * Enable range sliding.
+     */
+    get range() {
+        return Array.isArray(this.value);
+    }
+    get rangeValue() {
+        return (this.range ? this.value : [0, this.value]);
+    }
+    render() {
+        const [from, to] = this.rangeValue;
+        const gap = this.max - this.min;
+        return html `<div
+      part="root"
+      class="${classList({
+            vertical: this.vertical,
+            range: this.range,
+            reverse: this.reverse,
+        })}"
+      @mousedown="${this.disabled ? null : this._handleMousedownRoot}"
+      style="${joinProperties({ "--start": `${((from - this.min) / gap) * 100}%`, "--end": `${((to - this.min) / gap) * 100}%` })}">
+      <div part="track"></div>
+    ${conditionIf(this.range, html `<i
+        part="handle"
+        class="${classList({ "last-focus": this.lastFocus === 1 }, "start")}"
+        @mousedown="${this.disabled ? null : this._handleMousedownStart}">
+        ${htmlSlot("start")}
+      </i>`)}
+      <i
+        part="handle"
+        class="${classList({ "last-focus": this.lastFocus === 2 }, "end")}"
+        @mousedown="${this.disabled ? null : this._handleMousedownEnd}">
+        ${htmlSlot("end")}
+      </i>
+    </div>`;
+    }
+    _handleMousedownStart(e) {
+        this.lastFocus = 1;
+        this.createMousedownListener(this.setStart)(e);
+    }
+    _handleMousedownEnd(e) {
+        this.lastFocus = 2;
+        this.createMousedownListener(this.setEnd)(e);
+    }
+    setStart(value) {
+        const i = this.value[1];
+        this.value = this.range ? [value, i] : value;
+    }
+    setEnd(value) {
+        const i = this.value[0];
+        this.value = this.range ? [i, value] : value;
+    }
+    _computeValue(e) {
+        const rect = this._root.getBoundingClientRect();
+        const div = this.vertical ? (e.clientY - rect.top) / rect.height : (e.clientX - rect.left) / rect.width;
+        let value = Math.round((div * (this.max - this.min)) / this.step) * this.step;
+        if (value > this.max) {
+            value -= this.step;
+        }
+        else if (value < this.min) {
+            value += this.step;
+        }
+        return value;
+    }
+    _handleMousedownRoot(e) {
+        const value = this._computeValue(e);
+        if (!this.range || Math.abs(value - this.value[0]) > Math.abs(value - this.value[1])) {
+            this.setEnd(value);
+            this._handleMousedownEnd(e);
+        }
+        else {
+            this.setStart(value);
+            this._handleMousedownStart(e);
+        }
+    }
+    createMousedownListener(mouseMoveCallback) {
+        return (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            const move = this.createMousemoveListener(mouseMoveCallback);
+            document.addEventListener("mousemove", move);
+            const stop = () => {
+                document.removeEventListener("mousemove", move);
+                document.removeEventListener("mouseup", stop);
+            };
+            document.addEventListener("mouseup", stop);
+        };
+    }
+    createMousemoveListener(callback) {
+        return (e) => {
+            const value = this._computeValue(e);
+            if (value > this.max || value < this.min) {
+                return;
+            }
+            callback?.call(this, value);
+        };
+    }
+    _connectedInit() {
+        const gap = this.max - this.min;
+        this.step ||= gap / 100;
+        if (!isNil(this.default) && isNil(this.value)) {
+            this.value = this.default;
+        }
+        else if (isNil(this.default) && !isNil(this.value)) {
+            this.default = this.value;
+        }
+        else {
+            const mid = Math.round(gap / 2 / this.step) * this.step;
+            this.default = this.range ? [0, mid] : mid;
+            this.value = this.default;
+        }
+    }
+    reset() {
+        this.value = this.default;
+    }
+    swap() {
+        if (this.range) {
+            const [a, b] = this.value;
+            this.value = [b, a];
+        }
+    }
+    sort() {
+        this.value = this.toSorted();
+    }
+    toSorted() {
+        if (this.range) {
+            const [a, b] = this.value;
+            return a > b ? [b, a] : [a, b];
+        }
+        return this.value;
+    }
+};
+__decorate([
+    property({ type: Number })
+], Range.prototype, "min", void 0);
+__decorate([
+    property({ type: Number })
+], Range.prototype, "max", void 0);
+__decorate([
+    property({ type: Number })
+], Range.prototype, "step", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Range.prototype, "vertical", void 0);
+__decorate([
+    property({ type: Array })
+], Range.prototype, "value", void 0);
+__decorate([
+    property({ type: Array })
+], Range.prototype, "default", void 0);
+__decorate([
+    part("root")
+], Range.prototype, "_root", void 0);
+__decorate([
+    state()
+], Range.prototype, "lastFocus", void 0);
+Range = __decorate([
+    godown(protoName),
+    styles(css `
+    :host {
+      ${cssScope}-handle-active: var(${cssGlobalVars._colors.blue[7]});
+      ${cssScope}-track-width: .5em;
+      background: var(${cssGlobalVars.input}-background);
+      width: var(${cssGlobalVars.input}-width);
+      display: inline-block;
+      margin: 0.25em 0;
+    }
+
+    :host([vertical]) {
+      height: var(${cssGlobalVars.input}-width);
+      width: fit-content;
+    }
+
+     :host(:not([disabled])) i:active {
+      ${cssScope}-handle-scale:1.05;
+      background: var(${cssScope}-handle-active);
+    }
+
+    .last-focus {
+      z-index: 1;
+    }
+
+    [part="root"] {
+      min-height:inherit;
+      position: relative;
+      border-radius: inherit;
+      width: 100%;
+      --start: 0%;
+      --end: 50%;
+      height: var(${cssScope}-track-width);
+    }
+
+    [part="track"] {
+      height: 100%;
+      min-height:inherit;
+      display: flex;
+      position: absolute;
+      pointer-events: none;
+      border-radius: inherit;
+      justify-content: space-between;
+      left: min(var(--start), var(--end));
+      background: var(${cssGlobalVars.active});
+      width: max(calc(var(--end) - var(--start)), calc(var(--start) - var(--end)));
+    }
+
+    [part="handle"] {
+      width: 1em;
+      height: 1em;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      user-select: none;
+      position: absolute;
+      border: 0.1em solid;
+      border-radius: 50%;
+      transform-origin: 0% 25%;
+      transform: scale(var(${cssScope}-handle-scale, 1)) translate(-50%, -25%);
+      background: var(${cssGlobalVars.active});
+      border-color: var(${cssGlobalVars.input}-control);
+    }
+  `, css `
+    .vertical {
+      height: 100%;
+      width: var(${cssScope}-track-width);
+    }
+
+    .vertical i {
+      transform: translate(-25%, -50%);
+    }
+
+    .vertical [part="track"] {
+      width: 100%;
+      height: max(calc(var(--end) - var(--start)), calc(var(--start) - var(--end)));
+      top: min(var(--start), var(--end));
+      left: 0;
+    }
+  `, css `
+    .start {
+      left: var(--start);
+      top: 0;
+    }
+
+    .end {
+      left: var(--end);
+      top: 0;
+    }
+
+    .vertical .start {
+      top: var(--start);
+      left: 0;
+    }
+
+    .vertical .end {
+      top: var(--end);
+      left: 0;
+    }
+  `)
+], Range);
+export default Range;
+//# sourceMappingURL=range.js.map

package/dev/components/range.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"range.js","sourceRoot":"","sources":["../../src/components/range.ts"],"names":[],"mappings":"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"}

package/dev/components/rotate.d.ts

@@ -0,0 +1,26 @@
+import { GlobalStyle } from "../core/global-style.js";
+/**
+ * {@linkcode Rotate} Make child elements rotate.
+ *
+ * @category wrapper
+ */
+declare class Rotate extends GlobalStyle {
+    _root: HTMLElement;
+    protected render(): import("lit").TemplateResult<1>;
+    reset(): void;
+    protected _handleRotate(e: MouseEvent): void;
+    /**
+     * Compute offset.
+     * ```
+     * `rotateX(${rotateX}rad) rotateY(${rotateY}rad)`
+     * ```
+     * @param e Mouse move event.
+     * @returns rotateX, rotateY
+     */
+    _computeOffset(e: MouseEvent): {
+        rotateX: number;
+        rotateY: number;
+    };
+}
+export default Rotate;
+//# sourceMappingURL=rotate.d.ts.map

package/dev/components/rotate.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"rotate.d.ts","sourceRoot":"","sources":["../../src/components/rotate.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,WAAW,EAAe,MAAM,yBAAyB,CAAC;AAKnE;;;;GAIG;AACH,cAiCM,MAAO,SAAQ,WAAW;IAE9B,KAAK,EAAE,WAAW,CAAC;IAEnB,SAAS,CAAC,MAAM;IAOhB,KAAK;IAKL,SAAS,CAAC,aAAa,CAAC,CAAC,EAAE,UAAU;IAMrC;;;;;;;OAOG;IACH,cAAc,CAAC,CAAC,EAAE,UAAU;;;;CAU7B;AAED,eAAe,MAAM,CAAC"}