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

package/dist/ds-one.bundle.js

@@ -1860,12 +1860,24 @@ var Text = class extends i6 {
   }
   _updateLanguageAttribute() {
     const lang = this._currentLanguage || currentLanguage.value;
-    const primaryLang = lang?.toLowerCase().split(/[-_]/)[0] || "";
+    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") {
+      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) {
@@ -1904,6 +1916,17 @@ Text.styles = i4`
     :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);
 
@@ -2047,6 +2070,162 @@ Button.styles = i4`
   `;
 customElements.define("ds-button", Button);
 
+// dist/2-core/ds-banner.js
+var Banner = class extends i6 {
+  constructor() {
+    super(...arguments);
+    this.textKey = "";
+    this.actionKey = "";
+    this.href = "";
+    this.mailto = "";
+    this.subjectKey = "";
+    this.describeKey = "";
+    this.appVersionKey = "";
+    this.variant = "warning";
+    this.version = "";
+    this._showVersion = false;
+    this._boundUpdate = () => this.requestUpdate();
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    window.addEventListener("translations-loaded", this._boundUpdate);
+    window.addEventListener("language-changed", this._boundUpdate);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    window.removeEventListener("translations-loaded", this._boundUpdate);
+    window.removeEventListener("language-changed", this._boundUpdate);
+  }
+  _toggleVersion() {
+    if (this.version) {
+      this._showVersion = !this._showVersion;
+    }
+  }
+  _getMailtoHref() {
+    if (this.href && this.href !== "#")
+      return this.href;
+    if (this.mailto) {
+      try {
+        const subject = this.subjectKey ? getText(this.subjectKey) || this.subjectKey : "Issue report";
+        const describe = this.describeKey ? getText(this.describeKey) || this.describeKey : "Describe the issue:";
+        const appVersionLabel = this.appVersionKey ? getText(this.appVersionKey) || this.appVersionKey : "App version:";
+        const body = `${describe}
+
+
+${appVersionLabel} ${this.version || ""}`;
+        return `mailto:${this.mailto}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
+      } catch (error) {
+        return `mailto:${this.mailto}?subject=Issue%20report&body=Describe%20the%20issue%3A%0A%0A%0AApp%20version%3A%20${this.version || ""}`;
+      }
+    }
+    return "#";
+  }
+  render() {
+    const mailtoHref = this._getMailtoHref();
+    return x`
+      <div class="text-wrapper" @click=${this._toggleVersion}>
+        ${this._showVersion && this.version ? x`<ds-text default-value=${this.version}></ds-text>` : x`<ds-text key=${this.textKey}><slot></slot></ds-text>`}
+      </div>
+      ${this.actionKey ? x`
+            <div class="action-wrapper">
+              <a href=${mailtoHref}>
+                <ds-text key=${this.actionKey}></ds-text>
+              </a>
+            </div>
+          ` : ""}
+    `;
+  }
+};
+Banner.properties = {
+  textKey: { type: String, attribute: "text-key" },
+  actionKey: { type: String, attribute: "action-key" },
+  href: { type: String },
+  mailto: { type: String },
+  subjectKey: { type: String, attribute: "subject-key" },
+  describeKey: { type: String, attribute: "describe-key" },
+  appVersionKey: { type: String, attribute: "app-version-key" },
+  variant: { type: String },
+  version: { type: String },
+  _showVersion: { type: Boolean, state: true }
+};
+Banner.styles = i4`
+    :host {
+      display: flex;
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      width: 100%;
+      height: calc(var(--unit) * var(--sf, 1));
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 calc(var(--unit) * var(--sf, 1));
+      box-sizing: border-box;
+      z-index: 9999;
+    }
+
+    :host([variant="warning"]) {
+      background-color: color-mix(in srgb, var(--yellow) 50%, transparent);
+      --banner-text-color: color-mix(in srgb, var(--black) 50%, transparent);
+      --banner-action-color: var(--slate);
+    }
+
+    :host([variant="info"]) {
+      background-color: rgba(var(--sharp-blue-rgb, 0, 122, 255), 0.7);
+      --banner-text-color: var(--white, #fff);
+      --banner-action-color: var(--white, #fff);
+    }
+
+    :host([variant="success"]) {
+      background-color: rgba(var(--apple-green-rgb, 52, 199, 89), 0.7);
+      --banner-text-color: var(--white, #fff);
+      --banner-action-color: var(--white, #fff);
+    }
+
+    :host([variant="error"]) {
+      background-color: rgba(var(--tuned-red-rgb, 255, 59, 48), 0.7);
+      --banner-text-color: var(--white, #fff);
+      --banner-action-color: var(--slate, #1e1e1e);
+    }
+
+    .text-wrapper {
+      flex: 1;
+      cursor: pointer;
+      user-select: none;
+    }
+
+    .text-wrapper ds-text,
+    .text-wrapper .version {
+      color: var(--banner-text-color);
+    }
+
+    .action-wrapper {
+      font-size: calc(12px * var(--sf, 1));
+    }
+
+    .action-wrapper a {
+      color: var(--banner-action-color);
+      text-decoration: none;
+      font-family: var(--typeface-regular);
+      font-size: calc(12px * var(--sf, 1));
+      cursor: pointer;
+      pointer-events: auto;
+      display: inline-block;
+    }
+
+    .action-wrapper a:hover {
+      opacity: 0.8;
+    }
+
+    .action-wrapper ds-text {
+      color: var(--banner-action-color);
+      font-family: var(--typeface-regular);
+      font-size: calc(12px * var(--sf, 1));
+      pointer-events: none;
+    }
+  `;
+customElements.define("ds-banner", Banner);
+
 // node_modules/lit-html/directives/unsafe-html.js
 var e6 = class extends i2 {
   constructor(i7) {
@@ -2384,7 +2563,6 @@ var Cycle = class extends i6 {
     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 },
@@ -2397,7 +2575,6 @@ var Cycle = class extends i6 {
     super();
     this.type = "";
     this.values = [];
-    this.label = "";
     this.currentValue = "";
     this.translationsReady = false;
     this.disabled = false;
@@ -2425,12 +2602,10 @@ var Cycle = class extends i6 {
       const availableLanguages = getAvailableLanguagesSync();
       this.values = availableLanguages;
       this.currentValue = currentLanguage.value;
-      this.label = this.getLabel();
     } else if (this.type === "theme") {
       this.values = ["light", "dark"];
       const currentThemeValue = currentTheme.get();
       this.currentValue = currentThemeValue;
-      this.label = this.getLabel();
     } else if (this.type === "accent-color") {
       this.values = [
         "--apple-green",
@@ -2451,16 +2626,13 @@ var Cycle = class extends i6 {
       this.currentValue = currentNotesStyle;
       const currentPageStyle = getPageStyle();
       this.disabled = currentPageStyle === "note";
-      this.label = this.getLabel();
     } else if (this.type === "page-style") {
       this.values = ["note", "page"];
       const currentPageStyle = getPageStyle();
       this.currentValue = currentPageStyle;
-      this.label = this.getLabel();
     } else if (this.type === "icon-only") {
       this.values = ["note", "page"];
       this.currentValue = this.values[0];
-      this.label = "";
     }
     this.requestUpdate();
   }
@@ -2483,11 +2655,9 @@ var Cycle = class extends i6 {
     if (this.type === "language") {
       const currentLang = currentLanguage.value;
       this.currentValue = currentLang;
-      this.label = this.getLabel();
     } else if (this.type === "theme") {
       const currentThemeValue = currentTheme.get();
       this.currentValue = currentThemeValue;
-      this.label = this.getLabel();
     } else if (this.type === "accent-color") {
       const currentAccentColor = getAccentColor();
       this.currentValue = currentAccentColor;
@@ -2497,15 +2667,12 @@ var Cycle = class extends i6 {
       this.currentValue = currentNotesStyle;
       const currentPageStyle = getPageStyle();
       this.disabled = currentPageStyle === "note";
-      this.label = this.getLabel();
     } else if (this.type === "page-style") {
       const currentPageStyle = getPageStyle();
       this.currentValue = currentPageStyle;
-      this.label = this.getLabel();
     } else if (this.type === "icon-only") {
       const currentPageStyle = getPageStyle();
       this.currentValue = currentPageStyle;
-      this.label = "";
     }
     this.requestUpdate();
   }
@@ -2587,12 +2754,10 @@ var Cycle = class extends i6 {
       this.currentValue = newIconOnlyValue;
       savePageStyle(newIconOnlyValue);
       savePreferences({ pageStyle: newIconOnlyValue });
-      this.label = "";
       window.dispatchEvent(new CustomEvent("page-style-changed", {
         detail: { behavior: newIconOnlyValue }
       }));
     }
-    this.label = this.getLabel();
     this.requestUpdate();
   }
   getValueDisplay(value) {
@@ -2677,101 +2842,39 @@ var Cycle = class extends i6 {
     }
     return x`<span>${style}</span>`;
   }
-  getLabel() {
-    if (this.type === "language") {
-      if (this.translationsReady) {
-        const translatedLabel = translate("language");
-        if (translatedLabel && translatedLabel !== "language") {
-          return translatedLabel;
-        }
-      }
-      return "Language";
-    } else if (this.type === "theme") {
-      if (this.translationsReady) {
-        const translatedLabel = translate("theme");
-        if (translatedLabel && translatedLabel !== "theme") {
-          return translatedLabel;
-        }
-      }
-      return "Theme";
-    } else if (this.type === "accent-color") {
-      if (this.translationsReady) {
-        const translatedLabel = translate("accentColor");
-        if (translatedLabel && translatedLabel !== "accentColor") {
-          return translatedLabel;
-        }
-      }
-      return "Accent Color";
-    } else if (this.type === "notes-style-medium") {
-      if (this.translationsReady) {
-        const translatedLabel = translate("notesStyle");
-        if (translatedLabel && translatedLabel !== "notesStyle") {
-          return translatedLabel;
-        }
-      }
-      return "Notes Style";
-    } else if (this.type === "page-style") {
-      if (this.translationsReady) {
-        const translatedLabel = translate("clickingItem");
-        if (translatedLabel && translatedLabel !== "clickingItem") {
-          return translatedLabel;
-        }
-      }
-      return "Clic";
-    } else if (this.type === "icon-only") {
-      return "";
-    }
-    return this.label;
-  }
   render() {
     return x`
-      <div class="cycle-container">
-        ${this.type !== "icon-only" ? x`${this.type === "language" ? x`<ds-text
-                  key="language"
-                  default-value="Language"
-                  class="cycle-label"
+      <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" ? x`<span
+                style="display: inline-flex; align-items: center; gap: var(--025)"
+                >${this.getValueDisplay(this.currentValue)}</span
+              >` : this.type === "language" ? x`<ds-text
+                  default-value=${this.getValueDisplay(this.currentValue)}
                 ></ds-text>` : this.type === "theme" ? x`<ds-text
-                    key="theme"
-                    default-value="Theme"
-                    class="cycle-label"
+                    key=${this.currentValue}
+                    default-value=${this.currentValue}
                   ></ds-text>` : this.type === "accent-color" ? x`<ds-text
-                      key="accentColor"
-                      default-value="Accent color"
-                      class="cycle-label"
-                    ></ds-text>` : x`<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" ? x`<span
-                  style="display: inline-flex; align-items: center; gap: var(--025)"
-                  >${this.getValueDisplay(this.currentValue)}</span
-                >` : this.type === "language" ? x`<ds-text
-                    default-value=${this.getValueDisplay(this.currentValue)}
-                  ></ds-text>` : this.type === "theme" ? x`<ds-text
-                      key=${this.currentValue}
-                      default-value=${this.currentValue}
-                    ></ds-text>` : this.type === "accent-color" ? x`<ds-text
-                        key=${this.getColorKey(this.currentValue)}
-                        default-value=${this.getColorName(this.currentValue)}
-                      ></ds-text>` : this.type === "page-style" ? x`<ds-text
-                          key=${this.currentValue}
-                          default-value=${this.currentValue}
-                        ></ds-text>` : x`<ds-text
-                          default-value=${this.getValueDisplay(this.currentValue)}
-                        ></ds-text>`}
-          </ds-button>
-          ${this.type === "accent-color" ? x`
-                <div
-                  class="color-preview"
-                  style="background-color: var(${this.currentValue})"
-                ></div>
-              ` : ""}
-        </div>
+                      key=${this.getColorKey(this.currentValue)}
+                      default-value=${this.getColorName(this.currentValue)}
+                    ></ds-text>` : this.type === "page-style" ? x`<ds-text
+                        key=${this.currentValue}
+                        default-value=${this.currentValue}
+                      ></ds-text>` : x`<ds-text
+                        default-value=${this.getValueDisplay(this.currentValue)}
+                      ></ds-text>`}
+        </ds-button>
+
+        ${this.type === "accent-color" ? x`
+              <div
+                class="color-preview"
+                style="background-color: var(${this.currentValue})"
+              ></div>
+            ` : ""}
       </div>
     `;
   }
@@ -2816,19 +2919,118 @@ var Cycle = class extends i6 {
   }
 };
 Cycle.styles = i4`
-    .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);
 
+// dist/2-core/ds-gap.js
+var Gap = class extends i6 {
+  constructor() {
+    super();
+    this.size = "";
+  }
+  render() {
+    return x``;
+  }
+};
+Gap.properties = {
+  /** Raw scale token selector ("01", "025", "05", "08", "1", "2", "3", "4", "8", "12") */
+  size: { type: String, reflect: true }
+};
+Gap.styles = i4`
+    :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);
+
 // dist/2-core/ds-tooltip.js
 var Tooltip = class extends i6 {
   constructor() {
@@ -3033,6 +3235,95 @@ Row.styles = i4`
   `;
 customElements.define("ds-row", Row);
 
+// dist/3-unit/ds-accordion.js
+var Accordion = class extends i6 {
+  constructor() {
+    super();
+    this.summaryKey = "";
+    this.detailsKey = "";
+    this.open = false;
+  }
+  render() {
+    return x`
+      <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 = i4`
+    :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);
+
 // dist/3-unit/ds-table.js
 var DsTable = class extends i6 {
   constructor() {
@@ -3590,11 +3881,14 @@ Layout.styles = i4`
   `;
 customElements.define("ds-layout", Layout);
 export {
+  Accordion,
+  Banner,
   Button,
   Container,
   Cycle,
   DateComponent,
   DsTable,
+  Gap,
   Grid,
   Icon,
   Layout,