godown 3.12.0 → 3.13.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 = "";
 
@@ -105,7 +97,7 @@ class Details extends SuperOpenable {
           @click="${() => this.toggle()}"
         >
           <span part="summary">${htmlSlot("summary", this.summary)}</span>
-          <span part="icon">${svgCaretDown()}</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,7 +28,11 @@ const splitKeysRegexp = /[\s,]+/;
     ${cssScope}--opacity-modal: 0.2;
     width: fit-content;
     display: block;
-    margin: auto;
+    background: none;
+  }
+
+  dialog {
+    position: relative;
     background: none;
     z-index: 1;
     left: 50%;
@@ -36,58 +41,39 @@ const splitKeysRegexp = /[\s,]+/;
     transform: translate(-50%, -50%);
   }
 
-  :host(:not([open])) {
-    visibility: hidden;
-  }
-
-  :host([contents]) dialog {
-    position: fixed;
-  }
-
-  dialog {
-    position: relative;
-    background: inherit;
-  }
-
   ::backdrop {
     background: var(${cssScope}--background-modal);
     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>
     `;
   }
@@ -98,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;
@@ -119,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);
       }
@@ -131,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();
     }
@@ -144,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

@@ -49,7 +49,7 @@ const protoName = "input";
     ${cssGlobalVars.input}-icon-color: currentColor;
   }
 
-  [part~="root"] {
+  [part="root"] {
     padding: 0.4em 0.5em;
     display: flex;
     position: relative;
@@ -61,8 +61,6 @@ const protoName = "input";
     width: 100%;
     height: 100%;
     flex-grow: 1;
-    color: currentColor;
-    background: none;
   }
 
   [part="prefix"],

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;
   }
 `)

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

@@ -0,0 +1,172 @@
+import { property } from "lit/decorators.js";
+import GlobalStyle from "../../internal/global-style.js";
+import { css, html, type PropertyValues, type TemplateResult } from "lit";
+import { godown, htmlSlot, joinRules, part, StyleController, styles } from "@godown/element";
+import { hidePopover, showPopover } from "../../internal/popover.js";
+
+const POPOVER = "popover";
+const protoName = POPOVER;
+
+/**
+ * {@link Popover} renders a popover.
+ *
+ * This requires the support of the popover API and CSS position-area.
+ *
+ * @fires toggle - Fired when the popover is toggled.
+ * @slot popover - Popover content.
+ * @slot - Popover trigger.
+ * @category display
+ */
+@godown(protoName)
+@styles(css`
+  :host {
+    display: inline-block;
+  }
+
+  [part="trigger"] {
+    display: contents;
+  }
+
+  [part="root"] {
+    display: inherit;
+  }
+
+  [part="popover"] {
+    inset: unset;
+    z-index: 1;
+    overflow: visible;
+    position: absolute;
+    position-try-fallbacks: flip-block;
+  }
+`)
+class Popover extends GlobalStyle {
+  anchorName = `--${POPOVER}-${Math.random().toString(36).slice(2)}`;
+
+  @property({ type: Boolean, reflect: true })
+  open = false;
+
+  @property()
+  action: "hide" | "show" | "toggle" | "none" = "show";
+
+  @property()
+  span: "span" | "spread" | "isolated" = "span";
+
+  /**
+   * The position refers to the spatial location of the popover in relation to the trigger,
+   * rather than the alignment property between them.
+   */
+  @property()
+  position:
+    | "center"
+    | "left"
+    | "left-top"
+    | "left-bottom"
+    | "right"
+    | "right-top"
+    | "right-bottom"
+    | "top"
+    | "top-left"
+    | "top-right"
+    | "bottom"
+    | "bottom-left"
+    | "bottom-right"
+    | "start"
+    | "start-start"
+    | "start-end"
+    | "end"
+    | "end-start"
+    | "end-end" = "bottom";
+
+  @part(POPOVER)
+  protected _popover: HTMLElement;
+
+  constructor() {
+    super();
+    new StyleController(this, () => {
+      return joinRules({
+        "[part=root],slot:not([name])::slotted(*)": {
+          "anchor-name": this.anchorName,
+        },
+        "[part=popover]": {
+          "position-anchor": this.anchorName,
+          "position-area": this.resolveArea(),
+        },
+      });
+    });
+  }
+  protected render(): TemplateResult<1> {
+    return html`
+      <div part="root">
+        <div
+          part="trigger"
+          @click=${this._handleClick}
+        >
+          ${htmlSlot()}
+        </div>
+        <div
+          part="popover"
+          popover="manual"
+        >
+          ${htmlSlot("popover")}
+        </div>
+      </div>
+    `;
+  }
+
+  protected _handleClick(): void {
+    const { action } = this;
+    switch (action) {
+      case "show":
+      case "hide":
+      case "toggle":
+        this[action]();
+    }
+  }
+
+  show(): void {
+    this.toggle(true);
+  }
+
+  hide(): void {
+    this.toggle(false);
+  }
+
+  toggle(force?: boolean): void {
+    this.open = force ?? !this.open;
+  }
+
+  protected updated(_changedProperties: PropertyValues): void {
+    if (_changedProperties.has("open")) {
+      this._openChange();
+    }
+  }
+
+  protected _openChange(): void {
+    const { open } = this;
+    if (open) {
+      showPopover.call(this, this._popover);
+      const listener = (e) => {
+        if (!this.contains(e.target)) {
+          this.events.remove(document, "click", listener);
+          this.open = false;
+        }
+      };
+      this.events.add(document, "click", listener);
+    } else {
+      hidePopover(this._popover);
+    }
+    this.dispatchCustomEvent("toggle", open);
+  }
+
+  resolveArea(): string {
+    const split = this.position.split("-");
+    const firstValue = this.span === "spread" ? `span-${split[0]}` : split[0];
+    if (split.length < 2) {
+      return `${firstValue} center`;
+    }
+    const secondValue = this.span === "isolated" ? split[1] : `span-${split[1]}`;
+    return `${firstValue} ${secondValue}`;
+  }
+}
+
+export { Popover, Popover as default };

package/src/web-components/popover/definition.ts

@@ -0,0 +1,11 @@
+import Popover from "./component.js";
+
+Popover.define();
+
+export default Popover;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "godown-popover": Popover;
+  }
+}

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

@@ -15,6 +15,7 @@ import { property, queryAll, state } from "lit/decorators.js";
 
 import { cssGlobalVars, scopePrefix } from "../../internal/global-style.js";
 import { SuperInput } from "../../internal/super-input.js";
+import { ringTypeAttribute } from "../../internal/ring.js";
 
 const protoName = "range";
 const cssScope = scopePrefix(protoName);
@@ -203,7 +204,7 @@ class Range<V extends RangeValue = RangeValue> extends SuperInput<RangeValue> {
   }
 
   get observedRecord(): Record<string, any> {
-    return omit(super.observedRecord, "ring-type");
+    return omit(super.observedRecord, ringTypeAttribute);
   }
 
   protected render(): TemplateResult<1> {

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

@@ -15,7 +15,6 @@ const cssScope = scopePrefix(protoName);
 @styles(css`
   :host {
     display: block;
-    width: -moz-fit-content;
     width: fit-content;
     transition: all 0.5s ease-in-out;
     ${cssScope}--offset: .5em;