@nuvia-ui/components 4.0.1

package/src/ds-input/index.js

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

package/src/ds-link/ds-link.js

@@ -0,0 +1,111 @@
+import { LitElement, html, css, nothing } from 'lit';
+import '../ds-icon/ds-icon.js';
+
+/**
+ * @element ds-link
+ * @summary A unified link component with intelligent defaults and consistent styling.
+ *
+ * @prop {string} href - Destination URL.
+ * @prop {string} target - Link target (e.g., '_blank').
+ * @prop {string} download - Download attribute.
+ * @prop {boolean} inline - Whether the link flows within text (default: true) or is standalone (false).
+ * @prop {string} icon-start - Icon to display before the text.
+ * @prop {string} icon-end - Icon to display after the text.
+ *
+ * @slot - Link text content.
+ */
+export class DsLink extends LitElement {
+  static properties = {
+    href: { type: String },
+    target: { type: String },
+    download: { type: String },
+    inline: { type: Boolean, reflect: true },
+    'icon-start': { type: String, attribute: 'icon-start' },
+    'icon-end': { type: String, attribute: 'icon-end' },
+  };
+
+  static styles = css`
+    :host {
+      --link-decoration: underline;
+      display: inline; /* Default for inline flow */
+    }
+
+    /* Standalone Mode */
+    :host(:not([inline])) {
+      display: inline-flex;
+      align-items: center;
+      font: var(--ds-typo-content-body-regular); /* Fixed typography */
+    }
+
+    a {
+      color: var(--ds-color-text-link, #0052cc);
+      text-decoration: var(--link-decoration);
+      cursor: pointer;
+      outline: none;
+      
+      /* 
+         Trade-off: 
+         - Inline links usually don't have icons.
+         - If they do, they behave like inline-blocks or inline-flex.
+         
+         Let's stick to inline-flex for alignment, assuming short links or accepting block-like behavior for icon links.
+      */
+      display: inline-flex;
+      align-items: center;
+      gap: var(--ds-space-xs, 4px);
+      vertical-align: baseline;
+    }
+
+    a:hover {
+      color: var(--ds-color-text-link-hover, #003d99);
+    }
+
+    a:focus-visible {
+      outline: 2px solid var(--ds-color-border-focus);
+      border-radius: var(--ds-radius-container, 0px);
+    }
+
+    ds-icon {
+      color: inherit;
+    }
+  `;
+
+  constructor() {
+    super();
+    this.inline = true;
+    this.href = '';
+  }
+
+  render() {
+    const isExternal = this.target === '_blank';
+
+    // Security for external links
+    const rel = isExternal ? 'noreferrer noopener' : undefined;
+
+    // Logic for auto-icon: 
+    // If target="_blank" AND no icon-end is provided, show 'open_in_new'.
+    // If icon-end IS provided, user override takes precedence.
+    let endIconName = this['icon-end'];
+    if (isExternal && !endIconName) {
+      endIconName = 'open-in-new';
+    }
+
+    return html`
+      <a 
+        href=${this.href} 
+        target=${this.target || nothing}
+        download=${this.download || nothing}
+        rel=${rel || nothing}
+        part="anchor"
+      >
+        ${this['icon-start'] ? html`<ds-icon name=${this['icon-start']} size="sm"></ds-icon>` : nothing}
+        <slot></slot>
+        ${endIconName ? html`<ds-icon name=${endIconName} size="sm"></ds-icon>` : nothing}
+      </a>
+    `;
+  }
+}
+
+if (!customElements.get('ds-link')) {
+  customElements.define('ds-link', DsLink);
+}

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

@@ -0,0 +1,56 @@
+import { html } from 'lit';
+import './ds-link.js';
+
+export default {
+  title: 'Components/Link',
+  component: 'ds-link',
+  argTypes: {
+    href: { control: 'text' },
+    target: { control: 'text' },
+    inline: { control: 'boolean' },
+    'icon-start': { control: 'text' },
+    'icon-end': { control: 'text' },
+  },
+};
+
+const Template = (args) => html`
+  <ds-link 
+    .href=${args.href}
+    .target=${args.target}
+    .inline=${args.inline}
+    .icon-start=${args['icon-start']}
+    .icon-end=${args['icon-end']}
+  >
+    ${args.label || 'Link Text'}
+  </ds-link>
+`;
+
+export const DefaultInline = () => html`
+  <p style="font-family: sans-serif; line-height: 1.5;">
+    This is a paragraph with a 
+    <ds-link href="#">default inline link</ds-link> 
+    inside it. It inherits the text style.
+  </p>
+`;
+
+export const Standalone = Template.bind({});
+Standalone.args = {
+  inline: false,
+  href: '#',
+  label: 'Standalone Link',
+};
+
+export const External = Template.bind({});
+External.args = {
+  href: 'https://example.com',
+  target: '_blank',
+  label: 'External Link',
+};
+
+export const WithIcons = Template.bind({});
+WithIcons.args = {
+  href: '#',
+  label: 'Go Back',
+  'icon-start': 'arrow-back',
+  inline: false,
+};

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

@@ -0,0 +1,74 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import './ds-link.js';
+
+describe('ds-link', () => {
+    let container;
+
+    beforeEach(() => {
+        container = document.createElement('div');
+        document.body.appendChild(container);
+    });
+
+    afterEach(() => {
+        container.remove();
+    });
+
+    it('renders with default attributes', async () => {
+        container.innerHTML = '<ds-link href="#">Click me</ds-link>';
+        const el = container.querySelector('ds-link');
+        await new Promise(r => setTimeout(r, 50));
+
+        const anchor = el.shadowRoot.querySelector('a');
+        expect(anchor).toBeTruthy();
+        expect(anchor.getAttribute('href')).toBe('#');
+        expect(el.inline).toBe(true);
+    });
+
+    it('renders external link with security attributes and icon', async () => {
+        container.innerHTML = '<ds-link href="https://example.com" target="_blank">External</ds-link>';
+        const el = container.querySelector('ds-link');
+        await new Promise(r => setTimeout(r, 50));
+
+        const anchor = el.shadowRoot.querySelector('a');
+        expect(anchor.getAttribute('target')).toBe('_blank');
+        expect(anchor.getAttribute('rel')).toContain('noreferrer');
+        expect(anchor.getAttribute('rel')).toContain('noopener');
+
+        // Should render external icon automatically
+        const icons = el.shadowRoot.querySelectorAll('ds-icon');
+        expect(icons.length).toBe(1);
+        expect(icons[0].getAttribute('name')).toBe('open-in-new');
+    });
+
+    it('allows overriding auto-icon with icon-end', async () => {
+        container.innerHTML = '<ds-link href="#" target="_blank" icon-end="star">Override</ds-link>';
+        const el = container.querySelector('ds-link');
+        await new Promise(r => setTimeout(r, 50));
+
+        const icons = el.shadowRoot.querySelectorAll('ds-icon');
+        expect(icons.length).toBe(1);
+        expect(icons[0].getAttribute('name')).toBe('star');
+    });
+
+    it('applies standalone styling when inline is false', async () => {
+        // Lit prop setting via DOM property
+        const el = document.createElement('ds-link');
+        el.href = '#';
+        el.textContent = 'Standalone';
+        el.inline = false;
+        container.appendChild(el);
+        await new Promise(r => setTimeout(r, 50));
+
+        expect(el.hasAttribute('inline')).toBe(false);
+        expect(el.inline).toBe(false);
+    });
+
+    it('renders start icon', async () => {
+        container.innerHTML = '<ds-link href="#" icon-start="home">Home</ds-link>';
+        const el = container.querySelector('ds-link');
+        await new Promise(r => setTimeout(r, 50));
+
+        const icon = el.shadowRoot.querySelector('ds-icon[name="home"]');
+        expect(icon).toBeTruthy();
+    });
+});

package/src/ds-list-item/ds-list-item.a11y.test.js

@@ -0,0 +1,39 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import axe from 'axe-core';
+import './ds-list-item.js';
+
+describe('ds-list-item a11y', () => {
+  let container;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    container.remove();
+  });
+
+  it('should be accessible as action', async () => {
+    container.innerHTML = `
+      <div role="list">
+        <ds-list-item label="Action Item"></ds-list-item>
+      </div>`;
+    await new Promise(resolve => setTimeout(resolve, 0));
+    const results = await axe.run(container);
+    expect(results.violations).toHaveLength(0);
+  });
+
+  it('should be accessible as option', async () => {
+    container.innerHTML = `
+      <div role="listbox" aria-label="Options Wrapper">
+        <ds-list-item variant="select-simple" label="Option 1"></ds-list-item>
+      </div>`;
+    await new Promise(resolve => setTimeout(resolve, 0));
+    const results = await axe.run(container);
+    if (results.violations.length > 0) {
+      console.log('Axe Violations:', JSON.stringify(results.violations, null, 2));
+    }
+    expect(results.violations).toHaveLength(0);
+  });
+});

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

@@ -0,0 +1,292 @@
+import { LitElement, html, css, nothing } from 'lit';
+import '../ds-icon/ds-icon.js';
+import '../ds-checkbox/ds-checkbox.js';
+
+/**
+ * Flexible List Item component for lists, menus, and dropdowns.
+ * 
+ * @element ds-list-item
+ * 
+ * @prop {string} label - Primary text
+ * @prop {string} additionalText - Secondary text
+ * @prop {string} variant - 'action' | 'select-checkbox' | 'select-simple' | 'section'
+ * @prop {boolean} selected - Selection state
+ * @prop {boolean} disabled - Disabled state
+ * @prop {boolean} divider - Show divider above (default for section)
+ * 
+ * @slot start - Leading content (Icon, Avatar)
+ * @slot end - Trailing content (Icon, Badge)
+ * @slot - Default slot for label content (overrides label prop)
+ * 
+ * @slot - Default slot for label content (overrides label prop)
+ */
+export class DsListItem extends LitElement {
+  static properties = {
+    label: { type: String },
+    additionalText: { type: String, attribute: 'additional-text' },
+    variant: { type: String, reflect: true },
+    selected: { type: Boolean, reflect: true },
+    indeterminate: { type: Boolean, reflect: true },
+    disabled: { type: Boolean, reflect: true },
+    divider: { type: Boolean, reflect: true },
+    hasStart: { type: Boolean, attribute: 'has-start', reflect: true },
+    hideLabel: { type: Boolean, attribute: 'hide-label', reflect: true },
+    hideLabel: { type: Boolean, attribute: 'hide-label', reflect: true },
+    hideDivider: { type: Boolean, attribute: 'hide-divider', reflect: true },
+    highlighted: { type: Boolean, reflect: true }
+  };
+
+  static styles = css`
+    :host {
+      display: block;
+      --list-item-min-height: 32px;
+      outline: none; /* Focus ring is handled on inner .item */
+    }
+
+    /* Core Layout */
+    .item {
+      display: flex;
+      align-items: flex-start; /* Aligns content to top - better for multiline */
+      width: 100%;
+      min-height: var(--list-item-min-height);
+      height: auto;
+      box-sizing: border-box;
+      height: auto;
+      box-sizing: border-box;
+      padding: 6px 8px; /* Standard padding */
+      gap: 8px; /* Unified Spacing */
+      gap: 8px; /* Unified Spacing */
+      background: transparent;
+      color: var(--ds-color-text-default);
+      cursor: pointer;
+      text-decoration: none;
+      border: none;
+      outline: none;
+      position: relative;
+      transition: background-color 0.2s;
+    }
+
+    /* Hide Label Container */
+    :host([hide-label]) .item {
+      display: none;
+    }
+
+    /* Content Wrapper (Label + Additional) */
+    .content {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      min-width: 0;
+      margin: 0; /* Align using gap */
+    }
+
+    /* Typography */
+    .label {
+      font: var(--ds-typo-content-body-regular);
+      color: var(--ds-color-text-default);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .additional-text {
+      font: var(--ds-typo-content-body-regular);
+      color: var(--ds-color-text-secondary);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    /* Variant: Section */
+    :host([variant="section"]) .item {
+      padding: 6px 8px; /* Same padding */
+      cursor: default;
+    }
+
+    :host([variant="section"]) .label {
+      font: var(--ds-typo-content-body-bold);
+      color: var(--ds-color-text-secondary);
+    }
+
+    /* Divider */
+    :host([variant="section"]) {
+      display: block;
+      margin-top: 8px;
+    }
+    
+    :host([variant="section"]:not([hide-divider]))::before {
+      content: '';
+      display: block;
+      height: 1px;
+      background-color: var(--ds-color-border-default); /* Divider color */
+      margin-bottom: 8px;
+    }
+
+    /* Hide divider for named sections (Headers) per user request */
+    :host([variant="section"]:not([hide-label]))::before {
+        display: none;
+    }
+
+    /* Selection Visuals */
+    .selection-visual {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      /* margin-right removed in favor of gap */
+      flex-shrink: 0;
+    }
+
+    /* Slot Management */
+    :host(:not([has-start])) slot[name="start"] {
+      display: none;
+    }
+
+    /* Checkbox Variant */
+    ds-checkbox {
+      pointer-events: none; /* Let the row handle click */
+    }
+
+    /* Simple Select Variant - Check Icon Container */
+    .check-icon-container {
+      width: 16px;
+      height: 20px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    /* States */
+    :host(:not([disabled]):not([variant="section"])) .item:hover {
+      background-color: var(--ds-color-bg-hover);
+    }
+    
+    :host(:not([disabled]):not([variant="section"])) .item:active {
+      background-color: var(--ds-color-bg-pressed);
+    }
+
+    /* Highlighted state (Virtual Focus for aria-activedescendant) */
+    :host([highlighted]) .item {
+      background-color: var(--ds-color-bg-hover);
+    }
+
+    /* Focus (Border Simulation via Outline on inner item when HOST is focused) */
+    :host(:focus-visible) .item {
+      outline: 2px solid var(--ds-color-border-focus);
+      outline-offset: -2px; /* Inner border effect */
+    }
+
+    /* Disabled */
+    :host([disabled]) .item {
+      background-color: var(--ds-color-bg-disabled);
+      color: var(--ds-color-text-disabled);
+      cursor: not-allowed;
+    }
+
+    :host([disabled]) .label,
+    :host([disabled]) .additional-text {
+      color: var(--ds-color-text-disabled);
+    }
+  `;
+
+  constructor() {
+    super();
+    this.variant = 'action';
+    this.selected = false;
+    this.indeterminate = false;
+    this.disabled = false;
+    this.divider = false;
+    this.hasStart = false;
+    this.hideLabel = false;
+    this.hideDivider = false;
+    this.highlighted = false;
+  }
+
+  // Manage attributes on HOST to satisfy accessibility requirements
+  updated(changedProperties) {
+    if (changedProperties.has('variant') || changedProperties.has('selected') || changedProperties.has('disabled')) {
+      const role = this._getRole();
+
+      this.setAttribute('role', role);
+
+      if (role === 'option') {
+        this.setAttribute('aria-selected', this.selected ? 'true' : 'false');
+      } else {
+        this.removeAttribute('aria-selected');
+      }
+
+      if (this.disabled || role === 'presentation') {
+        this.removeAttribute('tabindex');
+      } else {
+        if (!this.hasAttribute('tabindex')) {
+          this.setAttribute('tabindex', role === 'option' ? '-1' : '0');
+        }
+      }
+    }
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.requestUpdate();
+  }
+
+  _getRole() {
+    if (this.variant === 'section') return 'presentation';
+    if (this.variant.startsWith('select')) return 'option';
+    return 'listitem';
+  }
+
+  _handleSlotChange(e) {
+    const slot = e.target;
+    this.hasStart = slot.assignedNodes({ flatten: true }).length > 0;
+  }
+
+  render() {
+    // Selection Element (Leftmost)
+    let selectionElement = nothing;
+
+    if (this.variant === 'select-checkbox') {
+      selectionElement = html`
+        <div class="selection-visual">
+          <ds-checkbox 
+            standalone 
+            ?checked=${this.selected} 
+            ?indeterminate=${this.indeterminate}
+            ?disabled=${this.disabled} 
+            tabindex="-1"
+          ></ds-checkbox>
+        </div>
+      `;
+    } else if (this.variant === 'select-simple' && this.selected) {
+      selectionElement = html`
+        <div class="selection-visual check-icon-container">
+          <ds-icon name="check" size="xs"></ds-icon>
+        </div>
+      `;
+    } else if (this.variant === 'select-simple' && !this.selected) {
+      selectionElement = html`
+        <div class="selection-visual check-icon-container"></div>
+      `;
+    }
+
+    return html`
+      <div class="item">
+        ${selectionElement}
+        
+        <slot name="start" @slotchange="${this._handleSlotChange}"></slot>
+        
+        <div class="content">
+          <span class="label">
+            ${this.label || html`<slot></slot>`}
+          </span>
+          ${this.additionalText ? html`<span class="additional-text">${this.additionalText}</span>` : nothing}
+        </div>
+        
+        <slot name="end"></slot>
+      </div>
+    `;
+  }
+
+}
+
+customElements.define('ds-list-item', DsListItem);

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

@@ -0,0 +1,101 @@
+import './ds-list-item.js';
+import '../ds-icon/ds-icon.js';
+import '../ds-avatar/ds-avatar.js';
+
+export default {
+    title: 'Components/List Item',
+    component: 'ds-list-item',
+    argTypes: {
+        label: { control: 'text' },
+        additionalText: { control: 'text' },
+        variant: {
+            control: 'select',
+            options: ['action', 'select-checkbox', 'select-simple', 'section']
+        },
+        selected: { control: 'boolean' },
+        disabled: { control: 'boolean' },
+        hideLabel: { control: 'boolean', attribute: 'hide-label' },
+        hideDivider: { control: 'boolean', attribute: 'hide-divider' }
+    }
+};
+
+const Template = (args) => {
+    const el = document.createElement('ds-list-item');
+    Object.assign(el, args);
+    return el;
+};
+
+export const Action = {
+    render: Template,
+    args: {
+        label: 'Profile Settings',
+        additionalText: 'Manage your account',
+        variant: 'action'
+    }
+};
+
+export const WithStartIcon = {
+    render: () => {
+        const el = document.createElement('ds-list-item');
+        el.label = 'Notifications';
+
+        const icon = document.createElement('ds-icon');
+        icon.setAttribute('slot', 'start');
+        icon.setAttribute('name', 'notifications');
+        icon.setAttribute('size', 'sm');
+
+        el.appendChild(icon);
+        return el;
+    }
+};
+
+export const WithAvatarAndEndAction = {
+    render: () => {
+        const el = document.createElement('ds-list-item');
+        el.label = 'Miguel Silva';
+        el.additionalText = 'Online';
+
+        const avatar = document.createElement('ds-avatar');
+        avatar.setAttribute('slot', 'start');
+        avatar.setAttribute('initials', 'MS');
+        avatar.setAttribute('size', 'sm');
+
+        const icon = document.createElement('ds-icon');
+        icon.setAttribute('slot', 'end');
+        icon.setAttribute('name', 'chevron-right');
+        icon.setAttribute('size', 'sm');
+
+        el.appendChild(avatar);
+        el.appendChild(icon);
+        return el;
+    }
+};
+
+export const SelectCheckbox = {
+    render: Template,
+    args: {
+        label: 'Enable Notifications',
+        variant: 'select-checkbox',
+        selected: true
+    }
+};
+
+export const SelectSimple = {
+    render: Template,
+    args: {
+        label: 'Selected Option',
+        variant: 'select-simple',
+        selected: true
+    }
+};
+
+export const Section = {
+    render: Template,
+    args: {
+        label: 'Section Header',
+        variant: 'section',
+        hideLabel: false,
+        hideDivider: false
+    }
+};
+