ds-one 0.2.5-alpha.11 → 0.2.5-alpha.13

package/DS1/0-face/device.ts

@@ -104,6 +104,10 @@ export function initDeviceDetection(): DeviceInfo {
       scalingFactor.toFixed(3)
     );
 
+    // Add .mobile class to html element for CSS targeting
+    document.documentElement.classList.add("mobile");
+    document.documentElement.classList.remove("desktop");
+
     console.log(
       `[DS one] Mobile device detected - ${deviceInfo.deviceType} (${deviceInfo.screenWidth}x${deviceInfo.screenHeight}), scaling factor: ${scalingFactor.toFixed(2)}`
     );
@@ -113,6 +117,10 @@ export function initDeviceDetection(): DeviceInfo {
       document.documentElement.style.setProperty("--sf", "1");
       // Also set --sf for backwards compatibility
       document.documentElement.style.setProperty("--sf", "1");
+
+      // Add .desktop class and remove .mobile class
+      document.documentElement.classList.add("desktop");
+      document.documentElement.classList.remove("mobile");
     }
     console.log(
       `[DS one] Desktop device detected (${deviceInfo.screenWidth}x${deviceInfo.screenHeight})`

package/DS1/1-root/one.css

@@ -1,4 +1,4 @@
-/* version 0.2.5-alpha.11 */
+/* version 0.2.5-alpha.13 */
 
 @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@200");
 
@@ -54,9 +54,14 @@ input {
   --typeface-regular: "GT-America-Standard-Regular";
   --typeface-medium: "GT-America-Standard-Medium";
   --typeface-compressed: "GT-America-Compressed-Regular";
-  --typeface-regular-jp: "Noto Sans JP";
   --typeface-mono: "Iosevka";
 
+  /* language specific typefaces */
+
+  --typeface-regular-jp: "Noto Sans JP";
+
+  /* typefaces sizes and weight */
+
   --type-size-default: calc(14px * var(--sf));
   --type-size-small: calc(10px * var(--sf));
   --type-weight-default: 500;
@@ -73,6 +78,35 @@ input {
   --type-weight-book: 400;
   --type-lineheight-book: 15px;
 
+  /* ----------------------------------------------------------
+   SIZING SCALE
+   - Define a base unit ( --1 ) and derive all other sizes
+   - Larger sizes are simple multipliers (×2, ×3, ×4)
+   - Smaller sizes use fractional multipliers (0.1, 0.25, 0.8)
+   ---------------------------------------------------------- */
+
+  --01: calc(var(--1) * 0.1);
+  --025: calc(var(--1) * 0.25);
+  --05: calc(var(--1) * 0.5);
+  --08: calc(var(--1) * 0.8);
+  --1: 20px; /* SET BASE UNIT HERE FOR EXAMPLE 20px */
+  --2: calc(var(--1) * 2);
+  --3: calc(var(--1) * 3);
+  --4: calc(var(--1) * 4);
+  --8: calc(var(--1) * 8);
+
+  /* Semantic sizing units */
+
+  --tenth: var(--01);
+  --quarter: var(--025);
+  --half: var(--05);
+  --eight-tenth: var(--08);
+  --unit: var(--1);
+  --double: var(--2);
+  --triple: var(--3);
+  --quad: var(--4);
+  --oct: var(--8);
+
   /* size */
   --outline-stroke: 1px solid light-dark(var(--black), var(--slate-dark));
   --outline-stroke-mobile: calc(1px * var(--sf)) solid
@@ -81,20 +115,6 @@ input {
   --item-height: calc(19px * var(--sf));
   --margin-correction: calc(1px * var(--sf));
 
-  /* SIZING */
-
-  /* main unit */
-  --1: 20px;
-  /* bigger sizes */
-  --2: calc(var(--1) * 2);
-  --3: calc(var(--1) * 3);
-  --4: calc(var(--1) * 4);
-
-  /* smaller sizes */
-  --01: calc(var(--1) * 0.1);
-  --025: calc(var(--1) * 0.25);
-  --08: calc(var(--1) * 0.8);
-
   /* button */
   --button-background-color-primary: var(--accent-color);
   --button-background-color-secondary: light-dark(

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

@@ -1,8 +1,8 @@
 // ds-button.ts
 // Core button component
 
-import { LitElement, html, css, type PropertyValues } from "lit";
-import { getText, currentLanguage } from "../0-face/i18n";
+import { LitElement, html, css } from "lit";
+import "./ds-text";
 
 export class Button extends LitElement {
   static properties = {
@@ -21,7 +21,6 @@ export class Button extends LitElement {
     defaultText: { type: String, attribute: "default-text" },
     href: { type: String },
     _loading: { type: Boolean, state: true },
-    _text: { type: String, state: true },
   };
 
   // Public properties
@@ -38,7 +37,6 @@ export class Button extends LitElement {
 
   // Private state
   declare _loading: boolean;
-  declare _text: string | null;
 
   constructor() {
     super();
@@ -53,7 +51,6 @@ export class Button extends LitElement {
     this.defaultText = "";
     this.href = "";
     this._loading = false;
-    this._text = null;
   }
 
   static styles = css`
@@ -61,8 +58,7 @@ export class Button extends LitElement {
       max-height: calc(var(--08) * var(--sf));
       border: none;
       cursor: pointer;
-      font-size: calc(var(--type-size-default) * var(--sf));
-      padding: 0 calc(1px * var(--sf));
+      padding: 0 calc(2px * var(--sf));
       color: var(--button-text-color);
       font-family: var(--typeface-regular);
     }
@@ -110,42 +106,11 @@ export class Button extends LitElement {
 
   connectedCallback() {
     super.connectedCallback();
-    this._updateText();
-
-    // Listen for language changes
-    window.addEventListener("language-changed", this._handleLanguageChange);
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    window.removeEventListener("language-changed", this._handleLanguageChange);
-  }
-
-  _handleLanguageChange = () => {
-    this._updateText();
-  };
-
-  updated(changedProps: PropertyValues) {
-    super.updated(changedProps);
-
-    if (changedProps.has("key") || changedProps.has("defaultText")) {
-      this._updateText();
-    }
-  }
-
-  /**
-   * Update text from translations (synchronous like Portfolio)
-   */
-  private _updateText() {
-    if (this.key) {
-      this._text = getText(this.key);
-    } else {
-      this._text = this.defaultText || this.fallback || null;
-    }
-    this.requestUpdate();
   }
 
   render() {
+    const hasTextProps = this.key || this.defaultText || this.fallback;
+
     return html`
       <button
         class=${this.variant}
@@ -154,7 +119,13 @@ export class Button extends LitElement {
         ?no-background=${this["no-background"]}
         @click=${this._handleClick}
       >
-        ${this._text ? this._text : html`<slot></slot>`}
+        ${hasTextProps
+          ? html`<ds-text
+              .key=${this.key}
+              .defaultValue=${this.defaultText}
+              .fallback=${this.fallback}
+            ></ds-text>`
+          : html`<slot></slot>`}
       </button>
     `;
   }

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

@@ -690,24 +690,30 @@ export class Cycle extends LitElement {
                   style="display: inline-flex; align-items: center; gap: var(--025)"
                   >${this.getValueDisplay(this.currentValue)}</span
                 >`
-              : this.type === "theme"
+              : this.type === "language"
                 ? html`<ds-text
-                    key=${this.currentValue}
-                    default-value=${this.currentValue}
+                    default-value=${this.getValueDisplay(this.currentValue)}
                   ></ds-text>`
-                : this.type === "accent-color"
+                : this.type === "theme"
                   ? 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"
+                  : this.type === "accent-color"
                     ? html`<ds-text
-                        key=${this.currentValue}
-                        default-value=${this.currentValue}
+                        key=${this.getColorKey(this.currentValue)}
+                        default-value=${this.getColorName(this.currentValue)}
                       ></ds-text>`
-                    : html`<ds-text
-                        default-value=${this.getValueDisplay(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`

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

@@ -39,6 +39,7 @@ export class Text extends LitElement {
       languageChanged: (() => {
         console.log("Language changed event received in ds-text");
         this._currentLanguage = currentLanguage.value;
+        this._updateLanguageAttribute();
         this._loadText();
         this.requestUpdate();
       }) as EventListener,
@@ -49,7 +50,7 @@ export class Text extends LitElement {
     :host {
       display: inline;
       font-family: var(--typeface-regular);
-      font-size: calc(var(--type-size-default) * var(--sf));
+      font-size: var(--type-size-default);
       font-weight: var(--type-weight-default);
       line-height: calc(var(--type-lineheight-default) * var(--sf));
       letter-spacing: calc(var(--type-letterspacing-default) * var(--sf));
@@ -107,7 +108,9 @@ export class Text extends LitElement {
 
   _updateLanguageAttribute() {
     const lang = this._currentLanguage || currentLanguage.value;
-    if (lang === "ja") {
+    // Check if language is Japanese (handles "ja", "ja-JP", etc.)
+    const primaryLang = lang?.toLowerCase().split(/[-_]/)[0] || "";
+    if (primaryLang === "ja") {
       this.setAttribute("data-language", "ja");
     } else {
       this.removeAttribute("data-language");
@@ -117,6 +120,8 @@ export class Text extends LitElement {
   _loadText() {
     if (!this.key) {
       this._text = this.defaultValue || this.fallback || "";
+      this._updateLanguageAttribute();
+      this.requestUpdate();
       return;
     }
 

package/DS1/4-page/ds-container.ts

@@ -0,0 +1,59 @@
+// ds-container.ts
+// Container component with responsive width constraints
+
+import { LitElement, html, css } from "lit";
+
+declare global {
+  interface CustomElementRegistry {
+    define(name: string, constructor: typeof LitElement): void;
+  }
+  var customElements: CustomElementRegistry;
+}
+
+export class Container extends LitElement {
+  static styles = css`
+    :host {
+      display: flex;
+      width: 100%;
+      max-width: 100%;
+      flex-direction: column;
+      box-sizing: border-box;
+    }
+
+    /* Ensure children don't overflow */
+    :host ::slotted(*) {
+      max-width: 100%;
+      box-sizing: border-box;
+    }
+
+    /* Mobile: 100% width */
+    @media (max-width: 820px) {
+      :host {
+        width: 100%;
+        max-width: 100%;
+      }
+    }
+
+    /* Desktop: max-width 1000px, centered */
+    @media (min-width: 821px) {
+      :host {
+        max-width: 1000px;
+        margin-left: auto;
+        margin-right: auto;
+        width: 100%;
+      }
+    }
+  `;
+
+  render() {
+    return html`<slot></slot>`;
+  }
+}
+
+customElements.define("ds-container", Container);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-container": Container;
+  }
+}

package/DS1/4-page/ds-grid.ts

@@ -2,6 +2,7 @@
 // Simple grid layout component
 
 import { LitElement, html, css } from "lit";
+import { detectMobileDevice } from "../0-face/device";
 
 declare global {
   interface CustomElementRegistry {
@@ -16,6 +17,8 @@ export class Grid extends LitElement {
   };
 
   align?: string;
+  private resizeObserver?: () => void;
+  private resizeTimeout?: any;
 
   static styles = css`
     :host {
@@ -23,13 +26,13 @@ export class Grid extends LitElement {
       margin-left: 0.5px !important;
       display: grid;
       width: 1440px;
-      height: 360px;
+      height: 1280px;
       grid-template-columns: repeat(auto-fill, 19px);
       grid-template-rows: repeat(auto-fill, 19px);
       gap: 1px;
       row-rule: calc(1px * var(--sf)) solid var(--grid-color);
       column-rule: calc(1px * var(--sf)) solid var(--grid-color);
-      outline: 1px solid black;
+      outline: calc(1px * var(--sf)) solid var(--yellow);
       position: fixed;
       top: 0;
       left: 50%;
@@ -42,7 +45,7 @@ export class Grid extends LitElement {
     :host(.mobile) {
       width: calc(100% - calc(1px * var(--sf)));
       max-width: 100vw;
-      margin-left: 0 !important;
+      margin-left: 0.5px !important;
       margin-top: 0 !important;
       box-sizing: border-box;
       position: fixed;
@@ -73,6 +76,43 @@ export class Grid extends LitElement {
     }
   `;
 
+  connectedCallback() {
+    super.connectedCallback();
+    this.updateMobileClass();
+
+    // Listen for resize events to update mobile class
+    this.resizeObserver = () => {
+      if (this.resizeTimeout) {
+        clearTimeout(this.resizeTimeout);
+      }
+      this.resizeTimeout = setTimeout(() => {
+        this.updateMobileClass();
+      }, 100);
+    };
+    window.addEventListener("resize", this.resizeObserver);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this.resizeObserver) {
+      window.removeEventListener("resize", this.resizeObserver);
+    }
+    if (this.resizeTimeout) {
+      clearTimeout(this.resizeTimeout);
+    }
+  }
+
+  private updateMobileClass() {
+    const isMobile = detectMobileDevice();
+    if (isMobile) {
+      this.classList.add("mobile");
+      this.classList.remove("desktop");
+    } else {
+      this.classList.add("desktop");
+      this.classList.remove("mobile");
+    }
+  }
+
   render() {
     return html``;
   }