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

package/DS1/1-root/one.css

@@ -1,4 +1,4 @@
-/* version 0.2.5-alpha.13 */
+/* version 0.2.5-alpha.15 */
 
 @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@200");
 
@@ -28,7 +28,7 @@ input {
 
   --black: #2a2a2a;
   --white: rgb(255 255 255);
-  --slate: #bdbdbd;
+  --slate: #1e1e1e;
   --slate-light: #e6e6e6;
   --slate-dark: #3c3c3c;
 
@@ -43,6 +43,8 @@ input {
   --yellow: #eaff00;
   --orange: #fec20d;
 
+  --accent-color: var(--apple-green);
+
   /* 4-page component colors */
 
   /* ds-grid color */
@@ -94,6 +96,7 @@ input {
   --3: calc(var(--1) * 3);
   --4: calc(var(--1) * 4);
   --8: calc(var(--1) * 8);
+  --12: calc(var(--1) * 12);
 
   /* Semantic sizing units */
 
@@ -106,6 +109,7 @@ input {
   --triple: var(--3);
   --quad: var(--4);
   --oct: var(--8);
+  --dozen: var(--12);
 
   /* size */
   --outline-stroke: 1px solid light-dark(var(--black), var(--slate-dark));

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

@@ -1,3 +1,196 @@
 // ds-banner.ts
-// Core component
+// Fixed banner component for notifications/alerts
 
+import { LitElement, html, css } from "lit";
+import { getText } from "../0-face/i18n.js";
+import "./ds-text.js";
+import "./ds-button.js";
+
+declare global {
+  interface CustomElementRegistry {
+    define(name: string, constructor: typeof LitElement): void;
+  }
+  var customElements: CustomElementRegistry;
+}
+
+export class Banner extends LitElement {
+  static properties = {
+    textKey: { type: String, attribute: "text-key" },
+    actionKey: { type: String, attribute: "action-key" },
+    href: { type: String },
+    mailto: { type: String },
+    subjectKey: { type: String, attribute: "subject-key" },
+    describeKey: { type: String, attribute: "describe-key" },
+    appVersionKey: { type: String, attribute: "app-version-key" },
+    variant: { type: String },
+    version: { type: String },
+    _showVersion: { type: Boolean, state: true },
+  };
+
+  textKey: string = "";
+  actionKey: string = "";
+  href: string = "";
+  mailto: string = "";
+  subjectKey: string = "";
+  describeKey: string = "";
+  appVersionKey: string = "";
+  variant: string = "warning"; // warning, info, success, error
+  version: string = "";
+  _showVersion: boolean = false;
+
+  private _boundUpdate = () => this.requestUpdate();
+
+  connectedCallback() {
+    super.connectedCallback();
+    // Listen for translations and language changes to rebuild mailto URL
+    window.addEventListener("translations-loaded", this._boundUpdate);
+    window.addEventListener("language-changed", this._boundUpdate);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    window.removeEventListener("translations-loaded", this._boundUpdate);
+    window.removeEventListener("language-changed", this._boundUpdate);
+  }
+
+  static styles = css`
+    :host {
+      display: flex;
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      width: 100%;
+      height: calc(var(--unit) * var(--sf, 1));
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 calc(var(--unit) * var(--sf, 1));
+      box-sizing: border-box;
+      z-index: 9999;
+    }
+
+    :host([variant="warning"]) {
+      background-color: color-mix(in srgb, var(--yellow) 50%, transparent);
+      --banner-text-color: color-mix(in srgb, var(--black) 50%, transparent);
+      --banner-action-color: var(--slate);
+    }
+
+    :host([variant="info"]) {
+      background-color: rgba(var(--sharp-blue-rgb, 0, 122, 255), 0.7);
+      --banner-text-color: var(--white, #fff);
+      --banner-action-color: var(--white, #fff);
+    }
+
+    :host([variant="success"]) {
+      background-color: rgba(var(--apple-green-rgb, 52, 199, 89), 0.7);
+      --banner-text-color: var(--white, #fff);
+      --banner-action-color: var(--white, #fff);
+    }
+
+    :host([variant="error"]) {
+      background-color: rgba(var(--tuned-red-rgb, 255, 59, 48), 0.7);
+      --banner-text-color: var(--white, #fff);
+      --banner-action-color: var(--slate, #1e1e1e);
+    }
+
+    .text-wrapper {
+      flex: 1;
+      cursor: pointer;
+      user-select: none;
+    }
+
+    .text-wrapper ds-text,
+    .text-wrapper .version {
+      color: var(--banner-text-color);
+    }
+
+    .action-wrapper {
+      font-size: calc(12px * var(--sf, 1));
+    }
+
+    .action-wrapper a {
+      color: var(--banner-action-color);
+      text-decoration: none;
+      font-family: var(--typeface-regular);
+      font-size: calc(12px * var(--sf, 1));
+      cursor: pointer;
+      pointer-events: auto;
+      display: inline-block;
+    }
+
+    .action-wrapper a:hover {
+      opacity: 0.8;
+    }
+
+    .action-wrapper ds-text {
+      color: var(--banner-action-color);
+      font-family: var(--typeface-regular);
+      font-size: calc(12px * var(--sf, 1));
+      pointer-events: none;
+    }
+  `;
+
+  private _toggleVersion() {
+    if (this.version) {
+      this._showVersion = !this._showVersion;
+    }
+  }
+
+  private _getMailtoHref(): string {
+    // If a direct href is provided, use it
+    if (this.href && this.href !== "#") return this.href;
+
+    // If mailto is provided, build internationalized URL
+    if (this.mailto) {
+      try {
+        const subject = this.subjectKey
+          ? getText(this.subjectKey) || this.subjectKey
+          : "Issue report";
+        const describe = this.describeKey
+          ? getText(this.describeKey) || this.describeKey
+          : "Describe the issue:";
+        const appVersionLabel = this.appVersionKey
+          ? getText(this.appVersionKey) || this.appVersionKey
+          : "App version:";
+
+        const body = `${describe}\n\n\n${appVersionLabel} ${this.version || ""}`;
+
+        return `mailto:${this.mailto}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
+      } catch (error) {
+        // Fallback if translations fail
+        return `mailto:${this.mailto}?subject=Issue%20report&body=Describe%20the%20issue%3A%0A%0A%0AApp%20version%3A%20${this.version || ""}`;
+      }
+    }
+
+    return "#";
+  }
+
+  render() {
+    const mailtoHref = this._getMailtoHref();
+
+    return html`
+      <div class="text-wrapper" @click=${this._toggleVersion}>
+        ${this._showVersion && this.version
+          ? html`<ds-text default-value=${this.version}></ds-text>`
+          : html`<ds-text key=${this.textKey}><slot></slot></ds-text>`}
+      </div>
+      ${this.actionKey
+        ? html`
+            <div class="action-wrapper">
+              <a href=${mailtoHref}>
+                <ds-text key=${this.actionKey}></ds-text>
+              </a>
+            </div>
+          `
+        : ""}
+    `;
+  }
+}
+
+customElements.define("ds-banner", Banner);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-banner": Banner;
+  }
+}

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

@@ -56,9 +56,12 @@ export class Button extends LitElement {
   static styles = css`
     button {
       max-height: calc(var(--08) * var(--sf));
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
       border: none;
       cursor: pointer;
-      padding: 0 calc(2px * var(--sf));
+      padding: 0 calc(0.5px * var(--sf));
       color: var(--button-text-color);
       font-family: var(--typeface-regular);
     }
@@ -81,6 +84,19 @@ export class Button extends LitElement {
       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);

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

@@ -17,6 +17,7 @@ export class Container extends LitElement {
       width: 100%;
       max-width: 100%;
       flex-direction: column;
+      background-color: var(--background-color);
       box-sizing: border-box;
     }
 

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

@@ -28,6 +28,10 @@ export class Layout extends LitElement {
       width: 100%;
     }
 
+    slot {
+      display: contents;
+    }
+
     :host([mode="portfolio"]) {
       --portfolio-cols: 120px 480px 40px;
       --portfolio-rows: 120px 120px 60px 180px 60px 120px 60px 20px 120px 120px;
@@ -96,27 +100,25 @@ export class Layout extends LitElement {
 
     /* App mode - Base */
     :host([mode="app"]) {
-      --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-cols: 100%;
+      --app-rows: calc(var(--unit) * var(--sf)) calc(var(--unit) * var(--sf))
+        calc(var(--unit) * var(--sf)) calc(var(--dozen) * var(--sf))
+        calc(var(--quad) * var(--sf)) calc(var(--unit) * var(--sf));
+      --app-areas: "banner" "." "header" "." "main" "." "footer";
+      --app-overlay-cols: 100%;
       --app-overlay-rows: calc(var(--unit) * var(--sf))
-        calc(var(--double) * var(--sf)) 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(--dozen) * var(--sf))
+        calc(var(--quad) * 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%;
-      gap: 0;
-      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));
+      width: calc(240px * var(--sf, 1));
+      max-width: calc(240px * var(--sf, 1));
+      margin: 0 auto;
     }
 
     :host([mode="app"]) .view-overlay {
@@ -135,24 +137,27 @@ export class Layout extends LitElement {
       pointer-events: none;
       z-index: 1000;
       display: grid;
-      font-size: 18px;
-      font-weight: bold;
     }
 
     .view-area {
       display: flex;
+      width: calc(240px * var(--sf, 1));
+      height: 100%;
       align-items: center;
       justify-content: center;
-      font-size: 10px;
-      font-weight: var(--type-weight-default);
       font-family: var(--typeface-regular);
-      color: var(--black);
-      border: 1px solid;
+      font-size: calc(var(--type-size-default) * var(--05));
+      color: color-mix(in srgb, var(--tuned-red) 25%, transparent);
+      background-color: color-mix(
+        in srgb,
+        var(--accent-color) 25%,
+        transparent
+      );
       opacity: 1;
     }
 
     :host([mode="portfolio"]) .view-area:nth-of-type(1) {
-      border-color: var(--tuned-red);
+      background-color: color-mix(in srgb, var(--tuned-red) 25%, transparent);
     }
     :host([mode="portfolio"]) .view-area:nth-of-type(2) {
       border-color: var(--sharp-blue);
@@ -184,16 +189,16 @@ export class Layout extends LitElement {
     }
 
     :host([mode="app"]) .view-area:nth-of-type(1) {
-      border-color: var(--tuned-red);
+      background-color: color-mix(in srgb, var(--tuned-red) 25%, transparent);
     }
     :host([mode="app"]) .view-area:nth-of-type(2) {
-      border-color: var(--sharp-blue);
+      background-color: color-mix(in srgb, var(--sharp-blue) 25%, transparent);
     }
     :host([mode="app"]) .view-area:nth-of-type(3) {
-      border-color: var(--yellow);
+      background-color: color-mix(in srgb, var(--yellow) 25%, transparent);
     }
     :host([mode="app"]) .view-area:nth-of-type(4) {
-      border-color: var(--apple-green);
+      background-color: color-mix(in srgb, var(--apple-green) 25%, transparent);
     }
 
     .view-square {

package/README.md

@@ -1,4 +1,4 @@
-# DS one (0.2.5-alpha.13)
+# DS one (0.2.5-alpha.15)
 
 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.13`
+**Note**: Currently published as alpha version `0.2.5-alpha.15`
 
 ## Quick Start
 

package/dist/2-core/ds-banner.d.ts

@@ -1 +1,72 @@
+import { LitElement } from "lit";
+import "./ds-text.js";
+import "./ds-button.js";
+declare global {
+    interface CustomElementRegistry {
+        define(name: string, constructor: typeof LitElement): void;
+    }
+    var customElements: CustomElementRegistry;
+}
+export declare class Banner extends LitElement {
+    static properties: {
+        textKey: {
+            type: StringConstructor;
+            attribute: string;
+        };
+        actionKey: {
+            type: StringConstructor;
+            attribute: string;
+        };
+        href: {
+            type: StringConstructor;
+        };
+        mailto: {
+            type: StringConstructor;
+        };
+        subjectKey: {
+            type: StringConstructor;
+            attribute: string;
+        };
+        describeKey: {
+            type: StringConstructor;
+            attribute: string;
+        };
+        appVersionKey: {
+            type: StringConstructor;
+            attribute: string;
+        };
+        variant: {
+            type: StringConstructor;
+        };
+        version: {
+            type: StringConstructor;
+        };
+        _showVersion: {
+            type: BooleanConstructor;
+            state: boolean;
+        };
+    };
+    textKey: string;
+    actionKey: string;
+    href: string;
+    mailto: string;
+    subjectKey: string;
+    describeKey: string;
+    appVersionKey: string;
+    variant: string;
+    version: string;
+    _showVersion: boolean;
+    private _boundUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    static styles: import("lit").CSSResult;
+    private _toggleVersion;
+    private _getMailtoHref;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-banner": Banner;
+    }
+}
 //# sourceMappingURL=ds-banner.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ds-banner.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-banner.ts"],"names":[],"mappings":""}
+{"version":3,"file":"ds-banner.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-banner.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C,OAAO,cAAc,CAAC;AACtB,OAAO,gBAAgB,CAAC;AAExB,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,WAAW,EAAE,OAAO,UAAU,GAAG,IAAI,CAAC;KAC5D;IACD,IAAI,cAAc,EAAE,qBAAqB,CAAC;CAC3C;AAED,qBAAa,MAAO,SAAQ,UAAU;IACpC,MAAM,CAAC,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAWf;IAEF,OAAO,EAAE,MAAM,CAAM;IACrB,SAAS,EAAE,MAAM,CAAM;IACvB,IAAI,EAAE,MAAM,CAAM;IAClB,MAAM,EAAE,MAAM,CAAM;IACpB,UAAU,EAAE,MAAM,CAAM;IACxB,WAAW,EAAE,MAAM,CAAM;IACzB,aAAa,EAAE,MAAM,CAAM;IAC3B,OAAO,EAAE,MAAM,CAAa;IAC5B,OAAO,EAAE,MAAM,CAAM;IACrB,YAAY,EAAE,OAAO,CAAS;IAE9B,OAAO,CAAC,YAAY,CAA8B;IAElD,iBAAiB;IAOjB,oBAAoB;IAMpB,MAAM,CAAC,MAAM,0BA2EX;IAEF,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,cAAc;IA6BtB,MAAM;CAoBP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,MAAM,CAAC;KACrB;CACF"}

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

@@ -1,2 +1,172 @@
 // ds-banner.ts
-// Core component
+// Fixed banner component for notifications/alerts
+import { LitElement, html, css } from "lit";
+import { getText } from "../0-face/i18n.js";
+import "./ds-text.js";
+import "./ds-button.js";
+export class Banner extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.textKey = "";
+        this.actionKey = "";
+        this.href = "";
+        this.mailto = "";
+        this.subjectKey = "";
+        this.describeKey = "";
+        this.appVersionKey = "";
+        this.variant = "warning"; // warning, info, success, error
+        this.version = "";
+        this._showVersion = false;
+        this._boundUpdate = () => this.requestUpdate();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        // Listen for translations and language changes to rebuild mailto URL
+        window.addEventListener("translations-loaded", this._boundUpdate);
+        window.addEventListener("language-changed", this._boundUpdate);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        window.removeEventListener("translations-loaded", this._boundUpdate);
+        window.removeEventListener("language-changed", this._boundUpdate);
+    }
+    _toggleVersion() {
+        if (this.version) {
+            this._showVersion = !this._showVersion;
+        }
+    }
+    _getMailtoHref() {
+        // If a direct href is provided, use it
+        if (this.href && this.href !== "#")
+            return this.href;
+        // If mailto is provided, build internationalized URL
+        if (this.mailto) {
+            try {
+                const subject = this.subjectKey
+                    ? getText(this.subjectKey) || this.subjectKey
+                    : "Issue report";
+                const describe = this.describeKey
+                    ? getText(this.describeKey) || this.describeKey
+                    : "Describe the issue:";
+                const appVersionLabel = this.appVersionKey
+                    ? getText(this.appVersionKey) || this.appVersionKey
+                    : "App version:";
+                const body = `${describe}\n\n\n${appVersionLabel} ${this.version || ""}`;
+                return `mailto:${this.mailto}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
+            }
+            catch (error) {
+                // Fallback if translations fail
+                return `mailto:${this.mailto}?subject=Issue%20report&body=Describe%20the%20issue%3A%0A%0A%0AApp%20version%3A%20${this.version || ""}`;
+            }
+        }
+        return "#";
+    }
+    render() {
+        const mailtoHref = this._getMailtoHref();
+        return html `
+      <div class="text-wrapper" @click=${this._toggleVersion}>
+        ${this._showVersion && this.version
+            ? html `<ds-text default-value=${this.version}></ds-text>`
+            : html `<ds-text key=${this.textKey}><slot></slot></ds-text>`}
+      </div>
+      ${this.actionKey
+            ? html `
+            <div class="action-wrapper">
+              <a href=${mailtoHref}>
+                <ds-text key=${this.actionKey}></ds-text>
+              </a>
+            </div>
+          `
+            : ""}
+    `;
+    }
+}
+Banner.properties = {
+    textKey: { type: String, attribute: "text-key" },
+    actionKey: { type: String, attribute: "action-key" },
+    href: { type: String },
+    mailto: { type: String },
+    subjectKey: { type: String, attribute: "subject-key" },
+    describeKey: { type: String, attribute: "describe-key" },
+    appVersionKey: { type: String, attribute: "app-version-key" },
+    variant: { type: String },
+    version: { type: String },
+    _showVersion: { type: Boolean, state: true },
+};
+Banner.styles = css `
+    :host {
+      display: flex;
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      width: 100%;
+      height: calc(var(--unit) * var(--sf, 1));
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 calc(var(--unit) * var(--sf, 1));
+      box-sizing: border-box;
+      z-index: 9999;
+    }
+
+    :host([variant="warning"]) {
+      background-color: color-mix(in srgb, var(--yellow) 50%, transparent);
+      --banner-text-color: color-mix(in srgb, var(--black) 50%, transparent);
+      --banner-action-color: var(--slate);
+    }
+
+    :host([variant="info"]) {
+      background-color: rgba(var(--sharp-blue-rgb, 0, 122, 255), 0.7);
+      --banner-text-color: var(--white, #fff);
+      --banner-action-color: var(--white, #fff);
+    }
+
+    :host([variant="success"]) {
+      background-color: rgba(var(--apple-green-rgb, 52, 199, 89), 0.7);
+      --banner-text-color: var(--white, #fff);
+      --banner-action-color: var(--white, #fff);
+    }
+
+    :host([variant="error"]) {
+      background-color: rgba(var(--tuned-red-rgb, 255, 59, 48), 0.7);
+      --banner-text-color: var(--white, #fff);
+      --banner-action-color: var(--slate, #1e1e1e);
+    }
+
+    .text-wrapper {
+      flex: 1;
+      cursor: pointer;
+      user-select: none;
+    }
+
+    .text-wrapper ds-text,
+    .text-wrapper .version {
+      color: var(--banner-text-color);
+    }
+
+    .action-wrapper {
+      font-size: calc(12px * var(--sf, 1));
+    }
+
+    .action-wrapper a {
+      color: var(--banner-action-color);
+      text-decoration: none;
+      font-family: var(--typeface-regular);
+      font-size: calc(12px * var(--sf, 1));
+      cursor: pointer;
+      pointer-events: auto;
+      display: inline-block;
+    }
+
+    .action-wrapper a:hover {
+      opacity: 0.8;
+    }
+
+    .action-wrapper ds-text {
+      color: var(--banner-action-color);
+      font-family: var(--typeface-regular);
+      font-size: calc(12px * var(--sf, 1));
+      pointer-events: none;
+    }
+  `;
+customElements.define("ds-banner", Banner);

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,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"}
+{"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,0BAiEX;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

@@ -84,9 +84,12 @@ Button.properties = {
 Button.styles = css `
     button {
       max-height: calc(var(--08) * var(--sf));
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
       border: none;
       cursor: pointer;
-      padding: 0 calc(2px * var(--sf));
+      padding: 0 calc(0.5px * var(--sf));
       color: var(--button-text-color);
       font-family: var(--typeface-regular);
     }
@@ -109,6 +112,19 @@ Button.styles = css `
       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);