godown 3.8.3 → 3.10.0

package/src/skeleton.ts

@@ -1,13 +1 @@
-import Skeleton from "./components/skeleton.js";
-
-Skeleton.define();
-
-export default Skeleton;
-
-export * from "./components/skeleton.js";
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "godown-skeleton": Skeleton;
-  }
-}
+export { default } from "./web-components/skeleton/definition.js";

package/src/split.ts

@@ -1,13 +1 @@
-import Split from "./components/split.js";
-
-Split.define();
-
-export default Split;
-
-export * from "./components/split.js";
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "godown-split": Split;
-  }
-}
+export { default } from "./web-components/split/definition.js";

package/src/switch.ts

@@ -1,13 +1 @@
-import Switch from "./components/switch.js";
-
-Switch.define();
-
-export default Switch;
-
-export * from "./components/switch.js";
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "godown-switch": Switch;
-  }
-}
+export { default } from "./web-components/switch/definition.js";

package/src/tabs.ts

@@ -1,13 +1 @@
-import Tabs from "./components/tabs.js";
-
-Tabs.define();
-
-export default Tabs;
-
-export * from "./components/tabs.js";
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "godown-tabs": Tabs;
-  }
-}
+export { default } from "./web-components/tabs/definition.js";

package/src/text.ts

@@ -1,13 +1 @@
-import Text from "./components/text.js";
-
-Text.define();
-
-export default Text;
-
-export * from "./components/text.js";
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "godown-text": Text;
-  }
-}
+export { default } from "./web-components/text/definition.js";

package/src/time.ts

@@ -1,13 +1 @@
-import Time from "./components/time.js";
-
-Time.define();
-
-export default Time;
-
-export * from "./components/time.js";
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "godown-time": Time;
-  }
-}
+export { default } from "./web-components/time/definition.js";

package/src/tooltip.ts

@@ -1,13 +1 @@
-import Tooltip from "./components/tooltip.js";
-
-Tooltip.define();
-
-export default Tooltip;
-
-export * from "./components/tooltip.js";
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "godown-tooltip": Tooltip;
-  }
-}
+export { default } from "./web-components/tooltip/definition.js";

package/src/typewriter.ts

@@ -1,13 +1 @@
-import Typewriter from "./components/typewriter.js";
-
-Typewriter.define();
-
-export default Typewriter;
-
-export * from "./components/typewriter.js";
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "godown-typewriter": Typewriter;
-  }
-}
+export { default } from "./web-components/typewriter/definition.js";

package/src/{components/alert.ts → web-components/alert/component.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";
@@ -10,35 +10,28 @@ import iconXmark from "@godown/f7-icon/icons/xmark.js";
 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 = "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/web-components/alert/definition.ts

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

package/src/{components/avatar.ts → web-components/avatar/component.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, cssGlobalVars } from "../core/global-style.js";
+import { GlobalStyle, cssGlobalVars } from "../../internal/global-style.js";
 
 const protoName = "avatar";
 

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

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

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

@@ -2,8 +2,8 @@ import { attr, 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 type { DirectionCorner } from "../core/direction.js";
+import { GlobalStyle, cssGlobalVars, scopePrefix } from "../../internal/global-style.js";
+import type { DirectionCorner } from "../../internal/direction.js";
 
 const protoName = "badge";
 const cssScope = scopePrefix(protoName);

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

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

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

@@ -2,7 +2,7 @@ import { attr, godown, htmlStyle, 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 defineName = "breath";
 const cssScope = scopePrefix(defineName);

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

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

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

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

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

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

@@ -2,8 +2,8 @@ import { attr, 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 type Layout from "../layout.js";
+import { GlobalStyle, cssGlobalVars, scopePrefix } from "../../internal/global-style.js";
+import type Layout from "../layout/component.js";
 
 const protoName = "card";
 const cssScope = scopePrefix(protoName);

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

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

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

@@ -4,7 +4,7 @@ import iconChevronRight from "@godown/f7-icon/icons/chevron-right.js";
 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 = "carousel";
 

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

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

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

@@ -3,8 +3,8 @@ import svgCaretDown from "@godown/f7-icon/icons/chevron-down.js";
 import { type TemplateResult, css, html } from "lit";
 import { property } from "lit/decorators.js";
 
-import { scopePrefix } from "../core/global-style.js";
-import { SuperOpenable } from "../core/super-openable.js";
+import { scopePrefix } from "../../internal/global-style.js";
+import { SuperOpenable } from "../../internal/super-openable.js";
 
 const protoName = "details";
 

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

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

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

@@ -2,8 +2,8 @@ import { type HandlerEvent, attr, godown, htmlSlot, styles } from "@godown/eleme
 import { type PropertyValues, type TemplateResult, css, html } from "lit";
 import { property, query } from "lit/decorators.js";
 
-import { scopePrefix } from "../core/global-style.js";
-import { SuperOpenable } from "../core/super-openable.js";
+import { scopePrefix } from "../../internal/global-style.js";
+import { SuperOpenable } from "../../internal/super-openable.js";
 
 const protoName = "dialog";
 const cssScope = scopePrefix(protoName);

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

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

package/src/{components/divider.ts → web-components/divider/component.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 { cssGlobalVars, GlobalStyle } from "../core/global-style.js";
+import { cssGlobalVars, GlobalStyle } from "../../internal/global-style.js";
 
 const protoName = "divider";
 

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

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