@nuvia-ui/components 4.0.1

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

@@ -0,0 +1,242 @@
+import { html } from 'lit';
+import './ds-status-border.js';
+
+export default {
+  title: 'Components/StatusBorder',
+  component: 'ds-status-border',
+  tags: ['autodocs'],
+  argTypes: {
+    status: {
+      control: { type: 'select' },
+      options: [
+        'critical', 'danger', 'fail',
+        'warning-major', 'warning-minor',
+        'success', 'info', 'inprogress',
+        'pending', 'neutral', 'new'
+      ],
+      description: 'Status type'
+    },
+    orientation: {
+      control: { type: 'select' },
+      options: ['vertical', 'horizontal'],
+      description: 'Border orientation'
+    },
+    selected: {
+      control: 'boolean',
+      description: 'Increases thickness from 2px to 4px'
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Visually disables the border (opacity: 0.5)'
+    }
+  }
+};
+
+// ─── Playground ───
+export const Playground = {
+  args: {
+    status: 'critical',
+    orientation: 'vertical',
+    selected: false,
+    disabled: false
+  },
+  render: (args) => html`
+    <div style="position: relative; width: 200px; height: 100px; border: 1px solid var(--ds-color-border-default); border-radius: var(--ds-radius-container);">
+      <ds-status-border
+        status="${args.status}"
+        orientation="${args.orientation}"
+        ?selected="${args.selected}"
+        ?disabled="${args.disabled}"
+        style="position: absolute; left: 0; top: 0; ${args.orientation === 'vertical' ? 'bottom: 0;' : 'right: 0;'}"
+      ></ds-status-border>
+      <div style="padding: var(--ds-space-md); font: var(--ds-typo-content-body-regular);">
+        Status: <strong>${args.status}</strong>
+      </div>
+    </div>
+  `
+};
+
+// ─── All Statuses ───
+export const AllStatuses = {
+  render: () => {
+    const statuses = [
+      'critical', 'danger', 'fail',
+      'warning-major', 'warning-minor',
+      'success', 'info', 'inprogress',
+      'pending', 'neutral', 'new'
+    ];
+
+    return html`
+      <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px;">
+        ${statuses.map(status => html`
+          <div style="position: relative; height: 80px; border: 1px solid var(--ds-color-border-default); border-radius: var(--ds-radius-container);">
+            <ds-status-border
+              status="${status}"
+              style="position: absolute; left: 0; top: 0; bottom: 0;"
+            ></ds-status-border>
+            <div style="padding: var(--ds-space-md); font: var(--ds-typo-content-caption-bold);">
+              ${status}
+            </div>
+          </div>
+        `)}
+      </div>
+    `;
+  }
+};
+
+// ─── Orientations ───
+export const Orientations = {
+  render: () => html`
+    <div style="display: flex; gap: 24px; flex-direction: column;">
+      <div>
+        <p style="font: var(--ds-typo-content-caption-bold); color: var(--ds-color-text-secondary); margin: 0 0 8px;">Vertical</p>
+        <div style="position: relative; width: 200px; height: 100px; border: 1px solid var(--ds-color-border-default); border-radius: var(--ds-radius-container);">
+          <ds-status-border
+            status="critical"
+            orientation="vertical"
+            style="position: absolute; left: 0; top: 0; bottom: 0;"
+          ></ds-status-border>
+          <div style="padding: var(--ds-space-md); font: var(--ds-typo-content-body-regular);">
+            Vertical border
+          </div>
+        </div>
+      </div>
+
+      <div>
+        <p style="font: var(--ds-typo-content-caption-bold); color: var(--ds-color-text-secondary); margin: 0 0 8px;">Horizontal</p>
+        <div style="position: relative; width: 200px; height: 100px; border: 1px solid var(--ds-color-border-default); border-radius: var(--ds-radius-container);">
+          <ds-status-border
+            status="success"
+            orientation="horizontal"
+            style="position: absolute; left: 0; top: 0; right: 0;"
+          ></ds-status-border>
+          <div style="padding: var(--ds-space-md); padding-top: calc(var(--ds-space-md) + 8px); font: var(--ds-typo-content-body-regular);">
+            Horizontal border
+          </div>
+        </div>
+      </div>
+    </div>
+  `
+};
+
+// ─── Selected State ───
+export const SelectedState = {
+  render: () => html`
+    <div style="display: flex; gap: 24px;">
+      <div>
+        <p style="font: var(--ds-typo-content-caption-bold); color: var(--ds-color-text-secondary); margin: 0 0 8px;">Normal (2px)</p>
+        <div style="position: relative; width: 200px; height: 100px; border: 1px solid var(--ds-color-border-default); border-radius: var(--ds-radius-container);">
+          <ds-status-border
+            status="warning-major"
+            style="position: absolute; left: 0; top: 0; bottom: 0;"
+          ></ds-status-border>
+          <div style="padding: var(--ds-space-md); font: var(--ds-typo-content-body-regular);">
+            Default thickness
+          </div>
+        </div>
+      </div>
+
+      <div>
+        <p style="font: var(--ds-typo-content-caption-bold); color: var(--ds-color-text-secondary); margin: 0 0 8px;">Selected (4px)</p>
+        <div style="position: relative; width: 200px; height: 100px; border: 1px solid var(--ds-color-border-default); border-radius: var(--ds-radius-container);">
+          <ds-status-border
+            status="warning-major"
+            selected
+            style="position: absolute; left: 0; top: 0; bottom: 0;"
+          ></ds-status-border>
+          <div style="padding: var(--ds-space-md); font: var(--ds-typo-content-body-regular);">
+            Selected thickness
+          </div>
+        </div>
+      </div>
+    </div>
+  `
+};
+
+// ─── Composed in Card ───
+export const ComposedInCard = {
+  render: () => html`
+    <style>
+      .demo-card {
+        position: relative;
+        width: 300px;
+        min-height: 120px;
+        padding: var(--ds-space-md);
+        border: 1px solid var(--ds-color-border-default);
+        border-radius: var(--ds-radius-container);
+        background: var(--ds-color-bg-default);
+      }
+      .demo-card h3 {
+        margin: 0 0 var(--ds-space-sm);
+        font: var(--ds-typo-content-body-bold);
+        color: var(--ds-color-text-default);
+      }
+      .demo-card p {
+        margin: 0;
+        font: var(--ds-typo-content-body-regular);
+        color: var(--ds-color-text-secondary);
+      }
+    </style>
+
+    <div style="display: flex; gap: 16px; flex-direction: column;">
+      <div class="demo-card">
+        <ds-status-border status="critical" style="position: absolute; left: 0; top: 0; bottom: 0;"></ds-status-border>
+        <h3>Critical Alert</h3>
+        <p>System failure detected in production environment.</p>
+      </div>
+
+      <div class="demo-card">
+        <ds-status-border status="warning-major" style="position: absolute; left: 0; top: 0; bottom: 0;"></ds-status-border>
+        <h3>Warning</h3>
+        <p>High memory usage in container cluster.</p>
+      </div>
+
+      <div class="demo-card">
+        <ds-status-border status="success" style="position: absolute; left: 0; top: 0; bottom: 0;"></ds-status-border>
+        <h3>Deployment Successful</h3>
+        <p>All services running smoothly.</p>
+      </div>
+
+      <div class="demo-card">
+        <ds-status-border status="inprogress" style="position: absolute; left: 0; top: 0; bottom: 0;"></ds-status-border>
+        <h3>Build in Progress</h3>
+        <p>Compiling assets and running tests.</p>
+      </div>
+    </div>
+  `
+};
+
+// ─── Disabled State ───
+export const DisabledState = {
+  render: () => html`
+    <div style="display: flex; gap: 24px;">
+      <div>
+        <p style="font: var(--ds-typo-content-caption-bold); color: var(--ds-color-text-secondary); margin: 0 0 8px;">Normal</p>
+        <div style="position: relative; width: 200px; height: 100px; border: 1px solid var(--ds-color-border-default); border-radius: var(--ds-radius-container);">
+          <ds-status-border
+            status="critical"
+            style="position: absolute; left: 0; top: 0; bottom: 0;"
+          ></ds-status-border>
+          <div style="padding: var(--ds-space-md); font: var(--ds-typo-content-body-regular);">
+            Active border
+          </div>
+        </div>
+      </div>
+
+      <div>
+        <p style="font: var(--ds-typo-content-caption-bold); color: var(--ds-color-text-secondary); margin: 0 0 8px;">Disabled</p>
+        <div style="position: relative; width: 200px; height: 100px; border: 1px solid var(--ds-color-border-default); border-radius: var(--ds-radius-container);">
+          <ds-status-border
+            status="critical"
+            disabled
+            style="position: absolute; left: 0; top: 0; bottom: 0;"
+          ></ds-status-border>
+          <div style="padding: var(--ds-space-md); font: var(--ds-typo-content-body-regular); opacity: 0.5;">
+            Disabled border
+          </div>
+        </div>
+      </div>
+    </div>
+  `
+};
+

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

@@ -0,0 +1,168 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import './ds-status-border.js';
+
+describe('ds-status-border', () => {
+    let container;
+
+    beforeEach(() => {
+        container = document.createElement('div');
+        document.body.appendChild(container);
+    });
+
+    afterEach(() => {
+        container.remove();
+    });
+
+    async function createStatusBorder(attrs = {}) {
+        const attrStr = Object.entries(attrs)
+            .map(([k, v]) => {
+                if (typeof v === 'boolean') return v ? k : '';
+                return `${k}="${v}"`;
+            })
+            .filter(Boolean)
+            .join(' ');
+        container.innerHTML = `<ds-status-border ${attrStr}></ds-status-border>`;
+        const el = container.querySelector('ds-status-border');
+        await el.updateComplete;
+        return el;
+    }
+
+    // ─── Rendering ───
+
+    it('renders with default props', async () => {
+        const el = await createStatusBorder();
+        expect(el).toBeTruthy();
+        expect(el.status).toBe('neutral');
+        expect(el.orientation).toBe('vertical');
+        expect(el.selected).toBe(false);
+    });
+
+    it('renders border element', async () => {
+        const el = await createStatusBorder();
+        const border = el.shadowRoot.querySelector('.border');
+        expect(border).toBeTruthy();
+    });
+
+    // ─── Status Mapping ───
+
+    it('sets status attribute', async () => {
+        const el = await createStatusBorder({ status: 'critical' });
+        expect(el.getAttribute('status')).toBe('critical');
+    });
+
+    it('supports all status values', async () => {
+        const statuses = [
+            'critical', 'danger', 'fail',
+            'warning-major', 'warning-minor',
+            'success', 'info', 'inprogress',
+            'pending', 'neutral', 'new'
+        ];
+
+        for (const status of statuses) {
+            const el = await createStatusBorder({ status });
+            expect(el.getAttribute('status')).toBe(status);
+        }
+    });
+
+    // ─── Orientation ───
+
+    it('defaults to vertical orientation', async () => {
+        const el = await createStatusBorder();
+        expect(el.orientation).toBe('vertical');
+    });
+
+    it('supports horizontal orientation', async () => {
+        const el = await createStatusBorder({ orientation: 'horizontal' });
+        expect(el.getAttribute('orientation')).toBe('horizontal');
+    });
+
+    it('applies correct width for vertical orientation', async () => {
+        const el = await createStatusBorder({ orientation: 'vertical' });
+        const style = getComputedStyle(el);
+        expect(style.width).toBe('2px');
+    });
+
+    it('applies correct height for horizontal orientation', async () => {
+        const el = await createStatusBorder({ orientation: 'horizontal' });
+        const style = getComputedStyle(el);
+        expect(style.height).toBe('2px');
+    });
+
+    // ─── Selected State ───
+
+    it('applies selected attribute', async () => {
+        const el = await createStatusBorder({ selected: true });
+        expect(el.hasAttribute('selected')).toBe(true);
+    });
+
+    it('applies 4px width when selected (vertical)', async () => {
+        const el = await createStatusBorder({ orientation: 'vertical', selected: true });
+        const style = getComputedStyle(el);
+        expect(style.width).toBe('4px');
+    });
+
+    it('applies 4px height when selected (horizontal)', async () => {
+        const el = await createStatusBorder({ orientation: 'horizontal', selected: true });
+        const style = getComputedStyle(el);
+        expect(style.height).toBe('4px');
+    });
+
+    // ─── Property Changes ───
+
+    it('updates status dynamically', async () => {
+        const el = await createStatusBorder({ status: 'neutral' });
+        expect(el.status).toBe('neutral');
+
+        el.status = 'critical';
+        await el.updateComplete;
+        expect(el.getAttribute('status')).toBe('critical');
+    });
+
+    it('updates orientation dynamically', async () => {
+        const el = await createStatusBorder({ orientation: 'vertical' });
+        expect(el.orientation).toBe('vertical');
+
+        el.orientation = 'horizontal';
+        await el.updateComplete;
+        expect(el.getAttribute('orientation')).toBe('horizontal');
+    });
+
+    it('updates selected state dynamically', async () => {
+        const el = await createStatusBorder({ selected: false });
+        expect(el.selected).toBe(false);
+
+        el.selected = true;
+        await el.updateComplete;
+        expect(el.hasAttribute('selected')).toBe(true);
+    });
+
+    // ─── Disabled State ───
+
+    it('applies disabled attribute', async () => {
+        const el = await createStatusBorder({ disabled: true });
+        expect(el.hasAttribute('disabled')).toBe(true);
+    });
+
+    it('applies opacity when disabled', async () => {
+        const el = await createStatusBorder({ disabled: true });
+        const style = getComputedStyle(el);
+        expect(style.opacity).toBe('0.5');
+    });
+
+    it('updates disabled state dynamically', async () => {
+        const el = await createStatusBorder({ disabled: false });
+        expect(el.disabled).toBe(false);
+
+        el.disabled = true;
+        await el.updateComplete;
+        expect(el.hasAttribute('disabled')).toBe(true);
+    });
+
+    // ─── CSS Parts ───
+
+    it('exposes border part', async () => {
+        const el = await createStatusBorder();
+        const part = el.shadowRoot.querySelector('[part="border"]');
+        expect(part).toBeTruthy();
+    });
+});

package/src/ds-stepper/ds-stepper.a11y.test.js

@@ -0,0 +1,198 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import './ds-stepper.js';
+import '../ds-stepper-item/ds-stepper-item.js';
+
+const wait = (ms = 50) => new Promise(resolve => setTimeout(resolve, ms));
+
+describe('ds-stepper a11y', () => {
+    let container;
+
+    beforeEach(() => {
+        container = document.createElement('div');
+        document.body.appendChild(container);
+    });
+
+    afterEach(() => {
+        container.remove();
+    });
+
+    it('has role="group" on stepper container', async () => {
+        container.innerHTML = `
+            <ds-stepper>
+                <ds-stepper-item>Step 1</ds-stepper-item>
+            </ds-stepper>
+        `;
+        const el = container.querySelector('ds-stepper');
+        await wait();
+
+        expect(el.getAttribute('role')).toBe('group');
+    });
+
+    it('has default aria-label "Progress"', async () => {
+        container.innerHTML = `
+            <ds-stepper>
+                <ds-stepper-item>Step 1</ds-stepper-item>
+            </ds-stepper>
+        `;
+        const el = container.querySelector('ds-stepper');
+        await wait();
+
+        expect(el.getAttribute('aria-label')).toBe('Progress');
+    });
+
+    it('supports custom aria-label via label prop', async () => {
+        container.innerHTML = `
+            <ds-stepper label="Checkout Progress">
+                <ds-stepper-item>Step 1</ds-stepper-item>
+            </ds-stepper>
+        `;
+        const el = container.querySelector('ds-stepper');
+        await wait();
+
+        expect(el.getAttribute('aria-label')).toBe('Checkout Progress');
+    });
+
+    it('sets aria-current="step" on the current step', async () => {
+        container.innerHTML = `
+            <ds-stepper active-step="1">
+                <ds-stepper-item>Step 1</ds-stepper-item>
+                <ds-stepper-item>Step 2</ds-stepper-item>
+                <ds-stepper-item>Step 3</ds-stepper-item>
+            </ds-stepper>
+        `;
+        await wait();
+
+        const items = container.querySelectorAll('ds-stepper-item');
+        expect(items[0].getAttribute('aria-current')).toBeNull();
+        expect(items[1].getAttribute('aria-current')).toBe('step');
+        expect(items[2].getAttribute('aria-current')).toBeNull();
+    });
+
+    it('indicator has role="button" and tabindex when interactive', async () => {
+        container.innerHTML = `
+            <ds-stepper>
+                <ds-stepper-item>Step 1</ds-stepper-item>
+            </ds-stepper>
+        `;
+        await wait();
+
+        const item = container.querySelector('ds-stepper-item');
+        const indicator = item.shadowRoot.querySelector('.indicator');
+
+        expect(indicator.getAttribute('role')).toBe('button');
+        expect(indicator.getAttribute('tabindex')).toBe('0');
+    });
+
+    it('indicator has role="presentation" and tabindex=-1 when disabled', async () => {
+        container.innerHTML = `
+            <ds-stepper>
+                <ds-stepper-item disabled>Step 1</ds-stepper-item>
+            </ds-stepper>
+        `;
+        await wait();
+
+        const item = container.querySelector('ds-stepper-item');
+        const indicator = item.shadowRoot.querySelector('.indicator');
+
+        expect(indicator.getAttribute('role')).toBe('presentation');
+        expect(indicator.getAttribute('tabindex')).toBe('-1');
+    });
+
+    it('indicator has aria-label with step count', async () => {
+        container.innerHTML = `
+            <ds-stepper>
+                <ds-stepper-item>Step 1</ds-stepper-item>
+                <ds-stepper-item>Step 2</ds-stepper-item>
+                <ds-stepper-item>Step 3</ds-stepper-item>
+            </ds-stepper>
+        `;
+        await wait();
+
+        const items = container.querySelectorAll('ds-stepper-item');
+        const indicator = items[1].shadowRoot.querySelector('.indicator');
+
+        expect(indicator.getAttribute('aria-label')).toBe('Step 2 of 3');
+    });
+
+    it('indicator has aria-disabled for disabled steps', async () => {
+        container.innerHTML = `
+            <ds-stepper>
+                <ds-stepper-item disabled>Step 1</ds-stepper-item>
+            </ds-stepper>
+        `;
+        await wait();
+
+        const item = container.querySelector('ds-stepper-item');
+        const indicator = item.shadowRoot.querySelector('.indicator');
+
+        expect(indicator.getAttribute('aria-disabled')).toBe('true');
+    });
+
+    it('supports keyboard Enter on interactive step', async () => {
+        container.innerHTML = `
+            <ds-stepper>
+                <ds-stepper-item>Step 1</ds-stepper-item>
+                <ds-stepper-item>Step 2</ds-stepper-item>
+            </ds-stepper>
+        `;
+        await wait();
+
+        const el = container.querySelector('ds-stepper');
+        const items = container.querySelectorAll('ds-stepper-item');
+
+        let eventDetail = null;
+        el.addEventListener('ds-change', (e) => {
+            eventDetail = e.detail;
+        });
+
+        const indicator = items[1].shadowRoot.querySelector('.indicator');
+        indicator.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true, composed: true }));
+        await wait();
+
+        expect(eventDetail).not.toBeNull();
+        expect(eventDetail.currentStep).toBe(1);
+    });
+
+    it('supports keyboard Space on interactive step', async () => {
+        container.innerHTML = `
+            <ds-stepper>
+                <ds-stepper-item>Step 1</ds-stepper-item>
+                <ds-stepper-item>Step 2</ds-stepper-item>
+            </ds-stepper>
+        `;
+        await wait();
+
+        const el = container.querySelector('ds-stepper');
+        const items = container.querySelectorAll('ds-stepper-item');
+
+        let eventDetail = null;
+        el.addEventListener('ds-change', (e) => {
+            eventDetail = e.detail;
+        });
+
+        const indicator = items[1].shadowRoot.querySelector('.indicator');
+        indicator.dispatchEvent(new KeyboardEvent('keydown', { key: ' ', bubbles: true, composed: true }));
+        await wait();
+
+        expect(eventDetail).not.toBeNull();
+        expect(eventDetail.currentStep).toBe(1);
+    });
+
+    it('linear-locked steps are not interactive', async () => {
+        container.innerHTML = `
+            <ds-stepper linear active-step="0">
+                <ds-stepper-item>Step 1</ds-stepper-item>
+                <ds-stepper-item>Step 2</ds-stepper-item>
+                <ds-stepper-item>Step 3</ds-stepper-item>
+            </ds-stepper>
+        `;
+        await wait();
+
+        const items = container.querySelectorAll('ds-stepper-item');
+        // Step 3 should be locked (not completed, not current)
+        const indicator3 = items[2].shadowRoot.querySelector('.indicator');
+
+        expect(indicator3.getAttribute('role')).toBe('presentation');
+        expect(indicator3.getAttribute('tabindex')).toBe('-1');
+    });
+});