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

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

@@ -1,16 +1,17 @@
-import { LitElement, html, css } from "lit";
+import { LitElement, html, unsafeCSS } from "lit";
 import { translate, currentLanguage, getAvailableLanguagesSync, getLanguageDisplayName, setLanguage, } from "../0-face/i18n";
 import { currentTheme, setTheme } from "../0-face/theme";
 import { savePreferences } from "../0-face/preferences";
 import "./ds-button";
 import "./ds-icon";
 import "./ds-text";
+import styles from "./styles/ds-cycle.css?inline";
 // Accent color utilities
 const saveAccentColor = (color) => {
     localStorage.setItem("accentColor", color);
 };
 const getAccentColor = () => {
-    return localStorage.getItem("accentColor") || "--blue"; // Default color if none set
+    return localStorage.getItem("accentColor") || "--sharp-blue"; // Default color if none set
 };
 const applyAccentColor = () => {
     const color = getAccentColor();
@@ -38,7 +39,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 +50,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 +81,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,18 +88,16 @@ 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 = [
-                "--light-green",
-                "--green",
-                "--light-blue",
-                "--blue",
+                "--apple-green",
+                "--every-green",
+                "--zenith-blue",
+                "--sharp-blue",
                 "--pink",
-                "--red",
+                "--tuned-red",
                 "--orange",
                 "--yellow",
             ];
@@ -111,8 +106,6 @@ export class Cycle extends LitElement {
             this.currentValue = currentAccentColor;
             // Apply the accent color to ensure it's active
             applyAccentColor();
-            // Set label
-            this.label = this.getLabel();
         }
         else if (this.type === "notes-style-medium") {
             // Set up notes style medium cycling
@@ -123,8 +116,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
@@ -132,16 +123,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();
@@ -168,15 +155,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
@@ -184,8 +167,6 @@ export class Cycle extends LitElement {
             this.currentValue = currentAccentColor;
             // Apply the accent color to ensure it's active
             applyAccentColor();
-            // Update label
-            this.label = this.getLabel();
         }
         else if (this.type === "notes-style-medium") {
             // Get current notes style medium
@@ -194,22 +175,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();
     }
@@ -330,15 +305,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();
     }
@@ -351,8 +322,8 @@ export class Cycle extends LitElement {
         else if (this.type === "theme") {
             // Try to get translated theme name
             if (this.translationsReady) {
-                const translatedName = translate(`themes.${value}`);
-                if (translatedName && translatedName !== `themes.${value}`) {
+                const translatedName = translate(value);
+                if (translatedName && translatedName !== value) {
                     return translatedName;
                 }
             }
@@ -370,9 +341,9 @@ export class Cycle extends LitElement {
         else if (this.type === "page-style") {
             // Return translated text for note behavior
             if (this.translationsReady) {
-                const translatedText = translate(value === "note" ? "note" : "page");
+                const translatedText = translate(value === "note" ? "Note" : "Page");
                 if (translatedText &&
-                    translatedText !== (value === "note" ? "note" : "page")) {
+                    translatedText !== (value === "note" ? "Note" : "Page")) {
                     return translatedText;
                 }
             }
@@ -390,22 +361,36 @@ export class Cycle extends LitElement {
         }
         return value;
     }
+    getColorKey(colorVar) {
+        // Map CSS variables to translation text keys
+        const colorMap = {
+            "--tuned-red": "Red",
+            "--orange": "Orange",
+            "--yellow": "Yellow",
+            "--apple-green": "Apple green",
+            "--every-green": "Green",
+            "--zenith-blue": "Light blue",
+            "--sharp-blue": "Blue",
+            "--pink": "Pink",
+        };
+        return colorMap[colorVar] || colorVar.replace("--", "").replace("-", " ");
+    }
     getColorName(colorVar) {
-        // Map CSS variables to language keys
+        // Map CSS variables to translation text keys
         const colorMap = {
-            "--red": "red",
-            "--orange": "orange",
-            "--yellow": "yellow",
-            "--light-green": "lightGreen",
-            "--green": "green",
-            "--light-blue": "lightBlue",
-            "--blue": "blue",
-            "--pink": "pink",
+            "--tuned-red": "Red",
+            "--orange": "Orange",
+            "--yellow": "Yellow",
+            "--apple-green": "Apple green",
+            "--every-green": "Green",
+            "--zenith-blue": "Light blue",
+            "--sharp-blue": "Blue",
+            "--pink": "Pink",
         };
-        const languageKey = colorMap[colorVar];
-        if (languageKey && this.translationsReady) {
-            const translatedName = translate(languageKey);
-            if (translatedName && translatedName !== languageKey) {
+        const translationText = colorMap[colorVar];
+        if (translationText && this.translationsReady) {
+            const translatedName = translate(translationText);
+            if (translatedName && translatedName !== translationText) {
                 return translatedName;
             }
         }
@@ -430,115 +415,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"
+      <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"
+                    text=${this.currentValue}
+                    default-value=${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
-                >`
-            : html `<span>${this.getValueDisplay(this.currentValue)}</span>`}
-          </ds-button>
-          ${this.type === "accent-color"
+                    : this.type === "accent-color"
+                        ? html `<ds-text
+                      text=${this.getColorKey(this.currentValue)}
+                      default-value=${this.getColorName(this.currentValue)}
+                    ></ds-text>`
+                        : this.type === "page-style"
+                            ? html `<ds-text
+                        text=${this.currentValue === "note" ? "Note" : "Page"}
+                        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
+                class="color-preview"
+                style="background-color: var(${this.currentValue})"
+              ></div>
+            `
             : ""}
-        </div>
       </div>
     `;
     }
@@ -584,16 +508,5 @@ export class Cycle extends LitElement {
         this.setupInitialValue();
     }
 }
-Cycle.styles = css `
-    .cycle-container {
-      display: flex;
-      justify-content: space-between;
-      gap: var(--025);
-      width: 100%;
-    }
-
-    .cycle-label {
-      color: var(--text-color-primary);
-    }
-  `;
+Cycle.styles = unsafeCSS(styles);
 customElements.define("ds-cycle", Cycle);

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

@@ -1 +1 @@
-{"version":3,"file":"ds-date.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-date.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C;;;;GAIG;AACH,qBAAa,aAAc,SAAQ,UAAU;IAC3C,MAAM,CAAC,MAAM,0BAOX;IAEF,MAAM;CAIP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,aAAa,CAAC;KAC1B;CACF"}
+{"version":3,"file":"ds-date.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-date.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAGlD;;;;GAIG;AACH,qBAAa,aAAc,SAAQ,UAAU;IAC3C,MAAM,CAAC,MAAM,0BAAqB;IAElC,MAAM;CAIP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,aAAa,CAAC;KAC1B;CACF"}

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

@@ -1,4 +1,5 @@
-import { LitElement, html, css } from "lit";
+import { LitElement, html, unsafeCSS } from "lit";
+import styles from "./styles/ds-date.css?inline";
 /**
  * A component for displaying the current year
  *
@@ -10,12 +11,5 @@ export class DateComponent extends LitElement {
         return html `<span>${year}</span>`;
     }
 }
-DateComponent.styles = css `
-    :host {
-      display: inline;
-      font-family: var(--typeface, var(--typeface-regular));
-      font-size: inherit;
-      color: inherit;
-    }
-  `;
+DateComponent.styles = unsafeCSS(styles);
 customElements.define("ds-date", DateComponent);

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,EAAmB,MAAM,KAAK,CAAC;AAGlD;;;;;;;GAOG;AACH,qBAAa,GAAI,SAAQ,UAAU;IACjC,MAAM,CAAC,UAAU;QACf,wFAAwF;;;;;MAExF;IAEM,IAAI,EAAE,MAAM,CAAC;;IAOrB,MAAM,CAAC,MAAM,0BAAqB;IAElC,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,25 @@
+import { LitElement, html, unsafeCSS } from "lit";
+import styles from "./styles/ds-gap.css?inline";
+/**
+ * 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 = unsafeCSS(styles);
+customElements.define("ds-gap", Gap);

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

@@ -1 +1 @@
-{"version":3,"file":"ds-icon.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGjE,qBAAa,IAAK,SAAQ,UAAU;IAClC,MAAM,CAAC,UAAU;;;;;MAEf;IAEF,OAAO,CAAC,KAAK,CAAM;IAEnB,IAAI,SAAS;IACb,KAAK,SAAkB;IACvB,UAAU,SAAiB;IAE3B,IAAI,IAAI,WAEP;IACD,IAAI,IAAI,CAAC,GAAG,QAAA,EAIX;IAED,MAAM,CAAC,MAAM,0BA+BX;IAIF,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,gBAAgB,CAyBnC;;IAOL,iBAAiB;IAKjB,UAAU;IA4MV,OAAO,CAAC,iBAAiB,EAAE,cAAc;IAQzC,MAAM;CAIP;AAOD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,IAAI,CAAC;KACjB;CACF"}
+{"version":3,"file":"ds-icon.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAIvE,qBAAa,IAAK,SAAQ,UAAU;IAClC,MAAM,CAAC,UAAU;;;;;MAEf;IAEF,OAAO,CAAC,KAAK,CAAM;IAEnB,IAAI,SAAS;IACb,KAAK,SAAkB;IACvB,UAAU,SAAiB;IAE3B,IAAI,IAAI,WAEP;IACD,IAAI,IAAI,CAAC,GAAG,QAAA,EAIX;IAED,MAAM,CAAC,MAAM,0BAAqB;IAIlC,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,gBAAgB,CA0BnC;;IAOL,iBAAiB;IAKjB,UAAU;IA4MV,OAAO,CAAC,iBAAiB,EAAE,cAAc;IAQzC,MAAM;CAIP;AAOD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,IAAI,CAAC;KACjB;CACF"}

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

@@ -1,5 +1,6 @@
-import { LitElement, html, css } from "lit";
+import { LitElement, html, unsafeCSS } from "lit";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import styles from "./styles/ds-icon.css?inline";
 export class Icon extends LitElement {
     get type() {
         return this._type;
@@ -235,45 +236,15 @@ export class Icon extends LitElement {
 Icon.properties = {
     type: { type: String, reflect: true },
 };
-Icon.styles = css `
-    :host {
-      display: inline-flex;
-      justify-content: center;
-      align-items: center;
-      width: calc(16px * var(--sf));
-      height: calc(16px * var(--sf));
-    }
-
-    svg {
-      width: 100%;
-      height: 100%;
-      fill: var(--icon-color, currentColor);
-    }
-
-    path {
-      fill: var(--icon-color, currentColor);
-    }
-
-    .icon-container {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      width: calc(16px * var(--sf));
-      height: calc(16px * var(--sf));
-    }
-
-    /* Notes style color variable for future implementation */
-    :host {
-      --notes-style-color: #ffb6b9;
-    }
-  `;
+Icon.styles = unsafeCSS(styles);
 // Load all SVGs from `x Icon/` as raw strings at build time (Vite)
 // The keys will be the file base names (without extension), lowercased.
 Icon.iconNameToSvgMap = (() => {
     try {
         // Note: folder name contains a space, keep it exact.
-        const modules = import.meta.glob("../x Icon/*.svg", {
-            as: "raw",
+        const modules = import.meta.glob("../x-icon/*.svg", {
+            query: "?raw",
+            import: "default",
             eager: true,
         });
         const map = {};