ds-one 0.2.5-alpha.16 → 0.2.5-alpha.17

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

@@ -10,9 +10,6 @@ export declare class Cycle extends LitElement {
         values: {
             type: ArrayConstructor;
         };
-        label: {
-            type: StringConstructor;
-        };
         currentValue: {
             type: StringConstructor;
             state: boolean;
@@ -32,7 +29,6 @@ export declare class Cycle extends LitElement {
     static styles: import("lit").CSSResult;
     type: string;
     values: string[];
-    label: string;
     currentValue: string;
     translationsReady: boolean;
     disabled: boolean;
@@ -51,7 +47,6 @@ export declare class Cycle extends LitElement {
     getColorKey(colorVar: string): string;
     getColorName(colorVar: string): string;
     getNotesStyleIcon(style: string): import("lit-html").TemplateResult<1>;
-    getLabel(): string;
     render(): import("lit-html").TemplateResult<1>;
     private waitForTranslations;
     private handleTranslationsLoaded;

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;AACnB,OAAO,WAAW,CAAC;AAqCnB,qBAAa,KAAM,SAAQ,UAAU;IAEnC,MAAM,KAAK,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;MAUpB;IAED,MAAM,CAAC,MAAM,0BAWX;IAIM,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,MAAM,CAAC;IACrB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAGxB,OAAO,CAAC,aAAa,CAOnB;;IAyBF,iBAAiB;IA6BX,gBAAgB;IA6EtB,sBAAsB;IAatB,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM;IASnE,iBAAiB;IAoDvB,qBAAqB;IAKrB,oBAAoB;IA0BpB,iBAAiB,CAAC,CAAC,EAAE,KAAK;IAuJ1B,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,GAAG;IA+C5C,WAAW,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM;IAgBrC,YAAY,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM;IAyBtC,iBAAiB,CAAC,KAAK,EAAE,MAAM;IAe/B,QAAQ,IAAI,MAAM;IAgElB,MAAM;YAgFQ,mBAAmB;IAwBjC,OAAO,CAAC,wBAAwB;IAYhC,OAAO,CAAC,qBAAqB;IAI7B,OAAO,CAAC,kBAAkB;IAI1B,OAAO,CAAC,wBAAwB;IAIhC,OAAO,CAAC,yBAAyB;CAGlC;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,KAAK,CAAC;KACnB;CACF"}
+{"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;;;;;;;;;;;;;;;;;;;;;;MASpB;IAED,MAAM,CAAC,MAAM,0BAoBX;IAIM,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,YAAY,EAAE,MAAM,CAAC;IACrB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAGxB,OAAO,CAAC,aAAa,CAOnB;;IAwBF,iBAAiB;IA6BX,gBAAgB;IA8DtB,sBAAsB;IAatB,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM;IASnE,iBAAiB;IAqCvB,qBAAqB;IAKrB,oBAAoB;IA0BpB,iBAAiB,CAAC,CAAC,EAAE,KAAK;IAiJ1B,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,MAAM;YAoDQ,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

@@ -38,7 +38,6 @@ export class Cycle extends LitElement {
         return {
             type: { type: String },
             values: { type: Array },
-            label: { type: String },
             currentValue: { type: String, state: true }, // Make this a private state property
             translationsReady: { type: Boolean, state: true }, // Track if translations are loaded
             disabled: { type: Boolean, state: true },
@@ -50,7 +49,6 @@ export class Cycle extends LitElement {
         // Initialize properties with default values
         this.type = "";
         this.values = [];
-        this.label = "";
         this.currentValue = "";
         this.translationsReady = false;
         this.disabled = false;
@@ -82,8 +80,6 @@ export class Cycle extends LitElement {
             const availableLanguages = getAvailableLanguagesSync();
             this.values = availableLanguages;
             this.currentValue = currentLanguage.value;
-            // Set label
-            this.label = this.getLabel();
         }
         else if (this.type === "theme") {
             // Set up theme cycling
@@ -91,8 +87,6 @@ export class Cycle extends LitElement {
             // Set initial value based on current theme
             const currentThemeValue = currentTheme.get();
             this.currentValue = currentThemeValue;
-            // Set label
-            this.label = this.getLabel();
         }
         else if (this.type === "accent-color") {
             // Set up accent color cycling
@@ -121,8 +115,6 @@ export class Cycle extends LitElement {
             // Check if this should be disabled based on note behavior
             const currentPageStyle = getPageStyle();
             this.disabled = currentPageStyle === "note";
-            // Set label
-            this.label = this.getLabel();
         }
         else if (this.type === "page-style") {
             // Set up page style cycling
@@ -130,16 +122,12 @@ export class Cycle extends LitElement {
             // Set initial value based on current page style
             const currentPageStyle = getPageStyle();
             this.currentValue = currentPageStyle;
-            // Set label
-            this.label = this.getLabel();
         }
         else if (this.type === "icon-only") {
             // Set up icon-only cycling (no label)
             this.values = ["note", "page"];
             // Set initial value
             this.currentValue = this.values[0];
-            // No label for icon-only type
-            this.label = "";
         }
         // Request update to re-render with new values
         this.requestUpdate();
@@ -166,15 +154,11 @@ export class Cycle extends LitElement {
             // Get current language
             const currentLang = currentLanguage.value;
             this.currentValue = currentLang;
-            // Update label
-            this.label = this.getLabel();
         }
         else if (this.type === "theme") {
             // Get current theme
             const currentThemeValue = currentTheme.get();
             this.currentValue = currentThemeValue;
-            // Update label
-            this.label = this.getLabel();
         }
         else if (this.type === "accent-color") {
             // Get current accent color
@@ -190,22 +174,16 @@ export class Cycle extends LitElement {
             // Check if this should be disabled based on note behavior
             const currentPageStyle = getPageStyle();
             this.disabled = currentPageStyle === "note";
-            // Update label
-            this.label = this.getLabel();
         }
         else if (this.type === "page-style") {
             // Get current page style
             const currentPageStyle = getPageStyle();
             this.currentValue = currentPageStyle;
-            // Update label
-            this.label = this.getLabel();
         }
         else if (this.type === "icon-only") {
             // Get current page style for icon-only
             const currentPageStyle = getPageStyle();
             this.currentValue = currentPageStyle;
-            // Update label
-            this.label = "";
         }
         this.requestUpdate();
     }
@@ -326,15 +304,11 @@ export class Cycle extends LitElement {
             savePageStyle(newIconOnlyValue);
             // Save preferences
             savePreferences({ pageStyle: newIconOnlyValue });
-            // No label update for icon-only type
-            this.label = "";
             // Dispatch page style change event
             window.dispatchEvent(new CustomEvent("page-style-changed", {
                 detail: { behavior: newIconOnlyValue },
             }));
         }
-        // Update label
-        this.label = this.getLabel();
         // Request update to re-render
         this.requestUpdate();
     }
@@ -440,142 +414,54 @@ export class Cycle extends LitElement {
         }
         return html `<span>${style}</span>`;
     }
-    getLabel() {
-        if (this.type === "language") {
-            // Try to get translated label
-            if (this.translationsReady) {
-                const translatedLabel = translate("language");
-                if (translatedLabel && translatedLabel !== "language") {
-                    return translatedLabel;
-                }
-            }
-            // Fall back to English
-            return "Language";
-        }
-        else if (this.type === "theme") {
-            // Try to get translated label
-            if (this.translationsReady) {
-                const translatedLabel = translate("theme");
-                if (translatedLabel && translatedLabel !== "theme") {
-                    return translatedLabel;
-                }
-            }
-            // Fall back to English
-            return "Theme";
-        }
-        else if (this.type === "accent-color") {
-            // Try to get translated label
-            if (this.translationsReady) {
-                const translatedLabel = translate("accentColor");
-                if (translatedLabel && translatedLabel !== "accentColor") {
-                    return translatedLabel;
-                }
-            }
-            // Fall back to English
-            return "Accent Color";
-        }
-        else if (this.type === "notes-style-medium") {
-            // Try to get translated label
-            if (this.translationsReady) {
-                const translatedLabel = translate("notesStyle");
-                if (translatedLabel && translatedLabel !== "notesStyle") {
-                    return translatedLabel;
-                }
-            }
-            // Fall back to English
-            return "Notes Style";
-        }
-        else if (this.type === "page-style") {
-            // Try to get translated label
-            if (this.translationsReady) {
-                const translatedLabel = translate("clickingItem");
-                if (translatedLabel && translatedLabel !== "clickingItem") {
-                    return translatedLabel;
-                }
-            }
-            // Fall back to English
-            return "Clic";
-        }
-        else if (this.type === "icon-only") {
-            // No label for icon-only type
-            return "";
-        }
-        return this.label;
-    }
     render() {
         return html `
-      <div class="cycle-container">
-        ${this.type !== "icon-only"
-            ? 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"
-            ? "justify-content: center;"
-            : ""}"
-        >
-          <ds-button
-            variant=${this.variant ||
+      <div class="cycle">
+        <ds-button
+          variant=${this.variant ||
             (this.type === "language" || this.type === "theme"
                 ? "secondary"
                 : "primary")}
-            ?disabled=${this.disabled}
-            @click=${this.handleButtonClick}
-          >
-            ${this.type === "notes-style-medium" || this.type === "icon-only"
+          ?disabled=${this.disabled}
+          @click=${this.handleButtonClick}
+        >
+          ${this.type === "notes-style-medium" || this.type === "icon-only"
             ? html `<span
-                  style="display: inline-flex; align-items: center; gap: var(--025)"
-                  >${this.getValueDisplay(this.currentValue)}</span
-                >`
+                style="display: inline-flex; align-items: center; gap: var(--025)"
+                >${this.getValueDisplay(this.currentValue)}</span
+              >`
             : this.type === "language"
                 ? html `<ds-text
-                    default-value=${this.getValueDisplay(this.currentValue)}
-                  ></ds-text>`
+                  default-value=${this.getValueDisplay(this.currentValue)}
+                ></ds-text>`
                 : this.type === "theme"
                     ? html `<ds-text
-                      key=${this.currentValue}
-                      default-value=${this.currentValue}
-                    ></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>`
+                      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>`
+                        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"
+                        default-value=${this.getValueDisplay(this.currentValue)}
+                      ></ds-text>`}
+        </ds-button>
+
+        ${this.type === "accent-color"
             ? html `
-                <div
-                  class="color-preview"
-                  style="background-color: var(${this.currentValue})"
-                ></div>
-              `
+              <div
+                class="color-preview"
+                style="background-color: var(${this.currentValue})"
+              ></div>
+            `
             : ""}
-        </div>
       </div>
     `;
     }
@@ -622,15 +508,24 @@ export class Cycle extends LitElement {
     }
 }
 Cycle.styles = css `
-    .cycle-container {
-      display: flex;
-      justify-content: space-between;
+    :host {
+      display: inline-flex;
+      align-items: center;
+    }
+
+    .cycle {
+      display: inline-flex;
+      align-items: center;
       gap: var(--025);
-      width: 100%;
     }
 
-    .cycle-label {
-      color: var(--text-color-primary);
+    .color-preview {
+      width: var(--05);
+      height: var(--05);
+      border-radius: 999px;
+      border: 1px solid
+        color-mix(in srgb, var(--text-color-primary) 20%, transparent);
+      flex: 0 0 auto;
     }
   `;
 customElements.define("ds-cycle", Cycle);

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

@@ -0,0 +1,28 @@
+import { LitElement } from "lit";
+/**
+ * Full-width vertical spacer.
+ *
+ * Usage:
+ * - <ds-gap unit></ds-gap>
+ * - <ds-gap double></ds-gap>
+ * - <ds-gap size="05"></ds-gap>
+ */
+export declare class Gap extends LitElement {
+    static properties: {
+        /** Raw scale token selector ("01", "025", "05", "08", "1", "2", "3", "4", "8", "12") */
+        size: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+    };
+    size: string;
+    constructor();
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-gap": Gap;
+    }
+}
+//# sourceMappingURL=ds-gap.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-gap.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-gap.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C;;;;;;;GAOG;AACH,qBAAa,GAAI,SAAQ,UAAU;IACjC,MAAM,CAAC,UAAU;QACf,wFAAwF;;;;;MAExF;IAEM,IAAI,EAAE,MAAM,CAAC;;IAOrB,MAAM,CAAC,MAAM,0BAyEX;IAEF,MAAM;CAGP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,QAAQ,EAAE,GAAG,CAAC;KACf;CACF"}

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

@@ -0,0 +1,97 @@
+import { LitElement, html, css } from "lit";
+/**
+ * Full-width vertical spacer.
+ *
+ * Usage:
+ * - <ds-gap unit></ds-gap>
+ * - <ds-gap double></ds-gap>
+ * - <ds-gap size="05"></ds-gap>
+ */
+export class Gap extends LitElement {
+    constructor() {
+        super();
+        this.size = "";
+    }
+    render() {
+        return html ``;
+    }
+}
+Gap.properties = {
+    /** Raw scale token selector ("01", "025", "05", "08", "1", "2", "3", "4", "8", "12") */
+    size: { type: String, reflect: true },
+};
+Gap.styles = css `
+    :host {
+      display: block;
+      width: 100%;
+      /* Default if no attribute is provided */
+      --gap-size: var(--unit);
+      height: var(--gap-size);
+      flex: 0 0 auto;
+    }
+
+    /* Semantic sizing tokens (from DS1/1-root/one.css) */
+    :host([tenth]) {
+      --gap-size: var(--tenth);
+    }
+    :host([quarter]) {
+      --gap-size: var(--quarter);
+    }
+    :host([half]) {
+      --gap-size: var(--half);
+    }
+    :host([eight-tenth]) {
+      --gap-size: var(--eight-tenth);
+    }
+    :host([unit]) {
+      --gap-size: var(--unit);
+    }
+    :host([double]) {
+      --gap-size: var(--double);
+    }
+    :host([triple]) {
+      --gap-size: var(--triple);
+    }
+    :host([quad]) {
+      --gap-size: var(--quad);
+    }
+    :host([oct]) {
+      --gap-size: var(--oct);
+    }
+    :host([dozen]) {
+      --gap-size: var(--dozen);
+    }
+
+    /* Raw scale sizing (size="...") */
+    :host([size="01"]) {
+      --gap-size: var(--01);
+    }
+    :host([size="025"]) {
+      --gap-size: var(--025);
+    }
+    :host([size="05"]) {
+      --gap-size: var(--05);
+    }
+    :host([size="08"]) {
+      --gap-size: var(--08);
+    }
+    :host([size="1"]) {
+      --gap-size: var(--1);
+    }
+    :host([size="2"]) {
+      --gap-size: var(--2);
+    }
+    :host([size="3"]) {
+      --gap-size: var(--3);
+    }
+    :host([size="4"]) {
+      --gap-size: var(--4);
+    }
+    :host([size="8"]) {
+      --gap-size: var(--8);
+    }
+    :host([size="12"]) {
+      --gap-size: var(--12);
+    }
+  `;
+customElements.define("ds-gap", Gap);

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;IACd,gBAAgB,EAAE,MAAM,CAAC;IACjC,OAAO,CAAC,aAAa,CAAqC;;IAsB1D,MAAM,CAAC,MAAM,0BAgBX;IAEF,iBAAiB;IAsBjB,oBAAoB;IAYpB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAQ/C,wBAAwB;IAWxB,SAAS;IAmBT,MAAM;CAGP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,IAAI,CAAC;KACjB;CACF"}
+{"version":3,"file":"ds-text.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-text.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C;;;;;;;GAOG;AACH,qBAAa,IAAK,SAAQ,UAAU;IAClC,MAAM,KAAK,UAAU;;;;;;;;;;;;;;;;;;MAOpB;IAEO,GAAG,EAAE,MAAM,CAAC;IACZ,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,gBAAgB,EAAE,MAAM,CAAC;IACjC,OAAO,CAAC,aAAa,CAAqC;;IAsB1D,MAAM,CAAC,MAAM,0BA2BX;IAEF,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

@@ -60,14 +60,29 @@ export class Text extends LitElement {
     }
     _updateLanguageAttribute() {
         const lang = this._currentLanguage || currentLanguage.value;
-        // Check if language is Japanese (handles "ja", "ja-JP", etc.)
-        const primaryLang = lang?.toLowerCase().split(/[-_]/)[0] || "";
+        // 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;
         }
-        else {
-            this.removeAttribute("data-language");
+        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) {
@@ -107,5 +122,16 @@ Text.styles = css `
     :host([data-language="ja"]) {
       font-family: var(--typeface-regular-jp);
     }
+
+    :host([data-language="zh"]),
+    :host([data-language="zh-hant"]) {
+      font-family: var(--typeface-regular-zh-hant);
+      font-weight: 800;
+    }
+
+    :host([data-language="zh-hans"]) {
+      font-family: var(--typeface-regular-zh-hans);
+      font-weight: 800;
+    }
   `;
 customElements.define("ds-text", Text);

package/dist/3-unit/ds-accordion.d.ts

@@ -0,0 +1,38 @@
+import { LitElement } from "lit";
+import "../2-core/ds-text";
+import "../2-core/ds-icon";
+import "./ds-row";
+/**
+ * Native accordion using <details>/<summary> (no JS toggle logic).
+ *
+ * Usage:
+ * <ds-accordion summary-key="howItBegan" details-key="designedInHokkaido"></ds-accordion>
+ */
+export declare class Accordion extends LitElement {
+    static properties: {
+        summaryKey: {
+            type: StringConstructor;
+            attribute: string;
+        };
+        detailsKey: {
+            type: StringConstructor;
+            attribute: string;
+        };
+        open: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+    };
+    summaryKey: string;
+    detailsKey: string;
+    open: boolean;
+    constructor();
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-accordion": Accordion;
+    }
+}
+//# sourceMappingURL=ds-accordion.d.ts.map

package/dist/3-unit/ds-accordion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-accordion.d.ts","sourceRoot":"","sources":["../../DS1/3-unit/ds-accordion.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAC5C,OAAO,mBAAmB,CAAC;AAC3B,OAAO,mBAAmB,CAAC;AAC3B,OAAO,UAAU,CAAC;AAElB;;;;;GAKG;AACH,qBAAa,SAAU,SAAQ,UAAU;IACvC,MAAM,CAAC,UAAU;;;;;;;;;;;;;MAIf;IAEM,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,OAAO,CAAC;;IAStB,MAAM,CAAC,MAAM,0BA4CX;IAEF,MAAM;CA4BP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,SAAS,CAAC;KAC3B;CACF"}

package/dist/3-unit/ds-accordion.js

@@ -0,0 +1,97 @@
+import { LitElement, html, css } from "lit";
+import "../2-core/ds-text";
+import "../2-core/ds-icon";
+import "./ds-row";
+/**
+ * Native accordion using <details>/<summary> (no JS toggle logic).
+ *
+ * Usage:
+ * <ds-accordion summary-key="howItBegan" details-key="designedInHokkaido"></ds-accordion>
+ */
+export class Accordion extends LitElement {
+    constructor() {
+        super();
+        this.summaryKey = "";
+        this.detailsKey = "";
+        this.open = false;
+    }
+    render() {
+        return html `
+      <details ?open=${this.open}>
+        <summary>
+          <ds-row class="summaryRow" type="centered">
+            <ds-text .key=${this.summaryKey}></ds-text>
+            <ds-icon class="chevron" aria-hidden="true">
+              <svg
+                viewBox="0 0 10.157 8.219"
+                xmlns="http://www.w3.org/2000/svg"
+                aria-hidden="true"
+                focusable="false"
+              >
+                <path
+                  d="M5.078 8.219L0 3.141L1.414 1.727L5.078 5.391L8.743 1.727L10.157 3.141L5.078 8.219Z"
+                  fill="currentColor"
+                />
+              </svg>
+            </ds-icon>
+          </ds-row>
+        </summary>
+
+        <div class="detailsBody">
+          <ds-text class="detailsText" .key=${this.detailsKey}></ds-text>
+        </div>
+      </details>
+    `;
+    }
+}
+Accordion.properties = {
+    summaryKey: { type: String, attribute: "summary-key" },
+    detailsKey: { type: String, attribute: "details-key" },
+    open: { type: Boolean, reflect: true },
+};
+Accordion.styles = css `
+    :host {
+      display: block;
+      width: calc(240px * var(--sf));
+      color: var(--text-color-primary);
+    }
+
+    details {
+      width: 100%;
+    }
+
+    summary {
+      cursor: pointer;
+      user-select: none;
+      list-style: none;
+      outline: none;
+    }
+
+    summary::-webkit-details-marker {
+      display: none;
+    }
+
+    .summaryRow {
+      width: 100%;
+    }
+
+    ds-icon.chevron {
+      transform: rotate(0deg);
+      transition: transform 140ms ease;
+    }
+
+    details[open] ds-icon.chevron {
+      transform: rotate(180deg);
+    }
+
+    .detailsBody {
+      padding-top: calc(var(--half) * var(--sf));
+    }
+
+    .detailsText {
+      display: block;
+      white-space: normal;
+      text-align: left;
+    }
+  `;
+customElements.define("ds-accordion", Accordion);