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

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

@@ -1,3 +1,122 @@
 // ds-banner.ts
-// Core component
+// Fixed banner component for notifications/alerts
 
+import { LitElement, html, unsafeCSS } from "lit";
+import { getText } from "../0-face/i18n.js";
+import "./ds-text.js";
+import "./ds-button.js";
+import styles from "./styles/ds-banner.css?inline";
+
+declare global {
+  interface CustomElementRegistry {
+    define(name: string, constructor: typeof LitElement): void;
+  }
+  var customElements: CustomElementRegistry;
+}
+
+export class Banner extends LitElement {
+  static properties = {
+    text: { type: String },
+    action: { type: String },
+    href: { type: String },
+    mailto: { type: String },
+    subject: { type: String },
+    describe: { type: String },
+    appVersion: { type: String, attribute: "app-version" },
+    variant: { type: String },
+    version: { type: String },
+    _showVersion: { type: Boolean, state: true },
+  };
+
+  text: string = "";
+  action: string = "";
+  href: string = "";
+  mailto: string = "";
+  subject: string = "";
+  describe: string = "";
+  appVersion: string = "";
+  variant: string = "warning"; // warning, info, success, error
+  version: string = "";
+  _showVersion: boolean = false;
+
+  private _boundUpdate = () => this.requestUpdate();
+
+  connectedCallback() {
+    super.connectedCallback();
+    // Listen for translations and language changes to rebuild mailto URL
+    window.addEventListener("translations-loaded", this._boundUpdate);
+    window.addEventListener("language-changed", this._boundUpdate);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    window.removeEventListener("translations-loaded", this._boundUpdate);
+    window.removeEventListener("language-changed", this._boundUpdate);
+  }
+
+  static styles = unsafeCSS(styles);
+
+  private _toggleVersion() {
+    if (this.version) {
+      this._showVersion = !this._showVersion;
+    }
+  }
+
+  private _getMailtoHref(): string {
+    // If a direct href is provided, use it
+    if (this.href && this.href !== "#") return this.href;
+
+    // If mailto is provided, build internationalized URL
+    if (this.mailto) {
+      try {
+        const subject = this.subject
+          ? getText(this.subject) || this.subject
+          : "Issue report";
+        const describe = this.describe
+          ? getText(this.describe) || this.describe
+          : "Describe the issue:";
+        const appVersionLabel = this.appVersion
+          ? getText(this.appVersion) || this.appVersion
+          : "App version:";
+
+        const body = `${describe}\n\n\n${appVersionLabel} ${this.version || ""}`;
+
+        return `mailto:${this.mailto}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
+      } catch (error) {
+        // Fallback if translations fail
+        return `mailto:${this.mailto}?subject=Issue%20report&body=Describe%20the%20issue%3A%0A%0A%0AApp%20version%3A%20${this.version || ""}`;
+      }
+    }
+
+    return "#";
+  }
+
+  render() {
+    const mailtoHref = this._getMailtoHref();
+
+    return html`
+      <div class="text-wrapper" @click=${this._toggleVersion}>
+        ${this._showVersion && this.version
+          ? html`<ds-text default-value=${this.version}></ds-text>`
+          : html`<ds-text text=${this.text}><slot></slot></ds-text>`}
+      </div>
+      ${this.action
+        ? html`
+            <div class="action-wrapper">
+              <a href=${mailtoHref}>
+                <ds-text text=${this.action}></ds-text>
+              </a>
+            </div>
+          `
+        : ""}
+    `;
+  }
+}
+
+customElements.define("ds-banner", Banner);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-banner": Banner;
+  }
+}

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

@@ -1,8 +1,9 @@
 // ds-button.ts
 // Core button component
 
-import { LitElement, html, css, type PropertyValues } from "lit";
-import { getText, currentLanguage } from "../0-face/i18n";
+import { LitElement, html, unsafeCSS } from "lit";
+import "./ds-text";
+import styles from "./styles/ds-button.css?inline";
 
 export class Button extends LitElement {
   static properties = {
@@ -15,13 +16,12 @@ export class Button extends LitElement {
       attribute: "no-background",
     },
     blank: { type: Boolean, reflect: true },
-    key: { type: String },
+    text: { type: String },
     fallback: { type: String },
     language: { type: String },
     defaultText: { type: String, attribute: "default-text" },
     href: { type: String },
     _loading: { type: Boolean, state: true },
-    _text: { type: String, state: true },
   };
 
   // Public properties
@@ -30,7 +30,7 @@ export class Button extends LitElement {
   declare bold: boolean;
   declare "no-background": boolean;
   declare blank: boolean;
-  declare key: string;
+  declare text: string;
   declare fallback: string;
   declare language: string;
   declare defaultText: string;
@@ -38,7 +38,6 @@ export class Button extends LitElement {
 
   // Private state
   declare _loading: boolean;
-  declare _text: string | null;
 
   constructor() {
     super();
@@ -47,105 +46,23 @@ export class Button extends LitElement {
     this.bold = false;
     this["no-background"] = false;
     this.blank = false;
-    this.key = "";
+    this.text = "";
     this.fallback = "";
     this.language = "en-US";
     this.defaultText = "";
     this.href = "";
     this._loading = false;
-    this._text = null;
   }
 
-  static styles = css`
-    button {
-      max-height: calc(var(--08) * var(--scaling-factor));
-      border: none;
-      cursor: pointer;
-      font-size: calc(var(--type-size-default) * var(--scaling-factor));
-      padding: 0 calc(1px * var(--scaling-factor));
-      color: var(--button-text-color);
-      font-family: var(--typeface);
-    }
-
-    button.title {
-      background-color: var(--button-background-color-secondary);
-      color: var(--button-text-color);
-    }
-
-    button.primary {
-      background-color: var(--accent-color);
-      color: var(--button-text-color);
-      text-decoration-line: none;
-      font-family: var(--typeface);
-    }
-
-    button.secondary {
-      background-color: var(--button-background-color-secondary);
-      color: var(--button-text-color);
-      font-family: var(--typeface);
-    }
-
-    button[bold] {
-      font-weight: var(--type-weight-bold);
-      font-family: var(--typeface-medium);
-    }
-
-    button[no-background] {
-      background-color: transparent;
-      max-height: var(--1);
-      padding: 0;
-      color: var(--button-color, var(--button-text-color-secondary));
-    }
-
-    button[no-background][bold] {
-      font-weight: var(--type-weight-bold);
-      font-family: var(--typeface-medium);
-      color: var(--button-color, var(--button-text-color-secondary));
-    }
-
-    .loading {
-      opacity: 0.7;
-    }
-  `;
+  static styles = unsafeCSS(styles);
 
   connectedCallback() {
     super.connectedCallback();
-    this._updateText();
-
-    // Listen for language changes
-    window.addEventListener("language-changed", this._handleLanguageChange);
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    window.removeEventListener("language-changed", this._handleLanguageChange);
-  }
-
-  _handleLanguageChange = () => {
-    this._updateText();
-  };
-
-  updated(changedProps: PropertyValues) {
-    super.updated(changedProps);
-
-    if (changedProps.has("key") || changedProps.has("defaultText")) {
-      this._updateText();
-    }
-  }
-
-  /**
-   * Update text from translations (synchronous like Portfolio)
-   */
-  private _updateText() {
-    if (this.key) {
-      this._text = getText(this.key);
-    } else {
-      this._text = this.defaultText || this.fallback || null;
-    }
-    this.requestUpdate();
   }
 
   render() {
+    const hasTextProps = this.text || this.defaultText || this.fallback;
+
     return html`
       <button
         class=${this.variant}
@@ -154,7 +71,13 @@ export class Button extends LitElement {
         ?no-background=${this["no-background"]}
         @click=${this._handleClick}
       >
-        ${this._text ? this._text : html`<slot></slot>`}
+        ${hasTextProps
+          ? html`<ds-text
+              .text=${this.text}
+              .defaultValue=${this.defaultText}
+              .fallback=${this.fallback}
+            ></ds-text>`
+          : html`<slot></slot>`}
       </button>
     `;
   }

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

@@ -0,0 +1,137 @@
+// ds-card.ts
+// Card component for displaying content in a contained box
+
+import { LitElement, html, css } from "lit";
+
+export class Card extends LitElement {
+  static properties = {
+    variant: { type: String, reflect: true },
+    elevation: { type: Number, reflect: true },
+    interactive: { type: Boolean, reflect: true },
+    disabled: { type: Boolean, reflect: true },
+    padding: { type: String, reflect: true },
+  };
+
+  declare variant: "default" | "outlined" | "elevated" | "filled";
+  declare elevation: number;
+  declare interactive: boolean;
+  declare disabled: boolean;
+  declare padding: "none" | "small" | "medium" | "large";
+
+  constructor() {
+    super();
+    this.variant = "default";
+    this.elevation = 1;
+    this.interactive = false;
+    this.disabled = false;
+    this.padding = "medium";
+  }
+
+  static styles = css`
+    :host {
+      display: block;
+      box-sizing: border-box;
+      border-radius: calc(var(--025) * var(--sf, 1));
+      background-color: var(--card-background, var(--surface-color, #fff));
+      color: var(--text-color-primary);
+      transition:
+        box-shadow 0.2s ease,
+        transform 0.2s ease;
+    }
+
+    :host([variant="default"]) {
+      background-color: var(--card-background, var(--surface-color, #fff));
+      border: 1px solid var(--border-color, rgba(0, 0, 0, 0.1));
+    }
+
+    :host([variant="outlined"]) {
+      background-color: transparent;
+      border: 1px solid var(--border-color, rgba(0, 0, 0, 0.2));
+    }
+
+    :host([variant="elevated"]) {
+      background-color: var(--card-background, var(--surface-color, #fff));
+      border: none;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    }
+
+    :host([variant="filled"]) {
+      background-color: var(
+        --card-background-filled,
+        var(--surface-color-secondary, #f5f5f5)
+      );
+      border: none;
+    }
+
+    :host([elevation="0"]) {
+      box-shadow: none;
+    }
+
+    :host([elevation="1"]) {
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+    }
+
+    :host([elevation="2"]) {
+      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
+    }
+
+    :host([elevation="3"]) {
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
+    }
+
+    :host([interactive]) {
+      cursor: pointer;
+    }
+
+    :host([interactive]:hover:not([disabled])) {
+      transform: translateY(-2px);
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    }
+
+    :host([interactive]:active:not([disabled])) {
+      transform: translateY(0);
+    }
+
+    :host([disabled]) {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+
+    :host([padding="none"]) {
+      padding: 0;
+    }
+
+    :host([padding="small"]) {
+      padding: calc(var(--025) * var(--sf, 1));
+    }
+
+    :host([padding="medium"]) {
+      padding: calc(var(--05) * var(--sf, 1));
+    }
+
+    :host([padding="large"]) {
+      padding: calc(var(--1) * var(--sf, 1));
+    }
+
+    .card-content {
+      width: 100%;
+      height: 100%;
+    }
+  `;
+
+  render() {
+    return html`
+      <div class="card-content" part="content">
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+
+customElements.define("ds-card", Card);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-card": Card;
+  }
+}