godown 3.4.0 → 3.5.1

package/package.json

@@ -1,22 +1,9 @@
 {
   "name": "godown",
-  "version": "3.4.0",
+  "version": "3.5.1",
   "description": "Non Composite Web Components Library",
   "type": "module",
   "main": "index.js",
-  "exports": {
-    ".": {
-      "development": "./dev/index.js",
-      "default": "./index.js"
-    },
-    "./*": {
-      "development": "./dev/*",
-      "default": "./*"
-    },
-    "./build/*": "./build/*",
-    "./src/*": "./src/*",
-    "./*.json": "./*.json"
-  },
   "repository": {
     "type": "git",
     "url": "https://github.com/startracex/godown.git",
@@ -33,8 +20,8 @@
     "lit": "^3.0.0",
     "tslib": "^2.7.0",
     "@godown/colors": "^1.0.0",
-    "@godown/element": "^1.3.0",
-    "@godown/f7-icon": "^1.0.3"
+    "@godown/element": "^1.3.1",
+    "@godown/f7-icon": "^1.0.4"
   },
   "publishConfig": {
     "access": "public"
@@ -44,7 +31,8 @@
     "custom-elements.json",
     "web-types.json",
     "vscode.{css,html}-custom-data.json",
-    "src"
+    "src",
+    "tsconfig.json"
   ],
   "custom-elements": "./custom-elements.json",
   "customElements": "./custom-elements.json",
@@ -53,7 +41,7 @@
     "dev": "tsc --watch",
     "check-types": "tsc --noEmit",
     "clean": "tsc --build tsconfig.prod.json --clean",
-    "build": "tsc && tsx build.ts",
+    "build": "tsx build.ts",
     "build:ts": "tsc",
     "fmt": "prettier src --write",
     "lint": "biome lint",

package/src/components/avatar.ts

@@ -2,7 +2,7 @@ import { attr, godown, htmlSlot, omit, styles } from "@godown/element";
 import { type TemplateResult, css, html } from "lit";
 import { property } from "lit/decorators.js";
 
-import { GlobalStyle, scopePrefix } from "../core/global-style.js";
+import { GlobalStyle, scopePrefix, cssGlobalVars } from "../core/global-style.js";
 
 const protoName = "avatar";
 const cssScope = scopePrefix(protoName);
@@ -22,6 +22,7 @@ const cssScope = scopePrefix(protoName);
     ${cssScope}--size: 2em;
     width: var(${cssScope}--size);
     height: var(${cssScope}--size);
+    background: var(${cssGlobalVars.passive});
     vertical-align: bottom;
     border-radius: 0.2em;
   }

package/src/components/button.ts

@@ -95,7 +95,6 @@ const colors: Record<Colors, string> = constructCSSObject(
     }
 
     :host([round]) {
-      ${cssScope}--padding-x: .75em;
       border-radius: calc(infinity * 1px);
     }
 
@@ -118,8 +117,8 @@ const colors: Record<Colors, string> = constructCSSObject(
   `,
   css`
     :host {
-      ${cssScope}--padding-x: .5em;
-      ${cssScope}--padding-y: min(calc(var(${cssScope}--padding-x) / 2), .125em);
+      ${cssScope}--padding-x: .8em;
+      ${cssScope}--padding-y: calc(var(${cssScope}--padding-x) / 4);
       ${cssScope}--padding: var(${cssScope}--padding-y) var(${cssScope}--padding-x);
       ${cssScope}--modal-animation-duration: 1s;
       ${cssScope}--ghost-width: .08em;

package/src/components/card.ts

@@ -42,6 +42,10 @@ const cssScope = scopePrefix(protoName);
     border-style: solid;
   }
 
+  [part="root"] {
+    width: 100%;
+  }
+
   [name="footer"] {
     border-top-width: var(${cssScope}--border-width);
   }

package/src/components/details.ts

@@ -98,7 +98,7 @@ class Details extends SuperOpenable {
       >
         <dt
           part="title"
-          @click="${this._handelClick}"
+          @click="${() => this.toggle()}"
         >
           <span part="summary">${this.summary || htmlSlot("summary")}</span>
           <span>

package/src/components/dialog.ts

@@ -34,24 +34,22 @@ const cssScope = scopePrefix(protoName);
       ${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(:not([open])) {
+      visibility: hidden;
     }
 
-    :host([open][modal]) [part="modal"] {
+    :host([modal]) [part="modal"] {
       pointer-events: all;
-      visibility: visible;
       opacity: var(${cssScope}--opacity-modal);
     }
 
     [part="modal"] {
-      visibility: hidden;
+      visibility: inherit;
       opacity: 0;
       width: 100%;
       height: 100%;

package/src/components/divider.ts

@@ -2,7 +2,7 @@ import { attr, godown, styles } from "@godown/element";
 import { type TemplateResult, css, html } from "lit";
 import { property } from "lit/decorators.js";
 
-import { GlobalStyle } from "../core/global-style.js";
+import { cssGlobalVars, GlobalStyle } from "../core/global-style.js";
 
 const protoName = "divider";
 
@@ -19,6 +19,7 @@ const protoName = "divider";
     margin: auto;
     display: block;
     background: currentColor;
+    color: var(${cssGlobalVars.passive});
   }
 
   :host([vertical]) {

package/src/components/range.ts

@@ -8,6 +8,8 @@ import { SuperInput } from "../core/super-input.js";
 const protoName = "range";
 const cssScope = scopePrefix(protoName);
 
+type RangeValue = number | number[];
+
 /**
  * {@linkcode Range} is similar to `<input type="range">`.
  *
@@ -116,7 +118,7 @@ const cssScope = scopePrefix(protoName);
     }
   `,
 )
-class Range extends SuperInput {
+class Range<V extends RangeValue = RangeValue> extends SuperInput<RangeValue> {
   /**
    * Minimum value.
    */
@@ -147,13 +149,13 @@ class Range extends SuperInput {
    * Accepts number or array of numbers.
    */
   @property({ type: Array })
-  value: number | number[];
+  value: V;
 
   /**
    * The default of `{@linkcode this.value}`.
    */
   @property({ type: Array })
-  default: typeof this.value;
+  default: V;
 
   @part("root")
   protected _root: HTMLElement;
@@ -167,8 +169,8 @@ class Range extends SuperInput {
   protected _ranger: Ranger;
   private __focusStack: number[] = [];
 
-  get range(): boolean {
-    return Array.isArray(this.value);
+  get range(): V extends number ? false : true {
+    return Array.isArray(this.value) as any;
   }
 
   /**
@@ -319,12 +321,12 @@ class Range extends SuperInput {
   protected createSetValue(index: number) {
     return (value: number): void => {
       const normalizeValue = this._ranger.normalize(value);
-      let newValue: number | number[] = normalizeValue;
+      let newValue: RangeValue = normalizeValue;
       if (this.range) {
         newValue = [...(this.value as number[])];
         newValue[index] = normalizeValue;
       }
-      this.value = newValue;
+      this.value = newValue as V;
       this.dispatchEvent(new CustomEvent("range", { detail: this.value }));
     };
   }
@@ -399,7 +401,7 @@ class Range extends SuperInput {
       if (!isNil(this.default)) {
         this.value = this.default;
       } else {
-        this.value = Math.round(gap / 2 / this.step) * this.step;
+        (this.value as number) = Math.round(gap / 2 / this.step) * this.step;
       }
     }
     this.default ??= this.value;
@@ -409,13 +411,13 @@ class Range extends SuperInput {
     this.value = this.default;
   }
 
-  sort(): number | number[] {
+  sort(): V {
     return (this.value = this.toSorted());
   }
 
-  toSorted(): number | number[] {
+  toSorted(): V {
     if (this.range) {
-      return [...(this.value as number[])].sort((a, b) => a - b);
+      return [...(this.value as number[])].sort((a, b) => a - b) as V;
     }
     return this.value;
   }

package/src/components/split.ts

@@ -64,7 +64,8 @@ const cssScope = scopePrefix(protoName);
     z-index: -1;
   }
 
-  .focus {
+  .focus,
+  [part="input-box"]:active {
     ${cssGlobalVars.input}-outline-color: var(${cssGlobalVars.active});
   }
 `)

package/src/components/switch.ts

@@ -1,6 +1,6 @@
 import { attr, godown, omit, styles } from "@godown/element";
 import { type TemplateResult, css, html } from "lit";
-import { property, query } from "lit/decorators.js";
+import { property } from "lit/decorators.js";
 
 import { cssGlobalVars, scopePrefix } from "../core/global-style.js";
 import { SuperInput } from "../core/super-input.js";
@@ -27,7 +27,7 @@ const cssScope = scopePrefix(protoName);
     ${cssScope}-width: 3em;
     ${cssScope}-height: calc(var(${cssScope}-width) / 2);
     ${cssScope}-handle-size: 1.25em;
-    ${cssScope}-handle-space: .125em;
+    ${cssScope}-handle-space: calc(var(${cssScope}-width) / 4 - var(${cssScope}-handle-size) / 2);
     ${cssScope}-transition: .2s ease-in-out;
     border-radius: calc(var(${cssScope}-height) / 2);
     background: var(${cssGlobalVars.passive});
@@ -40,63 +40,54 @@ const cssScope = scopePrefix(protoName);
     background: var(${cssGlobalVars.active});
   }
 
-  [part="root"],
-  [part="handle"] {
-    transition: inherit;
-  }
-
   [part="root"] {
-    position: relative;
     height: inherit;
-  }
-
-  [part="input"] {
-    opacity: 0;
-    width: 100%;
-    height: 100%;
+    display: flex;
+    align-items: center;
+    position: relative;
+    transition: inherit;
   }
 
   [part="handle"] {
-    height: 100%;
-    display: inline-flex;
+    display: flex;
     align-items: center;
     justify-content: center;
     position: absolute;
+    transition: inherit;
     left: 0;
-    width: 50%;
+    top: 50%;
     pointer-events: none;
+    border-radius: 100%;
+    background: currentColor;
+    --size: var(${cssScope}-handle-size);
+    width: var(--size);
+    height: var(--size);
+    transform: translateY(-50%) translateX(var(${cssScope}-handle-space));
   }
 
   :host([checked]) [part="handle"] {
     left: 50%;
   }
 
-  [part="handle"] {
-    --size: var(${cssScope}-handle-size);
-    border-radius: 100%;
-    background: currentColor;
-    width: var(--size);
-    height: var(--size);
-    margin: var(${cssScope}-handle-space);
+  [part="input"] {
+    opacity: 0;
+    width: 100%;
+    height: 100%;
   }
 `)
-class Switch extends SuperInput {
+class Switch extends SuperInput<boolean> {
   /**
    * @deprecated
    */
   round: boolean;
 
-  /**
-   * Whether this element is selected or not.
-   */
-  @property({ type: Boolean, reflect: true })
-  checked = false;
+  set checked(v: boolean) {
+    this.value = v;
+  }
 
-  /**
-   * Disable this element.
-   */
-  @property({ type: Boolean, reflect: true })
-  disabled = false;
+  get checked(): boolean {
+    return this.value;
+  }
 
   /**
    * Default checked state.
@@ -105,13 +96,10 @@ class Switch extends SuperInput {
   default = false;
 
   /**
-   * Input value.
+   * The current value of the switch component. Reflects the "checked" attribute.
    */
-  @property()
-  value = "on";
-
-  @query("input")
-  protected _input: HTMLInputElement;
+  @property({ type: Boolean, attribute: "checked", reflect: true })
+  value = false;
 
   get observedRecord(): Record<string, any> {
     return omit(super.observedRecord, "outline-type");
@@ -128,40 +116,35 @@ class Switch extends SuperInput {
           part="input"
           type="checkbox"
           ?disabled="${this.disabled}"
-          ?checked="${this.checked}"
-          name="${this.name}"
+          ?checked="${this.value}"
           id="${this.makeId}"
           @change="${this._handleChange}"
         />
-        <span
-          part="handle"
-          class="${this.checked}"
-        ></span>
+        <span part="handle"></span>
       </div>
     `;
   }
 
   reset(): void {
-    this.checked = this.default;
-    this._input.checked = this.checked;
+    this.value = this.default;
+    this._input.checked = this.value;
   }
 
   protected _connectedInit(): void {
-    if (this.checked) {
-      this.default = true;
-    }
-    if (this.default === true) {
-      this.checked = true;
+    if (this.default) {
+      this.value = true;
+    } else {
+      if (this.value) {
+        this.value = true;
+        this.default = true;
+      }
     }
   }
 
   protected _handleChange(): void {
-    this.checked = this._input.checked;
-    this.dispatchEvent(new CustomEvent("change", { detail: this.checked, composed: true }));
-  }
-
-  namevalue(): [string, boolean] {
-    return [this.name, this.checked];
+    const { checked } = this._input;
+    this.value = checked;
+    this.dispatchCustomEvent("change", this.value);
   }
 }
 

package/src/core/global-style.ts

@@ -50,8 +50,8 @@ GlobalStyle.styles = [
         return `${colorKey}:rgb(${rgb});`;
       }, presetsRGB).join("") +
       joinProperties([
-        [cssGlobalVars.active, `var(${cssGlobalVars._colors.blue[6]})`],
-        [cssGlobalVars.passive, `var(${cssGlobalVars._colors.darkgray[6]})`],
+        [cssGlobalVars.active, `var(${cssGlobalVars._colors.blue[5]})`],
+        [cssGlobalVars.passive, `var(${cssGlobalVars._colors.darkgray[5]})`],
         [
           cssGlobalVars.clipBackground,
           `linear-gradient(to bottom, var(${cssGlobalVars._colors.lightgray[0]}), var(${cssGlobalVars._colors.darkgray[5]}))`,

package/src/core/super-input.ts

@@ -7,7 +7,6 @@ import { OutlineBuilder, type OutlineType } from "./outline.js";
 
 const fieldStyle = css`
   .input-field {
-    --space: var(${cssGlobalVars.input}-space);
     display: flex;
     position: relative;
     align-items: center;
@@ -20,13 +19,14 @@ const fieldStyle = css`
     height: 100%;
     width: 100%;
     color: inherit;
-    padding: 0 var(--space);
+    padding: var(${cssGlobalVars.input}-space);
   }
 
   .input-field [part="icon"] {
     display: flex;
     align-items: center;
     justify-content: center;
+    color: var(${cssGlobalVars.input}-icon-color);
   }
 
   .input-field [part="prefix"],
@@ -36,11 +36,11 @@ const fieldStyle = css`
   }
 
   .input-field [part="suffix"] [part="icon"] {
-    padding-inline-end: var(--space);
+    padding-inline-end: var(${cssGlobalVars.input}-space);
   }
 
   .input-field [part="prefix"] [part="icon"] {
-    padding-inline-start: var(--space);
+    padding-inline-start: var(${cssGlobalVars.input}-space);
   }
 `;
 
@@ -51,7 +51,8 @@ const inputStyle = css`
     ${cssGlobalVars.input}-space: 0.2em;
     ${cssGlobalVars.input}-control: currentColor;
     ${cssGlobalVars.input}-outline-width: .075em;
-    ${cssGlobalVars.input}-outline-color: var(${cssGlobalVars.passive});
+    ${cssGlobalVars.input}-outline-color: var(${cssGlobalVars._colors.darkgray[4]});
+    ${cssGlobalVars.input}-icon-color: var(${cssGlobalVars._colors.darkgray[4]});
     border-radius: 0.2em;
   }
 
@@ -60,6 +61,10 @@ const inputStyle = css`
     filter: brightness(0.85);
   }
 
+  :host(:focus-within) {
+    ${cssGlobalVars.input}-icon-color: currentColor;
+  }
+
   input:disabled {
     cursor: inherit;
   }
@@ -78,7 +83,7 @@ const inputStyle = css`
   }).styleSheet,
   inputStyle,
 )
-class SuperInput extends GlobalStyle {
+class SuperInput<V = string> extends GlobalStyle {
   autofocus = false;
   @property()
   autocomplete: string | boolean;
@@ -99,7 +104,7 @@ class SuperInput extends GlobalStyle {
   name: string;
 
   @property()
-  value: any;
+  value: V;
 
   get observedRecord(): Record<string, any> {
     return omit(super.observedRecord, "default", "value");
@@ -145,7 +150,7 @@ class SuperInput extends GlobalStyle {
     if (this.compositing) {
       return;
     }
-    this.value = e.target.value?.trim();
+    (this.value as string) = e.target.value?.trim();
     this.dispatchEvent(
       new CustomEvent("input", {
         detail: this.value,

package/src/core/super-openable.ts

@@ -28,10 +28,6 @@ class SuperOpenable extends GlobalStyle {
       this.dispatchEvent(new CustomEvent("change", { detail: this.open, composed: true }));
     }
   }
-
-  protected _handelClick(_: MouseEvent): void {
-    this.toggle();
-  }
 }
 
 export default SuperOpenable;

package/tsconfig.json

@@ -0,0 +1,33 @@
+{
+  "compilerOptions": {
+    "target": "ES2021",
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "customConditions": [
+      "development",
+      "import",
+      "default"
+    ],
+    "lib": [
+      "DOM",
+      "DOM.Iterable",
+      "ESNext"
+    ],
+    "types": [],
+    "allowJs": false,
+    "skipDefaultLibCheck": true,
+    "skipLibCheck": true,
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "importHelpers": true,
+    "noImplicitThis": true,
+    "experimentalDecorators": true,
+    "useDefineForClassFields": false,
+    "isolatedDeclarations": true,
+    "outDir": ".",
+    "rootDir": "src"
+  },
+  "include": ["src"],
+  "exclude": []
+}