ds-one 0.2.5-alpha.12 → 0.2.5-alpha.14

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

@@ -1,2 +1,172 @@
 // ds-banner.ts
-// Core component
+// Fixed banner component for notifications/alerts
+import { LitElement, html, css } from "lit";
+import { getText } from "../0-face/i18n.js";
+import "./ds-text.js";
+import "./ds-button.js";
+export class Banner extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.textKey = "";
+        this.actionKey = "";
+        this.href = "";
+        this.mailto = "";
+        this.subjectKey = "";
+        this.describeKey = "";
+        this.appVersionKey = "";
+        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.subjectKey
+                    ? getText(this.subjectKey) || this.subjectKey
+                    : "Issue report";
+                const describe = this.describeKey
+                    ? getText(this.describeKey) || this.describeKey
+                    : "Describe the issue:";
+                const appVersionLabel = this.appVersionKey
+                    ? getText(this.appVersionKey) || this.appVersionKey
+                    : "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 key=${this.textKey}><slot></slot></ds-text>`}
+      </div>
+      ${this.actionKey
+            ? html `
+            <div class="action-wrapper">
+              <a href=${mailtoHref}>
+                <ds-text key=${this.actionKey}></ds-text>
+              </a>
+            </div>
+          `
+            : ""}
+    `;
+    }
+}
+Banner.properties = {
+    textKey: { type: String, attribute: "text-key" },
+    actionKey: { type: String, attribute: "action-key" },
+    href: { type: String },
+    mailto: { type: String },
+    subjectKey: { type: String, attribute: "subject-key" },
+    describeKey: { type: String, attribute: "describe-key" },
+    appVersionKey: { type: String, attribute: "app-version-key" },
+    variant: { type: String },
+    version: { type: String },
+    _showVersion: { type: Boolean, state: true },
+};
+Banner.styles = css `
+    :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;
+    }
+  `;
+customElements.define("ds-banner", Banner);

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,MAAM,KAAK,CAAC;AAC5C,OAAO,WAAW,CAAC;AAEnB,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,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;;IAiB1B,MAAM,CAAC,MAAM,0BAkDX;IAEF,iBAAiB;IAIjB,MAAM;IAsBN,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,EAAa,MAAM,KAAK,CAAC;AAC5C,OAAO,WAAW,CAAC;AAEnB,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,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;;IAiB1B,MAAM,CAAC,MAAM,0BAgEX;IAEF,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

@@ -84,10 +84,11 @@ Button.properties = {
 Button.styles = css `
     button {
       max-height: calc(var(--08) * var(--sf));
-      border: none;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
       cursor: pointer;
-      font-size: calc(var(--type-size-default) * var(--sf));
-      padding: 0 calc(1px * var(--sf));
+      padding: 0 calc(0.5px * var(--sf));
       color: var(--button-text-color);
       font-family: var(--typeface-regular);
     }
@@ -110,6 +111,19 @@ Button.styles = css `
       font-family: var(--typeface-regular);
     }
 
+    button.text {
+      background-color: transparent;
+      color: var(--button-color, var(--button-text-color));
+      font-family: var(--typeface-regular);
+      padding: 0;
+      text-decoration: none;
+    }
+
+    button.text:hover {
+      opacity: 0.8;
+      text-decoration: none;
+    }
+
     button[bold] {
       font-weight: var(--type-weight-bold);
       font-family: var(--typeface-medium);

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

@@ -95,7 +95,7 @@ Text.styles = css `
     :host {
       display: inline;
       font-family: var(--typeface-regular);
-      font-size: calc(var(--type-size-default) * var(--sf));
+      font-size: var(--type-size-default);
       font-weight: var(--type-weight-default);
       line-height: calc(var(--type-lineheight-default) * var(--sf));
       letter-spacing: calc(var(--type-letterspacing-default) * var(--sf));

package/dist/4-page/ds-container.d.ts

@@ -0,0 +1,17 @@
+import { LitElement } from "lit";
+declare global {
+    interface CustomElementRegistry {
+        define(name: string, constructor: typeof LitElement): void;
+    }
+    var customElements: CustomElementRegistry;
+}
+export declare class Container extends LitElement {
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-container": Container;
+    }
+}
+//# sourceMappingURL=ds-container.d.ts.map

package/dist/4-page/ds-container.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-container.d.ts","sourceRoot":"","sources":["../../DS1/4-page/ds-container.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,WAAW,EAAE,OAAO,UAAU,GAAG,IAAI,CAAC;KAC5D;IACD,IAAI,cAAc,EAAE,qBAAqB,CAAC;CAC3C;AAED,qBAAa,SAAU,SAAQ,UAAU;IACvC,MAAM,CAAC,MAAM,0BAiCX;IAEF,MAAM;CAGP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,SAAS,CAAC;KAC3B;CACF"}

package/dist/4-page/ds-container.js

@@ -0,0 +1,43 @@
+// ds-container.ts
+// Container component with responsive width constraints
+import { LitElement, html, css } from "lit";
+export class Container extends LitElement {
+    render() {
+        return html `<slot></slot>`;
+    }
+}
+Container.styles = css `
+    :host {
+      display: flex;
+      width: 100%;
+      max-width: 100%;
+      flex-direction: column;
+      background-color: var(--background-color);
+      box-sizing: border-box;
+    }
+
+    /* Ensure children don't overflow */
+    :host ::slotted(*) {
+      max-width: 100%;
+      box-sizing: border-box;
+    }
+
+    /* Mobile: 100% width */
+    @media (max-width: 820px) {
+      :host {
+        width: 100%;
+        max-width: 100%;
+      }
+    }
+
+    /* Desktop: max-width 1000px, centered */
+    @media (min-width: 821px) {
+      :host {
+        max-width: 1000px;
+        margin-left: auto;
+        margin-right: auto;
+        width: 100%;
+      }
+    }
+  `;
+customElements.define("ds-container", Container);

package/dist/4-page/ds-grid.d.ts

@@ -12,7 +12,12 @@ export declare class Grid extends LitElement {
         };
     };
     align?: string;
+    private resizeObserver?;
+    private resizeTimeout?;
     static styles: import("lit").CSSResult;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private updateMobileClass;
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

package/dist/4-page/ds-grid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ds-grid.d.ts","sourceRoot":"","sources":["../../DS1/4-page/ds-grid.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,WAAW,EAAE,OAAO,UAAU,GAAG,IAAI,CAAC;KAC5D;IACD,IAAI,cAAc,EAAE,qBAAqB,CAAC;CAC3C;AAED,qBAAa,IAAK,SAAQ,UAAU;IAClC,MAAM,CAAC,UAAU;;;;MAEf;IAEF,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,MAAM,CAAC,MAAM,0BAsDX;IAEF,MAAM;CAGP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,IAAI,CAAC;KACjB;CACF"}
+{"version":3,"file":"ds-grid.d.ts","sourceRoot":"","sources":["../../DS1/4-page/ds-grid.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,WAAW,EAAE,OAAO,UAAU,GAAG,IAAI,CAAC;KAC5D;IACD,IAAI,cAAc,EAAE,qBAAqB,CAAC;CAC3C;AAED,qBAAa,IAAK,SAAQ,UAAU;IAClC,MAAM,CAAC,UAAU;;;;MAEf;IAEF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,cAAc,CAAC,CAAa;IACpC,OAAO,CAAC,aAAa,CAAC,CAAM;IAE5B,MAAM,CAAC,MAAM,0BAsDX;IAEF,iBAAiB;IAgBjB,oBAAoB;IAUpB,OAAO,CAAC,iBAAiB;IAWzB,MAAM;CAGP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,IAAI,CAAC;KACjB;CACF"}

package/dist/4-page/ds-grid.js

@@ -1,7 +1,42 @@
 // ds-grid.ts
 // Simple grid layout component
 import { LitElement, html, css } from "lit";
+import { detectMobileDevice } from "../0-face/device";
 export class Grid extends LitElement {
+    connectedCallback() {
+        super.connectedCallback();
+        this.updateMobileClass();
+        // Listen for resize events to update mobile class
+        this.resizeObserver = () => {
+            if (this.resizeTimeout) {
+                clearTimeout(this.resizeTimeout);
+            }
+            this.resizeTimeout = setTimeout(() => {
+                this.updateMobileClass();
+            }, 100);
+        };
+        window.addEventListener("resize", this.resizeObserver);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this.resizeObserver) {
+            window.removeEventListener("resize", this.resizeObserver);
+        }
+        if (this.resizeTimeout) {
+            clearTimeout(this.resizeTimeout);
+        }
+    }
+    updateMobileClass() {
+        const isMobile = detectMobileDevice();
+        if (isMobile) {
+            this.classList.add("mobile");
+            this.classList.remove("desktop");
+        }
+        else {
+            this.classList.add("desktop");
+            this.classList.remove("mobile");
+        }
+    }
     render() {
         return html ``;
     }
@@ -15,13 +50,13 @@ Grid.styles = css `
       margin-left: 0.5px !important;
       display: grid;
       width: 1440px;
-      height: 360px;
+      height: 1280px;
       grid-template-columns: repeat(auto-fill, 19px);
       grid-template-rows: repeat(auto-fill, 19px);
       gap: 1px;
       row-rule: calc(1px * var(--sf)) solid var(--grid-color);
       column-rule: calc(1px * var(--sf)) solid var(--grid-color);
-      outline: 1px solid black;
+      outline: calc(1px * var(--sf)) solid var(--yellow);
       position: fixed;
       top: 0;
       left: 50%;
@@ -34,7 +69,7 @@ Grid.styles = css `
     :host(.mobile) {
       width: calc(100% - calc(1px * var(--sf)));
       max-width: 100vw;
-      margin-left: 0 !important;
+      margin-left: 0.5px !important;
       margin-top: 0 !important;
       box-sizing: border-box;
       position: fixed;

package/dist/4-page/ds-layout.d.ts

@@ -13,13 +13,13 @@ export declare class Layout extends LitElement {
         align: {
             type: StringConstructor;
         };
-        debug: {
+        view: {
             type: BooleanConstructor;
         };
     };
     mode: string;
     align?: string;
-    debug?: boolean;
+    view?: boolean;
     static styles: import("lit").CSSResult;
     render(): import("lit-html").TemplateResult<1>;
 }

package/dist/4-page/ds-layout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ds-layout.d.ts","sourceRoot":"","sources":["../../DS1/4-page/ds-layout.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,WAAW,EAAE,OAAO,UAAU,GAAG,IAAI,CAAC;KAC5D;IACD,IAAI,cAAc,EAAE,qBAAqB,CAAC;CAC3C;AAED,qBAAa,MAAO,SAAQ,UAAU;IACpC,MAAM,CAAC,UAAU;;;;;;;;;;MAIf;IAEF,IAAI,EAAE,MAAM,CAAe;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,MAAM,CAAC,MAAM,0BAiNX;IAEF,MAAM;CAqEP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,MAAM,CAAC;KACrB;CACF"}
+{"version":3,"file":"ds-layout.d.ts","sourceRoot":"","sources":["../../DS1/4-page/ds-layout.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,WAAW,EAAE,OAAO,UAAU,GAAG,IAAI,CAAC;KAC5D;IACD,IAAI,cAAc,EAAE,qBAAqB,CAAC;CAC3C;AAED,qBAAa,MAAO,SAAQ,UAAU;IACpC,MAAM,CAAC,UAAU;;;;;;;;;;MAIf;IAEF,IAAI,EAAE,MAAM,CAAe;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf,MAAM,CAAC,MAAM,0BA2NX;IAEF,MAAM;CAqEP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,MAAM,CAAC;KACrB;CACF"}