godown 3.13.2 → 3.13.3

package/package.json

@@ -1,30 +1,26 @@
 {
   "name": "godown",
-  "version": "3.13.2",
+  "version": "3.13.3",
   "description": "Web Components Library",
   "type": "module",
-  "main": "index.js",
-  "homepage": "https://godown.js.org",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/startracex/godown.git",
-    "directory": "packages/godown"
-  },
-  "keywords": [
-    "web-components",
-    "custom-elements"
-  ],
-  "author": "startracex",
-  "license": "MIT",
   "dependencies": {
-    "@oxc-project/runtime": "^0.75.1",
+    "@oxc-project/runtime": "^0.76.0",
     "fmtime": "^0.0.3",
     "lit": "^3.0.0",
-    "@godown/element": "^1.11.0"
+    "sharekit": "^1.1.1",
+    "@godown/element": "^2.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
+  "exports": {
+    ".": "./build/index.js",
+    "./src/*": "./src/*",
+    "./*.json": "./*.json",
+    "./*.js": "./build/*.js",
+    "./*": "./build/*.js",
+    "./*.md": "./*.md"
+  },
   "files": [
     "**/*.{js,d.ts}+(|.map)",
     "custom-elements.json",
@@ -33,14 +29,24 @@
     "src",
     "tsconfig.json"
   ],
-  "custom-elements": "./custom-elements.json",
+  "keywords": [
+    "web-components",
+    "custom-elements"
+  ],
   "customElements": "./custom-elements.json",
   "web-types": "./web-types.json",
+  "homepage": "https://godown.js.org",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/startracex/godown.git",
+    "directory": "packages/godown"
+  },
+  "author": "startracex",
+  "license": "MIT",
   "scripts": {
     "dev": "tsc --watch",
     "check-types": "tsc --noEmit",
     "clean": "tsc --build --clean",
-    "build": "oxnode build.ts",
-    "build:ts": "tsc"
+    "build": "godown b -c .godownrc.json"
   }
 }

package/src/internal/global-style.ts

@@ -1,6 +1,7 @@
-import { declareLightDarkColors, GodownElement, joinDeclarations, joinRules, toVar, trim } from "@godown/element";
+import { GodownElement } from "@godown/element";
 import { type CSSResult, css, unsafeCSS } from "lit";
 import { resetStyle } from "./reset-style.js";
+import { trim } from "sharekit";
 
 export class GlobalStyle extends GodownElement {}
 
@@ -8,27 +9,31 @@ export default GlobalStyle;
 
 const cssvar = trim(GlobalStyle.godownConfig.prefix, "-");
 
-export function scopePrefix(scope: string, len = 1): CSSResult {
+type CSSResult_Var = CSSResult & { toVar: () => CSSResult };
+
+export function scopePrefix(scope: string, len = 1): CSSResult_Var {
   return variablePrefix(cssvar + "-".repeat(len) + scope);
 }
 
-export function variablePrefix(variable: string): CSSResult {
-  return unsafeCSS(`--${variable}`);
+export function variablePrefix(variable: string): CSSResult_Var {
+  const v = unsafeCSS(`--${variable}`) as CSSResult_Var;
+  v.toVar = () => unsafeCSS(`var(${v})`);
+  return v;
 }
 
 export const cssGlobalVars: {
-  backgroundClip: CSSResult;
-  active: CSSResult;
-  passive: CSSResult;
-  input: CSSResult;
-  radius: CSSResult;
-  ringWidth: CSSResult;
-  ringColor: CSSResult;
-  background: CSSResult;
-  foreground: CSSResult;
-  primaryBackground: CSSResult;
-  primaryForeground: CSSResult;
-  muted: CSSResult;
+  backgroundClip: CSSResult_Var;
+  active: CSSResult_Var;
+  passive: CSSResult_Var;
+  input: CSSResult_Var;
+  radius: CSSResult_Var;
+  ringWidth: CSSResult_Var;
+  ringColor: CSSResult_Var;
+  background: CSSResult_Var;
+  foreground: CSSResult_Var;
+  primaryBackground: CSSResult_Var;
+  primaryForeground: CSSResult_Var;
+  muted: CSSResult_Var;
 } = {
   background: scopePrefix("background", 2),
   foreground: scopePrefix("foreground", 2),
@@ -46,34 +51,34 @@ export const cssGlobalVars: {
 
 GlobalStyle.styles = [
   resetStyle,
-  unsafeCSS(
-    declareLightDarkColors(
-      ":host",
-      [
-        [cssGlobalVars.background, ["hsl(0 0% 96%)", "hsl(0 0% 4%)"]],
-        [cssGlobalVars.foreground, ["hsl(0 0% 4%)", "hsl(0 0% 96%)"]],
-        [cssGlobalVars.muted, ["hsl(0 0% 88%)", "hsl(0 0% 18%)"]],
-      ],
-      1,
-    ),
-  ),
-  unsafeCSS(
-    joinRules({
-      ":host": joinDeclarations([
-        [cssGlobalVars.primaryBackground, toVar(cssGlobalVars.foreground)],
-        [cssGlobalVars.primaryForeground, toVar(cssGlobalVars.background)],
-        [cssGlobalVars.active, toVar(cssGlobalVars.primaryBackground)],
-        [cssGlobalVars.passive, toVar(cssGlobalVars.muted)],
-        [
-          cssGlobalVars.backgroundClip,
-          `linear-gradient(to bottom, ${toVar(cssGlobalVars.foreground)}, ${toVar(cssGlobalVars.muted)})`,
-        ],
-        [cssGlobalVars.ringColor, toVar(cssGlobalVars.passive)],
-        [cssGlobalVars.ringWidth, ".1em"],
-        [cssGlobalVars.radius, ".25em"],
-      ]),
-    }),
-  ),
+  css`
+    @supports (color: light-dark(#fff, #000)) {
+      :host {
+        ${cssGlobalVars.background}: light-dark(hsl(0 0% 96%), hsl(0 0% 4%));
+        ${cssGlobalVars.foreground}: light-dark(hsl(0 0% 4%), hsl(0 0% 96%));
+        ${cssGlobalVars.muted}: light-dark(hsl(0 0% 88%), hsl(0 0% 18%));
+      }
+    }
+    @supports not (color: light-dark(#fff, #000)) {
+      :host {
+        ${cssGlobalVars.background}: hsl(0 0% 4%);
+        ${cssGlobalVars.foreground}: hsl(0 0% 96%);
+        ${cssGlobalVars.muted}: hsl(0 0% 18%);
+      }
+    }
+  `,
+  css`
+    :host {
+      ${cssGlobalVars.primaryBackground}: ${cssGlobalVars.foreground.toVar()};
+      ${cssGlobalVars.primaryForeground}:${cssGlobalVars.background.toVar()};
+      ${cssGlobalVars.active}: ${cssGlobalVars.primaryBackground.toVar()};
+      ${cssGlobalVars.passive}: ${cssGlobalVars.muted.toVar()};
+      ${cssGlobalVars.ringColor}: ${cssGlobalVars.passive.toVar()};
+      ${cssGlobalVars.ringWidth}: .1em;
+      ${cssGlobalVars.radius}: .25em;
+      ${cssGlobalVars.backgroundClip}: linear-gradient(to bottom, ${cssGlobalVars.foreground.toVar()}, ${cssGlobalVars.muted.toVar()});
+    }
+  `,
   css`
     :host([contents]) {
       display: contents;
@@ -96,7 +101,7 @@ GlobalStyle.styles = [
   `,
   css`
     :host {
-      border-radius: var(${cssGlobalVars.radius});
+      border-radius: ${cssGlobalVars.radius.toVar()};
       border-style: none;
       outline-style: none;
     }

package/src/internal/popover.ts

@@ -2,7 +2,7 @@ import { memoize } from "./utils.js";
 
 const POPOVER = "popover";
 
-const supportPopover = () => Object.hasOwn(HTMLElement.prototype, POPOVER);
+const supportPopover = memoize(() => Object.hasOwn(HTMLElement.prototype, POPOVER));
 
 const getPopoverAttribute = (element: HTMLElement) => element.getAttribute(POPOVER);
 

package/src/internal/ring.ts

@@ -1,4 +1,3 @@
-import { toVar } from "@godown/element";
 import { cssGlobalVars } from "./global-style.js";
 import { unsafeCSS, type CSSResult } from "lit";
 
@@ -34,8 +33,8 @@ export class RingBuilder {
 
   constructor({
     selector = ":host",
-    width = toVar(cssGlobalVars.ringWidth),
-    color = toVar(cssGlobalVars.ringColor),
+    width = cssGlobalVars.ringWidth.toVar(),
+    color = cssGlobalVars.ringColor.toVar(),
     type,
   }: OutlineOptions = {}) {
     if (type && type in ringMap) {

package/src/internal/super-input.ts

@@ -1,6 +1,7 @@
-import { type HandlerEvent, htmlSlot, omit, queryPart, styles } from "@godown/element";
+import { type HandlerEvent, htmlSlot, styles } from "@godown/element";
 import { type TemplateResult, css, html } from "lit";
-import { property } from "lit/decorators.js";
+import { property, query } from "lit/decorators.js";
+import { omit } from "sharekit";
 
 import { GlobalStyle } from "./global-style.js";
 import { ringTypeAttribute, type RingType } from "./ring.js";
@@ -52,7 +53,7 @@ class SuperInput<V = string> extends GlobalStyle {
   @property()
   default: any;
 
-  @queryPart("input")
+  @query("[part=input]")
   protected _input: HTMLInputElement;
 
   /**

package/src/internal/utils.ts

@@ -1,10 +1,11 @@
 export function memoize<T extends (...args: any[]) => any>(fn: T): T {
   let result: ReturnType<T> | undefined;
-  let proxyFunction = function (this: any, ...args) {
-    result = fn.apply(this, args);
-    proxyFunction = (() => result) as T;
-    return result;
-  } as T;
-
-  return proxyFunction;
+  let called = false;
+  return ((...args: Parameters<T>) => {
+    if (!called) {
+      result = fn(...args);
+      called = true;
+    }
+    return result!;
+  }) as T;
 }

package/src/web-components/avatar/component.ts

@@ -1,6 +1,7 @@
-import { attr, godown, htmlSlot, omit, styles } from "@godown/element";
+import { attr, godown, htmlSlot, styles } from "@godown/element";
 import { type TemplateResult, css, html } from "lit";
 import { property } from "lit/decorators.js";
+import { omit } from "sharekit";
 
 import { GlobalStyle, cssGlobalVars } from "../../internal/global-style.js";
 

package/src/web-components/breath/component.ts

@@ -1,4 +1,4 @@
-import { attr, godown, htmlStyle, styles } from "@godown/element";
+import { attr, godown, StyleController, styles } from "@godown/element";
 import { type TemplateResult, css, html } from "lit";
 import { property } from "lit/decorators.js";
 
@@ -108,6 +108,11 @@ class Breath extends GlobalStyle {
   @property({ type: Number })
   duration: number;
 
+  constructor() {
+    super();
+    new StyleController(this, () => this._computeStyle(this.getTexts().length));
+  }
+
   protected render(): TemplateResult<1> {
     const texts = this.getTexts();
     return html`
@@ -115,7 +120,7 @@ class Breath extends GlobalStyle {
         part="root"
         ${attr(this.observedRecord)}
       >
-        ${[texts.map(this._renderText), htmlStyle(this._computeStyle(texts.length))]}
+        ${texts.map(this._renderText)}
       </div>
     `;
   }
@@ -144,9 +149,7 @@ class Breath extends GlobalStyle {
       const defaultNumber = ((number - 1) % 3) + 1;
       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
-    }%{opacity:1;}}${style1}`;
+    return `.colorful{animation-duration:${duration}ms;}@keyframes colorfulN{0%,${gap * 3}%{opacity:0;}${gap}%,${gap * 2}%{opacity:1;}}${style1}`;
   }
 }
 

package/src/web-components/button/component.ts

@@ -1,6 +1,6 @@
-import { attr, godown, htmlSlot, queryPart, styles } from "@godown/element";
+import { attr, godown, htmlSlot, styles } from "@godown/element";
 import { type TemplateResult, css, html } from "lit";
-import { property } from "lit/decorators.js";
+import { property, query } from "lit/decorators.js";
 
 import { GlobalStyle, cssGlobalVars, scopePrefix } from "../../internal/global-style.js";
 
@@ -104,9 +104,9 @@ class Button extends GlobalStyle {
   @property()
   content: string;
 
-  @queryPart("modal-root")
+  @query("[part=modal-root]")
   protected _modalRoot: HTMLElement;
-  @queryPart("root")
+  @query("[part=root]")
   protected _root: HTMLElement;
 
   protected render(): TemplateResult<1> {

package/src/web-components/carousel/component.ts

@@ -1,8 +1,8 @@
-import { attr, godown, htmlSlot, queryPart, styles } from "@godown/element";
+import { attr, godown, htmlSlot, styles } from "@godown/element";
 import iconCaretLeft from "../../internal/icons/caret-left.js";
 import iconCaretRight from "../../internal/icons/caret-right.js";
 import { type TemplateResult, css, html } from "lit";
-import { property } from "lit/decorators.js";
+import { property, query } from "lit/decorators.js";
 
 import { GlobalStyle } from "../../internal/global-style.js";
 
@@ -80,7 +80,7 @@ class Carousel extends GlobalStyle {
   @property({ type: Number })
   autoChange = 0;
 
-  @queryPart("move-root")
+  @query("[part=move-root]")
   protected _moveRoot: HTMLElement;
 
   intervalID: number;

package/src/web-components/dialog/component.ts

@@ -1,6 +1,6 @@
-import { type HandlerEvent, godown, htmlSlot, queryPart, styles } from "@godown/element";
+import { type HandlerEvent, 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 GlobalStyle, { scopePrefix } from "../../internal/global-style.js";
 
@@ -58,7 +58,7 @@ class Dialog extends GlobalStyle {
    */
   private __modalInvoke = false;
 
-  @queryPart("dialog")
+  @query("[part=dialog]")
   protected _dialog: HTMLDialogElement;
 
   protected render(): TemplateResult<1> {

package/src/web-components/flex/component.ts

@@ -1,4 +1,4 @@
-import { attr, godown, htmlSlot, htmlStyle, joinRules, styles } from "@godown/element";
+import { attr, godown, htmlSlot, StyleController, styles } from "@godown/element";
 import { type TemplateResult, css, html } from "lit";
 import { property } from "lit/decorators.js";
 
@@ -54,26 +54,30 @@ class Flex extends GlobalStyle {
   @property({ type: Boolean })
   vertical = false;
 
+  constructor() {
+    super();
+    new StyleController(
+      this,
+      () => ({
+        ":host": {
+          gap: this.gap,
+          "flex-flow": this.flexFlow,
+          "flex-direction": this.vertical && "column",
+          "align-items": this.items,
+          "justify-content": this.content,
+        },
+      }),
+      () => [this.gap, this.flexFlow, this.vertical, this.items, this.content],
+    );
+  }
+
   protected render(): TemplateResult<1> {
     return html`
       <div
         part="root"
         ${attr(this.observedRecord)}
       >
-        ${[
-          htmlSlot(),
-          htmlStyle(
-            joinRules({
-              ":host": {
-                gap: this.gap,
-                "flex-flow": this.flexFlow,
-                "flex-direction": this.vertical && "column",
-                "align-items": this.items,
-                "justify-content": this.content,
-              },
-            }),
-          ),
-        ]}
+        ${htmlSlot()}
       </div>
     `;
   }

package/src/web-components/grid/component.ts

@@ -1,6 +1,7 @@
-import { attr, godown, htmlSlot, htmlStyle, isNumerical, joinRules, styles } from "@godown/element";
+import { attr, godown, htmlSlot, StyleController, styles } from "@godown/element";
 import { type TemplateResult, css, html } from "lit";
 import { property } from "lit/decorators.js";
+import { isNumerical } from "sharekit";
 
 import { GlobalStyle } from "../../internal/global-style.js";
 
@@ -60,26 +61,30 @@ class Grid extends GlobalStyle {
   @property()
   items: string;
 
+  constructor() {
+    super();
+    new StyleController(
+      this,
+      () => ({
+        ":host": {
+          gap: this.gap,
+          "grid-template-columns": toTemplate(this.columns),
+          "grid-template-rows": toTemplate(this.rows),
+          "place-content": this.content,
+          "place-items": this.items,
+        },
+      }),
+      () => [this.gap, this.columns, this.rows, this.content, this.items],
+    );
+  }
+
   protected render(): TemplateResult<1> {
     return html`
       <div
         part="root"
         ${attr(this.observedRecord)}
       >
-        ${[
-          htmlSlot(),
-          htmlStyle(
-            joinRules({
-              ":host": {
-                gap: this.gap,
-                "grid-template-columns": toTemplate(this.columns),
-                "grid-template-rows": toTemplate(this.rows),
-                "place-content": this.content,
-                "place-items": this.items,
-              },
-            }),
-          ),
-        ]}
+        ${htmlSlot()}
       </div>
     `;
   }

package/src/web-components/input/component.ts

@@ -1,7 +1,7 @@
-import { attr, godown, queryPart, styles, StyleController, htmlSlot } from "@godown/element";
+import { attr, godown, styles, StyleController, htmlSlot } from "@godown/element";
 import iconEyeSlash from "../../internal/icons/eye-slash.js";
 import { type TemplateResult, css, html, nothing } from "lit";
-import { property } from "lit/decorators.js";
+import { property, query } from "lit/decorators.js";
 
 import { cssGlobalVars } from "../../internal/global-style.js";
 import { SuperInput } from "../../internal/super-input.js";
@@ -92,7 +92,7 @@ class Input extends SuperInput {
   @property()
   variant: "default" | "outline" = "default";
 
-  @queryPart("input")
+  @query("[part=input]")
   protected _input: HTMLInputElement;
 
   constructor() {

package/src/web-components/popover/component.ts

@@ -1,7 +1,7 @@
-import { property } from "lit/decorators.js";
+import { property, query } from "lit/decorators.js";
 import GlobalStyle from "../../internal/global-style.js";
 import { css, html, type PropertyValues, type TemplateResult } from "lit";
-import { godown, htmlSlot, joinRules, part, StyleController, styles } from "@godown/element";
+import { godown, htmlSlot, StyleController, styles } from "@godown/element";
 import { hidePopover, showPopover } from "../../internal/popover.js";
 
 const POPOVER = "popover";
@@ -77,13 +77,13 @@ class Popover extends GlobalStyle {
     | "end-start"
     | "end-end" = "bottom";
 
-  @part(POPOVER)
+  @query(`[part=${POPOVER}]`, true)
   protected _popover: HTMLElement;
 
   constructor() {
     super();
     new StyleController(this, () => {
-      return joinRules({
+      return {
         "[part=root],slot:not([name])::slotted(*)": {
           "anchor-name": this.anchorName,
         },
@@ -91,9 +91,10 @@ class Popover extends GlobalStyle {
           "position-anchor": this.anchorName,
           "position-area": this.resolveArea(),
         },
-      });
+      };
     });
   }
+
   protected render(): TemplateResult<1> {
     return html`
       <div part="root">

package/src/web-components/progress/component.ts

@@ -1,6 +1,7 @@
-import { attr, godown, isNullable, Ranger, styles } from "@godown/element";
+import { attr, godown, styles } from "@godown/element";
 import { type TemplateResult, css, html } from "lit";
 import { property } from "lit/decorators.js";
+import { isNullable, Ranger } from "sharekit";
 
 import { GlobalStyle, cssGlobalVars } from "../../internal/global-style.js";
 

package/src/web-components/range/component.ts

@@ -1,17 +1,8 @@
-import {
-  attr,
-  tokenList,
-  godown,
-  isNullable,
-  joinDeclarations,
-  loop,
-  queryPart,
-  styles,
-  Ranger,
-  omit,
-} from "@godown/element";
+import { attr, tokenList, godown, loop, styles } from "@godown/element";
+import { isNullable, omit, Ranger } from "sharekit";
 import { type TemplateResult, css, html } from "lit";
-import { property, queryAll, state } from "lit/decorators.js";
+import { property, query, queryAll, state } from "lit/decorators.js";
+import { styleMap } from "lit/directives/style-map.js";
 
 import { cssGlobalVars, scopePrefix } from "../../internal/global-style.js";
 import { SuperInput } from "../../internal/super-input.js";
@@ -161,7 +152,7 @@ class Range<V extends RangeValue = RangeValue> extends SuperInput<RangeValue> {
   @property({ type: Array })
   default: V;
 
-  @queryPart("root")
+  @query("[part=root]")
   protected _root: HTMLElement;
 
   @queryAll("[part=handle]")
@@ -218,13 +209,15 @@ class Range<V extends RangeValue = RangeValue> extends SuperInput<RangeValue> {
         part="root"
         ${attr(this.observedRecord)}
         @mousedown="${this.disabled ? null : this._handleMousedownRoot}"
-        style="${joinDeclarations([
-          ["--from", `${((from - this.min) / gap) * 100}%`],
-          ["--to", `${((to - this.min) / gap) * 100}%`],
-          ...rangeValue.map(
-            (value, index) => [`--handle-${index}`, `${((value - this.min) / gap) * 100}%`] as [string, string],
-          ),
-        ])}"
+        style="${styleMap(
+          Object.fromEntries([
+            ["--from", `${((from - this.min) / gap) * 100}%`],
+            ["--to", `${((to - this.min) / gap) * 100}%`],
+            ...rangeValue.map(
+              (value, index) => [`--handle-${index}`, `${((value - this.min) / gap) * 100}%`] as [string, string],
+            ),
+          ]),
+        )}"
       >
         <div part="track"></div>
         ${loop(this.rangeValue.length, (index) => this._renderHandle(index))}
@@ -242,7 +235,7 @@ class Range<V extends RangeValue = RangeValue> extends SuperInput<RangeValue> {
         tabindex="0"
         part="${tokenList("handle", `handle-${index}`)}"
         @mousedown="${disabled ? null : this.createMouseDown(index)}"
-        style="${joinDeclarations({
+        style="${styleMap({
           "z-index": this.__focusStack.indexOf(index) + 1,
           "--handle": `var(--${end ? "to" : `handle-${index}`})`,
         })}"
@@ -359,6 +352,7 @@ class Range<V extends RangeValue = RangeValue> extends SuperInput<RangeValue> {
     this.createMousedownListener(set)(e);
     this.focusHandle(index);
   }
+
   /**
    * Creates a mouse down event handler that focuses the handle at the given index and sets the value of the range.
    * @param index - The index of the handle to focus.

package/src/web-components/rotate/component.ts

@@ -1,7 +1,8 @@
-import { godown, htmlSlot, queryPart, styles } from "@godown/element";
+import { godown, htmlSlot, styles } from "@godown/element";
 import { type TemplateResult, css, html } from "lit";
 
 import { GlobalStyle, scopePrefix } from "../../internal/global-style.js";
+import { query } from "lit/decorators.js";
 
 const protoName = "rotate";
 const cssScope = scopePrefix(protoName);
@@ -41,7 +42,7 @@ const cssScope = scopePrefix(protoName);
   }
 `)
 class Rotate extends GlobalStyle {
-  @queryPart("root")
+  @query("[part=root]")
   protected _root: HTMLElement;
 
   protected render(): TemplateResult<1> {