@nuvia-ui/components 4.0.1

package/src/ds-slider/ds-slider.test.js

@@ -0,0 +1,308 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import './ds-slider.js';
+
+describe('ds-slider', () => {
+    let container;
+
+    beforeEach(() => {
+        container = document.createElement('div');
+        document.body.appendChild(container);
+    });
+
+    afterEach(() => {
+        container.remove();
+    });
+
+    it('renders with default values', async () => {
+        container.innerHTML = '<ds-slider></ds-slider>';
+        const element = container.querySelector('ds-slider');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        expect(element.value).toBe(0);
+        expect(element.min).toBe(0);
+        expect(element.max).toBe(100);
+        expect(element.step).toBe(1);
+        expect(element.disabled).toBe(false);
+
+        const input = element.shadowRoot.querySelector('input[type="range"]');
+        expect(input).toBeTruthy();
+    });
+
+    it('renders with custom value and range', async () => {
+        container.innerHTML = '<ds-slider value="50" min="10" max="90"></ds-slider>';
+        const element = container.querySelector('ds-slider');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        expect(element.value).toBe(50);
+        expect(element.min).toBe(10);
+        expect(element.max).toBe(90);
+    });
+
+    it('renders label when provided', async () => {
+        container.innerHTML = '<ds-slider label="Volume"></ds-slider>';
+        const element = container.querySelector('ds-slider');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        const labelRow = element.shadowRoot.querySelector('.label-row');
+        expect(labelRow).toBeTruthy();
+        expect(labelRow.textContent).toContain('Volume');
+    });
+
+    it('renders helpText when provided', async () => {
+        container.innerHTML = '<ds-slider help-text="Some help"></ds-slider>';
+        const element = container.querySelector('ds-slider');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        const message = element.shadowRoot.querySelector('.field-message');
+        expect(message).toBeTruthy();
+        expect(message.textContent).toContain('Some help');
+    });
+
+    it('renders errorText when validationStatus is error', async () => {
+        container.innerHTML = '<ds-slider error-text="Error msg" validation-status="error"></ds-slider>';
+        const element = container.querySelector('ds-slider');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        const message = element.shadowRoot.querySelector('.field-message--error');
+        expect(message).toBeTruthy();
+        expect(message.textContent).toContain('Error msg');
+    });
+
+    it('dispatches input event during interaction', async () => {
+        container.innerHTML = '<ds-slider value="50"></ds-slider>';
+        const element = container.querySelector('ds-slider');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        let eventFired = false;
+        let eventValue = null;
+        element.addEventListener('input', (e) => {
+            eventFired = true;
+            eventValue = e.detail.value;
+        });
+
+        const input = element.shadowRoot.querySelector('input[type="range"]');
+        input.value = 75;
+        input.dispatchEvent(new Event('input', { bubbles: true }));
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        expect(eventFired).toBe(true);
+        expect(eventValue).toBe(75);
+    });
+
+    it('dispatches change event on release', async () => {
+        container.innerHTML = '<ds-slider value="50"></ds-slider>';
+        const element = container.querySelector('ds-slider');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        let eventFired = false;
+        element.addEventListener('change', () => {
+            eventFired = true;
+        });
+
+        const input = element.shadowRoot.querySelector('input[type="range"]');
+        input.dispatchEvent(new Event('change', { bubbles: true }));
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        expect(eventFired).toBe(true);
+    });
+
+    it('respects step attribute', async () => {
+        container.innerHTML = '<ds-slider step="10"></ds-slider>';
+        const element = container.querySelector('ds-slider');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        const input = element.shadowRoot.querySelector('input[type="range"]');
+        expect(input.step).toBe('10');
+    });
+
+    it('reflects disabled state', async () => {
+        container.innerHTML = '<ds-slider disabled></ds-slider>';
+        const element = container.querySelector('ds-slider');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        expect(element.disabled).toBe(true);
+        expect(element.hasAttribute('disabled')).toBe(true);
+
+        const input = element.shadowRoot.querySelector('input[type="range"]');
+        expect(input.disabled).toBe(true);
+    });
+
+    it('focus() method focuses the input', async () => {
+        container.innerHTML = '<ds-slider></ds-slider>';
+        const element = container.querySelector('ds-slider');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        element.focus();
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        const input = element.shadowRoot.querySelector('input[type="range"]');
+        expect(element.shadowRoot.activeElement).toBe(input);
+    });
+
+    it('renders thumb with icon', async () => {
+        container.innerHTML = '<ds-slider></ds-slider>';
+        const element = container.querySelector('ds-slider');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        const thumb = element.shadowRoot.querySelector('.thumb');
+        expect(thumb).toBeTruthy();
+
+        const icon = thumb.querySelector('ds-icon');
+        expect(icon).toBeTruthy();
+        expect(icon.getAttribute('name')).toBe('circle-filled');
+    });
+
+    // TOOLTIP TESTS
+    it('shows tooltip on focus', async () => {
+        container.innerHTML = '<ds-slider></ds-slider>';
+        const element = container.querySelector('ds-slider');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        const input = element.shadowRoot.querySelector('input[type="range"]');
+        input.dispatchEvent(new Event('focus'));
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        expect(element._showTooltip).toBe(true);
+    });
+
+    it('hides tooltip on blur', async () => {
+        container.innerHTML = '<ds-slider></ds-slider>';
+        const element = container.querySelector('ds-slider');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        const input = element.shadowRoot.querySelector('input[type="range"]');
+
+        // Focus first
+        input.dispatchEvent(new Event('focus'));
+        await new Promise(resolve => setTimeout(resolve, 0));
+        expect(element._showTooltip).toBe(true);
+
+        // Then blur
+        input.dispatchEvent(new Event('blur'));
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        expect(element._showTooltip).toBe(false);
+    });
+
+    it('shows tooltip while dragging', async () => {
+        container.innerHTML = '<ds-slider value="50"></ds-slider>';
+        const element = container.querySelector('ds-slider');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        const input = element.shadowRoot.querySelector('input[type="range"]');
+
+        // Simulate mousedown (start drag)
+        element._handleMouseDown();
+        expect(element._isDragging).toBe(true);
+
+        // Trigger input event
+        input.value = 75;
+        input.dispatchEvent(new Event('input', { bubbles: true }));
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        expect(element._showTooltip).toBe(true);
+    });
+
+
+    it('updates tooltip content as value changes', async () => {
+        container.innerHTML = '<ds-slider value="25"></ds-slider>';
+        const element = container.querySelector('ds-slider');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        const input = element.shadowRoot.querySelector('input[type="range"]');
+
+        input.dispatchEvent(new Event('focus'));
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        // Change value
+        input.value = 75;
+        input.dispatchEvent(new Event('input', { bubbles: true }));
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        expect(element.value).toBe(75);
+        const tooltip = element.shadowRoot.querySelector('ds-tooltip');
+        expect(tooltip).toBeTruthy();
+    });
+
+    // VALIDATION TESTS
+    it('applies error styling when validation-status="error"', async () => {
+        container.innerHTML = '<ds-slider validation-status="error"></ds-slider>';
+        const element = container.querySelector('ds-slider');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        expect(element.validationStatus).toBe('error');
+    });
+
+    it('renders error message with icon', async () => {
+        container.innerHTML = '<ds-slider error-text="Invalid value" validation-status="error"></ds-slider>';
+        const element = container.querySelector('ds-slider');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        const message = element.shadowRoot.querySelector('.field-message--error');
+        expect(message).toBeTruthy();
+        expect(message.textContent).toContain('Invalid value');
+
+        const errorIcon = element.shadowRoot.querySelector('.field-message--error ds-icon');
+        expect(errorIcon).toBeTruthy();
+    });
+
+
+
+    // EDGE CASES
+    it('handles value < min (clamps to min)', async () => {
+        container.innerHTML = '<ds-slider min="10" max="100"></ds-slider>';
+        const element = container.querySelector('ds-slider');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        element.value = 5; // Below min
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        const input = element.shadowRoot.querySelector('input[type="range"]');
+        expect(parseFloat(input.value)).toBeGreaterThanOrEqual(10);
+    });
+
+    it('handles value > max (clamps to max)', async () => {
+        container.innerHTML = '<ds-slider min="0" max="100"></ds-slider>';
+        const element = container.querySelector('ds-slider');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        element.value = 150; // Above max
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        const input = element.shadowRoot.querySelector('input[type="range"]');
+        expect(parseFloat(input.value)).toBeLessThanOrEqual(100);
+    });
+
+    it('handles step="0.1" for decimal values', async () => {
+        container.innerHTML = '<ds-slider step="0.1" value="5.5"></ds-slider>';
+        const element = container.querySelector('ds-slider');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        const input = element.shadowRoot.querySelector('input[type="range"]');
+        expect(input.step).toBe('0.1');
+        expect(element.value).toBe(5.5);
+    });
+
+    it('tracks isDragging state on mousedown', async () => {
+        container.innerHTML = '<ds-slider></ds-slider>';
+        const element = container.querySelector('ds-slider');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        expect(element._isDragging).toBe(false);
+
+        element._handleMouseDown();
+        expect(element._isDragging).toBe(true);
+    });
+
+    it('resets isDragging on mouseup', async () => {
+        container.innerHTML = '<ds-slider></ds-slider>';
+        const element = container.querySelector('ds-slider');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        element._handleMouseDown();
+        expect(element._isDragging).toBe(true);
+
+        element._handleMouseUp();
+        expect(element._isDragging).toBe(false);
+    });
+});

package/src/ds-spinner/ds-spinner.js

@@ -0,0 +1,173 @@
+import { LitElement, html, css } from 'lit';
+
+/**
+ * @element ds-spinner
+ * @summary A loading spinner with two orbiting circles creating a 3D illusion.
+ *
+ * @prop {string} variant - 'default' | 'inverse'. Default: 'default'.
+ */
+export class DsSpinner extends LitElement {
+  static properties = {
+    variant: { type: String, reflect: true },
+    size: { type: String, reflect: true },
+  };
+
+  static styles = css`
+    /* 
+       VARIABLES FOR SIZING
+       Default: Base 32, Max 48, Min 21, Offset 20, Border 2
+       Inline:  Base 12, Max 16, Min 9,  Offset 7,  Border 1
+    */
+    :host {
+      display: inline-block;
+      --spinner-size-base: var(--ds-size-32, 32px);
+      --spinner-size-max: var(--ds-size-48, 48px);
+      --spinner-size-min: 21px; /* Calculated: no token */
+      --spinner-translate-offset: var(--ds-size-20, 20px);
+      --spinner-border-width: var(--ds-size-2, 2px);
+      width: 80px;
+      height: 48px;
+    }
+
+    :host([size="inline"]) {
+      --spinner-size-base: var(--ds-size-12, 12px);
+      --spinner-size-max: var(--ds-size-16, 16px);
+      --spinner-size-min: 9px; /* Calculated: no token */
+      --spinner-translate-offset: 7px; /* Calculated: no token */
+      --spinner-border-width: 1px; /* No 1px token available */
+      width: 32px;
+      height: 16px;
+    }
+
+    .spinner-container {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .circle {
+      position: absolute;
+      width: var(--spinner-size-base);
+      height: var(--spinner-size-base);
+      border-radius: 50%;
+      border-width: var(--spinner-border-width);
+      border-style: solid;
+      box-sizing: border-box;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%); /* Start centered */
+      will-change: width, height, transform, z-index;
+    }
+
+    /* DEFAULT VARIANT */
+    :host([variant="default"]) .circle,
+    :host(:not([variant])) .circle {
+      background-color: var(--ds-color-bg-default);
+      border-color: var(--ds-color-border-brand);
+    }
+
+    /* INVERSE VARIANT */
+    :host([variant="inverse"]) .circle {
+      background-color: var(--ds-color-bg-brand);
+      border-color: var(--ds-color-border-inverse);
+    }
+
+    .circle-1 {
+      animation: orbit-1 2s linear infinite;
+      z-index: 1;
+    }
+
+    .circle-2 {
+      animation: orbit-2 2s linear infinite;
+      z-index: 0;
+    }
+
+    @keyframes orbit-1 {
+      0% {
+        transform: translate(calc(-50% - var(--spinner-translate-offset)), -50%); /* Left */
+        width: var(--spinner-size-base);
+        height: var(--spinner-size-base);
+        z-index: 1;
+      }
+      25% {
+        transform: translate(-50%, -50%); /* Center */
+        width: var(--spinner-size-max);
+        height: var(--spinner-size-max);
+        z-index: 2; /* Front */
+      }
+      50% {
+        transform: translate(calc(-50% + var(--spinner-translate-offset)), -50%); /* Right */
+        width: var(--spinner-size-base);
+        height: var(--spinner-size-base);
+        z-index: 1;
+      }
+      75% {
+        transform: translate(-50%, -50%); /* Center */
+        width: var(--spinner-size-min);
+        height: var(--spinner-size-min);
+        z-index: 0; /* Back */
+      }
+      100% {
+        transform: translate(calc(-50% - var(--spinner-translate-offset)), -50%); /* Left */
+        width: var(--spinner-size-base);
+        height: var(--spinner-size-base);
+        z-index: 1;
+      }
+    }
+
+    @keyframes orbit-2 {
+      0% {
+        transform: translate(calc(-50% + var(--spinner-translate-offset)), -50%); /* Right */
+        width: var(--spinner-size-base);
+        height: var(--spinner-size-base);
+        z-index: 0;
+      }
+      25% {
+        transform: translate(-50%, -50%); /* Center */
+        width: var(--spinner-size-min);
+        height: var(--spinner-size-min);
+        z-index: 0; /* Back */
+      }
+      50% {
+        transform: translate(calc(-50% - var(--spinner-translate-offset)), -50%); /* Left */
+        width: var(--spinner-size-base);
+        height: var(--spinner-size-base);
+        z-index: 1;
+      }
+      75% {
+        transform: translate(-50%, -50%); /* Center */
+        width: var(--spinner-size-max);
+        height: var(--spinner-size-max);
+        z-index: 2; /* Front */
+      }
+      100% {
+        transform: translate(calc(-50% + var(--spinner-translate-offset)), -50%); /* Right */
+        width: var(--spinner-size-base);
+        height: var(--spinner-size-base);
+        z-index: 0;
+      }
+    }
+  `;
+
+  constructor() {
+    super();
+    this.variant = 'default';
+    this.size = 'default';
+  }
+
+  render() {
+    return html`
+      <div class="spinner-container" aria-label="Loading" role="status">
+        <div class="circle circle-1"></div>
+        <div class="circle circle-2"></div>
+      </div>
+    `;
+  }
+}
+
+if (!customElements.get('ds-spinner')) {
+  customElements.define('ds-spinner', DsSpinner);
+}

package/src/ds-spinner/ds-spinner.stories.js

@@ -0,0 +1,52 @@
+import { html } from 'lit';
+import './ds-spinner.js';
+
+export default {
+    title: 'Components/Spinner',
+    component: 'ds-spinner',
+    argTypes: {
+        variant: {
+            control: 'select',
+            options: ['default', 'inverse']
+        },
+        size: {
+            control: 'select',
+            options: ['default', 'inline']
+        }
+    },
+};
+
+const Template = (args) => html`
+  <ds-spinner .variant=${args.variant} .size=${args.size}></ds-spinner>
+`;
+
+export const Default = Template.bind({});
+Default.args = {
+    variant: 'default',
+};
+
+export const Inverse = Template.bind({});
+Inverse.args = {
+    variant: 'inverse',
+};
+
+export const Inline = Template.bind({});
+Inline.args = {
+    size: 'inline',
+};
+
+export const OverlayExample = Template.bind({});
+OverlayExample.args = {
+    variant: 'default',
+    size: 'default'
+};
+OverlayExample.decorators = [
+    (Story) => html`
+    <div style="position: relative; width: 300px; height: 150px; background: #f0f0f0; display: flex; align-items: center; justify-content: center; border: 1px solid #ccc;">
+        <p>Content Loading...</p>
+        <div style="position: absolute; inset: 0; background: rgba(255,255,255,0.8); display: flex; align-items: center; justify-content: center;">
+            ${Story()}
+        </div>
+    </div>
+    `
+];

package/src/ds-spinner/ds-spinner.test.js

@@ -0,0 +1,50 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import './ds-spinner.js';
+
+describe('ds-spinner', () => {
+    let container;
+
+    beforeEach(() => {
+        container = document.createElement('div');
+        document.body.appendChild(container);
+    });
+
+    afterEach(() => {
+        container.remove();
+    });
+
+    it('renders with default role', async () => {
+        container.innerHTML = '<ds-spinner></ds-spinner>';
+        const el = container.querySelector('ds-spinner');
+        await new Promise(r => setTimeout(r, 50));
+
+        const spinner = el.shadowRoot.querySelector('.spinner-container');
+        expect(spinner.getAttribute('role')).toBe('status');
+        expect(spinner.getAttribute('aria-label')).toBe('Loading');
+    });
+
+    it('renders two circles', async () => {
+        container.innerHTML = '<ds-spinner></ds-spinner>';
+        const el = container.querySelector('ds-spinner');
+        await new Promise(r => setTimeout(r, 50));
+
+        const circles = el.shadowRoot.querySelectorAll('.circle');
+        expect(circles.length).toBe(2);
+    });
+
+    it('applies inverse variant attribute', async () => {
+        container.innerHTML = '<ds-spinner variant="inverse"></ds-spinner>';
+        const el = container.querySelector('ds-spinner');
+        await new Promise(r => setTimeout(r, 50));
+
+        expect(el.getAttribute('variant')).toBe('inverse');
+    });
+
+    it('applies inline size attribute', async () => {
+        container.innerHTML = '<ds-spinner size="inline"></ds-spinner>';
+        const el = container.querySelector('ds-spinner');
+        await new Promise(r => setTimeout(r, 50));
+
+        expect(el.getAttribute('size')).toBe('inline');
+    });
+});

package/src/ds-status-border/ds-status-border.js

@@ -0,0 +1,88 @@
+import { LitElement, html, css } from 'lit';
+
+/**
+ * Status Border — reusable visual indicator for status states.
+ * Used across rich list items, cards, and KPIs.
+ *
+ * @element ds-status-border
+ *
+ * @prop {string} status - Status type (critical, danger, fail, warning-major, warning-minor, success, info, inprogress, pending, neutral, new)
+ * @prop {string} orientation - vertical (default) or horizontal
+ * @prop {boolean} selected - Increases thickness from 2px to 4px
+ * @prop {boolean} disabled - Visually disables the border (opacity: 0.5)
+ *
+ * @csspart border - The border element
+ */
+export class DsStatusBorder extends LitElement {
+  static properties = {
+    status: { type: String, reflect: true },
+    orientation: { type: String, reflect: true },
+    selected: { type: Boolean, reflect: true },
+    disabled: { type: Boolean, reflect: true }
+  };
+
+  static styles = css`
+    :host {
+      display: block;
+    }
+
+    /* ─── Status Color Mapping ─── */
+    :host([status="critical"]) { --status-color: var(--ds-color-status-critical); }
+    :host([status="danger"]) { --status-color: var(--ds-color-status-danger); }
+    :host([status="fail"]) { --status-color: var(--ds-color-status-fail); }
+    :host([status="warning-major"]) { --status-color: var(--ds-color-status-warning-major); }
+    :host([status="warning-minor"]) { --status-color: var(--ds-color-status-warning-minor); }
+    :host([status="success"]) { --status-color: var(--ds-color-status-success); }
+    :host([status="info"]) { --status-color: var(--ds-color-status-info); }
+    :host([status="inprogress"]) { --status-color: var(--ds-color-status-inprogress); }
+    :host([status="pending"]) { --status-color: var(--ds-color-status-pending); }
+    :host([status="neutral"]) { --status-color: var(--ds-color-status-neutral); }
+    :host([status="new"]) { --status-color: var(--ds-color-status-new); }
+
+    /* ─── Border Element ─── */
+    .border {
+      background: var(--status-color, var(--ds-color-status-neutral));
+      width: 100%;
+      height: 100%;
+    }
+
+    /* ─── Vertical (default) ─── */
+    :host(:not([orientation="horizontal"])) {
+      width: 2px;
+      height: 100%;
+    }
+
+    :host(:not([orientation="horizontal"])[selected]) {
+      width: 4px;
+    }
+
+    /* ─── Horizontal ─── */
+    :host([orientation="horizontal"]) {
+      width: 100%;
+      height: 2px;
+    }
+
+    :host([orientation="horizontal"][selected]) {
+      height: 4px;
+    }
+
+    /* ─── Disabled ─── */
+    :host([disabled]) {
+      opacity: 0.5;
+    }
+  `;
+
+  constructor() {
+    super();
+    this.status = 'neutral';
+    this.orientation = 'vertical';
+    this.selected = false;
+    this.disabled = false;
+  }
+
+  render() {
+    return html`<div class="border" part="border"></div>`;
+  }
+}
+
+customElements.define('ds-status-border', DsStatusBorder);