godown 3.8.2 → 3.9.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "godown",
-  "version": "3.8.2",
-  "description": "Non Composite Web Components Library",
+  "version": "3.9.0",
+  "description": "Web Components Library",
   "type": "module",
   "main": "index.js",
   "homepage": "https://godown.js.org",
@@ -20,9 +20,9 @@
     "fmtime": "^0.0.3",
     "lit": "^3.0.0",
     "tslib": "^2.7.0",
+    "@godown/element": "^1.7.0",
     "@godown/colors": "^1.0.0",
-    "@godown/element": "^1.6.0",
-    "@godown/f7-icon": "^1.0.7"
+    "@godown/f7-icon": "^1.0.9"
   },
   "publishConfig": {
     "access": "public"
@@ -45,7 +45,6 @@
     "build": "tsx build.ts",
     "build:ts": "tsc",
     "fmt": "prettier src/**/* --write",
-    "lint": "biome lint",
     "manifest": "tsx manifest.ts"
   }
 }

package/src/components/alert.ts

@@ -1,4 +1,4 @@
-import { attr, constructCSSObject, godown, htmlSlot, htmlStyle, styles, toVar } from "@godown/element";
+import { attr, godown, htmlSlot, joinRules, StyleController, styles } from "@godown/element";
 import iconCheckAltCircle from "@godown/f7-icon/icons/checkmark-alt-circle.js";
 import iconExclamationCircle from "@godown/f7-icon/icons/exclamationmark-circle.js";
 import iconInfoCircle from "@godown/f7-icon/icons/info-circle.js";
@@ -15,30 +15,23 @@ import { GlobalStyle, cssGlobalVars, scopePrefix } from "../core/global-style.js
 const protoName = "alert";
 const cssScope = scopePrefix(protoName);
 
-const vars = ["color", "background"].map((v) => `${cssScope}--${v}`);
-
 const genDark = (key: string) => {
   return [cssGlobalVars._colors[key][5], cssGlobalVars._colors[key][9]];
 };
 
-const darkStyles = constructCSSObject(
-  vars,
-  {
-    green: genDark("green"),
-    blue: genDark("blue"),
-    orange: genDark("orange"),
-    red: genDark("red"),
-    yellow: genDark("yellow"),
-    purple: genDark("purple"),
-    teal: genDark("teal"),
-    pink: genDark("pink"),
-    gray: [cssGlobalVars._colors.lightgray[5], cssGlobalVars._colors.darkgray[5]],
-    white: [cssGlobalVars._colors.lightgray[2], cssGlobalVars._colors.darkgray[7]],
-    black: [cssGlobalVars._colors.darkgray[8], cssGlobalVars._colors.lightgray[5]],
-  },
-  () => ":host",
-  (prop) => toVar(prop),
-);
+const colorDetails = {
+  green: genDark("green"),
+  blue: genDark("blue"),
+  orange: genDark("orange"),
+  red: genDark("red"),
+  yellow: genDark("yellow"),
+  purple: genDark("purple"),
+  teal: genDark("teal"),
+  pink: genDark("pink"),
+  gray: [cssGlobalVars._colors.lightgray[5], cssGlobalVars._colors.darkgray[5]],
+  white: [cssGlobalVars._colors.lightgray[2], cssGlobalVars._colors.darkgray[7]],
+  black: [cssGlobalVars._colors.darkgray[8], cssGlobalVars._colors.lightgray[5]],
+};
 
 const calls = {
   tip: {
@@ -88,12 +81,15 @@ const calls = {
  */
 @godown(protoName)
 @styles(css`
-  :host,
-  :where(:host([contents]) [part="root"]) {
+  :host {
     ${cssScope}--border-width: .075em;
     ${cssScope}--blockquote-width: .2em;
     ${cssScope}--blockquote-background: transparent;
     ${cssScope}--gap: .5em;
+  }
+
+  :host,
+  :where(:host([contents]) [part="root"]) {
     display: block;
   }
 
@@ -142,6 +138,20 @@ const calls = {
   }
 `)
 class Alert extends GlobalStyle {
+  private __colorSC = new StyleController(this, () => {
+    const color = calls[this.call]?.color || this.color;
+    if (color in colorDetails) {
+      const [fg, bg] = colorDetails[color];
+      return joinRules({
+        ":host": [
+          [`${cssScope}--color`, `var(${fg})`],
+          [`${cssScope}--background`, `var(${bg})`],
+        ],
+      });
+    }
+    return null;
+  });
+
   /**
    * If it is a legal value, the icon and preset color will be rendered.
    */
@@ -202,7 +212,6 @@ class Alert extends GlobalStyle {
   variant: "blockquote" | "dark" = "dark";
 
   protected render(): TemplateResult<1> {
-    const color = calls[this.call]?.color || this.color;
     const icon = this.call ? calls[this.call].icon() : htmlSlot("icon");
     return html`
       <div
@@ -231,7 +240,6 @@ class Alert extends GlobalStyle {
                 ${iconXmark()}
               </div>
             `}
-        ${htmlStyle(darkStyles[color])}
       </div>
     `;
   }

package/src/components/avatar.ts

@@ -2,10 +2,9 @@ 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, cssGlobalVars } from "../core/global-style.js";
+import { GlobalStyle, cssGlobalVars } from "../core/global-style.js";
 
 const protoName = "avatar";
-const cssScope = scopePrefix(protoName);
 
 /**
  * {@linkcode Avatar} renders a avatar.

package/src/components/button.ts

@@ -1,4 +1,4 @@
-import { attr, constructCSSObject, godown, htmlSlot, htmlStyle, part, styles, toVar } from "@godown/element";
+import { attr, godown, htmlSlot, joinRules, part, StyleController, styles } from "@godown/element";
 import { type TemplateResult, css, html } from "lit";
 import { property } from "lit/decorators.js";
 
@@ -10,69 +10,77 @@ const cssScope = scopePrefix(protoName);
 const whiteFont = cssGlobalVars.white;
 const blackFont = cssGlobalVars.black;
 
-type Colors = "teal" | "blue" | "green" | "red" | "purple" | "orange" | "yellow" | "pink" | "gray" | "white" | "black";
-const colors: Record<Colors, string> = constructCSSObject(
-  ["color", "background", "gradients"].map((k) => `${cssScope}--${k}`),
-  {
-    black: [
-      whiteFont, // color
-      cssGlobalVars._colors.darkgray[7], // background
-      cssGlobalVars._colors.darkgray[5], // gradients
-    ],
-    gray: [
-      whiteFont, // color
-      cssGlobalVars._colors.darkgray[1], // background
-      cssGlobalVars._colors.lightgray[8], // gradients
-    ],
-    white: [
-      blackFont, // color
-      cssGlobalVars._colors.lightgray[3], // background
-      cssGlobalVars._colors.lightgray[0], // gradients
-    ],
-    blue: [
-      whiteFont, // color
-      cssGlobalVars._colors.blue[6], // background
-      cssGlobalVars._colors.blue[4], // gradients
-    ],
-    green: [
-      whiteFont, // color
-      cssGlobalVars._colors.green[6], // background
-      cssGlobalVars._colors.green[4], // gradients
-    ],
-    red: [
-      whiteFont, // color
-      cssGlobalVars._colors.red[6], // background
-      cssGlobalVars._colors.red[4], // gradients
-    ],
-    orange: [
-      whiteFont, // color
-      cssGlobalVars._colors.orange[6], // background
-      cssGlobalVars._colors.orange[4], // gradients
-    ],
-    pink: [
-      whiteFont, // color
-      cssGlobalVars._colors.pink[6], // background
-      cssGlobalVars._colors.pink[4], // gradients
-    ],
-    purple: [
-      whiteFont, // color
-      cssGlobalVars._colors.purple[6], // background
-      cssGlobalVars._colors.purple[4], // gradients
-    ],
-    yellow: [
-      blackFont, // color
-      cssGlobalVars._colors.yellow[6], // background
-      cssGlobalVars._colors.yellow[4], // gradients
-    ],
-    teal: [
-      whiteFont, // color
-      cssGlobalVars._colors.teal[6], // background
-      cssGlobalVars._colors.teal[4], // gradients
-    ],
-  },
-  () => ":host",
-  (prop) => toVar(prop),
-);
+type Colors =
+  | "none"
+  | "teal"
+  | "blue"
+  | "green"
+  | "red"
+  | "purple"
+  | "orange"
+  | "yellow"
+  | "pink"
+  | "gray"
+  | "white"
+  | "black";
+
+const colorDetails = {
+  black: [
+    whiteFont, // color
+    cssGlobalVars._colors.darkgray[7], // background
+    cssGlobalVars._colors.darkgray[5], // gradients
+  ],
+  gray: [
+    whiteFont, // color
+    cssGlobalVars._colors.darkgray[1], // background
+    cssGlobalVars._colors.lightgray[8], // gradients
+  ],
+  white: [
+    blackFont, // color
+    cssGlobalVars._colors.lightgray[3], // background
+    cssGlobalVars._colors.lightgray[0], // gradients
+  ],
+  blue: [
+    whiteFont, // color
+    cssGlobalVars._colors.blue[6], // background
+    cssGlobalVars._colors.blue[4], // gradients
+  ],
+  green: [
+    whiteFont, // color
+    cssGlobalVars._colors.green[6], // background
+    cssGlobalVars._colors.green[4], // gradients
+  ],
+  red: [
+    whiteFont, // color
+    cssGlobalVars._colors.red[6], // background
+    cssGlobalVars._colors.red[4], // gradients
+  ],
+  orange: [
+    whiteFont, // color
+    cssGlobalVars._colors.orange[6], // background
+    cssGlobalVars._colors.orange[4], // gradients
+  ],
+  pink: [
+    whiteFont, // color
+    cssGlobalVars._colors.pink[6], // background
+    cssGlobalVars._colors.pink[4], // gradients
+  ],
+  purple: [
+    whiteFont, // color
+    cssGlobalVars._colors.purple[6], // background
+    cssGlobalVars._colors.purple[4], // gradients
+  ],
+  yellow: [
+    blackFont, // color
+    cssGlobalVars._colors.yellow[6], // background
+    cssGlobalVars._colors.yellow[4], // gradients
+  ],
+  teal: [
+    whiteFont, // color
+    cssGlobalVars._colors.teal[6], // background
+    cssGlobalVars._colors.teal[4], // gradients
+  ],
+};
 
 /**
  * {@linkcode Button} renders a button.
@@ -182,6 +190,21 @@ const colors: Record<Colors, string> = constructCSSObject(
   `,
 )
 class Button extends GlobalStyle {
+  private __colorSC = new StyleController(this, () => {
+    const color = this.nextColor();
+    if (color in colorDetails) {
+      const [fg, bg, gd] = colorDetails[color];
+      return joinRules({
+        ":host": [
+          [`${cssScope}--color`, `var(${fg})`],
+          [`${cssScope}--background`, `var(${bg})`],
+          [`${cssScope}--gradients`, `var(${gd})`],
+        ],
+      });
+    }
+    return null;
+  });
+
   /**
    * If true, remove gradient, modal animation, focus scale.
    */
@@ -217,7 +240,7 @@ class Button extends GlobalStyle {
    * The primary color.
    */
   @property({ reflect: true })
-  color: "none" | keyof typeof colors = "black";
+  color: Colors = "black";
 
   /**
    * Content text.
@@ -231,7 +254,6 @@ class Button extends GlobalStyle {
   protected _root: HTMLElement;
 
   protected render(): TemplateResult<1> {
-    const color = this.nextColor();
     return html`
       <div
         part="root"
@@ -239,7 +261,6 @@ class Button extends GlobalStyle {
       >
         ${this.content || htmlSlot()}
         <span part="modal-root"></span>
-        ${htmlStyle(colors[color])}
       </div>
     `;
   }
@@ -287,7 +308,7 @@ class Button extends GlobalStyle {
     modal.addEventListener("animationend", () => modal.remove(), { once: true });
   }
 
-  nextColor(): Colors | "none" {
+  nextColor(): Colors {
     return this.color;
   }
 }

package/src/components/carousel.ts

@@ -193,7 +193,8 @@ class Carousel extends GlobalStyle {
   normalizeIndex(i: number): number {
     if (i < 0) {
       return 0;
-    } else if (i > this.children.length - 3) {
+    }
+    if (i > this.children.length - 3) {
       return this.children.length - 3;
     }
     return i;

package/src/components/input.ts

@@ -1,10 +1,11 @@
-import { attr, tokenList, godown, part, styles, htmlSlot } from "@godown/element";
+import { attr, godown, part, styles, htmlSlot, StyleController } from "@godown/element";
 import iconEyeSlashFill from "@godown/f7-icon/icons/eye-slash-fill.js";
 import { type TemplateResult, css, html, nothing } from "lit";
 import { property } from "lit/decorators.js";
 
 import { cssGlobalVars } from "../core/global-style.js";
 import { SuperInput } from "../core/super-input.js";
+import { OutlineBuilder } from "../core/outline.js";
 
 const protoName = "input";
 
@@ -23,9 +24,8 @@ const protoName = "input";
     display: block;
   }
 
-  :host(:focus-within),
-  .outline {
-    ${cssGlobalVars.input}-outline-color: var(${cssGlobalVars.active});
+  :host(:focus-within) {
+    ${cssGlobalVars.outlineColor}: var(${cssGlobalVars.active});
   }
 `)
 class Input extends SuperInput {
@@ -42,12 +42,19 @@ class Input extends SuperInput {
   @part("input")
   protected _input: HTMLInputElement;
 
+  private __outlineSC = new StyleController(
+    this,
+    () =>
+      new OutlineBuilder({ outlineType: this.outlineType }).css +
+      (this.variant === "outline" ? `:host{${cssGlobalVars.outlineColor}: var(${cssGlobalVars.active})}` : ""),
+  );
+
   protected render(): TemplateResult<1> {
     return html`
       <div
         part="root"
         ${attr(this.observedRecord)}
-        class="${tokenList("input-field", this.variant)}"
+        class="input-field"
       >
         ${[
           this._renderPrefix(),

package/src/components/range.ts

@@ -1,4 +1,15 @@
-import { attr, tokenList, godown, isNullable, joinProperties, loop, part, styles, Ranger, omit } from "@godown/element";
+import {
+  attr,
+  tokenList,
+  godown,
+  isNullable,
+  joinDeclarations,
+  loop,
+  part,
+  styles,
+  Ranger,
+  omit,
+} from "@godown/element";
 import { type TemplateResult, css, html } from "lit";
 import { property, queryAll, state } from "lit/decorators.js";
 
@@ -209,7 +220,7 @@ class Range<V extends RangeValue = RangeValue> extends SuperInput<RangeValue> {
         part="root"
         ${attr(this.observedRecord)}
         @mousedown="${this.disabled ? null : this._handleMousedownRoot}"
-        style="${joinProperties([
+        style="${joinDeclarations([
           ["--from", `${((from - this.min) / gap) * 100}%`],
           ["--to", `${((to - this.min) / gap) * 100}%`],
           ...rangeValue.map(
@@ -236,7 +247,7 @@ class Range<V extends RangeValue = RangeValue> extends SuperInput<RangeValue> {
         @mousedown="${disabled ? null : this.createMouseDown(index)}"
         @focus="${disabled ? null : () => this.focusHandle(index)}"
         @blur="${disabled ? null : this.blurHandle}"
-        style="${joinProperties({
+        style="${joinDeclarations({
           "z-index": this.__focusStack.indexOf(index) + 1,
           "--handle": `var(--${end ? "to" : `handle-${index}`})`,
         })}"

package/src/components/select.ts

@@ -220,6 +220,7 @@ class Select extends Input {
 
   select(value: string, text?: string): 0 | 1 {
     text ||= value;
+    text = text.trim();
     let operation: 0 | 1 = 0;
     if (this.multiple) {
       const i = this.__store.findIndex((s) => s.value === value);

package/src/components/split.ts

@@ -1,9 +1,10 @@
-import { type HandlerEvent, attr, tokenList, godown, styles, loop, omit } from "@godown/element";
+import { type HandlerEvent, attr, tokenList, godown, styles, loop, omit, StyleController } from "@godown/element";
 import { type TemplateResult, css, html } from "lit";
 import { property, state } from "lit/decorators.js";
 
 import { cssGlobalVars, scopePrefix } from "../core/global-style.js";
 import { SuperInput } from "../core/super-input.js";
+import { OutlineBuilder } from "../core/outline.js";
 
 const protoName = "split";
 const cssScope = scopePrefix(protoName);
@@ -61,7 +62,7 @@ const cssScope = scopePrefix(protoName);
 
   .focus,
   [part="input-box"]:active {
-    ${cssGlobalVars.input}-outline-color: var(${cssGlobalVars.active});
+    ${cssGlobalVars.outlineColor}: var(${cssGlobalVars.active});
   }
 `)
 class Split extends SuperInput {
@@ -83,6 +84,15 @@ class Split extends SuperInput {
   @state()
   currentValue: (string | void)[] = [];
 
+  private __outlineSC = new StyleController(
+    this,
+    () =>
+      new OutlineBuilder({
+        selector: "[part=input-box]",
+        outlineType: this.outlineType,
+      }).css,
+  );
+
   get observedRecord(): Record<string, any> {
     return omit(super.observedRecord, "outline-type");
   }

package/src/components/tabs.ts

@@ -1,4 +1,4 @@
-import { attr, godown, htmlSlot, styles, tokenList } from "@godown/element";
+import { attr, godown, htmlSlot, StyleController, styles, tokenList } from "@godown/element";
 import { cssGlobalVars, GlobalStyle, scopePrefix } from "../core/global-style.js";
 import { css, html, type TemplateResult } from "lit";
 import { property, queryAll } from "lit/decorators.js";
@@ -35,75 +35,67 @@ const mouseEnterAddedToken = "hover";
  * @category display
  */
 @godown(protoName)
-@styles(
-  new OutlineBuilder({
-    width: `${cssScope}--outline-width`,
-    color: `${cssScope}--outline-color`,
-  }).css,
-  css`
-    :host {
-      ${cssScope}--indicator-background: var(${cssGlobalVars._colors.darkgray[7]});
-      ${cssScope}--outline-color: var(${cssGlobalVars.passive});
-      ${cssScope}--outline-width: 0.075em;
-      ${cssScope}--space: 0.25em;
-      border-radius: var(${cssGlobalVars.borderRadius});
-      transition: 0.2s ease-in-out;
-      width: fit-content;
-      display: flex;
-      cursor: default;
-    }
+@styles(css`
+  :host {
+    ${cssScope}--indicator-background: var(${cssGlobalVars._colors.darkgray[7]});
+    ${cssScope}--space: 0.25em;
+    border-radius: var(${cssGlobalVars.radius});
+    transition: 0.2s ease-in-out;
+    width: fit-content;
+    display: flex;
+    cursor: default;
+  }
 
-    [part="root"] {
-      position: relative;
-      z-index: 1;
-      display: flex;
-      flex-direction: inherit;
-      overflow-x: clip;
-      border-radius: inherit;
-      transition: inherit;
-      transition-property: width, transform, opacity;
-      padding: var(${cssScope}--space);
-      gap: var(${cssScope}--space);
-    }
+  [part="root"] {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    flex-direction: inherit;
+    overflow-x: clip;
+    border-radius: inherit;
+    transition: inherit;
+    transition-property: width, transform, opacity;
+    padding: var(${cssScope}--space);
+    gap: var(${cssScope}--space);
+  }
 
-    [useslot] [part~="item"] {
-      padding: 0;
-    }
+  [useslot] [part~="item"] {
+    padding: 0;
+  }
 
-    [part~="item"] {
-      width: 100%;
-      display: block;
-      padding: 0 0.4em;
-      position: relative;
-      white-space: nowrap;
-      transition: inherit;
-      border-radius: inherit;
-      transition-property: inherit;
-    }
+  [part~="item"] {
+    width: 100%;
+    display: block;
+    padding: 0 0.4em;
+    position: relative;
+    white-space: nowrap;
+    transition: inherit;
+    border-radius: inherit;
+    transition-property: inherit;
+  }
 
-    [part="indicator"] {
-      width: 100%;
-      height: 100%;
-      inset: 0;
-      opacity: 0;
-      z-index: -1;
-      position: absolute;
-      transition: inherit;
-      border-radius: inherit;
-      transition-property: inherit;
-      background: var(${cssScope}--indicator-background);
-    }
+  [part="indicator"] {
+    width: 100%;
+    height: 100%;
+    inset: 0;
+    opacity: 0;
+    z-index: -1;
+    position: absolute;
+    transition: inherit;
+    border-radius: inherit;
+    transition-property: inherit;
+    background: var(${cssScope}--indicator-background);
+  }
 
-    [part~="selected"] {
-      background: var(${cssScope}--indicator-background);
-    }
+  [part~="selected"] {
+    background: var(${cssScope}--indicator-background);
+  }
 
-    [part~="selected"] [part="indicator"],
-    [part~="hover"] [part="indicator"] {
-      opacity: 1;
-    }
-  `,
-)
+  [part~="selected"] [part="indicator"],
+  [part~="hover"] [part="indicator"] {
+    opacity: 1;
+  }
+`)
 class Tabs extends GlobalStyle {
   @property({ attribute: "outline-type" })
   outlineType: OutlineType = "border";
@@ -134,6 +126,8 @@ class Tabs extends GlobalStyle {
   @queryAll("[part=indicator]")
   protected _indicators: HTMLCollectionOf<HTMLDivElement>;
 
+  private __outlineSC = new StyleController(this, () => new OutlineBuilder({ outlineType: this.outlineType }).css);
+
   render(): TemplateResult<1> {
     return html`
       <ul