godown 3.10.1 → 3.11.0

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

@@ -1,4 +1,4 @@
-import { attr, godown, htmlSlot, joinRules, part, StyleController, styles } from "@godown/element";
+import { attr, godown, htmlSlot, queryPart, styles } from "@godown/element";
 import { type TemplateResult, css, html } from "lit";
 import { property } from "lit/decorators.js";
 
@@ -7,92 +7,11 @@ import { GlobalStyle, cssGlobalVars, scopePrefix } from "../../internal/global-s
 const protoName = "button";
 const cssScope = scopePrefix(protoName);
 
-const whiteFont = cssGlobalVars.white;
-const blackFont = cssGlobalVars.black;
-
-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.
  *
  * Create modal animation upon clicking.
  *
- * Available colors (background): none, black, gray, white, blue, green, red, orange, pink, purple, yellow, teal.
- *
- * Default color is `black`.
- *
- * Set the color to `none` to prevent applying styles.
- *
  * @slot - The content of the button.
  * @category input
  */
@@ -112,13 +31,6 @@ const colorDetails = {
       filter: brightness(0.85);
     }
 
-    :host([ghost]) {
-      ${cssScope}--modal-background: var(${cssScope}--ghost-color);
-      box-shadow: inset 0px 0px 0px var(${cssScope}--ghost-width) var(${cssScope}--ghost-color);
-      color: var(${cssScope}--ghost-color);
-      background: transparent;
-    }
-
     :host([plain]) {
       ${cssScope}--gradients: unset;
       ${cssScope}--focus-scale: unset;
@@ -126,21 +38,14 @@ const colorDetails = {
   `,
   css`
     :host {
-      ${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;
+      ${cssScope}--modal-animation-duration: 1.5s;
       ${cssScope}--focus-scale: .97;
       ${cssScope}--deg: 45deg;
-      ${cssScope}--ghost-color:var(${cssScope}--background);
-      color: var(${cssScope}--color, inherit);
-      background: linear-gradient(
-        var(${cssScope}--deg),
-        var(${cssScope}--background),
-        var(${cssScope}--gradients, var(${cssScope}--background))
-      );
-      padding: var(${cssScope}--padding);
+      color: var(${cssGlobalVars.primaryForeground});
+      background: var(${cssGlobalVars.primaryBackground});
+      padding: 0.25em 0.75em;
+      border-width: var(${cssGlobalVars.ringWidth});
+      border-style: none;
       width: fit-content;
       display: block;
       overflow: hidden;
@@ -155,10 +60,7 @@ const colorDetails = {
 
     [part="root"] {
       position: relative;
-      transition: none;
       user-select: none;
-      border-radius: inherit;
-      transition-duration: inherit;
     }
 
     i {
@@ -190,21 +92,6 @@ const colorDetails = {
   `,
 )
 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,13 +104,6 @@ class Button extends GlobalStyle {
   @property({ type: Boolean, reflect: true })
   disabled = false;
 
-  /**
-   * Whether this element should be rendered as a "ghost" button.
-   * A ghost button is a button with a transparent background and a border.
-   */
-  @property({ type: Boolean, reflect: true })
-  ghost = false;
-
   /**
    * Whether this element is active or not.
    */
@@ -236,21 +116,15 @@ class Button extends GlobalStyle {
   @property({ type: Boolean, reflect: true })
   round = false;
 
-  /**
-   * The primary color.
-   */
-  @property({ reflect: true })
-  color: Colors = "black";
-
   /**
    * Content text.
    */
   @property()
   content: string;
 
-  @part("modal-root")
+  @queryPart("modal-root")
   protected _modalRoot: HTMLElement;
-  @part("root")
+  @queryPart("root")
   protected _root: HTMLElement;
 
   protected render(): TemplateResult<1> {
@@ -307,10 +181,6 @@ class Button extends GlobalStyle {
     this._modalRoot.appendChild(modal);
     modal.addEventListener("animationend", () => modal.remove(), { once: true });
   }
-
-  nextColor(): Colors {
-    return this.color;
-  }
 }
 
 export default Button;

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

@@ -1,9 +1,10 @@
-import { attr, godown, htmlSlot, 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 { GlobalStyle, cssGlobalVars, scopePrefix } from "../../internal/global-style.js";
 import type Layout from "../layout/component.js";
+import { RingBuilder, type RingType } from "../../internal/ring.js";
 
 const protoName = "card";
 const cssScope = scopePrefix(protoName);
@@ -22,9 +23,8 @@ const cssScope = scopePrefix(protoName);
 @godown(protoName)
 @styles(css`
   :host {
-    ${cssScope}--border-width: .075em;
-    ${cssScope}--border-color: var(${cssGlobalVars.passive});
     ${cssScope}--padding: .75em;
+    background: var(${cssGlobalVars.background});
     display: block;
     flex-shrink: 0;
   }
@@ -35,9 +35,6 @@ const cssScope = scopePrefix(protoName);
   }
 
   [part="root"] {
-    border-color: var(${cssScope}--border-color);
-    border-style: solid;
-    border-width: var(${cssScope}--border-width);
     border-radius: inherit;
   }
 
@@ -50,6 +47,14 @@ const cssScope = scopePrefix(protoName);
   }
 `)
 class Card extends GlobalStyle {
+  constructor() {
+    super();
+    new StyleController(this, () => new RingBuilder({ type: this.ringType }).css);
+  }
+
+  @property({ attribute: "ring-type" })
+  ringType: RingType = "border";
+
   /**
    * Whether to display the header.
    */

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

@@ -1,6 +1,6 @@
-import { attr, godown, htmlSlot, part, styles } from "@godown/element";
-import iconChevronLeft from "@godown/f7-icon/icons/chevron-left.js";
-import iconChevronRight from "@godown/f7-icon/icons/chevron-right.js";
+import { attr, godown, htmlSlot, queryPart, 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";
 
@@ -80,7 +80,7 @@ class Carousel extends GlobalStyle {
   @property({ type: Number })
   autoChange = 0;
 
-  @part("move-root")
+  @queryPart("move-root")
   protected _moveRoot: HTMLElement;
 
   intervalID: number;
@@ -101,14 +101,14 @@ class Carousel extends GlobalStyle {
           part="prev"
           @click="${this.prev}"
         >
-          ${iconChevronLeft()}
+          ${iconCaretLeft()}
         </i>
         <div part="move-root">${htmlSlot()}</div>
         <i
           part="next"
           @click="${this.next}"
         >
-          ${iconChevronRight()}
+          ${iconCaretRight()}
         </i>
       </div>
     `;

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

@@ -0,0 +1,115 @@
+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 "../../internal/global-style.js";
+import type { DirectionCorner } from "../../internal/direction.js";
+
+const protoName = "chip";
+const cssScope = scopePrefix(protoName);
+
+/**
+ * {@linkcode Chip} renders a chip.
+ *
+ * @slot - Chip content.
+ * @category display
+ */
+@godown(protoName)
+@styles(css`
+  :host {
+    ${cssScope}--offset: 0%;
+    ${cssScope}--offset-x: var(${cssScope}--offset);
+    ${cssScope}--offset-y: var(${cssScope}--offset);
+  }
+
+  :host,
+  :host([contents]) [part="root"] {
+    display: inline-block;
+  }
+
+  [part="root"] {
+    position: relative;
+  }
+
+  [part="chip"] {
+    position: absolute;
+    font-size: 75%;
+    padding: 0 0.5em;
+    user-select: none;
+    border-radius: calc(infinity * 1px);
+    transform: translate(-50%, -50%);
+    color: var(${cssGlobalVars.primaryForeground});
+    background: var(${cssGlobalVars.primaryBackground});
+  }
+
+  [part="chip"]:empty {
+    width: 0.5em;
+    height: 0.5em;
+    font-size: 100%;
+    padding: 0;
+    border-radius: 50%;
+  }
+
+  [position^="top"] [part="chip"] {
+    top: calc(0% + var(${cssScope}--offset-y));
+  }
+
+  [position$="right"] [part="chip"] {
+    left: calc(100% - var(${cssScope}--offset-x));
+  }
+
+  [position^="bottom"] [part="chip"] {
+    top: calc(100% - var(${cssScope}--offset-y));
+  }
+
+  [position$="left"] [part="chip"] {
+    left: calc(0% + var(${cssScope}--offset-x));
+  }
+`)
+class Chip extends GlobalStyle {
+  /**
+   * The position of the chip relative to its parent element.
+   * Possible values are `"top-left"`, `"top-right"`, `"bottom-left"`, and `"bottom-right"`.
+   */
+  @property()
+  position: DirectionCorner = "top-right";
+
+  @property({ type: Number })
+  value = 0;
+
+  /**
+   * If `true`, render a dot chip.
+   */
+  @property({ type: Boolean })
+  dot = false;
+
+  /**
+   * The maximum value that can be displayed in the chip
+   * Values greater than this will be displayed as `max+` by default.
+   */
+  @property({ type: Number })
+  max = 99;
+
+  formatValue(value: number): string {
+    return value > this.max ? this.max + "+" : value + "";
+  }
+
+  render(): TemplateResult<1> {
+    return html`
+      <div
+        part="root"
+        ${attr(this.observedRecord)}
+      >
+        ${htmlSlot()}
+        ${this.value || this.dot
+          ? html`
+              <div part="chip">${this.dot ? "" : this.formatValue(this.value)}</div>
+            `
+          : ""}
+      </div>
+    `;
+  }
+}
+
+export default Chip;
+export { Chip };

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

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

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

@@ -1,5 +1,5 @@
 import { attr, godown, htmlSlot, styles } from "@godown/element";
-import svgCaretDown from "@godown/f7-icon/icons/chevron-down.js";
+import svgCaretDown from "../../internal/icons/caret-down.js";
 import { type TemplateResult, css, html } from "lit";
 import { property } from "lit/decorators.js";
 

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

@@ -1,4 +1,4 @@
-import { attr, godown, styles } from "@godown/element";
+import { godown, styles } from "@godown/element";
 import { type TemplateResult, css, html } from "lit";
 import { property } from "lit/decorators.js";
 
@@ -25,18 +25,6 @@ const protoName = "divider";
     width: 0.05em;
     height: 100%;
   }
-
-  :host([contents]) [part="root"] {
-    width: 100%;
-    height: 0.05em;
-    margin: auto;
-    display: block;
-    background: currentColor;
-  }
-
-  [part="root"] {
-    display: contents;
-  }
 `)
 class Divider extends GlobalStyle {
   /**
@@ -47,10 +35,7 @@ class Divider extends GlobalStyle {
 
   protected render(): TemplateResult<1> {
     return html`
-      <div
-        part="root"
-        ${attr(this.observedRecord)}
-      ></div>
+      <div part="root"></div>
     `;
   }
 }

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

@@ -1,8 +1,8 @@
-import { attr, godown, htmlSlot, styles } from "@godown/element";
+import { godown, htmlSlot, styles, tokenList } from "@godown/element";
 import { type TemplateResult, css, html, nothing } from "lit";
 import { property } from "lit/decorators.js";
 
-import { GlobalStyle } from "../../internal/global-style.js";
+import Link from "../link/component.js";
 
 const protoName = "heading";
 
@@ -21,22 +21,19 @@ const protoName = "heading";
     text-align: start;
   }
 
-  [part="anchor"] {
+  [part~="anchor"] {
     position: absolute;
     text-align: center;
     min-width: 1.25em;
     right: 100%;
   }
 
-  [side="left"] [part="anchor"] {
+  [part~="left"][part~="anchor"] {
     right: 100%;
   }
-  [side="right"] [part="anchor"] {
-    left: 100%;
-  }
 
-  a {
-    color: inherit;
+  [part~="right"][part~="anchor"] {
+    left: 100%;
   }
 
   h1,
@@ -45,13 +42,12 @@ const protoName = "heading";
   h4,
   h5,
   h6 {
-    direction: ltr;
+    width: fit-content;
     font-size: revert;
     position: relative;
-    width: fit-content;
   }
 `)
-class Heading extends GlobalStyle {
+class Heading extends Link {
   /**
    * The heading level.
    */
@@ -73,17 +69,17 @@ class Heading extends GlobalStyle {
   side: "left" | "right" = "left";
 
   protected render(): TemplateResult<1> {
+    const hrefValue = this.href || (this.id ? "#" + this.id : undefined);
     return html`
       <a
         part="root"
-        href="${this.id ? "#" + this.id : nothing}"
-        ${attr(this.observedRecord)}
+        href="${hrefValue || nothing}"
       >
         ${this.wrapHeading(
           htmlSlot(),
-          this.id
+          hrefValue
             ? html`
-                <i part="anchor">${this.anchor}</i>
+                <i part="${tokenList("anchor", this.side)}">${this.anchor}</i>
               `
             : "",
         )}