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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,4 +1,4 @@
1
- /* version 0.2.5-alpha.11 */
1
+ /* version 0.2.5-alpha.12 */
2
2
 
3
3
  @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@200");
4
4
 
@@ -1,8 +1,8 @@
1
1
  // ds-button.ts
2
2
  // Core button component
3
3
 
4
- import { LitElement, html, css, type PropertyValues } from "lit";
5
- import { getText, currentLanguage } from "../0-face/i18n";
4
+ import { LitElement, html, css } from "lit";
5
+ import "./ds-text";
6
6
 
7
7
  export class Button extends LitElement {
8
8
  static properties = {
@@ -21,7 +21,6 @@ export class Button extends LitElement {
21
21
  defaultText: { type: String, attribute: "default-text" },
22
22
  href: { type: String },
23
23
  _loading: { type: Boolean, state: true },
24
- _text: { type: String, state: true },
25
24
  };
26
25
 
27
26
  // Public properties
@@ -38,7 +37,6 @@ export class Button extends LitElement {
38
37
 
39
38
  // Private state
40
39
  declare _loading: boolean;
41
- declare _text: string | null;
42
40
 
43
41
  constructor() {
44
42
  super();
@@ -53,7 +51,6 @@ export class Button extends LitElement {
53
51
  this.defaultText = "";
54
52
  this.href = "";
55
53
  this._loading = false;
56
- this._text = null;
57
54
  }
58
55
 
59
56
  static styles = css`
@@ -110,42 +107,11 @@ export class Button extends LitElement {
110
107
 
111
108
  connectedCallback() {
112
109
  super.connectedCallback();
113
- this._updateText();
114
-
115
- // Listen for language changes
116
- window.addEventListener("language-changed", this._handleLanguageChange);
117
- }
118
-
119
- disconnectedCallback() {
120
- super.disconnectedCallback();
121
- window.removeEventListener("language-changed", this._handleLanguageChange);
122
- }
123
-
124
- _handleLanguageChange = () => {
125
- this._updateText();
126
- };
127
-
128
- updated(changedProps: PropertyValues) {
129
- super.updated(changedProps);
130
-
131
- if (changedProps.has("key") || changedProps.has("defaultText")) {
132
- this._updateText();
133
- }
134
- }
135
-
136
- /**
137
- * Update text from translations (synchronous like Portfolio)
138
- */
139
- private _updateText() {
140
- if (this.key) {
141
- this._text = getText(this.key);
142
- } else {
143
- this._text = this.defaultText || this.fallback || null;
144
- }
145
- this.requestUpdate();
146
110
  }
147
111
 
148
112
  render() {
113
+ const hasTextProps = this.key || this.defaultText || this.fallback;
114
+
149
115
  return html`
150
116
  <button
151
117
  class=${this.variant}
@@ -154,7 +120,13 @@ export class Button extends LitElement {
154
120
  ?no-background=${this["no-background"]}
155
121
  @click=${this._handleClick}
156
122
  >
157
- ${this._text ? this._text : html`<slot></slot>`}
123
+ ${hasTextProps
124
+ ? html`<ds-text
125
+ .key=${this.key}
126
+ .defaultValue=${this.defaultText}
127
+ .fallback=${this.fallback}
128
+ ></ds-text>`
129
+ : html`<slot></slot>`}
158
130
  </button>
159
131
  `;
160
132
  }
@@ -690,24 +690,30 @@ export class Cycle extends LitElement {
690
690
  style="display: inline-flex; align-items: center; gap: var(--025)"
691
691
  >${this.getValueDisplay(this.currentValue)}</span
692
692
  >`
693
- : this.type === "theme"
693
+ : this.type === "language"
694
694
  ? html`<ds-text
695
- key=${this.currentValue}
696
- default-value=${this.currentValue}
695
+ default-value=${this.getValueDisplay(this.currentValue)}
697
696
  ></ds-text>`
698
- : this.type === "accent-color"
697
+ : this.type === "theme"
699
698
  ? html`<ds-text
700
- key=${this.getColorKey(this.currentValue)}
701
- default-value=${this.getColorName(this.currentValue)}
699
+ key=${this.currentValue}
700
+ default-value=${this.currentValue}
702
701
  ></ds-text>`
703
- : this.type === "page-style"
702
+ : this.type === "accent-color"
704
703
  ? html`<ds-text
705
- key=${this.currentValue}
706
- default-value=${this.currentValue}
704
+ key=${this.getColorKey(this.currentValue)}
705
+ default-value=${this.getColorName(this.currentValue)}
707
706
  ></ds-text>`
708
- : html`<ds-text
709
- default-value=${this.getValueDisplay(this.currentValue)}
710
- ></ds-text>`}
707
+ : this.type === "page-style"
708
+ ? html`<ds-text
709
+ key=${this.currentValue}
710
+ default-value=${this.currentValue}
711
+ ></ds-text>`
712
+ : html`<ds-text
713
+ default-value=${this.getValueDisplay(
714
+ this.currentValue
715
+ )}
716
+ ></ds-text>`}
711
717
  </ds-button>
712
718
  ${this.type === "accent-color"
713
719
  ? html`
@@ -39,6 +39,7 @@ export class Text extends LitElement {
39
39
  languageChanged: (() => {
40
40
  console.log("Language changed event received in ds-text");
41
41
  this._currentLanguage = currentLanguage.value;
42
+ this._updateLanguageAttribute();
42
43
  this._loadText();
43
44
  this.requestUpdate();
44
45
  }) as EventListener,
@@ -107,7 +108,9 @@ export class Text extends LitElement {
107
108
 
108
109
  _updateLanguageAttribute() {
109
110
  const lang = this._currentLanguage || currentLanguage.value;
110
- if (lang === "ja") {
111
+ // Check if language is Japanese (handles "ja", "ja-JP", etc.)
112
+ const primaryLang = lang?.toLowerCase().split(/[-_]/)[0] || "";
113
+ if (primaryLang === "ja") {
111
114
  this.setAttribute("data-language", "ja");
112
115
  } else {
113
116
  this.removeAttribute("data-language");
@@ -117,6 +120,8 @@ export class Text extends LitElement {
117
120
  _loadText() {
118
121
  if (!this.key) {
119
122
  this._text = this.defaultValue || this.fallback || "";
123
+ this._updateLanguageAttribute();
124
+ this.requestUpdate();
120
125
  return;
121
126
  }
122
127
 
package/README.md CHANGED
@@ -1,4 +1,4 @@
1
- # DS one (0.2.5-alpha.11)
1
+ # DS one (0.2.5-alpha.12)
2
2
 
3
3
  A plug and play design system
4
4
 
@@ -20,7 +20,7 @@ yarn add ds-one@alpha
20
20
 
21
21
  ```
22
22
 
23
- **Note**: Currently published as alpha version `0.2.5-alpha.11`
23
+ **Note**: Currently published as alpha version `0.2.5-alpha.12`
24
24
 
25
25
  ## Quick Start
26
26
 
@@ -1,4 +1,5 @@
1
- import { LitElement, type PropertyValues } from "lit";
1
+ import { LitElement } from "lit";
2
+ import "./ds-text";
2
3
  export declare class Button extends LitElement {
3
4
  static properties: {
4
5
  variant: {
@@ -42,10 +43,6 @@ export declare class Button extends LitElement {
42
43
  type: BooleanConstructor;
43
44
  state: boolean;
44
45
  };
45
- _text: {
46
- type: StringConstructor;
47
- state: boolean;
48
- };
49
46
  };
50
47
  variant: string;
51
48
  disabled: boolean;
@@ -58,17 +55,9 @@ export declare class Button extends LitElement {
58
55
  defaultText: string;
59
56
  href: string;
60
57
  _loading: boolean;
61
- _text: string | null;
62
58
  constructor();
63
59
  static styles: import("lit").CSSResult;
64
60
  connectedCallback(): void;
65
- disconnectedCallback(): void;
66
- _handleLanguageChange: () => void;
67
- updated(changedProps: PropertyValues): void;
68
- /**
69
- * Update text from translations (synchronous like Portfolio)
70
- */
71
- private _updateText;
72
61
  render(): import("lit-html").TemplateResult<1>;
73
62
  private _handleClick;
74
63
  }
@@ -1 +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"}
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"}
@@ -1,13 +1,10 @@
1
1
  // ds-button.ts
2
2
  // Core button component
3
3
  import { LitElement, html, css } from "lit";
4
- import { getText } from "../0-face/i18n";
4
+ import "./ds-text";
5
5
  export class Button extends LitElement {
6
6
  constructor() {
7
7
  super();
8
- this._handleLanguageChange = () => {
9
- this._updateText();
10
- };
11
8
  this.variant = "title";
12
9
  this.disabled = false;
13
10
  this.bold = false;
@@ -19,37 +16,12 @@ export class Button extends LitElement {
19
16
  this.defaultText = "";
20
17
  this.href = "";
21
18
  this._loading = false;
22
- this._text = null;
23
19
  }
24
20
  connectedCallback() {
25
21
  super.connectedCallback();
26
- this._updateText();
27
- // Listen for language changes
28
- window.addEventListener("language-changed", this._handleLanguageChange);
29
- }
30
- disconnectedCallback() {
31
- super.disconnectedCallback();
32
- window.removeEventListener("language-changed", this._handleLanguageChange);
33
- }
34
- updated(changedProps) {
35
- super.updated(changedProps);
36
- if (changedProps.has("key") || changedProps.has("defaultText")) {
37
- this._updateText();
38
- }
39
- }
40
- /**
41
- * Update text from translations (synchronous like Portfolio)
42
- */
43
- _updateText() {
44
- if (this.key) {
45
- this._text = getText(this.key);
46
- }
47
- else {
48
- this._text = this.defaultText || this.fallback || null;
49
- }
50
- this.requestUpdate();
51
22
  }
52
23
  render() {
24
+ const hasTextProps = this.key || this.defaultText || this.fallback;
53
25
  return html `
54
26
  <button
55
27
  class=${this.variant}
@@ -58,7 +30,13 @@ export class Button extends LitElement {
58
30
  ?no-background=${this["no-background"]}
59
31
  @click=${this._handleClick}
60
32
  >
61
- ${this._text ? this._text : html `<slot></slot>`}
33
+ ${hasTextProps
34
+ ? html `<ds-text
35
+ .key=${this.key}
36
+ .defaultValue=${this.defaultText}
37
+ .fallback=${this.fallback}
38
+ ></ds-text>`
39
+ : html `<slot></slot>`}
62
40
  </button>
63
41
  `;
64
42
  }
@@ -102,7 +80,6 @@ Button.properties = {
102
80
  defaultText: { type: String, attribute: "default-text" },
103
81
  href: { type: String },
104
82
  _loading: { type: Boolean, state: true },
105
- _text: { type: String, state: true },
106
83
  };
107
84
  Button.styles = css `
108
85
  button {
@@ -1 +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,WAAW,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM;IAgBrC,YAAY,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM;IAyBtC,iBAAiB,CAAC,KAAK,EAAE,MAAM;IAe/B,QAAQ,IAAI,MAAM;IAgElB,MAAM;YA0EQ,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"}
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,WAAW,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM;IAgBrC,YAAY,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM;IAyBtC,iBAAiB,CAAC,KAAK,EAAE,MAAM;IAe/B,QAAQ,IAAI,MAAM;IAgElB,MAAM;YAgFQ,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"}
@@ -544,24 +544,28 @@ export class Cycle extends LitElement {
544
544
  style="display: inline-flex; align-items: center; gap: var(--025)"
545
545
  >${this.getValueDisplay(this.currentValue)}</span
546
546
  >`
547
- : this.type === "theme"
547
+ : this.type === "language"
548
548
  ? html `<ds-text
549
- key=${this.currentValue}
550
- default-value=${this.currentValue}
549
+ default-value=${this.getValueDisplay(this.currentValue)}
551
550
  ></ds-text>`
552
- : this.type === "accent-color"
551
+ : this.type === "theme"
553
552
  ? html `<ds-text
554
- key=${this.getColorKey(this.currentValue)}
555
- default-value=${this.getColorName(this.currentValue)}
553
+ key=${this.currentValue}
554
+ default-value=${this.currentValue}
556
555
  ></ds-text>`
557
- : this.type === "page-style"
556
+ : this.type === "accent-color"
558
557
  ? html `<ds-text
559
- key=${this.currentValue}
560
- default-value=${this.currentValue}
558
+ key=${this.getColorKey(this.currentValue)}
559
+ default-value=${this.getColorName(this.currentValue)}
561
560
  ></ds-text>`
562
- : html `<ds-text
563
- default-value=${this.getValueDisplay(this.currentValue)}
564
- ></ds-text>`}
561
+ : this.type === "page-style"
562
+ ? html `<ds-text
563
+ key=${this.currentValue}
564
+ default-value=${this.currentValue}
565
+ ></ds-text>`
566
+ : html `<ds-text
567
+ default-value=${this.getValueDisplay(this.currentValue)}
568
+ ></ds-text>`}
565
569
  </ds-button>
566
570
  ${this.type === "accent-color"
567
571
  ? html `
@@ -1 +1 @@
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;IACd,gBAAgB,EAAE,MAAM,CAAC;IACjC,OAAO,CAAC,aAAa,CAAqC;;IAqB1D,MAAM,CAAC,MAAM,0BAgBX;IAEF,iBAAiB;IAsBjB,oBAAoB;IAYpB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAQ/C,wBAAwB;IASxB,SAAS;IAiBT,MAAM;CAGP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,IAAI,CAAC;KACjB;CACF"}
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;IACd,gBAAgB,EAAE,MAAM,CAAC;IACjC,OAAO,CAAC,aAAa,CAAqC;;IAsB1D,MAAM,CAAC,MAAM,0BAgBX;IAEF,iBAAiB;IAsBjB,oBAAoB;IAYpB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAQ/C,wBAAwB;IAWxB,SAAS;IAmBT,MAAM;CAGP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,IAAI,CAAC;KACjB;CACF"}
@@ -29,6 +29,7 @@ export class Text extends LitElement {
29
29
  languageChanged: (() => {
30
30
  console.log("Language changed event received in ds-text");
31
31
  this._currentLanguage = currentLanguage.value;
32
+ this._updateLanguageAttribute();
32
33
  this._loadText();
33
34
  this.requestUpdate();
34
35
  }),
@@ -59,7 +60,9 @@ export class Text extends LitElement {
59
60
  }
60
61
  _updateLanguageAttribute() {
61
62
  const lang = this._currentLanguage || currentLanguage.value;
62
- if (lang === "ja") {
63
+ // Check if language is Japanese (handles "ja", "ja-JP", etc.)
64
+ const primaryLang = lang?.toLowerCase().split(/[-_]/)[0] || "";
65
+ if (primaryLang === "ja") {
63
66
  this.setAttribute("data-language", "ja");
64
67
  }
65
68
  else {
@@ -69,6 +72,8 @@ export class Text extends LitElement {
69
72
  _loadText() {
70
73
  if (!this.key) {
71
74
  this._text = this.defaultValue || this.fallback || "";
75
+ this._updateLanguageAttribute();
76
+ this.requestUpdate();
72
77
  return;
73
78
  }
74
79
  try {