godown 3.3.0 → 3.4.0

package/dev/core/super-input.js

@@ -1,11 +1,12 @@
 import { __decorate } from "tslib";
 import { htmlSlot, omit, part, styles } from "@godown/element";
-import iconEyeSlashFill from "@godown/f7-icon/icons/eye-slash-fill.js";
 import { css, html } from "lit";
 import { property } from "lit/decorators.js";
 import { GlobalStyle, cssGlobalVars } from "./global-style.js";
+import { OutlineBuilder } from "./outline.js";
 const fieldStyle = css `
   .input-field {
+    --space: var(${cssGlobalVars.input}-space);
     display: flex;
     position: relative;
     align-items: center;
@@ -14,16 +15,11 @@ const fieldStyle = css `
   }
 
   .input-field [part="input"] {
-    background: transparent;
+    background: none;
     height: 100%;
     width: 100%;
     color: inherit;
-    padding: 0 var(${cssGlobalVars.input}-space);
-  }
-
-  .input-field:focus-within,
-  .input-field.outline {
-    box-shadow: var(${cssGlobalVars.input}-box-shadow);
+    padding: 0 var(--space);
   }
 
   .input-field [part="icon"] {
@@ -39,11 +35,11 @@ const fieldStyle = css `
   }
 
   .input-field [part="suffix"] [part="icon"] {
-    padding-inline-end: var(${cssGlobalVars.input}-space);
+    padding-inline-end: var(--space);
   }
 
   .input-field [part="prefix"] [part="icon"] {
-    padding-inline-start: var(${cssGlobalVars.input}-space);
+    padding-inline-start: var(--space);
   }
 `;
 const inputStyle = css `
@@ -51,12 +47,10 @@ const inputStyle = css `
     ${cssGlobalVars.input}-width: 10em;
     ${cssGlobalVars.input}-height: 1.6em;
     ${cssGlobalVars.input}-space: 0.2em;
-    ${cssGlobalVars.input}-background: var(${cssGlobalVars.background});
-    ${cssGlobalVars.input}-control: var(${cssGlobalVars.foreground});
-    ${cssGlobalVars.input}-control-edge: var(${cssGlobalVars.active});
-    ${cssGlobalVars.input}-radius: 0.2em;
-    ${cssGlobalVars.input}-box-shadow: 0px 0px 0px .1em var(${cssGlobalVars.active});
-    border-radius: var(${cssGlobalVars.input}-radius);
+    ${cssGlobalVars.input}-control: currentColor;
+    ${cssGlobalVars.input}-outline-width: .075em;
+    ${cssGlobalVars.input}-outline-color: var(${cssGlobalVars.passive});
+    border-radius: 0.2em;
   }
 
   :host([disabled]) {
@@ -77,6 +71,7 @@ let SuperInput = class SuperInput extends GlobalStyle {
     constructor() {
         super(...arguments);
         this.autofocus = false;
+        this.outlineType = "border";
         this.disabled = false;
         /**
          * Returns true when the input is compositing.
@@ -154,24 +149,12 @@ let SuperInput = class SuperInput extends GlobalStyle {
     `;
     }
     _renderSuffix() {
-        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")}
+        ${htmlSlot("suffix")}
       </label>
     `;
     }
@@ -179,6 +162,9 @@ let SuperInput = class SuperInput extends GlobalStyle {
 __decorate([
     property()
 ], SuperInput.prototype, "autocomplete", void 0);
+__decorate([
+    property({ attribute: "outline-type" })
+], SuperInput.prototype, "outlineType", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], SuperInput.prototype, "disabled", void 0);
@@ -201,7 +187,10 @@ __decorate([
     part("input")
 ], SuperInput.prototype, "_input", void 0);
 SuperInput = __decorate([
-    styles(fieldStyle, inputStyle)
+    styles(fieldStyle, new OutlineBuilder({
+        width: `${cssGlobalVars.input}-outline-width`,
+        color: `${cssGlobalVars.input}-outline-color`,
+    }).styleSheet, inputStyle)
 ], SuperInput);
 export default SuperInput;
 export { SuperInput };

package/dev/core/super-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"super-input.js","sourceRoot":"","sources":["../../src/core/super-input.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"super-input.js","sourceRoot":"","sources":["../../src/core/super-input.ts"],"names":[],"mappings":"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"}

package/dev/core/super-openable.d.ts

@@ -13,8 +13,4 @@ declare class SuperOpenable extends GlobalStyle {
 }
 export default SuperOpenable;
 export { SuperOpenable };
-export type Direction4 = "left" | "right" | "top" | "bottom";
-export type Direction5 = Direction4 | "center";
-export type Direction8 = Direction4 | "top-left" | "top-right" | "bottom-left" | "bottom-right";
-export type Direction9 = Direction8 | Direction5;
 //# sourceMappingURL=super-openable.d.ts.map

package/dev/core/super-openable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"super-openable.d.ts","sourceRoot":"","sources":["../../src/core/super-openable.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,KAAK,CAAC;AAG5C,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEhD,cAAM,aAAc,SAAQ,WAAW;IACrC;;OAEG;IAEH,IAAI,UAAS;IAEb,MAAM,CAAC,EAAE,GAAE,OAAsC,GAAG,IAAI;IAIxD,KAAK,IAAI,IAAI;IAIb,IAAI,IAAI,IAAI;IAIZ,SAAS,CAAC,OAAO,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,IAAI,CAAC,GAAG,IAAI;IAOlE,SAAS,CAAC,YAAY,CAAC,CAAC,EAAE,UAAU,GAAG,IAAI;CAG5C;AAED,eAAe,aAAa,CAAC;AAC7B,OAAO,EAAE,aAAa,EAAE,CAAC;AAEzB,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;AAE7D,MAAM,MAAM,UAAU,GAAG,UAAU,GAAG,QAAQ,CAAC;AAE/C,MAAM,MAAM,UAAU,GAAG,UAAU,GAAG,UAAU,GAAG,WAAW,GAAG,aAAa,GAAG,cAAc,CAAC;AAEhG,MAAM,MAAM,UAAU,GAAG,UAAU,GAAG,UAAU,CAAC"}
+{"version":3,"file":"super-openable.d.ts","sourceRoot":"","sources":["../../src/core/super-openable.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,KAAK,CAAC;AAG5C,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEhD,cAAM,aAAc,SAAQ,WAAW;IACrC;;OAEG;IAEH,IAAI,UAAS;IAEb,MAAM,CAAC,EAAE,GAAE,OAAsC,GAAG,IAAI;IAIxD,KAAK,IAAI,IAAI;IAIb,IAAI,IAAI,IAAI;IAIZ,SAAS,CAAC,OAAO,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,IAAI,CAAC,GAAG,IAAI;IAOlE,SAAS,CAAC,YAAY,CAAC,CAAC,EAAE,UAAU,GAAG,IAAI;CAG5C;AAED,eAAe,aAAa,CAAC;AAC7B,OAAO,EAAE,aAAa,EAAE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "godown",
-  "version": "3.3.0",
+  "version": "3.4.0",
   "description": "Non Composite Web Components Library",
   "type": "module",
   "main": "index.js",
@@ -33,8 +33,8 @@
     "lit": "^3.0.0",
     "tslib": "^2.7.0",
     "@godown/colors": "^1.0.0",
-    "@godown/element": "^1.2.0",
-    "@godown/f7-icon": "^1.0.2"
+    "@godown/element": "^1.3.0",
+    "@godown/f7-icon": "^1.0.3"
   },
   "publishConfig": {
     "access": "public"

package/src/components/alert.ts

@@ -90,7 +90,7 @@ const calls = {
 @styles(css`
   :host,
   :where(:host([contents]) [part="root"]) {
-    ${cssScope}--border-radius: .25em;
+    ${cssScope}--border-radius: .2em;
     ${cssScope}--border-width: .075em;
     ${cssScope}--blockquote-width: .2em;
     ${cssScope}--blockquote-background: transparent;

package/src/components/avatar.ts

@@ -23,6 +23,7 @@ const cssScope = scopePrefix(protoName);
     width: var(${cssScope}--size);
     height: var(${cssScope}--size);
     vertical-align: bottom;
+    border-radius: 0.2em;
   }
 
   :host,
@@ -58,19 +59,20 @@ const cssScope = scopePrefix(protoName);
 `)
 class Avatar extends GlobalStyle {
   /**
-   * Image src.
+   * The `src` property specifies the URL of the avatar image.
+   * If `src` is not provided, the component will display the `name` property instead.
    */
   @property()
   src: string | undefined | null;
 
   /**
-   * If the image is not available, display name (call {@linkcode Avatar.format}).
+   * Specifies the name or initials to display if no `src` is provided
    */
   @property()
   name = "";
 
   /**
-   * Display rounded.
+   * If `true`, will make the avatar display as a circle.
    */
   @property({ type: Boolean })
   round = false;
@@ -99,13 +101,13 @@ class Avatar extends GlobalStyle {
     }
     if (this.name) {
       return html`
-        <span part="name">${this.format()}</span>
+        <span part="name">${this.formatName()}</span>
       `;
     }
     return htmlSlot();
   }
 
-  format(): string {
+  formatName(): string {
     return this.name;
   }
 

package/src/components/badge.ts

@@ -3,8 +3,7 @@ import { type TemplateResult, css, html } from "lit";
 import { property } from "lit/decorators.js";
 
 import { GlobalStyle, cssGlobalVars, scopePrefix } from "../core/global-style.js";
-
-type Position = "top-right" | "top-left" | "bottom-right" | "bottom-left";
+import { DirectionCorner } from "../core/direction.js";
 
 const protoName = "badge";
 const cssScope = scopePrefix(protoName);
@@ -70,8 +69,12 @@ const cssScope = scopePrefix(protoName);
   }
 `)
 class Badge extends GlobalStyle {
+  /**
+   * The position of the badge relative to its parent element.
+   * Possible values are `"top-left"`, `"top-right"`, `"bottom-left"`, and `"bottom-right"`.
+   */
   @property()
-  position: Position = "top-right";
+  position: DirectionCorner = "top-right";
 
   @property({ type: Number })
   value = 0;
@@ -82,6 +85,10 @@ class Badge extends GlobalStyle {
   @property({ type: Boolean })
   dot = false;
 
+  /**
+   * The maximum value that can be displayed in the badge
+   * Values greater than this will be displayed as `max+` by default.
+   */
   @property({ type: Number })
   max = 99;
 

package/src/components/breath.ts

@@ -101,10 +101,10 @@ class Breath extends GlobalStyle {
   content: string | string[];
 
   /**
-   * Effect duration, ending in s or ms.
+   * Effect duration.
    */
-  @property()
-  duration: string;
+  @property({ type: Number })
+  duration: number;
 
   protected render(): TemplateResult<1> {
     const texts = this.getTexts();
@@ -135,29 +135,17 @@ class Breath extends GlobalStyle {
 
   protected _computeStyle(len: number): string {
     const gap = 100 / 2 / len;
-    const duration = this.parseDuration() || len * 2 + 2;
+    const duration = this.duration || (len * 2 + 2) * 1000;
     let style1 = "";
     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}));}`;
     }
-    return `.colorful{animation-duration:${duration}s;}@keyframes colorfulN{0%,${gap * 3}%{opacity:0;}${gap}%,${
+    return `.colorful{animation-duration:${duration}ms;}@keyframes colorfulN{0%,${gap * 3}%{opacity:0;}${gap}%,${
       gap * 2
     }%{opacity:1;}}${style1}`;
   }
-
-  parseDuration(): number | undefined {
-    const { duration } = this;
-    if (duration) {
-      if (duration.endsWith("s")) {
-        return Number.parseFloat(duration.slice(0, -1));
-      }
-      if (duration.endsWith("ms")) {
-        return Number.parseFloat(duration.slice(0, -2)) / 1000;
-      }
-    }
-  }
 }
 
 export default Breath;

package/src/components/button.ts

@@ -110,6 +110,11 @@ const colors: Record<Colors, string> = constructCSSObject(
       color: var(${cssScope}--ghost-color);
       background: transparent;
     }
+
+    :host([plain]) {
+      ${cssScope}--gradients: unset;
+      ${cssScope}--focus-scale: unset;
+    }
   `,
   css`
     :host {
@@ -127,9 +132,8 @@ const colors: Record<Colors, string> = constructCSSObject(
         var(${cssScope}--background),
         var(${cssScope}--gradients, var(${cssScope}--background))
       );
-      border-radius: 0.3em;
+      border-radius: 0.2em;
       width: fit-content;
-      transition: 0.1s;
       display: block;
       overflow: hidden;
       text-align: center;
@@ -183,13 +187,20 @@ const colors: Record<Colors, string> = constructCSSObject(
 )
 class Button extends GlobalStyle {
   /**
-   * Whether to disable this element.
+   * If true, remove gradient, modal animation, focus scale.
+   */
+  @property({ type: Boolean, reflect: true })
+  plain = false;
+
+  /**
+   * Whether this element is disabled or not.
    */
   @property({ type: Boolean, reflect: true })
   disabled = false;
 
   /**
-   * Display ghost.
+   * Whether this element should be rendered as a "ghost" button.
+   * A ghost button is a button with a transparent background and a border.
    */
   @property({ type: Boolean, reflect: true })
   ghost = false;
@@ -259,7 +270,9 @@ class Button extends GlobalStyle {
       e.preventDefault();
       return;
     }
-    this._handleModal(e);
+    if (!this.plain) {
+      this._handleModal(e);
+    }
   }
 
   protected _handleModal(e: MouseEvent): void {

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

@@ -69,13 +69,13 @@ function getWidth(e) {
 `)
 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;

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 = "#";