godown 3.3.0 → 3.4.0

package/src/components/input.ts

@@ -1,9 +1,10 @@
-import { attr, tokenList, 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 { type TemplateResult, 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";
 
@@ -19,11 +20,13 @@ const protoName = "input";
   :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});
+  }
 `)
 class Input extends SuperInput {
   type: "text" | "search" | "tel" | "url" | "email" | "password" = "text";
@@ -68,9 +71,27 @@ class Input extends SuperInput {
     `;
   }
 
-  reset(): void {
-    this._input.value = this.default;
-    this.value = this.default;
+  protected _renderSuffix(): TemplateResult<1> {
+    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>
+    `;
   }
 }
 

package/src/components/link.ts

@@ -1,7 +1,7 @@
 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";
@@ -92,13 +92,13 @@ class Link extends SuperAnchor {
   handleState: () => void = () => {
     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/src/components/progress.ts

@@ -1,4 +1,4 @@
-import { attr, godown, isNil, styles } from "@godown/element";
+import { attr, godown, isNil, Ranger, styles } from "@godown/element";
 import { type TemplateResult, css, html } from "lit";
 import { property } from "lit/decorators.js";
 
@@ -31,6 +31,7 @@ const protoName = "progress";
     z-index: 1;
     position: relative;
     border-radius: inherit;
+    overflow: hidden;
   }
 
   [part="value"] {
@@ -72,12 +73,8 @@ class Progress extends GlobalStyle {
     let width = 20;
     let className: string;
     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`
@@ -93,24 +90,6 @@ 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: string | number = "0"): number {
-    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;
-  }
 }
 
 export default Progress;

package/src/components/range.ts

@@ -1,9 +1,9 @@
-import { attr, tokenList, godown, isNil, joinProperties, loop, part, styles, Ranger } from "@godown/element";
+import { attr, tokenList, godown, isNil, joinProperties, loop, part, styles, Ranger, omit } from "@godown/element";
 import { type TemplateResult, 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);
@@ -13,7 +13,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.
@@ -29,7 +29,7 @@ const cssScope = scopePrefix(protoName);
       ${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;
     }
@@ -136,7 +136,7 @@ class Range extends SuperInput {
   step: number;
 
   /**
-   * Display vertically.
+   * Whether to display the range vertically.
    */
   @property({ type: Boolean, reflect: true })
   vertical = false;
@@ -167,9 +167,6 @@ class Range extends SuperInput {
   protected _ranger: Ranger;
   private __focusStack: number[] = [];
 
-  /**
-   * If value is array.
-   */
   get range(): boolean {
     return Array.isArray(this.value);
   }
@@ -182,9 +179,7 @@ class Range extends SuperInput {
   }
 
   /**
-   * @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 = 0): number[] {
     const { rangeValue } = this;
@@ -202,6 +197,10 @@ class Range extends SuperInput {
     }
   }
 
+  get observedRecord(): Record<string, any> {
+    return omit(super.observedRecord, "outline-type");
+  }
+
   protected render(): TemplateResult<1> {
     const rangeValue = this.padValue(2);
     const from = Math.min(...rangeValue);
@@ -228,10 +227,10 @@ class Range extends SuperInput {
   }
 
   protected _renderHandle(index: number): TemplateResult<1> {
-    const { rangeValue, disabled } = this;
+    const { disabled, range, rangeValue } = this;
 
-    // in single-handle mod or last handle.
-    const end = index === rangeValue.length - 1;
+    // 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"
@@ -250,6 +249,10 @@ class Range extends SuperInput {
 
   private __keydownEvent: EventListenerOrEventListenerObject;
 
+  /**
+   * 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 {
     this.lastFocus = index;
     const indexOfFocusStack = this.__focusStack.indexOf(index);
@@ -265,12 +268,20 @@ 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(): void {
     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.
+   */
   protected createKeydownEvent(index: number) {
     const { rangeValue, step } = this;
     if (rangeValue.length < 2) {
@@ -288,6 +299,11 @@ class Range extends SuperInput {
     };
   }
 
+  /**
+   * 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) {
     return (e: MouseEvent): void => {
       this.focusHandle(index);
@@ -295,6 +311,11 @@ class Range extends SuperInput {
     };
   }
 
+  /**
+   * 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) {
     return (value: number): void => {
       const normalizeValue = this._ranger.normalize(value);
@@ -310,12 +331,18 @@ class Range extends SuperInput {
 
   /**
    * Compute value from event.
+   * @returns The value closest to the event client position.
    */
   protected _computeValue({ clientX, clientY }: MouseEvent): number {
     const { top, left, height, width } = this._root.getBoundingClientRect();
     return this._ranger.present(this.vertical ? (clientY - top) / height : (clientX - left) / width);
   }
 
+  /**
+   * 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.
+   */
   protected _handleMousedownRoot(e: MouseEvent): void {
     const value = this._computeValue(e);
     const index = this.range
@@ -331,7 +358,11 @@ 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.
+   */
   protected createMousedownListener(mouseMoveCallback: (arg0: number) => void) {
     return (e: MouseEvent): void => {
       e.preventDefault();
@@ -346,6 +377,11 @@ class Range extends SuperInput {
     };
   }
 
+  /**
+   * 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) {
     return (e: MouseEvent): void => {
       const value = this._computeValue(e);

package/src/components/rotate.ts

@@ -73,11 +73,13 @@ class Rotate extends GlobalStyle {
 
   /**
    * Compute offset.
-   * ```
-   * `rotateX(${rotateX}rad) rotateY(${rotateY}rad)`
-   * ```
-   * @param e Mouse move event.
+   *
    * @returns rotateX, rotateY
+   * @example
+   * ```ts
+   * const { rotateX, rotateY } = this._computeOffset(e);
+   * `rotateX(${rotateX}rad) rotateY(${rotateY}rad)`;
+   * ```
    */
   protected _computeOffset(e: MouseEvent): {
     rotateX: number;

package/src/components/select.ts

@@ -4,6 +4,8 @@ import { type TemplateResult, css, html, nothing } from "lit";
 import { property, state } from "lit/decorators.js";
 
 import Input from "./input.js";
+import { cssGlobalVars } from "../core/global-style.js";
+import { type DirectionCardinalY, directionOutsetPlace } from "../core/direction.js";
 
 function contain(a: string, b: string): boolean {
   return a && b && a.toLowerCase().includes(b.toLowerCase());
@@ -46,29 +48,29 @@ const protoName = "select";
  * @category input
  */
 @godown(protoName)
-@styles(css`
-  [part="input"] {
-    text-overflow: ellipsis;
-  }
-
-  [part="content"] {
-    position: absolute;
-    width: 100%;
-    visibility: hidden;
-  }
+@styles(
+  directionOutsetPlace,
+  css`
+    :host(:focus-within),
+    .outline {
+      ${cssGlobalVars.input}-outline-color: var(${cssGlobalVars.active});
+    }
 
-  [direction="bottom"] [part="content"] {
-    top: 100%;
-  }
+    [part="input"] {
+      text-overflow: ellipsis;
+    }
 
-  [direction="top"] [part="content"] {
-    bottom: 100%;
-  }
+    [part="content"] {
+      position: absolute;
+      width: 100%;
+      visibility: hidden;
+    }
 
-  [visible] [part="content"] {
-    visibility: visible;
-  }
-`)
+    [visible] [part="content"] {
+      visibility: visible;
+    }
+  `,
+)
 class Select extends Input {
   // @ts-ignore
   value: string | string[];
@@ -83,7 +85,7 @@ class Select extends Input {
   protected _content: HTMLElement;
 
   @property()
-  direction: "top" | "bottom" | undefined;
+  direction: DirectionCardinalY;
 
   @property({ type: Boolean })
   multiple = false;
@@ -92,21 +94,25 @@ class Select extends Input {
   visible = false;
 
   @state()
-  protected autoDirection: "top" | "bottom" = "bottom";
+  protected autoDirection: DirectionCardinalY = "bottom";
 
   protected lastChecked: HTMLElement;
   protected defaultText: string;
   protected defaultChecked: HTMLElement[];
   private __store: { value: string; text: string }[] = [];
 
+  get observedRecord(): Record<string, any> {
+    return {
+      ...super.observedRecord,
+      direction: this.direction || this.autoDirection,
+    };
+  }
+
   protected render(): TemplateResult<1> {
     return html`
       <div
         part="root"
-        ${attr({
-          ...this.observedRecord,
-          direction: this.direction || this.autoDirection,
-        })}
+        ${attr(this.observedRecord)}
         class="input-field"
       >
         ${[
@@ -138,6 +144,7 @@ class Select extends Input {
             <label
               for="${this.makeId}"
               part="content"
+              direction-outset-place
             >
               ${htmlSlot()}
             </label>

package/src/components/split.ts

@@ -1,9 +1,9 @@
-import { type HandlerEvent, attr, tokenList, godown, styles, loop } from "@godown/element";
+import { type HandlerEvent, attr, tokenList, godown, styles, loop, omit } from "@godown/element";
 import { type TemplateResult, 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";
+import { SuperInput } from "../core/super-input.js";
 
 const protoName = "split";
 const cssScope = scopePrefix(protoName);
@@ -24,7 +24,6 @@ const cssScope = scopePrefix(protoName);
 @godown(protoName)
 @styles(css`
   :host {
-    color: var(${cssGlobalVars.foreground});
     display: block;
     border-radius: 1px;
     width: fit-content;
@@ -50,9 +49,10 @@ const cssScope = scopePrefix(protoName);
     width: var(${cssScope}--size);
     height: var(${cssScope}--size);
     vertical-align: top;
-    text-align: center;
-    background-color: var(${cssGlobalVars.input}-background);
     border-radius: inherit;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
   }
 
   [part="input"] {
@@ -65,7 +65,7 @@ const cssScope = scopePrefix(protoName);
   }
 
   .focus {
-    box-shadow: var(${cssGlobalVars.input}-box-shadow);
+    ${cssGlobalVars.input}-outline-color: var(${cssGlobalVars.active});
   }
 `)
 class Split extends SuperInput {
@@ -87,6 +87,10 @@ class Split extends SuperInput {
   @state()
   currentValue: (string | void)[] = [];
 
+  get observedRecord(): Record<string, any> {
+    return omit(super.observedRecord, "outline-type");
+  }
+
   protected render(): TemplateResult<1> {
     return html`
       <div
@@ -98,6 +102,7 @@ class Split extends SuperInput {
           (index: number) => html`
             <span
               part="input-box"
+              outline-type="${this.outlineType}"
               class="${tokenList({ focus: this.current === index })}"
               @click="${this.disabled ? null : () => this.focusAt(index)}"
             >

package/src/components/switch.ts

@@ -1,9 +1,9 @@
-import { attr, godown, styles } from "@godown/element";
+import { attr, godown, omit, styles } from "@godown/element";
 import { type TemplateResult, css, html } from "lit";
 import { property, query } 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 = "switch";
 const cssScope = scopePrefix(protoName);
@@ -11,9 +11,6 @@ const cssScope = scopePrefix(protoName);
 /**
  * {@linkcode Switch} renders a switch.
  *
- * The switch is rectangular by default,
- * set the round property to rounded switch.
- *
  * @fires change - Fires when the switch is switched.
  * @category input
  */
@@ -32,18 +29,23 @@ const cssScope = scopePrefix(protoName);
     ${cssScope}-handle-size: 1.25em;
     ${cssScope}-handle-space: .125em;
     ${cssScope}-transition: .2s ease-in-out;
-    background: var(${cssGlobalVars.input}-background);
+    border-radius: calc(var(${cssScope}-height) / 2);
+    background: var(${cssGlobalVars.passive});
     vertical-align: bottom;
-    border-radius: 0;
+    transition: 0.2s ease-in-out;
+    transition-property: background, left;
+  }
+
+  :host([checked]) {
+    background: var(${cssGlobalVars.active});
   }
 
   [part="root"],
   [part="handle"] {
-    transition: var(${cssScope}-transition);
+    transition: inherit;
   }
 
   [part="root"] {
-    border-radius: inherit;
     position: relative;
     height: inherit;
   }
@@ -52,7 +54,6 @@ const cssScope = scopePrefix(protoName);
     opacity: 0;
     width: 100%;
     height: 100%;
-    appearance: none;
   }
 
   [part="handle"] {
@@ -64,45 +65,26 @@ const cssScope = scopePrefix(protoName);
     left: 0;
     width: 50%;
     pointer-events: none;
-    border-radius: inherit;
-  }
-
-  :host([round]) {
-    border-radius: calc(var(${cssScope}-height) / 2);
-    background: var(${cssGlobalVars.passive});
   }
 
   :host([checked]) [part="handle"] {
     left: 50%;
   }
 
-  .rect .true {
-    background: var(${cssGlobalVars.active});
-  }
-
-  .rect .false {
-    background: var(${cssGlobalVars.passive});
-  }
-
-  .round [part="handle"] {
+  [part="handle"] {
     --size: var(${cssScope}-handle-size);
     border-radius: 100%;
-    background: var(--godown--input-control);
+    background: currentColor;
     width: var(--size);
     height: var(--size);
     margin: var(${cssScope}-handle-space);
   }
-
-  :host([checked]) .round {
-    background: var(${cssGlobalVars.active});
-  }
 `)
 class Switch extends SuperInput {
   /**
-   * Display rounded.
+   * @deprecated
    */
-  @property({ type: Boolean, reflect: true })
-  round = false;
+  round: boolean;
 
   /**
    * Whether this element is selected or not.
@@ -119,8 +101,8 @@ class Switch extends SuperInput {
   /**
    * Default checked state.
    */
-  @property()
-  default = "false";
+  @property({ type: Boolean })
+  default = false;
 
   /**
    * Input value.
@@ -131,12 +113,16 @@ class Switch extends SuperInput {
   @query("input")
   protected _input: HTMLInputElement;
 
+  get observedRecord(): Record<string, any> {
+    return omit(super.observedRecord, "outline-type");
+  }
+
   protected render(): TemplateResult<1> {
     return html`
       <div
         part="root"
         ${attr(this.observedRecord)}
-        class="${this.round ? "round" : "rect"}"
+        class="round"
       >
         <input
           part="input"
@@ -156,16 +142,15 @@ class Switch extends SuperInput {
   }
 
   reset(): void {
-    this.checked = this.default === "true";
+    this.checked = this.default;
     this._input.checked = this.checked;
   }
 
-  connectedCallback(): void {
-    super.connectedCallback();
+  protected _connectedInit(): void {
     if (this.checked) {
-      this.default = "true";
+      this.default = true;
     }
-    if (this.default === "true") {
+    if (this.default === true) {
       this.checked = true;
     }
   }

package/src/components/time.ts

@@ -42,13 +42,13 @@ class Time extends GlobalStyle {
    * If there is a value, update every gap or timeout.
    */
   @property({ type: Number })
-  timeout: any;
+  timeout: number;
 
   /**
    * The number of milliseconds that change with each update.
    */
   @property({ type: Number })
-  gap: any;
+  gap: number;
 
   protected timeoutId: number;