@nuvia-ui/components 4.0.1

package/src/ds-tooltip/positioner.js

@@ -0,0 +1,117 @@
+import { computePosition, autoUpdate, flip, shift, offset, arrow, autoPlacement } from '@floating-ui/dom';
+
+/**
+ * A Reactive Controller to handle floating-ui positioning
+ */
+export class PositionerController {
+    constructor(host) {
+        this.host = host;
+        this.host.addController(this);
+        this._cleanup = null;
+        this._reference = null;
+        this._floating = null;
+        this._placement = 'top';
+        this._strategy = 'absolute';
+    }
+
+    _update() {
+        if (!this.host.isConnected || !this._reference || !this._floating) {
+            return;
+        }
+
+        this._stop();
+
+        this._cleanup = autoUpdate(
+            this._reference,
+            this._floating,
+            () => {
+                // Calculate the offset dynamically from token
+                const offsetAmount = this._offsetValue;
+
+                // Handle 'auto' placement
+                const isAuto = this._placement.startsWith('auto');
+
+                // Use placement as-is for standard values
+                const targetPlacement = this._placement;
+
+                const middleware = [
+                    offset(offsetAmount),
+                    shift({ padding: 8 })
+                ];
+
+                if (isAuto) {
+                    middleware.push(autoPlacement());
+                } else {
+                    middleware.push(flip());
+                }
+
+                computePosition(this._reference, this._floating, {
+                    strategy: this._strategy,
+                    placement: isAuto ? undefined : targetPlacement,
+                    middleware,
+                }).then(({ x, y }) => {
+                    Object.assign(this._floating.style, {
+                        left: `${x}px`,
+                        top: `${y}px`,
+                        position: this._strategy // Ensure CSS position matches strategy
+                    });
+                });
+            },
+            {
+                // Critical options for dynamic repositioning
+                ancestorScroll: true,   // Reposition when ancestor scrolls
+                ancestorResize: true,   // Reposition when ancestor resizes
+                elementResize: true,    // Reposition when elements resize
+                layoutShift: true       // Reposition on layout shifts
+            }
+        );
+    }
+
+    set target(referenceElement) {
+        this._reference = referenceElement;
+        this._update();
+    }
+
+    set floating(floatingElement) {
+        this._floating = floatingElement;
+        this._update();
+    }
+
+    set placement(value) {
+        this._placement = value;
+        this._update();
+    }
+
+    set strategy(value) {
+        this._strategy = value;
+        this._update();
+    }
+
+    hostConnected() {
+        this._update();
+    }
+
+    hostDisconnected() {
+        this._stop();
+    }
+
+    _stop() {
+        if (this._cleanup) {
+            this._cleanup();
+            this._cleanup = null;
+        }
+    }
+
+    /**
+     * Reads the --ds-space-sm token from the computed styles of the host
+     * to determine the offset value in pixels.
+     */
+    get _offsetValue() {
+        if (!this.host) return 8; // Fallback
+        const styles = getComputedStyle(this.host);
+        const tokenValue = styles.getPropertyValue('--ds-space-sm').trim();
+        // Parse '8px' -> 8
+        const pixels = parseFloat(tokenValue);
+        return isNaN(pixels) ? 8 : pixels;
+    }
+}

package/src/index.js

@@ -0,0 +1,50 @@
+// Export all components
+export * from './ds-accordion/index.js';
+export { DsTagAction } from './ds-tag-action/ds-tag-action.js';
+export { DsTagRemovable } from './ds-tag-removable/ds-tag-removable.js';
+export { DsTabItem } from './ds-tab-item/ds-tab-item.js';
+export { DsTabs } from './ds-tabs/ds-tabs.js';
+export { DsTabPanel } from './ds-tabs/ds-tab-panel.js';
+export { DsIcon } from './ds-icon/index.js';
+export { TokenProvider } from './token-provider/index.js';
+export { DsButton } from './ds-button/index.js';
+export { DsButtonGroup } from './ds-button-group/index.js';
+export { DsActionBar } from './ds-action-bar/index.js';
+export { DsIconButton } from './ds-icon-button/index.js';
+export { DsInput } from './ds-input/index.js';
+export { DsTextarea } from './ds-textarea/index.js';
+export { DsDropdown } from './ds-dropdown/index.js';
+export { DsCheckbox } from './ds-checkbox/index.js';
+export { DsCheckboxGroup } from './ds-checkbox-group/index.js';
+export { DsRadio } from './ds-radio/index.js';
+export { DsRadioGroup } from './ds-radio-group/index.js';
+export { DsTooltip } from './ds-tooltip/index.js';
+export { DsTagStatus } from './ds-tag-status/index.js';
+export { DsProgressBar } from './ds-progress-bar/ds-progress-bar.js';
+export { DsSpinner } from './ds-spinner/ds-spinner.js';
+export { DsLink } from './ds-link/ds-link.js';
+export { DsNavItem } from './ds-nav-item/index.js';
+export { DsNavVertical } from './ds-nav-vertical/index.js';
+export { DsHeader } from './ds-header/index.js';
+export { DsHeaderNav } from './ds-header-nav/ds-header-nav.js';
+export { DsHeaderNavItem } from './ds-header-nav-item/ds-header-nav-item.js';
+export { DsAvatar } from './ds-avatar/index.js';
+export { DsAvatarExtended } from './ds-avatar-extended/index.js';
+export { DsListItem } from './ds-list-item/ds-list-item.js';
+export { DsMenu } from './ds-menu/ds-menu.js';
+export { DsMenuGroup } from './ds-menu-group/ds-menu-group.js';
+export { DsAlert } from './ds-alert/index.js';
+export { DsBanner } from './ds-banner/index.js';
+export { DsToast, DsToastProvider } from './ds-toast/index.js';
+export { DsDialog } from './ds-dialog/index.js';
+export { DsPagination } from './ds-pagination/index.js';
+export { DsSwitch } from './ds-switch/index.js';
+export { DsSlider } from './ds-slider/ds-slider.js';
+export { DsStepper } from './ds-stepper/ds-stepper.js';
+export { DsStepperItem } from './ds-stepper-item/ds-stepper-item.js';
+export { DsRichList } from './ds-rich-list/ds-rich-list.js';
+export { DsRichListItem } from './ds-rich-list-item/ds-rich-list-item.js';
+export { DsThumbnail } from './ds-thumbnail/ds-thumbnail.js';
+export { DsStatusBorder } from './ds-status-border/ds-status-border.js';
+export { DsFileUploaded } from './ds-file-uploaded/ds-file-uploaded.js';
+export { DsFileUploader } from './ds-file-uploader/ds-file-uploader.js';

package/src/mixins/field-label.mixin.js

@@ -0,0 +1,113 @@
+import { html, css } from 'lit';
+import '../ds-tooltip/ds-tooltip.js';
+import '../ds-icon-button/ds-icon-button.js';
+
+export const fieldLabelStyles = css`
+  .label-row {
+    display: flex;
+    align-items: flex-start; /* Align to top for text wrap edge case */
+    gap: var(--ds-space-xs);
+  }
+
+  .label-row label {
+    font: var(--ds-typo-content-body-bold);
+    color: var(--ds-color-text-default);
+    line-height: 24px; /* Match info button height for alignment */
+    cursor: pointer;
+  }
+
+  .label-row ds-icon-button {
+    flex-shrink: 0; /* Prevent button from shrinking */
+  }
+
+  /* Inline layout styles (used when labelPosition="inline-start") */
+  .field-wrapper.inline-label {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    gap: var(--ds-space-sm, 8px);
+  }
+
+  .field-wrapper.inline-label .label-row {
+    flex-shrink: 0;
+    padding-top: 4px; /* Align label text (24px) with 32px input: (32 - 24) / 2 = 4px */
+  }
+
+  .field-wrapper.inline-label .field-content {
+    flex: 1;
+    min-width: 0; /* Allow shrinking */
+    display: flex;
+    flex-direction: column;
+    gap: var(--ds-space-xs);
+  }
+`;
+
+
+/**
+ * Mixin for rendering field labels with optional info button
+ * 
+ * @param {LitElement} superClass - The class to extend
+ * @returns {LitElement} Extended class with label rendering capabilities
+ */
+export const FieldLabelMixin = (superClass) => class extends superClass {
+
+  /**
+   * Renders a field label with optional info button
+   * Info button is now OUTSIDE the label element for accessibility
+   * 
+   * @param {string} label - Label text
+   * @param {string} info - Info tooltip text (shows info button if provided)
+   * @param {string} inputId - ID of the input to associate with label
+   * @returns {TemplateResult|string} Lit template or empty string
+   */
+  renderFieldLabel(label, info = '', inputId = '', labelId = '') {
+    if (!label) return '';
+
+    return html`
+      <div class="label-row" part="label-row">
+        <label id="${labelId}" for="${inputId}">${label}</label>
+        ${info ? html`
+          <ds-tooltip content="${info}" placement="top">
+            <ds-icon-button 
+              icon="info" 
+              variant="action"
+              size="s"
+              aria-label="${info}"
+              @click=${this._handleInfoClick}
+            ></ds-icon-button>
+          </ds-tooltip>
+        ` : ''}
+      </div>
+    `;
+  }
+
+  /**
+   * Handles info button click
+   * @private
+   */
+  _handleInfoClick(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    e.stopImmediatePropagation(); // Prevent any other handlers
+
+    // Prevent focus from moving to the field
+    const activeElement = document.activeElement;
+    if (activeElement && activeElement !== e.target) {
+      e.target.blur();
+    }
+
+    this.dispatchEvent(new CustomEvent('info-click', {
+      bubbles: true,
+      composed: true,
+      detail: { info: this.info }
+    }));
+  }
+
+  /**
+   * Returns CSS for field label styling
+   * @returns {CSSResult} CSS result
+   */
+  static get fieldLabelStyles() {
+    return fieldLabelStyles;
+  }
+};

package/src/mixins/field-message.mixin.js

@@ -0,0 +1,66 @@
+import { html, css } from 'lit';
+import '../ds-icon/ds-icon.js';
+
+export const fieldMessageStyles = css`
+  .field-message {
+    display: flex;
+    align-items: center;
+    gap: var(--ds-space-xs);
+    font: var(--ds-typo-content-body-regular);
+    color: var(--ds-color-text-secondary);
+  }
+
+  .field-message--error {
+    color: var(--ds-color-text-error);
+  }
+
+  .field-message--error .field-message__icon {
+    color: var(--ds-color-icon-error);
+  }
+
+  .field-message__icon {
+    flex-shrink: 0;
+  }
+
+  .field-message__text {
+    color: inherit;
+  }
+`;
+
+/**
+ * Mixin for rendering field messages (help text or error text)
+ * 
+ * @param {LitElement} superClass - The class to extend
+ * @returns {LitElement} Extended class with message rendering capabilities
+ */
+export const FieldMessageMixin = (superClass) => class extends superClass {
+
+  /**
+   * Renders a field message (help text or error text with icon)
+   * 
+   * @param {string} helpText - Help text to display
+   * @param {string} errorText - Error text to display (takes precedence over helpText)
+   * @returns {TemplateResult|string} Lit template or empty string
+   */
+  renderFieldMessage(helpText = '', errorText = '') {
+    const hasError = !!errorText;
+    const message = hasError ? errorText : helpText;
+
+    if (!message) return '';
+
+    return html`
+      <div class="field-message ${hasError ? 'field-message--error' : ''}" part="message">
+        ${hasError ? html`<ds-icon name="warning" size="sm" class="field-message__icon"></ds-icon>` : ''}
+        <span class="field-message__text">${message}</span>
+      </div>
+    `;
+  }
+
+  /**
+   * Returns CSS for field message styling
+   * @returns {CSSResult} CSS result
+   */
+  static get fieldMessageStyles() {
+    return fieldMessageStyles;
+  }
+};

package/src/token-provider/index.js

@@ -0,0 +1 @@
+export { TokenProvider } from './token-provider.js';

package/src/token-provider/token-provider.a11y.test.js

@@ -0,0 +1,44 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import axe from 'axe-core';
+import './token-provider.js';
+
+describe('token-provider accessibility', () => {
+    let container;
+
+    beforeEach(() => {
+        container = document.createElement('div');
+        document.body.appendChild(container);
+        document.documentElement.removeAttribute('data-theme');
+    });
+
+    afterEach(() => {
+        container.remove();
+        document.documentElement.removeAttribute('data-theme');
+    });
+
+    it('should pass axe accessibility checks', async () => {
+        container.innerHTML = `
+      <token-provider theme="light">
+        <div>Content inside provider</div>
+      </token-provider>
+    `;
+
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const results = await axe.run(container);
+        expect(results.violations).toHaveLength(0);
+    });
+
+    it('should not interfere with document accessibility', async () => {
+        container.innerHTML = '<token-provider theme="light"></token-provider>';
+
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        // token-provider should be invisible to screen readers
+        const provider = container.querySelector('token-provider');
+        expect(provider).toBeTruthy();
+
+        // Verify it doesn't add any problematic ARIA attributes
+        expect(provider.getAttribute('role')).toBeFalsy();
+    });
+});

package/src/token-provider/token-provider.js

@@ -0,0 +1,85 @@
+/**
+ * Token Provider Web Component
+ * Manages theme context and injects design tokens
+ * 
+ * Usage:
+ * <token-provider theme="light">
+ *   <your-app></your-app>
+ * </token-provider>
+ */
+
+export class TokenProvider extends HTMLElement {
+  static get observedAttributes() {
+    return ['theme'];
+  }
+
+  constructor() {
+    super();
+    this._theme = 'light';
+  }
+
+  connectedCallback() {
+    // Apply theme to document root for global token access
+    this._applyTheme();
+    
+    // Dispatch ready event
+    this.dispatchEvent(new CustomEvent('tokens-ready', {
+      bubbles: true,
+      composed: true,
+      detail: { theme: this._theme }
+    }));
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (name === 'theme' && oldValue !== newValue) {
+      this._theme = newValue || 'light';
+      this._applyTheme();
+      
+      this.dispatchEvent(new CustomEvent('theme-change', {
+        bubbles: true,
+        composed: true,
+        detail: { theme: this._theme, previousTheme: oldValue }
+      }));
+    }
+  }
+
+  get theme() {
+    return this._theme;
+  }
+
+  set theme(value) {
+    this.setAttribute('theme', value);
+  }
+
+  _applyTheme() {
+    document.documentElement.setAttribute('data-theme', this._theme);
+  }
+
+  /**
+   * Toggle between light and dark themes
+   * @returns {string} The new theme
+   */
+  toggleTheme() {
+    const newTheme = this._theme === 'light' ? 'dark' : 'light';
+    this.theme = newTheme;
+    return newTheme;
+  }
+
+  /**
+   * Get a token value from CSS custom properties
+   * @param {string} tokenName - Token name without -- prefix
+   * @returns {string} The computed token value
+   */
+  getToken(tokenName) {
+    return getComputedStyle(document.documentElement)
+      .getPropertyValue(`--${tokenName}`)
+      .trim();
+  }
+}
+
+// Register the custom element
+if (!customElements.get('token-provider')) {
+  customElements.define('token-provider', TokenProvider);
+}
+
+export default TokenProvider;

package/src/token-provider/token-provider.stories.js

@@ -0,0 +1,105 @@
+import './token-provider.js';
+
+import { html } from 'lit';
+
+export default {
+  title: 'Components/Token Provider',
+  component: 'token-provider',
+  argTypes: {
+    theme: {
+      control: 'radio',
+      options: ['light'],
+      description: 'Theme mode (dark coming soon)',
+    },
+  },
+};
+
+export const Default = {
+  args: {
+    theme: 'light',
+  },
+  render: ({ theme }) => {
+    const provider = document.createElement('token-provider');
+    provider.setAttribute('theme', theme);
+
+    const content = document.createElement('div');
+    content.style.cssText = `
+      padding: 2rem;
+      background: var(--ds-color-bg-secondary);
+      border: 1px solid var(--ds-color-border-default);
+      border-radius: 8px;
+    `;
+    content.innerHTML = `
+      <h2 style="font: var(--ds-typo-heading-lg); color: var(--ds-color-text-default); margin-bottom: 1rem;">
+        Sample Content
+      </h2>
+      <p style="font: var(--ds-typo-content-body-regular); color: var(--ds-color-text-default); margin-bottom: 1rem;">
+        This content is wrapped in a token-provider which manages theme context and injects design tokens.
+      </p>
+      <button style="
+        background: var(--ds-color-bg-brand);
+        color: var(--ds-color-text-inverse);
+        padding: var(--ds-space-sm) var(--ds-space-md);
+        border: none;
+        border-radius: var(--ds-radius-action);
+        font: var(--ds-typo-content-body-bold);
+        cursor: pointer;
+      ">
+        Brand Button
+      </button>
+    `;
+
+    provider.appendChild(content);
+    return provider;
+  },
+};
+
+export const Usage = {
+  render: () => {
+    const container = document.createElement('div');
+    container.innerHTML = `
+      <div style="font: var(--ds-typo-content-body-regular); color: var(--ds-color-text-default); max-width: 600px;">
+        <h2 style="font: var(--ds-typo-heading-lg); margin-bottom: 1rem;">
+          How to use Token Provider
+        </h2>
+        
+        <h3 style="font: var(--ds-typo-heading-sm); margin-top: 2rem; margin-bottom: 0.5rem;">
+          HTML
+        </h3>
+        <pre style="
+          background: var(--ds-color-bg-secondary);
+          padding: var(--ds-space-md);
+          border-radius: 4px;
+          overflow-x: auto;
+          font-family: monospace;
+          font-size: 12px;
+        "><code>&lt;token-provider theme="light"&gt;
+  &lt;your-app&gt;&lt;/your-app&gt;
+&lt;/token-provider&gt;</code></pre>
+        
+        <h3 style="font: var(--ds-typo-heading-sm); margin-top: 2rem; margin-bottom: 0.5rem;">
+          JavaScript
+        </h3>
+        <pre style="
+          background: var(--ds-color-bg-secondary);
+          padding: var(--ds-space-md);
+          border-radius: 4px;
+          overflow-x: auto;
+          font-family: monospace;
+          font-size: 12px;
+        "><code>// Get token value
+const provider = document.querySelector('token-provider');
+const tokenValue = provider.getToken('ds-space-md');
+
+// Toggle theme
+provider.toggleTheme();
+
+// Listen to theme changes
+provider.addEventListener('theme-change', (e) => {
+  console.log('New theme:', e.detail.theme);
+});</code></pre>
+      </div>
+    `;
+    return container;
+  },
+};