godown 3.3.0 → 3.5.0

package/src/components/dialog.ts

@@ -2,8 +2,14 @@ import { type HandlerEvent, attr, godown, htmlSlot, styles } from "@godown/eleme
 import { type PropertyValues, type TemplateResult, css, html } from "lit";
 import { property } from "lit/decorators.js";
 
-import { cssGlobalVars, scopePrefix } from "../core/global-style.js";
-import SuperOpenable from "../core/super-openable.js";
+import { scopePrefix } from "../core/global-style.js";
+import { SuperOpenable } from "../core/super-openable.js";
+import {
+  type DirectionCardinal,
+  type DirectionCenter,
+  type DirectionCorner,
+  directionInsetAlign,
+} from "../core/direction.js";
 
 const protoName = "dialog";
 const cssScope = scopePrefix(protoName);
@@ -19,87 +25,77 @@ const cssScope = scopePrefix(protoName);
  * @category feedback
  */
 @godown(protoName)
-@styles(css`
-  :host {
-    ${cssScope}--background: none;
-    ${cssScope}--background-modal: var(${cssGlobalVars.background});
-    ${cssScope}--opacity-modal: 0.2;
-    background: var(${cssScope}--background);
-    pointer-events: none;
-    visibility: hidden;
-    position: fixed;
-    z-index: 1;
-    inset: 0;
-  }
-
-  :host([open]) {
-    visibility: visible;
-  }
-
-  :host([open][modal]) [part="modal"] {
-    pointer-events: all;
-    visibility: visible;
-    opacity: var(${cssScope}--opacity-modal);
-  }
-
-  [part="modal"] {
-    visibility: hidden;
-    opacity: 0;
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    background: var(${cssScope}--background-modal);
-  }
-
-  [part="root"] {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    position: relative;
-    align-items: center;
-    justify-content: center;
-  }
+@styles(
+  directionInsetAlign,
+  css`
+    :host {
+      ${cssScope}--background: none;
+      ${cssScope}--background-modal: black;
+      ${cssScope}--opacity-modal: 0.2;
+      background: var(${cssScope}--background);
+      pointer-events: none;
+      visibility: hidden;
+      position: fixed;
+      z-index: 1;
+      inset: 0;
+    }
 
-  [part="container"] {
-    pointer-events: all;
-    position: absolute;
-  }
+    :host([open]) {
+      visibility: visible;
+    }
 
-  [direction^="top"] [part="container"] {
-    top: 0;
-  }
+    :host([open][modal]) [part="modal"] {
+      pointer-events: all;
+      visibility: visible;
+      opacity: var(${cssScope}--opacity-modal);
+    }
 
-  [direction^="bottom"] [part="container"] {
-    bottom: 0;
-  }
+    [part="modal"] {
+      visibility: hidden;
+      opacity: 0;
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      background: var(${cssScope}--background-modal);
+    }
 
-  [direction$="right"] [part="container"] {
-    right: 0;
-  }
+    [part="root"] {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      position: relative;
+      align-items: center;
+      justify-content: center;
+    }
 
-  [direction$="left"] [part="container"] {
-    left: 0;
-  }
-`)
+    [part="container"] {
+      pointer-events: all;
+      position: absolute;
+    }
+  `,
+)
 class Dialog extends SuperOpenable {
   /**
-   * Direction of the opening animation.
-   * @deprecated
+   * The direction of the dialog container.
    */
-  direction: string;
+  @property()
+  direction: DirectionCardinal | DirectionCorner | DirectionCenter;
 
   /**
-   * Enable modal, blocking event penetration.
+   * Indicates whether the dialog should be displayed as a modal.
    */
   @property({ type: Boolean, reflect: true })
   modal = false;
 
   /**
-   * Close key.
+   * The keys will close the dialog when pressed.
    */
   @property()
   key = "Escape";
 
+  /**
+   * Indicates whether the modal has been invoked.
+   */
   private __modalInvoke = false;
 
   protected render(): TemplateResult<1> {
@@ -109,7 +105,12 @@ class Dialog extends SuperOpenable {
         ${attr(this.observedRecord)}
       >
         <div part="modal"></div>
-        <div part="container">${htmlSlot()}</div>
+        <div
+          part="container"
+          direction-inset-align
+        >
+          ${htmlSlot()}
+        </div>
       </div>
     `;
   }

package/src/components/divider.ts

@@ -2,7 +2,7 @@ import { attr, godown, styles } from "@godown/element";
 import { type TemplateResult, css, html } from "lit";
 import { property } from "lit/decorators.js";
 
-import { GlobalStyle } from "../core/global-style.js";
+import { cssGlobalVars, GlobalStyle } from "../core/global-style.js";
 
 const protoName = "divider";
 
@@ -19,6 +19,7 @@ const protoName = "divider";
     margin: auto;
     display: block;
     background: currentColor;
+    color: var(${cssGlobalVars.passive});
   }
 
   :host([vertical]) {
@@ -40,7 +41,7 @@ const protoName = "divider";
 `)
 class Divider extends GlobalStyle {
   /**
-   * Vertical display.
+   * Whether to display the divider vertically.
    */
   @property({ type: Boolean, reflect: true })
   vertical = false;

package/src/components/heading.ts

@@ -60,6 +60,8 @@ class Heading extends GlobalStyle {
 
   /**
    * The anchor prefix.
+   *
+   * Element must have an id to be displayed.
    */
   @property()
   anchor = "#";

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,19 +1,21 @@
-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);
 
+type RangeValue = number | number[];
+
 /**
  * {@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.
@@ -29,7 +31,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;
     }
@@ -116,7 +118,7 @@ const cssScope = scopePrefix(protoName);
     }
   `,
 )
-class Range extends SuperInput {
+class Range<V extends RangeValue = RangeValue> extends SuperInput<RangeValue> {
   /**
    * Minimum value.
    */
@@ -136,7 +138,7 @@ class Range extends SuperInput {
   step: number;
 
   /**
-   * Display vertically.
+   * Whether to display the range vertically.
    */
   @property({ type: Boolean, reflect: true })
   vertical = false;
@@ -147,13 +149,13 @@ class Range extends SuperInput {
    * Accepts number or array of numbers.
    */
   @property({ type: Array })
-  value: number | number[];
+  value: V;
 
   /**
    * The default of `{@linkcode this.value}`.
    */
   @property({ type: Array })
-  default: typeof this.value;
+  default: V;
 
   @part("root")
   protected _root: HTMLElement;
@@ -167,11 +169,8 @@ class Range extends SuperInput {
   protected _ranger: Ranger;
   private __focusStack: number[] = [];
 
-  /**
-   * If value is array.
-   */
-  get range(): boolean {
-    return Array.isArray(this.value);
+  get range(): V extends number ? false : true {
+    return Array.isArray(this.value) as any;
   }
 
   /**
@@ -182,9 +181,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 +199,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 +229,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 +251,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 +270,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 +301,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,27 +313,38 @@ 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);
-      let newValue: number | number[] = normalizeValue;
+      let newValue: RangeValue = normalizeValue;
       if (this.range) {
         newValue = [...(this.value as number[])];
         newValue[index] = normalizeValue;
       }
-      this.value = newValue;
+      this.value = newValue as V;
       this.dispatchEvent(new CustomEvent("range", { detail: this.value }));
     };
   }
 
   /**
    * 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 +360,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 +379,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);
@@ -363,7 +401,7 @@ class Range extends SuperInput {
       if (!isNil(this.default)) {
         this.value = this.default;
       } else {
-        this.value = Math.round(gap / 2 / this.step) * this.step;
+        (this.value as number) = Math.round(gap / 2 / this.step) * this.step;
       }
     }
     this.default ??= this.value;
@@ -373,13 +411,13 @@ class Range extends SuperInput {
     this.value = this.default;
   }
 
-  sort(): number | number[] {
+  sort(): V {
     return (this.value = this.toSorted());
   }
 
-  toSorted(): number | number[] {
+  toSorted(): V {
     if (this.range) {
-      return [...(this.value as number[])].sort((a, b) => a - b);
+      return [...(this.value as number[])].sort((a, b) => a - b) as V;
     }
     return this.value;
   }

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;