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

package/DS1/1-root/one.css

@@ -1,6 +1,8 @@
-/* version 0.2.5-alpha.16 */
+/* version 0.2.5-alpha.18 */
 
 @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@200");
+@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@800");
+@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@800");
 
 @font-face {
   font-family: GT-America-Standard-Regular;
@@ -26,11 +28,12 @@ input {
 
   /* Base/[color]  */
 
-  --black: #2a2a2a;
   --white: rgb(255 255 255);
+  --light-grey: #e8e8e8;
   --slate: #1e1e1e;
   --slate-light: #e6e6e6;
   --slate-dark: #3c3c3c;
+  --black: #2a2a2a;
 
   /* Accent/[color]  */
   --tuned-red: #ff5f5f;
@@ -61,6 +64,9 @@ input {
   /* language specific typefaces */
 
   --typeface-regular-jp: "Noto Sans JP";
+  --typeface-regular-zh-hans: "Noto Sans SC";
+  --typeface-regular-zh-hant: "Noto Sans TC";
+  --typeface-regular-zh: var(--typeface-regular-zh-hant);
 
   /* typefaces sizes and weight */
 

package/DS1/2-core/ds-cycle.ts

@@ -55,7 +55,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 },
@@ -64,15 +63,24 @@ export class Cycle extends LitElement {
   }
 
   static 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;
     }
   `;
 
@@ -80,7 +88,6 @@ export class Cycle extends LitElement {
   // These are just for TypeScript and don't create shadowing fields
   declare type: string;
   declare values: string[];
-  declare label: string;
   declare currentValue: string;
   declare translationsReady: boolean;
   declare disabled: boolean;
@@ -102,7 +109,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;
@@ -154,9 +160,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
       this.values = ["light", "dark"];
@@ -164,9 +167,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
       this.values = [
@@ -197,9 +197,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
       this.values = ["note", "page"];
@@ -207,18 +204,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
@@ -252,16 +243,10 @@ 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
       const currentAccentColor = getAccentColor();
@@ -277,23 +262,14 @@ 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();
@@ -463,9 +439,6 @@ export class Cycle extends LitElement {
       // 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", {
@@ -474,9 +447,6 @@ export class Cycle extends LitElement {
       );
     }
 
-    // Update label
-    this.label = this.getLabel();
-
     // Request update to re-render
     this.requestUpdate();
   }
@@ -584,146 +554,54 @@ export class Cycle extends LitElement {
     return html`<span>${style}</span>`;
   }
 
-  getLabel(): string {
-    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"
+      <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"
+            ? html`<span
+                style="display: inline-flex; align-items: center; gap: var(--025)"
+                >${this.getValueDisplay(this.currentValue)}</span
+              >`
+            : this.type === "language"
               ? html`<ds-text
-                  key="language"
-                  default-value="Language"
-                  class="cycle-label"
+                  default-value=${this.getValueDisplay(this.currentValue)}
                 ></ds-text>`
               : this.type === "theme"
                 ? html`<ds-text
-                    key="theme"
-                    default-value="Theme"
-                    class="cycle-label"
+                    key=${this.currentValue}
+                    default-value=${this.currentValue}
                   ></ds-text>`
                 : this.type === "accent-color"
                   ? html`<ds-text
-                      key="accentColor"
-                      default-value="Accent color"
-                      class="cycle-label"
+                      key=${this.getColorKey(this.currentValue)}
+                      default-value=${this.getColorName(this.currentValue)}
                     ></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 ||
-            (this.type === "language" || this.type === "theme"
-              ? "secondary"
-              : "primary")}
-            ?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
-                >`
-              : this.type === "language"
-                ? html`<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>`
-                  : this.type === "accent-color"
+                  : this.type === "page-style"
                     ? html`<ds-text
-                        key=${this.getColorKey(this.currentValue)}
-                        default-value=${this.getColorName(this.currentValue)}
+                        key=${this.currentValue}
+                        default-value=${this.currentValue}
                       ></ds-text>`
-                    : this.type === "page-style"
-                      ? html`<ds-text
-                          key=${this.currentValue}
-                          default-value=${this.currentValue}
-                        ></ds-text>`
-                      : html`<ds-text
-                          default-value=${this.getValueDisplay(
-                            this.currentValue
-                          )}
-                        ></ds-text>`}
-          </ds-button>
-          ${this.type === "accent-color"
-            ? html`
-                <div
-                  class="color-preview"
-                  style="background-color: var(${this.currentValue})"
-                ></div>
-              `
-            : ""}
-        </div>
+                    : html`<ds-text
+                        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>
     `;
   }

package/DS1/2-core/ds-gap.ts

@@ -0,0 +1,110 @@
+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 {
+  static properties = {
+    /** Raw scale token selector ("01", "025", "05", "08", "1", "2", "3", "4", "8", "12") */
+    size: { type: String, reflect: true },
+  };
+
+  declare size: string;
+
+  constructor() {
+    super();
+    this.size = "";
+  }
+
+  static 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);
+    }
+  `;
+
+  render() {
+    return html``;
+  }
+}
+
+customElements.define("ds-gap", Gap);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-gap": Gap;
+  }
+}

package/DS1/2-core/ds-text.ts

@@ -62,6 +62,17 @@ export class Text extends LitElement {
     :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;
+    }
   `;
 
   connectedCallback() {
@@ -108,13 +119,32 @@ 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");
-    } else {
-      this.removeAttribute("data-language");
+      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() {

package/DS1/3-unit/ds-accordion.ts

@@ -0,0 +1,112 @@
+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 {
+  static properties = {
+    summaryKey: { type: String, attribute: "summary-key" },
+    detailsKey: { type: String, attribute: "details-key" },
+    open: { type: Boolean, reflect: true },
+  };
+
+  declare summaryKey: string;
+  declare detailsKey: string;
+  declare open: boolean;
+
+  constructor() {
+    super();
+    this.summaryKey = "";
+    this.detailsKey = "";
+    this.open = false;
+  }
+
+  static 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;
+    }
+  `;
+
+  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>
+    `;
+  }
+}
+
+customElements.define("ds-accordion", Accordion);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-accordion": Accordion;
+  }
+}

package/DS1/index.ts

@@ -30,7 +30,9 @@ export * from "./0-face/theme";
 // ============================================================================
 
 export * from "./2-core/ds-button";
+export * from "./2-core/ds-banner";
 export * from "./2-core/ds-cycle";
+export * from "./2-core/ds-gap";
 export * from "./2-core/ds-icon";
 export * from "./2-core/ds-text";
 export * from "./2-core/ds-tooltip";
@@ -41,6 +43,7 @@ export * from "./2-core/ds-date";
 // ============================================================================
 
 export * from "./3-unit/ds-list";
+export * from "./3-unit/ds-accordion";
 export * from "./3-unit/ds-row";
 export * from "./3-unit/ds-table";
 

package/README.md

@@ -1,4 +1,4 @@
-# DS one (0.2.5-alpha.16)
+# DS one (0.2.5-alpha.18)
 
 A plug and play design system
 
@@ -20,7 +20,7 @@ yarn add ds-one@alpha
 
 ```
 
-**Note**: Currently published as alpha version `0.2.5-alpha.16`
+**Note**: Currently published as alpha version `0.2.5-alpha.18`
 
 ## Quick Start