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

package/dist/0-face/i18n.js

@@ -4,42 +4,42 @@ let translationKeys = {};
 // Primary language list – prioritise the 10 requested languages when cycling
 const LANGUAGE_PRIORITY_ORDER = [
     "da",
-    "nb",
-    "sv",
-    "pt",
+    "de",
+    "en",
     "es",
-    "zh",
-    "ko",
+    "fr",
+    "it",
     "ja",
-    "en",
-    "de",
+    "pt",
+    "sv",
+    "zh",
 ];
 const LANGUAGE_PRIORITY_LOOKUP = new Map(LANGUAGE_PRIORITY_ORDER.map((code, index) => [code, index]));
 // Fallback language names if Intl.DisplayNames is not available
 const FALLBACK_LANGUAGE_NAMES = {
     da: "Danish",
     "da-dk": "Danish",
-    nb: "Norwegian",
-    "nb-no": "Norwegian",
-    sv: "Swedish",
-    "sv-se": "Swedish",
     de: "German",
     "de-de": "German",
     en: "English",
     "en-us": "English",
-    pt: "Portuguese",
-    "pt-pt": "Portuguese",
-    "pt-br": "Portuguese (Brazil)",
     es: "Spanish",
     "es-es": "Spanish",
-    "es-mx": "Spanish (Mexico)",
-    zh: "Chinese",
-    "zh-hans": "Chinese (Simplified)",
-    "zh-hant": "Chinese (Traditional)",
+    fr: "French",
+    "fr-fr": "French",
+    it: "Italian",
+    "it-it": "Italian",
     ja: "Japanese",
     "ja-jp": "Japanese",
-    ko: "Korean",
-    "ko-kr": "Korean",
+    pt: "Portuguese",
+    "pt-pt": "Portuguese",
+    sv: "Swedish",
+    "sv-se": "Swedish",
+    zh: "Chinese",
+    "zh-cn": "Chinese",
+    "zh-tw": "Chinese",
+    "zh-hans": "Chinese",
+    "zh-hant": "Chinese",
 };
 const DISPLAY_NAME_CACHE = new Map();
 let displayNameFallbackWarningShown = false;
@@ -179,7 +179,6 @@ function getTranslationData() {
 }
 // Cached translation data - use getter to always get fresh data
 let translationData = getTranslationData();
-const notionStore = new Map();
 const defaultLanguage = "en";
 function extractPrimarySubtag(code) {
     if (!code) {
@@ -288,33 +287,30 @@ export function getLanguageDisplayName(code, options = {}) {
 const BROWSER_LANGUAGE_PREFERENCES = {
     da: "da",
     "da-dk": "da",
-    no: "nb",
-    nb: "nb",
-    "nb-no": "nb",
-    nn: "nn",
-    "nn-no": "nn",
-    sv: "sv",
-    "sv-se": "sv",
-    pt: "pt",
-    "pt-pt": "pt",
-    "pt-br": "pt",
+    de: "de",
+    "de-de": "de",
+    en: "en",
+    "en-us": "en",
+    "en-gb": "en",
     es: "es",
     "es-es": "es",
     "es-mx": "es",
+    fr: "fr",
+    "fr-fr": "fr",
+    it: "it",
+    "it-it": "it",
+    ja: "ja",
+    "ja-jp": "ja",
+    pt: "pt",
+    "pt-pt": "pt",
+    "pt-br": "pt",
+    sv: "sv",
+    "sv-se": "sv",
     zh: "zh",
     "zh-cn": "zh",
     "zh-hans": "zh",
     "zh-tw": "zh",
     "zh-hant": "zh",
-    ko: "ko",
-    "ko-kr": "ko",
-    ja: "ja",
-    "ja-jp": "ja",
-    en: "en",
-    "en-us": "en",
-    "en-gb": "en",
-    de: "de",
-    "de-de": "de",
 };
 function resolvePreferredLanguage(languageTag) {
     if (!languageTag) {
@@ -391,7 +387,6 @@ if (typeof window !== "undefined") {
         translationData = getTranslationData();
         // Dispatch that translations are loaded
         window.dispatchEvent(new CustomEvent("translations-loaded"));
-        window.notionDataLoaded = true;
         // Dispatch language-changed to update all components
         const currentLang = currentLanguage.value;
         window.dispatchEvent(new CustomEvent("language-changed", {
@@ -406,7 +401,6 @@ if (typeof window !== "undefined") {
 setTimeout(() => {
     // Since we directly imported the data, just dispatch the events
     window.dispatchEvent(new CustomEvent("translations-loaded"));
-    window.notionDataLoaded = true;
     // Also dispatch language-changed with the current language
     const currentLang = currentLanguage.value;
     window.dispatchEvent(new CustomEvent("language-changed", {
@@ -426,7 +420,7 @@ export function translate(key) {
     if (lang !== defaultLanguage && translationData?.[defaultLanguage]?.[key]) {
         return translationData[defaultLanguage][key];
     }
-    console.warn(`[translate] No translation found for key "${key}"`);
+    console.warn(`[DS one (Internationalization)] No translation found for key "${key}"`);
     return key;
 }
 export function hasTranslation(key, language = currentLanguage.value) {
@@ -448,37 +442,6 @@ export function hasTranslation(key, language = currentLanguage.value) {
 export function getText(key) {
     return translate(key);
 }
-// Get text from translation data (async for compatibility)
-export async function getNotionText(key, language = currentLanguage.value) {
-    if (!key) {
-        return null;
-    }
-    if (!translationData || !translationData[language]) {
-        return null;
-    }
-    const text = translationData[language][key];
-    if (text) {
-        return text;
-    }
-    // Fallback to English
-    if (language !== defaultLanguage && translationData[defaultLanguage]?.[key]) {
-        return translationData[defaultLanguage][key];
-    }
-    return null;
-}
-// Store Notion text (for dynamic updates)
-export function setNotionText(key, value, language = currentLanguage.value) {
-    if (!key)
-        return;
-    const bucket = getLanguageBucket(language);
-    bucket.set(key, value);
-}
-function getLanguageBucket(language) {
-    if (!notionStore.has(language)) {
-        notionStore.set(language, new Map());
-    }
-    return notionStore.get(language);
-}
 // Get available languages - dynamically detect from loaded data
 export function getAvailableLanguages() {
     // Always get fresh translation data

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

@@ -0,0 +1 @@
+//# sourceMappingURL=ds-banner.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-banner.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-banner.ts"],"names":[],"mappings":""}

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

@@ -0,0 +1,2 @@
+// ds-banner.ts
+// Core component

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

@@ -22,10 +22,6 @@ export declare class Button extends LitElement {
             type: BooleanConstructor;
             reflect: boolean;
         };
-        notionKey: {
-            type: StringConstructor;
-            attribute: string;
-        };
         key: {
             type: StringConstructor;
         };
@@ -46,7 +42,7 @@ export declare class Button extends LitElement {
             type: BooleanConstructor;
             state: boolean;
         };
-        _notionText: {
+        _text: {
             type: StringConstructor;
             state: boolean;
         };
@@ -56,14 +52,13 @@ export declare class Button extends LitElement {
     bold: boolean;
     "no-background": boolean;
     blank: boolean;
-    notionKey: string | null;
     key: string;
     fallback: string;
     language: string;
     defaultText: string;
     href: string;
     _loading: boolean;
-    _notionText: string | null;
+    _text: string | null;
     constructor();
     static styles: import("lit").CSSResult;
     connectedCallback(): void;

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,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGjE,qBAAa,MAAO,SAAQ,UAAU;IACpC,MAAM,CAAC,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAkBf;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,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,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,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;;IAmBnC,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"}
+{"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"}

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

@@ -13,14 +13,13 @@ export class Button extends LitElement {
         this.bold = false;
         this["no-background"] = false;
         this.blank = false;
-        this.notionKey = null;
         this.key = "";
         this.fallback = "";
         this.language = "en-US";
         this.defaultText = "";
         this.href = "";
         this._loading = false;
-        this._notionText = null;
+        this._text = null;
     }
     connectedCallback() {
         super.connectedCallback();
@@ -43,10 +42,10 @@ export class Button extends LitElement {
      */
     _updateText() {
         if (this.key) {
-            this._notionText = getText(this.key);
+            this._text = getText(this.key);
         }
         else {
-            this._notionText = this.defaultText || this.fallback || null;
+            this._text = this.defaultText || this.fallback || null;
         }
         this.requestUpdate();
     }
@@ -59,7 +58,7 @@ export class Button extends LitElement {
         ?no-background=${this["no-background"]}
         @click=${this._handleClick}
       >
-        ${this._notionText ? this._notionText : html `<slot></slot>`}
+        ${this._text ? this._text : html `<slot></slot>`}
       </button>
     `;
     }
@@ -97,24 +96,23 @@ Button.properties = {
         attribute: "no-background",
     },
     blank: { type: Boolean, reflect: true },
-    notionKey: { type: String, attribute: "notion-key" },
     key: { type: String },
     fallback: { type: String },
     language: { type: String },
     defaultText: { type: String, attribute: "default-text" },
     href: { type: String },
     _loading: { type: Boolean, state: true },
-    _notionText: { type: String, state: true },
+    _text: { type: String, state: true },
 };
 Button.styles = css `
     button {
-      max-height: calc(var(--08) * var(--scaling-factor));
+      max-height: calc(var(--08) * var(--sf));
       border: none;
       cursor: pointer;
-      font-size: calc(var(--type-size-default) * var(--scaling-factor));
-      padding: 0 calc(1px * var(--scaling-factor));
+      font-size: calc(var(--type-size-default) * var(--sf));
+      padding: 0 calc(1px * var(--sf));
       color: var(--button-text-color);
-      font-family: var(--typeface);
+      font-family: var(--typeface-regular);
     }
 
     button.title {
@@ -126,13 +124,13 @@ Button.styles = css `
       background-color: var(--accent-color);
       color: var(--button-text-color);
       text-decoration-line: none;
-      font-family: var(--typeface);
+      font-family: var(--typeface-regular);
     }
 
     button.secondary {
       background-color: var(--button-background-color-secondary);
       color: var(--button-text-color);
-      font-family: var(--typeface);
+      font-family: var(--typeface-regular);
     }
 
     button[bold] {

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

@@ -1,6 +1,7 @@
 import { LitElement } from "lit";
 import "./ds-button";
 import "./ds-icon";
+import "./ds-text";
 export declare class Cycle extends LitElement {
     static get properties(): {
         type: {
@@ -47,6 +48,7 @@ export declare class Cycle extends LitElement {
     disconnectedCallback(): void;
     handleButtonClick(e: Event): void;
     getValueDisplay(value: string): string | any;
+    getColorKey(colorVar: string): string;
     getColorName(colorVar: string): string;
     getNotesStyleIcon(style: string): import("lit-html").TemplateResult<1>;
     getLabel(): string;

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

@@ -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;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;IAgFtB,sBAAsB;IAatB,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM;IASnE,iBAAiB;IAuDvB,qBAAqB;IAKrB,oBAAoB;IA0BpB,iBAAiB,CAAC,CAAC,EAAE,KAAK;IAuJ1B,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,GAAG;IA+C5C,YAAY,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM;IAyBtC,iBAAiB,CAAC,KAAK,EAAE,MAAM;IAe/B,QAAQ,IAAI,MAAM;IAgElB,MAAM;YAuCQ,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"}
+{"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"}

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

@@ -4,12 +4,13 @@ import { currentTheme, setTheme } from "../0-face/theme";
 import { savePreferences } from "../0-face/preferences";
 import "./ds-button";
 import "./ds-icon";
+import "./ds-text";
 // Accent color utilities
 const saveAccentColor = (color) => {
     localStorage.setItem("accentColor", color);
 };
 const getAccentColor = () => {
-    return localStorage.getItem("accentColor") || "--blue"; // Default color if none set
+    return localStorage.getItem("accentColor") || "--sharp-blue"; // Default color if none set
 };
 const applyAccentColor = () => {
     const color = getAccentColor();
@@ -96,12 +97,12 @@ export class Cycle extends LitElement {
         else if (this.type === "accent-color") {
             // Set up accent color cycling
             this.values = [
-                "--light-green",
-                "--green",
-                "--light-blue",
-                "--blue",
+                "--apple-green",
+                "--every-green",
+                "--zenith-blue",
+                "--sharp-blue",
                 "--pink",
-                "--red",
+                "--tuned-red",
                 "--orange",
                 "--yellow",
             ];
@@ -110,8 +111,6 @@ export class Cycle extends LitElement {
             this.currentValue = currentAccentColor;
             // Apply the accent color to ensure it's active
             applyAccentColor();
-            // Set label
-            this.label = this.getLabel();
         }
         else if (this.type === "notes-style-medium") {
             // Set up notes style medium cycling
@@ -183,8 +182,6 @@ export class Cycle extends LitElement {
             this.currentValue = currentAccentColor;
             // Apply the accent color to ensure it's active
             applyAccentColor();
-            // Update label
-            this.label = this.getLabel();
         }
         else if (this.type === "notes-style-medium") {
             // Get current notes style medium
@@ -350,8 +347,8 @@ export class Cycle extends LitElement {
         else if (this.type === "theme") {
             // Try to get translated theme name
             if (this.translationsReady) {
-                const translatedName = translate(`themes.${value}`);
-                if (translatedName && translatedName !== `themes.${value}`) {
+                const translatedName = translate(value);
+                if (translatedName && translatedName !== value) {
                     return translatedName;
                 }
             }
@@ -389,16 +386,30 @@ export class Cycle extends LitElement {
         }
         return value;
     }
+    getColorKey(colorVar) {
+        // Map CSS variables to language keys
+        const colorMap = {
+            "--tuned-red": "red",
+            "--orange": "orange",
+            "--yellow": "yellow",
+            "--apple-green": "appleGreen",
+            "--every-green": "green",
+            "--zenith-blue": "lightBlue",
+            "--sharp-blue": "blue",
+            "--pink": "pink",
+        };
+        return colorMap[colorVar] || colorVar.replace("--", "").replace("-", " ");
+    }
     getColorName(colorVar) {
         // Map CSS variables to language keys
         const colorMap = {
-            "--red": "red",
+            "--tuned-red": "red",
             "--orange": "orange",
             "--yellow": "yellow",
-            "--light-green": "lightGreen",
-            "--green": "green",
-            "--light-blue": "lightBlue",
-            "--blue": "blue",
+            "--apple-green": "appleGreen",
+            "--every-green": "green",
+            "--zenith-blue": "lightBlue",
+            "--sharp-blue": "blue",
             "--pink": "pink",
         };
         const languageKey = colorMap[colorVar];
@@ -495,7 +506,25 @@ export class Cycle extends LitElement {
         return html `
       <div class="cycle-container">
         ${this.type !== "icon-only"
-            ? html `<span class="cycle-label">${this.label}</span>`
+            ? html `${this.type === "language"
+                ? html `<ds-text
+                  key="language"
+                  default-value="Language"
+                  class="cycle-label"
+                ></ds-text>`
+                : this.type === "theme"
+                    ? html `<ds-text
+                    key="theme"
+                    default-value="Theme"
+                    class="cycle-label"
+                  ></ds-text>`
+                    : this.type === "accent-color"
+                        ? html `<ds-text
+                      key="accentColor"
+                      default-value="Accent color"
+                      class="cycle-label"
+                    ></ds-text>`
+                        : html `<span class="cycle-label">${this.label}</span>`}`
             : ""}
         <div
           style="display: flex; align-items: center; ${this.type === "icon-only"
@@ -515,7 +544,24 @@ export class Cycle extends LitElement {
                   style="display: inline-flex; align-items: center; gap: var(--025)"
                   >${this.getValueDisplay(this.currentValue)}</span
                 >`
-            : html `<span>${this.getValueDisplay(this.currentValue)}</span>`}
+            : this.type === "theme"
+                ? html `<ds-text
+                    key=${this.currentValue}
+                    default-value=${this.currentValue}
+                  ></ds-text>`
+                : this.type === "accent-color"
+                    ? html `<ds-text
+                      key=${this.getColorKey(this.currentValue)}
+                      default-value=${this.getColorName(this.currentValue)}
+                    ></ds-text>`
+                    : this.type === "page-style"
+                        ? html `<ds-text
+                        key=${this.currentValue}
+                        default-value=${this.currentValue}
+                      ></ds-text>`
+                        : html `<ds-text
+                        default-value=${this.getValueDisplay(this.currentValue)}
+                      ></ds-text>`}
           </ds-button>
           ${this.type === "accent-color"
             ? html `

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

@@ -13,7 +13,7 @@ export class DateComponent extends LitElement {
 DateComponent.styles = css `
     :host {
       display: inline;
-      font-family: var(--typeface, var(--typeface-regular));
+      font-family: var(--typeface-regular, var(--typeface-regular-regular));
       font-size: inherit;
       color: inherit;
     }

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

@@ -240,8 +240,8 @@ Icon.styles = css `
       display: inline-flex;
       justify-content: center;
       align-items: center;
-      width: calc(16px * var(--scaling-factor));
-      height: calc(16px * var(--scaling-factor));
+      width: calc(16px * var(--sf));
+      height: calc(16px * var(--sf));
     }
 
     svg {
@@ -258,8 +258,8 @@ Icon.styles = css `
       display: flex;
       justify-content: center;
       align-items: center;
-      width: calc(16px * var(--scaling-factor));
-      height: calc(16px * var(--scaling-factor));
+      width: calc(16px * var(--sf));
+      height: calc(16px * var(--sf));
     }
 
     /* Notes style color variable for future implementation */

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

@@ -31,12 +31,14 @@ export declare class Text extends LitElement {
     defaultValue: string;
     fallback: string;
     _text: string;
+    _currentLanguage: string;
     private boundHandlers;
     constructor();
     static styles: import("lit").CSSResult;
     connectedCallback(): void;
     disconnectedCallback(): void;
     updated(changedProperties: Map<string, unknown>): void;
+    _updateLanguageAttribute(): void;
     _loadText(): void;
     render(): import("lit-html").TemplateResult<1>;
 }

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,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"}
+{"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"}

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

@@ -1,5 +1,5 @@
 import { LitElement, html, css } from "lit";
-import { getText } from "../0-face/i18n";
+import { getText, currentLanguage } from "../0-face/i18n";
 /**
  * A component for displaying text from translations
  *
@@ -23,16 +23,21 @@ export class Text extends LitElement {
         this.defaultValue = "";
         this.fallback = "";
         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._loadText();
+                this.requestUpdate();
             }),
         };
     }
     connectedCallback() {
         super.connectedCallback();
+        this._currentLanguage = currentLanguage.value;
+        this._updateLanguageAttribute();
         this._loadText();
         // Listen for language changes
         window.addEventListener("language-changed", this.boundHandlers.languageChanged);
@@ -52,6 +57,15 @@ export class Text extends LitElement {
             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 || "";
@@ -65,6 +79,7 @@ export class Text extends LitElement {
             console.error("Error loading text for key:", this.key, error);
             this._text = this.defaultValue || this.fallback || this.key;
         }
+        this._updateLanguageAttribute();
         this.requestUpdate();
     }
     render() {
@@ -74,10 +89,18 @@ export class Text extends LitElement {
 Text.styles = css `
     :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);
     }
 
-    .loading {
-      opacity: 0.6;
+    :host([data-language="ja"]) {
+      font-family: var(--typeface-regular-jp);
     }
   `;
 customElements.define("ds-text", Text);

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

@@ -28,7 +28,7 @@ export declare class Tooltip extends LitElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
     updated(changed: Map<string, unknown>): void;
-    _loadText(): Promise<void>;
+    _loadText(): void;
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

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

@@ -1 +1 @@
-{"version":3,"file":"ds-tooltip.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-tooltip.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,qBAAa,OAAQ,SAAQ,UAAU;IACrC,MAAM,CAAC,UAAU;;;;;;;;;;;;;;;;MAKf;IAEM,GAAG,EAAE,MAAM,CAAC;IACZ,YAAY,EAAE,MAAM,CAAC;IAC7B,OAAO,CAAC,KAAK,CAAS;IACtB,OAAO,CAAC,QAAQ,CAAU;IAE1B,OAAO,CAAC,mBAAmB,CAGzB;IACF,OAAO,CAAC,iBAAiB,CAKvB;;IAsCF,MAAM,CAAC,MAAM,0BA+CX;IAEF,iBAAiB,IAAI,IAAI;IAmBzB,oBAAoB,IAAI,IAAI;IAiB5B,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAMtC,SAAS,IAAI,OAAO,CAAC,IAAI,CAAC;IAuBhC,MAAM;CAUP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,OAAO,CAAC;KACvB;CACF"}
+{"version":3,"file":"ds-tooltip.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-tooltip.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,qBAAa,OAAQ,SAAQ,UAAU;IACrC,MAAM,CAAC,UAAU;;;;;;;;;;;;;;;;MAKf;IAEM,GAAG,EAAE,MAAM,CAAC;IACZ,YAAY,EAAE,MAAM,CAAC;IAC7B,OAAO,CAAC,KAAK,CAAS;IACtB,OAAO,CAAC,QAAQ,CAAU;IAE1B,OAAO,CAAC,mBAAmB,CAGzB;IACF,OAAO,CAAC,iBAAiB,CAKvB;;IAsCF,MAAM,CAAC,MAAM,0BA+CX;IAEF,iBAAiB,IAAI,IAAI;IAmBzB,oBAAoB,IAAI,IAAI;IAiB5B,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAM5C,SAAS,IAAI,IAAI;IAiBjB,MAAM;CAUP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,OAAO,CAAC;KACvB;CACF"}