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

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

@@ -1,5 +1,5 @@
 // ds-layout.ts
-// Simple grid layout component with debug mode
+// Simple grid layout component with view mode
 
 import { LitElement, html, css } from "lit";
 
@@ -14,12 +14,12 @@ export class Layout extends LitElement {
   static properties = {
     mode: { type: String },
     align: { type: String },
-    debug: { type: Boolean },
+    view: { type: Boolean },
   };
 
   mode: string = "portfolio";
   align?: string;
-  debug?: boolean;
+  view?: boolean;
 
   static styles = css`
     :host {
@@ -29,79 +29,103 @@ export class Layout extends LitElement {
     }
 
     :host([mode="portfolio"]) {
-      grid-template-columns: 120px 480px 40px;
-      grid-template-rows: 120px 120px 60px 180px 60px 120px 60px 20px 120px 120px;
-      grid-template-areas:
-        "square . ."
-        ". title ."
-        ". header ."
-        ". projects ."
-        ". . ."
-        ". bio ."
-        ". . ."
-        ". nav ."
-        ". . ."
-        ". footer ."
-        ". . .";
+      --portfolio-cols: 120px 480px 40px;
+      --portfolio-rows: 120px 120px 60px 180px 60px 120px 60px 20px 120px 120px;
+      --portfolio-areas: "square . ." ". title ." ". header ." ". projects ."
+        ". . ." ". bio ." ". . ." ". nav ." ". . ." ". footer ." ". . .";
+      --portfolio-overlay-cols: 120px 480px;
+      --portfolio-overlay-areas: "square ." ". title" ". header" ". projects"
+        ". ." ". bio" ". ." ". nav" ". ." ". footer" ". .";
+      grid-template-columns: var(--portfolio-cols);
+      grid-template-rows: var(--portfolio-rows);
+      grid-template-areas: var(--portfolio-areas);
       min-height: 600px;
       background-color: rgba(165, 165, 165, 0.03);
       max-width: 640px;
-      margin: 0 auto;
+      margin: 0;
+    }
+
+    :host([mode="portfolio"]) .view-overlay {
+      grid-template-columns: var(--portfolio-overlay-cols);
+      grid-template-rows: var(--portfolio-rows);
+      grid-template-areas: var(--portfolio-overlay-areas);
     }
 
     :host([mode="company"]) {
-      grid-template-columns: auto 400px auto;
-      grid-template-rows: 80px 20px 20px 120px 20px 120px;
-      grid-template-areas:
-        ". . ."
-        ". header ."
-        ". . ."
-        ". content ."
-        ". . ."
+      --company-cols: auto 400px auto;
+      --company-rows: 80px 20px 20px 120px 20px 120px;
+      --company-areas: ". . ." ". header ." ". . ." ". content ." ". . ."
         ". footer .";
+      grid-template-columns: var(--company-cols);
+      grid-template-rows: var(--company-rows);
+      grid-template-areas: var(--company-areas);
       gap: 0;
       max-width: 100%;
     }
 
-    :host([align="left"]) {
+    :host([mode="company"]) .view-overlay {
+      grid-template-columns: var(--company-cols);
+      grid-template-rows: var(--company-rows);
+      grid-template-areas: var(--company-areas);
+      gap: 0;
+    }
+
+    :host([align="left"]),
+    :host([mode="portfolio"][align="left"]),
+    :host([mode="company"][align="left"]),
+    :host([mode="app"][align="left"]) {
       margin: 0;
       justify-self: start;
     }
 
-    :host([align="center"]) {
+    :host([align="center"]),
+    :host([mode="portfolio"][align="center"]),
+    :host([mode="company"][align="center"]),
+    :host([mode="app"][align="center"]) {
       margin: 0 auto;
       justify-self: center;
     }
 
-    :host([align="right"]) {
+    :host([align="right"]),
+    :host([mode="portfolio"][align="right"]),
+    :host([mode="company"][align="right"]),
+    :host([mode="app"][align="right"]) {
       margin: 0 0 0 auto;
       justify-self: end;
     }
 
     /* App mode - Base */
     :host([mode="app"]) {
-      grid-template-columns: 1fr;
-      grid-template-rows: calc(var(--1) * var(--sf)) 20px 1fr auto;
-      grid-template-areas:
-        "banner"
-        "main"
-        "footer";
+      --app-cols: calc(var(--double) * var(--sf));
+      --app-rows: calc(var(--unit) * var(--sf)) calc(var(--2) * var(--sf))
+        calc(var(--unit) * var(--sf)) calc(var(--unit) * var(--sf))
+        calc(var(--unit) * var(--sf));
+      --app-areas: "1" "." "2" "." "3";
+      --app-overlay-cols: calc(var(--oct) * var(--sf));
+      --app-overlay-rows: calc(var(--unit) * var(--sf))
+        calc(var(--double) * var(--sf)) calc(var(--unit) * var(--sf))
+        calc(var(--unit) * var(--sf));
+      --app-overlay-areas: "banner" "." "header" "." "main" "." "footer";
+      grid-template-columns: var(--app-cols);
+      grid-template-rows: var(--app-rows);
+      grid-template-areas: var(--app-areas);
       min-height: 100vh;
       background-color: transparent;
       width: 100%;
-      margin: 0 auto;
       gap: 0;
-    }
-
-    /* App mode - with scaling factor */
-    :host([mode="app"]) {
       max-width: calc(400px * var(--sf, 1));
       padding: calc(60px * var(--sf, 1)) calc(28px * var(--sf, 1))
         calc(9.751px * var(--sf, 1));
       gap: calc(28px * var(--sf, 1));
     }
 
-    .debug-overlay {
+    :host([mode="app"]) .view-overlay {
+      grid-template-columns: var(--app-overlay-cols);
+      grid-template-rows: var(--app-overlay-rows);
+      grid-template-areas: var(--app-overlay-areas);
+    }
+
+    .view-overlay {
       position: absolute;
       margin-left: -1px;
       top: 0;
@@ -115,37 +139,7 @@ export class Layout extends LitElement {
       font-weight: bold;
     }
 
-    :host([mode="portfolio"]) .debug-overlay {
-      grid-template-columns: 120px 480px;
-      grid-template-rows: 120px 120px 60px 180px 60px 120px 60px 20px 120px 120px;
-      grid-template-areas:
-        "square ."
-        ". title"
-        ". header"
-        ". projects"
-        ". ."
-        ". bio"
-        ". ."
-        ". nav"
-        ". ."
-        ". footer"
-        ". .";
-    }
-
-    :host([mode="company"]) .debug-overlay {
-      grid-template-columns: auto 400px auto;
-      grid-template-rows: 80px 20px 20px 120px 20px 120px;
-      grid-template-areas:
-        ". . ."
-        ". header ."
-        ". . ."
-        ". content ."
-        ". . ."
-        ". footer .";
-      gap: 0;
-    }
-
-    .debug-area {
+    .view-area {
       display: flex;
       align-items: center;
       justify-content: center;
@@ -153,145 +147,156 @@ export class Layout extends LitElement {
       font-weight: var(--type-weight-default);
       font-family: var(--typeface-regular);
       color: var(--black);
-      border: 1px solid red;
+      border: 1px solid;
       opacity: 1;
     }
 
-    .debug-square {
+    :host([mode="portfolio"]) .view-area:nth-of-type(1) {
+      border-color: var(--tuned-red);
+    }
+    :host([mode="portfolio"]) .view-area:nth-of-type(2) {
+      border-color: var(--sharp-blue);
+    }
+    :host([mode="portfolio"]) .view-area:nth-of-type(3) {
+      border-color: var(--yellow);
+    }
+    :host([mode="portfolio"]) .view-area:nth-of-type(4) {
+      border-color: var(--apple-green);
+    }
+    :host([mode="portfolio"]) .view-area:nth-of-type(5) {
+      border-color: var(--pink);
+    }
+    :host([mode="portfolio"]) .view-area:nth-of-type(6) {
+      border-color: var(--orange);
+    }
+    :host([mode="portfolio"]) .view-area:nth-of-type(7) {
+      border-color: var(--zenith-blue);
+    }
+
+    :host([mode="company"]) .view-area:nth-of-type(1) {
+      border-color: var(--tuned-red);
+    }
+    :host([mode="company"]) .view-area:nth-of-type(2) {
+      border-color: var(--sharp-blue);
+    }
+    :host([mode="company"]) .view-area:nth-of-type(3) {
+      border-color: var(--yellow);
+    }
+
+    :host([mode="app"]) .view-area:nth-of-type(1) {
+      border-color: var(--tuned-red);
+    }
+    :host([mode="app"]) .view-area:nth-of-type(2) {
+      border-color: var(--sharp-blue);
+    }
+    :host([mode="app"]) .view-area:nth-of-type(3) {
+      border-color: var(--yellow);
+    }
+    :host([mode="app"]) .view-area:nth-of-type(4) {
+      border-color: var(--apple-green);
+    }
+
+    .view-square {
       grid-area: square;
     }
 
-    .debug-title {
+    .view-title {
       grid-area: title;
     }
 
-    .debug-header {
+    .view-header {
       grid-area: header;
-      border-color: #0000ff;
     }
 
-    .debug-projects {
+    .view-projects {
       grid-area: projects;
-      border-color: #ffff00;
     }
 
-    .debug-bio {
+    .view-bio {
       grid-area: bio;
-      border-color: #ff00ff;
     }
 
-    .debug-nav {
+    .view-nav {
       grid-area: nav;
-      border-color: #00ffff;
     }
 
-    .debug-footer {
+    .view-footer {
       grid-area: footer;
-      border-color: rgb(24, 147, 73);
-      background-color: rgba(127, 123, 11, 0.1);
     }
 
-    .debug-content {
+    .view-content {
       grid-area: content;
-      border-color: rgba(71, 231, 71, 0.63);
     }
 
-    :host([mode="app"]) .debug-overlay {
-      grid-template-columns: 1fr;
-      grid-template-rows:
-        calc(var(--1) * var(--sf))
-        calc(var(--2) * var(--sf))
-        calc(var(--4) * var(--sf))
-        calc(var(--1) * var(--sf));
-      grid-template-areas:
-        "banner"
-        "header"
-        "main"
-        "footer";
-    }
-
-    .debug-banner {
+    .view-banner {
       grid-area: banner;
-      border-color: #daed09;
-    }
-
-    .debug-header {
-      grid-area: header;
-      border-color: #0000ff;
-      background-color: rgba(127, 123, 11, 0.5);
     }
 
-    .debug-main {
+    .view-main {
       grid-area: main;
-      border-color: #0000ff;
-    }
-
-    .debug-footer-app {
-      grid-area: footer;
-      border-color: #ffa500;
     }
   `;
 
   render() {
-    const isDebug = this.debug || this.mode === "debug";
+    const isView = this.view || this.mode === "view";
     const isPortfolio = this.mode === "portfolio";
     const isCompany = this.mode === "company";
     const isApp = this.mode === "app";
 
     return html`
       <slot></slot>
-      ${isDebug
+      ${isView
         ? html`
-            <div class="debug-overlay">
+            <div class="view-overlay">
               ${isApp
                 ? html`
-                    <div class="debug-area debug-banner">
+                    <div class="view-area view-banner">
                       <ds-text key="banner">banner</ds-text>
                     </div>
-                    <div class="debug-area debug-header">
+                    <div class="view-area view-header">
                       <ds-text key="header">header</ds-text>
                     </div>
 
-                    <div class="debug-area debug-main">
+                    <div class="view-area view-main">
                       <ds-text key="main">main</ds-text>
                     </div>
-                    <div class="debug-area debug-footer-app">
+                    <div class="view-area view-footer">
                       <ds-text key="footer">footer</ds-text>
                     </div>
                   `
                 : isCompany
                   ? html`
-                      <div class="debug-area debug-header">
+                      <div class="view-area view-header">
                         <ds-text key="header">header</ds-text>
                       </div>
-                      <div class="debug-area debug-content">
+                      <div class="view-area view-content">
                         <ds-text key="content">content</ds-text>
                       </div>
-                      <div class="debug-area debug-footer">
+                      <div class="view-area view-footer">
                         <ds-text key="footer">footer</ds-text>
                       </div>
                     `
                   : isPortfolio
                     ? html`
-                        <div class="debug-area debug-square">
+                        <div class="view-area view-square">
                           <ds-text key="square">square</ds-text>
                         </div>
-                        <div class="debug-area debug-title">
+                        <div class="view-area view-title">
                           <ds-text key="title">title</ds-text>
                         </div>
-                        <div class="debug-area debug-header">
+                        <div class="view-area view-header">
                           <ds-text key="header">header</ds-text>
                         </div>
-                        <div class="debug-area debug-projects">
+                        <div class="view-area view-projects">
                           <ds-text key="projects">projects</ds-text>
                         </div>
-                        <div class="debug-area debug-bio">
+                        <div class="view-area view-bio">
                           <ds-text key="bio">bio</ds-text>
                         </div>
-                        <div class="debug-area debug-nav">
+                        <div class="view-area view-nav">
                           <ds-text key="nav">nav</ds-text>
                         </div>
-                        <div class="debug-area debug-footer">
+                        <div class="view-area view-footer">
                           <ds-text key="footer">footer</ds-text>
                         </div>
                       `

package/DS1/index.ts

@@ -48,5 +48,6 @@ export * from "./3-unit/ds-table";
 // 4-page: Layout Components
 // ============================================================================
 
+export * from "./4-page/ds-container";
 export * from "./4-page/ds-grid";
 export * from "./4-page/ds-layout";

package/README.md

@@ -1,4 +1,4 @@
-# DS one (0.2.5-alpha.11)
+# DS one (0.2.5-alpha.13)
 
 A plug and play design system
 
@@ -20,7 +20,7 @@ yarn add ds-one@alpha
 
 ```
 
-**Note**: Currently published as alpha version `0.2.5-alpha.11`
+**Note**: Currently published as alpha version `0.2.5-alpha.13`
 
 ## Quick Start
 

package/dist/0-face/device.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"device.d.ts","sourceRoot":"","sources":["../../DS1/0-face/device.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS,CAAC;AAEzD,MAAM,WAAW,UAAU;IACzB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;IACnB,cAAc,EAAE,OAAO,CAAC;IACxB,UAAU,EAAE,UAAU,CAAC;IACvB,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;CACtB;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,IAAI,OAAO,CA0B5C;AAED;;GAEG;AACH,wBAAgB,aAAa,IAAI,UAAU,CA6B1C;AAED;;GAEG;AACH,wBAAgB,mBAAmB,IAAI,UAAU,CAkDhD"}
+{"version":3,"file":"device.d.ts","sourceRoot":"","sources":["../../DS1/0-face/device.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS,CAAC;AAEzD,MAAM,WAAW,UAAU;IACzB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;IACnB,cAAc,EAAE,OAAO,CAAC;IACxB,UAAU,EAAE,UAAU,CAAC;IACvB,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;CACtB;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,IAAI,OAAO,CA0B5C;AAED;;GAEG;AACH,wBAAgB,aAAa,IAAI,UAAU,CA6B1C;AAED;;GAEG;AACH,wBAAgB,mBAAmB,IAAI,UAAU,CA0DhD"}

package/dist/0-face/device.js

@@ -65,6 +65,9 @@ export function initDeviceDetection() {
         document.documentElement.style.setProperty("--sf", scalingFactor.toFixed(3));
         // Also set --sf for backwards compatibility
         document.documentElement.style.setProperty("--sf", 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)}`);
     }
     else {
@@ -73,6 +76,9 @@ export function initDeviceDetection() {
             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/dist/2-core/ds-button.d.ts

@@ -1,4 +1,5 @@
-import { LitElement, type PropertyValues } from "lit";
+import { LitElement } from "lit";
+import "./ds-text";
 export declare class Button extends LitElement {
     static properties: {
         variant: {
@@ -42,10 +43,6 @@ export declare class Button extends LitElement {
             type: BooleanConstructor;
             state: boolean;
         };
-        _text: {
-            type: StringConstructor;
-            state: boolean;
-        };
     };
     variant: string;
     disabled: boolean;
@@ -58,17 +55,9 @@ export declare class Button extends LitElement {
     defaultText: string;
     href: string;
     _loading: boolean;
-    _text: string | null;
     constructor();
     static styles: import("lit").CSSResult;
     connectedCallback(): void;
-    disconnectedCallback(): void;
-    _handleLanguageChange: () => void;
-    updated(changedProps: PropertyValues): void;
-    /**
-     * Update text from translations (synchronous like Portfolio)
-     */
-    private _updateText;
     render(): import("lit-html").TemplateResult<1>;
     private _handleClick;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"ds-button.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-button.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAa,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGjE,qBAAa,MAAO,SAAQ,UAAU;IACpC,MAAM,CAAC,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAiBf;IAGM,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,OAAO,CAAC;IACd,eAAe,EAAE,OAAO,CAAC;IACzB,KAAK,EAAE,OAAO,CAAC;IACf,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;IAGb,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;;IAkB7B,MAAM,CAAC,MAAM,0BAkDX;IAEF,iBAAiB;IAQjB,oBAAoB;IAKpB,qBAAqB,aAEnB;IAEF,OAAO,CAAC,YAAY,EAAE,cAAc;IAQpC;;OAEG;IACH,OAAO,CAAC,WAAW;IASnB,MAAM;IAcN,OAAO,CAAC,YAAY;CAwBrB;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,MAAM,CAAC;KACrB;CACF"}
+{"version":3,"file":"ds-button.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-button.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAC5C,OAAO,WAAW,CAAC;AAEnB,qBAAa,MAAO,SAAQ,UAAU;IACpC,MAAM,CAAC,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAgBf;IAGM,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,OAAO,CAAC;IACd,eAAe,EAAE,OAAO,CAAC;IACzB,KAAK,EAAE,OAAO,CAAC;IACf,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;IAGb,QAAQ,EAAE,OAAO,CAAC;;IAiB1B,MAAM,CAAC,MAAM,0BAiDX;IAEF,iBAAiB;IAIjB,MAAM;IAsBN,OAAO,CAAC,YAAY;CAwBrB;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,MAAM,CAAC;KACrB;CACF"}

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

@@ -1,13 +1,10 @@
 // ds-button.ts
 // Core button component
 import { LitElement, html, css } from "lit";
-import { getText } from "../0-face/i18n";
+import "./ds-text";
 export class Button extends LitElement {
     constructor() {
         super();
-        this._handleLanguageChange = () => {
-            this._updateText();
-        };
         this.variant = "title";
         this.disabled = false;
         this.bold = false;
@@ -19,37 +16,12 @@ export class Button extends LitElement {
         this.defaultText = "";
         this.href = "";
         this._loading = false;
-        this._text = null;
     }
     connectedCallback() {
         super.connectedCallback();
-        this._updateText();
-        // Listen for language changes
-        window.addEventListener("language-changed", this._handleLanguageChange);
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        window.removeEventListener("language-changed", this._handleLanguageChange);
-    }
-    updated(changedProps) {
-        super.updated(changedProps);
-        if (changedProps.has("key") || changedProps.has("defaultText")) {
-            this._updateText();
-        }
-    }
-    /**
-     * Update text from translations (synchronous like Portfolio)
-     */
-    _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}
@@ -58,7 +30,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>
     `;
     }
@@ -102,15 +80,13 @@ Button.properties = {
     defaultText: { type: String, attribute: "default-text" },
     href: { type: String },
     _loading: { type: Boolean, state: true },
-    _text: { type: String, state: true },
 };
 Button.styles = css `
     button {
       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);
     }

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

@@ -1 +1 @@
-{"version":3,"file":"ds-cycle.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-cycle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAY5C,OAAO,aAAa,CAAC;AACrB,OAAO,WAAW,CAAC;AACnB,OAAO,WAAW,CAAC;AAqCnB,qBAAa,KAAM,SAAQ,UAAU;IAEnC,MAAM,KAAK,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;MAUpB;IAED,MAAM,CAAC,MAAM,0BAWX;IAIM,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,MAAM,CAAC;IACrB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAGxB,OAAO,CAAC,aAAa,CAOnB;;IAyBF,iBAAiB;IA6BX,gBAAgB;IA6EtB,sBAAsB;IAatB,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM;IASnE,iBAAiB;IAoDvB,qBAAqB;IAKrB,oBAAoB;IA0BpB,iBAAiB,CAAC,CAAC,EAAE,KAAK;IAuJ1B,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,GAAG;IA+C5C,WAAW,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM;IAgBrC,YAAY,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM;IAyBtC,iBAAiB,CAAC,KAAK,EAAE,MAAM;IAe/B,QAAQ,IAAI,MAAM;IAgElB,MAAM;YA0EQ,mBAAmB;IAwBjC,OAAO,CAAC,wBAAwB;IAYhC,OAAO,CAAC,qBAAqB;IAI7B,OAAO,CAAC,kBAAkB;IAI1B,OAAO,CAAC,wBAAwB;IAIhC,OAAO,CAAC,yBAAyB;CAGlC;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,KAAK,CAAC;KACnB;CACF"}
+{"version":3,"file":"ds-cycle.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-cycle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAY5C,OAAO,aAAa,CAAC;AACrB,OAAO,WAAW,CAAC;AACnB,OAAO,WAAW,CAAC;AAqCnB,qBAAa,KAAM,SAAQ,UAAU;IAEnC,MAAM,KAAK,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;MAUpB;IAED,MAAM,CAAC,MAAM,0BAWX;IAIM,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,MAAM,CAAC;IACrB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAGxB,OAAO,CAAC,aAAa,CAOnB;;IAyBF,iBAAiB;IA6BX,gBAAgB;IA6EtB,sBAAsB;IAatB,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM;IASnE,iBAAiB;IAoDvB,qBAAqB;IAKrB,oBAAoB;IA0BpB,iBAAiB,CAAC,CAAC,EAAE,KAAK;IAuJ1B,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,GAAG;IA+C5C,WAAW,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM;IAgBrC,YAAY,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM;IAyBtC,iBAAiB,CAAC,KAAK,EAAE,MAAM;IAe/B,QAAQ,IAAI,MAAM;IAgElB,MAAM;YAgFQ,mBAAmB;IAwBjC,OAAO,CAAC,wBAAwB;IAYhC,OAAO,CAAC,qBAAqB;IAI7B,OAAO,CAAC,kBAAkB;IAI1B,OAAO,CAAC,wBAAwB;IAIhC,OAAO,CAAC,yBAAyB;CAGlC;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,KAAK,CAAC;KACnB;CACF"}

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

@@ -544,24 +544,28 @@ 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/dist/2-core/ds-text.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ds-text.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-text.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C;;;;;;;GAOG;AACH,qBAAa,IAAK,SAAQ,UAAU;IAClC,MAAM,KAAK,UAAU;;;;;;;;;;;;;;;;;;MAOpB;IAEO,GAAG,EAAE,MAAM,CAAC;IACZ,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,gBAAgB,EAAE,MAAM,CAAC;IACjC,OAAO,CAAC,aAAa,CAAqC;;IAqB1D,MAAM,CAAC,MAAM,0BAgBX;IAEF,iBAAiB;IAsBjB,oBAAoB;IAYpB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAQ/C,wBAAwB;IASxB,SAAS;IAiBT,MAAM;CAGP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,IAAI,CAAC;KACjB;CACF"}
+{"version":3,"file":"ds-text.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-text.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C;;;;;;;GAOG;AACH,qBAAa,IAAK,SAAQ,UAAU;IAClC,MAAM,KAAK,UAAU;;;;;;;;;;;;;;;;;;MAOpB;IAEO,GAAG,EAAE,MAAM,CAAC;IACZ,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,gBAAgB,EAAE,MAAM,CAAC;IACjC,OAAO,CAAC,aAAa,CAAqC;;IAsB1D,MAAM,CAAC,MAAM,0BAgBX;IAEF,iBAAiB;IAsBjB,oBAAoB;IAYpB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAQ/C,wBAAwB;IAWxB,SAAS;IAmBT,MAAM;CAGP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,IAAI,CAAC;KACjB;CACF"}