ds-one 0.2.5-alpha.17 → 0.2.5-alpha.19

package/DS1/x-icon/plus.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 2V10M2 6H10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+</svg>

package/DS1/x-icon/rewind.svg

@@ -0,0 +1,4 @@
+<svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 1L1 5L6 9V1Z" fill="currentColor"/>
+<path d="M12 1L7 5L12 9V1Z" fill="currentColor"/>
+</svg>

package/DS1/x-icon/row.svg

@@ -0,0 +1,5 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="11" height="3" stroke="currentColor" stroke-width="1" fill="none"/>
+<rect x="0.5" y="4.5" width="11" height="3" stroke="currentColor" stroke-width="1" fill="none"/>
+<rect x="0.5" y="8.5" width="11" height="3" stroke="currentColor" stroke-width="1" fill="none"/>
+</svg>

package/DS1/x-icon/sdown.svg

@@ -0,0 +1,3 @@
+<svg width="8" height="5" viewBox="0 0 8 5" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 1L4 4L7 1" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/DS1/x-icon/search.svg

@@ -0,0 +1,4 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="5" cy="5" r="4" stroke="currentColor" stroke-width="1.2" fill="none"/>
+<line x1="8" y1="8" x2="11" y2="11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+</svg>

package/DS1/x-icon/see.svg

@@ -0,0 +1,4 @@
+<svg width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7 1C3.5 1 1 5 1 5C1 5 3.5 9 7 9C10.5 9 13 5 13 5C13 5 10.5 1 7 1Z" stroke="currentColor" stroke-width="1.2" fill="none"/>
+<circle cx="7" cy="5" r="2" fill="currentColor"/>
+</svg>

package/DS1/x-icon/ship.svg

@@ -0,0 +1,5 @@
+<svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 8L1 11H13L12 8" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
+<path d="M3 8V4H6V1H8V4H11V8H3Z" fill="currentColor"/>
+<rect x="5" y="5" width="4" height="2" fill="var(--surface-color, #fff)"/>
+</svg>

package/DS1/x-icon/star.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 1L7.5 4.5L11 5L8.5 7.5L9 11L6 9.5L3 11L3.5 7.5L1 5L4.5 4.5L6 1Z" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round" fill="none"/>
+</svg>

package/DS1/x-icon/status.svg

@@ -0,0 +1,4 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="6" cy="6" r="5" stroke="currentColor" stroke-width="1.2" fill="none"/>
+<circle cx="6" cy="6" r="2" fill="currentColor"/>
+</svg>

package/DS1/x-icon/sup.svg

@@ -0,0 +1,3 @@
+<svg width="8" height="5" viewBox="0 0 8 5" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 4L4 1L7 4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/DS1/x-icon/title.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 1H11M6 1V9M3 9H9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+</svg>

package/DS1/x-icon/undo.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 4L4 1M1 4L4 7M1 4H8C9.65685 4 11 5.34315 11 7V9" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
+</svg>

package/DS1/x-icon/ungroup.svg

@@ -0,0 +1,4 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="5" height="5" stroke="currentColor" stroke-width="1" stroke-dasharray="2 1" fill="none"/>
+<rect x="6.5" y="6.5" width="5" height="5" stroke="currentColor" stroke-width="1" stroke-dasharray="2 1" fill="none"/>
+</svg>

package/DS1/x-icon/unhead.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 1H11M1 1V10C1 10.5523 1.44772 11 2 11H10C10.5523 11 11 10.5523 11 10V1" stroke="currentColor" stroke-width="1.2" stroke-dasharray="2 1" fill="none"/>
+</svg>

package/DS1/x-icon/unicon.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1" y="1" width="10" height="10" rx="2" stroke="currentColor" stroke-width="1.2" stroke-dasharray="2 1" fill="none"/>
+</svg>

package/DS1/x-icon/unlock.svg

@@ -0,0 +1,5 @@
+<svg width="10" height="12" viewBox="0 0 10 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1" y="5" width="8" height="6" rx="1" stroke="currentColor" stroke-width="1.2" fill="none"/>
+<path d="M3 5V3C3 1.89543 3.89543 1 5 1C6.10457 1 7 1.89543 7 3" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" fill="none"/>
+<circle cx="5" cy="8" r="1" fill="currentColor"/>
+</svg>

package/DS1/x-icon/unmic.svg

@@ -0,0 +1,6 @@
+<svg width="10" height="14" viewBox="0 0 10 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="2.5" y="1" width="5" height="7" rx="2.5" stroke="currentColor" stroke-width="1.2" fill="none"/>
+<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"/>
+<line x1="5" y1="11" x2="5" y2="13" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
+<line x1="1" y1="1" x2="9" y2="13" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
+</svg>

package/DS1/x-icon/unsee.svg

@@ -0,0 +1,5 @@
+<svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7 2C3.5 2 1 6 1 6C1 6 3.5 10 7 10C10.5 10 13 6 13 6C13 6 10.5 2 7 2Z" stroke="currentColor" stroke-width="1.2" fill="none"/>
+<circle cx="7" cy="6" r="2" stroke="currentColor" stroke-width="1.2" fill="none"/>
+<line x1="2" y1="1" x2="12" y2="11" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
+</svg>

package/DS1/x-icon/unstar.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 1L7.5 4.5L11 5L8.5 7.5L9 11L6 9.5L3 11L3.5 7.5L1 5L4.5 4.5L6 1Z" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round" stroke-dasharray="2 1" fill="none"/>
+</svg>

package/DS1/x-icon/untitle.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 1H11M6 1V9M3 9H9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-dasharray="2 1"/>
+</svg>

package/DS1/x-icon/up.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 10V2M6 2L2 6M6 2L10 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/README.md

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

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

@@ -22,4 +22,9 @@ export declare function getDeviceInfo(): DeviceInfo;
  * Initialize device detection and log to console
  */
 export declare function initDeviceDetection(): DeviceInfo;
+/**
+ * Disable double-tap to zoom in the browser (app-like behavior)
+ * Prevents all zoom gestures including double-tap and pinch-to-zoom
+ */
+export declare function applike(): void;
 //# sourceMappingURL=device.d.ts.map

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,CA0DhD"}
+{"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;AAwBD;;;GAGG;AACH,wBAAgB,OAAO,IAAI,IAAI,CA4H9B"}

package/dist/0-face/device.js

@@ -117,3 +117,108 @@ if (typeof window !== "undefined") {
         }, 100);
     });
 }
+/**
+ * Disable double-tap to zoom in the browser (app-like behavior)
+ * Prevents all zoom gestures including double-tap and pinch-to-zoom
+ */
+export function applike() {
+    if (typeof document === "undefined" || typeof window === "undefined") {
+        return;
+    }
+    // Set viewport meta tag to prevent zoom - this is the most important step
+    let viewport = document.querySelector('meta[name="viewport"]');
+    if (!viewport) {
+        viewport = document.createElement("meta");
+        viewport.setAttribute("name", "viewport");
+        document.head.appendChild(viewport);
+    }
+    viewport.setAttribute("content", "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no");
+    // Apply touch-action: pan-x pan-y globally to prevent zoom but allow panning
+    const style = document.createElement("style");
+    style.id = "ds-one-applike-style";
+    style.textContent = `
+    * {
+      touch-action: pan-x pan-y !important;
+      -ms-touch-action: pan-x pan-y !important;
+    }
+    html, body {
+      touch-action: pan-x pan-y !important;
+      -ms-touch-action: pan-x pan-y !important;
+    }
+  `;
+    // Remove existing style if present
+    const existingStyle = document.getElementById("ds-one-applike-style");
+    if (existingStyle) {
+        existingStyle.remove();
+    }
+    document.head.appendChild(style);
+    // Track touch events to prevent double-tap zoom
+    let lastTouchEnd = 0;
+    let touchStartTime = 0;
+    const preventZoom = (event) => {
+        // Prevent pinch zoom (two fingers)
+        if (event instanceof TouchEvent) {
+            if (event.touches.length > 1) {
+                event.preventDefault();
+                event.stopPropagation();
+                return;
+            }
+            const now = Date.now();
+            if (event.type === "touchstart") {
+                // If touchstart happens within 300ms of last touchend, it's likely a double-tap
+                if (now - lastTouchEnd < 300) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    return;
+                }
+                touchStartTime = now;
+            }
+            else if (event.type === "touchend") {
+                const touchDuration = now - touchStartTime;
+                // If this is a quick tap (< 300ms) and happened soon after previous touchend, prevent it
+                if (touchDuration < 300 && now - lastTouchEnd < 300) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    return;
+                }
+                lastTouchEnd = now;
+            }
+            else if (event.type === "touchmove") {
+                // Prevent any touchmove that might trigger zoom
+                if (event.touches.length > 1) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    return;
+                }
+            }
+        }
+        // Prevent wheel zoom with ctrl/cmd key (common on trackpads)
+        if (event instanceof WheelEvent && (event.ctrlKey || event.metaKey)) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+        }
+    };
+    // Use capture phase to catch events earlier
+    const options = { passive: false, capture: true };
+    // Prevent all zoom gestures - use capture phase
+    document.addEventListener("touchstart", preventZoom, options);
+    document.addEventListener("touchmove", preventZoom, options);
+    document.addEventListener("touchend", preventZoom, options);
+    document.addEventListener("touchcancel", preventZoom, options);
+    // Prevent wheel zoom
+    document.addEventListener("wheel", preventZoom, options);
+    // Prevent gesture events (iOS Safari) - use capture phase
+    document.addEventListener("gesturestart", (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+    }, options);
+    document.addEventListener("gesturechange", (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+    }, options);
+    document.addEventListener("gestureend", (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+    }, options);
+}

package/dist/0-face/scaling.d.ts

@@ -0,0 +1,48 @@
+export type ScalingMode = "auto" | "fixed" | "fluid";
+export interface ScalingConfig {
+    mode: ScalingMode;
+    baseWidth: number;
+    minScale: number;
+    maxScale: number;
+}
+export declare const scalingFactor: import("@lit-labs/signals").Signal.State<number>;
+export declare const scalingConfig: import("@lit-labs/signals").Signal.State<ScalingConfig>;
+/**
+ * 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 declare function calculateScalingFactor(viewportWidth: number, config?: ScalingConfig): number;
+/**
+ * Set the scaling configuration
+ * @param config - Partial scaling configuration to apply
+ */
+export declare function setScalingConfig(config: Partial<ScalingConfig>): void;
+/**
+ * Update the scaling factor based on current viewport
+ */
+export declare function updateScalingFactor(): void;
+/**
+ * Get the current scaling factor
+ * @returns The current scaling factor
+ */
+export declare function getScalingFactor(): number;
+/**
+ * Convert a design pixel value to scaled pixels
+ * @param designPx - The design pixel value (based on 280px width)
+ * @returns The scaled pixel value
+ */
+export declare function scale(designPx: number): number;
+/**
+ * Convert a scaled pixel value back to design pixels
+ * @param scaledPx - The scaled pixel value
+ * @returns The design pixel value
+ */
+export declare function unscale(scaledPx: number): number;
+/**
+ * Initialize scaling system
+ * This is typically called automatically when the module loads
+ */
+export declare function initScaling(): void;
+//# sourceMappingURL=scaling.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"scaling.d.ts","sourceRoot":"","sources":["../../DS1/0-face/scaling.ts"],"names":[],"mappings":"AAKA,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,CAAC;AAErD,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,WAAW,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAUD,eAAO,MAAM,aAAa,kDAAoB,CAAC;AAG/C,eAAO,MAAM,aAAa,yDAAuC,CAAC;AAElE;;;;;GAKG;AACH,wBAAgB,sBAAsB,CACpC,aAAa,EAAE,MAAM,EACrB,MAAM,GAAE,aAAmC,GAC1C,MAAM,CAYR;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,OAAO,CAAC,aAAa,CAAC,GAAG,IAAI,CASrE;AAED;;GAEG;AACH,wBAAgB,mBAAmB,IAAI,IAAI,CAoB1C;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,IAAI,MAAM,CAEzC;AAED;;;;GAIG;AACH,wBAAgB,KAAK,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,CAE9C;AAED;;;;GAIG;AACH,wBAAgB,OAAO,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,CAGhD;AAED;;;GAGG;AACH,wBAAgB,WAAW,IAAI,IAAI,CAqBlC"}

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.map

@@ -1 +1 @@
-{"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"}
+{"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,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,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,9 +1,10 @@
 // ds-banner.ts
 // Fixed banner component for notifications/alerts
-import { LitElement, html, css } from "lit";
+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);
@@ -93,80 +94,5 @@ Banner.properties = {
     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;
-    }
-  `;
+Banner.styles = unsafeCSS(styles);
 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,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"}
+{"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,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,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,7 +1,8 @@
 // ds-button.ts
 // Core button component
-import { LitElement, html, css } from "lit";
+import { LitElement, html, unsafeCSS } from "lit";
 import "./ds-text";
+import styles from "./styles/ds-button.css?inline";
 export class Button extends LitElement {
     constructor() {
         super();
@@ -81,70 +82,5 @@ Button.properties = {
     href: { type: String },
     _loading: { type: Boolean, state: true },
 };
-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(0.5px * var(--sf));
-      color: var(--button-text-color);
-      font-family: var(--typeface-regular);
-    }
-
-    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-regular);
-    }
-
-    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));
-    }
-
-    .loading {
-      opacity: 0.7;
-    }
-  `;
+Button.styles = unsafeCSS(styles);
 customElements.define("ds-button", Button);