godown 3.2.0 → 3.4.0

package/dev/core/outline.js

@@ -0,0 +1,44 @@
+import { css, unsafeCSS } from "lit";
+/**
+ * The `OutlineBuilder` class is responsible for generating CSS styles for various types of outlines.
+ */
+export class OutlineBuilder {
+    /**
+     * @param vars.width The width variable of the outline.
+     * @param vars.color The color variable of the outline.
+     */
+    constructor(vars) {
+        const width = unsafeCSS(vars.width);
+        const color = unsafeCSS(vars.color);
+        this.css = css `
+      [outline-type="outline"],
+      [outline-type="outline-inset"] {
+        outline-width: var(${width});
+        outline-color: var(${color});
+        outline-style: solid;
+      }
+
+      [outline-type="outline-inset"] {
+        outline-offset: calc(-1 * var(${width}));
+      }
+
+      [outline-type="box-shadow"] {
+        box-shadow: 0 0 0 var(${width}) var(${color});
+      }
+
+      [outline-type="box-shadow-inset"] {
+        box-shadow: inset 0 0 0 var(${width}) var(${color});
+      }
+
+      [outline-type="border"] {
+        border-width: var(${width});
+        border-color: var(${color});
+        border-style: solid;
+      }
+    `;
+    }
+    get styleSheet() {
+        return this.css.styleSheet;
+    }
+}
+//# sourceMappingURL=outline.js.map

package/dev/core/outline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"outline.js","sourceRoot":"","sources":["../../src/core/outline.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAkB,MAAM,KAAK,CAAC;AAOrD;;GAEG;AACH,MAAM,OAAO,cAAc;IAGzB;;;OAGG;IACH,YAAY,IAAiB;QAC3B,MAAM,KAAK,GAAG,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACpC,MAAM,KAAK,GAAG,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACpC,IAAI,CAAC,GAAG,GAAG,GAAG,CAAA;;;6BAGW,KAAK;6BACL,KAAK;;;;;wCAKM,KAAK;;;;gCAIb,KAAK,SAAS,KAAK;;;;sCAIb,KAAK,SAAS,KAAK;;;;4BAI7B,KAAK;4BACL,KAAK;;;KAG5B,CAAC;IACJ,CAAC;IAED,IAAI,UAAU;QACZ,OAAO,IAAI,CAAC,GAAG,CAAC,UAAU,CAAC;IAC7B,CAAC;CACF"}

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

@@ -1,6 +1,6 @@
 import { type TemplateResult } from "lit";
 import { GlobalStyle } from "./global-style.js";
-declare class SuperAnchor extends GlobalStyle {
+declare abstract class SuperAnchor extends GlobalStyle {
     /**
      * A element href.
      */
@@ -11,7 +11,7 @@ declare class SuperAnchor extends GlobalStyle {
     target: "_blank" | "_self" | "_parent" | "_top";
     get pathname(): string;
     protected render(): TemplateResult<1>;
-    protected _handleClick(_: MouseEvent): void;
+    protected abstract _handleClick(_: MouseEvent): void;
 }
 export default SuperAnchor;
 export { SuperAnchor };

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

@@ -1 +1 @@
-{"version":3,"file":"super-anchor.d.ts","sourceRoot":"","sources":["../../src/core/super-anchor.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,cAAc,EAAsB,MAAM,KAAK,CAAC;AAG9D,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEhD,cAmBM,WAAY,SAAQ,WAAW;IACnC;;OAEG;IAEH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IAEH,MAAM,EAAE,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAW;IAE1D,IAAI,QAAQ,IAAI,MAAM,CAErB;IAED,SAAS,CAAC,MAAM,IAAI,cAAc,CAAC,CAAC,CAAC;IAcrC,SAAS,CAAC,YAAY,CAAC,CAAC,EAAE,UAAU,GAAG,IAAI;CAC5C;AAED,eAAe,WAAW,CAAC;AAC3B,OAAO,EAAE,WAAW,EAAE,CAAC"}
+{"version":3,"file":"super-anchor.d.ts","sourceRoot":"","sources":["../../src/core/super-anchor.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,cAAc,EAAsB,MAAM,KAAK,CAAC;AAG9D,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEhD,uBAmBe,WAAY,SAAQ,WAAW;IAC5C;;OAEG;IAEH,IAAI,EAAE,MAAM,CAAC;IAEb;;OAEG;IAEH,MAAM,EAAE,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAW;IAE1D,IAAI,QAAQ,IAAI,MAAM,CAErB;IAED,SAAS,CAAC,MAAM,IAAI,cAAc,CAAC,CAAC,CAAC;IAcrC,SAAS,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAC,EAAE,UAAU,GAAG,IAAI;CACrD;AAED,eAAe,WAAW,CAAC;AAC3B,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dev/core/super-anchor.js

@@ -27,7 +27,6 @@ let SuperAnchor = class SuperAnchor extends GlobalStyle {
       </a>
     `;
     }
-    _handleClick(_) { }
 };
 __decorate([
     property()

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

@@ -1 +1 @@
-{"version":3,"file":"super-anchor.js","sourceRoot":"","sources":["../../src/core/super-anchor.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzD,OAAO,EAAuB,GAAG,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAqBhD,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,WAAW;IAArC;;QAME;;WAEG;QAEH,WAAM,GAA4C,OAAO,CAAC;IAqB5D,CAAC;IAnBC,IAAI,QAAQ;QACV,OAAO,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC;IACpD,CAAC;IAES,MAAM;QACd,OAAO,IAAI,CAAA;;;UAGL,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC;gBACnB,IAAI,CAAC,IAAI,IAAI,OAAO;kBAClB,IAAI,CAAC,MAAM;iBACZ,IAAI,CAAC,YAAY;;UAExB,QAAQ,EAAE;;KAEf,CAAC;IACJ,CAAC;IAES,YAAY,CAAC,CAAa,IAAS,CAAC;CAC/C,CAAA;AA1BC;IADC,QAAQ,EAAE;yCACE;AAKb;IADC,QAAQ,EAAE;2CAC+C;AAVtD,WAAW;IAnBhB,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;CAkBV,CAAC;GACI,WAAW,CA+BhB;AAED,eAAe,WAAW,CAAC;AAC3B,OAAO,EAAE,WAAW,EAAE,CAAC"}
+{"version":3,"file":"super-anchor.js","sourceRoot":"","sources":["../../src/core/super-anchor.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzD,OAAO,EAAuB,GAAG,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAqBhD,IAAe,WAAW,GAA1B,MAAe,WAAY,SAAQ,WAAW;IAA9C;;QAOE;;WAEG;QAEH,WAAM,GAA4C,OAAO,CAAC;IAqB5D,CAAC;IAnBC,IAAI,QAAQ;QACV,OAAO,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC;IACpD,CAAC;IAES,MAAM;QACd,OAAO,IAAI,CAAA;;;UAGL,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC;gBACnB,IAAI,CAAC,IAAI,IAAI,OAAO;kBAClB,IAAI,CAAC,MAAM;iBACZ,IAAI,CAAC,YAAY;;UAExB,QAAQ,EAAE;;KAEf,CAAC;IACJ,CAAC;CAGF,CAAA;AA3BC;IADC,QAAQ,EAAE;yCACE;AAMb;IADC,QAAQ,EAAE;2CAC+C;AAX7C,WAAW;IAnBzB,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;CAkBV,CAAC;GACa,WAAW,CAgCzB;AAED,eAAe,WAAW,CAAC;AAC3B,OAAO,EAAE,WAAW,EAAE,CAAC"}

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

@@ -1,9 +1,11 @@
 import { type HandlerEvent } from "@godown/element";
 import { type TemplateResult } from "lit";
 import { GlobalStyle } from "./global-style.js";
+import { type OutlineType } from "./outline.js";
 declare class SuperInput extends GlobalStyle {
     autofocus: boolean;
     autocomplete: string | boolean;
+    outlineType: OutlineType;
     disabled: boolean;
     type: InputType;
     placeholder: string;

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

@@ -1 +1 @@
-{"version":3,"file":"super-input.d.ts","sourceRoot":"","sources":["../../src/core/super-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAAgC,MAAM,iBAAiB,CAAC;AAElF,OAAO,EAAE,KAAK,cAAc,EAAa,MAAM,KAAK,CAAC;AAGrD,OAAO,EAAE,WAAW,EAAiB,MAAM,mBAAmB,CAAC;AAyE/D,cACM,UAAW,SAAQ,WAAW;IAClC,SAAS,UAAS;IAElB,YAAY,EAAE,MAAM,GAAG,OAAO,CAAC;IAG/B,QAAQ,UAAS;IAGjB,IAAI,EAAE,SAAS,CAAC;IAGhB,WAAW,EAAE,MAAM,CAAC;IAGpB,IAAI,EAAE,MAAM,CAAC;IAGb,KAAK,EAAE,GAAG,CAAC;IAEX,IAAI,cAAc,IAAI,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAExC;IAED;;OAEG;IAEH,OAAO,EAAE,GAAG,CAAC;IAGb,SAAS,CAAC,MAAM,EAAE,gBAAgB,CAAC;IAEnC;;OAEG;IACH,WAAW,UAAS;IAEpB,IAAI,YAAY,CAAC,KAAK,EAAE,OAAO,IAAI,CAAC,OAAO,EAE1C;IAED,IAAI,YAAY,IAJQ,OAAO,IAAI,CAAC,OAAO,CAM1C;IAED,SAAS,CAAC,MAAM,EAAE,MAAM,CAAuC;IAE/D,SAAS,IAAI,CAAC,MAAM,EAAE,GAAG,CAAC;IAI1B,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAkB;IAEhD,KAAK,IAAI,IAAI;IAKb,SAAS,CAAC,YAAY,CAAC,CAAC,EAAE,YAAY,CAAC,gBAAgB,CAAC,GAAG,IAAI;IAiB/D,iBAAiB,IAAI,IAAI;IAKzB,SAAS,CAAC,cAAc,IAAI,IAAI;IAKhC,SAAS,CAAC,gBAAgB,IAAI,IAAI;IAUlC,SAAS,CAAC,gBAAgB,CAAC,CAAC,EAAE,OAAO,IAAI,CAAC,IAAI,GAAG,IAAI;IAMrD,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI;IAInC,SAAS,CAAC,YAAY,IAAI,IAAI;IAI9B,SAAS,CAAC,aAAa,IAAI,cAAc,CAAC,CAAC,CAAC;IAW5C,SAAS,CAAC,aAAa,IAAI,cAAc,CAAC,CAAC,CAAC;CAsB7C;AAED,eAAe,UAAU,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,CAAC;AAEtB,KAAK,SAAS,GACV,QAAQ,GACR,MAAM,GACN,QAAQ,GACR,KAAK,GACL,KAAK,GACL,OAAO,GACP,UAAU,GACV,UAAU,GACV,MAAM,GACN,OAAO,GACP,MAAM,GACN,MAAM,GACN,gBAAgB,GAChB,QAAQ,GACR,OAAO,GACP,OAAO,GACP,UAAU,GACV,OAAO,GACP,MAAM,GACN,OAAO,CAAC"}
+{"version":3,"file":"super-input.d.ts","sourceRoot":"","sources":["../../src/core/super-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAAgC,MAAM,iBAAiB,CAAC;AAClF,OAAO,EAAE,KAAK,cAAc,EAAa,MAAM,KAAK,CAAC;AAGrD,OAAO,EAAE,WAAW,EAAiB,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAkB,KAAK,WAAW,EAAE,MAAM,cAAc,CAAC;AAmEhE,cAQM,UAAW,SAAQ,WAAW;IAClC,SAAS,UAAS;IAElB,YAAY,EAAE,MAAM,GAAG,OAAO,CAAC;IAG/B,WAAW,EAAE,WAAW,CAAY;IAGpC,QAAQ,UAAS;IAGjB,IAAI,EAAE,SAAS,CAAC;IAGhB,WAAW,EAAE,MAAM,CAAC;IAGpB,IAAI,EAAE,MAAM,CAAC;IAGb,KAAK,EAAE,GAAG,CAAC;IAEX,IAAI,cAAc,IAAI,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAExC;IAED;;OAEG;IAEH,OAAO,EAAE,GAAG,CAAC;IAGb,SAAS,CAAC,MAAM,EAAE,gBAAgB,CAAC;IAEnC;;OAEG;IACH,WAAW,UAAS;IAEpB,IAAI,YAAY,CAAC,KAAK,EAAE,OAAO,IAAI,CAAC,OAAO,EAE1C;IAED,IAAI,YAAY,IAJQ,OAAO,IAAI,CAAC,OAAO,CAM1C;IAED,SAAS,CAAC,MAAM,EAAE,MAAM,CAAuC;IAE/D,SAAS,IAAI,CAAC,MAAM,EAAE,GAAG,CAAC;IAI1B,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAkB;IAEhD,KAAK,IAAI,IAAI;IAKb,SAAS,CAAC,YAAY,CAAC,CAAC,EAAE,YAAY,CAAC,gBAAgB,CAAC,GAAG,IAAI;IAiB/D,iBAAiB,IAAI,IAAI;IAKzB,SAAS,CAAC,cAAc,IAAI,IAAI;IAKhC,SAAS,CAAC,gBAAgB,IAAI,IAAI;IAUlC,SAAS,CAAC,gBAAgB,CAAC,CAAC,EAAE,OAAO,IAAI,CAAC,IAAI,GAAG,IAAI;IAMrD,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI;IAInC,SAAS,CAAC,YAAY,IAAI,IAAI;IAI9B,SAAS,CAAC,aAAa,IAAI,cAAc,CAAC,CAAC,CAAC;IAW5C,SAAS,CAAC,aAAa,IAAI,cAAc,CAAC,CAAC,CAAC;CAU7C;AAED,eAAe,UAAU,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,CAAC;AAEtB,KAAK,SAAS,GACV,QAAQ,GACR,MAAM,GACN,QAAQ,GACR,KAAK,GACL,KAAK,GACL,OAAO,GACP,UAAU,GACV,UAAU,GACV,MAAM,GACN,OAAO,GACP,MAAM,GACN,MAAM,GACN,gBAAgB,GAChB,QAAQ,GACR,OAAO,GACP,OAAO,GACP,UAAU,GACV,OAAO,GACP,MAAM,GACN,OAAO,CAAC"}

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.2.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.1.0",
-    "@godown/f7-icon": "^1.0.1"
+    "@godown/element": "^1.3.0",
+    "@godown/f7-icon": "^1.0.3"
   },
   "publishConfig": {
     "access": "public"

package/src/components/alert.ts

@@ -40,32 +40,6 @@ const darkStyles = constructCSSObject(
   (prop) => toVar(prop),
 );
 
-const genLight = (key: string) => {
-  return [cssGlobalVars._colors[key][6], cssGlobalVars._colors[key][0]];
-};
-
-/**
- * @deprecated
- */
-const lightStyles = constructCSSObject(
-  vars,
-  {
-    green: genLight("green"),
-    blue: genLight("blue"),
-    orange: genLight("orange"),
-    red: genLight("red"),
-    yellow: genLight("yellow"),
-    purple: genLight("purple"),
-    teal: genLight("teal"),
-    pink: genLight("pink"),
-    gray: [cssGlobalVars._colors.darkgray[5], cssGlobalVars._colors.lightgray[7]],
-    white: [cssGlobalVars._colors.lightgray[0], cssGlobalVars._colors.darkgray[0]],
-    black: [cssGlobalVars._colors.darkgray[7], cssGlobalVars._colors.lightgray[3]],
-  },
-  () => ":host",
-  (prop) => toVar(prop),
-);
-
 const calls = {
   tip: {
     color: "teal",
@@ -116,67 +90,58 @@ const calls = {
 @styles(css`
   :host,
   :where(:host([contents]) [part="root"]) {
-    border-radius: var(${cssScope}--border-radius);
-    ${cssScope}--border-radius: .25em;
+    ${cssScope}--border-radius: .2em;
     ${cssScope}--border-width: .075em;
     ${cssScope}--blockquote-width: .2em;
-    ${cssScope}--padding: .5em;
+    ${cssScope}--blockquote-background: transparent;
+    ${cssScope}--gap: .5em;
+    border-radius: var(${cssScope}--border-radius);
     display: block;
     width: 100%;
   }
 
   [part="root"] {
-    --color: var(${cssScope}--color);
-    color: var(--color);
-    width: 100%;
-    transition: 0.25s;
-    display: flex;
-    justify-content: space-between;
-    padding: var(${cssScope}--padding);
+    color: var(${cssScope}--color, currentColor);
+    display: grid;
+    align-items: center;
+    grid-template-columns: auto 1fr auto;
+    grid-template-rows: auto 1fr;
+    border-color: currentColor;
     border-radius: inherit;
-    border: var(${cssScope}--border-width) solid var(--color);
+    border-style: solid;
+    border-width: var(${cssScope}--border-width);
+    padding: var(${cssScope}--gap);
     background: var(${cssScope}--background);
   }
 
   [variant="blockquote"] {
     border-radius: 0;
-    border-left: var(${cssScope}--blockquote-width) solid var(--color);
-    border-bottom: none;
-    border-right: none;
-    border-top: none;
-    background: transparent;
+    border-width: 0;
+    border-left-width: var(${cssScope}--blockquote-width);
+    background: var(${cssScope}--blockquote-background);
   }
 
-  [part="content"] {
-    color: var(--color);
-  }
-
-  [part="root"] {
+  [part~="icon"] {
     display: grid;
     align-items: center;
-    grid-template-columns: auto 1fr auto;
-    grid-template-rows: auto 1fr;
+    height: 2em;
   }
 
-  [part="title"] {
-    line-height: 2em;
+  .start svg {
+    margin-inline-end: var(${cssScope}--gap);
   }
 
-  [part="icon"] {
-    display: inline-grid;
-    align-items: center;
-    height: 2em;
+  .end svg {
+    margin-inline-start: var(${cssScope}--gap);
   }
 
-  [part="icon"] svg {
-    margin-right: 0.5em;
+  svg {
     width: 1.25em;
     height: 1.25em;
   }
 
   [part="content"] {
     grid-row: span 2 / span 2;
-    line-height: 1.5em;
   }
 `)
 class Alert extends GlobalStyle {
@@ -235,11 +200,9 @@ class Alert extends GlobalStyle {
    * Alert variant, if set to `blockquote`, the alert will be rendered as a blockquote.
    *
    * If variant is `"blockquote"`, hide the close button.
-   *
-   * ! __"light" will be deprecated__ in the future.
    */
   @property()
-  variant: "blockquote" | "dark" | "light" = "dark";
+  variant: "blockquote" | "dark" = "dark";
 
   protected render(): TemplateResult<1> {
     const color = calls[this.call]?.color || this.color;
@@ -249,7 +212,12 @@ class Alert extends GlobalStyle {
         part="root"
         ${attr(this.observedRecord)}
       >
-        <div part="icon">${icon}</div>
+        <div
+          part="icon"
+          class="start"
+        >
+          ${icon}
+        </div>
         <div part="content">
           <strong part="title">${this.title || htmlSlot("title")}</strong>
           ${this.content || htmlSlot()}
@@ -258,14 +226,15 @@ class Alert extends GlobalStyle {
           ? ""
           : html`
               <div
-                part="close"
+                part="icon close"
+                class="end"
                 tabindex="0"
                 @click="${this.close}"
               >
                 ${iconXmark()}
               </div>
             `}
-        ${htmlStyle(this.variant === "dark" ? darkStyles[color] : lightStyles[color])}
+        ${htmlStyle(darkStyles[color])}
       </div>
     `;
   }
@@ -277,7 +246,7 @@ class Alert extends GlobalStyle {
 
   protected firstUpdated(): void {
     if (this.autoclose) {
-      setTimeout(() => this.close(), this.autoclose);
+      this.timeouts.add(setTimeout(() => this.close(), this.autoclose));
     }
   }
 

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;
@@ -249,7 +260,7 @@ class Button extends GlobalStyle {
     super.blur();
   }
 
-  firstUpdated(): void {
+  protected firstUpdated(): void {
     this.events.add(this, "click", this._handelClick, true);
   }
 
@@ -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 {