ds-one 0.2.5-alpha.8 → 0.3.0-alpha.1

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

@@ -1 +1,128 @@
+import { LitElement } from "lit";
+import "./ds-text";
+export declare class Input extends LitElement {
+    static properties: {
+        type: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        name: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        value: {
+            type: StringConstructor;
+        };
+        placeholder: {
+            type: StringConstructor;
+        };
+        placeholderKey: {
+            type: StringConstructor;
+            attribute: string;
+        };
+        label: {
+            type: StringConstructor;
+        };
+        labelText: {
+            type: StringConstructor;
+            attribute: string;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        readonly: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        required: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        autofocus: {
+            type: BooleanConstructor;
+        };
+        autocomplete: {
+            type: StringConstructor;
+        };
+        pattern: {
+            type: StringConstructor;
+        };
+        minlength: {
+            type: NumberConstructor;
+        };
+        maxlength: {
+            type: NumberConstructor;
+        };
+        min: {
+            type: StringConstructor;
+        };
+        max: {
+            type: StringConstructor;
+        };
+        step: {
+            type: StringConstructor;
+        };
+        variant: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        error: {
+            type: StringConstructor;
+        };
+        errorText: {
+            type: StringConstructor;
+            attribute: string;
+        };
+        _focused: {
+            type: BooleanConstructor;
+            state: boolean;
+        };
+    };
+    type: "text" | "password" | "email" | "number" | "tel" | "url" | "search" | "date" | "time" | "datetime-local";
+    name: string;
+    value: string;
+    placeholder: string;
+    placeholderKey: string;
+    label: string;
+    labelText: string;
+    disabled: boolean;
+    readonly: boolean;
+    required: boolean;
+    autofocus: boolean;
+    autocomplete: string;
+    pattern: string;
+    minlength: number;
+    maxlength: number;
+    min: string;
+    max: string;
+    step: string;
+    variant: "default" | "filled" | "outlined";
+    error: string;
+    errorText: string;
+    _focused: boolean;
+    constructor();
+    static styles: import("lit").CSSResult;
+    private _handleInput;
+    private _handleFocus;
+    private _handleBlur;
+    /**
+     * Focus the input element
+     */
+    focus(): void;
+    /**
+     * Blur the input element
+     */
+    blur(): void;
+    /**
+     * Select all text in the input
+     */
+    select(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-input": Input;
+    }
+}
 //# sourceMappingURL=ds-input.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ds-input.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-input.ts"],"names":[],"mappings":""}
+{"version":3,"file":"ds-input.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-input.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAC5C,OAAO,WAAW,CAAC;AAEnB,qBAAa,KAAM,SAAQ,UAAU;IACnC,MAAM,CAAC,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAuBf;IAEM,IAAI,EACR,MAAM,GACN,UAAU,GACV,OAAO,GACP,QAAQ,GACR,KAAK,GACL,KAAK,GACL,QAAQ,GACR,MAAM,GACN,MAAM,GACN,gBAAgB,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,SAAS,GAAG,QAAQ,GAAG,UAAU,CAAC;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;;IA4B1B,MAAM,CAAC,MAAM,0BA2GX;IAEF,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,WAAW;IAKnB;;OAEG;IACH,KAAK,IAAI,IAAI;IAKb;;OAEG;IACH,IAAI,IAAI,IAAI;IAKZ;;OAEG;IACH,MAAM,IAAI,IAAI;IAKd,MAAM;CAoDP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,KAAK,CAAC;KACnB;CACF"}

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

@@ -1 +1,252 @@
-// here should be an input component
+// ds-input.ts
+// Input component for text and other input types
+import { LitElement, html, css } from "lit";
+import "./ds-text";
+export class Input extends LitElement {
+    constructor() {
+        super();
+        this.type = "text";
+        this.name = "";
+        this.value = "";
+        this.placeholder = "";
+        this.placeholderKey = "";
+        this.label = "";
+        this.labelText = "";
+        this.disabled = false;
+        this.readonly = false;
+        this.required = false;
+        this.autofocus = false;
+        this.autocomplete = "off";
+        this.pattern = "";
+        this.minlength = 0;
+        this.maxlength = 0;
+        this.min = "";
+        this.max = "";
+        this.step = "";
+        this.variant = "default";
+        this.error = "";
+        this.errorText = "";
+        this._focused = false;
+    }
+    _handleInput(e) {
+        const target = e.target;
+        this.value = target.value;
+        this.dispatchEvent(new CustomEvent("input-change", {
+            detail: { value: this.value, name: this.name },
+            bubbles: true,
+        }));
+    }
+    _handleFocus() {
+        this._focused = true;
+        this.dispatchEvent(new CustomEvent("input-focus", { bubbles: true }));
+    }
+    _handleBlur() {
+        this._focused = false;
+        this.dispatchEvent(new CustomEvent("input-blur", { bubbles: true }));
+    }
+    /**
+     * Focus the input element
+     */
+    focus() {
+        const input = this.shadowRoot?.querySelector("input");
+        input?.focus();
+    }
+    /**
+     * Blur the input element
+     */
+    blur() {
+        const input = this.shadowRoot?.querySelector("input");
+        input?.blur();
+    }
+    /**
+     * Select all text in the input
+     */
+    select() {
+        const input = this.shadowRoot?.querySelector("input");
+        input?.select();
+    }
+    render() {
+        const hasError = Boolean(this.error || this.errorText);
+        return html `
+      <div class="input-wrapper">
+        ${this.label || this.labelText
+            ? html `
+              <label for="input">
+                ${this.labelText
+                ? html `<ds-text .text=${this.labelText}></ds-text>`
+                : this.label}
+              </label>
+            `
+            : null}
+
+        <div class="input-container">
+          <input
+            id="input"
+            .type=${this.type}
+            .name=${this.name}
+            .value=${this.value}
+            .placeholder=${this.placeholder}
+            ?disabled=${this.disabled}
+            ?readonly=${this.readonly}
+            ?required=${this.required}
+            ?autofocus=${this.autofocus}
+            autocomplete=${this.autocomplete}
+            pattern=${this.pattern || ""}
+            minlength=${this.minlength || ""}
+            maxlength=${this.maxlength || ""}
+            min=${this.min}
+            max=${this.max}
+            step=${this.step}
+            class=${hasError ? "has-error" : ""}
+            @input=${this._handleInput}
+            @focus=${this._handleFocus}
+            @blur=${this._handleBlur}
+          />
+        </div>
+
+        ${hasError
+            ? html `
+              <div class="error-message">
+                ${this.errorText
+                ? html `<ds-text .text=${this.errorText}></ds-text>`
+                : this.error}
+              </div>
+            `
+            : null}
+      </div>
+    `;
+    }
+}
+Input.properties = {
+    type: { type: String, reflect: true },
+    name: { type: String, reflect: true },
+    value: { type: String },
+    placeholder: { type: String },
+    placeholderKey: { type: String, attribute: "placeholder-key" },
+    label: { type: String },
+    labelText: { type: String, attribute: "label-text" },
+    disabled: { type: Boolean, reflect: true },
+    readonly: { type: Boolean, reflect: true },
+    required: { type: Boolean, reflect: true },
+    autofocus: { type: Boolean },
+    autocomplete: { type: String },
+    pattern: { type: String },
+    minlength: { type: Number },
+    maxlength: { type: Number },
+    min: { type: String },
+    max: { type: String },
+    step: { type: String },
+    variant: { type: String, reflect: true },
+    error: { type: String },
+    errorText: { type: String, attribute: "error-text" },
+    _focused: { type: Boolean, state: true },
+};
+Input.styles = css `
+    :host {
+      display: block;
+      width: 100%;
+    }
+
+    .input-wrapper {
+      display: flex;
+      flex-direction: column;
+      gap: calc(var(--025) * var(--sf, 1));
+      width: 100%;
+    }
+
+    label {
+      font-family: var(--typeface-regular);
+      font-size: calc(12px * var(--sf, 1));
+      color: var(--text-color-secondary);
+    }
+
+    .input-container {
+      position: relative;
+      display: flex;
+      align-items: center;
+      width: 100%;
+    }
+
+    input {
+      width: 100%;
+      height: calc(var(--1) * var(--sf, 1));
+      padding: 0 calc(var(--025) * var(--sf, 1));
+      font-family: var(--typeface-regular);
+      font-size: calc(14px * var(--sf, 1));
+      color: var(--text-color-primary);
+      background-color: var(--input-background, transparent);
+      border: 1px solid var(--input-border-color, var(--border-color, #ccc));
+      border-radius: calc(var(--025) * var(--sf, 1));
+      outline: none;
+      transition:
+        border-color 0.2s ease,
+        box-shadow 0.2s ease;
+      box-sizing: border-box;
+    }
+
+    input::placeholder {
+      color: var(--text-color-tertiary, #999);
+    }
+
+    input:focus {
+      border-color: var(--accent-color, #007aff);
+      box-shadow: 0 0 0 2px var(--input-focus-ring, rgba(0, 122, 255, 0.2));
+    }
+
+    input:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+      background-color: var(--input-disabled-background, #f5f5f5);
+    }
+
+    input:read-only {
+      background-color: var(--input-readonly-background, #fafafa);
+    }
+
+    :host([variant="filled"]) input {
+      background-color: var(
+        --input-filled-background,
+        var(--surface-color-secondary, #f5f5f5)
+      );
+      border: none;
+      border-bottom: 2px solid var(--border-color, #ccc);
+      border-radius: calc(var(--025) * var(--sf, 1))
+        calc(var(--025) * var(--sf, 1)) 0 0;
+    }
+
+    :host([variant="filled"]) input:focus {
+      border-bottom-color: var(--accent-color, #007aff);
+      box-shadow: none;
+    }
+
+    :host([variant="outlined"]) input {
+      background-color: transparent;
+      border: 2px solid var(--border-color, #ccc);
+    }
+
+    :host([variant="outlined"]) input:focus {
+      border-color: var(--accent-color, #007aff);
+    }
+
+    .error-message {
+      font-family: var(--typeface-regular);
+      font-size: calc(12px * var(--sf, 1));
+      color: var(--error-color, #ff3b30);
+      margin-top: calc(var(--025) * var(--sf, 1));
+    }
+
+    :host([required]) label::after {
+      content: " *";
+      color: var(--error-color, #ff3b30);
+    }
+
+    /* Error state */
+    input.has-error {
+      border-color: var(--error-color, #ff3b30);
+    }
+
+    input.has-error:focus {
+      box-shadow: 0 0 0 2px rgba(255, 59, 48, 0.2);
+    }
+  `;
+customElements.define("ds-input", Input);

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

@@ -0,0 +1,32 @@
+import { LitElement } from "lit";
+/**
+ * Page dots indicator component for carousels and pagination.
+ *
+ * Usage:
+ * - <ds-pagedots count="3" active="0"></ds-pagedots>
+ */
+export declare class Pagedots extends LitElement {
+    static properties: {
+        /** Number of dots to display */
+        count: {
+            type: NumberConstructor;
+            reflect: boolean;
+        };
+        /** Index of the active dot (0-based) */
+        active: {
+            type: NumberConstructor;
+            reflect: boolean;
+        };
+    };
+    count: number;
+    active: number;
+    constructor();
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-pagedots": Pagedots;
+    }
+}
+//# sourceMappingURL=ds-pagedots.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-pagedots.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-pagedots.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAGlD;;;;;GAKG;AACH,qBAAa,QAAS,SAAQ,UAAU;IACtC,MAAM,CAAC,UAAU;QACf,gCAAgC;;;;;QAEhC,wCAAwC;;;;;MAExC;IAEM,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;;IAQvB,MAAM,CAAC,MAAM,0BAAqB;IAElC,MAAM;CAeP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,QAAQ,CAAC;KACzB;CACF"}

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

@@ -0,0 +1,36 @@
+import { LitElement, html, unsafeCSS } from "lit";
+import styles from "./styles/ds-pagedots.css?inline";
+/**
+ * Page dots indicator component for carousels and pagination.
+ *
+ * Usage:
+ * - <ds-pagedots count="3" active="0"></ds-pagedots>
+ */
+export class Pagedots extends LitElement {
+    constructor() {
+        super();
+        this.count = 3;
+        this.active = 0;
+    }
+    render() {
+        const dots = Array.from({ length: this.count }, (_, i) => i);
+        return html `
+      ${dots.map((index) => html `
+          <span
+            class="dot ${index === this.active ? "active" : ""}"
+            role="button"
+            aria-label="Slide ${index + 1}"
+            aria-current="${index === this.active ? "true" : "false"}"
+          ></span>
+        `)}
+    `;
+    }
+}
+Pagedots.properties = {
+    /** Number of dots to display */
+    count: { type: Number, reflect: true },
+    /** Index of the active dot (0-based) */
+    active: { type: Number, reflect: true },
+};
+Pagedots.styles = unsafeCSS(styles);
+customElements.define("ds-pagedots", Pagedots);

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

@@ -3,13 +3,13 @@ import { LitElement } from "lit";
  * A component for displaying text from translations
  *
  * @element ds-text
- * @prop {string} key - The translation key to use
+ * @prop {string} text - The translation text to use
  * @prop {string} defaultValue - Default value if translation is not found
  * @prop {string} fallback - Optional fallback text if translation is not found (deprecated, use defaultValue)
  */
 export declare class Text extends LitElement {
     static get properties(): {
-        key: {
+        text: {
             type: StringConstructor;
             reflect: boolean;
         };
@@ -27,16 +27,18 @@ export declare class Text extends LitElement {
             state: boolean;
         };
     };
-    key: string;
+    text: string;
     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,0BAcX;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,EAAmB,MAAM,KAAK,CAAC;AAIlD;;;;;;;GAOG;AACH,qBAAa,IAAK,SAAQ,UAAU;IAClC,MAAM,KAAK,UAAU;;;;;;;;;;;;;;;;;;MAOpB;IAEO,IAAI,EAAE,MAAM,CAAC;IACb,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,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"}

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

@@ -1,17 +1,18 @@
-import { LitElement, html, css } from "lit";
-import { getText } from "../0-face/i18n";
+import { LitElement, html, unsafeCSS } from "lit";
+import { getText, currentLanguage } from "../0-face/i18n";
+import styles from "./styles/ds-text.css?inline";
 /**
  * A component for displaying text from translations
  *
  * @element ds-text
- * @prop {string} key - The translation key to use
+ * @prop {string} text - The translation text to use
  * @prop {string} defaultValue - Default value if translation is not found
  * @prop {string} fallback - Optional fallback text if translation is not found (deprecated, use defaultValue)
  */
 export class Text extends LitElement {
     static get properties() {
         return {
-            key: { type: String, reflect: true },
+            text: { 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 },
@@ -19,20 +20,26 @@ export class Text extends LitElement {
     }
     constructor() {
         super();
-        this.key = "";
+        this.text = "";
         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._updateLanguageAttribute();
                 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);
@@ -48,42 +55,57 @@ export class Text extends LitElement {
     }
     updated(changedProperties) {
         super.updated(changedProperties);
-        if (changedProperties.has("key") || changedProperties.has("defaultValue")) {
+        if (changedProperties.has("text") || changedProperties.has("defaultValue")) {
             this._loadText();
         }
     }
+    _updateLanguageAttribute() {
+        const lang = this._currentLanguage || currentLanguage.value;
+        // Handles "ja", "ja-JP", "zh-Hant", "zh-Hans", etc.
+        const parts = (lang || "").toLowerCase().split(/[-_]/).filter(Boolean);
+        const primaryLang = parts[0] || "";
+        if (primaryLang === "ja") {
+            this.setAttribute("data-language", "ja");
+            return;
+        }
+        if (primaryLang === "zh") {
+            // Prefer explicit script; otherwise infer from common regions.
+            const hasHans = parts.includes("hans") || parts.includes("cn") || parts.includes("sg");
+            const hasHant = parts.includes("hant") ||
+                parts.includes("tw") ||
+                parts.includes("hk") ||
+                parts.includes("mo");
+            if (hasHans)
+                this.setAttribute("data-language", "zh-hans");
+            else if (hasHant)
+                this.setAttribute("data-language", "zh-hant");
+            else
+                this.setAttribute("data-language", "zh");
+            return;
+        }
+        this.removeAttribute("data-language");
+    }
     _loadText() {
-        if (!this.key) {
+        if (!this.text) {
             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;
+            const translatedText = getText(this.text);
+            this._text = translatedText || this.defaultValue || this.fallback || this.text;
         }
         catch (error) {
-            console.error("Error loading text for key:", this.key, error);
-            this._text = this.defaultValue || this.fallback || this.key;
+            console.error("Error loading text for text:", this.text, error);
+            this._text = this.defaultValue || this.fallback || this.text;
         }
+        this._updateLanguageAttribute();
         this.requestUpdate();
     }
     render() {
-        return html `<span>${this._text || this.defaultValue || this.key}</span>`;
+        return html `<span>${this._text || this.defaultValue || this.text}</span>`;
     }
 }
-Text.styles = css `
-    :host {
-      display: inline;
-      font-family: var(--typeface);
-      font-size: calc(var(--type-size-default) * var(--scaling-factor));
-      font-weight: var(--type-weight-default);
-      line-height: calc(var(--type-lineheight-default) * var(--scaling-factor));
-      letter-spacing: calc(
-        var(--type-letterspacing-default) * var(--scaling-factor)
-      );
-      text-align: var(--text-align-default);
-      text-transform: var(--text-transform-default);
-      text-decoration: var(--text-decoration-default);
-    }
-  `;
+Text.styles = unsafeCSS(styles);
 customElements.define("ds-text", Text);

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

@@ -1,7 +1,7 @@
 import { LitElement } from "lit";
 export declare class Tooltip extends LitElement {
     static properties: {
-        key: {
+        text: {
             type: StringConstructor;
             reflect: boolean;
         };
@@ -17,7 +17,7 @@ export declare class Tooltip extends LitElement {
             state: boolean;
         };
     };
-    key: string;
+    text: string;
     defaultValue: string;
     private _text;
     private _visible;
@@ -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,EAAmB,MAAM,KAAK,CAAC;AAIlD,qBAAa,OAAQ,SAAQ,UAAU;IACrC,MAAM,CAAC,UAAU;;;;;;;;;;;;;;;;MAKf;IAEM,IAAI,EAAE,MAAM,CAAC;IACb,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,0BAAqB;IAElC,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"}