godown 3.10.1 → 3.11.1

package/src/internal/icons/caret-right.ts

@@ -0,0 +1,7 @@
+import { icon, type IconRenderer } from "@godown/element";
+
+const _default: IconRenderer = icon(
+  "0 0 256 256",
+)`<path fill="currentColor" d="m181.66 133.66l-80 80a8 8 0 0 1-11.32-11.32L164.69 128L90.34 53.66a8 8 0 0 1 11.32-11.32l80 80a8 8 0 0 1 0 11.32">`;
+
+export default _default;

package/src/internal/icons/eye-slash.ts

@@ -0,0 +1,7 @@
+import { icon, type IconRenderer } from "@godown/element";
+
+const _default: IconRenderer = icon(
+  "0 0 256 256",
+)`<path fill="currentColor" d="M53.92 34.62a8 8 0 1 0-11.84 10.76l19.24 21.17C25 88.84 9.38 123.2 8.69 124.76a8 8 0 0 0 0 6.5c.35.79 8.82 19.57 27.65 38.4C61.43 194.74 93.12 208 128 208a127.1 127.1 0 0 0 52.07-10.83l22 24.21a8 8 0 1 0 11.84-10.76Zm47.33 75.84l41.67 45.85a32 32 0 0 1-41.67-45.85M128 192c-30.78 0-57.67-11.19-79.93-33.25A133.2 133.2 0 0 1 25 128c4.69-8.79 19.66-33.39 47.35-49.38l18 19.75a48 48 0 0 0 63.66 70l14.73 16.2A112 112 0 0 1 128 192m6-95.43a8 8 0 0 1 3-15.72a48.16 48.16 0 0 1 38.77 42.64a8 8 0 0 1-7.22 8.71a6 6 0 0 1-.75 0a8 8 0 0 1-8-7.26A32.09 32.09 0 0 0 134 96.57m113.28 34.69c-.42.94-10.55 23.37-33.36 43.8a8 8 0 1 1-10.67-11.92a132.8 132.8 0 0 0 27.8-35.14a133.2 133.2 0 0 0-23.12-30.77C185.67 75.19 158.78 64 128 64a118.4 118.4 0 0 0-19.36 1.57A8 8 0 1 1 106 49.79A134 134 0 0 1 128 48c34.88 0 66.57 13.26 91.66 38.35c18.83 18.83 27.3 37.62 27.65 38.41a8 8 0 0 1 0 6.5Z">`;
+
+export default _default;

package/src/internal/ring.ts

@@ -0,0 +1,57 @@
+import { toVar } from "@godown/element";
+import { cssGlobalVars } from "./global-style.js";
+import { unsafeCSS, type CSSResult } from "lit";
+
+type OutlineOptions = {
+  width?: string | CSSResult;
+  color?: string | CSSResult;
+  selector?: string;
+  type?: RingType;
+};
+
+const outlineRing = ({ width, color, inset }) =>
+  `outline-style:solid;outline-color:${color};outline-width:${width};${inset ? `outline-offset:calc(-1 * ${width});` : ""}`;
+
+const borderRing = ({ width, color }) =>
+  `border-style:solid;border-color:${color};border-width:${width};border-style:solid;`;
+
+const shadowRing = ({ width, color, inset }) => `box-shadow:${inset ? "inset" : ""} 0 0 0 ${width} ${color};`;
+
+const ringMap = {
+  outline: (width, color) => outlineRing({ width, color, inset: false }),
+  "outline-inset": (width, color) => outlineRing({ width, color, inset: true }),
+  "box-shadow": (width, color) => shadowRing({ width, color, inset: false }),
+  shadow: (width, color) => shadowRing({ width, color, inset: false }),
+  "box-shadow-inset": (width, color) => shadowRing({ width, color, inset: true }),
+  "shadow-inset": (width, color) => shadowRing({ width, color, inset: true }),
+  border: (width, color) => borderRing({ width, color }),
+};
+
+/**
+ * The {@link RingBuilder} class is responsible for generating CSS styles for various types of outline/border/shadow.
+ */
+export class RingBuilder {
+  css: string;
+
+  constructor({
+    selector = ":host",
+    width = toVar(cssGlobalVars.ringWidth),
+    color = toVar(cssGlobalVars.ringColor),
+    type,
+  }: OutlineOptions = {}) {
+    if (type && type in ringMap) {
+      const style = ringMap[type](width, color);
+      this.css = `${selector}{${style}}`;
+    } else {
+      this.css = "";
+    }
+  }
+
+  get styleSheet(): CSSStyleSheet {
+    return unsafeCSS(this.css).styleSheet;
+  }
+}
+
+export type RingType = "outline" | "outline-inset" | "shadow" | "shadow-inset" | "border" | "none" | undefined;
+
+export const isNone = (type: RingType): boolean => !type || type === "none";

package/src/internal/super-input.ts

@@ -1,67 +1,16 @@
-import { type HandlerEvent, htmlSlot, omit, part, styles } from "@godown/element";
+import { type HandlerEvent, htmlSlot, omit, queryPart, styles } from "@godown/element";
 import { type TemplateResult, css, html } from "lit";
 import { property } from "lit/decorators.js";
 
-import { GlobalStyle, cssGlobalVars } from "./global-style.js";
-import type { OutlineType } from "./outline.js";
-
-const fieldStyle = css`
-  .input-field {
-    display: flex;
-    position: relative;
-    align-items: center;
-    border-radius: inherit;
-    height: inherit;
-  }
-
-  .input-field [part="input"] {
-    background: none;
-    height: 100%;
-    width: 100%;
-    color: inherit;
-    padding: var(${cssGlobalVars.input}-space);
-  }
-
-  .input-field [part="icon"] {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: var(${cssGlobalVars.input}-icon-color);
-  }
-
-  .input-field [part="prefix"],
-  .input-field [part="suffix"] {
-    height: 100%;
-    display: flex;
-  }
-
-  .input-field [part="suffix"] [part="icon"] {
-    padding-inline-end: var(${cssGlobalVars.input}-space);
-  }
-
-  .input-field [part="prefix"] [part="icon"] {
-    padding-inline-start: var(${cssGlobalVars.input}-space);
-  }
-`;
+import { GlobalStyle } from "./global-style.js";
+import type { RingType } from "./ring.js";
 
 const inputStyle = css`
-  :host {
-    ${cssGlobalVars.input}-width: 10em;
-    ${cssGlobalVars.input}-height: 1.6em;
-    ${cssGlobalVars.input}-space: 0.2em;
-    ${cssGlobalVars.input}-control: currentColor;
-    ${cssGlobalVars.input}-icon-color: var(${cssGlobalVars._colors.darkgray[4]});
-  }
-
   :host([disabled]) {
     cursor: not-allowed;
     filter: brightness(0.85);
   }
 
-  :host(:focus-within) {
-    ${cssGlobalVars.input}-icon-color: currentColor;
-  }
-
   input:disabled {
     cursor: inherit;
   }
@@ -72,14 +21,14 @@ const inputStyle = css`
   }
 `;
 
-@styles(fieldStyle, inputStyle)
+@styles(inputStyle)
 class SuperInput<V = string> extends GlobalStyle {
   autofocus = false;
   @property()
   autocomplete: string | boolean;
 
-  @property({ attribute: "outline-type" })
-  outlineType: OutlineType = "border";
+  @property({ attribute: "ring-type" })
+  ringType: RingType = "border";
 
   @property({ type: Boolean, reflect: true })
   disabled = false;
@@ -106,7 +55,7 @@ class SuperInput<V = string> extends GlobalStyle {
   @property()
   default: any;
 
-  @part("input")
+  @queryPart("input")
   protected _input: HTMLInputElement;
 
   /**
@@ -184,23 +133,13 @@ class SuperInput<V = string> extends GlobalStyle {
 
   protected _renderPrefix(): TemplateResult<1> {
     return html`
-      <label
-        for=${this.makeId}
-        part="prefix"
-      >
-        ${htmlSlot("prefix")}
-      </label>
+      <i part="prefix">${htmlSlot("prefix")}</i>
     `;
   }
 
   protected _renderSuffix(): TemplateResult<1> {
     return html`
-      <label
-        for=${this.makeId}
-        part="suffix"
-      >
-        ${htmlSlot("suffix")}
-      </label>
+      <i part="suffix">${htmlSlot("suffix")}</i>
     `;
   }
 }

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

@@ -1,91 +1,25 @@
-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";
-import iconLightbulb from "@godown/f7-icon/icons/lightbulb.js";
-import iconQuestionCircle from "@godown/f7-icon/icons/question-circle.js";
-import iconSlashCircle from "@godown/f7-icon/icons/slash-circle.js";
-import iconXmarkCircle from "@godown/f7-icon/icons/xmark-circle.js";
-import iconXmark from "@godown/f7-icon/icons/xmark.js";
+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 { cssGlobalVars, GlobalStyle } from "../../internal/global-style.js";
+import { RingBuilder, type RingType } from "../../internal/ring.js";
 
 const protoName = "alert";
-const cssScope = scopePrefix(protoName);
-
-const genDark = (key: string) => {
-  return [cssGlobalVars._colors[key][5], cssGlobalVars._colors[key][9]];
-};
-
-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: {
-    color: "teal",
-    icon: iconLightbulb,
-  },
-  success: {
-    color: "green",
-    icon: iconCheckAltCircle,
-  },
-  info: {
-    color: "blue",
-    icon: iconInfoCircle,
-  },
-  warning: {
-    color: "orange",
-    icon: iconExclamationCircle,
-  },
-  danger: {
-    color: "red",
-    icon: iconXmarkCircle,
-  },
-  error: {
-    color: "red",
-    icon: iconXmarkCircle,
-  },
-  help: {
-    color: "purple",
-    icon: iconQuestionCircle,
-  },
-  deprecated: {
-    color: "gray",
-    icon: iconSlashCircle,
-  },
-};
 
 /**
  * {@linkcode Alert} renders a alert.
  *
- * Color defaults to blue.
- *
  * @slot - Alert content.
  * @slot title - Alert title.
- * @slot icon - Alert icon.
- * @fires close - Fires when the alert is closed.
+ * @slot prefix - Alert prefix.
+ * @slot suffix - Alert suffix.
  * @category feedback
  */
 @godown(protoName)
 @styles(css`
   :host {
-    ${cssScope}--border-width: .075em;
-    ${cssScope}--blockquote-width: .2em;
-    ${cssScope}--blockquote-background: transparent;
-    ${cssScope}--gap: .5em;
+    background: var(${cssGlobalVars.background});
   }
 
   :host,
@@ -94,94 +28,25 @@ const calls = {
   }
 
   [part="root"] {
-    color: var(${cssScope}--color, currentColor);
+    padding: 0.75em;
     display: grid;
     align-items: center;
     grid-template-columns: auto 1fr auto;
     grid-template-rows: auto 1fr;
-    border-color: currentColor;
-    border-radius: inherit;
-    border-style: solid;
-    border-width: var(${cssScope}--border-width);
-    padding: var(${cssScope}--gap);
-    background: var(${cssScope}--background);
-  }
-
-  [variant="blockquote"] {
-    border-radius: 0;
-    border-width: 0;
-    border-left-width: var(${cssScope}--blockquote-width);
-    background: var(${cssScope}--blockquote-background);
-  }
-
-  [part~="icon"] {
-    display: grid;
-    align-items: center;
-    height: 2em;
-  }
-
-  .start svg {
-    margin-inline-end: var(${cssScope}--gap);
-  }
-
-  .end svg {
-    margin-inline-start: var(${cssScope}--gap);
-  }
-
-  svg {
-    width: 1.25em;
-    height: 1.25em;
   }
 
   [part="content"] {
-    grid-row: span 2 / span 2;
+    display: grid;
   }
 `)
 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.
-   */
-  @property()
-  call: "tip" | "success" | "info" | "warning" | "danger" | "error" | "help" | "deprecated";
-
-  /**
-   * The tone of the component.
-   * Overrides the color of the call.
-   */
-  @property()
-  color:
-    | "white"
-    | "black"
-    | "gray"
-    | "green"
-    | "teal"
-    | "blue"
-    | "red"
-    | "purple"
-    | "orange"
-    | "yellow"
-    | "pink"
-    | "none" = "blue";
+  constructor() {
+    super();
+    new StyleController(this, () => new RingBuilder({ type: this.ringType }).css);
+  }
 
-  /**
-   * Close delay, if 0, it will not be closed automatically.
-   */
-  @property({ type: Number })
-  autoclose = 0;
+  @property({ attribute: "ring-type" })
+  ringType: RingType = "border";
 
   /**
    * The title is bold and the icon height is the same as it.
@@ -195,66 +60,22 @@ class Alert extends GlobalStyle {
   @property()
   content: string;
 
-  /**
-   * Set true to hide the close button.
-   *
-   * The behavior may change due to the {@linkcode variant} property.
-   */
-  @property({ type: Boolean })
-  hideClose = false;
-
-  /**
-   * Alert variant, if set to `blockquote`, the alert will be rendered as a blockquote.
-   *
-   * If variant is `"blockquote"`, hide the close button.
-   */
-  @property()
-  variant: "blockquote" | "dark" = "dark";
-
   protected render(): TemplateResult<1> {
-    const icon = this.call ? calls[this.call].icon() : htmlSlot("icon");
     return html`
       <div
         part="root"
         ${attr(this.observedRecord)}
       >
-        <div
-          part="icon"
-          class="start"
-        >
-          ${icon}
-        </div>
+        <div>${htmlSlot("prefix")}</div>
         <div part="content">
           <strong part="title">${this.title || htmlSlot("title")}</strong>
           ${this.content || htmlSlot()}
         </div>
-        ${this.hideClose || this.variant === "blockquote"
-          ? ""
-          : html`
-              <div
-                part="icon close"
-                class="end"
-                tabindex="0"
-                @click="${this.close}"
-              >
-                ${iconXmark()}
-              </div>
-            `}
+        <div>${htmlSlot("suffix")}</div>
       </div>
     `;
   }
 
-  close(): void {
-    this.remove();
-    this.dispatchCustomEvent("close", undefined, { bubbles: true });
-  }
-
-  protected firstUpdated(): void {
-    if (this.autoclose) {
-      this.timeouts.add(setTimeout(() => this.close(), this.autoclose));
-    }
-  }
-
   static alert(root: HTMLElement, option: Partial<Alert>): Alert {
     const ai = new this();
     Object.assign(ai, option);

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

@@ -1,12 +1,9 @@
-import { attr, godown, htmlSlot, styles } from "@godown/element";
-import { type TemplateResult, css, html } from "lit";
-import { property } from "lit/decorators.js";
+import { godown, styles } from "@godown/element";
 
-import { GlobalStyle, cssGlobalVars, scopePrefix } from "../../internal/global-style.js";
-import type { DirectionCorner } from "../../internal/direction.js";
+import Button from "../button/component.js";
+import { css } from "lit";
 
 const protoName = "badge";
-const cssScope = scopePrefix(protoName);
 
 /**
  * {@linkcode Badge} renders a badge.
@@ -17,98 +14,16 @@ const cssScope = scopePrefix(protoName);
 @godown(protoName)
 @styles(css`
   :host {
-    ${cssScope}--background: var(${cssGlobalVars.active});
-    ${cssScope}--offset: 0%;
-    ${cssScope}--offset-x: var(${cssScope}--offset);
-    ${cssScope}--offset-y: var(${cssScope}--offset);
-  }
-
-  :host,
-  :host([contents]) [part="root"] {
-    display: inline-block;
+    font-size: 0.75em;
   }
 
   [part="root"] {
-    position: relative;
-  }
-
-  [part="badge"] {
-    position: absolute;
-    font-size: 75%;
     padding: 0 0.5em;
-    user-select: none;
-    border-radius: calc(infinity * 1px);
-    transform: translate(-50%, -50%);
-    background: var(${cssScope}--background);
-  }
-
-  [part="badge"]:empty {
-    width: 0.5em;
-    height: 0.5em;
-    font-size: 100%;
-    padding: 0;
-    border-radius: 50%;
-  }
-
-  [position^="top"] [part="badge"] {
-    top: calc(0% + var(${cssScope}--offset-y));
-  }
-
-  [position$="right"] [part="badge"] {
-    left: calc(100% - var(${cssScope}--offset-x));
-  }
-
-  [position^="bottom"] [part="badge"] {
-    top: calc(100% - var(${cssScope}--offset-y));
-  }
-
-  [position$="left"] [part="badge"] {
-    left: calc(0% + var(${cssScope}--offset-x));
   }
 `)
-class Badge extends GlobalStyle {
-  /**
-   * The position of the badge 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 badge.
-   */
-  @property({ type: Boolean })
-  dot = false;
-
-  /**
-   * The maximum value that can be displayed in the badge
-   * 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="badge">${this.dot ? "" : this.formatValue(this.value)}</div>
-            `
-          : ""}
-      </div>
-    `;
-  }
+class Badge extends Button {
+  plain: never = true as never;
+  round: Button["round"] = true;
 }
 
 export default Badge;

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

@@ -1,5 +1,5 @@
 import { attr, godown, htmlStyle, styles } from "@godown/element";
-import { type TemplateResult, css, html } from "lit";
+import { type TemplateResult, css, html, unsafeCSS } from "lit";
 import { property } from "lit/decorators.js";
 
 import { GlobalStyle, cssGlobalVars, scopePrefix } from "../../internal/global-style.js";
@@ -29,12 +29,12 @@ const splitTextRegexp = /[\s,]+/;
   css`
     :host {
       ${cssScope}--deg: 60deg;
-      ${cssScope}--1-1: var(${cssGlobalVars._colors.red[5]});
-      ${cssScope}--1-2: var(${cssGlobalVars._colors.yellow[5]});
-      ${cssScope}--2-1: var(${cssGlobalVars._colors.green[5]});
-      ${cssScope}--2-2: var(${cssGlobalVars._colors.purple[5]});
-      ${cssScope}--3-1: var(${cssGlobalVars._colors.blue[5]});
-      ${cssScope}--3-2: var(${cssGlobalVars._colors.pink[5]});
+      ${cssScope}--1-1: hsl(0 70% 55%);
+      ${cssScope}--1-2: hsl(30 90% 60%);
+      ${cssScope}--2-1: hsl(130 70% 50%);
+      ${cssScope}--2-2: hsl(180 60% 40%);
+      ${cssScope}--3-1: hsl(270 80% 55%);
+      ${cssScope}--3-2: hsl(210 90% 50%);
       ${cssScope}--1: linear-gradient(var(${cssScope}--deg), var(${cssScope}--1-1), var(${cssScope}--1-2));
       ${cssScope}--2: linear-gradient(var(${cssScope}--deg), var(${cssScope}--2-1), var(${cssScope}--2-2));
       ${cssScope}--3: linear-gradient(var(${cssScope}--deg), var(${cssScope}--3-1), var(${cssScope}--3-2));
@@ -89,7 +89,7 @@ const splitTextRegexp = /[\s,]+/;
     .nocolor {
       position: absolute;
       top: 0;
-      background: var(${cssGlobalVars.clipBackground});
+      background: var(${cssGlobalVars.backgroundClip});
     }
   `,
 )