godown 3.5.3 → 3.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "godown",
-  "version": "3.5.3",
+  "version": "3.6.1",
   "description": "Non Composite Web Components Library",
   "type": "module",
   "main": "index.js",
@@ -19,8 +19,8 @@
     "fmtime": "^0.0.3",
     "lit": "^3.0.0",
     "tslib": "^2.7.0",
-    "@godown/colors": "^1.0.0",
     "@godown/element": "^1.3.1",
+    "@godown/colors": "^1.0.0",
     "@godown/f7-icon": "^1.0.4"
   },
   "publishConfig": {

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/button.ts

@@ -132,7 +132,6 @@ const colors: Record<Colors, string> = constructCSSObject(
         var(${cssScope}--gradients, var(${cssScope}--background))
       );
       padding: var(${cssScope}--padding);
-      border-radius: 0.2em;
       width: fit-content;
       display: block;
       overflow: hidden;

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/details.ts

@@ -23,54 +23,54 @@ 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;
+    overflow: hidden;
   }
 
   [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 +78,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 +107,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 {
+    width: 100%;
+    min-height: 100%;
+    flex-direction: column;
+    grid-template-rows: auto 1fr auto;
+  }
+
   :host,
   :host([contents]) [part="root"] {
-    min-height: 100%;
     display: flex;
-    flex-direction: column;
   }
 
   [part="root"] {
     display: contents;
   }
 
-  [sticky] header {
-    position: sticky;
-    top: 0;
-    z-index: 1;
-  }
-
   [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/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/outline.ts

@@ -51,4 +51,13 @@ export class OutlineBuilder {
   }
 }
 
-export type OutlineType = "outline" | "outline-inset" | "box-shadow" | "box-shadow-inset" | "border";
+export type OutlineType =
+  | "outline"
+  | "outline-inset"
+  | "box-shadow"
+  | "box-shadow-inset"
+  | "border"
+  | "none"
+  | undefined;
+
+export const isNone = (type: OutlineType): boolean => !type || type === "none";

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]) {