ds-one 0.2.0-alpha.3 → 0.2.5-alpha.10

package/dist/{utils/language.js → 0-face/i18n.js}

@@ -1,47 +1,173 @@
-// Import the JSON directly to ensure it's bundled
-import translationKeys from "./keys.json";
+// Bundled translations (keys.json may not exist - will use external translations if not available)
+// This is a fallback for when external translations aren't loaded
+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;
+// CDN Loader: Automatically detects and loads translation JSON files
+// for CDN users who want to use external translations
+const DEFAULT_TRANSLATION_FILE = "./translations.json";
+let loadAttempted = false;
+function normalizeCandidate(path) {
+    if (!path) {
+        return null;
+    }
+    const trimmed = path.trim();
+    if (!trimmed) {
+        return null;
+    }
+    if (trimmed.startsWith("./") ||
+        trimmed.startsWith("../") ||
+        trimmed.startsWith("/") ||
+        /^https?:\/\//i.test(trimmed)) {
+        return trimmed;
+    }
+    return `./${trimmed}`;
+}
+function findAttributeCandidate() {
+    if (typeof document === "undefined") {
+        return null;
+    }
+    const scriptWithAttribute = document.querySelector("script[data-ds-one-translations]");
+    const scriptCandidate = scriptWithAttribute?.getAttribute("data-ds-one-translations");
+    if (scriptCandidate) {
+        return scriptCandidate;
+    }
+    const metaCandidate = document
+        .querySelector('meta[name="ds-one:translations"]')
+        ?.getAttribute("content");
+    if (metaCandidate) {
+        return metaCandidate;
+    }
+    const linkCandidate = document
+        .querySelector('link[rel="ds-one-translations"]')
+        ?.getAttribute("href");
+    if (linkCandidate) {
+        return linkCandidate;
+    }
+    return null;
+}
+function resolveTranslationSources() {
+    const candidates = [];
+    const windowCandidate = typeof window !== "undefined" ? window.DS_ONE_TRANSLATIONS_FILE : null;
+    const attributeCandidate = findAttributeCandidate();
+    // Only use explicitly configured paths, or the single default
+    const windowNormalized = normalizeCandidate(windowCandidate ?? "");
+    if (windowNormalized) {
+        candidates.push(windowNormalized);
+    }
+    const attrNormalized = normalizeCandidate(attributeCandidate ?? "");
+    if (attrNormalized && !candidates.includes(attrNormalized)) {
+        candidates.push(attrNormalized);
+    }
+    // Only try default if no explicit path was configured
+    if (candidates.length === 0) {
+        candidates.push(DEFAULT_TRANSLATION_FILE);
+    }
+    return candidates;
+}
+function validateTranslationMap(candidate) {
+    if (!candidate || typeof candidate !== "object") {
+        return false;
+    }
+    return Object.values(candidate).every((entry) => entry && typeof entry === "object");
+}
+async function fetchTranslationFile(source) {
+    try {
+        const response = await fetch(source);
+        if (!response.ok) {
+            // 404 is expected if no translations file exists - don't log as error
+            return null;
+        }
+        const translations = await response.json();
+        if (!validateTranslationMap(translations)) {
+            console.warn(`[DS one] Invalid translation format in ${source}. Expected object with language codes as keys.`);
+            return null;
+        }
+        const languages = Object.keys(translations);
+        if (languages.length === 0) {
+            console.warn(`[DS one] No languages found in ${source}`);
+            return null;
+        }
+        return translations;
+    }
+    catch {
+        // Silently fail - file likely doesn't exist or isn't valid JSON
+        return null;
+    }
+}
+/**
+ * Attempts to load translations from a JSON file in the same directory
+ */
+async function loadExternalTranslations() {
+    // Only attempt once
+    if (loadAttempted) {
+        return false;
+    }
+    loadAttempted = true;
+    if (typeof window === "undefined") {
+        return false;
+    }
+    // Check if translations are already loaded (e.g., by the application)
+    if (window.DS_ONE_TRANSLATIONS &&
+        Object.keys(window.DS_ONE_TRANSLATIONS).length > 0) {
+        console.log(`[DS one] Translations already loaded (${Object.keys(window.DS_ONE_TRANSLATIONS).length} languages), skipping auto-load`);
+        return true;
+    }
+    const sources = resolveTranslationSources();
+    for (const source of sources) {
+        const translations = await fetchTranslationFile(source);
+        if (!translations) {
+            continue;
+        }
+        window.DS_ONE_TRANSLATIONS = translations;
+        const languages = Object.keys(translations);
+        console.log(`[DS one] External translations loaded from ${source}: ${languages.length} language(s) – ${languages.join(", ")}`);
+        window.dispatchEvent(new CustomEvent("translations-ready"));
+        return true;
+    }
+    console.info(`[DS one] No external translations found at ${sources[0] ?? DEFAULT_TRANSLATION_FILE}. Using bundled translations.`);
+    return false;
+}
 // Get translation data - prioritize external, fall back to bundled
 function getTranslationData() {
     // Check for externally loaded translations first (CDN usage)
@@ -53,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) {
@@ -162,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) {
@@ -245,6 +367,19 @@ export const currentLanguage = {
         }));
     },
 };
+// Auto-load translations when this module is imported (for CDN bundle)
+if (typeof window !== "undefined") {
+    // Wait a bit to ensure the DOM is ready
+    if (document.readyState === "loading") {
+        document.addEventListener("DOMContentLoaded", () => {
+            loadExternalTranslations();
+        });
+    }
+    else {
+        // DOM is already ready
+        loadExternalTranslations();
+    }
+}
 // Listen for external translations being loaded
 if (typeof window !== "undefined") {
     window.addEventListener("translations-ready", () => {
@@ -252,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", {
@@ -267,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", {
@@ -287,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) {
@@ -309,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/0-face/preferences.d.ts

@@ -0,0 +1,9 @@
+import type { LanguageCode } from "./i18n";
+import type { ThemeType } from "./theme";
+export type Preferences = {
+    language?: LanguageCode;
+    theme?: ThemeType;
+    [key: string]: unknown;
+};
+export declare function savePreferences(preferences: Preferences): void;
+//# sourceMappingURL=preferences.d.ts.map

package/dist/0-face/preferences.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"preferences.d.ts","sourceRoot":"","sources":["../../DS1/0-face/preferences.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,QAAQ,CAAC;AAC3C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzC,MAAM,MAAM,WAAW,GAAG;IACxB,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB,CAAC;AAEF,wBAAgB,eAAe,CAAC,WAAW,EAAE,WAAW,GAAG,IAAI,CAa9D"}

package/dist/0-face/preferences.js

@@ -0,0 +1,14 @@
+export function savePreferences(preferences) {
+    if (typeof window === "undefined") {
+        return;
+    }
+    try {
+        const raw = window.localStorage?.getItem("ds-one:preferences");
+        const existing = raw ? JSON.parse(raw) : {};
+        const next = { ...existing, ...preferences };
+        window.localStorage?.setItem("ds-one:preferences", JSON.stringify(next));
+    }
+    catch (error) {
+        console.warn("ds-one: unable to persist preferences", error);
+    }
+}

package/dist/0-face/pricing.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Currency label utilities for regional price display
+ *
+ * Note: This module provides currency symbols/labels based on language and region.
+ * Consider moving this functionality into i18n.ts as it's region/locale-related.
+ * Actual price values will be stored in a database or managed via Stripe.
+ */
+import type { LanguageCode } from "./i18n";
+type PriceLabelOptions = {
+    language: LanguageCode;
+    country?: string;
+};
+export declare function getPriceLabel(options: PriceLabelOptions): string;
+export {};
+//# sourceMappingURL=pricing.d.ts.map

package/dist/0-face/pricing.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pricing.d.ts","sourceRoot":"","sources":["../../DS1/0-face/pricing.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,QAAQ,CAAC;AAE3C,KAAK,iBAAiB,GAAG;IACvB,QAAQ,EAAE,YAAY,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAgBF,wBAAgB,aAAa,CAAC,OAAO,EAAE,iBAAiB,GAAG,MAAM,CA2BhE"}

package/dist/0-face/pricing.js

@@ -0,0 +1,46 @@
+/**
+ * Currency label utilities for regional price display
+ *
+ * Note: This module provides currency symbols/labels based on language and region.
+ * Consider moving this functionality into i18n.ts as it's region/locale-related.
+ * Actual price values will be stored in a database or managed via Stripe.
+ */
+// Simple price label mapping based on language/country
+const PRICE_LABELS = {
+    da: "kr.",
+    nb: "kr.",
+    sv: "kr.",
+    de: "€",
+    en: "$",
+    pt: "€",
+    es: "€",
+    zh: "¥",
+    ja: "¥",
+    ko: "₩",
+};
+export function getPriceLabel(options) {
+    const { language, country } = options;
+    // If country is provided, try to map it to a currency
+    if (country) {
+        const countryUpper = country.toUpperCase();
+        // Add country-specific mappings if needed
+        if (countryUpper === "US" || countryUpper === "USA") {
+            return "$";
+        }
+        if (countryUpper === "GB" || countryUpper === "UK") {
+            return "£";
+        }
+        if (countryUpper === "JP" || countryUpper === "JPN") {
+            return "¥";
+        }
+        if (countryUpper === "CN" || countryUpper === "CHN") {
+            return "¥";
+        }
+        if (countryUpper === "KR" || countryUpper === "KOR") {
+            return "₩";
+        }
+    }
+    // Fall back to language-based mapping
+    const primaryLang = language.toLowerCase().split(/[-_]/)[0];
+    return PRICE_LABELS[primaryLang] || "$";
+}

package/dist/0-face/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../DS1/0-face/theme.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AAiBzC,eAAO,MAAM,YAAY,qDAAuC,CAAC;AAEjE,wBAAgB,QAAQ,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI,CAwB/C"}

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

@@ -1,7 +1,7 @@
 // ds-button.ts
 // Core button component
 import { LitElement, html, css } from "lit";
-import { getText } from "../utils/language";
+import { getText } from "../0-face/i18n";
 export class Button extends LitElement {
     constructor() {
         super();
@@ -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"}