godown 3.5.2 → 3.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "godown",
-  "version": "3.5.2",
+  "version": "3.6.0",
   "description": "Non Composite Web Components Library",
   "type": "module",
   "main": "index.js",

package/src/components/alert.ts

@@ -90,12 +90,10 @@ const calls = {
 @styles(css`
   :host,
   :where(:host([contents]) [part="root"]) {
-    ${cssScope}--border-radius: .2em;
     ${cssScope}--border-width: .075em;
     ${cssScope}--blockquote-width: .2em;
     ${cssScope}--blockquote-background: transparent;
     ${cssScope}--gap: .5em;
-    border-radius: var(${cssScope}--border-radius);
     display: block;
     width: 100%;
   }

package/src/components/avatar.ts

@@ -19,12 +19,11 @@ const cssScope = scopePrefix(protoName);
 @godown(protoName)
 @styles(css`
   :host {
-    ${cssScope}--size: 2em;
-    width: var(${cssScope}--size);
-    height: var(${cssScope}--size);
     background: var(${cssGlobalVars.passive});
     vertical-align: bottom;
-    border-radius: 0.2em;
+    overflow: hidden;
+    width: 2em;
+    height: 2em;
   }
 
   :host,
@@ -49,7 +48,6 @@ const cssScope = scopePrefix(protoName);
   }
 
   [part="root"] {
-    overflow: hidden;
     position: relative;
     border-radius: inherit;
     width: 100%;

package/src/components/badge.ts

@@ -3,7 +3,7 @@ import { type TemplateResult, css, html } from "lit";
 import { property } from "lit/decorators.js";
 
 import { GlobalStyle, cssGlobalVars, scopePrefix } from "../core/global-style.js";
-import { DirectionCorner } from "../core/direction.js";
+import type { DirectionCorner } from "../core/direction.js";
 
 const protoName = "badge";
 const cssScope = scopePrefix(protoName);
@@ -39,8 +39,6 @@ const cssScope = scopePrefix(protoName);
     user-select: none;
     border-radius: calc(infinity * 1px);
     transform: translate(-50%, -50%);
-    left: var(--left);
-    top: var(--top);
     background: var(${cssScope}--background);
   }
 
@@ -52,20 +50,20 @@ const cssScope = scopePrefix(protoName);
     border-radius: 50%;
   }
 
-  [position^="top"] {
-    --top: calc(0% + var(${cssScope}--offset-y));
+  [position^="top"] [part="badge"] {
+    top: calc(0% + var(${cssScope}--offset-y));
   }
 
-  [position$="right"] {
-    --left: calc(100% - var(${cssScope}--offset-x));
+  [position$="right"] [part="badge"] {
+    left: calc(100% - var(${cssScope}--offset-x));
   }
 
-  [position^="bottom"] {
-    --top: calc(100% - var(${cssScope}--offset-y));
+  [position^="bottom"] [part="badge"] {
+    top: calc(100% - var(${cssScope}--offset-y));
   }
 
-  [position$="left"] {
-    --left: calc(0% + var(${cssScope}--offset-x));
+  [position$="left"] [part="badge"] {
+    left: calc(0% + var(${cssScope}--offset-x));
   }
 `)
 class Badge extends GlobalStyle {

package/src/components/breath.ts

@@ -140,7 +140,7 @@ class Breath extends GlobalStyle {
     for (let number = 1; number <= len; number++) {
       const delay = (-duration / len) * (len - number + 1);
       const defaultNumber = ((number - 1) % 3) + 1;
-      style1 += `.rel:nth-child(${number}) .colorful{animation-delay:${delay}s;background:var(${cssScope}--${number},var(${cssScope}--${defaultNumber}));}`;
+      style1 += `.rel:nth-child(${number}) .colorful{animation-delay:${delay}ms;background:var(${cssScope}--${number},var(${cssScope}--${defaultNumber}));}`;
     }
     return `.colorful{animation-duration:${duration}ms;}@keyframes colorfulN{0%,${gap * 3}%{opacity:0;}${gap}%,${
       gap * 2

package/src/components/button.ts

@@ -131,12 +131,11 @@ const colors: Record<Colors, string> = constructCSSObject(
         var(${cssScope}--background),
         var(${cssScope}--gradients, var(${cssScope}--background))
       );
-      border-radius: 0.2em;
+      padding: var(${cssScope}--padding);
       width: fit-content;
       display: block;
       overflow: hidden;
       text-align: center;
-      padding: 0 !important;
       cursor: pointer;
     }
 
@@ -147,13 +146,11 @@ const colors: Record<Colors, string> = constructCSSObject(
     [part="root"] {
       width: 100%;
       height: 100%;
-      overflow: hidden;
       position: relative;
       transition: none;
       user-select: none;
       border-radius: inherit;
       transition-duration: inherit;
-      padding: var(${cssScope}--padding);
     }
 
     i {
@@ -259,7 +256,8 @@ class Button extends GlobalStyle {
     super.blur();
   }
 
-  protected firstUpdated(): void {
+  connectedCallback(): void {
+    super.connectedCallback();
     this.events.add(this, "click", this._handelClick, true);
   }
 
@@ -276,13 +274,13 @@ class Button extends GlobalStyle {
 
   protected _handleModal(e: MouseEvent): void {
     const modal = document.createElement("i");
-    const rect = this._root.getBoundingClientRect();
-    const { height, width } = rect;
-    const size = `${Math.sqrt(height * height + width * width) * 2}px`;
+    const { width, height } = this.getBoundingClientRect();
+    const { x, y } = this._root.getBoundingClientRect();
+    const size = `${Math.sqrt(height ** 2 + width ** 2) * 2}px`;
     modal.style.height = size;
     modal.style.width = size;
-    modal.style.left = `${e.clientX - rect.left}px`;
-    modal.style.top = `${e.clientY - rect.y}px`;
+    modal.style.left = `${e.x - x}px`;
+    modal.style.top = `${e.y - y}px`;
     modal.style.animationName = "kf";
     this._modalRoot.appendChild(modal);
     modal.addEventListener("animationend", () => modal.remove(), { once: true });

package/src/components/card.ts

@@ -28,7 +28,6 @@ const cssScope = scopePrefix(protoName);
     border-width: var(${cssScope}--border-width);
     display: block;
     flex-shrink: 0;
-    border-radius: 0.2em;
   }
 
   slot {

package/src/components/carousel.ts

@@ -124,6 +124,10 @@ class Carousel extends GlobalStyle {
       this.appendChild(this.__cloneLast);
       this.insertBefore(this.__cloneFirst, this.firstElementChild);
     }
+    this.observers.add(this, ResizeObserver, () => {
+      this._offset = this._computeOffset();
+      this._doTranslateX(`${this._offset}px`, true);
+    });
   }
 
   protected async firstUpdated(): Promise<void> {
@@ -141,13 +145,9 @@ class Carousel extends GlobalStyle {
   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._offset = this._computeOffset();
     this._doTranslateX(`${this._offset}px`, n);
+    this.dispatchCustomEvent("change", i);
     this.timeouts.remove(this.intervalID);
     if (this.autoChange > 0) {
       this.intervalID = this.timeouts.add(
@@ -181,6 +181,15 @@ class Carousel extends GlobalStyle {
     this._moveRoot.style.transition = noTransition ? "none" : "";
   }
 
+  protected _computeOffset(): number {
+    let offset = 0;
+    for (let childIndex = 0; childIndex <= this.index; childIndex++) {
+      offset -= getWidth(this.children[childIndex]);
+    }
+    offset += (getWidth(this) - getWidth(this.children[this.index + 1])) / 2;
+    return offset;
+  }
+
   normalizeIndex(i: number): number {
     if (i < 0) {
       return 0;

package/src/components/details.ts

@@ -23,54 +23,53 @@ const cssScope = scopePrefix(protoName);
   :host {
     ${cssScope}--icon-deg-open: 0deg;
     ${cssScope}--icon-deg-close: 90deg;
-    ${cssScope}--icon-space: 0.3em;
-    ${cssScope}--summary-direction: row;
-    ${cssScope}--transition: .3s;
-    height: fit-content;
+    ${cssScope}--icon-space: .22em;
     display: block;
-    transition: var(${cssScope}--transition);
+    transition: 0.3s;
   }
 
   [part="root"] {
     height: 100%;
     position: relative;
-    overflow: hidden;
   }
 
   [part="title"] {
     direction: ltr;
     height: 100%;
-    display: flex;
-    flex-wrap: nowrap;
-    justify-content: space-between;
-    background: inherit;
+    display: grid;
     align-items: center;
-    flex-direction: var(${cssScope}--summary-direction);
+    justify-content: space-between;
+    grid-template-columns: auto auto;
+    transition: inherit;
   }
 
   [part="details"] {
-    display: grid;
     overflow: hidden;
+    display: grid;
     grid-template-rows: 0fr;
-    transition: var(${cssScope}--transition);
-    transition-property: grid-template-rows;
+    transition: inherit;
   }
 
   :host([open]) [part="details"] {
     grid-template-rows: 1fr;
   }
 
-  :host([float]) [part="details"] {
-    top: 100%;
+  [float] [part="details"] {
     position: absolute;
+    top: 100%;
+    width: 100%;
+  }
+
+  [part] {
+    transition: inherit;
+    transition-property: transform, grid-template-rows;
   }
 
   [part="icon"] {
     display: flex;
     backface-visibility: hidden;
-    padding: var(${cssScope}--icon-space);
-    transition: var(${cssScope}--transition);
     transform: rotate(var(${cssScope}--icon-deg-close));
+    padding: var(${cssScope}--icon-space);
   }
 
   :host([open]) [part="icon"] {
@@ -78,6 +77,12 @@ const cssScope = scopePrefix(protoName);
   }
 `)
 class Details extends SuperOpenable {
+  /**
+   * Determines whether the details component should float.
+   */
+  @property({ type: Boolean })
+  float = false;
+
   /**
    * Determines whether the details component should fill the available space.
    */
@@ -101,9 +106,7 @@ class Details extends SuperOpenable {
           @click="${() => this.toggle()}"
         >
           <span part="summary">${this.summary || htmlSlot("summary")}</span>
-          <span>
-            <i part="icon">${svgCaretDown()}</i>
-          </span>
+          <span part="icon">${svgCaretDown()}</span>
         </dt>
         <dd
           part="details"

package/src/components/dialog.ts

@@ -1,15 +1,9 @@
 import { type HandlerEvent, attr, godown, htmlSlot, styles } from "@godown/element";
 import { type PropertyValues, type TemplateResult, css, html } from "lit";
-import { property } from "lit/decorators.js";
+import { property, query } from "lit/decorators.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);
@@ -25,65 +19,50 @@ const cssScope = scopePrefix(protoName);
  * @category feedback
  */
 @godown(protoName)
-@styles(
-  directionInsetAlign,
-  css`
-    :host {
-      ${cssScope}--background: none;
-      ${cssScope}--background-modal: black;
-      ${cssScope}--opacity-modal: 0.2;
-      background: var(${cssScope}--background);
-      pointer-events: none;
-      position: fixed;
-      z-index: 1;
-      inset: 0;
-    }
-
-    :host(:not([open])) {
-      visibility: hidden;
-    }
+@styles(css`
+  :host {
+    ${cssScope}--background-modal: black;
+    ${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([modal]) [part="modal"] {
-      pointer-events: all;
-      opacity: var(${cssScope}--opacity-modal);
-    }
+  :host(:not([open])) {
+    visibility: hidden;
+  }
 
-    [part="modal"] {
-      visibility: inherit;
-      opacity: 0;
-      width: 100%;
-      height: 100%;
-      position: absolute;
-      background: var(${cssScope}--background-modal);
-    }
+  :host([contents]) dialog {
+    position: fixed;
+  }
 
-    [part="root"] {
-      width: 100%;
-      height: 100%;
-      display: flex;
-      position: relative;
-      align-items: center;
-      justify-content: center;
-    }
+  dialog {
+    position: relative;
+    background: inherit;
+  }
 
-    [part="container"] {
-      pointer-events: all;
-      position: absolute;
-    }
-  `,
-)
+  ::backdrop {
+    background: var(${cssScope}--background-modal);
+    opacity: var(${cssScope}--opacity-modal);
+  }
+`)
 class Dialog extends SuperOpenable {
-  /**
-   * The direction of the dialog container.
-   */
-  @property()
-  direction: DirectionCardinal | DirectionCorner | DirectionCenter;
-
   /**
    * Indicates whether the dialog should be displayed as a modal.
    */
   @property({ type: Boolean, reflect: true })
-  modal = false;
+  set modal(value: boolean) {
+    this.contents = value;
+  }
+
+  get modal(): boolean {
+    return this.contents;
+  }
 
   /**
    * The keys will close the dialog when pressed.
@@ -96,31 +75,41 @@ class Dialog extends SuperOpenable {
    */
   private __modalInvoke = false;
 
+  @query("dialog")
+  protected _dialog: HTMLDialogElement;
+
   protected render(): TemplateResult<1> {
     return html`
-      <div
+      <dialog
         part="root"
         ${attr(this.observedRecord)}
       >
-        <div part="modal"></div>
-        <div
-          part="container"
-          direction-inset-align
-        >
-          ${htmlSlot()}
-        </div>
-      </div>
+        ${htmlSlot()}
+      </dialog>
     `;
   }
 
   showModal(): void {
-    if (!this.modal) {
-      this.modal = true;
-      this.__modalInvoke = true;
-    }
+    this.modal = true;
+    this.__modalInvoke = true;
     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();
+      }
+    }
+  }
+
   private __submitEvent: EventListenerOrEventListenerObject;
   private __keydownEvent: EventListenerOrEventListenerObject;
 

package/src/components/divider.ts

@@ -16,7 +16,6 @@ const protoName = "divider";
   :host {
     width: 100%;
     height: 0.05em;
-    margin: auto;
     display: block;
     background: currentColor;
     color: var(${cssGlobalVars.passive});
@@ -24,7 +23,7 @@ const protoName = "divider";
 
   :host([vertical]) {
     width: 0.05em;
-    height: max(1em, 100%);
+    height: 100%;
   }
 
   :host([contents]) [part="root"] {

package/src/components/layout.ts

@@ -7,7 +7,13 @@ import { GlobalStyle } from "../core/global-style.js";
 const protoName = "layout";
 
 /**
- * {@linkcode Layout} renders slot and optional top header, bottom footer.
+ * {@linkcode Layout} renders main content, top header, bottom footer.
+ *
+ * If `sticky` is set to `true`, the header will be sticky.
+ *
+ * Main content will take up the remaining space.
+ *
+ * Element display should be `(inline-)flex` or `(inline-)grid`.
  *
  * @slot - The main content of the layout.
  * @slot header - The header of the layout.
@@ -16,50 +22,51 @@ const protoName = "layout";
  */
 @godown(protoName)
 @styles(css`
-  :host,
-  :host([contents]) [part="root"] {
+  :host {
+    width: 100%;
     min-height: 100%;
-    display: flex;
     flex-direction: column;
+    grid-template-rows: auto 1fr auto;
   }
 
-  [part="root"] {
-    display: contents;
+  :host,
+  :host([contents]) [part="root"] {
+    display: grid;
   }
 
-  [sticky] header {
-    position: sticky;
-    top: 0;
-    z-index: 1;
+  [part="root"] {
+    display: contents;
   }
 
   [part="main"] {
-    position: relative;
-    flex: 1;
     width: 100%;
+    flex: 1;
   }
 
-  header,
-  main,
-  footer {
+  [part="header"],
+  [part="footer"] {
+    flex-shrink: 0;
     width: 100%;
   }
+
+  [sticky] header {
+    position: sticky;
+    top: 0;
+  }
 `)
 class Layout extends GlobalStyle {
   /**
-   * If true, remove the header slot.
+   * @deprecated Omit header slot instead.
    */
-  @property({ type: Boolean })
-  noHeader = false;
+  noHeader: boolean;
 
   /**
-   * If true, remove the footer slot.
+   * @deprecated Omit footer slot instead.
    */
-  @property({ type: Boolean })
-  noFooter = false;
+  noFooter: boolean;
 
   /**
-   * If true, header will sticky.
+   * If `true`, header will sticky.
    */
   @property({ type: Boolean })
   sticky = false;
@@ -70,17 +77,9 @@ class Layout extends GlobalStyle {
         part="root"
         ${attr(this.observedRecord)}
       >
-        ${!this.noHeader
-          ? html`
-              <header part="header">${htmlSlot("header")}</header>
-            `
-          : ""}
+        <header part="header">${htmlSlot("header")}</header>
         <main part="main">${htmlSlot()}</main>
-        ${!this.noFooter
-          ? html`
-              <footer part="footer">${htmlSlot("footer")}</footer>
-            `
-          : ""}
+        <footer part="footer">${htmlSlot("footer")}</footer>
       </div>
     `;
   }

package/src/components/range.ts

@@ -395,6 +395,7 @@ class Range<V extends RangeValue = RangeValue> extends SuperInput<RangeValue> {
   }
 
   protected _connectedInit(): void {
+    this._ranger = new Ranger(this.min, this.max, this.step);
     const gap = this._ranger.diff;
     this.step ||= gap / 100;
     if (isNil(this.value)) {

package/src/components/split.ts

@@ -25,7 +25,7 @@ const cssScope = scopePrefix(protoName);
 @styles(css`
   :host {
     display: block;
-    border-radius: 1px;
+    border-radius: 0.1em;
     width: fit-content;
     ${cssScope}--size: 1.45em;
     ${cssScope}--gap: .25em;

package/src/core/global-style.ts

@@ -25,6 +25,7 @@ export const cssGlobalVars: {
   white: CSSResult;
   black: CSSResult;
   color: CSSResult;
+  borderRadius: CSSResult;
 } = {
   clipBackground: scopePrefix("clip-background", 2),
   active: scopePrefix("active", 2),
@@ -34,6 +35,7 @@ export const cssGlobalVars: {
   white: scopePrefix("color-white", 2),
   black: scopePrefix("color-black", 2),
   color: scopePrefix("color", 2),
+  borderRadius: scopePrefix("border-radius", 2),
 };
 
 type PresetsGradientsCSSResult = Record<keyof typeof presetsRGB, Gradients<CSSResult>>;
@@ -95,4 +97,10 @@ GlobalStyle.styles = [
       display: revert;
     }
   `,
+  css`
+    :host {
+      ${cssGlobalVars.borderRadius}: 0.2em;
+      border-radius: var(${cssGlobalVars.borderRadius});
+    }
+  `,
 ];

package/src/core/super-input.ts

@@ -53,7 +53,6 @@ const inputStyle = css`
     ${cssGlobalVars.input}-outline-width: .075em;
     ${cssGlobalVars.input}-outline-color: var(${cssGlobalVars._colors.darkgray[4]});
     ${cssGlobalVars.input}-icon-color: var(${cssGlobalVars._colors.darkgray[4]});
-    border-radius: 0.2em;
   }
 
   :host([disabled]) {