godown 3.11.2 → 3.13.0

package/src/web-components/avatar/component.ts

@@ -18,6 +18,7 @@ const protoName = "avatar";
 @godown(protoName)
 @styles(css`
   :host {
+    color: var(${cssGlobalVars.foreground});
     background: var(${cssGlobalVars.passive});
     vertical-align: bottom;
     overflow: hidden;

package/src/web-components/button/component.ts

@@ -61,6 +61,8 @@ const cssScope = scopePrefix(protoName);
       padding: 0.25em 0.75em;
       position: relative;
       user-select: none;
+      display: grid;
+      place-content: center;
     }
 
     i {
@@ -73,21 +75,7 @@ const cssScope = scopePrefix(protoName);
       visibility: visible;
       pointer-events: none;
       transform-origin: 0 0;
-      background: var(${cssScope}--modal-background, currentColor);
-      animation-duration: var(${cssScope}--modal-animation-duration);
-    }
-
-    @keyframes kf {
-      0% {
-        transform: scale(0) translate(-50%, -50%);
-        opacity: var(${cssScope}--modal-opacity, 0.1);
-      }
-      80% {
-        transform: scale(1) translate(-50%, -50%);
-      }
-      to {
-        opacity: 0;
-      }
+      background: currentColor;
     }
   `,
 )
@@ -133,7 +121,7 @@ class Button extends GlobalStyle {
         part="root"
         ${attr(this.observedRecord)}
       >
-        ${this.content || htmlSlot()}
+        ${htmlSlot("", this.content)}
         <span part="modal-root"></span>
       </div>
     `;
@@ -154,7 +142,7 @@ class Button extends GlobalStyle {
 
   connectedCallback(): void {
     super.connectedCallback();
-    this.events.add(this, "click", this._handelClick, true);
+    this.events.add(this, "click", this._handelClick);
   }
 
   protected _handelClick(e: MouseEvent): void {
@@ -177,8 +165,24 @@ class Button extends GlobalStyle {
     modal.style.width = size;
     modal.style.left = `${e.x - x}px`;
     modal.style.top = `${e.y - y}px`;
-    modal.style.animationName = "kf";
     this._modalRoot.appendChild(modal);
+    const keyframes = [
+      {
+        transform: "scale(0) translate(-50%, -50%)",
+        opacity: 0.1,
+      },
+      {
+        transform: "scale(1) translate(-50%, -50%)",
+        offset: 0.8,
+      },
+      {
+        opacity: 0,
+      },
+    ];
+    modal.animate(keyframes, {
+      duration: 800,
+      iterations: 1,
+    });
     modal.addEventListener("animationend", () => modal.remove(), { once: true });
   }
 }

package/src/web-components/card/component.ts

@@ -4,7 +4,7 @@ import { property } from "lit/decorators.js";
 
 import { GlobalStyle, cssGlobalVars, scopePrefix } from "../../internal/global-style.js";
 import type Layout from "../layout/component.js";
-import { RingBuilder, type RingType } from "../../internal/ring.js";
+import { RingBuilder, ringTypeAttribute, type RingType } from "../../internal/ring.js";
 
 const protoName = "card";
 const cssScope = scopePrefix(protoName);
@@ -25,6 +25,7 @@ const cssScope = scopePrefix(protoName);
   :host {
     ${cssScope}--padding: .75em;
     background: var(${cssGlobalVars.background});
+    color: var(${cssGlobalVars.foreground});
     display: block;
     flex-shrink: 0;
   }
@@ -52,7 +53,7 @@ class Card extends GlobalStyle {
     new StyleController(this, () => new RingBuilder({ type: this.ringType }).css);
   }
 
-  @property({ attribute: "ring-type" })
+  @property({ attribute: ringTypeAttribute })
   ringType: RingType = "border";
 
   /**

package/src/web-components/chip/component.ts

@@ -3,7 +3,6 @@ import { type TemplateResult, css, html } from "lit";
 import { property } from "lit/decorators.js";
 
 import { GlobalStyle, cssGlobalVars, scopePrefix } from "../../internal/global-style.js";
-import type { DirectionCorner } from "../../internal/direction.js";
 
 const protoName = "chip";
 const cssScope = scopePrefix(protoName);
@@ -69,10 +68,9 @@ const cssScope = scopePrefix(protoName);
 class Chip extends GlobalStyle {
   /**
    * The position of the chip relative to its parent element.
-   * Possible values are `"top-left"`, `"top-right"`, `"bottom-left"`, and `"bottom-right"`.
    */
   @property()
-  position: DirectionCorner = "top-right";
+  position: "top-left" | "top-right" | "bottom-left" | "bottom-right" = "top-right";
 
   @property({ type: Number })
   value = 0;

package/src/web-components/details/component.ts

@@ -1,10 +1,9 @@
 import { attr, godown, htmlSlot, styles } from "@godown/element";
 import svgCaretDown from "../../internal/icons/caret-down.js";
-import { type TemplateResult, css, html } from "lit";
+import { type PropertyValueMap, type TemplateResult, css, html } from "lit";
 import { property } from "lit/decorators.js";
 
-import { scopePrefix } from "../../internal/global-style.js";
-import { SuperOpenable } from "../../internal/super-openable.js";
+import GlobalStyle, { scopePrefix } from "../../internal/global-style.js";
 
 const protoName = "details";
 
@@ -13,7 +12,7 @@ const cssScope = scopePrefix(protoName);
 /**
  * {@linkcode Details} similar to `<details>`.
  *
- * @slot summary - Details summary if no `summary` is provided.
+ * @slot summary - Details summary (trigger).
  * @slot - Details content.
  * @fires change - Fires when the open changes.
  * @category display
@@ -28,7 +27,6 @@ const cssScope = scopePrefix(protoName);
   }
 
   [part="root"] {
-    padding: 0.25em;
     position: relative;
   }
 
@@ -75,22 +73,16 @@ const cssScope = scopePrefix(protoName);
     transform: rotate(var(${cssScope}--icon-deg-open));
   }
 `)
-class Details extends SuperOpenable {
-  /**
-   * Determines whether the details component should float.
-   */
+class Details extends GlobalStyle {
+  @property({ type: Boolean, reflect: true })
+  open = false;
+
   @property({ type: Boolean })
   float = false;
 
-  /**
-   * Determines whether the details component should fill the available space.
-   */
   @property({ type: Boolean })
   fill = false;
 
-  /**
-   * The summary text to display in the details component.
-   */
   @property()
   summary = "";
 
@@ -104,8 +96,8 @@ class Details extends SuperOpenable {
           part="title"
           @click="${() => this.toggle()}"
         >
-          <span part="summary">${this.summary || htmlSlot("summary")}</span>
-          <span part="icon">${svgCaretDown()}</span>
+          <span part="summary">${htmlSlot("summary", this.summary)}</span>
+          <span part="icon">${htmlSlot("icon", svgCaretDown())}</span>
         </dt>
         <dd
           part="details"
@@ -116,6 +108,25 @@ class Details extends SuperOpenable {
       </dl>
     `;
   }
+
+  protected updated(changedProperties: PropertyValueMap<this>): void {
+    const open = changedProperties.get("open");
+    if (open !== undefined) {
+      this.dispatchCustomEvent("change", open);
+    }
+  }
+
+  toggle(to?: boolean): void {
+    this.open = to ?? !this.open;
+  }
+
+  close(): void {
+    this.open = false;
+  }
+
+  show(): void {
+    this.open = true;
+  }
 }
 
 export default Details;

package/src/web-components/dialog/component.ts

@@ -1,23 +1,24 @@
-import { type HandlerEvent, attr, godown, htmlSlot, styles } from "@godown/element";
+import { type HandlerEvent, godown, htmlSlot, queryPart, styles } from "@godown/element";
 import { type PropertyValues, type TemplateResult, css, html } from "lit";
-import { property, query } from "lit/decorators.js";
+import { property } from "lit/decorators.js";
 
-import { scopePrefix } from "../../internal/global-style.js";
-import { SuperOpenable } from "../../internal/super-openable.js";
+import GlobalStyle, { scopePrefix } from "../../internal/global-style.js";
 
 const protoName = "dialog";
 const cssScope = scopePrefix(protoName);
 
-const splitKeysRegexp = /[\s,]+/;
-
 /**
  * {@linkcode Dialog} similar to `<dialog>`.
  *
  * Like dialog, it listens for submit events and closes itself when the target method is "dialog".
  *
- * It listens for the keydown event and also closes itself when the {@linkcode key} contained in the key is pressed.
+ * Previous versions of Dialog did not contain triggers.
+ * Therefore, unlike Tooltip which uses the default slot as the trigger.
+ * Dialog needs to use slot="trigger" as the trigger instead of an element without a slot name.
  *
  * @fires change - Fires when the open changes.
+ * @slot trigger - The trigger element.
+ * @slot - The dialog content.
  * @category feedback
  */
 @godown(protoName)
@@ -27,25 +28,17 @@ const splitKeysRegexp = /[\s,]+/;
     ${cssScope}--opacity-modal: 0.2;
     width: fit-content;
     display: block;
-    margin: auto;
     background: none;
-    left: 50%;
-    top: 50%;
-    position: fixed;
-    transform: translate(-50%, -50%);
-  }
-
-  :host(:not([open])) {
-    visibility: hidden;
-  }
-
-  :host([contents]) dialog {
-    position: fixed;
   }
 
   dialog {
     position: relative;
-    background: inherit;
+    background: none;
+    z-index: 1;
+    left: 50%;
+    top: 50%;
+    position: fixed;
+    transform: translate(-50%, -50%);
   }
 
   ::backdrop {
@@ -53,40 +46,34 @@ const splitKeysRegexp = /[\s,]+/;
     opacity: var(${cssScope}--opacity-modal);
   }
 `)
-class Dialog extends SuperOpenable {
-  /**
-   * Indicates whether the dialog should be displayed as a modal.
-   */
+class Dialog extends GlobalStyle {
   @property({ type: Boolean, reflect: true })
-  set modal(value: boolean) {
-    this.contents = value;
-  }
+  open = false;
 
-  get modal(): boolean {
-    return this.contents;
-  }
-
-  /**
-   * The keys will close the dialog when pressed.
-   */
-  @property()
-  key = "Escape";
+  @property({ type: Boolean, reflect: true })
+  modal = false;
 
   /**
    * Indicates whether the modal has been invoked.
    */
   private __modalInvoke = false;
 
-  @query("dialog")
+  @queryPart("dialog")
   protected _dialog: HTMLDialogElement;
 
   protected render(): TemplateResult<1> {
     return html`
-      <dialog
+      <div
         part="root"
-        ${attr(this.observedRecord)}
+        @click=${this.show}
       >
-        ${htmlSlot()}
+        ${htmlSlot("trigger")}
+      </div>
+      <dialog
+        part="dialog"
+        role="dialog"
+      >
+        ${htmlSlot("dialog")}${htmlSlot()}
       </dialog>
     `;
   }
@@ -97,19 +84,16 @@ class Dialog extends SuperOpenable {
     this.show();
   }
 
-  attributeChangedCallback(name: string, _old: string | null, value: string | null): void {
-    super.attributeChangedCallback(name, _old, value);
-    if (name === "open") {
-      if (this.open) {
-        if (this.modal) {
-          this._dialog.showModal();
-        } else {
-          this._dialog.show();
-        }
-      } else {
-        this._dialog.close();
-      }
-    }
+  show(): void {
+    this.open = true;
+  }
+
+  close(): void {
+    this.open = false;
+  }
+
+  toggle(to?: boolean): void {
+    this.open = to ?? !this.open;
   }
 
   private __submitEvent: EventListenerOrEventListenerObject;
@@ -118,11 +102,20 @@ class Dialog extends SuperOpenable {
   protected updated(changedProperties: PropertyValues): void {
     if (changedProperties.has("open")) {
       if (this.open) {
-        this.__submitEvent = this.events.add(this, "submit", this._handelSubmit);
-        if (this.key) {
-          this.__keydownEvent = this.events.add(document, "keydown", this._handleKeydown.bind(this));
+        if (this.modal) {
+          this._dialog.showModal();
+        } else {
+          this._dialog.show();
         }
+        this.__submitEvent = this.events.add(this, "submit", this._handelSubmit);
+
+        this.__keydownEvent = this.events.add(document, "keydown", this._handleKeydown.bind(this));
       } else {
+        if (this.__modalInvoke) {
+          this.modal = false;
+          this.__modalInvoke = false;
+        }
+        this._dialog.close();
         this.events.remove(this, "submit", this.__submitEvent);
         this.events.remove(document, "keydown", this.__keydownEvent);
       }
@@ -130,8 +123,7 @@ class Dialog extends SuperOpenable {
   }
 
   protected _handleKeydown(e: KeyboardEvent): void {
-    const keys = this.key.split(splitKeysRegexp);
-    if (keys.includes(e.key) || keys.includes(e.code)) {
+    if (e.key === "Escape") {
       e.preventDefault();
       this.close();
     }
@@ -143,14 +135,6 @@ class Dialog extends SuperOpenable {
       this.close();
     }
   }
-
-  close(): void {
-    if (this.__modalInvoke) {
-      this.modal = false;
-      this.__modalInvoke = false;
-    }
-    this.open = false;
-  }
 }
 
 export default Dialog;

package/src/web-components/heading/component.ts

@@ -43,7 +43,6 @@ const protoName = "heading";
   h5,
   h6 {
     width: fit-content;
-    font-size: revert;
     position: relative;
   }
 `)

package/src/web-components/input/component.ts

@@ -1,4 +1,4 @@
-import { attr, godown, queryPart, styles, StyleController } from "@godown/element";
+import { attr, godown, queryPart, styles, StyleController, htmlSlot } from "@godown/element";
 import iconEyeSlash from "../../internal/icons/eye-slash.js";
 import { type TemplateResult, css, html, nothing } from "lit";
 import { property } from "lit/decorators.js";
@@ -7,6 +7,25 @@ import { cssGlobalVars } from "../../internal/global-style.js";
 import { SuperInput } from "../../internal/super-input.js";
 import { RingBuilder } from "../../internal/ring.js";
 
+type InputType =
+  | "text"
+  | "search"
+  | "tel"
+  | "url"
+  | "email"
+  | "password"
+  | "datetime"
+  | "date"
+  | "month"
+  | "week"
+  | "time"
+  | "datetime-local"
+  | "number"
+  | "range"
+  | "color"
+  | "file"
+  | "image";
+
 const protoName = "input";
 
 /**
@@ -30,7 +49,7 @@ const protoName = "input";
     ${cssGlobalVars.input}-icon-color: currentColor;
   }
 
-  [part~="root"] {
+  [part="root"] {
     padding: 0.4em 0.5em;
     display: flex;
     position: relative;
@@ -42,45 +61,28 @@ const protoName = "input";
     width: 100%;
     height: 100%;
     flex-grow: 1;
-    color: currentColor;
-    background: none;
   }
 
-  [part~="icon"] {
+  [part="prefix"],
+  [part="suffix"] {
+    height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(${cssGlobalVars.input}-icon-color);
   }
 
-  [part~="prefix"],
-  [part~="suffix"] {
-    height: 100%;
-    display: flex;
+  [part="suffix"] slot svg {
+    margin-inline-start: var(${cssGlobalVars.input}-space);
   }
 
-  [part~="suffix"][part~="icon"] {
-    padding-inline-start: var(${cssGlobalVars.input}-space);
-  }
-
-  [part~="prefix"][part~="icon"] {
-    padding-inline-end: var(${cssGlobalVars.input}-space);
+  [part="prefix"] slot svg {
+    margin-inline-end: var(${cssGlobalVars.input}-space);
   }
 `)
 class Input extends SuperInput {
-  type:
-    | "text"
-    | "search"
-    | "tel"
-    | "url"
-    | "email"
-    | "password"
-    | "number"
-    | "date"
-    | "time"
-    | "datetime-local"
-    | "month"
-    | "week" = "text";
+  @property({ reflect: true })
+  type: InputType = "text";
 
   value: string;
 
@@ -136,17 +138,23 @@ class Input extends SuperInput {
     if (this.type === PASSWORD) {
       return html`
         <i
-          part="suffix icon"
+          part="suffix"
           @mousedown="${() => this._changeInputType("text")}"
           @mouseup="${() => this._changeInputType(PASSWORD)}"
           @mouseleave="${() => this._changeInputType(PASSWORD)}"
         >
-          ${iconEyeSlash()}
+          ${htmlSlot("suffix", iconEyeSlash())}
         </i>
       `;
     }
     return super._renderSuffix();
   }
+
+  protected _changeInputType(t: typeof this.type): void {
+    if (this._input) {
+      this._input.type = t;
+    }
+  }
 }
 
 export default Input;

package/src/web-components/layout/component.ts

@@ -24,6 +24,7 @@ const protoName = "layout";
 @styles(css`
   :host {
     width: 100%;
+    height: 100%;
     min-height: 100%;
     flex-direction: column;
     grid-template-rows: auto 1fr auto;

package/src/web-components/link/component.ts

@@ -39,7 +39,6 @@ type LinkType = keyof typeof linkTypes;
 @styles(css`
   :host {
     display: inline-block;
-    color: currentColor;
     cursor: default;
   }
 
@@ -48,7 +47,6 @@ type LinkType = keyof typeof linkTypes;
   }
 
   a {
-    color: currentColor;
     display: contents;
   }
 `)