ds-one 0.2.5-alpha.8 → 0.3.0-alpha.1

package/DS1/2-core/ds-input.ts

@@ -1 +1,306 @@
-// here should be an input component
+// ds-input.ts
+// Input component for text and other input types
+
+import { LitElement, html, css } from "lit";
+import "./ds-text";
+
+export class Input extends LitElement {
+  static properties = {
+    type: { type: String, reflect: true },
+    name: { type: String, reflect: true },
+    value: { type: String },
+    placeholder: { type: String },
+    placeholderKey: { type: String, attribute: "placeholder-key" },
+    label: { type: String },
+    labelText: { type: String, attribute: "label-text" },
+    disabled: { type: Boolean, reflect: true },
+    readonly: { type: Boolean, reflect: true },
+    required: { type: Boolean, reflect: true },
+    autofocus: { type: Boolean },
+    autocomplete: { type: String },
+    pattern: { type: String },
+    minlength: { type: Number },
+    maxlength: { type: Number },
+    min: { type: String },
+    max: { type: String },
+    step: { type: String },
+    variant: { type: String, reflect: true },
+    error: { type: String },
+    errorText: { type: String, attribute: "error-text" },
+    _focused: { type: Boolean, state: true },
+  };
+
+  declare type:
+    | "text"
+    | "password"
+    | "email"
+    | "number"
+    | "tel"
+    | "url"
+    | "search"
+    | "date"
+    | "time"
+    | "datetime-local";
+  declare name: string;
+  declare value: string;
+  declare placeholder: string;
+  declare placeholderKey: string;
+  declare label: string;
+  declare labelText: string;
+  declare disabled: boolean;
+  declare readonly: boolean;
+  declare required: boolean;
+  declare autofocus: boolean;
+  declare autocomplete: string;
+  declare pattern: string;
+  declare minlength: number;
+  declare maxlength: number;
+  declare min: string;
+  declare max: string;
+  declare step: string;
+  declare variant: "default" | "filled" | "outlined";
+  declare error: string;
+  declare errorText: string;
+  declare _focused: boolean;
+
+  constructor() {
+    super();
+    this.type = "text";
+    this.name = "";
+    this.value = "";
+    this.placeholder = "";
+    this.placeholderKey = "";
+    this.label = "";
+    this.labelText = "";
+    this.disabled = false;
+    this.readonly = false;
+    this.required = false;
+    this.autofocus = false;
+    this.autocomplete = "off";
+    this.pattern = "";
+    this.minlength = 0;
+    this.maxlength = 0;
+    this.min = "";
+    this.max = "";
+    this.step = "";
+    this.variant = "default";
+    this.error = "";
+    this.errorText = "";
+    this._focused = false;
+  }
+
+  static styles = css`
+    :host {
+      display: block;
+      width: 100%;
+    }
+
+    .input-wrapper {
+      display: flex;
+      flex-direction: column;
+      gap: calc(var(--025) * var(--sf, 1));
+      width: 100%;
+    }
+
+    label {
+      font-family: var(--typeface-regular);
+      font-size: calc(12px * var(--sf, 1));
+      color: var(--text-color-secondary);
+    }
+
+    .input-container {
+      position: relative;
+      display: flex;
+      align-items: center;
+      width: 100%;
+    }
+
+    input {
+      width: 100%;
+      height: calc(var(--1) * var(--sf, 1));
+      padding: 0 calc(var(--025) * var(--sf, 1));
+      font-family: var(--typeface-regular);
+      font-size: calc(14px * var(--sf, 1));
+      color: var(--text-color-primary);
+      background-color: var(--input-background, transparent);
+      border: 1px solid var(--input-border-color, var(--border-color, #ccc));
+      border-radius: calc(var(--025) * var(--sf, 1));
+      outline: none;
+      transition:
+        border-color 0.2s ease,
+        box-shadow 0.2s ease;
+      box-sizing: border-box;
+    }
+
+    input::placeholder {
+      color: var(--text-color-tertiary, #999);
+    }
+
+    input:focus {
+      border-color: var(--accent-color, #007aff);
+      box-shadow: 0 0 0 2px var(--input-focus-ring, rgba(0, 122, 255, 0.2));
+    }
+
+    input:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+      background-color: var(--input-disabled-background, #f5f5f5);
+    }
+
+    input:read-only {
+      background-color: var(--input-readonly-background, #fafafa);
+    }
+
+    :host([variant="filled"]) input {
+      background-color: var(
+        --input-filled-background,
+        var(--surface-color-secondary, #f5f5f5)
+      );
+      border: none;
+      border-bottom: 2px solid var(--border-color, #ccc);
+      border-radius: calc(var(--025) * var(--sf, 1))
+        calc(var(--025) * var(--sf, 1)) 0 0;
+    }
+
+    :host([variant="filled"]) input:focus {
+      border-bottom-color: var(--accent-color, #007aff);
+      box-shadow: none;
+    }
+
+    :host([variant="outlined"]) input {
+      background-color: transparent;
+      border: 2px solid var(--border-color, #ccc);
+    }
+
+    :host([variant="outlined"]) input:focus {
+      border-color: var(--accent-color, #007aff);
+    }
+
+    .error-message {
+      font-family: var(--typeface-regular);
+      font-size: calc(12px * var(--sf, 1));
+      color: var(--error-color, #ff3b30);
+      margin-top: calc(var(--025) * var(--sf, 1));
+    }
+
+    :host([required]) label::after {
+      content: " *";
+      color: var(--error-color, #ff3b30);
+    }
+
+    /* Error state */
+    input.has-error {
+      border-color: var(--error-color, #ff3b30);
+    }
+
+    input.has-error:focus {
+      box-shadow: 0 0 0 2px rgba(255, 59, 48, 0.2);
+    }
+  `;
+
+  private _handleInput(e: Event): void {
+    const target = e.target as HTMLInputElement;
+    this.value = target.value;
+    this.dispatchEvent(
+      new CustomEvent("input-change", {
+        detail: { value: this.value, name: this.name },
+        bubbles: true,
+      })
+    );
+  }
+
+  private _handleFocus(): void {
+    this._focused = true;
+    this.dispatchEvent(new CustomEvent("input-focus", { bubbles: true }));
+  }
+
+  private _handleBlur(): void {
+    this._focused = false;
+    this.dispatchEvent(new CustomEvent("input-blur", { bubbles: true }));
+  }
+
+  /**
+   * Focus the input element
+   */
+  focus(): void {
+    const input = this.shadowRoot?.querySelector("input");
+    input?.focus();
+  }
+
+  /**
+   * Blur the input element
+   */
+  blur(): void {
+    const input = this.shadowRoot?.querySelector("input");
+    input?.blur();
+  }
+
+  /**
+   * Select all text in the input
+   */
+  select(): void {
+    const input = this.shadowRoot?.querySelector("input");
+    input?.select();
+  }
+
+  render() {
+    const hasError = Boolean(this.error || this.errorText);
+
+    return html`
+      <div class="input-wrapper">
+        ${this.label || this.labelText
+          ? html`
+              <label for="input">
+                ${this.labelText
+                  ? html`<ds-text .text=${this.labelText}></ds-text>`
+                  : this.label}
+              </label>
+            `
+          : null}
+
+        <div class="input-container">
+          <input
+            id="input"
+            .type=${this.type}
+            .name=${this.name}
+            .value=${this.value}
+            .placeholder=${this.placeholder}
+            ?disabled=${this.disabled}
+            ?readonly=${this.readonly}
+            ?required=${this.required}
+            ?autofocus=${this.autofocus}
+            autocomplete=${this.autocomplete}
+            pattern=${this.pattern || ""}
+            minlength=${this.minlength || ""}
+            maxlength=${this.maxlength || ""}
+            min=${this.min}
+            max=${this.max}
+            step=${this.step}
+            class=${hasError ? "has-error" : ""}
+            @input=${this._handleInput}
+            @focus=${this._handleFocus}
+            @blur=${this._handleBlur}
+          />
+        </div>
+
+        ${hasError
+          ? html`
+              <div class="error-message">
+                ${this.errorText
+                  ? html`<ds-text .text=${this.errorText}></ds-text>`
+                  : this.error}
+              </div>
+            `
+          : null}
+      </div>
+    `;
+  }
+}
+
+customElements.define("ds-input", Input);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-input": Input;
+  }
+}

package/DS1/2-core/ds-pagedots.ts

@@ -0,0 +1,52 @@
+import { LitElement, html, unsafeCSS } from "lit";
+import styles from "./styles/ds-pagedots.css?inline";
+
+/**
+ * Page dots indicator component for carousels and pagination.
+ *
+ * Usage:
+ * - <ds-pagedots count="3" active="0"></ds-pagedots>
+ */
+export class Pagedots extends LitElement {
+  static properties = {
+    /** Number of dots to display */
+    count: { type: Number, reflect: true },
+    /** Index of the active dot (0-based) */
+    active: { type: Number, reflect: true },
+  };
+
+  declare count: number;
+  declare active: number;
+
+  constructor() {
+    super();
+    this.count = 3;
+    this.active = 0;
+  }
+
+  static styles = unsafeCSS(styles);
+
+  render() {
+    const dots = Array.from({ length: this.count }, (_, i) => i);
+    return html`
+      ${dots.map(
+        (index) => html`
+          <span
+            class="dot ${index === this.active ? "active" : ""}"
+            role="button"
+            aria-label="Slide ${index + 1}"
+            aria-current="${index === this.active ? "true" : "false"}"
+          ></span>
+        `
+      )}
+    `;
+  }
+}
+
+customElements.define("ds-pagedots", Pagedots);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-pagedots": Pagedots;
+  }
+}

package/DS1/2-core/ds-text.ts

@@ -1,64 +1,58 @@
-import { LitElement, html, css } from "lit";
-import { getText } from "../0-face/i18n";
+import { LitElement, html, unsafeCSS } from "lit";
+import { getText, currentLanguage } from "../0-face/i18n";
+import styles from "./styles/ds-text.css?inline";
 
 /**
  * A component for displaying text from translations
  *
  * @element ds-text
- * @prop {string} key - The translation key to use
+ * @prop {string} text - The translation text to use
  * @prop {string} defaultValue - Default value if translation is not found
  * @prop {string} fallback - Optional fallback text if translation is not found (deprecated, use defaultValue)
  */
 export class Text extends LitElement {
   static get properties() {
     return {
-      key: { type: String, reflect: true },
+      text: { type: String, reflect: true },
       defaultValue: { type: String, reflect: true, attribute: "default-value" },
       fallback: { type: String, reflect: true }, // Kept for backward compatibility
       _text: { type: String, state: true },
     };
   }
 
-  declare key: string;
+  declare text: string;
   declare defaultValue: string;
   declare fallback: string;
   declare _text: string;
+  declare _currentLanguage: string;
   private boundHandlers: { languageChanged: EventListener };
 
   constructor() {
     super();
-    this.key = "";
+    this.text = "";
     this.defaultValue = "";
     this.fallback = "";
     this._text = "";
+    this._currentLanguage = currentLanguage.value;
 
     // Create bound event handlers for proper cleanup
     this.boundHandlers = {
       languageChanged: (() => {
         console.log("Language changed event received in ds-text");
+        this._currentLanguage = currentLanguage.value;
+        this._updateLanguageAttribute();
         this._loadText();
+        this.requestUpdate();
       }) as EventListener,
     };
   }
 
-  static styles = css`
-    :host {
-      display: inline;
-      font-family: var(--typeface);
-      font-size: calc(var(--type-size-default) * var(--scaling-factor));
-      font-weight: var(--type-weight-default);
-      line-height: calc(var(--type-lineheight-default) * var(--scaling-factor));
-      letter-spacing: calc(
-        var(--type-letterspacing-default) * var(--scaling-factor)
-      );
-      text-align: var(--text-align-default);
-      text-transform: var(--text-transform-default);
-      text-decoration: var(--text-decoration-default);
-    }
-  `;
+  static styles = unsafeCSS(styles);
 
   connectedCallback() {
     super.connectedCallback();
+    this._currentLanguage = currentLanguage.value;
+    this._updateLanguageAttribute();
     this._loadText();
 
     // Listen for language changes
@@ -92,29 +86,62 @@ export class Text extends LitElement {
   updated(changedProperties: Map<string, unknown>) {
     super.updated(changedProperties);
 
-    if (changedProperties.has("key") || changedProperties.has("defaultValue")) {
+    if (changedProperties.has("text") || changedProperties.has("defaultValue")) {
       this._loadText();
     }
   }
 
+  _updateLanguageAttribute() {
+    const lang = this._currentLanguage || currentLanguage.value;
+    // Handles "ja", "ja-JP", "zh-Hant", "zh-Hans", etc.
+    const parts = (lang || "").toLowerCase().split(/[-_]/).filter(Boolean);
+    const primaryLang = parts[0] || "";
+
+    if (primaryLang === "ja") {
+      this.setAttribute("data-language", "ja");
+      return;
+    }
+
+    if (primaryLang === "zh") {
+      // Prefer explicit script; otherwise infer from common regions.
+      const hasHans =
+        parts.includes("hans") || parts.includes("cn") || parts.includes("sg");
+      const hasHant =
+        parts.includes("hant") ||
+        parts.includes("tw") ||
+        parts.includes("hk") ||
+        parts.includes("mo");
+
+      if (hasHans) this.setAttribute("data-language", "zh-hans");
+      else if (hasHant) this.setAttribute("data-language", "zh-hant");
+      else this.setAttribute("data-language", "zh");
+      return;
+    }
+
+    this.removeAttribute("data-language");
+  }
+
   _loadText() {
-    if (!this.key) {
+    if (!this.text) {
       this._text = this.defaultValue || this.fallback || "";
+      this._updateLanguageAttribute();
+      this.requestUpdate();
       return;
     }
 
     try {
-      const text = getText(this.key);
-      this._text = text || this.defaultValue || this.fallback || this.key;
+      const translatedText = getText(this.text);
+      this._text = translatedText || this.defaultValue || this.fallback || this.text;
     } catch (error) {
-      console.error("Error loading text for key:", this.key, error);
-      this._text = this.defaultValue || this.fallback || this.key;
+      console.error("Error loading text for text:", this.text, error);
+      this._text = this.defaultValue || this.fallback || this.text;
     }
+    this._updateLanguageAttribute();
     this.requestUpdate();
   }
 
   render() {
-    return html`<span>${this._text || this.defaultValue || this.key}</span>`;
+    return html`<span>${this._text || this.defaultValue || this.text}</span>`;
   }
 }
 

package/DS1/2-core/ds-tooltip.ts

@@ -1,15 +1,16 @@
-import { LitElement, html, css } from "lit";
-import { translate, getNotionText } from "../0-face/i18n";
+import { LitElement, html, unsafeCSS } from "lit";
+import { translate } from "../0-face/i18n";
+import styles from "./styles/ds-tooltip.css?inline";
 
 export class Tooltip extends LitElement {
   static properties = {
-    key: { type: String, reflect: true },
+    text: { type: String, reflect: true },
     defaultValue: { type: String, reflect: true, attribute: "default-value" },
     _text: { state: true },
     _visible: { state: true },
   };
 
-  declare key: string;
+  declare text: string;
   declare defaultValue: string;
   private _text: string;
   private _visible: boolean;
@@ -27,7 +28,7 @@ export class Tooltip extends LitElement {
 
   constructor() {
     super();
-    this.key = "";
+    this.text = "";
     this.defaultValue = "";
     this._text = "";
     this._visible = false;
@@ -61,54 +62,7 @@ export class Tooltip extends LitElement {
     };
   }
 
-  static styles = css`
-    :host {
-      position: relative;
-      display: inline-block;
-    }
-
-    .slot-wrapper {
-      display: inline-flex;
-      align-items: center;
-    }
-
-    .bubble {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      position: absolute;
-      left: 50%;
-      bottom: 100%;
-      transform: translate(-50%, calc(-2px * var(--sf)));
-      z-index: 1000;
-      pointer-events: none;
-      height: calc(var(--08) * var(--sf));
-      opacity: 0;
-      transition:
-        opacity 120ms ease,
-        transform 120ms ease;
-      background-color: light-dark(var(--black), var(--white));
-      color: light-dark(var(--white), var(--black));
-      border-radius: 0;
-      font-size: var(--type-size-default);
-      padding: 0px calc(1px * var(--sf));
-      font-family: var(
-        --typeface,
-        -apple-system,
-        BlinkMacSystemFont,
-        "Segoe UI",
-        Roboto,
-        sans-serif
-      );
-      font-weight: 500;
-      white-space: nowrap;
-      min-width: max-content;
-    }
-
-    .bubble.visible {
-      opacity: 1;
-    }
-  `;
+  static styles = unsafeCSS(styles);
 
   connectedCallback(): void {
     super.connectedCallback();
@@ -147,30 +101,24 @@ export class Tooltip extends LitElement {
   }
 
   updated(changed: Map<string, unknown>): void {
-    if (changed.has("key") || changed.has("defaultValue")) {
+    if (changed.has("text") || changed.has("defaultValue")) {
       this._loadText();
     }
   }
 
-  async _loadText(): Promise<void> {
-    if (!this.key) {
+  _loadText(): void {
+    if (!this.text) {
       this._text = this.defaultValue || "";
       this.requestUpdate();
       return;
     }
 
     try {
-      const notionText = await getNotionText(this.key);
-      if (notionText) {
-        this._text = notionText;
-        this.requestUpdate();
-        return;
-      }
-      const t = translate(this.key);
-      this._text = t && t !== this.key ? t : this.defaultValue || this.key;
+      const t = translate(this.text);
+      this._text = t && t !== this.text ? t : this.defaultValue || this.text;
     } catch (err) {
-      console.error("ds-tooltip: error loading text for key", this.key, err);
-      this._text = this.defaultValue || this.key;
+      console.error("ds-tooltip: error loading text for text", this.text, err);
+      this._text = this.defaultValue || this.text;
     }
     this.requestUpdate();
   }

package/DS1/2-core/styles/ds-banner.css

@@ -0,0 +1,77 @@
+/* ds-banner.css */
+/* Fixed banner component styles for notifications/alerts */
+
+:host {
+  display: flex;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+  height: calc(var(--unit) * var(--sf, 1));
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 calc(var(--unit) * var(--sf, 1));
+  box-sizing: border-box;
+  z-index: 9999;
+}
+
+:host([variant="warning"]) {
+  background-color: color-mix(in srgb, var(--yellow) 50%, transparent);
+  --banner-text-color: color-mix(in srgb, var(--black) 50%, transparent);
+  --banner-action-color: var(--slate);
+}
+
+:host([variant="info"]) {
+  background-color: rgba(var(--sharp-blue-rgb, 0, 122, 255), 0.7);
+  --banner-text-color: var(--white, #fff);
+  --banner-action-color: var(--white, #fff);
+}
+
+:host([variant="success"]) {
+  background-color: rgba(var(--apple-green-rgb, 52, 199, 89), 0.7);
+  --banner-text-color: var(--white, #fff);
+  --banner-action-color: var(--white, #fff);
+}
+
+:host([variant="error"]) {
+  background-color: rgba(var(--tuned-red-rgb, 255, 59, 48), 0.7);
+  --banner-text-color: var(--white, #fff);
+  --banner-action-color: var(--slate, #1e1e1e);
+}
+
+.text-wrapper {
+  flex: 1;
+  cursor: pointer;
+  user-select: none;
+}
+
+.text-wrapper ds-text,
+.text-wrapper .version {
+  color: var(--banner-text-color);
+}
+
+.action-wrapper {
+  font-size: calc(12px * var(--sf, 1));
+}
+
+.action-wrapper a {
+  color: var(--banner-action-color);
+  text-decoration: none;
+  font-family: var(--typeface-regular);
+  font-size: calc(12px * var(--sf, 1));
+  cursor: pointer;
+  pointer-events: auto;
+  display: inline-block;
+}
+
+.action-wrapper a:hover {
+  opacity: 0.8;
+}
+
+.action-wrapper ds-text {
+  color: var(--banner-action-color);
+  font-family: var(--typeface-regular);
+  font-size: calc(12px * var(--sf, 1));
+  pointer-events: none;
+}