godown 3.2.0 → 3.4.0

package/dev/components/input.js

@@ -1,9 +1,10 @@
 import { __decorate } from "tslib";
-import { attr, classList, godown, part, styles } from "@godown/element";
+import { attr, tokenList, godown, part, styles, htmlSlot } from "@godown/element";
+import iconEyeSlashFill from "@godown/f7-icon/icons/eye-slash-fill.js";
 import { css, html, nothing } from "lit";
 import { property } from "lit/decorators.js";
 import { cssGlobalVars } from "../core/global-style.js";
-import SuperInput from "../core/super-input.js";
+import { SuperInput } from "../core/super-input.js";
 const protoName = "input";
 /**
  * {@linkcode Input} renders a text input.
@@ -26,7 +27,7 @@ let Input = class Input extends SuperInput {
       <div
         part="root"
         ${attr(this.observedRecord)}
-        class="${classList("input-field", this.variant)}"
+        class="${tokenList("input-field", this.variant)}"
       >
         ${[
             this._renderPrefix(),
@@ -49,9 +50,27 @@ let Input = class Input extends SuperInput {
       </div>
     `;
     }
-    reset() {
-        this._input.value = this.default;
-        this.value = this.default;
+    _renderSuffix() {
+        const PASSWORD = "password";
+        return html `
+      <label
+        for=${this.makeId}
+        part="suffix"
+      >
+        ${this.type === PASSWORD
+            ? html `
+              <i
+                part="icon"
+                @mousedown="${() => this._changeInputType("text")}"
+                @mouseup="${() => this._changeInputType(PASSWORD)}"
+                @mouseleave="${() => this._changeInputType(PASSWORD)}"
+              >
+                ${iconEyeSlashFill()}
+              </i>
+            `
+            : htmlSlot("suffix")}
+      </label>
+    `;
     }
 };
 __decorate([
@@ -66,11 +85,13 @@ Input = __decorate([
   :host {
     width: var(${cssGlobalVars.input}-width);
     height: var(${cssGlobalVars.input}-height);
-    color: var(${cssGlobalVars.foreground});
-    background: var(${cssGlobalVars.input}-background);
-    border-radius: var(${cssGlobalVars.input}-radius);
     display: block;
   }
+
+  :host(:focus-within),
+  .outline {
+    ${cssGlobalVars.input}-outline-color: var(${cssGlobalVars.active});
+  }
 `)
 ], Input);
 export default Input;

package/dev/components/input.js.map

@@ -1 +1 @@
-{"version":3,"file":"input.js","sourceRoot":"","sources":["../../src/components/input.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACxE,OAAO,EAAuB,GAAG,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AACxD,OAAO,UAAU,MAAM,wBAAwB,CAAC;AAEhD,MAAM,SAAS,GAAG,OAAO,CAAC;AAE1B;;;;;;GAMG;AAYH,IAAM,KAAK,GAAX,MAAM,KAAM,SAAQ,UAAU;IAA9B;;QACE,SAAI,GAA6D,MAAM,CAAC;QAIxE;;WAEG;QAEH,YAAO,GAA0B,SAAS,CAAC;IAsC7C,CAAC;IAjCW,MAAM;QACd,OAAO,IAAI,CAAA;;;UAGL,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC;iBAClB,SAAS,CAAC,aAAa,EAAE,IAAI,CAAC,OAAO,CAAC;;UAE7C;YACA,IAAI,CAAC,aAAa,EAAE;YACpB,IAAI,CAAA;;;sBAGQ,IAAI,CAAC,IAAI;wBACP,IAAI,CAAC,KAAK;4BACN,IAAI,CAAC,SAAS;2BACf,IAAI,CAAC,QAAQ;gCACR,IAAI,CAAC,cAAc,IAAI,OAAO;8BAChC,IAAI,CAAC,YAAY,IAAI,OAAO;6BAC7B,IAAI,CAAC,WAAW,IAAI,OAAO;oBACpC,IAAI,CAAC,MAAM;wBACP,IAAI,CAAC,YAAY;;WAE9B;YACD,IAAI,CAAC,aAAa,EAAE;SACrB;;KAEJ,CAAC;IACJ,CAAC;IAED,KAAK;QACH,IAAI,CAAC,MAAM,CAAC,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC;QACjC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC;IAC5B,CAAC;CACF,CAAA;AAtCC;IADC,QAAQ,EAAE;sCACgC;AAGjC;IADT,IAAI,CAAC,OAAO,CAAC;qCACqB;AAZ/B,KAAK;IAXV,MAAM,CAAC,SAAS,CAAC;IACjB,MAAM,CAAC,GAAG,CAAA;;iBAEM,aAAa,CAAC,KAAK;kBAClB,aAAa,CAAC,KAAK;iBACpB,aAAa,CAAC,UAAU;sBACnB,aAAa,CAAC,KAAK;yBAChB,aAAa,CAAC,KAAK;;;CAG3C,CAAC;GACI,KAAK,CA+CV;AAED,eAAe,KAAK,CAAC;AACrB,OAAO,EAAE,KAAK,EAAE,CAAC"}
+{"version":3,"file":"input.js","sourceRoot":"","sources":["../../src/components/input.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAClF,OAAO,gBAAgB,MAAM,yCAAyC,CAAC;AACvE,OAAO,EAAuB,GAAG,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEpD,MAAM,SAAS,GAAG,OAAO,CAAC;AAE1B;;;;;;GAMG;AAcH,IAAM,KAAK,GAAX,MAAM,KAAM,SAAQ,UAAU;IAA9B;;QACE,SAAI,GAA6D,MAAM,CAAC;QAIxE;;WAEG;QAEH,YAAO,GAA0B,SAAS,CAAC;IAwD7C,CAAC;IAnDW,MAAM;QACd,OAAO,IAAI,CAAA;;;UAGL,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC;iBAClB,SAAS,CAAC,aAAa,EAAE,IAAI,CAAC,OAAO,CAAC;;UAE7C;YACA,IAAI,CAAC,aAAa,EAAE;YACpB,IAAI,CAAA;;;sBAGQ,IAAI,CAAC,IAAI;wBACP,IAAI,CAAC,KAAK;4BACN,IAAI,CAAC,SAAS;2BACf,IAAI,CAAC,QAAQ;gCACR,IAAI,CAAC,cAAc,IAAI,OAAO;8BAChC,IAAI,CAAC,YAAY,IAAI,OAAO;6BAC7B,IAAI,CAAC,WAAW,IAAI,OAAO;oBACpC,IAAI,CAAC,MAAM;wBACP,IAAI,CAAC,YAAY;;WAE9B;YACD,IAAI,CAAC,aAAa,EAAE;SACrB;;KAEJ,CAAC;IACJ,CAAC;IAES,aAAa;QACrB,MAAM,QAAQ,GAAG,UAAU,CAAC;QAC5B,OAAO,IAAI,CAAA;;cAED,IAAI,CAAC,MAAM;;;UAGf,IAAI,CAAC,IAAI,KAAK,QAAQ;YACtB,CAAC,CAAC,IAAI,CAAA;;;8BAGc,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC;4BACrC,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,CAAC,QAAQ,CAAC;+BAClC,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,CAAC,QAAQ,CAAC;;kBAElD,gBAAgB,EAAE;;aAEvB;YACH,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC;;KAEzB,CAAC;IACJ,CAAC;CACF,CAAA;AAxDC;IADC,QAAQ,EAAE;sCACgC;AAGjC;IADT,IAAI,CAAC,OAAO,CAAC;qCACqB;AAZ/B,KAAK;IAbV,MAAM,CAAC,SAAS,CAAC;IACjB,MAAM,CAAC,GAAG,CAAA;;iBAEM,aAAa,CAAC,KAAK;kBAClB,aAAa,CAAC,KAAK;;;;;;MAM/B,aAAa,CAAC,KAAK,uBAAuB,aAAa,CAAC,MAAM;;CAEnE,CAAC;GACI,KAAK,CAiEV;AAED,eAAe,KAAK,CAAC;AACrB,OAAO,EAAE,KAAK,EAAE,CAAC"}

package/dev/components/link.d.ts

@@ -1,4 +1,4 @@
-import SuperAnchor from "../core/super-anchor.js";
+import { SuperAnchor } from "../core/super-anchor.js";
 declare const linkTypes: {
     readonly push: "push";
     readonly replace: "replace";

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

@@ -1 +1 @@
-{"version":3,"file":"link.d.ts","sourceRoot":"","sources":["../../src/components/link.ts"],"names":[],"mappings":"AAGA,OAAO,WAAW,MAAM,yBAAyB,CAAC;AAKlD,QAAA,MAAM,SAAS;;;;;CAKL,CAAC;AAEX,KAAK,QAAQ,GAAG,MAAM,OAAO,SAAS,CAAC;AAEvC;;;;;;;;;;;;;;;;;;GAkBG;AACH,cACM,IAAK,SAAQ,WAAW;IAC5B;;;;;;OAMG;IAEH,IAAI,EAAE,QAAQ,CAAkB;IAEhC;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,OAAO,UAAS;IAEhB;;OAEG;IACH,KAAK,KAAM;IAEX,SAAS,CAAC,YAAY,CAAC,CAAC,EAAE,UAAU,GAAG,IAAI;IA0B3C,WAAW,EAAE,MAAM,IAAI,CAcrB;CACH;AAED,eAAe,IAAI,CAAC;AACpB,OAAO,EAAE,IAAI,EAAE,CAAC"}
+{"version":3,"file":"link.d.ts","sourceRoot":"","sources":["../../src/components/link.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAKtD,QAAA,MAAM,SAAS;;;;;CAKL,CAAC;AAEX,KAAK,QAAQ,GAAG,MAAM,OAAO,SAAS,CAAC;AAEvC;;;;;;;;;;;;;;;;;;GAkBG;AACH,cACM,IAAK,SAAQ,WAAW;IAC5B;;;;;;OAMG;IAEH,IAAI,EAAE,QAAQ,CAAkB;IAEhC;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,OAAO,UAAS;IAEhB;;OAEG;IACH,KAAK,KAAM;IAEX,SAAS,CAAC,YAAY,CAAC,CAAC,EAAE,UAAU,GAAG,IAAI;IA0B3C,WAAW,EAAE,MAAM,IAAI,CAcrB;CACH;AAED,eAAe,IAAI,CAAC;AACpB,OAAO,EAAE,IAAI,EAAE,CAAC"}

package/dev/components/link.js

@@ -1,7 +1,7 @@
 import { __decorate } from "tslib";
 import { godown } from "@godown/element";
 import { property } from "lit/decorators.js";
-import SuperAnchor from "../core/super-anchor.js";
+import { SuperAnchor } from "../core/super-anchor.js";
 import Router from "./router.js";
 const protoName = "link";
 const linkTypes = {
@@ -55,13 +55,13 @@ let Link = class Link extends SuperAnchor {
         this.handleState = () => {
             switch (this.type) {
                 case linkTypes.auto:
-                // biome-ignore lint: if replace is true, fallthrough to replace case
                 case linkTypes.push:
                     if (!this.replace) {
                         // type is auto or push and replace is false
                         history.pushState(this.state, "", this.href);
                         break;
                     }
+                // fallthrough to replace
                 case linkTypes.replace:
                     history.replaceState(this.state, "", this.href);
                     break;

package/dev/components/link.js.map

@@ -1 +1 @@
-{"version":3,"file":"link.js","sourceRoot":"","sources":["../../src/components/link.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,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,MAAM,SAAS,GAAG;IAChB,IAAI,EAAE,MAAM;IACZ,OAAO,EAAE,SAAS;IAClB,MAAM,EAAE,QAAQ;IAChB,IAAI,EAAE,MAAM;CACJ,CAAC;AAIX;;;;;;;;;;;;;;;;;;GAkBG;AAEH,IAAM,IAAI,GAAV,MAAM,IAAK,SAAQ,WAAW;IAA9B;;QACE;;;;;;WAMG;QAEH,SAAI,GAAa,SAAS,CAAC,IAAI,CAAC;QAEhC;;WAEG;QAEH,aAAQ,GAAG,KAAK,CAAC;QAEjB;;WAEG;QAEH,YAAO,GAAG,KAAK,CAAC;QAEhB;;WAEG;QACH,UAAK,GAAG,EAAE,CAAC;QA4BX,gBAAW,GAAe,GAAG,EAAE;YAC7B,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;gBAClB,KAAK,SAAS,CAAC,IAAI,CAAC;gBACpB,qEAAqE;gBACrE,KAAK,SAAS,CAAC,IAAI;oBACjB,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;wBAClB,4CAA4C;wBAC5C,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,EAAE,EAAE,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;wBAC7C,MAAM;oBACR,CAAC;gBACH,KAAK,SAAS,CAAC,OAAO;oBACpB,OAAO,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,EAAE,EAAE,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;oBAChD,MAAM;YACV,CAAC;QACH,CAAC,CAAC;IACJ,CAAC;IAzCW,YAAY,CAAC,CAAa;QAClC,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC;QACvD,IAAI,CAAC,mBAAmB,CAAC,UAAU,EAAE;YACnC,GAAG,IAAI,CAAC,cAAc;YACtB,QAAQ;YACR,KAAK;SACN,CAAC,CAAC;QACH,IAAI,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,IAAI,KAAK,SAAS,CAAC,MAAM,EAAE,CAAC;YACtD,OAAO;QACT,CAAC;QACD,IAAI,CAAC,WAAW,EAAE,CAAC;QACnB,MAAM,OAAO,GAAG,CAAC,GAAG,MAAM,CAAC,eAAe,CAAC,CAAC;QAC5C;QACE,mCAAmC;QACnC,CAAC,QAAQ;YACT,CAAC,IAAI,KAAK,SAAS,CAAC,IAAI;gBACtB,8EAA8E;gBAC9E,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,EACnD,CAAC;YACD,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,MAAM,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE;gBACnC,CAAC,CAAC,cAAc,EAAE,CAAC;YACrB,CAAC,CAAC,CAAC;QACL,CAAC;IACH,CAAC;CAiBF,CAAA;AA5DC;IADC,QAAQ,EAAE;kCACqB;AAMhC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;sCACX;AAMjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;qCACZ;AArBZ,IAAI;IADT,MAAM,CAAC,SAAS,CAAC;GACZ,IAAI,CAqET;AAED,eAAe,IAAI,CAAC;AACpB,OAAO,EAAE,IAAI,EAAE,CAAC"}
+{"version":3,"file":"link.js","sourceRoot":"","sources":["../../src/components/link.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,MAAM,MAAM,aAAa,CAAC;AAEjC,MAAM,SAAS,GAAG,MAAM,CAAC;AAEzB,MAAM,SAAS,GAAG;IAChB,IAAI,EAAE,MAAM;IACZ,OAAO,EAAE,SAAS;IAClB,MAAM,EAAE,QAAQ;IAChB,IAAI,EAAE,MAAM;CACJ,CAAC;AAIX;;;;;;;;;;;;;;;;;;GAkBG;AAEH,IAAM,IAAI,GAAV,MAAM,IAAK,SAAQ,WAAW;IAA9B;;QACE;;;;;;WAMG;QAEH,SAAI,GAAa,SAAS,CAAC,IAAI,CAAC;QAEhC;;WAEG;QAEH,aAAQ,GAAG,KAAK,CAAC;QAEjB;;WAEG;QAEH,YAAO,GAAG,KAAK,CAAC;QAEhB;;WAEG;QACH,UAAK,GAAG,EAAE,CAAC;QA4BX,gBAAW,GAAe,GAAG,EAAE;YAC7B,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;gBAClB,KAAK,SAAS,CAAC,IAAI,CAAC;gBACpB,KAAK,SAAS,CAAC,IAAI;oBACjB,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;wBAClB,4CAA4C;wBAC5C,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,EAAE,EAAE,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;wBAC7C,MAAM;oBACR,CAAC;gBACH,yBAAyB;gBACzB,KAAK,SAAS,CAAC,OAAO;oBACpB,OAAO,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,EAAE,EAAE,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;oBAChD,MAAM;YACV,CAAC;QACH,CAAC,CAAC;IACJ,CAAC;IAzCW,YAAY,CAAC,CAAa;QAClC,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC;QACvD,IAAI,CAAC,mBAAmB,CAAC,UAAU,EAAE;YACnC,GAAG,IAAI,CAAC,cAAc;YACtB,QAAQ;YACR,KAAK;SACN,CAAC,CAAC;QACH,IAAI,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,IAAI,KAAK,SAAS,CAAC,MAAM,EAAE,CAAC;YACtD,OAAO;QACT,CAAC;QACD,IAAI,CAAC,WAAW,EAAE,CAAC;QACnB,MAAM,OAAO,GAAG,CAAC,GAAG,MAAM,CAAC,eAAe,CAAC,CAAC;QAC5C;QACE,mCAAmC;QACnC,CAAC,QAAQ;YACT,CAAC,IAAI,KAAK,SAAS,CAAC,IAAI;gBACtB,8EAA8E;gBAC9E,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,EACnD,CAAC;YACD,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,MAAM,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE;gBACnC,CAAC,CAAC,cAAc,EAAE,CAAC;YACrB,CAAC,CAAC,CAAC;QACL,CAAC;IACH,CAAC;CAiBF,CAAA;AA5DC;IADC,QAAQ,EAAE;kCACqB;AAMhC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;sCACX;AAMjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;qCACZ;AArBZ,IAAI;IADT,MAAM,CAAC,SAAS,CAAC;GACZ,IAAI,CAqET;AAED,eAAe,IAAI,CAAC;AACpB,OAAO,EAAE,IAAI,EAAE,CAAC"}

package/dev/components/progress.d.ts

@@ -10,13 +10,6 @@ declare class Progress extends GlobalStyle {
     min: number;
     value: number;
     protected render(): 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;
 export { Progress };

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

@@ -1 +1 @@
-{"version":3,"file":"progress.d.ts","sourceRoot":"","sources":["../../src/components/progress.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,cAAc,EAAa,MAAM,KAAK,CAAC;AAGrD,OAAO,EAAE,WAAW,EAAiB,MAAM,yBAAyB,CAAC;AAIrE;;;;GAIG;AACH,cA+CM,QAAS,SAAQ,WAAW;IAEhC,GAAG,SAAK;IAGR,GAAG,SAAK;IAGR,KAAK,EAAE,MAAM,CAAC;IAEd,SAAS,CAAC,MAAM,IAAI,cAAc,CAAC,CAAC,CAAC;IA0BrC;;;;;OAKG;IACH,YAAY,CAAC,CAAC,GAAE,MAAM,GAAG,MAAY,GAAG,MAAM;CAW/C;AAED,eAAe,QAAQ,CAAC;AACxB,OAAO,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"progress.d.ts","sourceRoot":"","sources":["../../src/components/progress.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,cAAc,EAAa,MAAM,KAAK,CAAC;AAGrD,OAAO,EAAE,WAAW,EAAiB,MAAM,yBAAyB,CAAC;AAIrE;;;;GAIG;AACH,cAgDM,QAAS,SAAQ,WAAW;IAEhC,GAAG,SAAK;IAGR,GAAG,SAAK;IAGR,KAAK,EAAE,MAAM,CAAC;IAEd,SAAS,CAAC,MAAM,IAAI,cAAc,CAAC,CAAC,CAAC;CAqBtC;AAED,eAAe,QAAQ,CAAC;AACxB,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dev/components/progress.js

@@ -1,5 +1,5 @@
 import { __decorate } from "tslib";
-import { attr, godown, isNil, styles } from "@godown/element";
+import { attr, godown, isNil, Ranger, styles } from "@godown/element";
 import { css, html } from "lit";
 import { property } from "lit/decorators.js";
 import { GlobalStyle, cssGlobalVars } from "../core/global-style.js";
@@ -19,13 +19,8 @@ let Progress = class Progress extends GlobalStyle {
         let width = 20;
         let className;
         if (!isNil(this.value)) {
-            width = this.parsePercent(this.value);
-            if (width > 100) {
-                width = 100;
-            }
-            else if (width < 0) {
-                width = 0;
-            }
+            const ranger = new Ranger(this.min, this.max);
+            width = ranger.restrict(this.value / ranger.diff) * 100;
             className = "static";
         }
         return html `
@@ -41,23 +36,6 @@ let Progress = class Progress extends GlobalStyle {
       </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") {
-        s = String(s);
-        if (s.includes("%")) {
-            return parseFloat(s);
-        }
-        const diff = this.max - this.min;
-        if (diff === 0) {
-            return 100;
-        }
-        return (parseFloat(s) / diff) * 100;
-    }
 };
 __decorate([
     property({ type: Number })
@@ -89,6 +67,7 @@ Progress = __decorate([
     z-index: 1;
     position: relative;
     border-radius: inherit;
+    overflow: hidden;
   }
 
   [part="value"] {

package/dev/components/progress.js.map

@@ -1 +1 @@
-{"version":3,"file":"progress.js","sourceRoot":"","sources":["../../src/components/progress.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAC9D,OAAO,EAAuB,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAErE,MAAM,SAAS,GAAG,UAAU,CAAC;AAE7B;;;;GAIG;AAgDH,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,WAAW;IAAlC;;QAEE,QAAG,GAAG,CAAC,CAAC;QAGR,QAAG,GAAG,CAAC,CAAC;IAgDV,CAAC;IA3CW,MAAM;QACd,IAAI,KAAK,GAAG,EAAE,CAAC;QACf,IAAI,SAAiB,CAAC;QACtB,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;YACvB,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YACtC,IAAI,KAAK,GAAG,GAAG,EAAE,CAAC;gBAChB,KAAK,GAAG,GAAG,CAAC;YACd,CAAC;iBAAM,IAAI,KAAK,GAAG,CAAC,EAAE,CAAC;gBACrB,KAAK,GAAG,CAAC,CAAC;YACZ,CAAC;YACD,SAAS,GAAG,QAAQ,CAAC;QACvB,CAAC;QACD,OAAO,IAAI,CAAA;;;UAGL,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC;iBAClB,SAAS;;;;yBAID,KAAK;;;KAGzB,CAAC;IACJ,CAAC;IAED;;;;;OAKG;IACH,YAAY,CAAC,IAAqB,GAAG;QACnC,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;QACd,IAAI,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;YACpB,OAAO,UAAU,CAAC,CAAC,CAAC,CAAC;QACvB,CAAC;QACD,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC;QACjC,IAAI,IAAI,KAAK,CAAC,EAAE,CAAC;YACf,OAAO,GAAG,CAAC;QACb,CAAC;QACD,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,GAAG,CAAC;IACtC,CAAC;CACF,CAAA;AAnDC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qCACnB;AAGR;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qCACnB;AAGR;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCACb;AARV,QAAQ;IA/Cb,MAAM,CAAC,SAAS,CAAC;IACjB,MAAM,CAAC,GAAG,CAAA;;;;;sBAKW,aAAa,CAAC,OAAO;iBAC1B,aAAa,CAAC,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuCpC,CAAC;GACI,QAAQ,CAqDb;AAED,eAAe,QAAQ,CAAC;AACxB,OAAO,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"progress.js","sourceRoot":"","sources":["../../src/components/progress.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACtE,OAAO,EAAuB,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAErE,MAAM,SAAS,GAAG,UAAU,CAAC;AAE7B;;;;GAIG;AAiDH,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,WAAW;IAAlC;;QAEE,QAAG,GAAG,CAAC,CAAC;QAGR,QAAG,GAAG,CAAC,CAAC;IA0BV,CAAC;IArBW,MAAM;QACd,IAAI,KAAK,GAAG,EAAE,CAAC;QACf,IAAI,SAAiB,CAAC;QACtB,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;YACvB,MAAM,MAAM,GAAG,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC;YAC9C,KAAK,GAAG,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,GAAG,GAAG,CAAC;YACxD,SAAS,GAAG,QAAQ,CAAC;QACvB,CAAC;QACD,OAAO,IAAI,CAAA;;;UAGL,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC;iBAClB,SAAS;;;;yBAID,KAAK;;;KAGzB,CAAC;IACJ,CAAC;CACF,CAAA;AA7BC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qCACnB;AAGR;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qCACnB;AAGR;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCACb;AARV,QAAQ;IAhDb,MAAM,CAAC,SAAS,CAAC;IACjB,MAAM,CAAC,GAAG,CAAA;;;;;sBAKW,aAAa,CAAC,OAAO;iBAC1B,aAAa,CAAC,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwCpC,CAAC;GACI,QAAQ,CA+Bb;AAED,eAAe,QAAQ,CAAC;AACxB,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dev/components/range.d.ts

@@ -1,11 +1,12 @@
+import { Ranger } from "@godown/element";
 import { type TemplateResult } from "lit";
-import SuperInput from "../core/super-input.js";
+import { SuperInput } from "../core/super-input.js";
 /**
  * {@linkcode Range} is similar to `<input type="range">`.
  *
  * Value accepts number, or array.
  *
- * Number has 1 handle, the array has the number of its elements and the minimum is 2.
+ * Number has 1 handle, the array has the number of its elements.
  *
  * @fires input - Fires when the input value changes.
  * @fires change - Fires when the input value changes.
@@ -28,7 +29,7 @@ declare class Range extends SuperInput {
      */
     step: number;
     /**
-     * Display vertically.
+     * Whether to display the range vertically.
      */
     vertical: boolean;
     /**
@@ -44,44 +45,72 @@ declare class Range extends SuperInput {
     protected _root: HTMLElement;
     protected _handles: NodeListOf<HTMLElement>;
     lastFocus?: number;
+    protected _ranger: Ranger;
     private __focusStack;
-    /**
-     * Returns true when the second number is greater than the first number.
-     */
-    get reverse(): boolean;
-    /**
-     * If value is array.
-     */
     get range(): boolean;
     /**
      * Return values in the form of an array.
      */
     get rangeValue(): number[];
     /**
-     * @param len Minimum result length.
-     * @param value Fill value.
-     * @returns Array with length of len.
+     * Pad the value to the specified length.
      */
     padValue(len: number, value?: number): number[];
+    attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
+    get observedRecord(): Record<string, any>;
     protected render(): TemplateResult<1>;
     protected _renderHandle(index: number): TemplateResult<1>;
     private __keydownEvent;
+    /**
+     * Focuses the handle at the given index, updates the focus stack, and dispatches a "focus" event.
+     * @param index - The index of the handle to focus.
+     */
     focusHandle(index: number): void;
+    /**
+     * Removes the focus from the currently focused handle and dispatches a "blur" event.
+     */
     blurHandle(): void;
+    /**
+     * Creates a keydown event handler that updates the value of the range based on arrow key presses.
+     * @param index - The index of the handle to update.
+     * @returns A function that handles the keydown event and updates the range value.
+     */
     protected createKeydownEvent(index: number): (e: KeyboardEvent) => void;
-    createMouseDown(index: number): (e: MouseEvent) => void;
-    createSetValue(index: number): (numberOrModifier: number | ((value: number) => number)) => void;
+    /**
+     * Creates a mouse down event handler that focuses the handle at the given index and sets the value of the range.
+     * @param index - The index of the handle to focus.
+     * @returns A function that handles the mouse down event and updates the range value.
+     */
+    protected createMouseDown(index: number): (e: MouseEvent) => void;
+    /**
+     * Creates a function that sets the value of the range at the given index.
+     * @param index - The index of the value to set.
+     * @returns A function that sets the value of the range.
+     */
+    protected createSetValue(index: number): (value: number) => void;
     /**
      * Compute value from event.
+     * @returns The value closest to the event client position.
      */
-    protected _computeValue(e: MouseEvent): number;
+    protected _computeValue({ clientX, clientY }: MouseEvent): number;
     /**
-     * Ensure that the values do not exceed the range of max and min.
+     * Handles the mouse down event on the root element of the range component.
+     * Computes the closest value to the mouse position, sets the value, and focuses the corresponding handle.
+     * @param e - The mouse down event object.
      */
-    normalizeValue(value: number): number;
     protected _handleMousedownRoot(e: MouseEvent): void;
+    /**
+     * Creates a mouse down event handler that focuses the handle at the given index and sets the value of the range.
+     * @param index - The index of the handle to focus.
+     * @returns A function that handles the mouse down event and updates the range value.
+     */
     protected createMousedownListener(mouseMoveCallback: (arg0: number) => void): (e: MouseEvent) => void;
-    protected createMousemoveListener(callback: (arg0: number) => void): (e: MouseEvent) => void;
+    /**
+     * Creates a mouse move event handler that updates the range value based on the mouse position.
+     * @param callback - A function to call with the new value when the mouse is moved.
+     * @returns A function that handles the mouse move event and updates the range value.
+     */
+    protected createMousemoveListener(callback: (newValue: number) => void): (e: MouseEvent) => void;
     protected _connectedInit(): void;
     reset(): void;
     sort(): number | number[];

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

@@ -1 +1 @@
-{"version":3,"file":"range.d.ts","sourceRoot":"","sources":["../../src/components/range.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,cAAc,EAAa,MAAM,KAAK,CAAC;AAIrD,OAAO,UAAU,MAAM,wBAAwB,CAAC;AAKhD;;;;;;;;;;;;;GAaG;AACH,cA8FM,KAAM,SAAQ,UAAU;IAC5B;;OAEG;IAEH,GAAG,SAAK;IAER;;OAEG;IAEH,GAAG,SAAO;IAEV;;OAEG;IAEH,IAAI,EAAE,MAAM,CAAC;IAEb;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;;;OAIG;IAEH,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAEzB;;OAEG;IAEH,OAAO,EAAE,OAAO,IAAI,CAAC,KAAK,CAAC;IAG3B,SAAS,CAAC,KAAK,EAAE,WAAW,CAAC;IAG7B,SAAS,CAAC,QAAQ,EAAE,UAAU,CAAC,WAAW,CAAC,CAAC;IAG5C,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,OAAO,CAAC,YAAY,CAAgB;IAEpC;;OAEG;IACH,IAAI,OAAO,IAAI,OAAO,CAErB;IAED;;OAEG;IACH,IAAI,KAAK,IAAI,OAAO,CAEnB;IAED;;OAEG;IACH,IAAI,UAAU,IAAI,MAAM,EAAE,CAEzB;IAED;;;;OAIG;IACH,QAAQ,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,SAAI,GAAG,MAAM,EAAE;IAS1C,SAAS,CAAC,MAAM,IAAI,cAAc,CAAC,CAAC,CAAC;IA2BrC,SAAS,CAAC,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,cAAc,CAAC,CAAC,CAAC;IAmBzD,OAAO,CAAC,cAAc,CAAqC;IAE3D,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAehC,UAAU,IAAI,IAAI;IAMlB,SAAS,CAAC,kBAAkB,CAAC,KAAK,EAAE,MAAM,OAI7B,aAAa,KAAG,IAAI;IAWjC,eAAe,CAAC,KAAK,EAAE,MAAM,OAChB,UAAU,KAAG,IAAI;IAM9B,cAAc,CAAC,KAAK,EAAE,MAAM,sBACA,MAAM,GAAG,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC,KAAG,IAAI;IAevE;;OAEG;IACH,SAAS,CAAC,aAAa,CAAC,CAAC,EAAE,UAAU,GAAG,MAAM;IAO9C;;OAEG;IACH,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM;IASrC,SAAS,CAAC,oBAAoB,CAAC,CAAC,EAAE,UAAU,GAAG,IAAI;IAgBnD,SAAS,CAAC,uBAAuB,CAAC,iBAAiB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,OAC9D,UAAU,KAAG,IAAI;IAa9B,SAAS,CAAC,uBAAuB,CAAC,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,OACrD,UAAU,KAAG,IAAI;IAS9B,SAAS,CAAC,cAAc,IAAI,IAAI;IAahC,KAAK,IAAI,IAAI;IAIb,IAAI,IAAI,MAAM,GAAG,MAAM,EAAE;IAIzB,QAAQ,IAAI,MAAM,GAAG,MAAM,EAAE;CAM9B;AAED,eAAe,KAAK,CAAC;AACrB,OAAO,EAAE,KAAK,EAAE,CAAC"}
+{"version":3,"file":"range.d.ts","sourceRoot":"","sources":["../../src/components/range.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsE,MAAM,EAAQ,MAAM,iBAAiB,CAAC;AACnH,OAAO,EAAE,KAAK,cAAc,EAAa,MAAM,KAAK,CAAC;AAIrD,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAKpD;;;;;;;;;;;;;GAaG;AACH,cA8FM,KAAM,SAAQ,UAAU;IAC5B;;OAEG;IAEH,GAAG,SAAK;IAER;;OAEG;IAEH,GAAG,SAAO;IAEV;;OAEG;IAEH,IAAI,EAAE,MAAM,CAAC;IAEb;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;;;OAIG;IAEH,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAEzB;;OAEG;IAEH,OAAO,EAAE,OAAO,IAAI,CAAC,KAAK,CAAC;IAG3B,SAAS,CAAC,KAAK,EAAE,WAAW,CAAC;IAG7B,SAAS,CAAC,QAAQ,EAAE,UAAU,CAAC,WAAW,CAAC,CAAC;IAG5C,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,SAAS,CAAC,OAAO,EAAE,MAAM,CAAC;IAC1B,OAAO,CAAC,YAAY,CAAgB;IAEpC,IAAI,KAAK,IAAI,OAAO,CAEnB;IAED;;OAEG;IACH,IAAI,UAAU,IAAI,MAAM,EAAE,CAEzB;IAED;;OAEG;IACH,QAAQ,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,SAAI,GAAG,MAAM,EAAE;IAS1C,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,IAAI,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAOvF,IAAI,cAAc,IAAI,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAExC;IAED,SAAS,CAAC,MAAM,IAAI,cAAc,CAAC,CAAC,CAAC;IAyBrC,SAAS,CAAC,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,cAAc,CAAC,CAAC,CAAC;IAqBzD,OAAO,CAAC,cAAc,CAAqC;IAE3D;;;OAGG;IACH,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAehC;;OAEG;IACH,UAAU,IAAI,IAAI;IAMlB;;;;OAIG;IACH,SAAS,CAAC,kBAAkB,CAAC,KAAK,EAAE,MAAM,OAK7B,aAAa,KAAG,IAAI;IAYjC;;;;OAIG;IACH,SAAS,CAAC,eAAe,CAAC,KAAK,EAAE,MAAM,OAC1B,UAAU,KAAG,IAAI;IAM9B;;;;OAIG;IACH,SAAS,CAAC,cAAc,CAAC,KAAK,EAAE,MAAM,WACrB,MAAM,KAAG,IAAI;IAY9B;;;OAGG;IACH,SAAS,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE,UAAU,GAAG,MAAM;IAKjE;;;;OAIG;IACH,SAAS,CAAC,oBAAoB,CAAC,CAAC,EAAE,UAAU,GAAG,IAAI;IAenD;;;;OAIG;IACH,SAAS,CAAC,uBAAuB,CAAC,iBAAiB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,OAC9D,UAAU,KAAG,IAAI;IAa9B;;;;OAIG;IACH,SAAS,CAAC,uBAAuB,CAAC,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,OACzD,UAAU,KAAG,IAAI;IAS9B,SAAS,CAAC,cAAc,IAAI,IAAI;IAahC,KAAK,IAAI,IAAI;IAIb,IAAI,IAAI,MAAM,GAAG,MAAM,EAAE;IAIzB,QAAQ,IAAI,MAAM,GAAG,MAAM,EAAE;CAM9B;AAED,eAAe,KAAK,CAAC;AACrB,OAAO,EAAE,KAAK,EAAE,CAAC"}

package/dev/components/range.js

@@ -1,9 +1,9 @@
 import { __decorate } from "tslib";
-import { attr, classList, godown, isNil, joinProperties, loop, part, styles } from "@godown/element";
+import { attr, tokenList, godown, isNil, joinProperties, loop, part, styles, Ranger, omit } from "@godown/element";
 import { css, html } from "lit";
 import { property, queryAll, state } from "lit/decorators.js";
 import { cssGlobalVars, scopePrefix } from "../core/global-style.js";
-import SuperInput from "../core/super-input.js";
+import { SuperInput } from "../core/super-input.js";
 const protoName = "range";
 const cssScope = scopePrefix(protoName);
 /**
@@ -11,7 +11,7 @@ const cssScope = scopePrefix(protoName);
  *
  * Value accepts number, or array.
  *
- * Number has 1 handle, the array has the number of its elements and the minimum is 2.
+ * Number has 1 handle, the array has the number of its elements.
  *
  * @fires input - Fires when the input value changes.
  * @fires change - Fires when the input value changes.
@@ -32,20 +32,11 @@ let Range = class Range extends SuperInput {
          */
         this.max = 100;
         /**
-         * Display vertically.
+         * Whether to display the range vertically.
          */
         this.vertical = false;
         this.__focusStack = [];
     }
-    /**
-     * Returns true when the second number is greater than the first number.
-     */
-    get reverse() {
-        return this.range ? this.value[0] > this.value[1] : false;
-    }
-    /**
-     * If value is array.
-     */
     get range() {
         return Array.isArray(this.value);
     }
@@ -56,9 +47,7 @@ let Range = class Range extends SuperInput {
         return (this.range ? this.value : [this.value]);
     }
     /**
-     * @param len Minimum result length.
-     * @param value Fill value.
-     * @returns Array with length of len.
+     * Pad the value to the specified length.
      */
     padValue(len, value = 0) {
         const { rangeValue } = this;
@@ -68,23 +57,30 @@ let Range = class Range extends SuperInput {
         }
         return rangeValue;
     }
+    attributeChangedCallback(name, _old, value) {
+        super.attributeChangedCallback(name, _old, value);
+        if (name === "max" || name === "min" || name === "step") {
+            this._ranger = new Ranger(this.min, this.max, this.step);
+        }
+    }
+    get observedRecord() {
+        return omit(super.observedRecord, "outline-type");
+    }
     render() {
         const rangeValue = this.padValue(2);
         const from = Math.min(...rangeValue);
         const to = Math.max(...rangeValue);
-        const gap = this.max - this.min;
+        const gap = this._ranger.diff;
         return html `
       <div
         part="root"
         ${attr(this.observedRecord)}
         @mousedown="${this.disabled ? null : this._handleMousedownRoot}"
-        style="${joinProperties({
-            "--from": `${((from - this.min) / gap) * 100}%`,
-            "--to": `${((to - this.min) / gap) * 100}%`,
-            ...(this.range
-                ? Object.fromEntries(rangeValue.map((value, index) => [`--handle-${index}`, `${((value - this.min) / gap) * 100}%`]))
-                : {}),
-        })}"
+        style="${joinProperties([
+            ["--from", `${((from - this.min) / gap) * 100}%`],
+            ["--to", `${((to - this.min) / gap) * 100}%`],
+            ...rangeValue.map((value, index) => [`--handle-${index}`, `${((value - this.min) / gap) * 100}%`]),
+        ])}"
       >
         <div part="track"></div>
         ${loop(this.rangeValue.length, (index) => this._renderHandle(index))}
@@ -92,22 +88,28 @@ let Range = class Range extends SuperInput {
     `;
     }
     _renderHandle(index) {
-        const { range } = this;
-        const end = !range || index === this.value.length - 1;
+        const { disabled, range, rangeValue } = this;
+        // in single-handle mod (value is a number or an array with length 1),
+        const end = !range || (range && index === rangeValue.length - 1 && rangeValue.length === 1);
         return html `
       <i
         tabindex="0"
         part="handle"
-        class="${classList({ "last-focus": this.lastFocus === index })}"
-        @mousedown="${this.disabled ? null : this.createMouseDown(index)}"
-        @focus="${this.disabled ? null : () => this.focusHandle(index)}"
-        @blur="${this.disabled ? null : this.blurHandle}"
-        style="z-index:${this.__focusStack.indexOf(index) + 1};--handle:var(--${
-        /* In single-handle mod or end, it is max value */
-        !range && end ? "to" : `handle-${index}`})"
+        class="${tokenList({ "last-focus": this.lastFocus === index })}"
+        @mousedown="${disabled ? null : this.createMouseDown(index)}"
+        @focus="${disabled ? null : () => this.focusHandle(index)}"
+        @blur="${disabled ? null : this.blurHandle}"
+        style="${joinProperties({
+            "z-index": this.__focusStack.indexOf(index) + 1,
+            "--handle": `var(--${end ? "to" : `handle-${index}`})`,
+        })}"
       ></i>
     `;
     }
+    /**
+     * Focuses the handle at the given index, updates the focus stack, and dispatches a "focus" event.
+     * @param index - The index of the handle to focus.
+     */
     focusHandle(index) {
         this.lastFocus = index;
         const indexOfFocusStack = this.__focusStack.indexOf(index);
@@ -122,41 +124,59 @@ let Range = class Range extends SuperInput {
         }
         this.dispatchEvent(new CustomEvent("focus", { detail: index }));
     }
+    /**
+     * Removes the focus from the currently focused handle and dispatches a "blur" event.
+     */
     blurHandle() {
         this.lastFocus = undefined;
         this.__keydownEvent = this.events.remove(document, "keydown", this.__keydownEvent);
         this.dispatchEvent(new CustomEvent("blur"));
     }
+    /**
+     * Creates a keydown event handler that updates the value of the range based on arrow key presses.
+     * @param index - The index of the handle to update.
+     * @returns A function that handles the keydown event and updates the range value.
+     */
     createKeydownEvent(index) {
-        if (!this.range) {
+        const { rangeValue, step } = this;
+        if (rangeValue.length < 2) {
             index = 0;
         }
         return (e) => {
+            const old = rangeValue[index];
             if (e.key === "ArrowLeft" || e.key === "ArrowDown") {
                 e.preventDefault();
-                this.createSetValue(index)((old) => old - this.step);
+                this.createSetValue(index)(old - step);
             }
             else if (e.key === "ArrowRight" || e.key === "ArrowUp") {
                 e.preventDefault();
-                this.createSetValue(index)((old) => old + this.step);
+                this.createSetValue(index)(old + step);
             }
         };
     }
+    /**
+     * Creates a mouse down event handler that focuses the handle at the given index and sets the value of the range.
+     * @param index - The index of the handle to focus.
+     * @returns A function that handles the mouse down event and updates the range value.
+     */
     createMouseDown(index) {
         return (e) => {
             this.focusHandle(index);
             this.createMousedownListener(this.createSetValue(index))(e);
         };
     }
+    /**
+     * Creates a function that sets the value of the range at the given index.
+     * @param index - The index of the value to set.
+     * @returns A function that sets the value of the range.
+     */
     createSetValue(index) {
-        return (numberOrModifier) => {
-            const number = typeof numberOrModifier === "number"
-                ? this.normalizeValue(numberOrModifier)
-                : numberOrModifier(this.rangeValue[index]);
-            let newValue = number;
+        return (value) => {
+            const normalizeValue = this._ranger.normalize(value);
+            let newValue = normalizeValue;
             if (this.range) {
-                newValue = [...this.rangeValue];
-                newValue[index] = number;
+                newValue = [...this.value];
+                newValue[index] = normalizeValue;
             }
             this.value = newValue;
             this.dispatchEvent(new CustomEvent("range", { detail: this.value }));
@@ -164,25 +184,17 @@ let Range = class Range extends SuperInput {
     }
     /**
      * Compute value from event.
+     * @returns The value closest to the event client position.
      */
-    _computeValue(e) {
-        const rect = this._root.getBoundingClientRect();
-        const div = this.vertical ? (e.clientY - rect.top) / rect.height : (e.clientX - rect.left) / rect.width;
-        const value = Math.round((div * (this.max - this.min)) / this.step) * this.step;
-        return this.normalizeValue(value);
+    _computeValue({ clientX, clientY }) {
+        const { top, left, height, width } = this._root.getBoundingClientRect();
+        return this._ranger.present(this.vertical ? (clientY - top) / height : (clientX - left) / width);
     }
     /**
-     * Ensure that the values do not exceed the range of max and min.
+     * Handles the mouse down event on the root element of the range component.
+     * Computes the closest value to the mouse position, sets the value, and focuses the corresponding handle.
+     * @param e - The mouse down event object.
      */
-    normalizeValue(value) {
-        if (value > this.max) {
-            value -= this.step;
-        }
-        else if (value < this.min) {
-            value += this.step;
-        }
-        return value;
-    }
     _handleMousedownRoot(e) {
         const value = this._computeValue(e);
         const index = this.range
@@ -197,6 +209,11 @@ let Range = class Range extends SuperInput {
         this.createMousedownListener(set)(e);
         this.focusHandle(index);
     }
+    /**
+     * Creates a mouse down event handler that focuses the handle at the given index and sets the value of the range.
+     * @param index - The index of the handle to focus.
+     * @returns A function that handles the mouse down event and updates the range value.
+     */
     createMousedownListener(mouseMoveCallback) {
         return (e) => {
             e.preventDefault();
@@ -210,17 +227,22 @@ let Range = class Range extends SuperInput {
             this.events.add(document, "mouseup", stop);
         };
     }
+    /**
+     * Creates a mouse move event handler that updates the range value based on the mouse position.
+     * @param callback - A function to call with the new value when the mouse is moved.
+     * @returns A function that handles the mouse move event and updates the range value.
+     */
     createMousemoveListener(callback) {
         return (e) => {
             const value = this._computeValue(e);
-            if (value > this.max || value < this.min) {
+            if (value !== this._ranger.restrict(value)) {
                 return;
             }
             callback?.call(this, value);
         };
     }
     _connectedInit() {
-        const gap = this.max - this.min;
+        const gap = this._ranger.diff;
         this.step ||= gap / 100;
         if (isNil(this.value)) {
             if (!isNil(this.default)) {
@@ -279,7 +301,7 @@ Range = __decorate([
       ${cssScope}--handle-active: var(${cssGlobalVars.active});
       ${cssScope}--track-width: .5em;
       ${cssScope}--length: var(${cssGlobalVars.input}-width);
-      background: var(${cssGlobalVars.input}-background);
+      background: var(${cssGlobalVars.passive});
       width: var(${cssScope}--length);
       display: block;
     }