@nuvia-ui/components 4.0.1

package/src/token-provider/token-provider.test.js

@@ -0,0 +1,134 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import './token-provider.js';
+
+describe('token-provider', () => {
+    let container;
+
+    beforeEach(() => {
+        container = document.createElement('div');
+        document.body.appendChild(container);
+        // Reset data-theme
+        document.documentElement.removeAttribute('data-theme');
+    });
+
+    afterEach(() => {
+        container.remove();
+        document.documentElement.removeAttribute('data-theme');
+    });
+
+    it('should apply data-theme to document root on connect', async () => {
+        container.innerHTML = '<token-provider theme="light"></token-provider>';
+
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        expect(document.documentElement.getAttribute('data-theme')).toBe('light');
+    });
+
+    it('should default to light theme when no theme is specified', async () => {
+        container.innerHTML = '<token-provider></token-provider>';
+
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        expect(document.documentElement.getAttribute('data-theme')).toBe('light');
+    });
+
+    it('should emit tokens-ready event on connect', async () => {
+        const eventPromise = new Promise(resolve => {
+            document.addEventListener('tokens-ready', (e) => {
+                resolve(e.detail);
+            }, { once: true });
+        });
+
+        container.innerHTML = '<token-provider theme="light"></token-provider>';
+
+        const detail = await eventPromise;
+        expect(detail.theme).toBe('light');
+    });
+
+    it('should emit theme-change event when theme attribute changes', async () => {
+        container.innerHTML = '<token-provider theme="light"></token-provider>';
+        const provider = container.querySelector('token-provider');
+
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const eventPromise = new Promise(resolve => {
+            document.addEventListener('theme-change', (e) => {
+                resolve(e.detail);
+            }, { once: true });
+        });
+
+        provider.setAttribute('theme', 'dark');
+
+        const detail = await eventPromise;
+        expect(detail.theme).toBe('dark');
+        expect(detail.previousTheme).toBe('light');
+    });
+
+    it('should update data-theme when theme attribute changes', async () => {
+        container.innerHTML = '<token-provider theme="light"></token-provider>';
+        const provider = container.querySelector('token-provider');
+
+        await new Promise(resolve => setTimeout(resolve, 100));
+        expect(document.documentElement.getAttribute('data-theme')).toBe('light');
+
+        provider.setAttribute('theme', 'dark');
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        expect(document.documentElement.getAttribute('data-theme')).toBe('dark');
+    });
+
+    it('should toggle theme between light and dark', async () => {
+        container.innerHTML = '<token-provider theme="light"></token-provider>';
+        const provider = container.querySelector('token-provider');
+
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        expect(provider.theme).toBe('light');
+
+        const newTheme = provider.toggleTheme();
+        expect(newTheme).toBe('dark');
+        expect(provider.theme).toBe('dark');
+
+        const toggledBack = provider.toggleTheme();
+        expect(toggledBack).toBe('light');
+        expect(provider.theme).toBe('light');
+    });
+
+    it('should get theme via property getter', async () => {
+        container.innerHTML = '<token-provider theme="dark"></token-provider>';
+        const provider = container.querySelector('token-provider');
+
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        expect(provider.theme).toBe('dark');
+    });
+
+    it('should set theme via property setter', async () => {
+        container.innerHTML = '<token-provider theme="light"></token-provider>';
+        const provider = container.querySelector('token-provider');
+
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        provider.theme = 'dark';
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        expect(provider.getAttribute('theme')).toBe('dark');
+        expect(document.documentElement.getAttribute('data-theme')).toBe('dark');
+    });
+
+    it('should return token value via getToken method', async () => {
+        // Set a CSS custom property for testing
+        document.documentElement.style.setProperty('--ds-space-md', '16px');
+
+        container.innerHTML = '<token-provider></token-provider>';
+        const provider = container.querySelector('token-provider');
+
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const value = provider.getToken('ds-space-md');
+        expect(value).toBe('16px');
+
+        // Cleanup
+        document.documentElement.style.removeProperty('--ds-space-md');
+    });
+});

package/src/utils/number-input.utils.js

@@ -0,0 +1,42 @@
+/**
+ * Number input utilities for clamping and validation.
+ * Reusable across ds-input, ds-pagination, ds-slider, ds-stepper, etc.
+ * 
+ * @module utils/number-input.utils
+ */
+
+/**
+ * Clamp a value between min and max, handling NaN gracefully.
+ * @param {string|number} value - Raw input value
+ * @param {number} min - Minimum allowed value
+ * @param {number} max - Maximum allowed value
+ * @param {number} fallback - Value to use if input is NaN
+ * @returns {number} Clamped value
+ */
+export function clampValue(value, min, max, fallback) {
+    const num = typeof value === 'string' ? parseInt(value, 10) : value;
+    if (isNaN(num)) return fallback;
+    return Math.max(min, Math.min(max, num));
+}
+
+/**
+ * Check if a value is within valid range.
+ * @param {number} value
+ * @param {number} min
+ * @param {number} max
+ * @returns {boolean}
+ */
+export function isInRange(value, min, max) {
+    return value >= min && value <= max;
+}
+
+/**
+ * Parse a numeric string, returning fallback if invalid.
+ * @param {string} value - String to parse
+ * @param {number} fallback - Value to return if parsing fails
+ * @returns {number}
+ */
+export function parseNumeric(value, fallback) {
+    const num = parseInt(value, 10);
+    return isNaN(num) ? fallback : num;
+}