@nuvia-ui/components 4.0.1

package/src/ds-pagination/ds-pagination.js

@@ -0,0 +1,232 @@
+import { LitElement, html, css } from 'lit';
+import '../ds-icon-button/ds-icon-button.js';
+import '../ds-input/ds-input.js';
+
+/**
+ * Pagination component for navigating through multiple pages of content.
+ *
+ * @element ds-pagination
+ *
+ * @prop {number} total - Total number of pages (required).
+ * @prop {number} current - Current active page (default: 1).
+ * @prop {string} variant - Pagination style: 'default' | 'dot' (default: 'default').
+ *
+ * @fires ds-change - Fired when the page changes. Detail: { page: number }
+ */
+export class DsPagination extends LitElement {
+  static properties = {
+    total: { type: Number },
+    current: { type: Number },
+    variant: { type: String }
+  };
+
+  static styles = css`
+    :host {
+      display: inline-block;
+      vertical-align: middle;
+    }
+
+    /* Reset & Base Layout */
+    .ds-pagination {
+      display: block;
+    }
+
+    .ds-pagination__list {
+      display: flex;
+      align-items: center;
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      gap: var(--ds-space-xs, 4px); /* Base 4px gap between most items */
+    }
+
+    .ds-pagination__item {
+      display: flex;
+      align-items: center;
+    }
+
+    /* Input Group Specifics (Default Variant) */
+    
+    /* The item containing the input group needs extra spacing */
+    .ds-pagination__item--input {
+      margin: 0 var(--ds-space-xs, 4px); /* Adds 4px extra on each side. Total gap = 4px(gap) + 4px(margin) = 8px */
+    }
+
+    .ds-pagination__input-group {
+      display: flex;
+      align-items: center;
+      gap: var(--ds-space-sm, 8px); /* Space between Input and Total Text */
+    }
+
+    .ds-pagination__text {
+      font: var(--ds-typo-content-body-regular);
+      color: var(--ds-color-text-default);
+      white-space: nowrap;
+    }
+
+    /* Screen reader only - for live region */
+    .sr-only {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+      border: 0;
+    }
+
+    /* Dot Variant Specifics */
+    .variant-dot .ds-pagination__list {
+      gap: var(--ds-space-xs, 4px);
+    }
+
+    .variant-dot ds-icon-button::part(button) {
+      color: var(--ds-color-icon-secondary);
+    }
+  `;
+
+  constructor() {
+    super();
+    this.total = 1;
+    this.current = 1;
+    this.variant = 'default';
+  }
+
+  _dispatchChange(newPage) {
+    if (newPage >= 1 && newPage <= this.total && newPage !== this.current) {
+      this.current = newPage;
+      this.dispatchEvent(new CustomEvent('ds-change', {
+        detail: { page: this.current },
+        bubbles: true,
+        composed: true
+      }));
+    }
+  }
+
+  _handleFirst() { this._dispatchChange(1); }
+  _handlePrev() { this._dispatchChange(this.current - 1); }
+  _handleNext() { this._dispatchChange(this.current + 1); }
+  _handleLast() { this._dispatchChange(this.total); }
+
+  _handleInputFocus(e) {
+    // Use new public API instead of shadow DOM access
+    e.target.selectAll();
+  }
+
+  _handleInputChange(e) {
+    // ds-input now handles clamping via min/max/clamp props
+    // We just need to dispatch the change if value differs
+    const val = parseInt(e.target.value, 10);
+
+    if (!isNaN(val) && val !== this.current) {
+      this._dispatchChange(val);
+    }
+  }
+
+  renderDefault() {
+    return html`
+      <nav class="ds-pagination" aria-label="Pagination">
+        <ul class="ds-pagination__list">
+          <li class="ds-pagination__item">
+            <ds-icon-button
+              icon="first-page"
+              variant="action"
+              size="m"
+              ?disabled=${this.current === 1}
+              aria-label="First page"
+              @click=${this._handleFirst}
+            ></ds-icon-button>
+          </li>
+          <li class="ds-pagination__item">
+            <ds-icon-button
+              icon="chevron-left"
+              variant="action"
+              size="m"
+              ?disabled=${this.current === 1}
+              aria-label="Previous page"
+              @click=${this._handlePrev}
+            ></ds-icon-button>
+          </li>
+
+          <li class="ds-pagination__item ds-pagination__item--input">
+            <div class="ds-pagination__input-group">
+              <ds-input
+                class="page-input"
+                type="number"
+                width="60px"
+                text-align="center"
+                hide-steppers
+                autocomplete="off"
+                min="1"
+                .max=${this.total}
+                clamp
+                .value=${this.current.toString()}
+                aria-label="Current page"
+                @change=${this._handleInputChange}
+                @focus=${this._handleInputFocus}
+              ></ds-input>
+              <span class="ds-pagination__text">/ ${this.total}</span>
+            </div>
+          </li>
+
+          <li class="ds-pagination__item">
+            <ds-icon-button
+              icon="chevron-right"
+              variant="action"
+              size="m"
+              ?disabled=${this.current === this.total}
+              aria-label="Next page"
+              @click=${this._handleNext}
+            ></ds-icon-button>
+          </li>
+          <li class="ds-pagination__item">
+            <ds-icon-button
+              icon="last-page"
+              variant="action"
+              size="m"
+              ?disabled=${this.current === this.total}
+              aria-label="Last page"
+              @click=${this._handleLast}
+            ></ds-icon-button>
+          </li>
+        </ul>
+        
+        <!-- Live region for accessibility -->
+        <span class="sr-only" role="status" aria-live="polite">
+          Page ${this.current} of ${this.total}
+        </span>
+      </nav>
+    `;
+  }
+
+  renderDot() {
+    const pages = Array.from({ length: this.total }, (_, i) => i + 1);
+
+    return html`
+      <nav class="ds-pagination variant-dot" aria-label="Pagination">
+        <ul class="ds-pagination__list">
+          ${pages.map(page => html`
+            <li class="ds-pagination__item">
+              <ds-icon-button
+                icon=${page === this.current ? 'circle-filled' : 'circle'}
+                variant="action"
+                size="m"
+                aria-label="Page ${page}"
+                aria-current=${page === this.current ? 'page' : 'false'}
+                @click=${() => this._dispatchChange(page)}
+              ></ds-icon-button>
+            </li>
+          `)}
+        </ul>
+      </nav>
+    `;
+  }
+
+  render() {
+    return this.variant === 'dot' ? this.renderDot() : this.renderDefault();
+  }
+}
+
+customElements.define('ds-pagination', DsPagination);

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

@@ -0,0 +1,63 @@
+import { html } from 'lit';
+import './ds-pagination.js';
+
+export default {
+    title: 'Components/Pagination',
+    component: 'ds-pagination',
+    parameters: {
+        actions: {
+            handles: ['ds-change'],
+        },
+    },
+    argTypes: {
+        total: { control: 'number' },
+        current: { control: 'number' },
+        variant: {
+            control: { type: 'select' },
+            options: ['default', 'dot'],
+        },
+    },
+};
+
+const Template = (args) => html`
+  <ds-pagination
+    .total=${args.total}
+    .current=${args.current}
+    .variant=${args.variant}
+  ></ds-pagination>
+`;
+
+export const Default = Template.bind({});
+Default.args = {
+    total: 10,
+    current: 1,
+    variant: 'default',
+};
+
+export const MiddlePage = Template.bind({});
+MiddlePage.args = {
+    total: 10,
+    current: 5,
+    variant: 'default',
+};
+
+export const LastPage = Template.bind({});
+LastPage.args = {
+    total: 10,
+    current: 10,
+    variant: 'default',
+};
+
+export const DotVariant = Template.bind({});
+DotVariant.args = {
+    total: 5,
+    current: 1,
+    variant: 'dot',
+};
+
+export const DotVariantMax = Template.bind({});
+DotVariantMax.args = {
+    total: 6,
+    current: 3,
+    variant: 'dot',
+};

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

@@ -0,0 +1,141 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import './ds-pagination.js';
+
+describe('ds-pagination', () => {
+    let container;
+
+    beforeEach(() => {
+        container = document.createElement('div');
+        document.body.appendChild(container);
+    });
+
+    afterEach(() => {
+        container.remove();
+    });
+
+    it('should render default variant with correct initial state', async () => {
+        container.innerHTML = '<ds-pagination total="10"></ds-pagination>';
+        const el = container.querySelector('ds-pagination');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        const nav = el.shadowRoot.querySelector('nav.ds-pagination');
+        expect(nav).to.exist;
+
+        const list = el.shadowRoot.querySelector('ul.ds-pagination__list');
+        expect(list).to.exist;
+
+        const buttons = el.shadowRoot.querySelectorAll('ds-icon-button');
+        expect(buttons.length).toBe(4); // First, Prev, Next, Last
+
+        expect(buttons[0].hasAttribute('disabled')).toBe(true);
+        expect(buttons[1].hasAttribute('disabled')).toBe(true);
+        expect(buttons[2].hasAttribute('disabled')).toBe(false);
+        expect(buttons[3].hasAttribute('disabled')).toBe(false);
+
+        const input = el.shadowRoot.querySelector('ds-input');
+        expect(input.getAttribute('type')).toBe('number');
+        expect(input.hasAttribute('hide-steppers')).toBe(true);
+        expect(input.value).toBe('1');
+    });
+
+    it('should handle navigation via buttons', async () => {
+        container.innerHTML = '<ds-pagination total="10" current="5"></ds-pagination>';
+        const el = container.querySelector('ds-pagination');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        const buttons = el.shadowRoot.querySelectorAll('ds-icon-button');
+
+        // Next button (index 2)
+        buttons[2].click();
+        await new Promise(resolve => setTimeout(resolve, 0));
+        expect(el.current).toBe(6);
+
+        // Prev button (index 1)
+        buttons[1].click();
+        await new Promise(resolve => setTimeout(resolve, 0));
+        expect(el.current).toBe(5);
+    });
+
+    it('should handle input change (valid number)', async () => {
+        container.innerHTML = '<ds-pagination total="10"></ds-pagination>';
+        const el = container.querySelector('ds-pagination');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        const input = el.shadowRoot.querySelector('ds-input');
+        input.value = '5';
+        input.dispatchEvent(new CustomEvent('change', { detail: { value: '5' } }));
+
+        await new Promise(resolve => setTimeout(resolve, 0));
+        expect(el.current).toBe(5);
+    });
+
+    it('should clamp input values via ds-input clamp prop', async () => {
+        container.innerHTML = '<ds-pagination total="10" current="5"></ds-pagination>';
+        const el = container.querySelector('ds-pagination');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        const input = el.shadowRoot.querySelector('ds-input');
+        const nativeInput = input.shadowRoot.querySelector('input');
+
+        // Assert autocomplete off
+        expect(input.getAttribute('autocomplete')).toBe('off');
+
+        // Assert width and clamp props are set
+        expect(input.getAttribute('width')).toBe('60px');
+        expect(input.hasAttribute('clamp')).toBe(true);
+        expect(input.getAttribute('min')).toBe('1');
+
+        // Test max clamp (ds-input clamps on blur)
+        nativeInput.value = '15';
+        input.value = '15';
+        nativeInput.dispatchEvent(new Event('blur'));
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        // ds-input should have clamped the value to max (10)
+        expect(input.value).toBe('10');
+
+        // Test min clamp
+        nativeInput.value = '0';
+        input.value = '0';
+        nativeInput.dispatchEvent(new Event('blur'));
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        expect(input.value).toBe('1');
+    });
+
+    it('should clamp on Enter key via ds-input', async () => {
+        container.innerHTML = '<ds-pagination total="10"></ds-pagination>';
+        const el = container.querySelector('ds-pagination');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        const input = el.shadowRoot.querySelector('ds-input');
+        const nativeInput = input.shadowRoot.querySelector('input');
+
+        // Type an out-of-range value
+        nativeInput.value = '99';
+        input.value = '99';
+
+        // Press Enter - ds-input should clamp
+        nativeInput.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        // Input should be clamped to max
+        expect(input.value).toBe('10');
+    });
+
+    it('should render dot variant', async () => {
+        container.innerHTML = '<ds-pagination variant="dot" total="5"></ds-pagination>';
+        const el = container.querySelector('ds-pagination');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        const nav = el.shadowRoot.querySelector('nav.variant-dot');
+        expect(nav).to.exist;
+
+        const dots = el.shadowRoot.querySelectorAll('ds-icon-button');
+        expect(dots.length).toBe(5);
+
+        // Default current is 1 (index 0)
+        expect(dots[0].getAttribute('icon')).toBe('circle-filled');
+        expect(dots[1].getAttribute('icon')).toBe('circle');
+    });
+});

package/src/ds-pagination/index.js

@@ -0,0 +1 @@
+export { DsPagination } from './ds-pagination.js';

package/src/ds-progress-bar/ds-progress-bar.a11y.test.js

@@ -0,0 +1,25 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import axe from 'axe-core';
+import './ds-progress-bar.js';
+
+describe('ds-progress-bar a11y', () => {
+    let container;
+
+    beforeEach(() => {
+        container = document.createElement('div');
+        document.body.appendChild(container);
+    });
+
+    afterEach(() => {
+        container.remove();
+    });
+
+    it('passes accessibility checks', async () => {
+        container.innerHTML = '<ds-progress-bar value="50" label="Loading content"></ds-progress-bar>';
+        const el = container.querySelector('ds-progress-bar');
+        await new Promise(r => setTimeout(r, 50));
+
+        const results = await axe.run(el);
+        expect(results.violations.length).toBe(0);
+    });
+});

package/src/ds-progress-bar/ds-progress-bar.js

@@ -0,0 +1,81 @@
+import { LitElement, html, css } from 'lit';
+
+/**
+ * @element ds-progress-bar
+ * @summary A linear progress bar component.
+ *
+ * @prop {number} value - Current progress value. Default: 0.
+ * @prop {number} max - Maximum progress value. Default: 100.
+ * @prop {string} status - 'default' | 'error' | 'finished'. Default: 'default'.
+ * @prop {string} label - Accessible label.
+ */
+export class DsProgressBar extends LitElement {
+  static properties = {
+    value: { type: Number },
+    max: { type: Number },
+    status: { type: String, reflect: true },
+    label: { type: String },
+  };
+
+  static styles = css`
+    :host {
+      display: block;
+      width: 100%;
+    }
+
+    .progress-track {
+      background-color: var(--ds-color-border-default);
+      height: 4px;
+      border-radius: var(--ds-radius-container, 0px); /* Sharp / Container radius */
+      overflow: hidden;
+      width: 100%;
+    }
+
+    .progress-indicator {
+      height: 100%;
+      background-color: var(--ds-color-border-brand);
+      transition: width 0.2s ease-in-out;
+      width: 0%;
+    }
+
+    /* ERROR STATUS */
+    :host([status="error"]) .progress-indicator {
+      background-color: var(--ds-color-border-error);
+    }
+  `;
+
+  constructor() {
+    super();
+    this.value = 0;
+    this.max = 100;
+    this.status = 'default';
+  }
+
+  render() {
+    const max = (this.max && this.max > 0) ? this.max : 100;
+    const value = this.value || 0;
+
+    let percentage = Math.min(100, Math.max(0, (value / max) * 100));
+
+    if (this.status === 'finished') {
+      percentage = 100;
+    }
+
+    return html`
+      <div 
+        role="progressbar"
+        class="progress-track"
+        aria-valuenow="${this.status === 'finished' ? max : value}"
+        aria-valuemin="0"
+        aria-valuemax="${max}"
+        aria-label="${this.label || ''}"
+      >
+        <div class="progress-indicator" style="width: ${percentage}%;"></div>
+      </div>
+    `;
+  }
+}
+
+if (!customElements.get('ds-progress-bar')) {
+  customElements.define('ds-progress-bar', DsProgressBar);
+}

package/src/ds-progress-bar/ds-progress-bar.stories.js

@@ -0,0 +1,69 @@
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import './ds-progress-bar.js';
+
+export default {
+    title: 'Components/Progress Bar',
+    component: 'ds-progress-bar',
+    argTypes: {
+        value: { control: 'number' },
+        max: { control: 'number' },
+        status: {
+            control: 'select',
+            options: ['default', 'error', 'finished']
+        },
+        label: { control: 'text' }
+    },
+};
+
+const Template = (args) => html`
+  <div style="width: 300px;">
+    <ds-progress-bar 
+      .value=${args.value} 
+      .max=${args.max} 
+      .status=${ifDefined(args.status)}
+      label=${ifDefined(args.label)}
+    ></ds-progress-bar>
+  </div>
+`;
+
+export const Default = Template.bind({});
+Default.args = {
+    value: 50,
+    max: 100,
+    status: 'default',
+    label: 'Loading...',
+};
+
+export const Full = Template.bind({});
+Full.args = {
+    value: 100,
+    max: 100,
+    status: 'default',
+};
+
+export const Empty = Template.bind({});
+Empty.args = {
+    value: 0,
+    max: 100,
+};
+
+export const ErrorState = Template.bind({});
+ErrorState.args = {
+    value: 75,
+    max: 100,
+    status: 'error',
+    label: 'Upload Failed',
+};
+
+export const LargeScale = Template.bind({});
+LargeScale.args = {
+    value: 450,
+    max: 1000,
+    status: 'default',
+    label: 'Processing Items',
+};
+LargeScale.argTypes = {
+    value: { control: { type: 'range', min: 0, max: 1000, step: 10 } },
+    max: { control: { type: 'number' } }
+};

package/src/ds-progress-bar/ds-progress-bar.test.js

@@ -0,0 +1,60 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import './ds-progress-bar.js';
+
+describe('ds-progress-bar', () => {
+    let container;
+
+    beforeEach(() => {
+        container = document.createElement('div');
+        document.body.appendChild(container);
+    });
+
+    afterEach(() => {
+        container.remove();
+    });
+
+    it('renders with default values', async () => {
+        container.innerHTML = '<ds-progress-bar></ds-progress-bar>';
+        const el = container.querySelector('ds-progress-bar');
+        await new Promise(r => setTimeout(r, 50));
+
+        const track = el.shadowRoot.querySelector('.progress-track');
+        expect(track).toBeTruthy();
+        expect(track.getAttribute('role')).toBe('progressbar');
+        expect(track.getAttribute('aria-valuenow')).toBe('0');
+    });
+
+    it('reflects value updates in width', async () => {
+        container.innerHTML = '<ds-progress-bar value="50" max="100"></ds-progress-bar>';
+        const el = container.querySelector('ds-progress-bar');
+        await new Promise(r => setTimeout(r, 50));
+
+        const indicator = el.shadowRoot.querySelector('.progress-indicator');
+        expect(indicator.style.width).toBe('50%');
+    });
+
+    it('calculates percentage correctly with custom max', async () => {
+        container.innerHTML = '<ds-progress-bar value="50" max="200"></ds-progress-bar>';
+        const el = container.querySelector('ds-progress-bar');
+        await new Promise(r => setTimeout(r, 50));
+
+        const indicator = el.shadowRoot.querySelector('.progress-indicator');
+        // 50 / 200 = 25%
+        expect(indicator.style.width).toBe('25%');
+    });
+
+    it('applies error styling', async () => {
+        container.innerHTML = '<ds-progress-bar status="error"></ds-progress-bar>';
+        const el = container.querySelector('ds-progress-bar');
+        await new Promise(r => setTimeout(r, 50));
+
+        // We check if the attribute is reflected (Lit reflect: true)
+        expect(el.getAttribute('status')).toBe('error');
+
+        // We can also check computed style if needed, but checking the attribute reflection is usually enough for the test if the CSS relies on :host([status="error"])
+        const indicator = el.shadowRoot.querySelector('.progress-indicator');
+        const style = getComputedStyle(indicator);
+        // Since we are not in a full browser environment with variables loaded, checking the exact color might be tricky unless mocked. 
+        // Verification of logic is sufficient here.
+    });
+});