@nuvia-ui/components 4.0.1

package/src/ds-breadcrumbs/ds-breadcrumbs.js

@@ -0,0 +1,194 @@
+import { LitElement, html, css } from 'lit';
+
+/**
+ * @element ds-breadcrumbs
+ * @summary A navigation container for breadcrumb items.
+ *
+ * @slot - Default slot for ds-breadcrumb-item elements.
+ */
+export class DsBreadcrumbs extends LitElement {
+  static properties = {
+    mode: { type: String, reflect: true },
+    expanded: { type: Boolean, reflect: true }
+  };
+
+  static styles = css`
+    :host {
+      display: block;
+      width: 100%;
+    }
+
+    ol {
+      display: flex;
+      flex-wrap: wrap;
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      align-items: center;
+      gap: var(--ds-space-sm, 8px); 
+    }
+
+    /* Scroll Mode, Collapse Mode, and formatting */
+    :host([mode="scroll"]) ol,
+    :host([mode="collapse"]) ol {
+      flex-wrap: nowrap;
+    }
+    
+    /* When expanded in collapse mode: ALWAYS scroll */
+    :host([mode="collapse"][expanded]) ol {
+       flex-wrap: nowrap;
+       overflow-x: auto;
+    }
+
+    :host([mode="scroll"]) ol,
+    :host([mode="collapse"]:not([expanded])) ol {
+      overflow-x: auto;
+      white-space: nowrap;
+      scrollbar-width: none;
+    }
+    
+    /* Hide scrollbar for strictly scrolled views (collapsed state) */
+    :host([mode="scroll"]) ol::-webkit-scrollbar,
+    :host([mode="collapse"]:not([expanded])) ol::-webkit-scrollbar {
+      display: none;
+    }
+
+    /* Prevent shrinking */
+    :host([mode="scroll"]) ::slotted(ds-breadcrumb-item),
+    :host([mode="collapse"]) ::slotted(ds-breadcrumb-item) {
+      flex-shrink: 0;
+    }
+
+    /* Hide the separator of the last item */
+    ::slotted(ds-breadcrumb-item:last-child) {
+      --ds-breadcrumb-separator-display: none;
+    }
+  `;
+
+  constructor() {
+    super();
+    this.mode = 'wrap';
+    this.expanded = false;
+    this._resizeObserver = null;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener('ds-expand', this._handleExpand);
+
+    this.updateComplete.then(() => {
+      this._setupResizeObserver();
+    });
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener('ds-expand', this._handleExpand);
+    if (this._resizeObserver) {
+      this._resizeObserver.disconnect();
+    }
+  }
+
+  updated(changedProperties) {
+    if (changedProperties.has('mode')) {
+      this.expanded = false;
+
+      if (this.mode === 'collapse') {
+        this._setupResizeObserver();
+        this._checkOverflow();
+      } else {
+        if (this._resizeObserver) {
+          this._resizeObserver.disconnect();
+          this._resizeObserver = null;
+        }
+        this._resetItems();
+      }
+    }
+
+    if (changedProperties.has('expanded') && this.expanded) {
+      // If expanded changed to true, ensured items are visible
+      this._resetItems();
+    }
+  }
+
+  _setupResizeObserver() {
+    if (this.mode !== 'collapse') return;
+    if (this._resizeObserver) return;
+
+    this._resizeObserver = new ResizeObserver((entries) => {
+      window.requestAnimationFrame(() => {
+        if (!this.expanded) {
+          this._checkOverflow();
+        }
+      });
+    });
+    this._resizeObserver.observe(this);
+  }
+
+  _checkOverflow() {
+    if (this.mode !== 'collapse' || this.expanded) return;
+
+    const ol = this.shadowRoot.querySelector('ol');
+    if (!ol) return;
+
+    // 1. Reset to full width to measure
+    this._resetItems();
+
+    // 2. Check if overflowing
+    if (Math.round(ol.scrollWidth) > Math.round(ol.clientWidth)) {
+      this._applyCollapse();
+    }
+  }
+
+  _resetItems() {
+    const slot = this.shadowRoot.querySelector('slot');
+    if (!slot) return;
+
+    const items = slot.assignedElements();
+    items.forEach(item => {
+      item.style.display = '';
+      item.removeAttribute('collapsed');
+    });
+  }
+
+  _applyCollapse() {
+    const slot = this.shadowRoot.querySelector('slot');
+    if (!slot) return;
+
+    const items = slot.assignedElements();
+    if (items.length <= 2) return;
+
+    // Logic: Keep First, Keep Last. Transform [1] to trigger. Hide others.
+    const trigger = items[1];
+    const last = items[items.length - 1];
+
+    if (!trigger || trigger === last) return;
+
+    trigger.setAttribute('collapsed', '');
+
+    for (let i = 2; i < items.length - 1; i++) {
+      items[i].style.display = 'none';
+    }
+  }
+
+  _handleExpand() {
+    if (this.mode === 'collapse') {
+      this._manuallyExpanded = true;
+      this._resetItems();
+    }
+  }
+
+  render() {
+    return html`
+      <nav aria-label="Breadcrumb">
+        <ol>
+          <slot></slot>
+        </ol>
+      </nav>
+    `;
+  }
+}
+
+if (!customElements.get('ds-breadcrumbs')) {
+  customElements.define('ds-breadcrumbs', DsBreadcrumbs);
+}

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

@@ -0,0 +1,54 @@
+import { html } from 'lit';
+import './ds-breadcrumbs.js';
+import '../ds-breadcrumb-item/ds-breadcrumb-item.js';
+
+export default {
+  title: 'Components/Breadcrumbs',
+  component: 'ds-breadcrumbs',
+  argTypes: {
+    mode: {
+      control: { type: 'select' },
+      options: ['wrap', 'scroll', 'collapse']
+    },
+
+  },
+};
+
+export const Playground = (args) => html`
+  <div style="max-width: 800px; border: 1px dashed #ccc; padding: 1rem; resize: horizontal; overflow: hidden; height: 100px; width: 100%;">
+    <ds-breadcrumbs mode="${args.mode || 'wrap'}">
+      <ds-breadcrumb-item href="/" label="Home"></ds-breadcrumb-item>
+      <ds-breadcrumb-item href="/level1" label="Level 1"></ds-breadcrumb-item>
+      <ds-breadcrumb-item href="/level2" label="Level 2"></ds-breadcrumb-item>
+      <ds-breadcrumb-item href="/level3" label="Level 3"></ds-breadcrumb-item>
+      <ds-breadcrumb-item href="/level4" label="Level 4"></ds-breadcrumb-item>
+      <ds-breadcrumb-item href="/level5" label="Level 5"></ds-breadcrumb-item>
+      <ds-breadcrumb-item href="/level6" label="Level 6"></ds-breadcrumb-item>
+      <ds-breadcrumb-item href="/level7" label="Level 7"></ds-breadcrumb-item>
+      <ds-breadcrumb-item label="Current Page" current></ds-breadcrumb-item>
+    </ds-breadcrumbs>
+  </div>
+  <p style="font-size: 12px; color: #666; margin-top: 8px;">
+    <strong>Current Mode:</strong> ${args.mode}<br>
+    Resize the dashed box to test responsive behaviors. If in collapse mode, click '...' to expand (will scroll).
+  </p>
+`;
+Playground.args = {
+  mode: 'collapse',
+};
+
+export const Default = () => html`
+  <ds-breadcrumbs>
+    <ds-breadcrumb-item href="/" label="Home"></ds-breadcrumb-item>
+    <ds-breadcrumb-item href="/components" label="Components"></ds-breadcrumb-item>
+    <ds-breadcrumb-item label="Breadcrumbs" current></ds-breadcrumb-item>
+  </ds-breadcrumbs>
+`;
+
+export const TrailingLink = () => html`
+  <ds-breadcrumbs>
+    <ds-breadcrumb-item href="/" label="Home"></ds-breadcrumb-item>
+    <ds-breadcrumb-item href="/section" label="Section"></ds-breadcrumb-item>
+    <ds-breadcrumb-item href="/page" label="Page Label (Link)"></ds-breadcrumb-item>
+  </ds-breadcrumbs>
+`;

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

@@ -0,0 +1,33 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import './ds-breadcrumbs.js';
+import '../ds-breadcrumb-item/ds-breadcrumb-item.js';
+
+describe('ds-breadcrumbs', () => {
+    let container;
+
+    beforeEach(() => {
+        container = document.createElement('div');
+        document.body.appendChild(container);
+    });
+
+    afterEach(() => {
+        container.remove();
+    });
+
+    it('renders accessible navigation structure', async () => {
+        container.innerHTML = `
+            <ds-breadcrumbs>
+                <ds-breadcrumb-item href="#" label="Home"></ds-breadcrumb-item>
+            </ds-breadcrumbs>
+        `;
+        const el = container.querySelector('ds-breadcrumbs');
+        await new Promise(r => setTimeout(r, 50));
+
+        const nav = el.shadowRoot.querySelector('nav');
+        expect(nav).toBeTruthy();
+        expect(nav.getAttribute('aria-label')).toBe('Breadcrumb');
+
+        const ol = el.shadowRoot.querySelector('ol');
+        expect(ol).toBeTruthy();
+    });
+});

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

@@ -0,0 +1,49 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import axe from 'axe-core';
+import './ds-button.js';
+
+describe('ds-button a11y', () => {
+    let container;
+
+    beforeEach(() => {
+        container = document.createElement('div');
+        document.body.appendChild(container);
+    });
+
+    afterEach(() => {
+        container.remove();
+    });
+
+    it('should pass axe accessibility checks for all variants', async () => {
+        const variants = ['primary', 'secondary', 'outline', 'action', 'tertiary'];
+
+        // Disable color-contrast rule for now since we are in a test environment without full styles context
+        // and some tokens might not evaluate to actual colors if CSS vars aren't fully resolved in JSDOM
+        const options = {
+            rules: {
+                'color-contrast': { enabled: false }
+            }
+        };
+
+        for (const variant of variants) {
+            container.innerHTML = `<ds-button variant="${variant}">Button</ds-button>`;
+            await new Promise(resolve => setTimeout(resolve, 100));
+
+            const results = await axe.run(container, options);
+            if (results.violations.length > 0) {
+                console.log(`Violations for ${variant}:`, JSON.stringify(results.violations, null, 2));
+            }
+            expect(results.violations).toHaveLength(0);
+        }
+    });
+
+    it('should be accessible when disabled', async () => {
+        container.innerHTML = '<ds-button disabled>Disabled Button</ds-button>';
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const results = await axe.run(container, {
+            rules: { 'color-contrast': { enabled: false } }
+        });
+        expect(results.violations).toHaveLength(0);
+    });
+});

package/src/ds-button/ds-button.js

@@ -0,0 +1,205 @@
+import { LitElement, html, css } from 'lit';
+
+/**
+ * Button component for the Design System
+ * 
+ * @element ds-button
+ * 
+ * @prop {string} variant - Button style variant: 'primary' | 'secondary' | 'outline' | 'action' | 'tertiary' (default: 'primary')
+ * @prop {boolean} disabled - Whether the button is disabled
+ * 
+ * @slot - Button label content
+ * @slot icon-start - Icon to display before the label
+ * @slot icon-end - Icon to display after the label
+ */
+export class DsButton extends LitElement {
+  static properties = {
+    variant: { type: String, reflect: true },
+    disabled: { type: Boolean, reflect: true }
+  };
+
+  static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };
+
+  static styles = css`
+    :host {
+      display: inline-block;
+      vertical-align: middle;
+    }
+    
+    :host([full-width]) {
+      display: block;
+      width: 100%;
+    }
+    
+    :host([full-width]) button,
+    :host([style*="width: 100%"]) button { 
+       width: 100%;
+    }
+
+    button {
+      appearance: none;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      /* Layout */
+      /* Height = 20px (line-height) + 10px (padding-y) + 2px (border) = 32px */
+      /* Padding calculation to achieve 32px height: 
+         Target 32px - 20px (line-height) - 2px (border) = 10px total vertical padding
+         Top/Bottom padding = 5px
+      */
+      padding: 5px var(--ds-space-sm); 
+      border: 1px solid transparent; /* Always present border to maintain layout consistency */
+      border-radius: var(--ds-radius-action, 999px);
+      background: transparent;
+      width: 100%;
+      
+      /* Typography */
+      color: inherit;
+      font: var(--ds-typo-content-body-bold);
+      text-decoration: none;
+      
+      /* Interaction */
+      cursor: pointer;
+      appearance: none;
+      box-sizing: border-box;
+      transition: background-color 0.2s, color 0.2s, border-color 0.2s;
+    }
+
+    /* Label slot wrapper */
+    .label {
+      padding: 0 var(--ds-space-xs); /* 4px horizontal padding */
+    }
+
+    /* Disabled state */
+    :host([disabled]) button {
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+    
+    :host([disabled]) {
+      pointer-events: none;
+    }
+
+    /* Focus */
+    button:focus-visible {
+      outline: 2px solid var(--ds-color-border-focus);
+      outline-offset: 2px;
+    }
+
+    /* 
+     * VARIANTS 
+     */
+
+    /* PRIMARY */
+    :host([variant="primary"]) button {
+      background: var(--ds-color-bg-brand);
+      color: var(--ds-color-text-inverse);
+    }
+    :host([variant="primary"]:not([disabled])) button:hover {
+      background: var(--ds-color-bg-brand-hover);
+    }
+    :host([variant="primary"]:not([disabled])) button:active {
+      background: var(--ds-color-bg-brand-pressed);
+    }
+    
+    /* SECONDARY */
+    :host([variant="secondary"]) button {
+      background: var(--ds-color-bg-secondary);
+      color: var(--ds-color-text-default);
+      border-color: var(--ds-color-border-strong);
+    }
+    :host([variant="secondary"]:not([disabled])) button:hover {
+      background: var(--ds-color-bg-hover);
+    }
+    :host([variant="secondary"]:not([disabled])) button:active {
+      background: var(--ds-color-bg-pressed);
+    }
+
+    /* OUTLINE */
+    :host([variant="outline"]) button {
+      background: transparent;
+      color: var(--ds-color-text-brand);
+      border-color: var(--ds-color-border-brand);
+    }
+    :host([variant="outline"]:not([disabled])) button:hover {
+      background: var(--ds-color-bg-hover);
+      color: var(--ds-color-text-brand-hover);
+      border-color: var(--ds-color-border-brand-hover);
+    }
+    :host([variant="outline"]:not([disabled])) button:active {
+      background: var(--ds-color-bg-pressed);
+      color: var(--ds-color-text-brand-pressed);
+      border-color: var(--ds-color-border-brand-pressed);
+    }
+
+    /* ACTION */
+    :host([variant="action"]) button {
+      background: transparent;
+      color: var(--ds-color-text-default);
+    }
+    :host([variant="action"]:not([disabled])) button:hover {
+      background: var(--ds-color-bg-hover);
+    }
+    :host([variant="action"]:not([disabled])) button:active {
+      background: var(--ds-color-bg-pressed);
+    }
+
+    /* TERTIARY */
+    :host([variant="tertiary"]) button {
+      background: transparent;
+      color: var(--ds-color-text-brand);
+    }
+    :host([variant="tertiary"]:not([disabled])) button:hover {
+      background: var(--ds-color-bg-hover);
+      color: var(--ds-color-text-brand-hover);
+    }
+    :host([variant="tertiary"]:not([disabled])) button:active {
+      background: var(--ds-color-bg-pressed);
+      color: var(--ds-color-text-brand-pressed);
+    }
+
+    /* DISABLED STATE for all variants */
+    :host([disabled]) button {
+      background: var(--ds-color-bg-disabled);
+      color: var(--ds-color-text-disabled);
+      border-color: transparent;
+    }
+    :host([variant="secondary"][disabled]) button {
+       border-color: var(--ds-color-border-disabled); /* Secondary keeps border or not? Usually disabled buttons have no border or disabled border. Let's use border-disabled if border exists. */
+    }
+    :host([variant="outline"][disabled]) button {
+       border-color: var(--ds-color-border-disabled);
+    }
+    
+    :host([variant="action"][disabled]) button,
+    :host([variant="tertiary"][disabled]) button {
+       background: transparent;
+    }
+
+    /* Icon styling within button */
+    ::slotted(ds-icon) {
+      /* Icons inherit color from parent button text color (currentColor) */
+      --size: var(--ds-icon-size-sm, 20px);
+    }
+  `;
+
+  constructor() {
+    super();
+    this.variant = 'primary';
+    this.disabled = false;
+  }
+
+  render() {
+    return html`
+      <button ?disabled=${this.disabled} part="button">
+        <slot name="icon-start"></slot>
+        <span class="label">
+          <slot></slot>
+        </span>
+        <slot name="icon-end"></slot>
+      </button>
+    `;
+  }
+}
+
+customElements.define('ds-button', DsButton);

package/src/ds-button/ds-button.mdx

@@ -0,0 +1,141 @@
+import { Meta, Canvas, Controls } from '@storybook/blocks';
+import * as DsButtonStories from './ds-button.stories';
+
+<Meta of={DsButtonStories} />
+
+# Button
+
+Buttons allow users to initiate or confirm actions.
+
+## Playground
+Interact with the button properties using the controls below.
+
+<Canvas of={DsButtonStories.Primary} />
+<Controls of={DsButtonStories.Primary} />
+
+## Usage
+
+### When to use
+- To initiate or confirm an action.
+- To display specific actions that require clear labeling.
+
+### When not to use
+- To display static or read-only information.
+- For navigation to other pages or external resources—use a text link instead.
+
+## Best Practices
+
+### General
+- ✅ **Single Primary:** Keep a single primary button per screen to guide the user's main action.
+- ✅ **Clarity:** Buttons must always have a label for clarity and accessibility.
+- ✅ **Icons:** Place icons to emphasize the action or add clarity; never use icons purely for decoration.
+- ✅ **Width:** Maintain a minimum width of **72px** for buttons to ensure touch accessibility.
+
+### Grouping & Layout
+- ✅ **Limit:** Group no more than **three buttons** together.
+- ✅ **Spacing:** Maintain at least **8px** spacing between grouped buttons.
+- ✅ **Alignment:**
+  - **Left (F-pattern):** On full screens.
+  - **Right (Z-pattern):** In dialogs, modals, and dropdowns.
+- ✅ **Wizards:** In multi-step tasks, place "Next" on the right.
+- ✅ **Headers:** In page headers, the primary action may be placed on the right.
+- ✅ **Mobile:** Stack buttons vertically in small containers, with the main action on top.
+- ✅ **Text Wrapping:** Button labels should wrap to a new line if they are too long for the available space.
+
+## Types
+
+### Primary
+The primary button should draw attention to the most important action on a screen, so reserve it for actions that are essential to the experience. This helps create a clear visual hierarchy and keeps users focused on what matters most.
+
+<Canvas of={DsButtonStories.Primary} />
+
+### Secondary
+The secondary button supports less critical actions and complements the primary button.
+
+<Canvas of={DsButtonStories.Secondary} />
+
+### Outline
+Outline buttons have less prominence than a primary button and slightly more prominence than a tertiary button. It can be used on its own or when there is no clear distinction between multiple important actions on a screen.
+
+<Canvas of={DsButtonStories.Outline} />
+
+### Tertiary
+Tertiary buttons have the lowest prominence, so they should be used for low impact actions and/or actions that are not directly related with the primary button.
+
+<Canvas of={DsButtonStories.Tertiary} />
+
+### Action
+Action buttons let users complete routine tasks or make selections within a workflow. They’re designed to be subtle controls and usually appear inside containers like action bars, so they don’t compete with primary call-to-action elements.
+
+<Canvas of={DsButtonStories.Action} />
+
+## Functionality & States
+
+### Icon Start
+Use an icon at the start of the label to reinforce the action's meaning or add visual context.
+
+<Canvas of={DsButtonStories.WithIconStart} />
+
+### Icon End
+Use an icon at the end of the label to indicate direction (e.g., "Next", "Continue") or a dropdown action.
+
+<Canvas of={DsButtonStories.WithIconEnd} />
+
+### Both Icons
+Buttons can support icons on both sides if the context requires it, though this should be used sparingly.
+
+<Canvas of={DsButtonStories.WithBothIcons} />
+
+### Disabled
+Use the disabled state to indicate that an action is currently unavailable (e.g., missing form data).
+
+<Canvas of={DsButtonStories.Disabled} />
+
+## Accessibility
+
+<table style={{ width: '100%' }}>
+  <thead>
+    <tr>
+      <th>Attribute</th>
+      <th>Value</th>
+      <th>Notes</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>role</code></td>
+      <td><code>button</code></td>
+      <td>Native button element provides this</td>
+    </tr>
+    <tr>
+      <td><code>disabled</code></td>
+      <td><code>true/false</code></td>
+      <td>Disables interaction and updates <code>aria-disabled</code></td>
+    </tr>
+  </tbody>
+</table>
+
+### Keyboard Support
+
+<table style={{ width: '100%' }}>
+  <thead>
+    <tr>
+      <th>Key</th>
+      <th>Action</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><kbd>Enter</kbd> / <kbd>Space</kbd></td>
+      <td>Activates the button</td>
+    </tr>
+    <tr>
+      <td><kbd>Tab</kbd></td>
+      <td>Moves focus to next focusable element</td>
+    </tr>
+    <tr>
+      <td><kbd>Shift</kbd> + <kbd>Tab</kbd></td>
+      <td>Moves focus to previous focusable element</td>
+    </tr>
+  </tbody>
+</table>