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

package/dist/ds-one.bundle.js

@@ -1807,13 +1807,106 @@ var o7 = s5.litElementPolyfillSupport;
 o7?.({ LitElement: i6 });
 (s5.litElementVersions ?? (s5.litElementVersions = [])).push("4.2.1");
 
+// dist/2-core/ds-text.js
+var Text = class extends i6 {
+  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 = "";
+    this._currentLanguage = currentLanguage.value;
+    this.boundHandlers = {
+      languageChanged: (() => {
+        console.log("Language changed event received in ds-text");
+        this._currentLanguage = currentLanguage.value;
+        this._updateLanguageAttribute();
+        this._loadText();
+        this.requestUpdate();
+      })
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this._currentLanguage = currentLanguage.value;
+    this._updateLanguageAttribute();
+    this._loadText();
+    window.addEventListener("language-changed", this.boundHandlers.languageChanged);
+    window.addEventListener("translations-loaded", this.boundHandlers.languageChanged);
+  }
+  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();
+    }
+  }
+  _updateLanguageAttribute() {
+    const lang = this._currentLanguage || currentLanguage.value;
+    const primaryLang = lang?.toLowerCase().split(/[-_]/)[0] || "";
+    if (primaryLang === "ja") {
+      this.setAttribute("data-language", "ja");
+    } else {
+      this.removeAttribute("data-language");
+    }
+  }
+  _loadText() {
+    if (!this.key) {
+      this._text = this.defaultValue || this.fallback || "";
+      this._updateLanguageAttribute();
+      this.requestUpdate();
+      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._updateLanguageAttribute();
+    this.requestUpdate();
+  }
+  render() {
+    return x`<span>${this._text || this.defaultValue || this.key}</span>`;
+  }
+};
+Text.styles = i4`
+    :host {
+      display: inline;
+      font-family: var(--typeface-regular);
+      font-size: calc(var(--type-size-default) * var(--sf));
+      font-weight: var(--type-weight-default);
+      line-height: calc(var(--type-lineheight-default) * var(--sf));
+      letter-spacing: calc(var(--type-letterspacing-default) * var(--sf));
+      text-align: var(--text-align-default);
+      text-transform: var(--text-transform-default);
+      text-decoration: var(--text-decoration-default);
+    }
+
+    :host([data-language="ja"]) {
+      font-family: var(--typeface-regular-jp);
+    }
+  `;
+customElements.define("ds-text", Text);
+
 // dist/2-core/ds-button.js
 var Button = class extends i6 {
   constructor() {
     super();
-    this._handleLanguageChange = () => {
-      this._updateText();
-    };
     this.variant = "title";
     this.disabled = false;
     this.bold = false;
@@ -1825,35 +1918,12 @@ var Button = class extends i6 {
     this.defaultText = "";
     this.href = "";
     this._loading = false;
-    this._text = null;
   }
   connectedCallback() {
     super.connectedCallback();
-    this._updateText();
-    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.key || this.defaultText || this.fallback;
     return x`
       <button
         class=${this.variant}
@@ -1862,7 +1932,11 @@ var Button = class extends i6 {
         ?no-background=${this["no-background"]}
         @click=${this._handleClick}
       >
-        ${this._text ? this._text : x`<slot></slot>`}
+        ${hasTextProps ? x`<ds-text
+              .key=${this.key}
+              .defaultValue=${this.defaultText}
+              .fallback=${this.fallback}
+            ></ds-text>` : x`<slot></slot>`}
       </button>
     `;
   }
@@ -1899,8 +1973,7 @@ Button.properties = {
   language: { type: String },
   defaultText: { type: String, attribute: "default-text" },
   href: { type: String },
-  _loading: { type: Boolean, state: true },
-  _text: { type: String, state: true }
+  _loading: { type: Boolean, state: true }
 };
 Button.styles = i4`
     button {
@@ -2263,98 +2336,6 @@ Icon.iconNameToSvgMap = (() => {
 customElements.define("ds-icon", Icon);
 console.log("Icon component registered with custom elements registry");
 
-// dist/2-core/ds-text.js
-var Text = class extends i6 {
-  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 = "";
-    this._currentLanguage = currentLanguage.value;
-    this.boundHandlers = {
-      languageChanged: (() => {
-        console.log("Language changed event received in ds-text");
-        this._currentLanguage = currentLanguage.value;
-        this._loadText();
-        this.requestUpdate();
-      })
-    };
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this._currentLanguage = currentLanguage.value;
-    this._updateLanguageAttribute();
-    this._loadText();
-    window.addEventListener("language-changed", this.boundHandlers.languageChanged);
-    window.addEventListener("translations-loaded", this.boundHandlers.languageChanged);
-  }
-  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();
-    }
-  }
-  _updateLanguageAttribute() {
-    const lang = this._currentLanguage || currentLanguage.value;
-    if (lang === "ja") {
-      this.setAttribute("data-language", "ja");
-    } else {
-      this.removeAttribute("data-language");
-    }
-  }
-  _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._updateLanguageAttribute();
-    this.requestUpdate();
-  }
-  render() {
-    return x`<span>${this._text || this.defaultValue || this.key}</span>`;
-  }
-};
-Text.styles = i4`
-    :host {
-      display: inline;
-      font-family: var(--typeface-regular);
-      font-size: calc(var(--type-size-default) * var(--sf));
-      font-weight: var(--type-weight-default);
-      line-height: calc(var(--type-lineheight-default) * var(--sf));
-      letter-spacing: calc(var(--type-letterspacing-default) * var(--sf));
-      text-align: var(--text-align-default);
-      text-transform: var(--text-transform-default);
-      text-decoration: var(--text-decoration-default);
-    }
-
-    :host([data-language="ja"]) {
-      font-family: var(--typeface-regular-jp);
-    }
-  `;
-customElements.define("ds-text", Text);
-
 // dist/2-core/ds-cycle.js
 var saveAccentColor = (color) => {
   localStorage.setItem("accentColor", color);
@@ -2750,18 +2731,20 @@ var Cycle = class extends i6 {
             ${this.type === "notes-style-medium" || this.type === "icon-only" ? x`<span
                   style="display: inline-flex; align-items: center; gap: var(--025)"
                   >${this.getValueDisplay(this.currentValue)}</span
-                >` : this.type === "theme" ? x`<ds-text
-                    key=${this.currentValue}
-                    default-value=${this.currentValue}
-                  ></ds-text>` : this.type === "accent-color" ? x`<ds-text
-                      key=${this.getColorKey(this.currentValue)}
-                      default-value=${this.getColorName(this.currentValue)}
-                    ></ds-text>` : this.type === "page-style" ? x`<ds-text
-                        key=${this.currentValue}
-                        default-value=${this.currentValue}
-                      ></ds-text>` : x`<ds-text
-                        default-value=${this.getValueDisplay(this.currentValue)}
-                      ></ds-text>`}
+                >` : this.type === "language" ? x`<ds-text
+                    default-value=${this.getValueDisplay(this.currentValue)}
+                  ></ds-text>` : this.type === "theme" ? x`<ds-text
+                      key=${this.currentValue}
+                      default-value=${this.currentValue}
+                    ></ds-text>` : this.type === "accent-color" ? x`<ds-text
+                        key=${this.getColorKey(this.currentValue)}
+                        default-value=${this.getColorName(this.currentValue)}
+                      ></ds-text>` : this.type === "page-style" ? x`<ds-text
+                          key=${this.currentValue}
+                          default-value=${this.currentValue}
+                        ></ds-text>` : x`<ds-text
+                          default-value=${this.getValueDisplay(this.currentValue)}
+                        ></ds-text>`}
           </ds-button>
           ${this.type === "accent-color" ? x`
                 <div