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

package/dist/2-core/ds-banner.js

@@ -1,2 +1,98 @@
 // 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";
+export class Banner extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.text = "";
+        this.action = "";
+        this.href = "";
+        this.mailto = "";
+        this.subject = "";
+        this.describe = "";
+        this.appVersion = "";
+        this.variant = "warning"; // warning, info, success, error
+        this.version = "";
+        this._showVersion = false;
+        this._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);
+    }
+    _toggleVersion() {
+        if (this.version) {
+            this._showVersion = !this._showVersion;
+        }
+    }
+    _getMailtoHref() {
+        // 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>
+          `
+            : ""}
+    `;
+    }
+}
+Banner.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 },
+};
+Banner.styles = unsafeCSS(styles);
+customElements.define("ds-banner", Banner);

package/dist/2-core/ds-button.d.ts

@@ -1,4 +1,5 @@
-import { LitElement, type PropertyValues } from "lit";
+import { LitElement } from "lit";
+import "./ds-text";
 export declare class Button extends LitElement {
     static properties: {
         variant: {
@@ -22,7 +23,7 @@ export declare class Button extends LitElement {
             type: BooleanConstructor;
             reflect: boolean;
         };
-        key: {
+        text: {
             type: StringConstructor;
         };
         fallback: {
@@ -42,33 +43,21 @@ export declare class Button extends LitElement {
             type: BooleanConstructor;
             state: boolean;
         };
-        _text: {
-            type: StringConstructor;
-            state: boolean;
-        };
     };
     variant: string;
     disabled: boolean;
     bold: boolean;
     "no-background": boolean;
     blank: boolean;
-    key: string;
+    text: string;
     fallback: string;
     language: string;
     defaultText: string;
     href: string;
     _loading: boolean;
-    _text: string | null;
     constructor();
     static styles: import("lit").CSSResult;
     connectedCallback(): void;
-    disconnectedCallback(): void;
-    _handleLanguageChange: () => void;
-    updated(changedProps: PropertyValues): void;
-    /**
-     * Update text from translations (synchronous like Portfolio)
-     */
-    private _updateText;
     render(): import("lit-html").TemplateResult<1>;
     private _handleClick;
 }

package/dist/2-core/ds-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ds-button.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-button.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAa,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGjE,qBAAa,MAAO,SAAQ,UAAU;IACpC,MAAM,CAAC,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAiBf;IAGM,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,OAAO,CAAC;IACd,eAAe,EAAE,OAAO,CAAC;IACzB,KAAK,EAAE,OAAO,CAAC;IACf,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;IAGb,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;;IAkB7B,MAAM,CAAC,MAAM,0BAkDX;IAEF,iBAAiB;IAQjB,oBAAoB;IAKpB,qBAAqB,aAEnB;IAEF,OAAO,CAAC,YAAY,EAAE,cAAc;IAQpC;;OAEG;IACH,OAAO,CAAC,WAAW;IASnB,MAAM;IAcN,OAAO,CAAC,YAAY;CAwBrB;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,MAAM,CAAC;KACrB;CACF"}
+{"version":3,"file":"ds-button.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-button.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAClD,OAAO,WAAW,CAAC;AAGnB,qBAAa,MAAO,SAAQ,UAAU;IACpC,MAAM,CAAC,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAgBf;IAGM,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,OAAO,CAAC;IACd,eAAe,EAAE,OAAO,CAAC;IACzB,KAAK,EAAE,OAAO,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;IAGb,QAAQ,EAAE,OAAO,CAAC;;IAiB1B,MAAM,CAAC,MAAM,0BAAqB;IAElC,iBAAiB;IAIjB,MAAM;IAsBN,OAAO,CAAC,YAAY;CAwBrB;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,MAAM,CAAC;KACrB;CACF"}

package/dist/2-core/ds-button.js

@@ -1,55 +1,28 @@
 // ds-button.ts
 // Core button component
-import { LitElement, html, css } from "lit";
-import { getText } 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 {
     constructor() {
         super();
-        this._handleLanguageChange = () => {
-            this._updateText();
-        };
         this.variant = "title";
         this.disabled = false;
         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;
     }
     connectedCallback() {
         super.connectedCallback();
-        this._updateText();
-        // Listen for language changes
-        window.addEventListener("language-changed", this._handleLanguageChange);
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        window.removeEventListener("language-changed", this._handleLanguageChange);
-    }
-    updated(changedProps) {
-        super.updated(changedProps);
-        if (changedProps.has("key") || changedProps.has("defaultText")) {
-            this._updateText();
-        }
-    }
-    /**
-     * Update text from translations (synchronous like Portfolio)
-     */
-    _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}
@@ -58,7 +31,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>
     `;
     }
@@ -96,63 +75,12 @@ Button.properties = {
         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 },
 };
-Button.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;
-    }
-  `;
+Button.styles = unsafeCSS(styles);
 customElements.define("ds-button", Button);

package/dist/2-core/ds-card.d.ts

@@ -0,0 +1,39 @@
+import { LitElement } from "lit";
+export declare class Card extends LitElement {
+    static properties: {
+        variant: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        elevation: {
+            type: NumberConstructor;
+            reflect: boolean;
+        };
+        interactive: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        padding: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+    };
+    variant: "default" | "outlined" | "elevated" | "filled";
+    elevation: number;
+    interactive: boolean;
+    disabled: boolean;
+    padding: "none" | "small" | "medium" | "large";
+    constructor();
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-card": Card;
+    }
+}
+//# sourceMappingURL=ds-card.d.ts.map

package/dist/2-core/ds-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-card.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-card.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C,qBAAa,IAAK,SAAQ,UAAU;IAClC,MAAM,CAAC,UAAU;;;;;;;;;;;;;;;;;;;;;MAMf;IAEM,OAAO,EAAE,SAAS,GAAG,UAAU,GAAG,UAAU,GAAG,QAAQ,CAAC;IACxD,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;;IAWvD,MAAM,CAAC,MAAM,0BA0FX;IAEF,MAAM;CAOP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,IAAI,CAAC;KACjB;CACF"}

package/dist/2-core/ds-card.js

@@ -0,0 +1,119 @@
+// ds-card.ts
+// Card component for displaying content in a contained box
+import { LitElement, html, css } from "lit";
+export class Card extends LitElement {
+    constructor() {
+        super();
+        this.variant = "default";
+        this.elevation = 1;
+        this.interactive = false;
+        this.disabled = false;
+        this.padding = "medium";
+    }
+    render() {
+        return html `
+      <div class="card-content" part="content">
+        <slot></slot>
+      </div>
+    `;
+    }
+}
+Card.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 },
+};
+Card.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%;
+    }
+  `;
+customElements.define("ds-card", Card);

package/dist/2-core/ds-cycle.d.ts

@@ -10,9 +10,6 @@ export declare class Cycle extends LitElement {
         values: {
             type: ArrayConstructor;
         };
-        label: {
-            type: StringConstructor;
-        };
         currentValue: {
             type: StringConstructor;
             state: boolean;
@@ -32,7 +29,6 @@ export declare class Cycle extends LitElement {
     static styles: import("lit").CSSResult;
     type: string;
     values: string[];
-    label: string;
     currentValue: string;
     translationsReady: boolean;
     disabled: boolean;
@@ -48,9 +44,9 @@ export declare class Cycle extends LitElement {
     disconnectedCallback(): void;
     handleButtonClick(e: Event): void;
     getValueDisplay(value: string): string | any;
+    getColorKey(colorVar: string): string;
     getColorName(colorVar: string): string;
     getNotesStyleIcon(style: string): import("lit-html").TemplateResult<1>;
-    getLabel(): string;
     render(): import("lit-html").TemplateResult<1>;
     private waitForTranslations;
     private handleTranslationsLoaded;

package/dist/2-core/ds-cycle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ds-cycle.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-cycle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAY5C,OAAO,aAAa,CAAC;AACrB,OAAO,WAAW,CAAC;AACnB,OAAO,WAAW,CAAC;AAqCnB,qBAAa,KAAM,SAAQ,UAAU;IAEnC,MAAM,KAAK,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;MAUpB;IAED,MAAM,CAAC,MAAM,0BAWX;IAIM,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,MAAM,CAAC;IACrB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAGxB,OAAO,CAAC,aAAa,CAOnB;;IAyBF,iBAAiB;IA6BX,gBAAgB;IA6EtB,sBAAsB;IAatB,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM;IASnE,iBAAiB;IAoDvB,qBAAqB;IAKrB,oBAAoB;IA0BpB,iBAAiB,CAAC,CAAC,EAAE,KAAK;IAuJ1B,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,GAAG;IA+C5C,YAAY,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM;IAyBtC,iBAAiB,CAAC,KAAK,EAAE,MAAM;IAe/B,QAAQ,IAAI,MAAM;IAgElB,MAAM;YAyDQ,mBAAmB;IAwBjC,OAAO,CAAC,wBAAwB;IAYhC,OAAO,CAAC,qBAAqB;IAI7B,OAAO,CAAC,kBAAkB;IAI1B,OAAO,CAAC,wBAAwB;IAIhC,OAAO,CAAC,yBAAyB;CAGlC;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,KAAK,CAAC;KACnB;CACF"}
+{"version":3,"file":"ds-cycle.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-cycle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAYlD,OAAO,aAAa,CAAC;AACrB,OAAO,WAAW,CAAC;AACnB,OAAO,WAAW,CAAC;AAsCnB,qBAAa,KAAM,SAAQ,UAAU;IAEnC,MAAM,KAAK,UAAU;;;;;;;;;;;;;;;;;;;;;;MASpB;IAED,MAAM,CAAC,MAAM,0BAAqB;IAI1B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,YAAY,EAAE,MAAM,CAAC;IACrB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAGxB,OAAO,CAAC,aAAa,CAOnB;;IAwBF,iBAAiB;IA6BX,gBAAgB;IA8DtB,sBAAsB;IAatB,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM;IASnE,iBAAiB;IAqCvB,qBAAqB;IAKrB,oBAAoB;IA0BpB,iBAAiB,CAAC,CAAC,EAAE,KAAK;IAiJ1B,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,GAAG;IA+C5C,WAAW,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM;IAgBrC,YAAY,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM;IAyBtC,iBAAiB,CAAC,KAAK,EAAE,MAAM;IAe/B,MAAM;YAoDQ,mBAAmB;IAwBjC,OAAO,CAAC,wBAAwB;IAYhC,OAAO,CAAC,qBAAqB;IAI7B,OAAO,CAAC,kBAAkB;IAI1B,OAAO,CAAC,wBAAwB;IAIhC,OAAO,CAAC,yBAAyB;CAGlC;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,KAAK,CAAC;KACnB;CACF"}