@nuvia-ui/components 4.0.1

package/package.json

@@ -0,0 +1,27 @@
+{
+    "name": "@nuvia-ui/components",
+    "version": "4.0.1",
+    "description": "Web Components for the UI Kit",
+    "type": "module",
+    "main": "src/index.js",
+    "exports": {
+        ".": "./src/index.js",
+        "./ds-icon": "./src/ds-icon.js",
+        "./token-provider": "./src/token-provider.js"
+    },
+    "files": [
+        "src/"
+    ],
+    "dependencies": {
+        "@floating-ui/dom": "^1.7.4",
+        "lit": "^3.0.0"
+    },
+    "peerDependencies": {
+        "@nuvia-ui/icons": "^4.0.1",
+        "@nuvia-ui/tokens": "^4.0.1"
+    },
+    "publishConfig": {
+        "access": "public",
+        "registry": "https://registry.npmjs.org/"
+    }
+}

package/src/ds-accordion/ds-accordion-item.js

@@ -0,0 +1,288 @@
+import { LitElement, html, css } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import '../ds-icon/ds-icon.js';
+
+/**
+ * @element ds-accordion-item
+ * @summary An expandable section within an accordion.
+ *
+ * @slot - Content of the accordion item body.
+ * @slot icon - Decorative icon in the header.
+ * @slot title - Title content (replaces heading prop if present).
+ *
+ * @prop {boolean} open - Whether the item is expanded.
+ * @prop {boolean} disabled - Whether the item is disabled.
+ * @prop {string} chevronPosition - Position of the chevron ('left' | 'right'). Default: 'right'.
+ * @prop {boolean} divider - Whether to show a top divider.
+ * @prop {string} heading - Title text.
+ *
+ * @fires ds-accordion-item-toggle - Dispatched when the user toggles the item.
+ */
+export class DsAccordionItem extends LitElement {
+  static properties = {
+    open: { type: Boolean, reflect: true },
+    disabled: { type: Boolean, reflect: true },
+    chevronPosition: { type: String, attribute: 'chevron-position', reflect: true },
+    divider: { type: Boolean, reflect: true },
+    heading: { type: String },
+  };
+
+  static styles = css`
+    :host {
+      display: block;
+      box-sizing: border-box;
+      width: 100%;
+    }
+
+    .wrapper {
+      display: flex;
+      flex-direction: column;
+    }
+
+    /* Header Styles */
+    .header {
+      display: flex;
+      align-items: center;
+      padding: 8px var(--ds-space-sm); /* Target 40px height: 20px (lh from token) + 4px (border) + 16px (padding) */
+      cursor: pointer;
+      user-select: none;
+      background-color: transparent;
+      border: 2px solid transparent; 
+      outline: none;
+      transition: background-color 0.2s ease;
+      position: relative;
+      gap: 0; /* Gaps handled individually */
+    }
+
+    /* Hover State */
+    .header:hover:not(.disabled) {
+      background-color: var(--ds-color-bg-hover, #f5f5f5);
+    }
+
+    /* Focus State - Border around header */
+    .header:focus-visible:not(.disabled) {
+      border: 2px solid var(--ds-color-border-focus);
+      border-radius: var(--ds-radius-container, 4px);
+    }
+
+    /* Disabled State */
+    :host([disabled]) {
+      pointer-events: none;
+    }
+
+    .header.disabled {
+      opacity: var(--ds-opacity-disabled, 0.5);
+      cursor: not-allowed;
+    }
+
+    .divider {
+      height: 1px;
+      /* "Border is always strong" */
+      background-color: var(--ds-color-border-strong); 
+      margin-bottom: 0;
+    }
+
+    /* Typography */
+    .title {
+      flex: 1; /* Takes available space */
+      font: var(--ds-typo-content-body-bold);
+      color: var(--ds-color-text-default);
+      display: flex;
+      align-items: center;
+    }
+    
+    /* Icons */
+    ds-icon {
+       --ds-icon-size: var(--ds-size-sm);
+       color: var(--ds-color-icon-default);
+       display: flex;
+    }
+
+    .chevron-container {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .chevron-icon {
+      transition: transform 0.2s ease;
+    }
+
+    :host([open]) .chevron-icon {
+      transform: rotate(180deg);
+    }
+    
+    /* Spacing Logic */
+    /* 
+       "Distance between decorative icon and title is 4 pixels" 
+       "Distance between this content and Chevron is 8 pixels"
+    */
+
+    /* Default (Chevron Right) */
+    .header:not(.chevron-left) .icon-slot-container {
+      margin-right: var(--ds-space-xs); /* 4px */
+    }
+
+    .header:not(.chevron-left) .chevron-container {
+      margin-left: var(--ds-space-sm); /* 8px */
+    }
+
+    /* Chevron Left */
+    .header.chevron-left .chevron-container {
+      margin-right: var(--ds-space-sm); /* 8px "Distance between this content and Chevron" */
+    }
+    
+    .header.chevron-left .icon-slot-container {
+       margin-right: var(--ds-space-xs); /* 4px "Distance between decorative icon and title" */
+    }
+
+    /* Hide empty icon container to avoid margin issues */
+    .icon-slot-container[hidden] {
+      display: none;
+    }
+
+    /* Body Styles - Grid Height Transition */
+    .body {
+      display: grid;
+      grid-template-rows: 0fr;
+      transition: grid-template-rows 0.3s ease-out, padding-bottom 0.3s ease-out, padding-top 0.3s ease-out;
+      padding-top: 0;
+      padding-bottom: 0;
+      padding-right: var(--ds-space-sm); /* Keep horizontal padding constant or transition it? Constant is safer for layout. */
+    }
+
+    /* Target the inner wrapper for height expansion */
+    .body-inner {
+      overflow: hidden;
+      opacity: 0;
+      transition: opacity 0.2s ease-out;
+    }
+
+    :host([open]) .body {
+      grid-template-rows: 1fr;
+      padding-top: var(--ds-space-sm);
+      padding-bottom: var(--ds-space-md);
+    }
+    
+    :host([open]) .body-inner {
+      opacity: 1;
+      transition-delay: 0.1s; /* Slight delay for dissolve effect */
+    }
+    
+    :host([chevron-position="left"]) .body {
+       padding-left: 40px; 
+       padding-right: var(--ds-space-sm);
+    }
+
+    :host([chevron-position="right"]) .body {
+       padding-left: var(--ds-space-sm);
+       padding-right: 40px;
+    }
+  `;
+
+  constructor() {
+    super();
+    this.open = false;
+    this.disabled = false;
+    this.chevronPosition = 'right';
+    this.divider = false;
+    this.heading = '';
+    this._hasIcon = false;
+    this._uniqueId = `ds-accordion-item-${Math.random().toString(36).substr(2, 9)}`;
+  }
+
+  _handleClick() {
+    if (this.disabled) return;
+    this.open = !this.open;
+    this.dispatchEvent(new CustomEvent('ds-accordion-item-toggle', {
+      detail: { open: this.open },
+      bubbles: true,
+      composed: true
+    }));
+  }
+
+  _handleKeydown(e) {
+    if (this.disabled) return;
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      this._handleClick();
+    }
+  }
+
+  _handleIconSlotChange(e) {
+    const nodes = e.target.assignedNodes({ flatten: true });
+    this._hasIcon = nodes.length > 0;
+    this.requestUpdate();
+  }
+
+  render() {
+    const isChevronLeft = this.chevronPosition === 'left';
+    const headerId = `${this._uniqueId}-header`;
+    const bodyId = `${this._uniqueId}-body`;
+
+    const chevron = html`
+      <div class="chevron-container">
+        <ds-icon 
+            name="expand-more" 
+            class="chevron-icon" 
+            size="sm">
+        </ds-icon>
+      </div>
+    `;
+
+    const iconSlot = html`
+      <div class="icon-slot-container" ?hidden=${!this._hasIcon}>
+        <slot name="icon" @slotchange=${this._handleIconSlotChange}></slot>
+      </div>
+    `;
+
+    return html`
+      <div class="wrapper">
+        ${this.divider ? html`<div class="divider"></div>` : ''}
+        
+        <div 
+          id=${headerId}
+          class=${classMap({
+      header: true,
+      'chevron-left': isChevronLeft,
+      disabled: this.disabled
+    })}
+          role="button"
+          aria-expanded=${this.open}
+          aria-disabled=${this.disabled}
+          aria-controls=${bodyId}
+          tabindex=${this.disabled ? '-1' : '0'}
+          @click=${this._handleClick}
+          @keydown=${this._handleKeydown}
+        >
+          ${isChevronLeft ? chevron : ''}
+          
+          ${iconSlot}
+          
+          <div class="title">
+             <slot name="title">${this.heading}</slot>
+          </div>
+          
+          ${!isChevronLeft ? chevron : ''}
+        </div>
+
+        <div 
+          id=${bodyId}
+          class="body" 
+          role="region" 
+          aria-labelledby=${headerId}
+          aria-hidden=${this.open ? 'false' : 'true'}
+        >
+          <div class="body-inner">
+             <slot></slot>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}
+
+if (!customElements.get('ds-accordion-item')) {
+  customElements.define('ds-accordion-item', DsAccordionItem);
+}

package/src/ds-accordion/ds-accordion-item.stories.js

@@ -0,0 +1,82 @@
+import { html } from 'lit';
+import './ds-accordion-item.js';
+import '../ds-icon/ds-icon.js';
+
+export default {
+  title: 'Components/Accordion Item',
+  component: 'ds-accordion-item',
+  argTypes: {
+    heading: { control: 'text' },
+    open: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+    divider: { control: 'boolean' },
+    chevronPosition: {
+      control: 'radio',
+      options: ['left', 'right'],
+      description: 'Position of the chevron icon'
+    },
+  },
+};
+
+const Template = ({ heading, open, disabled, divider, chevronPosition }) => html`
+  <style>
+    p {
+      font: var(--ds-typo-content-body-regular);
+      color: var(--ds-color-text-default);
+      margin: 0;
+    }
+  </style>
+  <ds-accordion-item 
+    heading=${heading}
+    ?open=${open}
+    ?disabled=${disabled}
+    ?divider=${divider}
+    chevron-position=${chevronPosition}
+  >
+    <p>This is the body content of the accordion item. It uses the system typography tokens.</p>
+  </ds-accordion-item>
+`;
+
+export const Default = Template.bind({});
+Default.args = {
+  heading: 'Accordion Item',
+  open: false,
+  disabled: false,
+  divider: true,
+  chevronPosition: 'right',
+};
+
+export const WithoutDivider = Template.bind({});
+WithoutDivider.args = {
+  heading: 'Item without Divider',
+  divider: false,
+};
+
+export const WithIcon = () => html`
+  <style>
+    p {
+      font: var(--ds-typo-content-body-regular);
+      color: var(--ds-color-text-default);
+      margin: 0;
+    }
+  </style>
+  <ds-accordion-item heading="Item with Icon" divider>
+    <ds-icon slot="icon" name="info" size="sm"></ds-icon>
+    <p>This item has a decorative icon in the header.</p>
+  </ds-accordion-item>
+`;
+
+export const ChevronLeft = Template.bind({});
+ChevronLeft.args = {
+  heading: 'Chevron Left',
+  chevronPosition: 'left',
+  open: true,
+  divider: true,
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  heading: 'Disabled Item',
+  disabled: true,
+  divider: true,
+};

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

@@ -0,0 +1,92 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import './ds-accordion.js';
+import './ds-accordion-item.js';
+
+describe('ds-accordion a11y', () => {
+    let container;
+
+    beforeEach(() => {
+        container = document.createElement('div');
+        document.body.appendChild(container);
+    });
+
+    afterEach(() => {
+        container.remove();
+    });
+
+    it('ds-accordion-item has correct aria attributes and linkage', async () => {
+        container.innerHTML = '<ds-accordion-item heading="Test">Content</ds-accordion-item>';
+        const el = container.querySelector('ds-accordion-item');
+        await new Promise(resolve => setTimeout(resolve, 50));
+
+        const header = el.shadowRoot.querySelector('.header');
+        const body = el.shadowRoot.querySelector('.body');
+
+        expect(header.getAttribute('role')).toBe('button');
+        expect(header.getAttribute('aria-expanded')).toBe('false');
+        expect(header.getAttribute('aria-disabled')).toBe('false');
+
+        // precise ID check
+        const headerId = header.getAttribute('id');
+        const bodyId = body.getAttribute('id');
+        expect(headerId).toBeTruthy();
+        expect(bodyId).toBeTruthy();
+
+        expect(header.getAttribute('aria-controls')).toBe(bodyId);
+
+        expect(body.getAttribute('role')).toBe('region');
+        expect(body.getAttribute('aria-hidden')).toBe('true');
+        expect(body.getAttribute('aria-labelledby')).toBe(headerId);
+    });
+
+    it('updates aria-expanded and aria-hidden on toggle', async () => {
+        container.innerHTML = '<ds-accordion-item heading="Test">Content</ds-accordion-item>';
+        const el = container.querySelector('ds-accordion-item');
+        await new Promise(resolve => setTimeout(resolve, 50));
+
+        const header = el.shadowRoot.querySelector('.header');
+        const body = el.shadowRoot.querySelector('.body');
+
+        header.click();
+        await new Promise(resolve => setTimeout(resolve, 50));
+
+        expect(header.getAttribute('aria-expanded')).toBe('true');
+        expect(body.getAttribute('aria-hidden')).toBe('false');
+    });
+
+    it('handles keyboard interaction (Enter)', async () => {
+        container.innerHTML = '<ds-accordion-item heading="Test">Content</ds-accordion-item>';
+        const el = container.querySelector('ds-accordion-item');
+        await new Promise(resolve => setTimeout(resolve, 50));
+
+        const header = el.shadowRoot.querySelector('.header');
+
+        header.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true, composed: true }));
+        await new Promise(resolve => setTimeout(resolve, 50));
+
+        expect(el.open).toBe(true);
+    });
+
+    it('handles keyboard interaction (Space)', async () => {
+        container.innerHTML = '<ds-accordion-item heading="Test">Content</ds-accordion-item>';
+        const el = container.querySelector('ds-accordion-item');
+        await new Promise(resolve => setTimeout(resolve, 50));
+
+        const header = el.shadowRoot.querySelector('.header');
+
+        header.dispatchEvent(new KeyboardEvent('keydown', { key: ' ', bubbles: true, composed: true }));
+        await new Promise(resolve => setTimeout(resolve, 50));
+
+        expect(el.open).toBe(true);
+    });
+
+    it('disabled item has aria-disabled true and tabindex -1', async () => {
+        container.innerHTML = '<ds-accordion-item heading="Test" disabled>Content</ds-accordion-item>';
+        const el = container.querySelector('ds-accordion-item');
+        await new Promise(resolve => setTimeout(resolve, 50));
+
+        const header = el.shadowRoot.querySelector('.header');
+        expect(header.getAttribute('aria-disabled')).toBe('true');
+        expect(header.getAttribute('tabindex')).toBe('-1');
+    });
+});

package/src/ds-accordion/ds-accordion.js

@@ -0,0 +1,68 @@
+import { LitElement, html, css, unsafeCSS } from 'lit';
+
+/**
+ * @element ds-accordion
+ * @summary A container for expandable content sections.
+ *
+ * @slot - Default slot for ds-accordion-item children.
+ *
+ * @prop {boolean} multiple - If true, allows multiple items to be open at once.
+ */
+export class DsAccordion extends LitElement {
+    static properties = {
+        multiple: { type: Boolean, reflect: true },
+    };
+
+    static styles = css`
+    :host {
+      display: block;
+      width: 100%;
+    }
+  `;
+
+    constructor() {
+        super();
+        this.multiple = false;
+        this._handleToggle = this._handleToggle.bind(this);
+    }
+
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('ds-accordion-item-toggle', this._handleToggle);
+    }
+
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('ds-accordion-item-toggle', this._handleToggle);
+    }
+
+    /**
+     * Handles the toggle event from accordion items.
+     * If not in multiple mode, closes other open items.
+     * @param {CustomEvent} event
+     */
+    _handleToggle(event) {
+        if (this.multiple) return;
+
+        const toggledItem = event.target;
+        // If the item was just opened (it is open now), close others
+        if (toggledItem.open) {
+            const items = [...this.querySelectorAll('ds-accordion-item')];
+            items.forEach((item) => {
+                if (item !== toggledItem && item.open) {
+                    item.open = false;
+                }
+            });
+        }
+    }
+
+    render() {
+        return html`
+      <slot></slot>
+    `;
+    }
+}
+
+if (!customElements.get('ds-accordion')) {
+    customElements.define('ds-accordion', DsAccordion);
+}

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

@@ -0,0 +1,118 @@
+import { html } from 'lit';
+import './ds-accordion.js';
+import './ds-accordion-item.js';
+import '../ds-icon/ds-icon.js';
+
+export default {
+  title: 'Components/Accordion',
+  component: 'ds-accordion',
+  argTypes: {
+    multiple: { control: 'boolean' },
+  },
+};
+
+const Template = ({ multiple }) => html`
+  <style>
+    p {
+      font: var(--ds-typo-content-body-regular);
+      color: var(--ds-color-text-default);
+      margin: 0;
+    }
+  </style>
+  <ds-accordion ?multiple=${multiple}>
+    <ds-accordion-item heading="First Item" open divider>
+      <p>This is the content of the first item.</p>
+    </ds-accordion-item>
+    <ds-accordion-item heading="Second Item" divider>
+      <p>This is the content of the second item.</p>
+    </ds-accordion-item>
+    <ds-accordion-item heading="Third Item (Disabled)" disabled divider>
+      <p>This content is not accessible.</p>
+    </ds-accordion-item>
+  </ds-accordion>
+`;
+
+export const Default = Template.bind({});
+Default.args = {
+  multiple: false,
+};
+
+export const MultipleOpen = Template.bind({});
+MultipleOpen.args = {
+  multiple: true,
+};
+
+export const WithIcons = () => html`
+  <style>
+    p {
+      font: var(--ds-typo-content-body-regular);
+      color: var(--ds-color-text-default);
+      margin: 0;
+    }
+  </style>
+  <ds-accordion>
+    <ds-accordion-item heading="Account Settings" divider>
+      <ds-icon slot="icon" name="settings" size="sm"></ds-icon>
+      <p>Manage your account settings here.</p>
+    </ds-accordion-item>
+    <ds-accordion-item heading="Notifications" divider>
+      <ds-icon slot="icon" name="notifications" size="sm"></ds-icon>
+      <p>Configure your notification preferences.</p>
+    </ds-accordion-item>
+  </ds-accordion>
+`;
+
+export const ChevronLeft = () => html`
+  <style>
+    p {
+      font: var(--ds-typo-content-body-regular);
+      color: var(--ds-color-text-default);
+      margin: 0;
+    }
+  </style>
+  <ds-accordion>
+    <ds-accordion-item heading="Chevron Left Item 1" chevron-position="left" divider>
+      <p>Notice the indentation of the content matches the header content.</p>
+    </ds-accordion-item>
+    <ds-accordion-item heading="Chevron Left Item 2" chevron-position="left" divider>
+      <p>Content padding left should be 40px.</p>
+    </ds-accordion-item>
+  </ds-accordion>
+`;
+
+export const CustomTitleSlot = () => html`
+  <style>
+    p {
+      font: var(--ds-typo-content-body-regular);
+      color: var(--ds-color-text-default);
+      margin: 0;
+    }
+  </style>
+  <ds-accordion>
+    <ds-accordion-item divider>
+      <div slot="title" style="display: flex; align-items: center; justify-content: space-between; width: 100%;">
+        <span>Complex Title</span>
+        <span style="font-size: 12px; color: grey;">Meta info</span>
+      </div>
+      <p>Content for complex title item.</p>
+    </ds-accordion-item>
+  </ds-accordion>
+`;
+
+export const WithoutDivider = () => html`
+  <style>
+    p {
+      font: var(--ds-typo-content-body-regular);
+      color: var(--ds-color-text-default);
+      margin: 0;
+    }
+  </style>
+  <ds-accordion>
+    <ds-accordion-item heading="Item without Divider">
+      <p>This item has no top divider.</p>
+    </ds-accordion-item>
+    <ds-accordion-item heading="Another Item">
+      <p>Also has no divider.</p>
+    </ds-accordion-item>
+  </ds-accordion>
+`;