ds-one 0.2.5-alpha.8 → 0.3.0-alpha.1

package/dist/0-face/scaling.js

@@ -0,0 +1,114 @@
+// scaling.ts
+// Responsive scaling utilities for the design system
+import { signal } from "@lit-labs/signals";
+const defaultConfig = {
+    mode: "auto",
+    baseWidth: 280,
+    minScale: 0.75,
+    maxScale: 2.0,
+};
+// Reactive scaling factor signal
+export const scalingFactor = signal(1);
+// Current scaling configuration
+export const scalingConfig = signal(defaultConfig);
+/**
+ * Calculate the scaling factor based on viewport width
+ * @param viewportWidth - Current viewport width in pixels
+ * @param config - Scaling configuration
+ * @returns The calculated scaling factor
+ */
+export function calculateScalingFactor(viewportWidth, config = scalingConfig.get()) {
+    if (config.mode === "fixed") {
+        return 1;
+    }
+    const rawScale = viewportWidth / config.baseWidth;
+    const clampedScale = Math.max(config.minScale, Math.min(config.maxScale, rawScale));
+    return Number(clampedScale.toFixed(3));
+}
+/**
+ * Set the scaling configuration
+ * @param config - Partial scaling configuration to apply
+ */
+export function setScalingConfig(config) {
+    const currentConfig = scalingConfig.get();
+    const newConfig = { ...currentConfig, ...config };
+    scalingConfig.set(newConfig);
+    // Recalculate scaling factor if in browser
+    if (typeof window !== "undefined") {
+        updateScalingFactor();
+    }
+}
+/**
+ * Update the scaling factor based on current viewport
+ */
+export function updateScalingFactor() {
+    if (typeof window === "undefined" || typeof document === "undefined") {
+        return;
+    }
+    const viewportWidth = document.documentElement.clientWidth;
+    const config = scalingConfig.get();
+    const newFactor = calculateScalingFactor(viewportWidth, config);
+    scalingFactor.set(newFactor);
+    // Update CSS custom property
+    document.documentElement.style.setProperty("--sf", newFactor.toString());
+    // Dispatch event for components that need to react
+    window.dispatchEvent(new CustomEvent("scaling-changed", {
+        detail: { scalingFactor: newFactor, config },
+    }));
+}
+/**
+ * Get the current scaling factor
+ * @returns The current scaling factor
+ */
+export function getScalingFactor() {
+    return scalingFactor.get();
+}
+/**
+ * Convert a design pixel value to scaled pixels
+ * @param designPx - The design pixel value (based on 280px width)
+ * @returns The scaled pixel value
+ */
+export function scale(designPx) {
+    return designPx * scalingFactor.get();
+}
+/**
+ * Convert a scaled pixel value back to design pixels
+ * @param scaledPx - The scaled pixel value
+ * @returns The design pixel value
+ */
+export function unscale(scaledPx) {
+    const factor = scalingFactor.get();
+    return factor === 0 ? scaledPx : scaledPx / factor;
+}
+/**
+ * Initialize scaling system
+ * This is typically called automatically when the module loads
+ */
+export function initScaling() {
+    if (typeof window === "undefined") {
+        return;
+    }
+    // Initial calculation
+    updateScalingFactor();
+    // Update on resize (debounced)
+    let resizeTimeout;
+    window.addEventListener("resize", () => {
+        clearTimeout(resizeTimeout);
+        resizeTimeout = setTimeout(() => {
+            updateScalingFactor();
+        }, 100);
+    });
+    // Update on orientation change
+    window.addEventListener("orientationchange", () => {
+        setTimeout(updateScalingFactor, 100);
+    });
+}
+// Auto-initialize when module loads in browser
+if (typeof window !== "undefined") {
+    if (document.readyState === "loading") {
+        document.addEventListener("DOMContentLoaded", initScaling);
+    }
+    else {
+        initScaling();
+    }
+}

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

@@ -1 +1,68 @@
+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: {
+        text: {
+            type: StringConstructor;
+        };
+        action: {
+            type: StringConstructor;
+        };
+        href: {
+            type: StringConstructor;
+        };
+        mailto: {
+            type: StringConstructor;
+        };
+        subject: {
+            type: StringConstructor;
+        };
+        describe: {
+            type: StringConstructor;
+        };
+        appVersion: {
+            type: StringConstructor;
+            attribute: string;
+        };
+        variant: {
+            type: StringConstructor;
+        };
+        version: {
+            type: StringConstructor;
+        };
+        _showVersion: {
+            type: BooleanConstructor;
+            state: boolean;
+        };
+    };
+    text: string;
+    action: string;
+    href: string;
+    mailto: string;
+    subject: string;
+    describe: string;
+    appVersion: 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,EAAmB,MAAM,KAAK,CAAC;AAElD,OAAO,cAAc,CAAC;AACtB,OAAO,gBAAgB,CAAC;AAGxB,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,IAAI,EAAE,MAAM,CAAM;IAClB,MAAM,EAAE,MAAM,CAAM;IACpB,IAAI,EAAE,MAAM,CAAM;IAClB,MAAM,EAAE,MAAM,CAAM;IACpB,OAAO,EAAE,MAAM,CAAM;IACrB,QAAQ,EAAE,MAAM,CAAM;IACtB,UAAU,EAAE,MAAM,CAAM;IACxB,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,0BAAqB;IAElC,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,98 @@
 // ds-banner.ts
-// Core component
+// Fixed banner component for notifications/alerts
+import { LitElement, html, unsafeCSS } from "lit";
+import { getText } from "../0-face/i18n.js";
+import "./ds-text.js";
+import "./ds-button.js";
+import styles from "./styles/ds-banner.css?inline";
+export class Banner extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.text = "";
+        this.action = "";
+        this.href = "";
+        this.mailto = "";
+        this.subject = "";
+        this.describe = "";
+        this.appVersion = "";
+        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.subject
+                    ? getText(this.subject) || this.subject
+                    : "Issue report";
+                const describe = this.describe
+                    ? getText(this.describe) || this.describe
+                    : "Describe the issue:";
+                const appVersionLabel = this.appVersion
+                    ? getText(this.appVersion) || this.appVersion
+                    : "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 text=${this.text}><slot></slot></ds-text>`}
+      </div>
+      ${this.action
+            ? html `
+            <div class="action-wrapper">
+              <a href=${mailtoHref}>
+                <ds-text text=${this.action}></ds-text>
+              </a>
+            </div>
+          `
+            : ""}
+    `;
+    }
+}
+Banner.properties = {
+    text: { type: String },
+    action: { type: String },
+    href: { type: String },
+    mailto: { type: String },
+    subject: { type: String },
+    describe: { type: String },
+    appVersion: { type: String, attribute: "app-version" },
+    variant: { type: String },
+    version: { type: String },
+    _showVersion: { type: Boolean, state: true },
+};
+Banner.styles = unsafeCSS(styles);
+customElements.define("ds-banner", Banner);

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: {
@@ -22,11 +23,7 @@ export declare class Button extends LitElement {
             type: BooleanConstructor;
             reflect: boolean;
         };
-        notionKey: {
-            type: StringConstructor;
-            attribute: string;
-        };
-        key: {
+        text: {
             type: StringConstructor;
         };
         fallback: {
@@ -46,34 +43,21 @@ export declare class Button extends LitElement {
             type: BooleanConstructor;
             state: boolean;
         };
-        _notionText: {
-            type: StringConstructor;
-            state: boolean;
-        };
     };
     variant: string;
     disabled: boolean;
     bold: boolean;
     "no-background": boolean;
     blank: boolean;
-    notionKey: string | null;
-    key: string;
+    text: string;
     fallback: string;
     language: string;
     defaultText: string;
     href: string;
     _loading: boolean;
-    _notionText: 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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAkBf;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,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,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,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;;IAmBnC,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,EAAmB,MAAM,KAAK,CAAC;AAClD,OAAO,WAAW,CAAC;AAGnB,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,IAAI,EAAE,MAAM,CAAC;IACb,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,0BAAqB;IAElC,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,56 +1,28 @@
 // ds-button.ts
 // Core button component
-import { LitElement, html, css } from "lit";
-import { getText } from "../0-face/i18n";
+import { LitElement, html, unsafeCSS } from "lit";
+import "./ds-text";
+import styles from "./styles/ds-button.css?inline";
 export class Button extends LitElement {
     constructor() {
         super();
-        this._handleLanguageChange = () => {
-            this._updateText();
-        };
         this.variant = "title";
         this.disabled = false;
         this.bold = false;
         this["no-background"] = false;
         this.blank = false;
-        this.notionKey = null;
-        this.key = "";
+        this.text = "";
         this.fallback = "";
         this.language = "en-US";
         this.defaultText = "";
         this.href = "";
         this._loading = false;
-        this._notionText = 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._notionText = getText(this.key);
-        }
-        else {
-            this._notionText = this.defaultText || this.fallback || null;
-        }
-        this.requestUpdate();
     }
     render() {
+        const hasTextProps = this.text || this.defaultText || this.fallback;
         return html `
       <button
         class=${this.variant}
@@ -59,7 +31,13 @@ export class Button extends LitElement {
         ?no-background=${this["no-background"]}
         @click=${this._handleClick}
       >
-        ${this._notionText ? this._notionText : html `<slot></slot>`}
+        ${hasTextProps
+            ? html `<ds-text
+              .text=${this.text}
+              .defaultValue=${this.defaultText}
+              .fallback=${this.fallback}
+            ></ds-text>`
+            : html `<slot></slot>`}
       </button>
     `;
     }
@@ -97,64 +75,12 @@ Button.properties = {
         attribute: "no-background",
     },
     blank: { type: Boolean, reflect: true },
-    notionKey: { type: String, attribute: "notion-key" },
-    key: { type: String },
+    text: { type: String },
     fallback: { type: String },
     language: { type: String },
     defaultText: { type: String, attribute: "default-text" },
     href: { type: String },
     _loading: { type: Boolean, state: true },
-    _notionText: { type: String, state: true },
 };
-Button.styles = css `
-    button {
-      max-height: calc(var(--08) * var(--scaling-factor));
-      border: none;
-      cursor: pointer;
-      font-size: calc(var(--type-size-default) * var(--scaling-factor));
-      padding: 0 calc(1px * var(--scaling-factor));
-      color: var(--button-text-color);
-      font-family: var(--typeface);
-    }
-
-    button.title {
-      background-color: var(--button-background-color-secondary);
-      color: var(--button-text-color);
-    }
-
-    button.primary {
-      background-color: var(--accent-color);
-      color: var(--button-text-color);
-      text-decoration-line: none;
-      font-family: var(--typeface);
-    }
-
-    button.secondary {
-      background-color: var(--button-background-color-secondary);
-      color: var(--button-text-color);
-      font-family: var(--typeface);
-    }
-
-    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));
-    }
-
-    .loading {
-      opacity: 0.7;
-    }
-  `;
+Button.styles = unsafeCSS(styles);
 customElements.define("ds-button", Button);

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

@@ -0,0 +1,39 @@
+import { LitElement } from "lit";
+export declare class Card extends LitElement {
+    static properties: {
+        variant: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        elevation: {
+            type: NumberConstructor;
+            reflect: boolean;
+        };
+        interactive: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        padding: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+    };
+    variant: "default" | "outlined" | "elevated" | "filled";
+    elevation: number;
+    interactive: boolean;
+    disabled: boolean;
+    padding: "none" | "small" | "medium" | "large";
+    constructor();
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-card": Card;
+    }
+}
+//# sourceMappingURL=ds-card.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-card.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-card.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C,qBAAa,IAAK,SAAQ,UAAU;IAClC,MAAM,CAAC,UAAU;;;;;;;;;;;;;;;;;;;;;MAMf;IAEM,OAAO,EAAE,SAAS,GAAG,UAAU,GAAG,UAAU,GAAG,QAAQ,CAAC;IACxD,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;;IAWvD,MAAM,CAAC,MAAM,0BA0FX;IAEF,MAAM;CAOP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,IAAI,CAAC;KACjB;CACF"}

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

@@ -0,0 +1,119 @@
+// ds-card.ts
+// Card component for displaying content in a contained box
+import { LitElement, html, css } from "lit";
+export class Card extends LitElement {
+    constructor() {
+        super();
+        this.variant = "default";
+        this.elevation = 1;
+        this.interactive = false;
+        this.disabled = false;
+        this.padding = "medium";
+    }
+    render() {
+        return html `
+      <div class="card-content" part="content">
+        <slot></slot>
+      </div>
+    `;
+    }
+}
+Card.properties = {
+    variant: { type: String, reflect: true },
+    elevation: { type: Number, reflect: true },
+    interactive: { type: Boolean, reflect: true },
+    disabled: { type: Boolean, reflect: true },
+    padding: { type: String, reflect: true },
+};
+Card.styles = css `
+    :host {
+      display: block;
+      box-sizing: border-box;
+      border-radius: calc(var(--025) * var(--sf, 1));
+      background-color: var(--card-background, var(--surface-color, #fff));
+      color: var(--text-color-primary);
+      transition:
+        box-shadow 0.2s ease,
+        transform 0.2s ease;
+    }
+
+    :host([variant="default"]) {
+      background-color: var(--card-background, var(--surface-color, #fff));
+      border: 1px solid var(--border-color, rgba(0, 0, 0, 0.1));
+    }
+
+    :host([variant="outlined"]) {
+      background-color: transparent;
+      border: 1px solid var(--border-color, rgba(0, 0, 0, 0.2));
+    }
+
+    :host([variant="elevated"]) {
+      background-color: var(--card-background, var(--surface-color, #fff));
+      border: none;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    }
+
+    :host([variant="filled"]) {
+      background-color: var(
+        --card-background-filled,
+        var(--surface-color-secondary, #f5f5f5)
+      );
+      border: none;
+    }
+
+    :host([elevation="0"]) {
+      box-shadow: none;
+    }
+
+    :host([elevation="1"]) {
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+    }
+
+    :host([elevation="2"]) {
+      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
+    }
+
+    :host([elevation="3"]) {
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
+    }
+
+    :host([interactive]) {
+      cursor: pointer;
+    }
+
+    :host([interactive]:hover:not([disabled])) {
+      transform: translateY(-2px);
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    }
+
+    :host([interactive]:active:not([disabled])) {
+      transform: translateY(0);
+    }
+
+    :host([disabled]) {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+
+    :host([padding="none"]) {
+      padding: 0;
+    }
+
+    :host([padding="small"]) {
+      padding: calc(var(--025) * var(--sf, 1));
+    }
+
+    :host([padding="medium"]) {
+      padding: calc(var(--05) * var(--sf, 1));
+    }
+
+    :host([padding="large"]) {
+      padding: calc(var(--1) * var(--sf, 1));
+    }
+
+    .card-content {
+      width: 100%;
+      height: 100%;
+    }
+  `;
+customElements.define("ds-card", Card);

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

@@ -10,9 +10,6 @@ export declare class Cycle extends LitElement {
         values: {
             type: ArrayConstructor;
         };
-        label: {
-            type: StringConstructor;
-        };
         currentValue: {
             type: StringConstructor;
             state: boolean;
@@ -32,7 +29,6 @@ export declare class Cycle extends LitElement {
     static styles: import("lit").CSSResult;
     type: string;
     values: string[];
-    label: string;
     currentValue: string;
     translationsReady: boolean;
     disabled: boolean;
@@ -48,9 +44,9 @@ export declare class Cycle extends LitElement {
     disconnectedCallback(): void;
     handleButtonClick(e: Event): void;
     getValueDisplay(value: string): string | any;
+    getColorKey(colorVar: string): string;
     getColorName(colorVar: string): string;
     getNotesStyleIcon(style: string): import("lit-html").TemplateResult<1>;
-    getLabel(): string;
     render(): import("lit-html").TemplateResult<1>;
     private waitForTranslations;
     private handleTranslationsLoaded;

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;IAgFtB,sBAAsB;IAatB,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM;IASnE,iBAAiB;IAuDvB,qBAAqB;IAKrB,oBAAoB;IA0BpB,iBAAiB,CAAC,CAAC,EAAE,KAAK;IAuJ1B,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,GAAG;IA+C5C,YAAY,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM;IAyBtC,iBAAiB,CAAC,KAAK,EAAE,MAAM;IAe/B,QAAQ,IAAI,MAAM;IAgElB,MAAM;YAmDQ,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,EAAmB,MAAM,KAAK,CAAC;AAYlD,OAAO,aAAa,CAAC;AACrB,OAAO,WAAW,CAAC;AACnB,OAAO,WAAW,CAAC;AAsCnB,qBAAa,KAAM,SAAQ,UAAU;IAEnC,MAAM,KAAK,UAAU;;;;;;;;;;;;;;;;;;;;;;MASpB;IAED,MAAM,CAAC,MAAM,0BAAqB;IAI1B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,YAAY,EAAE,MAAM,CAAC;IACrB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAGxB,OAAO,CAAC,aAAa,CAOnB;;IAwBF,iBAAiB;IA6BX,gBAAgB;IA8DtB,sBAAsB;IAatB,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM;IASnE,iBAAiB;IAqCvB,qBAAqB;IAKrB,oBAAoB;IA0BpB,iBAAiB,CAAC,CAAC,EAAE,KAAK;IAiJ1B,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,MAAM;YAoDQ,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"}