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

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;

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;IAM5C,SAAS,IAAI,IAAI;IAiBjB,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"}

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

@@ -1,9 +1,10 @@
-import { LitElement, html, css } from "lit";
+import { LitElement, html, unsafeCSS } from "lit";
 import { translate } from "../0-face/i18n";
+import styles from "./styles/ds-tooltip.css?inline";
 export class Tooltip extends LitElement {
     constructor() {
         super();
-        this.key = "";
+        this.text = "";
         this.defaultValue = "";
         this._text = "";
         this._visible = false;
@@ -54,23 +55,23 @@ export class Tooltip extends LitElement {
         this.removeEventListener("focusout", this.boundHostHandlers.focusout);
     }
     updated(changed) {
-        if (changed.has("key") || changed.has("defaultValue")) {
+        if (changed.has("text") || changed.has("defaultValue")) {
             this._loadText();
         }
     }
     _loadText() {
-        if (!this.key) {
+        if (!this.text) {
             this._text = this.defaultValue || "";
             this.requestUpdate();
             return;
         }
         try {
-            const t = translate(this.key);
-            this._text = t && t !== this.key ? t : this.defaultValue || this.key;
+            const t = translate(this.text);
+            this._text = t && t !== this.text ? t : this.defaultValue || this.text;
         }
         catch (err) {
-            console.error("ds-tooltip: error loading text for key", this.key, err);
-            this._text = this.defaultValue || this.key;
+            console.error("ds-tooltip: error loading text for text", this.text, err);
+            this._text = this.defaultValue || this.text;
         }
         this.requestUpdate();
     }
@@ -85,57 +86,10 @@ export class Tooltip extends LitElement {
     }
 }
 Tooltip.properties = {
-    key: { type: String, reflect: true },
+    text: { type: String, reflect: true },
     defaultValue: { type: String, reflect: true, attribute: "default-value" },
     _text: { state: true },
     _visible: { state: true },
 };
-Tooltip.styles = css `
-    :host {
-      position: relative;
-      display: inline-block;
-    }
-
-    .slot-wrapper {
-      display: inline-flex;
-      align-items: center;
-    }
-
-    .bubble {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      position: absolute;
-      left: 50%;
-      bottom: 100%;
-      transform: translate(-50%, calc(-2px * var(--sf)));
-      z-index: 1000;
-      pointer-events: none;
-      height: calc(var(--08) * var(--sf));
-      opacity: 0;
-      transition:
-        opacity 120ms ease,
-        transform 120ms ease;
-      background-color: light-dark(var(--black), var(--white));
-      color: light-dark(var(--white), var(--black));
-      border-radius: 0;
-      font-size: var(--type-size-default);
-      padding: 0px calc(1px * var(--sf));
-      font-family: var(
-        --typeface,
-        -apple-system,
-        BlinkMacSystemFont,
-        "Segoe UI",
-        Roboto,
-        sans-serif
-      );
-      font-weight: 500;
-      white-space: nowrap;
-      min-width: max-content;
-    }
-
-    .bubble.visible {
-      opacity: 1;
-    }
-  `;
+Tooltip.styles = unsafeCSS(styles);
 customElements.define("ds-tooltip", Tooltip);