ds-one 0.3.0-alpha.6 → 0.3.0-alpha.7

package/DS1/1-root/one.css

@@ -1,4 +1,4 @@
-/* version 0.3.0-alpha.6 */
+/* version 0.3.0-alpha.7 */
 
 @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@350&display=swap");

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

@@ -6,7 +6,14 @@ import styles from "./styles/ds-text.css?inline";
  * A component for displaying text from translations
  *
  * @element ds-text
- * @prop {string} text - The translation text to use
+ * @prop {string} text - The translation key (optional if using slot content)
+ *
+ * @example
+ * // Using slot content as the key (preferred)
+ * <ds-text>Welcome to the app</ds-text>
+ *
+ * // Using text attribute (still supported)
+ * <ds-text text="Welcome to the app"></ds-text>
  */
 export class Text extends LitElement {
   static get properties() {
@@ -19,6 +26,7 @@ export class Text extends LitElement {
   declare text: string;
   declare _text: string;
   declare _currentLanguage: string;
+  private _slotKey: string = "";
   private boundHandlers: { languageChanged: EventListener };
 
   constructor() {
@@ -30,7 +38,6 @@ export class Text extends LitElement {
     // 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();
@@ -43,6 +50,17 @@ export class Text extends LitElement {
 
   connectedCallback() {
     super.connectedCallback();
+
+    // Capture slot content as the translation key if no text attribute
+    if (!this.text) {
+      const slotContent = this.textContent?.trim() || "";
+      if (slotContent) {
+        this._slotKey = slotContent;
+        // Clear the slot content - we'll render the translation in shadow DOM
+        this.textContent = "";
+      }
+    }
+
     this._currentLanguage = currentLanguage.value;
     this._updateLanguageAttribute();
     this._loadText();
@@ -58,9 +76,6 @@ export class Text extends LitElement {
       "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() {
@@ -114,7 +129,10 @@ export class Text extends LitElement {
   }
 
   _loadText() {
-    if (!this.text) {
+    // Use text attribute first, then slot content as fallback
+    const key = this.text || this._slotKey;
+
+    if (!key) {
       this._text = "";
       this._updateLanguageAttribute();
       this.requestUpdate();
@@ -122,18 +140,18 @@ export class Text extends LitElement {
     }
 
     try {
-      const translatedText = getText(this.text);
-      this._text = translatedText || this.text;
+      const translatedText = getText(key);
+      this._text = translatedText || key;
     } catch (error) {
-      console.error("Error loading text for text:", this.text, error);
-      this._text = this.text;
+      console.error("Error loading text for key:", key, error);
+      this._text = key;
     }
     this._updateLanguageAttribute();
     this.requestUpdate();
   }
 
   render() {
-    return html`<span>${this._text || this.text}</span>`;
+    return html`<span>${this._text || this.text || this._slotKey}</span>`;
   }
 }
 

package/README.md

@@ -1,4 +1,4 @@
-# DS one (0.3.0-alpha.6)
+# DS one (0.3.0-alpha.7)
 
 A plug and play design system
 
@@ -20,7 +20,7 @@ yarn add ds-one@alpha
 
 ```
 
-**Note**: Currently published as alpha version `0.3.0-alpha.6`
+**Note**: Currently published as alpha version `0.3.0-alpha.7`
 
 ## Quick Start
 

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

@@ -3,7 +3,14 @@ import { LitElement } from "lit";
  * A component for displaying text from translations
  *
  * @element ds-text
- * @prop {string} text - The translation text to use
+ * @prop {string} text - The translation key (optional if using slot content)
+ *
+ * @example
+ * // Using slot content as the key (preferred)
+ * <ds-text>Welcome to the app</ds-text>
+ *
+ * // Using text attribute (still supported)
+ * <ds-text text="Welcome to the app"></ds-text>
  */
 export declare class Text extends LitElement {
     static get properties(): {
@@ -19,6 +26,7 @@ export declare class Text extends LitElement {
     text: string;
     _text: string;
     _currentLanguage: string;
+    private _slotKey;
     private boundHandlers;
     constructor();
     static styles: import("lit").CSSResult;

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

@@ -1 +1 @@
-{"version":3,"file":"ds-text.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-text.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAIlD;;;;;GAKG;AACH,qBAAa,IAAK,SAAQ,UAAU;IAClC,MAAM,KAAK,UAAU;;;;;;;;;MAKpB;IAEO,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,gBAAgB,EAAE,MAAM,CAAC;IACjC,OAAO,CAAC,aAAa,CAAqC;;IAoB1D,MAAM,CAAC,MAAM,0BAAqB;IAElC,iBAAiB;IAsBjB,oBAAoB;IAYpB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAQ/C,wBAAwB;IA8BxB,SAAS;IAmBT,MAAM;CAGP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,IAAI,CAAC;KACjB;CACF"}
+{"version":3,"file":"ds-text.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-text.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAIlD;;;;;;;;;;;;GAYG;AACH,qBAAa,IAAK,SAAQ,UAAU;IAClC,MAAM,KAAK,UAAU;;;;;;;;;MAKpB;IAEO,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,gBAAgB,EAAE,MAAM,CAAC;IACjC,OAAO,CAAC,QAAQ,CAAc;IAC9B,OAAO,CAAC,aAAa,CAAqC;;IAmB1D,MAAM,CAAC,MAAM,0BAAqB;IAElC,iBAAiB;IA8BjB,oBAAoB;IAYpB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAQ/C,wBAAwB;IA8BxB,SAAS;IAsBT,MAAM;CAGP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,IAAI,CAAC;KACjB;CACF"}

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

@@ -5,7 +5,14 @@ import styles from "./styles/ds-text.css?inline";
  * A component for displaying text from translations
  *
  * @element ds-text
- * @prop {string} text - The translation text to use
+ * @prop {string} text - The translation key (optional if using slot content)
+ *
+ * @example
+ * // Using slot content as the key (preferred)
+ * <ds-text>Welcome to the app</ds-text>
+ *
+ * // Using text attribute (still supported)
+ * <ds-text text="Welcome to the app"></ds-text>
  */
 export class Text extends LitElement {
     static get properties() {
@@ -16,13 +23,13 @@ export class Text extends LitElement {
     }
     constructor() {
         super();
+        this._slotKey = "";
         this.text = "";
         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();
@@ -32,6 +39,15 @@ export class Text extends LitElement {
     }
     connectedCallback() {
         super.connectedCallback();
+        // Capture slot content as the translation key if no text attribute
+        if (!this.text) {
+            const slotContent = this.textContent?.trim() || "";
+            if (slotContent) {
+                this._slotKey = slotContent;
+                // Clear the slot content - we'll render the translation in shadow DOM
+                this.textContent = "";
+            }
+        }
         this._currentLanguage = currentLanguage.value;
         this._updateLanguageAttribute();
         this._loadText();
@@ -39,8 +55,6 @@ export class Text extends LitElement {
         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();
@@ -80,25 +94,27 @@ export class Text extends LitElement {
         this.removeAttribute("data-language");
     }
     _loadText() {
-        if (!this.text) {
+        // Use text attribute first, then slot content as fallback
+        const key = this.text || this._slotKey;
+        if (!key) {
             this._text = "";
             this._updateLanguageAttribute();
             this.requestUpdate();
             return;
         }
         try {
-            const translatedText = getText(this.text);
-            this._text = translatedText || this.text;
+            const translatedText = getText(key);
+            this._text = translatedText || key;
         }
         catch (error) {
-            console.error("Error loading text for text:", this.text, error);
-            this._text = this.text;
+            console.error("Error loading text for key:", key, error);
+            this._text = key;
         }
         this._updateLanguageAttribute();
         this.requestUpdate();
     }
     render() {
-        return html `<span>${this._text || this.text}</span>`;
+        return html `<span>${this._text || this.text || this._slotKey}</span>`;
     }
 }
 Text.styles = unsafeCSS(styles);

package/dist/ds-one.bundle.js

@@ -1927,20 +1927,14 @@ o$1?.({ LitElement: i2 });
 (s.litElementVersions ?? (s.litElementVersions = [])).push("4.2.1");
 const styles$f = '/* ds-text.css */\n/* Text component styles for displaying translations */\n\n:host {\n  display: inline-flex;\n  align-items: center;\n  justify-content: flex-start;\n  height: calc(16px * var(--sf));\n  font-family: var(--typeface-regular);\n  font-size: var(--type-size-default);\n  font-weight: var(--type-weight-default);\n  line-height: calc(var(--type-lineheight-default) * var(--sf));\n  letter-spacing: calc(var(--type-letterspacing-default) * var(--sf));\n  text-align: left;\n  text-transform: var(--text-transform-default);\n  text-decoration: var(--text-decoration-default);\n  vertical-align: middle;\n  white-space: nowrap;\n  color: inherit;\n}\n\n:host([data-language="ja"]) {\n  font-family: var(--typeface-regular-jp);\n}\n\n:host([data-language="zh"]),\n:host([data-language="zh-hant"]) {\n  font-family: var(--typeface-regular-zh-hant);\n  font-weight: 800;\n}\n\n:host([data-language="zh-hans"]) {\n  font-family: var(--typeface-regular-zh-hans);\n  font-weight: 800;\n}\n\n:host span {\n  color: inherit;\n}\n';
 const _Text = class _Text extends i2 {
-  static get properties() {
-    return {
-      text: { type: String, reflect: true },
-      _text: { type: String, state: true }
-    };
-  }
   constructor() {
     super();
+    this._slotKey = "";
     this.text = "";
     this._text = "";
     this._currentLanguage = currentLanguage.value;
     this.boundHandlers = {
       languageChanged: (() => {
-        console.log("Language changed event received in ds-text");
         this._currentLanguage = currentLanguage.value;
         this._updateLanguageAttribute();
         this._loadText();
@@ -1948,8 +1942,21 @@ const _Text = class _Text extends i2 {
       })
     };
   }
+  static get properties() {
+    return {
+      text: { type: String, reflect: true },
+      _text: { type: String, state: true }
+    };
+  }
   connectedCallback() {
     super.connectedCallback();
+    if (!this.text) {
+      const slotContent = this.textContent?.trim() || "";
+      if (slotContent) {
+        this._slotKey = slotContent;
+        this.textContent = "";
+      }
+    }
     this._currentLanguage = currentLanguage.value;
     this._updateLanguageAttribute();
     this._loadText();
@@ -1998,24 +2005,25 @@ const _Text = class _Text extends i2 {
     this.removeAttribute("data-language");
   }
   _loadText() {
-    if (!this.text) {
+    const key = this.text || this._slotKey;
+    if (!key) {
       this._text = "";
       this._updateLanguageAttribute();
       this.requestUpdate();
       return;
     }
     try {
-      const translatedText = getText(this.text);
-      this._text = translatedText || this.text;
+      const translatedText = getText(key);
+      this._text = translatedText || key;
     } catch (error) {
-      console.error("Error loading text for text:", this.text, error);
-      this._text = this.text;
+      console.error("Error loading text for key:", key, error);
+      this._text = key;
     }
     this._updateLanguageAttribute();
     this.requestUpdate();
   }
   render() {
-    return x`<span>${this._text || this.text}</span>`;
+    return x`<span>${this._text || this.text || this._slotKey}</span>`;
   }
 };
 _Text.styles = r$1(styles$f);