godown 3.3.0 → 3.5.0

package/src/components/select.ts

@@ -4,6 +4,8 @@ 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";
 
 function contain(a: string, b: string): boolean {
   return a && b && a.toLowerCase().includes(b.toLowerCase());
@@ -46,29 +48,29 @@ const protoName = "select";
  * @category input
  */
 @godown(protoName)
-@styles(css`
-  [part="input"] {
-    text-overflow: ellipsis;
-  }
-
-  [part="content"] {
-    position: absolute;
-    width: 100%;
-    visibility: hidden;
-  }
+@styles(
+  directionOutsetPlace,
+  css`
+    :host(:focus-within),
+    .outline {
+      ${cssGlobalVars.input}-outline-color: var(${cssGlobalVars.active});
+    }
 
-  [direction="bottom"] [part="content"] {
-    top: 100%;
-  }
+    [part="input"] {
+      text-overflow: ellipsis;
+    }
 
-  [direction="top"] [part="content"] {
-    bottom: 100%;
-  }
+    [part="content"] {
+      position: absolute;
+      width: 100%;
+      visibility: hidden;
+    }
 
-  [visible] [part="content"] {
-    visibility: visible;
-  }
-`)
+    [visible] [part="content"] {
+      visibility: visible;
+    }
+  `,
+)
 class Select extends Input {
   // @ts-ignore
   value: string | string[];
@@ -83,7 +85,7 @@ class Select extends Input {
   protected _content: HTMLElement;
 
   @property()
-  direction: "top" | "bottom" | undefined;
+  direction: DirectionCardinalY;
 
   @property({ type: Boolean })
   multiple = false;
@@ -92,21 +94,25 @@ class Select extends Input {
   visible = false;
 
   @state()
-  protected autoDirection: "top" | "bottom" = "bottom";
+  protected autoDirection: DirectionCardinalY = "bottom";
 
   protected lastChecked: HTMLElement;
   protected defaultText: string;
   protected defaultChecked: HTMLElement[];
   private __store: { value: string; text: string }[] = [];
 
+  get observedRecord(): Record<string, any> {
+    return {
+      ...super.observedRecord,
+      direction: this.direction || this.autoDirection,
+    };
+  }
+
   protected render(): TemplateResult<1> {
     return html`
       <div
         part="root"
-        ${attr({
-          ...this.observedRecord,
-          direction: this.direction || this.autoDirection,
-        })}
+        ${attr(this.observedRecord)}
         class="input-field"
       >
         ${[
@@ -138,6 +144,7 @@ class Select extends Input {
             <label
               for="${this.makeId}"
               part="content"
+              direction-outset-place
             >
               ${htmlSlot()}
             </label>

package/src/components/split.ts

@@ -1,9 +1,9 @@
-import { type HandlerEvent, attr, tokenList, godown, styles, loop } from "@godown/element";
+import { type HandlerEvent, attr, tokenList, godown, styles, loop, omit } 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 { SuperInput } from "../core/super-input.js";
 
 const protoName = "split";
 const cssScope = scopePrefix(protoName);
@@ -24,7 +24,6 @@ const cssScope = scopePrefix(protoName);
 @godown(protoName)
 @styles(css`
   :host {
-    color: var(${cssGlobalVars.foreground});
     display: block;
     border-radius: 1px;
     width: fit-content;
@@ -50,9 +49,10 @@ const cssScope = scopePrefix(protoName);
     width: var(${cssScope}--size);
     height: var(${cssScope}--size);
     vertical-align: top;
-    text-align: center;
-    background-color: var(${cssGlobalVars.input}-background);
     border-radius: inherit;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
   }
 
   [part="input"] {
@@ -64,8 +64,9 @@ const cssScope = scopePrefix(protoName);
     z-index: -1;
   }
 
-  .focus {
-    box-shadow: var(${cssGlobalVars.input}-box-shadow);
+  .focus,
+  [part="input-box"]:active {
+    ${cssGlobalVars.input}-outline-color: var(${cssGlobalVars.active});
   }
 `)
 class Split extends SuperInput {
@@ -87,6 +88,10 @@ class Split extends SuperInput {
   @state()
   currentValue: (string | void)[] = [];
 
+  get observedRecord(): Record<string, any> {
+    return omit(super.observedRecord, "outline-type");
+  }
+
   protected render(): TemplateResult<1> {
     return html`
       <div
@@ -98,6 +103,7 @@ class Split extends SuperInput {
           (index: number) => html`
             <span
               part="input-box"
+              outline-type="${this.outlineType}"
               class="${tokenList({ focus: this.current === index })}"
               @click="${this.disabled ? null : () => this.focusAt(index)}"
             >

package/src/components/switch.ts

@@ -1,9 +1,9 @@
-import { attr, godown, styles } from "@godown/element";
+import { attr, godown, omit, styles } from "@godown/element";
 import { type TemplateResult, css, html } from "lit";
-import { property, query } from "lit/decorators.js";
+import { property } from "lit/decorators.js";
 
 import { cssGlobalVars, scopePrefix } from "../core/global-style.js";
-import SuperInput from "../core/super-input.js";
+import { SuperInput } from "../core/super-input.js";
 
 const protoName = "switch";
 const cssScope = scopePrefix(protoName);
@@ -11,9 +11,6 @@ const cssScope = scopePrefix(protoName);
 /**
  * {@linkcode Switch} renders a switch.
  *
- * The switch is rectangular by default,
- * set the round property to rounded switch.
- *
  * @fires change - Fires when the switch is switched.
  * @category input
  */
@@ -30,153 +27,124 @@ const cssScope = scopePrefix(protoName);
     ${cssScope}-width: 3em;
     ${cssScope}-height: calc(var(${cssScope}-width) / 2);
     ${cssScope}-handle-size: 1.25em;
-    ${cssScope}-handle-space: .125em;
+    ${cssScope}-handle-space: calc(var(${cssScope}-width) / 4 - var(${cssScope}-handle-size) / 2);
     ${cssScope}-transition: .2s ease-in-out;
-    background: var(${cssGlobalVars.input}-background);
+    border-radius: calc(var(${cssScope}-height) / 2);
+    background: var(${cssGlobalVars.passive});
     vertical-align: bottom;
-    border-radius: 0;
+    transition: 0.2s ease-in-out;
+    transition-property: background, left;
   }
 
-  [part="root"],
-  [part="handle"] {
-    transition: var(${cssScope}-transition);
+  :host([checked]) {
+    background: var(${cssGlobalVars.active});
   }
 
   [part="root"] {
-    border-radius: inherit;
-    position: relative;
     height: inherit;
-  }
-
-  [part="input"] {
-    opacity: 0;
-    width: 100%;
-    height: 100%;
-    appearance: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    transition: inherit;
   }
 
   [part="handle"] {
-    height: 100%;
-    display: inline-flex;
+    display: flex;
     align-items: center;
     justify-content: center;
     position: absolute;
+    transition: inherit;
     left: 0;
-    width: 50%;
+    top: 50%;
     pointer-events: none;
-    border-radius: inherit;
-  }
-
-  :host([round]) {
-    border-radius: calc(var(${cssScope}-height) / 2);
-    background: var(${cssGlobalVars.passive});
+    border-radius: 100%;
+    background: currentColor;
+    --size: var(${cssScope}-handle-size);
+    width: var(--size);
+    height: var(--size);
+    transform: translateY(-50%) translateX(var(${cssScope}-handle-space));
   }
 
   :host([checked]) [part="handle"] {
     left: 50%;
   }
 
-  .rect .true {
-    background: var(${cssGlobalVars.active});
-  }
-
-  .rect .false {
-    background: var(${cssGlobalVars.passive});
-  }
-
-  .round [part="handle"] {
-    --size: var(${cssScope}-handle-size);
-    border-radius: 100%;
-    background: var(--godown--input-control);
-    width: var(--size);
-    height: var(--size);
-    margin: var(${cssScope}-handle-space);
-  }
-
-  :host([checked]) .round {
-    background: var(${cssGlobalVars.active});
+  [part="input"] {
+    opacity: 0;
+    width: 100%;
+    height: 100%;
   }
 `)
-class Switch extends SuperInput {
+class Switch extends SuperInput<boolean> {
   /**
-   * Display rounded.
+   * @deprecated
    */
-  @property({ type: Boolean, reflect: true })
-  round = false;
+  round: boolean;
 
-  /**
-   * Whether this element is selected or not.
-   */
-  @property({ type: Boolean, reflect: true })
-  checked = false;
+  set checked(v: boolean) {
+    this.value = v;
+  }
 
-  /**
-   * Disable this element.
-   */
-  @property({ type: Boolean, reflect: true })
-  disabled = false;
+  get checked(): boolean {
+    return this.value;
+  }
 
   /**
    * Default checked state.
    */
-  @property()
-  default = "false";
+  @property({ type: Boolean })
+  default = false;
 
   /**
-   * Input value.
+   * The current value of the switch component. Reflects the "checked" attribute.
    */
-  @property()
-  value = "on";
+  @property({ type: Boolean, attribute: "checked", reflect: true })
+  value = false;
 
-  @query("input")
-  protected _input: HTMLInputElement;
+  get observedRecord(): Record<string, any> {
+    return omit(super.observedRecord, "outline-type");
+  }
 
   protected render(): TemplateResult<1> {
     return html`
       <div
         part="root"
         ${attr(this.observedRecord)}
-        class="${this.round ? "round" : "rect"}"
+        class="round"
       >
         <input
           part="input"
           type="checkbox"
           ?disabled="${this.disabled}"
-          ?checked="${this.checked}"
-          name="${this.name}"
+          ?checked="${this.value}"
           id="${this.makeId}"
           @change="${this._handleChange}"
         />
-        <span
-          part="handle"
-          class="${this.checked}"
-        ></span>
+        <span part="handle"></span>
       </div>
     `;
   }
 
   reset(): void {
-    this.checked = this.default === "true";
-    this._input.checked = this.checked;
-  }
-
-  connectedCallback(): void {
-    super.connectedCallback();
-    if (this.checked) {
-      this.default = "true";
-    }
-    if (this.default === "true") {
-      this.checked = true;
+    this.value = this.default;
+    this._input.checked = this.value;
+  }
+
+  protected _connectedInit(): void {
+    if (this.default) {
+      this.value = true;
+    } else {
+      if (this.value) {
+        this.value = true;
+        this.default = true;
+      }
     }
   }
 
   protected _handleChange(): void {
-    this.checked = this._input.checked;
-    this.dispatchEvent(new CustomEvent("change", { detail: this.checked, composed: true }));
-  }
-
-  namevalue(): [string, boolean] {
-    return [this.name, this.checked];
+    const { checked } = this._input;
+    this.value = checked;
+    this.dispatchCustomEvent("change", this.value);
   }
 }
 

package/src/components/time.ts

@@ -42,13 +42,13 @@ class Time extends GlobalStyle {
    * If there is a value, update every gap or timeout.
    */
   @property({ type: Number })
-  timeout: any;
+  timeout: number;
 
   /**
    * The number of milliseconds that change with each update.
    */
   @property({ type: Number })
-  gap: any;
+  gap: number;
 
   protected timeoutId: number;
 

package/src/components/tooltip.ts

@@ -3,7 +3,8 @@ import { type TemplateResult, css, html } from "lit";
 import { property } from "lit/decorators.js";
 
 import { scopePrefix } from "../core/global-style.js";
-import SuperOpenable, { type Direction8 } from "../core/super-openable.js";
+import { SuperOpenable } from "../core/super-openable.js";
+import { type DirectionCardinal, type DirectionCorner, directionOutsetPlace } from "../core/direction.js";
 
 const protoName = "tooltip";
 const cssScope = scopePrefix(protoName);
@@ -19,6 +20,7 @@ const cssScope = scopePrefix(protoName);
  */
 @godown(protoName)
 @styles(
+  directionOutsetPlace,
   css`
     :host {
       ${cssScope}--tip-background: inherit;
@@ -57,23 +59,6 @@ const cssScope = scopePrefix(protoName);
       pointer-events: none;
     }
   `,
-  css`
-    [direction^="top"] [part="tip"] {
-      bottom: 100%;
-    }
-
-    [direction^="bottom"] [part="tip"] {
-      top: 100%;
-    }
-
-    [direction$="right"] [part="tip"] {
-      left: 100%;
-    }
-
-    [direction$="left"] [part="tip"] {
-      right: 100%;
-    }
-  `,
 )
 class Tooltip extends SuperOpenable {
   /**
@@ -86,7 +71,7 @@ class Tooltip extends SuperOpenable {
    * Direction of opening the tip.
    */
   @property()
-  direction: Direction8 = "top";
+  direction: DirectionCardinal | DirectionCorner = "top";
 
   /**
    * Content alignment.
@@ -135,7 +120,10 @@ class Tooltip extends SuperOpenable {
         style="justify-content:${align};align-items:${align}"
       >
         ${htmlSlot()}
-        <div part="tip">
+        <div
+          part="tip"
+          direction-outset-place
+        >
           ${this.tip
             ? html`
                 <span class="passive">${this.tip}</span>

package/src/core/direction.ts

@@ -0,0 +1,65 @@
+import { css, unsafeCSS, type CSSResult } from "lit";
+
+const insetAlignSelector = unsafeCSS(`[direction-inset-align]`);
+
+/**
+ * Controls the inset alignment of the element relative to the direction.
+ *
+ * ```html
+ * <div direction="${direction}">
+ *   <div direction-inset-align></div>
+ * </div>
+ * ```
+ */
+export const directionInsetAlign: CSSResult = css`
+  [direction^="top"] ${insetAlignSelector} {
+    top: 0;
+  }
+
+  [direction^="bottom"] ${insetAlignSelector} {
+    bottom: 0;
+  }
+
+  [direction$="right"] ${insetAlignSelector} {
+    right: 0;
+  }
+
+  [direction$="left"] ${insetAlignSelector} {
+    left: 0;
+  }
+`;
+
+const outsetPlaceSelector = unsafeCSS(`[direction-outset-place]`);
+
+/**
+ * Controls the outset placement of the element relative to the direction.
+ *
+ * ```html
+ * <div direction="${direction}">
+ *   <div direction-outset-place></div>
+ * </div>
+ * ```
+ */
+export const directionOutsetPlace: CSSResult = css`
+  [direction^="top"] ${outsetPlaceSelector} {
+    bottom: 100%;
+  }
+
+  [direction^="bottom"] ${outsetPlaceSelector} {
+    top: 100%;
+  }
+
+  [direction$="right"] ${outsetPlaceSelector} {
+    left: 100%;
+  }
+
+  [direction$="left"] ${outsetPlaceSelector} {
+    right: 100%;
+  }
+`;
+
+export type DirectionCardinalX = "left" | "right";
+export type DirectionCardinalY = "top" | "bottom";
+export type DirectionCardinal = DirectionCardinalX | DirectionCardinalY;
+export type DirectionCorner = "top-left" | "top-right" | "bottom-left" | "bottom-right";
+export type DirectionCenter = "center";

package/src/core/global-style.ts

@@ -17,8 +17,6 @@ export function variablePrefix(variable: string): CSSResult {
 }
 
 export const cssGlobalVars: {
-  foreground: CSSResult;
-  background: CSSResult;
   clipBackground: CSSResult;
   active: CSSResult;
   passive: CSSResult;
@@ -28,8 +26,6 @@ export const cssGlobalVars: {
   black: CSSResult;
   color: CSSResult;
 } = {
-  foreground: scopePrefix("foreground", 2),
-  background: scopePrefix("background", 2),
   clipBackground: scopePrefix("clip-background", 2),
   active: scopePrefix("active", 2),
   passive: scopePrefix("passive", 2),
@@ -54,13 +50,11 @@ GlobalStyle.styles = [
         return `${colorKey}:rgb(${rgb});`;
       }, presetsRGB).join("") +
       joinProperties([
-        [cssGlobalVars.background, `var(${cssGlobalVars._colors.darkgray[9]})`],
-        [cssGlobalVars.foreground, `var(${cssGlobalVars._colors.lightgray[0]})`],
-        [cssGlobalVars.active, `var(${cssGlobalVars._colors.blue[6]})`],
-        [cssGlobalVars.passive, `var(${cssGlobalVars._colors.darkgray[6]})`],
+        [cssGlobalVars.active, `var(${cssGlobalVars._colors.blue[5]})`],
+        [cssGlobalVars.passive, `var(${cssGlobalVars._colors.darkgray[5]})`],
         [
           cssGlobalVars.clipBackground,
-          `linear-gradient(to bottom, var(${cssGlobalVars.foreground}), var(${cssGlobalVars.passive}))`,
+          `linear-gradient(to bottom, var(${cssGlobalVars._colors.lightgray[0]}), var(${cssGlobalVars._colors.darkgray[5]}))`,
         ],
       ]) +
       "}",

package/src/core/outline.ts

@@ -0,0 +1,54 @@
+import { css, unsafeCSS, type CSSResult } from "lit";
+
+type OutlineVars = {
+  width: string | CSSResult;
+  color: string | CSSResult;
+};
+
+/**
+ * The `OutlineBuilder` class is responsible for generating CSS styles for various types of outlines.
+ */
+export class OutlineBuilder {
+  css: CSSResult;
+
+  /**
+   * @param vars.width The width variable of the outline.
+   * @param vars.color The color variable of the outline.
+   */
+  constructor(vars: OutlineVars) {
+    const width = unsafeCSS(vars.width);
+    const color = unsafeCSS(vars.color);
+    this.css = css`
+      [outline-type="outline"],
+      [outline-type="outline-inset"] {
+        outline-width: var(${width});
+        outline-color: var(${color});
+        outline-style: solid;
+      }
+
+      [outline-type="outline-inset"] {
+        outline-offset: calc(-1 * var(${width}));
+      }
+
+      [outline-type="box-shadow"] {
+        box-shadow: 0 0 0 var(${width}) var(${color});
+      }
+
+      [outline-type="box-shadow-inset"] {
+        box-shadow: inset 0 0 0 var(${width}) var(${color});
+      }
+
+      [outline-type="border"] {
+        border-width: var(${width});
+        border-color: var(${color});
+        border-style: solid;
+      }
+    `;
+  }
+
+  get styleSheet(): CSSStyleSheet {
+    return this.css.styleSheet;
+  }
+}
+
+export type OutlineType = "outline" | "outline-inset" | "box-shadow" | "box-shadow-inset" | "border";

package/src/core/super-anchor.ts

@@ -23,12 +23,13 @@ import { GlobalStyle } from "./global-style.js";
     text-decoration: inherit;
   }
 `)
-class SuperAnchor extends GlobalStyle {
+abstract class SuperAnchor extends GlobalStyle {
   /**
    * A element href.
    */
   @property()
   href: string;
+
   /**
    * A element target.
    */
@@ -53,7 +54,7 @@ class SuperAnchor extends GlobalStyle {
     `;
   }
 
-  protected _handleClick(_: MouseEvent): void {}
+  protected abstract _handleClick(_: MouseEvent): void;
 }
 
 export default SuperAnchor;