godown 3.2.0 → 3.4.0

package/src/components/card.ts

@@ -22,19 +22,13 @@ const cssScope = scopePrefix(protoName);
 @godown(protoName)
 @styles(css`
   :host {
-    ${cssScope}--background: var(${cssGlobalVars.background});
-    ${cssScope}--border-width: .0375em;
-    ${cssScope}--border-color: transparent;
-    ${cssScope}--border-background: var(${cssGlobalVars.passive});
-    ${cssScope}--padding: .75em;
-    color: var(${cssGlobalVars.foreground});
-    background: var(${cssScope}--background);
+    ${cssScope}--border-width: .075em;
+    ${cssScope}--border-color: var(${cssGlobalVars.passive});
+    ${cssScope}--padding: .5em;
     border-width: var(${cssScope}--border-width);
     display: block;
     flex-shrink: 0;
-    position: relative;
-    overflow: hidden;
-    box-sizing: border-box;
+    border-radius: 0.2em;
   }
 
   slot {
@@ -44,7 +38,7 @@ const cssScope = scopePrefix(protoName);
 
   :host,
   slot {
-    border-color: var(${cssScope}--border-background);
+    border-color: var(${cssScope}--border-color);
     border-style: solid;
   }
 
@@ -57,9 +51,15 @@ const cssScope = scopePrefix(protoName);
   }
 `)
 class Card extends GlobalStyle {
+  /**
+   * Whether to display the header.
+   */
   @property({ type: Boolean })
   footer = false;
 
+  /**
+   * Whether to display the footer.
+   */
   @property({ type: Boolean })
   header = false;
 

package/src/components/carousel.ts

@@ -1,4 +1,4 @@
-import { attr, godown, htmlSlot, htmlStyle, part, styles } from "@godown/element";
+import { attr, godown, htmlSlot, part, styles } from "@godown/element";
 import iconChevronLeft from "@godown/f7-icon/icons/chevron-left.js";
 import iconChevronRight from "@godown/f7-icon/icons/chevron-right.js";
 import { type TemplateResult, css, html } from "lit";
@@ -8,16 +8,16 @@ import { GlobalStyle } from "../core/global-style.js";
 
 const protoName = "carousel";
 
+function getWidth(e) {
+  return e.getBoundingClientRect().width;
+}
+
 /**
  * {@linkcode Carousel} make the content display as a carousel.
  *
  * When this component is `firstUpdated`,
  * clone the first and last element and make the matching element visible when switching index.
  *
- * Child elements should maintain the same size.
- *
- * If no width, it will be the width of the first element.
- *
  * @slot - Carousel items, should maintain the same size.
  * @fires change - Fires when the index changes.
  * @category display
@@ -69,23 +69,17 @@ const protoName = "carousel";
 `)
 class Carousel extends GlobalStyle {
   /**
-   * The index of the element is displayed for the first time.
+   * The index of the current item.
    */
   @property({ type: Number })
   index = 0;
 
   /**
-   * If autoChange > 0, the rotation will be automated.
+   * The duration of the transition.
    */
   @property({ type: Number })
   autoChange = 0;
 
-  /**
-   * Element width.
-   */
-  @property()
-  width: string;
-
   @part("move-root")
   protected _moveRoot: HTMLElement;
 
@@ -95,6 +89,8 @@ class Carousel extends GlobalStyle {
 
   private __cloneLast: HTMLElement | undefined;
 
+  protected _offset: number;
+
   protected render(): TemplateResult<1> {
     return html`
       <div
@@ -107,47 +103,59 @@ class Carousel extends GlobalStyle {
         >
           ${iconChevronLeft()}
         </i>
-        <div
-          part="move-root"
-          style="transform:${`translateX(-${this.index + 1}00%)`}"
-        >
-          ${htmlSlot()}
-        </div>
+        <div part="move-root">${htmlSlot()}</div>
         <i
           part="next"
           @click="${this.next}"
         >
           ${iconChevronRight()}
         </i>
-        ${htmlStyle(`:host,:host([contents]) [part=root]{width:${this.width};}`)}
       </div>
     `;
   }
 
-  protected async firstUpdated(): Promise<void> {
-    await this.updateComplete;
-
+  connectedCallback(): void {
+    super.connectedCallback();
     if (this.children.length) {
-      this.width ||= `${(this.firstElementChild as HTMLElement).offsetWidth}px`;
-
       this.__cloneFirst?.remove();
       this.__cloneLast?.remove();
       this.__cloneLast = this.firstElementChild.cloneNode(true) as HTMLElement;
       this.__cloneFirst = this.lastElementChild.cloneNode(true) as HTMLElement;
       this.appendChild(this.__cloneLast);
       this.insertBefore(this.__cloneFirst, this.firstElementChild);
-      this.show(this.index);
     }
-    this.checkInterval();
   }
 
-  disconnectedCallback(): void {
-    clearInterval(this.intervalID);
+  protected async firstUpdated(): Promise<void> {
+    await this.updateComplete;
+    this.show(this.index, true);
   }
 
-  show(i: number): void {
+  attributeChangedCallback(name: string, _old: string | null, value: string | null): void {
+    super.attributeChangedCallback(name, _old, value);
+    if (name === "index" && this.isConnected) {
+      this.show(this.index);
+    }
+  }
+
+  show(i: number, n?: boolean): void {
+    i = this.normalizeIndex(i);
     this.index = i;
+    this._offset = 0;
+    for (let childIndex = 0; childIndex <= i; childIndex++) {
+      this._offset -= getWidth(this.children[childIndex]);
+    }
+    this._offset += (getWidth(this) - getWidth(this.children[i + 1])) / 2;
     this.dispatchEvent(new CustomEvent("change", { detail: i, composed: true }));
+    this._doTranslateX(`${this._offset}px`, n);
+    this.timeouts.remove(this.intervalID);
+    if (this.autoChange > 0) {
+      this.intervalID = this.timeouts.add(
+        setInterval(() => {
+          this.next();
+        }, this.autoChange),
+      );
+    }
   }
 
   next(): void {
@@ -157,7 +165,6 @@ class Carousel extends GlobalStyle {
     } else {
       this.show(this.index + 1);
     }
-    this.checkInterval();
   }
 
   prev(): void {
@@ -167,26 +174,20 @@ class Carousel extends GlobalStyle {
     } else {
       this.show(this.index - 1);
     }
-    this.checkInterval();
   }
 
   protected _doTranslateX(xValue: string, noTransition?: boolean): void {
     this._moveRoot.style.transform = `translateX(${xValue})`;
-    if (noTransition) {
-      this._moveRoot.style.transition = "none";
-    }
-    this._moveRoot.getBoundingClientRect();
+    this._moveRoot.style.transition = noTransition ? "none" : "";
   }
 
-  checkInterval(): void {
-    if (this.autoChange) {
-      if (this.intervalID) {
-        clearInterval(this.intervalID);
-      }
-      this.intervalID = setInterval(() => {
-        this.next();
-      }, this.autoChange);
+  normalizeIndex(i: number): number {
+    if (i < 0) {
+      return 0;
+    } else if (i > this.children.length - 3) {
+      return this.children.length - 3;
     }
+    return i;
   }
 }
 

package/src/components/details.ts

@@ -4,7 +4,7 @@ import { type TemplateResult, css, html } from "lit";
 import { property } from "lit/decorators.js";
 
 import { scopePrefix } from "../core/global-style.js";
-import SuperOpenable from "../core/super-openable.js";
+import { SuperOpenable } from "../core/super-openable.js";
 
 const protoName = "details";
 
@@ -79,13 +79,13 @@ const cssScope = scopePrefix(protoName);
 `)
 class Details extends SuperOpenable {
   /**
-   * If it is true, the summary event scope will fill the element.
+   * Determines whether the details component should fill the available space.
    */
   @property({ type: Boolean })
   fill = false;
 
   /**
-   * Summary text.
+   * The summary text to display in the details component.
    */
   @property()
   summary = "";

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

@@ -40,7 +40,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, 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 { 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";
@@ -44,7 +47,7 @@ class Input extends SuperInput {
       <div
         part="root"
         ${attr(this.observedRecord)}
-        class="${classList("input-field", this.variant)}"
+        class="${tokenList("input-field", this.variant)}"
       >
         ${[
           this._renderPrefix(),
@@ -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;