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

package/DS1/1-root/one.css

@@ -1,4 +1,4 @@
-/* version 0.3.0-alpha.3 */
+/* version 0.3.0-alpha.5 */
 
 @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/generated/ds-icon-map.ts

@@ -27,6 +27,7 @@ export const iconNameToSvgMap: Record<string, string> = {
   "down": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M7.49645 12.5178V2.86102e-06H8.50702L8.50841 12.5174L11.4156 9.61018L12.1095 10.317L8.00173 14.4248L3.8905 10.3135L4.59784 9.60619L7.49645 12.5178Z\" fill=\"#1E1E1E\"/>\n</svg>",
   "duplicate": "<svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<rect x=\"3\" y=\"3\" width=\"8\" height=\"8\" rx=\"1\" stroke=\"currentColor\" stroke-width=\"1.2\" fill=\"none\"/>\n<path d=\"M9 3V2C9 1.44772 8.55228 1 8 1H2C1.44772 1 1 1.44772 1 2V8C1 8.55228 1.44772 9 2 9H3\" stroke=\"currentColor\" stroke-width=\"1.2\" fill=\"none\"/>\n</svg>",
   "email": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"11\" viewBox=\"0 0 16 11\" fill=\"none\">\n  <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M14.0871 0.989435L0.930906 0.988037L0.930542 11L13.0753 11H14.0871V0.989435ZM7.50709 8.0566L1.94249 2.49201L1.94248 9.98814H13.0753V2.48839L7.50709 8.0566ZM2.85116 2L7.50709 6.65593L12.1515 1.99952L2.85116 2Z\" fill=\"currentColor\"/>\n</svg>",
+  "exercise": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M9.11131 4.50523C8.89226 4.50523 8.69548 4.45325 8.52098 4.3493C8.34648 4.24163 8.20539 4.10054 8.09772 3.92604C7.99377 3.75154 7.94179 3.55662 7.94179 3.34128C7.94179 3.12594 7.99377 2.93102 8.09772 2.75652C8.20539 2.5783 8.34648 2.43722 8.52098 2.33326C8.69548 2.2293 8.89226 2.17732 9.11131 2.17732C9.32665 2.17732 9.52157 2.2293 9.69607 2.33326C9.87057 2.43722 10.0098 2.5783 10.1138 2.75652C10.2214 2.93102 10.2753 3.12594 10.2753 3.34128C10.2753 3.55662 10.2214 3.75154 10.1138 3.92604C10.0098 4.10054 9.87057 4.24163 9.69607 4.3493C9.52157 4.45325 9.32665 4.50523 9.11131 4.50523ZM7.29019 9.12207C7.13797 9.03668 6.98389 8.94386 6.82795 8.84361C6.67202 8.73965 6.55692 8.60228 6.48267 8.43149C6.40841 8.25699 6.41584 8.01938 6.50494 7.71864L6.9282 6.19269C6.9579 6.09616 6.94305 6.0219 6.88365 5.96992C6.82424 5.91794 6.7537 5.89567 6.67202 5.90309L5.93132 5.95322L5.70855 7.49031C5.66029 7.83559 5.48022 7.99524 5.16834 7.96925C5.01983 7.9544 4.90659 7.89314 4.82862 7.78547C4.75066 7.67409 4.72281 7.53486 4.74509 7.36778L5.00127 5.47984C5.01983 5.3239 5.07738 5.19952 5.17391 5.1067C5.27044 5.01388 5.39482 4.9619 5.54705 4.95077L7.40715 4.82268C7.89723 4.78555 8.30193 4.83753 8.62123 4.97861C8.94052 5.11598 9.22084 5.34989 9.46217 5.68033L10.3755 6.94453L11.701 6.3542C11.8495 6.28737 11.985 6.27251 12.1075 6.30964C12.2338 6.34677 12.3284 6.43402 12.3915 6.57139C12.4584 6.70877 12.4658 6.83871 12.4138 6.96123C12.3618 7.08376 12.2597 7.17843 12.1075 7.24526L10.4256 7.9971C10.3143 8.04908 10.1992 8.05836 10.0803 8.02495C9.96525 7.99153 9.87429 7.92284 9.80746 7.81889L9.21713 6.9668C9.16143 6.88512 9.09089 6.84985 9.0055 6.86099C8.9201 6.87213 8.86441 6.92596 8.83842 7.0225L8.44301 8.38137L10.4312 9.68456C10.5834 9.7848 10.6688 9.9296 10.6874 10.119C10.7059 10.3083 10.6503 10.4568 10.5203 10.5645L8.69362 12.1183C8.54511 12.2445 8.3966 12.3021 8.24809 12.2909C8.10329 12.2835 7.98634 12.2297 7.89723 12.1294C7.81184 12.0292 7.77286 11.9085 7.78028 11.7674C7.78771 11.6226 7.86382 11.4908 8.00862 11.372L9.30066 10.2526L7.29019 9.12207ZM3.73707 13.6999C3.6294 13.6034 3.56814 13.4772 3.55329 13.3212C3.54215 13.1653 3.60712 13.0186 3.74821 12.8813L5.53034 11.1103L6.15409 8.89373C6.25062 9.01997 6.37128 9.13878 6.51608 9.25016C6.66088 9.35783 6.83352 9.46736 7.03401 9.57874L7.2178 9.68456L6.50494 11.5224C6.46039 11.6338 6.42326 11.7117 6.39356 11.7563C6.36386 11.7971 6.31188 11.8547 6.23762 11.9289L4.51675 13.6275C4.38309 13.7575 4.24572 13.8224 4.10463 13.8224C3.96355 13.8262 3.84103 13.7853 3.73707 13.6999Z\" fill=\"currentColor\"/>\n</svg>",
   "expand": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\n  <path d=\"M0 5.81415V0H5.80924L5.81842 0.990424H1.70698L11.0089 10.2943L10.9997 6.18585H12V12H6.19076L6.18158 11.0096H10.293L0.99115 1.70573L1.00033 5.81415H0Z\" fill=\"currentColor\"/>\n</svg>",
   "gallery": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M0 16V0H16L0 16ZM0.706055 0.769531V1.80957H3.60547V10H4.83984V1.80957H7.73926V0.769531H0.706055Z\" fill=\"#1E1E1E\"/>\n</svg>",
   "globe": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M6.87775 12.5554C7.08028 12.6051 7.28795 12.6416 7.49983 12.664V11.8571C7.2467 11.5176 7.00708 11.1483 6.79982 10.753C6.49693 10.8285 6.20261 10.9278 5.9183 11.0454C6.19879 11.6048 6.53384 12.111 6.87775 12.5554Z\" fill=\"#1E1E1E\"/>\n<path d=\"M5.19187 8.49193C5.23389 9.09581 5.36568 9.66767 5.55639 10.2017C5.83545 10.0858 6.12511 9.9844 6.42434 9.90232C6.26416 9.4557 6.15312 8.98405 6.11253 8.49193H5.19187Z\" fill=\"#1E1E1E\"/>\n<path d=\"M6.87775 3.42868C7.08028 3.37904 7.28795 3.34252 7.49983 3.3201V4.12696C7.2467 4.46645 7.00708 4.83584 6.79982 5.23109C6.49693 5.15561 6.20261 5.05627 5.9183 4.93873C6.19879 4.37926 6.53384 3.87306 6.87775 3.42868Z\" fill=\"#1E1E1E\"/>\n<path d=\"M5.19187 7.49217C5.23389 6.88828 5.36568 6.31643 5.55639 5.7824C5.83545 5.89834 6.12511 5.9997 6.42434 6.08178C6.26416 6.52839 6.15312 7.00004 6.11253 7.49217H5.19187Z\" fill=\"#1E1E1E\"/>\n<path d=\"M2.30171 7.99205H3.30171C3.30172 7.82319 3.31063 7.65642 3.32801 7.49217C3.42195 6.60422 3.76325 5.79004 4.28172 5.11985C3.98894 4.93686 3.71427 4.74365 3.45958 4.54857C2.73299 5.50512 2.30174 6.69824 2.30171 7.99205Z\" fill=\"#1E1E1E\"/>\n<path d=\"M2.30171 7.99205C2.30174 9.28585 2.73299 10.479 3.45958 11.4355C3.71427 11.2404 3.98894 11.0472 4.28172 10.8642C3.76325 10.1941 3.42195 9.37987 3.32801 8.49193C3.31063 8.32768 3.30172 8.1609 3.30171 7.99205H2.30171Z\" fill=\"#1E1E1E\"/>\n<path d=\"M9.12215 12.5552C8.91963 12.6048 8.71196 12.6414 8.50008 12.6638V11.8569C8.75321 11.5174 8.99283 11.148 9.20009 10.7528C9.50298 10.8283 9.7973 10.9276 10.0816 11.0452C9.80112 11.6046 9.46607 12.1108 9.12215 12.5552Z\" fill=\"#1E1E1E\"/>\n<path d=\"M10.808 8.49171C10.766 9.0956 10.6342 9.66745 10.4435 10.2015C10.1645 10.0855 9.87479 9.98418 9.57557 9.90211C9.73575 9.45549 9.84678 8.98384 9.88738 8.49171H10.808Z\" fill=\"#1E1E1E\"/>\n<path d=\"M9.12215 3.42847C8.91963 3.37883 8.71196 3.34231 8.50008 3.31989V4.12675C8.75321 4.46624 8.99283 4.83563 9.20009 5.23088C9.50298 5.1554 9.7973 5.05606 10.0816 4.93852C9.80112 4.37905 9.46607 3.87284 9.12215 3.42847Z\" fill=\"#1E1E1E\"/>\n<path d=\"M10.808 7.49196C10.766 6.88807 10.6342 6.31622 10.4435 5.78218C10.1645 5.89813 9.87479 5.99949 9.57557 6.08156C9.73575 6.52818 9.84678 6.99983 9.88738 7.49196H10.808Z\" fill=\"#1E1E1E\"/>\n<path d=\"M13.6982 7.99205L12.6982 7.99184C12.6982 7.82298 12.6893 7.65621 12.6719 7.49196C12.578 6.60401 12.2367 5.78983 11.7182 5.11964C12.011 4.93665 12.2856 4.74344 12.5403 4.54836C13.2669 5.5049 13.6982 6.69824 13.6982 7.99205Z\" fill=\"#1E1E1E\"/>\n<path d=\"M13.6982 7.99205C13.6982 9.28585 13.2669 10.4788 12.5403 11.4353C12.2856 11.2402 12.011 11.047 11.7182 10.864C12.2367 10.1938 12.578 9.37966 12.6719 8.49171C12.6893 8.32746 12.6982 8.16069 12.6982 7.99184L13.6982 7.99205Z\" fill=\"#1E1E1E\"/>\n<path d=\"M6.872 13.5787C7.2366 13.6519 7.61379 13.6903 7.99995 13.6903V12.6903C7.83102 12.6903 7.66416 12.6814 7.49983 12.664C7.28795 12.6416 7.08028 12.6051 6.87775 12.5554C6.14481 12.3758 5.47939 12.0241 4.9267 11.5457C4.62544 11.7252 4.3403 11.9201 4.0736 12.1216C4.83631 12.847 5.79974 13.3633 6.872 13.5787Z\" fill=\"#1E1E1E\"/>\n<path d=\"M3.45958 11.4355C3.64564 11.6805 3.85108 11.9099 4.0736 12.1216C4.3403 11.9201 4.62544 11.7252 4.9267 11.5457C4.68981 11.3407 4.47363 11.1123 4.28172 10.8642C3.98894 11.0472 3.71427 11.2404 3.45958 11.4355Z\" fill=\"#1E1E1E\"/>\n<path d=\"M4.9267 11.5457C5.24061 11.3587 5.57202 11.1885 5.9183 11.0454C5.78333 10.7762 5.661 10.4946 5.55639 10.2017C5.10182 10.3906 4.6754 10.6182 4.28172 10.8642C4.47363 11.1123 4.68981 11.3407 4.9267 11.5457Z\" fill=\"#1E1E1E\"/>\n<path d=\"M5.9183 11.0454C6.20261 10.9278 6.49693 10.8285 6.79982 10.753C6.65732 10.4812 6.53011 10.1972 6.42434 9.90232C6.12511 9.9844 5.83545 10.0858 5.55639 10.2017C5.661 10.4946 5.78333 10.7762 5.9183 11.0454Z\" fill=\"#1E1E1E\"/>\n<path d=\"M6.79982 10.753C7.02849 10.696 7.26203 10.6526 7.49983 10.6253V9.70209C7.12963 9.73818 6.77058 9.80734 6.42434 9.90232C6.53011 10.1972 6.65732 10.4812 6.79982 10.753Z\" fill=\"#1E1E1E\"/>\n<path d=\"M7.49983 12.664C7.66416 12.6814 7.83102 12.6903 7.99995 12.6903V7.99205H3.30171C3.30172 8.1609 3.31063 8.32768 3.32801 8.49193H5.19187H6.11253H7.49983V9.70209V10.6253V11.8571V12.664Z\" fill=\"#1E1E1E\"/>\n<path d=\"M7.99995 12.6903C8.16889 12.6903 8.33575 12.6812 8.50008 12.6638V11.8569V10.6251V9.70188V8.49171H9.88738H10.808H12.6719C12.6893 8.32746 12.6982 8.16069 12.6982 7.99184L7.99995 7.99205V12.6903Z\" fill=\"#1E1E1E\"/>\n<path d=\"M8.50008 10.6251C8.73788 10.6524 8.97142 10.6958 9.20009 10.7528C9.34259 10.481 9.4698 10.197 9.57557 9.90211C9.22932 9.80713 8.87028 9.73797 8.50008 9.70188V10.6251Z\" fill=\"#1E1E1E\"/>\n<path d=\"M9.20009 10.7528C9.50298 10.8283 9.7973 10.9276 10.0816 11.0452C10.2166 10.7759 10.3389 10.4944 10.4435 10.2015C10.1645 10.0855 9.87479 9.98418 9.57557 9.90211C9.4698 10.197 9.34259 10.481 9.20009 10.7528Z\" fill=\"#1E1E1E\"/>\n<path d=\"M10.0816 11.0452C10.4279 11.1883 10.7593 11.3585 11.0732 11.5455C11.3101 11.3404 11.5263 11.1121 11.7182 10.864C11.3245 10.618 10.8981 10.3904 10.4435 10.2015C10.3389 10.4944 10.2166 10.7759 10.0816 11.0452Z\" fill=\"#1E1E1E\"/>\n<path d=\"M11.9263 12.1214C12.1488 11.9097 12.3543 11.6803 12.5403 11.4353C12.2856 11.2402 12.011 11.047 11.7182 10.864C11.5263 11.1121 11.3101 11.3404 11.0732 11.5455C11.3745 11.725 11.6596 11.9199 11.9263 12.1214Z\" fill=\"#1E1E1E\"/>\n<path d=\"M7.99995 13.6903C8.38611 13.6903 8.7633 13.6517 9.12791 13.5784C10.2002 13.3631 11.1636 12.8468 11.9263 12.1214C11.6596 11.9199 11.3745 11.725 11.0732 11.5455C10.5205 12.0239 9.8551 12.3756 9.12215 12.5552C8.91963 12.6048 8.71196 12.6414 8.50008 12.6638C8.33575 12.6812 8.16889 12.6903 7.99995 12.6903V13.6903Z\" fill=\"#1E1E1E\"/>\n<path d=\"M9.20009 5.23088C8.97142 5.28786 8.73788 5.33124 8.50008 5.3586V6.28179C8.87028 6.24571 9.22932 6.17654 9.57557 6.08156C9.4698 5.78665 9.34259 5.50265 9.20009 5.23088Z\" fill=\"#1E1E1E\"/>\n<path d=\"M7.49983 5.35882C7.26203 5.33145 7.02849 5.28807 6.79982 5.23109C6.65732 5.50286 6.53011 5.78686 6.42434 6.08178C6.77058 6.17675 7.12963 6.24592 7.49983 6.282V5.35882Z\" fill=\"#1E1E1E\"/>\n<path d=\"M6.79982 5.23109C6.49693 5.15561 6.20261 5.05627 5.9183 4.93873C5.78333 5.20794 5.661 5.48948 5.55639 5.7824C5.83545 5.89834 6.12511 5.9997 6.42434 6.08178C6.53011 5.78686 6.65732 5.50286 6.79982 5.23109Z\" fill=\"#1E1E1E\"/>\n<path d=\"M5.9183 4.93873C5.57202 4.79556 5.24061 4.62538 4.9267 4.43838C4.68981 4.64343 4.47363 4.87178 4.28172 5.11985C4.6754 5.36592 5.10182 5.59352 5.55639 5.7824C5.661 5.48948 5.78333 5.20794 5.9183 4.93873Z\" fill=\"#1E1E1E\"/>\n<path d=\"M4.0736 3.86253C3.85108 4.07417 3.64564 4.30362 3.45958 4.54857C3.71427 4.74365 3.98894 4.93686 4.28172 5.11985C4.47363 4.87178 4.68981 4.64343 4.9267 4.43838C4.62544 4.25892 4.3403 4.06396 4.0736 3.86253Z\" fill=\"#1E1E1E\"/>\n<path d=\"M7.99995 2.29381C7.61379 2.29381 7.2366 2.33222 6.872 2.40544C5.79974 2.62077 4.83631 3.13711 4.0736 3.86253C4.3403 4.06396 4.62544 4.25892 4.9267 4.43838C5.47939 3.95997 6.14481 3.60833 6.87775 3.42868C7.08028 3.37904 7.28795 3.34252 7.49983 3.3201C7.66416 3.30271 7.83102 3.2938 7.99995 3.2938V2.29381Z\" fill=\"#1E1E1E\"/>\n<path d=\"M7.99995 3.2938C7.83102 3.2938 7.66416 3.30271 7.49983 3.3201V4.12696V5.35882V6.282V7.49217H6.11253H5.19187H3.32801C3.31063 7.65642 3.30172 7.82319 3.30171 7.99205H7.99995V3.2938Z\" fill=\"#1E1E1E\"/>\n<path d=\"M8.50008 3.31989C8.33575 3.3025 8.16889 3.2938 7.99995 3.2938V7.99205L12.6982 7.99184C12.6982 7.82298 12.6893 7.65621 12.6719 7.49196H10.808H9.88738H8.50008V6.28179V5.3586V4.12675V3.31989Z\" fill=\"#1E1E1E\"/>\n<path d=\"M9.12791 2.40523C8.7633 2.33201 8.38611 2.29381 7.99995 2.29381V3.2938C8.16889 3.2938 8.33575 3.3025 8.50008 3.31989C8.71196 3.34231 8.91963 3.37883 9.12215 3.42847C9.8551 3.60812 10.5205 3.95976 11.0732 4.43817C11.3745 4.25871 11.6596 4.06375 11.9263 3.86232C11.1636 3.13689 10.2002 2.62056 9.12791 2.40523Z\" fill=\"#1E1E1E\"/>\n<path d=\"M10.0816 4.93852C9.7973 5.05606 9.50298 5.1554 9.20009 5.23088C9.34259 5.50265 9.4698 5.78665 9.57557 6.08156C9.87479 5.99949 10.1645 5.89813 10.4435 5.78218C10.3389 5.48926 10.2166 5.20772 10.0816 4.93852Z\" fill=\"#1E1E1E\"/>\n<path d=\"M11.0732 4.43817C10.7593 4.62517 10.4279 4.79535 10.0816 4.93852C10.2166 5.20772 10.3389 5.48926 10.4435 5.78218C10.8981 5.5933 11.3245 5.3657 11.7182 5.11964C11.5263 4.87157 11.3101 4.64322 11.0732 4.43817Z\" fill=\"#1E1E1E\"/>\n<path d=\"M12.5403 4.54836C12.3543 4.3034 12.1488 4.07396 11.9263 3.86232C11.6596 4.06375 11.3745 4.25871 11.0732 4.43817C11.3101 4.64322 11.5263 4.87157 11.7182 5.11964C12.011 4.93665 12.2856 4.74344 12.5403 4.54836Z\" fill=\"#1E1E1E\"/>\n</svg>",
@@ -37,6 +38,7 @@ export const iconNameToSvgMap: Record<string, string> = {
   "icon": "<svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<rect x=\"1\" y=\"1\" width=\"10\" height=\"10\" rx=\"2\" stroke=\"currentColor\" stroke-width=\"1.2\" fill=\"none\"/>\n<circle cx=\"6\" cy=\"6\" r=\"2.5\" fill=\"currentColor\"/>\n</svg>",
   "in": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M12.1361 3.56571L7.99688 7.72965L3.86423 3.57226L4.5628 2.85638L7.48765 5.79873L7.49661 9.59381e-07L8.51508 0L8.50612 5.79873L11.4244 2.84983L12.1361 3.56571Z\" fill=\"#1E1E1E\"/>\n<path d=\"M3.86395 12.3337L8.00314 8.16974L12.1358 12.3271L11.4372 13.043L8.51238 10.1007L8.49783 16H7.47936L7.4939 10.1007L4.57558 13.0496L3.86395 12.3337Z\" fill=\"#1E1E1E\"/>\n</svg>",
   "left": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"9\" viewBox=\"0 0 16 9\" fill=\"none\">\n  <path d=\"M1.90697 3.60594H15.0636V4.61651L1.90734 4.61791L4.81456 7.52513L4.10774 8.21898L-1.23978e-05 4.11123L4.11122 0L4.81855 0.707338L1.90697 3.60594Z\" fill=\"currentColor\"/>\n</svg>",
+  "life": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M3.76595 12.3556L12.2336 12.3556V13.3529L4.76332 13.3529L3.76595 13.3529V12.3556Z\" fill=\"currentColor\"/>\n<path d=\"M4.76332 13.3529L3.76595 13.3529V7.16597L4.76329 7.16597L4.76332 13.3529Z\" fill=\"currentColor\"/>\n<path d=\"M12.2336 13.3529H11.2363L11.2363 7.16599L12.2336 7.16597V13.3529Z\" fill=\"currentColor\"/>\n<path d=\"M11.6251 6.4395H10.6278L10.6278 4.16374L11.6251 4.16372V6.4395Z\" fill=\"currentColor\"/>\n<path d=\"M7.99993 2.64708L13.4713 8.11835L12.7661 8.82358L7.2947 3.35231L7.99993 2.64708Z\" fill=\"currentColor\"/>\n<path d=\"M3.23393 8.82358L2.52869 8.11832L7.99993 2.64708L8.70517 3.3523L3.23393 8.82358Z\" fill=\"currentColor\"/>\n</svg>",
   "lock": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8 2.60742C9.53669 2.60746 10.7822 3.85296 10.7822 5.38965V7.64746H11.5996V13.3926H4.40039V7.64746H5.21777V5.38965C5.21779 3.85295 6.4633 2.60744 8 2.60742ZM8 3.62695C7.02663 3.62697 6.23733 4.41628 6.2373 5.38965V7.64746H9.7627V5.38965C9.76267 4.41629 8.97336 3.62699 8 3.62695Z\" fill=\"#1E1E1E\"/>\n</svg>",
   "loop": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M12.0037 1.96826L12.0037 7.12486L14.9023 4.21328L15.6096 4.92061L11.4984 9.03184L7.39064 4.92409L8.08449 4.21727L10.9917 7.12449L10.9931 2.98673L5.00853 3.00323V1.98475L12.0037 1.96826Z\" fill=\"#1E1E1E\"/>\n<path d=\"M3.99657 14.0318L3.99657 8.87523L1.09796 11.7868L0.390625 11.0795L4.50185 6.96825L8.6096 11.076L7.91576 11.7828L5.00853 8.8756L5.00714 13.0134L10.9917 12.9972V14.0157L3.99657 14.0318Z\" fill=\"#1E1E1E\"/>\n<path d=\"M10.9917 12.9972V14.0157H12.0037V12.9973V9.85949L10.9917 9.85912V12.9972Z\" fill=\"#1E1E1E\"/>\n<path d=\"M3.99657 5.1225V6.14098H5.00853V5.12251V1.98475L3.99657 1.98438V5.1225Z\" fill=\"#1E1E1E\"/>\n</svg>",
   "mic": "<svg width=\"10\" height=\"14\" viewBox=\"0 0 10 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<rect x=\"2.5\" y=\"1\" width=\"5\" height=\"7\" rx=\"2.5\" stroke=\"currentColor\" stroke-width=\"1.2\" fill=\"none\"/>\n<path d=\"M1 6C1 8.76142 2.79086 11 5 11C7.20914 11 9 8.76142 9 6\" stroke=\"currentColor\" stroke-width=\"1.2\" fill=\"none\"/>\n<line x1=\"5\" y1=\"11\" x2=\"5\" y2=\"13\" stroke=\"currentColor\" stroke-width=\"1.2\" stroke-linecap=\"round\"/>\n</svg>",
@@ -48,6 +50,7 @@ export const iconNameToSvgMap: Record<string, string> = {
   "plus": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M8.50235 2.6739L8.4996 7.5035L13.3334 7.51044L13.325 8.50193L8.49328 8.49569L8.49951 13.3274L7.49764 13.3268L7.50039 8.49717L2.66663 8.49024L2.67503 7.49875L7.50672 7.50499L7.50117 2.67261L8.50235 2.6739Z\" fill=\"#1E1E1E\"/>\n</svg>",
   "right": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M13.1566 8.60594H0V9.61651L13.1562 9.61791L10.249 12.5251L10.9558 13.219L15.0636 9.11123L10.9524 5L10.245 5.70734L13.1566 8.60594Z\" fill=\"#1E1E1E\"/>\n</svg>",
   "row": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M3.87698 4.67614L8.01617 0.536957L12.1488 4.66961L11.4503 5.38124L8.5254 2.45639L8.49306 13.5436L11.4114 10.6122L12.123 11.3239L7.98382 15.463L3.85117 11.3304L4.54974 10.6188L7.47459 13.5436L7.50693 2.45639L4.58861 5.38777L3.87698 4.67614Z\" fill=\"#1E1E1E\"/>\n</svg>",
+  "school": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M5.48751 11.2972L10.4354 11.2964H5.49535L5.48751 11.2972Z\" fill=\"currentColor\"/>\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M5.49535 13.0423C4.81691 13.0423 4.2588 12.5265 4.19152 11.8658L4.18468 4.00851C4.18468 3.42828 4.65521 2.95775 5.23544 2.95775H10.7646C11.3448 2.95775 11.8153 3.42829 11.8153 4.00851V10.4123C11.8153 10.7646 11.6092 11.0692 11.3109 11.2115V12.1689C11.5526 12.169 11.7527 12.3649 11.7527 12.6066C11.7527 12.8483 11.5526 13.0421 11.3109 13.0423H5.49535ZM5.06017 11.7316C5.06017 11.5214 5.20914 11.3456 5.40729 11.3049L5.48751 11.2972L5.49535 11.2964H10.4354V12.1668H5.49535L5.40729 12.1574C5.20923 12.1167 5.06023 11.9417 5.06017 11.7316ZM10.798 4.09446H5.20187V5.49349H10.798V4.09446Z\" fill=\"currentColor\"/>\n</svg>",
   "sdown": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M8.50361 11.1717L8.50222 2.92134L7.49165 2.92134L7.49165 11.1713L4.58442 8.26409L3.89058 8.97091L7.99833 13.0787L12.1096 8.96744L11.4022 8.2601L8.50361 11.1717Z\" fill=\"#1E1E1E\"/>\n</svg>",
   "search": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M9.08545 6.62646C9.08545 5.25128 7.9704 4.13623 6.59521 4.13623C5.22003 4.13623 4.10498 5.25128 4.10498 6.62646C4.10498 8.00165 5.22003 9.1167 6.59521 9.1167C7.9704 9.1167 9.08545 8.00165 9.08545 6.62646ZM10.105 6.62646C10.105 7.39551 9.85647 8.10577 9.43701 8.68408L12.9146 12.1616L12.1929 12.8833L8.72412 9.41455C8.13339 9.86631 7.39632 10.1362 6.59521 10.1362C4.6567 10.1362 3.08545 8.56498 3.08545 6.62646C3.08545 4.68795 4.6567 3.1167 6.59521 3.1167C8.53373 3.1167 10.105 4.68795 10.105 6.62646Z\" fill=\"#1E1E1E\"/>\n</svg>",
   "see": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M8.07669 3.70416C10.1007 3.70416 11.795 4.74149 12.9566 5.73248C13.5418 6.23179 14.005 6.72991 14.3218 7.10358C14.4804 7.29069 14.6032 7.44763 14.687 7.55865C14.7289 7.61411 14.7615 7.65861 14.7837 7.68951C14.7947 7.70477 14.8031 7.71711 14.8091 7.72565C14.812 7.72971 14.8143 7.73297 14.8159 7.73541C14.8167 7.73644 14.8174 7.73762 14.8179 7.73834L14.8189 7.73932C14.819 7.73947 14.8195 7.74054 14.4409 8.00006L14.8189 8.25983L14.8179 8.2608C14.8174 8.2616 14.8168 8.26345 14.8159 8.26471C14.8142 8.26716 14.812 8.27042 14.8091 8.27448C14.8031 8.28303 14.7947 8.29531 14.7837 8.31061C14.7615 8.34152 14.7289 8.38597 14.687 8.44147C14.6032 8.5525 14.4805 8.70941 14.3218 8.89655C14.005 9.27021 13.5418 9.76835 12.9566 10.2676C11.795 11.2586 10.1006 12.296 8.07669 12.296C6.05499 12.296 4.32326 11.2606 3.12552 10.2725C2.52184 9.77448 2.04049 9.27717 1.7095 8.90436C1.54374 8.71764 1.4147 8.56095 1.32669 8.45026C1.28274 8.39498 1.24843 8.35111 1.22513 8.32037C1.21356 8.30511 1.20507 8.29275 1.19876 8.28424C1.19566 8.28005 1.19275 8.27694 1.19095 8.27448C1.19016 8.27341 1.18952 8.27227 1.189 8.27155L1.18802 8.27057V8.26959L0.99173 8.00006L1.18802 7.73053V7.72955L1.189 7.72858C1.18953 7.72784 1.19013 7.72676 1.19095 7.72565C1.19276 7.72318 1.19563 7.72011 1.19876 7.71588C1.20506 7.70738 1.21356 7.69502 1.22513 7.67975C1.24842 7.64902 1.28277 7.6051 1.32669 7.54987C1.4147 7.43918 1.54374 7.28248 1.7095 7.09576C2.04048 6.72296 2.52183 6.22565 3.12552 5.7276C4.32326 4.73948 6.05499 3.70417 8.07669 3.70416ZM8.07669 4.62213C6.36481 4.62213 4.83715 5.50531 3.7095 6.43561C3.15087 6.8965 2.70364 7.35865 2.39603 7.70514C2.29735 7.81629 2.21535 7.91722 2.147 8.00006C2.21534 8.08289 2.29738 8.18387 2.39603 8.29498C2.70365 8.64147 3.15087 9.10363 3.7095 9.56451C4.83715 10.4948 6.36481 11.378 8.07669 11.378C9.7862 11.378 11.2738 10.4968 12.3609 9.5694C12.9 9.10949 13.3285 8.64854 13.6216 8.3028C13.7189 8.18799 13.7987 8.0844 13.8648 8.00006C13.7987 7.91573 13.7189 7.81214 13.6216 7.69733C13.3285 7.35158 12.9 6.89064 12.3609 6.43073C11.2738 5.50334 9.78624 4.62213 8.07669 4.62213ZM14.9976 8.00006L14.8199 8.25983L14.4409 8.00006L14.8199 7.7403L14.9976 8.00006Z\" fill=\"#1E1E1E\"/>\n<path d=\"M8.15292 5.66766C9.44109 5.66766 10.4858 6.71157 10.4859 7.99969C10.4859 9.28796 9.44119 10.3327 8.15292 10.3327C6.8648 10.3325 5.82089 9.28786 5.82089 7.99969C5.82106 6.71167 6.8649 5.66783 8.15292 5.66766Z\" fill=\"#1E1E1E\" stroke=\"#1E1E1E\" stroke-width=\"0.81\"/>\n</svg>",
@@ -66,6 +69,7 @@ export const iconNameToSvgMap: Record<string, string> = {
   "unstar": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M10.1972 12.3545L7.99995 10.7617L4.3857 13.4014L5.7773 9.2666L2.42281 7.01758H4.86031L10.1972 12.3545Z\" fill=\"#1E1E1E\"/>\n<path d=\"M13.039 12.6807L12.3193 13.4014L2.96089 4.03418L3.68062 3.31348L13.039 12.6807Z\" fill=\"#1E1E1E\"/>\n<path d=\"M9.49507 7.01758H13.5771L10.5205 9.06738L7.01363 5.56055L7.99995 2.58496L9.49507 7.01758Z\" fill=\"#1E1E1E\"/>\n</svg>",
   "untitle": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M3.76358 3.06275L3.06079 3.76553L4.35081 5.05677L4.35297 5.05461L7.35278 8.05725V6.65465L5.08414 4.38431H4.45378V3.75347L3.76358 3.06275Z\" fill=\"#1E1E1E\"/>\n<path d=\"M12.4191 13.1326L13.1232 12.4403L11.9204 11.2257L8.58778 7.89058V9.29342L11.3717 12.0799L11.3695 12.0821L12.4191 13.1326Z\" fill=\"#1E1E1E\"/>\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M6.16399 4.38431L5.12477 3.34431H11.4868V4.38431H8.58778V6.80992L7.35278 5.57399V4.38431H6.16399ZM7.35278 9.13802V12.5743H8.58778V10.3742L7.35278 9.13802Z\" fill=\"#1E1E1E\"/>\n<path d=\"M8.58778 7.89058L7.35278 6.65465V8.05725L8.58778 9.29342V7.89058Z\" fill=\"#1E1E1E\"/>\n<path d=\"M4.45378 3.75347V4.38431H5.08414L4.45378 3.75347Z\" fill=\"#1E1E1E\"/>\n</svg>",
   "up": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M7.49645 3.48222V16H8.50702L8.50841 3.48259L11.4156 6.38982L12.1095 5.68299L8.00173 1.57524L3.8905 5.68647L4.59784 6.39381L7.49645 3.48222Z\" fill=\"#1E1E1E\"/>\n</svg>",
+  "work": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M13.8153 4.78289C13.8153 4.20267 13.3448 3.73213 12.7646 3.73213H8H3.23544C2.65521 3.73213 2.18468 4.20267 2.18468 4.78289V7.31419H13.8153L13.8153 4.78289ZM2.18468 8V11.2171C2.18468 11.7973 2.65521 12.2679 3.23544 12.2679H12.7646C13.3448 12.2679 13.8153 11.7973 13.8153 11.2171L13.8153 8L9.33239 7.98014V8.63222C9.33239 8.92233 9.09712 9.1576 8.807 9.1576H8H7.19299C6.90287 9.1576 6.66761 8.92233 6.66761 8.63222V7.98014L2.18468 8Z\" fill=\"currentColor\"/>\n</svg>",
 };
 
 export type IconName = keyof typeof iconNameToSvgMap;
@@ -93,6 +97,7 @@ export const iconNames = [
   "down",
   "duplicate",
   "email",
+  "exercise",
   "expand",
   "gallery",
   "globe",
@@ -103,6 +108,7 @@ export const iconNames = [
   "icon",
   "in",
   "left",
+  "life",
   "lock",
   "loop",
   "mic",
@@ -114,6 +120,7 @@ export const iconNames = [
   "plus",
   "right",
   "row",
+  "school",
   "sdown",
   "search",
   "see",
@@ -132,4 +139,5 @@ export const iconNames = [
   "unstar",
   "untitle",
   "up",
+  "work",
 ] as const;

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]) {