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

package/DS1/x-icon/page.svg

@@ -0,0 +1,4 @@
+<svg width="10" height="12" viewBox="0 0 10 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 2C1 1.44772 1.44772 1 2 1H6L9 4V10C9 10.5523 8.55228 11 8 11H2C1.44772 11 1 10.5523 1 10V2Z" stroke="currentColor" stroke-width="1.2" fill="none"/>
+<path d="M6 1V4H9" stroke="currentColor" stroke-width="1.2" fill="none"/>
+</svg>

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/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2025 Jo4712
+Copyright (c) 2025 0001
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -1,4 +1,4 @@
-# DS one (0.2.5-alpha.9)
+# DS one (0.3.0-alpha.1)
 
 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.9`
+**Note**: Currently published as alpha version `0.3.0-alpha.1`
 
 ## Quick Start
 
@@ -41,8 +41,8 @@ yarn add ds-one@alpha
     </script>
   </head>
   <body>
-    <ds-button variant="primary" key="getStarted"></ds-button>
-    <ds-text key="welcome"></ds-text>
+    <ds-button variant="primary" text="Get Started"></ds-button>
+    <ds-text text="Welcome"></ds-text>
   </body>
 </html>
 ```

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

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})`);
     }
@@ -111,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

@@ -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"}