godown 3.8.3 → 3.10.0

package/src/{components/dragbox.ts → web-components/dragbox/component.ts}

@@ -2,7 +2,7 @@ import { type EventListenerFunc, attr, godown, htmlSlot, styles } from "@godown/
 import { type TemplateResult, css, html } from "lit";
 import { property } from "lit/decorators.js";
 
-import { GlobalStyle } from "../core/global-style.js";
+import { GlobalStyle } from "../../internal/global-style.js";
 
 const protoName = "dragbox";
 

package/src/web-components/dragbox/definition.ts

@@ -0,0 +1,11 @@
+import Dragbox from "./component.js";
+
+Dragbox.define();
+
+export default Dragbox;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "godown-dragbox": Dragbox;
+  }
+}

package/src/{components/flex.ts → web-components/flex/component.ts}

@@ -2,7 +2,7 @@ import { attr, godown, htmlSlot, htmlStyle, joinRules, styles } from "@godown/el
 import { type TemplateResult, css, html } from "lit";
 import { property } from "lit/decorators.js";
 
-import { GlobalStyle } from "../core/global-style.js";
+import { GlobalStyle } from "../../internal/global-style.js";
 
 const protoName = "flex";
 

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

@@ -0,0 +1,11 @@
+import Flex from "./component.js";
+
+Flex.define();
+
+export default Flex;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "godown-flex": Flex;
+  }
+}

package/src/{components/form.ts → web-components/form/component.ts}

@@ -2,7 +2,7 @@ import { godown, htmlSlot, styles } from "@godown/element";
 import { type TemplateResult, css } from "lit";
 import { property } from "lit/decorators.js";
 
-import { GlobalStyle } from "../core/global-style.js";
+import { GlobalStyle } from "../../internal/global-style.js";
 
 const protoName = "form";
 

package/src/web-components/form/definition.ts

@@ -0,0 +1,11 @@
+import Form from "./component.js";
+
+Form.define();
+
+export default Form;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "godown-form": Form;
+  }
+}

package/src/{components/grid.ts → web-components/grid/component.ts}

@@ -2,7 +2,7 @@ import { attr, godown, htmlSlot, htmlStyle, isNumerical, joinRules, styles } fro
 import { type TemplateResult, css, html } from "lit";
 import { property } from "lit/decorators.js";
 
-import { GlobalStyle } from "../core/global-style.js";
+import { GlobalStyle } from "../../internal/global-style.js";
 
 const toTemplate = (s: number | string) => (isNumerical(s) ? `repeat(${s},1fr)` : s);
 

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

@@ -0,0 +1,11 @@
+import Grid from "./component.js";
+
+Grid.define();
+
+export default Grid;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "godown-grid": Grid;
+  }
+}

package/src/{components/heading.ts → web-components/heading/component.ts}

@@ -2,7 +2,7 @@ import { attr, godown, htmlSlot, styles } from "@godown/element";
 import { type TemplateResult, css, html, nothing } from "lit";
 import { property } from "lit/decorators.js";
 
-import { GlobalStyle } from "../core/global-style.js";
+import { GlobalStyle } from "../../internal/global-style.js";
 
 const protoName = "heading";
 

package/src/web-components/heading/definition.ts

@@ -0,0 +1,11 @@
+import Heading from "./component.js";
+
+Heading.define();
+
+export default Heading;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "godown-heading": Heading;
+  }
+}

package/src/{components/input.ts → web-components/input/component.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 { cssGlobalVars } from "../../internal/global-style.js";
+import { SuperInput } from "../../internal/super-input.js";
+import { OutlineBuilder } from "../../internal/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/web-components/input/definition.ts

@@ -0,0 +1,11 @@
+import Input from "./component.js";
+
+Input.define();
+
+export default Input;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "godown-input": Input;
+  }
+}

package/src/{components/layout.ts → web-components/layout/component.ts}

@@ -2,7 +2,7 @@ import { attr, godown, htmlSlot, 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 { GlobalStyle } from "../../internal/global-style.js";
 
 const protoName = "layout";
 

package/src/web-components/layout/definition.ts

@@ -0,0 +1,11 @@
+import Layout from "./component.js";
+
+Layout.define();
+
+export default Layout;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "godown-layout": Layout;
+  }
+}

package/src/{components/link.ts → web-components/link/component.ts}

@@ -1,8 +1,8 @@
 import { godown } from "@godown/element";
 import { property } from "lit/decorators.js";
 
-import { SuperAnchor } from "../core/super-anchor.js";
-import Router from "./router.js";
+import { SuperAnchor } from "../../internal/super-anchor.js";
+import Router from "../router/component.js";
 
 const protoName = "link";
 

package/src/web-components/link/definition.ts

@@ -0,0 +1,11 @@
+import Link from "./component.js";
+
+Link.define();
+
+export default Link;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "godown-link": Link;
+  }
+}

package/src/{components/progress.ts → web-components/progress/component.ts}

@@ -2,7 +2,7 @@ import { attr, godown, isNullable, Ranger, styles } from "@godown/element";
 import { type TemplateResult, css, html } from "lit";
 import { property } from "lit/decorators.js";
 
-import { GlobalStyle, cssGlobalVars } from "../core/global-style.js";
+import { GlobalStyle, cssGlobalVars } from "../../internal/global-style.js";
 
 const protoName = "progress";
 

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

@@ -0,0 +1,11 @@
+import Progress from "./component.js";
+
+Progress.define();
+
+export default Progress;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "godown-progress": Progress;
+  }
+}

package/src/{components/range.ts → web-components/range/component.ts}

@@ -1,9 +1,20 @@
-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";
 
-import { cssGlobalVars, scopePrefix } from "../core/global-style.js";
-import { SuperInput } from "../core/super-input.js";
+import { cssGlobalVars, scopePrefix } from "../../internal/global-style.js";
+import { SuperInput } from "../../internal/super-input.js";
 
 const protoName = "range";
 const cssScope = scopePrefix(protoName);
@@ -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/web-components/range/definition.ts

@@ -0,0 +1,11 @@
+import Range from "./component.js";
+
+Range.define();
+
+export default Range;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "godown-range": Range;
+  }
+}

package/src/{components/rotate.ts → web-components/rotate/component.ts}

@@ -1,7 +1,7 @@
 import { godown, htmlSlot, part, styles } from "@godown/element";
 import { type TemplateResult, css, html } from "lit";
 
-import { GlobalStyle, scopePrefix } from "../core/global-style.js";
+import { GlobalStyle, scopePrefix } from "../../internal/global-style.js";
 
 const protoName = "rotate";
 const cssScope = scopePrefix(protoName);

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

@@ -0,0 +1,11 @@
+import Rotate from "./component.js";
+
+Rotate.define();
+
+export default Rotate;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "godown-rotate": Rotate;
+  }
+}

package/src/{components/router.ts → web-components/router/component.ts}

@@ -2,7 +2,7 @@ import { RouteTree, godown, htmlSlot, omit, styles } from "@godown/element";
 import { type PropertyValueMap, type TemplateResult, css } from "lit";
 import { property, state } from "lit/decorators.js";
 
-import { GlobalStyle } from "../core/global-style.js";
+import { GlobalStyle } from "../../internal/global-style.js";
 
 interface RouteState {
   pathname: string;

package/src/web-components/router/definition.ts

@@ -0,0 +1,11 @@
+import Router from "./component.js";
+
+Router.define();
+
+export default Router;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "godown-router": Router;
+  }
+}

package/src/{components/select.ts → web-components/select/component.ts}

@@ -3,9 +3,9 @@ import svgCaretDown from "@godown/f7-icon/icons/chevron-down.js";
 import { type TemplateResult, css, html, nothing } from "lit";
 import { property, state } from "lit/decorators.js";
 
-import Input from "./input.js";
-import { cssGlobalVars } from "../core/global-style.js";
-import { type DirectionCardinalY, directionOutsetPlace } from "../core/direction.js";
+import Input from "../input/component.js";
+import { cssGlobalVars } from "../../internal/global-style.js";
+import { type DirectionCardinalY, directionOutsetPlace } from "../../internal/direction.js";
 
 function contain(a: string, b: string): boolean {
   return a && b && a.toLowerCase().includes(b.toLowerCase());
@@ -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/web-components/select/definition.ts

@@ -0,0 +1,11 @@
+import Select from "./component.js";
+
+Select.define();
+
+export default Select;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "g-select": Select;
+  }
+}

package/src/{components/skeleton.ts → web-components/skeleton/component.ts}

@@ -3,7 +3,7 @@ import iconPhoto from "@godown/f7-icon/icons/photo.js";
 import { type TemplateResult, css, html } from "lit";
 import { property, state } from "lit/decorators.js";
 
-import { GlobalStyle, cssGlobalVars, scopePrefix } from "../core/global-style.js";
+import { GlobalStyle, cssGlobalVars, scopePrefix } from "../../internal/global-style.js";
 
 const protoName = "skeleton";
 const cssScope = scopePrefix(protoName);

package/src/web-components/skeleton/definition.ts

@@ -0,0 +1,11 @@
+import Skeleton from "./component.js";
+
+Skeleton.define();
+
+export default Skeleton;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "godown-skeleton": Skeleton;
+  }
+}

package/src/{components/split.ts → web-components/split/component.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 { cssGlobalVars, scopePrefix } from "../../internal/global-style.js";
+import { SuperInput } from "../../internal/super-input.js";
+import { OutlineBuilder } from "../../internal/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/web-components/split/definition.ts

@@ -0,0 +1,11 @@
+import Split from "./component.js";
+
+Split.define();
+
+export default Split;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "godown-split": Split;
+  }
+}

package/src/{components/switch.ts → web-components/switch/component.ts}

@@ -2,8 +2,8 @@ import { attr, godown, omit, styles } from "@godown/element";
 import { type TemplateResult, css, html } from "lit";
 import { property } from "lit/decorators.js";
 
-import { cssGlobalVars, scopePrefix } from "../core/global-style.js";
-import { SuperInput } from "../core/super-input.js";
+import { cssGlobalVars, scopePrefix } from "../../internal/global-style.js";
+import { SuperInput } from "../../internal/super-input.js";
 
 const protoName = "switch";
 const cssScope = scopePrefix(protoName);

package/src/web-components/switch/definition.ts

@@ -0,0 +1,11 @@
+import Switch from "./component.js";
+
+Switch.define();
+
+export default Switch;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "godown-switch": Switch;
+  }
+}

package/src/{components/tabs.ts → web-components/tabs/component.ts}

@@ -1,8 +1,8 @@
-import { attr, godown, htmlSlot, styles, tokenList } from "@godown/element";
-import { cssGlobalVars, GlobalStyle, scopePrefix } from "../core/global-style.js";
+import { attr, godown, htmlSlot, StyleController, styles, tokenList } from "@godown/element";
+import { cssGlobalVars, GlobalStyle, scopePrefix } from "../../internal/global-style.js";
 import { css, html, type TemplateResult } from "lit";
 import { property, queryAll } from "lit/decorators.js";
-import { OutlineBuilder, type OutlineType } from "../core/outline.js";
+import { OutlineBuilder, type OutlineType } from "../../internal/outline.js";
 
 const protoName = "tabs";
 const cssScope = scopePrefix(protoName);
@@ -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

package/src/web-components/tabs/definition.ts

@@ -0,0 +1,11 @@
+import Tabs from "./component.js";
+
+Tabs.define();
+
+export default Tabs;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "godown-tabs": Tabs;
+  }
+}

package/src/{components/text.ts → web-components/text/component.ts}

@@ -2,7 +2,7 @@ import { attr, tokenList, godown, htmlSlot, styles } from "@godown/element";
 import { type TemplateResult, css, html } from "lit";
 import { property } from "lit/decorators.js";
 
-import { GlobalStyle, cssGlobalVars, scopePrefix } from "../core/global-style.js";
+import { GlobalStyle, cssGlobalVars, scopePrefix } from "../../internal/global-style.js";
 
 const protoName = "text";