ds-one 0.3.0-alpha.3 → 0.3.0-alpha.4

package/DS1/1-root/one.css

@@ -1,4 +1,4 @@
-/* version 0.3.0-alpha.3 */
+/* version 0.3.0-alpha.4 */
 
 @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");
@@ -125,18 +125,11 @@ input {
 
   /* Layouts */
 
-  /* App layout (used for app) */
-  --app-layout: 
-
-
-  /* Home layout (used for lists) */ --home-layout: calc(
-      var(--unit) * var(--sf)
-    )
+  /* Home layout (used for lists) */
+  --home-layout: calc(var(--unit) * var(--sf)) calc(var(--unit) * var(--sf))
     calc(var(--unit) * var(--sf)) calc(var(--unit) * var(--sf))
-    calc(var(--unit) * var(--sf)) calc(var(--oct) * var(--sf))
-    calc(var(--oct) * var(--sf)) calc(var(--quad) * var(--sf))
-    calc(var(--double) * var(--sf));
-  --home-layout-areas: "banner" "." "header" "." "message" "lists" "." "footer";
+    calc(var(--oct) * var(--sf));
+  --home-layout-areas: "banner" "." "header" "." "lists";
 
   /* App layout */
   --app-layout: calc(var(--unit) * var(--sf)) calc(var(--unit) * var(--sf))
@@ -145,6 +138,11 @@ input {
     calc(var(--quad) * var(--sf)) calc(var(--double) * var(--sf));
   --app-layout-areas: "banner" "." "header" "." "main" "page-dots" "." "footer";
 
+  /* Settings layout */
+  --settings-layout: calc(var(--unit) * var(--sf)) calc(var(--unit) * var(--sf))
+    1fr;
+  --settings-layout-areas: "banner" "." "settings";
+
   /* size */
   --outline-stroke: 1px solid var(--slate-light);
   --outline-stroke-mobile: 2px solid var(--sharp-blue);

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

@@ -7,33 +7,23 @@ import styles from "./styles/ds-button.css?inline";
 
 export class Button extends LitElement {
   static properties = {
-    variant: { type: String, reflect: true },
+    primary: { type: Boolean, reflect: true },
+    secondary: { type: Boolean, reflect: true },
     disabled: { type: Boolean, reflect: true },
-    bold: { type: Boolean, reflect: true },
-    "no-background": {
-      type: Boolean,
-      reflect: true,
-      attribute: "no-background",
-    },
     blank: { type: Boolean, reflect: true },
-    text: { type: String },
-    fallback: { type: String },
     language: { type: String },
-    defaultText: { type: String, attribute: "default-text" },
+    text: { type: String },
     href: { type: String },
     _loading: { type: Boolean, state: true },
   };
 
   // Public properties
-  declare variant: string;
+  declare primary: boolean;
+  declare secondary: boolean;
   declare disabled: boolean;
-  declare bold: boolean;
-  declare "no-background": boolean;
   declare blank: boolean;
-  declare text: string;
-  declare fallback: string;
   declare language: string;
-  declare defaultText: string;
+  declare text: string;
   declare href: string;
 
   // Private state
@@ -41,15 +31,12 @@ export class Button extends LitElement {
 
   constructor() {
     super();
-    this.variant = "title";
+    this.primary = false; // Default to no-background (no attribute)
+    this.secondary = false;
     this.disabled = false;
-    this.bold = false;
-    this["no-background"] = false;
     this.blank = false;
-    this.text = "";
-    this.fallback = "";
     this.language = "en-US";
-    this.defaultText = "";
+    this.text = "";
     this.href = "";
     this._loading = false;
   }
@@ -61,22 +48,17 @@ export class Button extends LitElement {
   }
 
   render() {
-    const hasTextProps = this.text || this.defaultText || this.fallback;
+    const hasTextProps = this.text;
 
     return html`
       <button
-        class=${this.variant}
+        ?primary=${this.primary}
+        ?secondary=${this.secondary}
         ?disabled=${this.disabled}
-        ?bold=${this.bold}
-        ?no-background=${this["no-background"]}
         @click=${this._handleClick}
       >
         ${hasTextProps
-          ? html`<ds-text
-              .text=${this.text}
-              .defaultValue=${this.defaultText}
-              .fallback=${this.fallback}
-            ></ds-text>`
+          ? html`<ds-text .text=${this.text}></ds-text>`
           : html`<slot></slot>`}
       </button>
     `;

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

@@ -539,10 +539,12 @@ export class Cycle extends LitElement {
     return html`
       <div class="cycle">
         <ds-button
-          variant=${this.variant ||
-          (this.type === "language" || this.type === "theme"
-            ? "secondary"
-            : "primary")}
+          variant=${this.type === "accent-color"
+            ? "primary"
+            : this.variant ||
+              (this.type === "language" || this.type === "theme"
+                ? "secondary"
+                : "primary")}
           ?disabled=${this.disabled}
           @click=${this.handleButtonClick}
         >
@@ -557,7 +559,7 @@ export class Cycle extends LitElement {
                 ></ds-text>`
               : this.type === "theme"
                 ? html`<ds-text
-                    text=${this.currentValue}
+                    text=${this.currentValue === "light" ? "Light" : "Dark"}
                   ></ds-text>`
                 : this.type === "accent-color"
                   ? html`<ds-text
@@ -571,15 +573,6 @@ export class Cycle extends LitElement {
                         text=${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-text.ts

@@ -7,19 +7,16 @@ import styles from "./styles/ds-text.css?inline";
  *
  * @element ds-text
  * @prop {string} text - The translation text to use
- * @prop {string} fallback - Optional fallback text if translation is not found (deprecated)
  */
 export class Text extends LitElement {
   static get properties() {
     return {
       text: { type: String, reflect: true },
-      fallback: { type: String, reflect: true }, // Kept for backward compatibility
       _text: { type: String, state: true },
     };
   }
 
   declare text: string;
-  declare fallback: string;
   declare _text: string;
   declare _currentLanguage: string;
   private boundHandlers: { languageChanged: EventListener };
@@ -27,7 +24,6 @@ export class Text extends LitElement {
   constructor() {
     super();
     this.text = "";
-    this.fallback = "";
     this._text = "";
     this._currentLanguage = currentLanguage.value;
 
@@ -119,7 +115,7 @@ export class Text extends LitElement {
 
   _loadText() {
     if (!this.text) {
-      this._text = this.fallback || "";
+      this._text = "";
       this._updateLanguageAttribute();
       this.requestUpdate();
       return;
@@ -127,10 +123,10 @@ export class Text extends LitElement {
 
     try {
       const translatedText = getText(this.text);
-      this._text = translatedText || this.fallback || this.text;
+      this._text = translatedText || this.text;
     } catch (error) {
       console.error("Error loading text for text:", this.text, error);
-      this._text = this.fallback || this.text;
+      this._text = this.text;
     }
     this._updateLanguageAttribute();
     this.requestUpdate();

package/DS1/2-core/styles/ds-button.css

@@ -1,69 +1,61 @@
 /* ds-button.css */
 /* Core button component styles */
 
+:host {
+  display: inline-flex;
+  min-width: 0;
+  flex: 0 1 auto;
+  max-width: 100%;
+  overflow: hidden;
+}
+
 button {
   max-height: calc(var(--08) * var(--sf));
   height: calc(var(--08) * var(--sf));
   min-height: calc(var(--08) * var(--sf));
-  width: fit-content;
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
   display: inline-flex;
   align-items: center;
-  justify-content: center;
+  justify-content: flex-start;
   border: none;
   cursor: pointer;
-  padding: 0 calc(0.5px * var(--sf));
-  color: var(--button-text-color);
+  padding: 0;
+  color: var(--button-color, var(--button-text-color));
   font-family: var(--typeface-regular);
   -webkit-tap-highlight-color: transparent;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  /* Default to no-background when no variant is specified */
+  background-color: transparent;
+  text-decoration: none;
 }
 
-button.title {
-  background-color: var(--button-background-color-secondary);
-  color: var(--button-text-color);
+button ds-text,
+button ::slotted(*) {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 100%;
+  text-align: left;
+  justify-content: flex-start;
 }
 
-button.primary {
+button[primary] {
   background-color: var(--accent-color);
   color: var(--button-text-color);
   text-decoration-line: none;
   font-family: var(--typeface-regular);
+  padding: 0 calc(0.5px * var(--sf));
 }
 
-button.secondary {
+button[secondary] {
   background-color: var(--button-background-color-secondary);
   color: var(--button-text-color);
   font-family: var(--typeface-regular);
-}
-
-button.text {
-  background-color: transparent;
-  color: var(--button-color, var(--button-text-color));
-  font-family: var(--typeface-regular);
-  padding: 0;
-  text-decoration: none;
-}
-
-button.text:hover {
-  opacity: 0.8;
-  text-decoration: none;
-}
-
-button[bold] {
-  font-weight: var(--type-weight-bold);
-  font-family: var(--typeface-medium);
-}
-
-button[no-background] {
-  background-color: transparent;
-  max-height: var(--1);
-  padding: 0;
-  color: var(--button-color, var(--button-text-color-secondary));
-}
-
-button[no-background][bold] {
-  font-weight: var(--type-weight-bold);
-  font-family: var(--typeface-medium);
-  color: var(--button-color, var(--button-text-color-secondary));
+  padding: 0 calc(0.5px * var(--sf));
 }
 
 .loading {

package/DS1/2-core/styles/ds-cycle.css

@@ -9,13 +9,4 @@
 .cycle {
   display: inline-flex;
   align-items: center;
-  gap: var(--025);
-}
-
-.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;
 }

package/DS1/2-core/styles/ds-text.css

@@ -4,17 +4,18 @@
 :host {
   display: inline-flex;
   align-items: center;
-  justify-content: center;
+  justify-content: flex-start;
   height: calc(16px * var(--sf));
   font-family: var(--typeface-regular);
   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));
-  text-align: center;
+  text-align: left;
   text-transform: var(--text-transform-default);
   text-decoration: var(--text-decoration-default);
   vertical-align: middle;
+  white-space: nowrap;
 }
 
 :host([data-language="ja"]) {

package/DS1/3-unit/styles/ds-row.css

@@ -10,6 +10,7 @@
 :host([fill]) {
   justify-content: space-between;
   height: calc(var(--1) * var(--sf));
+  width: 100%;
 }
 
 :host([centered]) {