ds-one 0.1.11-alpha.2 → 0.1.11-alpha.3

package/DS1/1-root/one.css

@@ -35,6 +35,7 @@ input {
   /* ezo-type */
   --typeface: "GT-America-Standard-Regular";
   --typeface-medium: "GT-America-Standard-Medium";
+  --typeface-compressed: "GT-America-Compressed-Regular";
   --typeface-japanese: "Noto Sans JP";
   --typeface-mono: "Iosevka";
   --type-size-default: calc(14px * var(--scaling-factor));
@@ -149,6 +150,12 @@ html {
   font-display: swap;
 }
 
+@font-face {
+  font-family: GT-America-Compressed-Regular;
+  src: url("./fonts/GT-America-Compressed-Regular.woff2") format("woff2");
+  font-display: swap;
+}
+
 .matrix__board {
   position: relative;
   top: calc(21.5px * var(--scaling-factor));

package/DS1/2-core/{text-v1.ts → ds-text.ts}

@@ -4,7 +4,7 @@ import { getText } from "../utils/language";
 /**
  * A component for displaying text from translations
  *
- * @element text-v1
+ * @element ds-text
  * @prop {string} key - The translation key 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)
@@ -35,7 +35,7 @@ export class Text extends LitElement {
     // Create bound event handlers for proper cleanup
     this.boundHandlers = {
       languageChanged: (() => {
-        console.log("Language changed event received in text-v1");
+        console.log("Language changed event received in ds-text");
         this._loadText();
       }) as EventListener,
     };
@@ -112,10 +112,10 @@ export class Text extends LitElement {
   }
 }
 
-customElements.define("text-v1", Text);
+customElements.define("ds-text", Text);
 
 declare global {
   interface HTMLElementTagNameMap {
-    "text-v1": Text;
+    "ds-text": Text;
   }
 }

package/DS1/2-core/home-v1.ts

@@ -86,7 +86,7 @@ export class Home extends LitElement {
     }
 
     /* Inner text spacing without affecting the 80px outer width */
-    .home > text-v1 {
+    .home > ds-text {
       padding: 0 calc(var(--1) * 0.15 * var(--scaling-factor));
       box-sizing: border-box;
       height: 100%;
@@ -152,7 +152,7 @@ export class Home extends LitElement {
         @click="${this._navigateHome}"
         @keydown="${this._onKeyDown}"
       >
-        <text-v1 key="home"></text-v1>
+        <ds-text key="home"></ds-text>
       </div>
     `;
   }

package/DS1/3-unit/doublenav-v1.ts

@@ -80,14 +80,14 @@ export class DoubleNav extends LitElement {
         ? html`
             <a href="${this.previous}" class="nav-previous">
               <icon-v1 type="left"></icon-v1>
-              <text-v1>${this.previousText || "Previous"}</text-v1>
+              <ds-text>${this.previousText || "Previous"}</ds-text>
             </a>
           `
         : html`<div></div>`}
       ${this.next
         ? html`
             <a href="${this.next}" class="nav-next">
-              <text-v1>${this.nextText || "Next"}</text-v1>
+              <ds-text>${this.nextText || "Next"}</ds-text>
               <icon-v1 type="right"></icon-v1>
             </a>
           `

package/DS1/3-unit/singlenav-v1.ts

@@ -47,7 +47,7 @@ export class SingleNav extends LitElement {
 
     return html`
       <a href="${href}">
-        <text-v1 key="${navConfig.key}"></text-v1>
+        <ds-text key="${navConfig.key}"></ds-text>
         <icon-v1 type="right"></icon-v1>
       </a>
     `;

package/DS1/index.ts

@@ -6,7 +6,7 @@ import "./utils/cdn-loader";
 
 // Core components
 export * from "./2-core/ds-button";
-export * from "./2-core/text-v1";
+export * from "./2-core/ds-text";
 export * from "./2-core/icon-v1";
 export * from "./2-core/link-v1";
 export * from "./2-core/cycle-v1";

package/README.md

@@ -27,7 +27,7 @@ npm install ds-one@alpha
 yarn add ds-one@alpha
 ```
 
-**Note**: Currently published as alpha version `0.1.11-alpha.2`. Use `@alpha` tag to install.
+**Note**: Currently published as alpha version `0.1.11-alpha.3`. Use `@alpha` tag to install.
 
 ### Basic Usage
 
@@ -45,12 +45,12 @@ yarn add ds-one@alpha
     ></script>
     <script
       type="module"
-      src="node_modules/design-system-one/2 Core/text-v1.ts"
+      src="node_modules/design-system-one/2 Core/ds-text.ts"
     ></script>
   </head>
   <body>
     <ds-button variant="primary" key="welcomeButton">Get Started</ds-button>
-    <text-v1 variant="heading" key="mainHeading">Welcome to DS one</text-v1>
+    <ds-text variant="heading" key="mainHeading">Welcome to DS one</ds-text>
   </body>
 </html>
 ```
@@ -96,7 +96,7 @@ Try DS one in your browser: **[dsone.dev](https://dsone.dev)** (documentation sl
 
 ### Completed Features
 
-- ✅ Core component library (ds-button, text-v1, icon-v1, etc.)
+- ✅ Core component library (ds-button, ds-text, icon-v1, etc.)
 - ✅ Theming system with accent color support
 - ✅ Internationalization with language keys
 - ✅ Responsive design with mobile scaling

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

@@ -0,0 +1,48 @@
+import { LitElement } from "lit";
+/**
+ * A component for displaying text from translations
+ *
+ * @element ds-text
+ * @prop {string} key - The translation key 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 declare class Text extends LitElement {
+    static get properties(): {
+        key: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        defaultValue: {
+            type: StringConstructor;
+            reflect: boolean;
+            attribute: string;
+        };
+        fallback: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        _text: {
+            type: StringConstructor;
+            state: boolean;
+        };
+    };
+    key: string;
+    defaultValue: string;
+    fallback: string;
+    _text: string;
+    private boundHandlers;
+    constructor();
+    static styles: import("lit").CSSResult;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changedProperties: Map<string, unknown>): void;
+    _loadText(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-text": Text;
+    }
+}
+//# sourceMappingURL=ds-text.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-text.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-text.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C;;;;;;;GAOG;AACH,qBAAa,IAAK,SAAQ,UAAU;IAClC,MAAM,KAAK,UAAU;;;;;;;;;;;;;;;;;;MAOpB;IAEO,GAAG,EAAE,MAAM,CAAC;IACZ,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,aAAa,CAAqC;;IAkB1D,MAAM,CAAC,MAAM,0BAQX;IAEF,iBAAiB;IAoBjB,oBAAoB;IAYpB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAQ/C,SAAS;IAgBT,MAAM;CAGP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,IAAI,CAAC;KACjB;CACF"}

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

@@ -0,0 +1,83 @@
+import { LitElement, html, css } from "lit";
+import { getText } from "../utils/language";
+/**
+ * A component for displaying text from translations
+ *
+ * @element ds-text
+ * @prop {string} key - The translation key 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 },
+            defaultValue: { type: String, reflect: true, attribute: "default-value" },
+            fallback: { type: String, reflect: true }, // Kept for backward compatibility
+            _text: { type: String, state: true },
+        };
+    }
+    constructor() {
+        super();
+        this.key = "";
+        this.defaultValue = "";
+        this.fallback = "";
+        this._text = "";
+        // Create bound event handlers for proper cleanup
+        this.boundHandlers = {
+            languageChanged: (() => {
+                console.log("Language changed event received in ds-text");
+                this._loadText();
+            }),
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._loadText();
+        // Listen for language changes
+        window.addEventListener("language-changed", this.boundHandlers.languageChanged);
+        // Also listen for translations loaded event
+        window.addEventListener("translations-loaded", this.boundHandlers.languageChanged);
+        // Listen for language changes via events instead of signals
+        // The currentLanguage signal changes will trigger the language-changed event
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        window.removeEventListener("language-changed", this.boundHandlers.languageChanged);
+        window.removeEventListener("translations-loaded", this.boundHandlers.languageChanged);
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has("key") || changedProperties.has("defaultValue")) {
+            this._loadText();
+        }
+    }
+    _loadText() {
+        if (!this.key) {
+            this._text = this.defaultValue || this.fallback || "";
+            return;
+        }
+        try {
+            const text = getText(this.key);
+            this._text = text || this.defaultValue || this.fallback || this.key;
+        }
+        catch (error) {
+            console.error("Error loading text for key:", this.key, error);
+            this._text = this.defaultValue || this.fallback || this.key;
+        }
+        this.requestUpdate();
+    }
+    render() {
+        return html `<span>${this._text || this.defaultValue || this.key}</span>`;
+    }
+}
+Text.styles = css `
+    :host {
+      display: inline;
+    }
+
+    .loading {
+      opacity: 0.6;
+    }
+  `;
+customElements.define("ds-text", Text);

package/dist/2-core/home-v1.js

@@ -63,7 +63,7 @@ export class Home extends LitElement {
         @click="${this._navigateHome}"
         @keydown="${this._onKeyDown}"
       >
-        <text-v1 key="home"></text-v1>
+        <ds-text key="home"></ds-text>
       </div>
     `;
     }
@@ -107,7 +107,7 @@ Home.styles = css `
     }
 
     /* Inner text spacing without affecting the 80px outer width */
-    .home > text-v1 {
+    .home > ds-text {
       padding: 0 calc(var(--1) * 0.15 * var(--scaling-factor));
       box-sizing: border-box;
       height: 100%;

package/dist/3-unit/doublenav-v1.js

@@ -33,14 +33,14 @@ export class DoubleNav extends LitElement {
             ? html `
             <a href="${this.previous}" class="nav-previous">
               <icon-v1 type="left"></icon-v1>
-              <text-v1>${this.previousText || "Previous"}</text-v1>
+              <ds-text>${this.previousText || "Previous"}</ds-text>
             </a>
           `
             : html `<div></div>`}
       ${this.next
             ? html `
             <a href="${this.next}" class="nav-next">
-              <text-v1>${this.nextText || "Next"}</text-v1>
+              <ds-text>${this.nextText || "Next"}</ds-text>
               <icon-v1 type="right"></icon-v1>
             </a>
           `

package/dist/3-unit/singlenav-v1.js

@@ -22,7 +22,7 @@ export class SingleNav extends LitElement {
         const href = this.to || navConfig.href;
         return html `
       <a href="${href}">
-        <text-v1 key="${navConfig.key}"></text-v1>
+        <ds-text key="${navConfig.key}"></ds-text>
         <icon-v1 type="right"></icon-v1>
       </a>
     `;

package/dist/ds-one.bundle.js

@@ -1169,7 +1169,7 @@ Button.styles = i`
   `;
 customElements.define("ds-button", Button);
 
-// dist/2-core/text-v1.js
+// dist/2-core/ds-text.js
 var Text = class extends i4 {
   static get properties() {
     return {
@@ -1188,7 +1188,7 @@ var Text = class extends i4 {
     this._text = "";
     this.boundHandlers = {
       languageChanged: (() => {
-        console.log("Language changed event received in text-v1");
+        console.log("Language changed event received in ds-text");
         this._loadText();
       })
     };
@@ -1237,7 +1237,7 @@ Text.styles = i`
       opacity: 0.6;
     }
   `;
-customElements.define("text-v1", Text);
+customElements.define("ds-text", Text);
 
 // node_modules/lit-html/directive.js
 var t3 = { ATTRIBUTE: 1, CHILD: 2, PROPERTY: 3, BOOLEAN_ATTRIBUTE: 4, EVENT: 5, ELEMENT: 6 };
@@ -3283,7 +3283,7 @@ var Home = class extends i4 {
         @click="${this._navigateHome}"
         @keydown="${this._onKeyDown}"
       >
-        <text-v1 key="home"></text-v1>
+        <ds-text key="home"></ds-text>
       </div>
     `;
   }
@@ -3328,7 +3328,7 @@ Home.styles = i`
     }
 
     /* Inner text spacing without affecting the 80px outer width */
-    .home > text-v1 {
+    .home > ds-text {
       padding: 0 calc(var(--1) * 0.15 * var(--scaling-factor));
       box-sizing: border-box;
       height: 100%;
@@ -4370,7 +4370,7 @@ var SingleNav = class extends i4 {
     const href = this.to || navConfig.href;
     return x`
       <a href="${href}">
-        <text-v1 key="${navConfig.key}"></text-v1>
+        <ds-text key="${navConfig.key}"></ds-text>
         <icon-v1 type="right"></icon-v1>
       </a>
     `;
@@ -4433,12 +4433,12 @@ var DoubleNav = class extends i4 {
       ${this.previous ? x`
             <a href="${this.previous}" class="nav-previous">
               <icon-v1 type="left"></icon-v1>
-              <text-v1>${this.previousText || "Previous"}</text-v1>
+              <ds-text>${this.previousText || "Previous"}</ds-text>
             </a>
           ` : x`<div></div>`}
       ${this.next ? x`
             <a href="${this.next}" class="nav-next">
-              <text-v1>${this.nextText || "Next"}</text-v1>
+              <ds-text>${this.nextText || "Next"}</ds-text>
               <icon-v1 type="right"></icon-v1>
             </a>
           ` : x`<div></div>`}